<script setup lang="ts">
import {vOnClickOutside} from '@vueuse/components';
import {useEventListener} from '@vueuse/core';
import {watch} from 'vue';

const open = defineModel('open', { default: false });

watch(open, value => {
    if (value) {
        document.body.classList.add('overflow-hidden');
    } else {
        document.body.classList.remove('overflow-hidden');
    }
});
useEventListener('keyup', e => {
    if (e.key === 'Escape') {
        open.value = false;
    }
});
</script>

<template>
    <Transition name="fade">
        <template v-if="open">
            <div class="fixed inset-0 z-10">
                <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="() => open = false">
                        <slot />
                    </div>
                </div>
            </div>
        </template>
    </Transition>
</template>

<style scoped>
@reference "@/style.css";
.fade-enter-from, .fade-leave-to {
    @apply opacity-0;
}

.fade-enter-active, .fade-leave-active {
    @apply transition-opacity;
}
</style>
