chore(Dropdown|Popover|Tooltip): hover delay (#104)

src/runtime/components/elements/Dropdown.vue

@@ -129,6 +129,14 @@ const props = defineProps({
   popperOptions: {
     type: Object as PropType<PopperOptions>,
     default: () => {}
+  },
+  openDelay: {
+    type: Number,
+    default: 50
+  },
+  closeDelay: {
+    type: Number,
+    default: 0
   }
 })
 
@@ -194,7 +202,7 @@ function onMouseOver () {
   openTimeout = openTimeout || setTimeout(() => {
     menuApi.value.openMenu && menuApi.value.openMenu()
     openTimeout = null
-  }, 50)
+  }, props.openDelay)
 }
 
 function onMouseLeave () {
@@ -214,7 +222,7 @@ function onMouseLeave () {
   closeTimeout = closeTimeout || setTimeout(() => {
     menuApi.value.closeMenu && menuApi.value.closeMenu()
     closeTimeout = null
-  }, 0)
+  }, props.closeDelay)
 }
 </script>
 

src/runtime/components/overlays/Popover.vue

@@ -56,6 +56,14 @@ const props = defineProps({
   popperOptions: {
     type: Object as PropType<PopperOptions>,
     default: () => {}
+  },
+  openDelay: {
+    type: Number,
+    default: 50
+  },
+  closeDelay: {
+    type: Number,
+    default: 0
   }
 })
 
@@ -90,6 +98,7 @@ function onMouseOver () {
   if (props.mode !== 'hover' || !popoverApi.value) {
     return
   }
+
   // cancel programmed closing
   if (closeTimeout) {
     clearTimeout(closeTimeout)
@@ -102,13 +111,14 @@ function onMouseOver () {
   openTimeout = openTimeout || setTimeout(() => {
     popoverApi.value.togglePopover && popoverApi.value.togglePopover()
     openTimeout = null
-  }, 50)
+  }, props.openDelay)
 }
 
 function onMouseLeave () {
   if (props.mode !== 'hover' || !popoverApi.value) {
     return
   }
+
   // cancel programmed opening
   if (openTimeout) {
     clearTimeout(openTimeout)
@@ -121,7 +131,7 @@ function onMouseLeave () {
   closeTimeout = closeTimeout || setTimeout(() => {
     popoverApi.value.closePopover && popoverApi.value.closePopover()
     closeTimeout = null
-  }, 0)
+  }, props.closeDelay)
 }
 </script>
 

src/runtime/components/overlays/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="trigger" :class="wrapperClass" @mouseover="open = true" @mouseleave="open = false">
+  <div ref="trigger" :class="wrapperClass" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
     <slot :open="open">
       Hover me
     </slot>
@@ -52,6 +52,14 @@ const props = defineProps({
   popperOptions: {
     type: Object as PropType<PopperOptions>,
     default: () => {}
+  },
+  openDelay: {
+    type: Number,
+    default: 0
+  },
+  closeDelay: {
+    type: Number,
+    default: 0
   }
 })
 
@@ -60,6 +68,43 @@ const popperOptions = computed<PopperOptions>(() => defu({}, props.popperOptions
 const [trigger, container] = usePopper(popperOptions.value)
 
 const open = ref(false)
+
+let openTimeout: NodeJS.Timeout | null = null
+let closeTimeout: NodeJS.Timeout | null = null
+
+// Methods
+
+function onMouseOver () {
+  // cancel programmed closing
+  if (closeTimeout) {
+    clearTimeout(closeTimeout)
+    closeTimeout = null
+  }
+  // dropdown already open
+  if (open.value) {
+    return
+  }
+  openTimeout = openTimeout || setTimeout(() => {
+    open.value = true
+    openTimeout = null
+  }, props.openDelay)
+}
+
+function onMouseLeave () {
+  // cancel programmed opening
+  if (openTimeout) {
+    clearTimeout(openTimeout)
+    openTimeout = null
+  }
+  // dropdown already closed
+  if (!open.value) {
+    return
+  }
+  closeTimeout = closeTimeout || setTimeout(() => {
+    open.value = false
+    closeTimeout = null
+  }, props.closeDelay)
+}
 </script>
 
 <script lang="ts">