Arno Kaimbacher
a7142f694f
All checks were successful
CI Pipeline / japa-tests (push) Successful in 51s
- npm updates - new SearchMap.vue component
46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script setup>
|
|
import { StyleService } from '@/Stores/style';
|
|
|
|
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>
|