add modal component

src/components/Modal.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+
+const modalBox = ref(null)
+const show = ref(false)
+
+const open = () => (show.value = true)
+const close = () => (show.value = false)
+
+const slotProps = { open, close }
+
+onClickOutside(modalBox, () => close())
+
+const onEnter = (el: Element, done: () => void): void => {
+  setTimeout(() => {
+    el.classList.add('modal-open')
+    done()
+  })
+}
+
+const onLeave = (el: Element, done: () => void): void => {
+  el.classList.remove('modal-open')
+  el.addEventListener('transitionend', () => done())
+}
+</script>
+<template>
+  <slot name="activator" v-bind="slotProps"></slot>
+  <Teleport to="body">
+    <Transition @enter="onEnter" @leave="onLeave">
+      <div class="modal bg-neutral-800 bg-opacity-60" v-if="show">
+        <div class="modal-box" ref="modalBox">
+          <h3 class="text-lg font-bold" v-if="$slots.title"><slot name="title" /></h3>
+          <p class="py-4">
+            <slot />
+          </p>
+          <div class="modal-action">
+            <slot name="actions" v-bind="slotProps">
+              <button class="btn-sm btn" @click="close">Close</button>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>