68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { DialogParams } from '#layers/types/components/modal'
|
|
|
|
const props = withDefaults(defineProps<DialogParams>(), {
|
|
isShowDimmed: true,
|
|
isOutsideClose: false,
|
|
})
|
|
|
|
const emit = defineEmits(['cancelButtonEvent', 'confirmButtonEvent'])
|
|
|
|
const { tm } = useI18n()
|
|
|
|
const isOpen = defineModel<boolean>('isOpen', { default: false })
|
|
|
|
const setButtonEvent = (event?: () => void) => {
|
|
if (event) {
|
|
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">
|
|
<AtomsButtonModal
|
|
variant="outlined"
|
|
@click="setButtonEvent(() => emit('cancelButtonEvent'))"
|
|
>
|
|
{{ props.cancelButtonText || tm('Text_Cancel') }}
|
|
</AtomsButtonModal>
|
|
<AtomsButtonModal
|
|
@click="setButtonEvent(() => emit('confirmButtonEvent'))"
|
|
>
|
|
{{ props.confirmButtonText || tm('Text_Confirm') }}
|
|
</AtomsButtonModal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-area {
|
|
@apply max-w-[312px] p-6 bg-white rounded-[20px];
|
|
}
|
|
</style>
|