56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
interface props {
|
|
isShowDimmed?: boolean
|
|
isOutsideClose?: boolean
|
|
modalName?: string
|
|
areaClass?: string
|
|
closeClass?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<props>(), {
|
|
isShowDimmed: true,
|
|
isOutsideClose: false,
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
const isOpen = defineModel<boolean>('isOpen', { default: false })
|
|
|
|
const handleCloseModal = () => {
|
|
emit('close')
|
|
isOpen.value = false
|
|
}
|
|
|
|
const handleOutsideClick = () => {
|
|
if (props.isOutsideClose) {
|
|
handleCloseModal()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="isOpen"
|
|
:class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
|
|
@click="handleOutsideClick"
|
|
>
|
|
<div :class="['modal-area', props.areaClass]" @click.stop>
|
|
<div class="modal-content">
|
|
<slot></slot>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
:class="['modal-close', props.closeClass]"
|
|
@click="handleCloseModal"
|
|
>
|
|
<span class="sr-only">close</span>
|
|
<AtomsIconsCloseLine size="24" color="#333333" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|