61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { vOnClickOutside } from '@vueuse/components';
|
|
import { useEventListener, useVModel } from '@vueuse/core';
|
|
import { watch } from 'vue';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
}
|
|
|
|
interface Emit {
|
|
(e: 'update:open', value: boolean): void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
open: false,
|
|
});
|
|
const emit = defineEmits<Emit>();
|
|
|
|
const isOpen = useVModel(props, 'open', emit, {passive: true});
|
|
|
|
watch(isOpen, value => {
|
|
if (value) {
|
|
document.body.classList.add('overflow-hidden');
|
|
} else {
|
|
document.body.classList.remove('overflow-hidden');
|
|
}
|
|
});
|
|
useEventListener('keyup', e => {
|
|
if (e.key === 'Escape') {
|
|
isOpen.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<template v-if="isOpen">
|
|
<div class="fixed inset-0">
|
|
<div class="absolute bg-black opacity-80 inset-0 z-0" />
|
|
<div class="absolute grid inset-0">
|
|
<div class="justify-self-center m-auto" v-on-click-outside="() => isOpen = false">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped lang="postcss">
|
|
|
|
.fade-enter-from, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.fade-enter-active, .fade-leave-active {
|
|
@apply transition-opacity;
|
|
}
|
|
|
|
</style>
|