first commit

components/Ml/Modal/MlModal.vue

@@ -0,0 +1,68 @@
+<template>
+    <transition name="fade">
+        <div
+            v-if="modelValue"
+            v-block-scroll="modelValue"
+            class="top-0 left-0 z-[100] fixed flex justify-center items-center bg-gray-900 opacity-80 w-screen h-screen"
+            @click.self="emitClose"
+        >
+            <div class="bg-gray-100 dark:bg-gray-700 border rounded w-1/2">
+                <div class="flex justify-between p-2 border-b">
+                    <h2 class="pr-4 font-bold">Header title</h2>
+                    <button class="border" @click="emitClose">
+                        <XMarkIcon class="size-6"></XMarkIcon>
+                    </button>
+                </div>
+                <div class="p-4">
+                    <slot>
+                        <RocketLaunchIcon class="float-left mr-4 text-green-600 size-20"></RocketLaunchIcon>
+                        <p>content</p>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script setup lang="ts">
+import { RocketLaunchIcon, XMarkIcon } from '@heroicons/vue/24/solid';
+import type { ModalProps } from './types';
+const props = withDefaults(defineProps<ModalProps>(), {});
+
+onMounted(() => {
+    document.addEventListener('keydown', closeModalKeyBoardEvent);
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener('keydown', closeModalKeyBoardEvent);
+});
+
+function closeModalKeyBoardEvent(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+        emitClose();
+    }
+}
+
+const emit = defineEmits<{
+    (name: 'update:modelValue', info: boolean): void;
+}>();
+
+function emitClose() {
+    emit('update:modelValue', false);
+}
+</script>
+
+<style scoped>
+.fade-enter-active {
+    transition: all 0.2s ease-out;
+}
+
+.fade-leave-active {
+    transition: all 0.4s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

components/Ml/Modal/types.ts

@@ -0,0 +1,3 @@
+export type ModalProps = {
+    modelValue?: boolean;
+};