implement toolbar actions

src/components/Modal.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 
+const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)
 const show = ref(false)
 
 const open = () => (show.value = true)
-const close = () => (show.value = false)
+const close = async () => {
+  return new Promise((resolve) => {
+    modal.value?.addEventListener('transitionend', () => resolve(true))
+    show.value = false
+    // nextTick(() => {
+    //   console.log('done!')
+    //   resolve(true)
+    // })
+  })
+}
 
 const slotProps = { open, close }
 
@@ -27,7 +37,7 @@ const onLeave = (el: Element, done: () => void): void => {
   <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 bg-neutral-800 bg-opacity-60" v-if="show" ref="modal">
         <div class="modal-box" ref="modalBox">
           <h3 class="text-lg font-bold" v-if="$slots.title"><slot name="title" /></h3>
           <p class="py-4">