45 lines
972 B
Vue
45 lines
972 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 모달 제목 요소 ID */
|
|
labelledBy: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
/** 오버레이에 추가할 화면별 클래스 */
|
|
rootClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 패널에 추가할 화면별 클래스 */
|
|
panelClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 오버레이 z-index 클래스 */
|
|
zClass: {
|
|
type: String,
|
|
default: 'z-[60]'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="admin-modal-frame fixed inset-0 grid place-items-center bg-black/40 px-5 py-8"
|
|
:class="[zClass, rootClass]"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-labelledby="props.labelledBy"
|
|
@click.self="emit('close')"
|
|
>
|
|
<section
|
|
class="admin-modal-frame__panel max-h-[90vh] w-full overflow-y-auto rounded border border-line bg-white p-5 shadow-xl"
|
|
:class="panelClass"
|
|
>
|
|
<slot />
|
|
</section>
|
|
</div>
|
|
</template>
|