feat(ui): delay closing of Popover

front/src/components/ui/Popover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, inject, provide, shallowReactive, watch, onScopeDispose } from 'vue'
-import { whenever, useElementBounding, onClickOutside } from '@vueuse/core'
+import { whenever, useElementBounding, onClickOutside, refDebounced } from '@vueuse/core'
 
 import { isMobileView, useScreenSize } from '~/composables/screen'
 import { POPOVER_INJECTION_KEY, POPOVER_CONTEXT_INJECTION_KEY } from '~/injection-keys'
@@ -13,6 +13,8 @@ import { type ColorProps, type DefaultProps, type RaisedProps, color } from '~/c
 */
 
 const isOpen = defineModel<boolean>({ default: false })
+// Delay closing by 300ms
+const isOpenDelayed = refDebounced(isOpen, () => isOpen.value ? 0 : 300)
 
 const { positioning = 'vertical', ...colorProps } = defineProps<{
   positioning?:'horizontal' | 'vertical'
@@ -136,7 +138,7 @@ watch(isOpen, (isOpen) => {
   </div>
 
   <teleport
-    v-if="isOpen"
+    v-if="isOpenDelayed"
     to="body"
   >
     <div
@@ -152,7 +154,10 @@ watch(isOpen, (isOpen) => {
         v-bind="color(colorProps)()"
         style="display:flex; flex-direction:column;"
       >
-        <slot name="items" />
+        <slot
+          name="items"
+          :close="() => isOpen = false"
+        />
       </div>
     </div>
   </teleport>