66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
interface props {
|
|
isShowDimmed?: boolean
|
|
contentText?: string
|
|
confirmButtonText?: string
|
|
isOutsideClose?: boolean
|
|
modalName?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<props>(), {
|
|
isShowDimmed: false,
|
|
isOutsideClose: false,
|
|
})
|
|
|
|
const emit = defineEmits(['confirmButtonEvent'])
|
|
|
|
const isOpen = defineModel<boolean>('isOpen', { default: false })
|
|
|
|
const setButtonEvent = (event?: () => void | void) => {
|
|
if (typeof event === 'function') {
|
|
return event()
|
|
}
|
|
isOpen.value = false
|
|
}
|
|
|
|
const handleOutsideClick = () => {
|
|
if (props.isOutsideClose) {
|
|
isOpen.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="isOpen"
|
|
:class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
|
|
@click="handleOutsideClick"
|
|
>
|
|
<div class="modal-area" @click.stop>
|
|
<div class="modal-content">
|
|
<p
|
|
v-if="props.contentText"
|
|
v-dompurify-html="props.contentText"
|
|
class="content-text"
|
|
></p>
|
|
<slot></slot>
|
|
<div class="content-btns">
|
|
<AtomsButtonVariant
|
|
@click="setButtonEvent(() => emit('confirmButtonEvent'))"
|
|
>
|
|
{{ props.confirmButtonText || '확인' }}
|
|
</AtomsButtonVariant>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-area {
|
|
@apply max-w-[312px] p-6 bg-white rounded-[20px];
|
|
}
|
|
</style>
|