67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
interface props {
|
|
isShowDimmed?: boolean
|
|
contentText?: string
|
|
confirmButtonText?: string
|
|
cancelButtonText?: string
|
|
isOutsideClose?: boolean
|
|
className?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<props>(), {
|
|
isShowDimmed: false,
|
|
isOutsideClose: true,
|
|
})
|
|
|
|
const emit = defineEmits(['cancelButtonEvent', 'confirmButtonEvent'])
|
|
|
|
const isOpen = defineModel<boolean>('isOpen', { default: false })
|
|
|
|
const setButtonEvent = (event: () => void | void) => {
|
|
if (event) {
|
|
return event()
|
|
}
|
|
isOpen.value = false
|
|
}
|
|
|
|
const handleOutsideClick = () => {
|
|
if (props.isOutsideClose) {
|
|
isOpen.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="opacity-on">
|
|
<div
|
|
v-if="isOpen"
|
|
:class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
|
|
@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">
|
|
<AtomsButtonModal
|
|
variant="outlined"
|
|
@click="setButtonEvent(() => emit('cancelButtonEvent'))"
|
|
>
|
|
{{ props.cancelButtonText || '취소' }}
|
|
</AtomsButtonModal>
|
|
<AtomsButtonModal
|
|
@click="setButtonEvent(() => emit('confirmButtonEvent'))"
|
|
>
|
|
{{ props.confirmButtonText || '확인' }}
|
|
</AtomsButtonModal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|