tracking

src/Modal.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+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" @click="isOpen = false">
+                <div class="absolute bg-black opacity-80 inset-0 z-0" />
+                <div class="absolute grid inset-0">
+                    <div class="justify-self-center" @click.stop>
+                        <slot />
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Transition>
+</template>
+
+<style scoped>
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 100ms ease-out;
+}
+
+</style>