2023-03-03 15:54:28 +00:00
|
|
|
<script setup>
|
2023-03-17 15:13:37 +00:00
|
|
|
import { StyleService } from '@/Stores/style';
|
2023-03-03 15:54:28 +00:00
|
|
|
|
|
|
|
|
defineProps({
|
|
|
|
|
zIndex: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: 'z-50'
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['overlay-click'])
|
|
|
|
|
|
|
|
|
|
const overlayClick = event => {
|
|
|
|
|
emit('overlay-click', event)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const styleStore = StyleService()
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="flex items-center flex-col justify-center overflow-hidden fixed inset-0" :class="zIndex">
|
|
|
|
|
<transition enter-active-class="transition duration-150 ease-in" enter-from-class="opacity-0"
|
|
|
|
|
enter-to-class="opacity-100" leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100"
|
|
|
|
|
leave-to-class="opacity-0">
|
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
|
|
|
|
|
:class="styleStore.overlayStyle" @click="overlayClick" />
|
|
|
|
|
</transition>
|
|
|
|
|
<transition enter-active-class="transition duration-100 ease-out" enter-from-class="transform scale-95 opacity-0"
|
|
|
|
|
enter-to-class="transform scale-100 opacity-100" leave-active-class="animate-fade-out">
|
|
|
|
|
<slot />
|
|
|
|
|
</transition>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
