feat(useElementHover): introduce delay hooks

packages/core/useElementHover/demo.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { useElementHover } from '@vueuse/core'
 
 const el = ref<HTMLButtonElement>()
-const isHovered = useElementHover(el)
+const isHovered = useElementHover(el, { delayEnter: 200, delayLeave: 600 })
 </script>
 
 <template>

packages/core/useElementHover/index.ts

@@ -1,13 +1,35 @@
 import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeComputedRef } from '@vueuse/shared/utils/types'
 import { useEventListener } from '../useEventListener'
+import type { ConfigurableWindow } from '../_configurable'
 
-export function useElementHover(el: MaybeComputedRef<EventTarget | null | undefined>): Ref<boolean> {
+export interface UseElementHoverOptions extends ConfigurableWindow {
+  delayEnter?: number
+  delayLeave?: number
+}
+
+export function useElementHover(el: MaybeComputedRef<EventTarget | null | undefined>, options: UseElementHoverOptions = {}): Ref<boolean> {
+  const delayEnter = options ? options.delayEnter : 0
+  const delayLeave = options ? options.delayLeave : 0
   const isHovered = ref(false)
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  const toggle = (entering: boolean) => {
+    const delay = entering ? delayEnter : delayLeave
+    clearTimeout(timer)
+
+    if (delay)
+      timer = setTimeout(() => isHovered.value = entering, delay)
+    else
+      isHovered.value = entering
+  }
+
+  if (!window)
+    return isHovered
 
-  useEventListener(el, 'mouseenter', () => isHovered.value = true)
-  useEventListener(el, 'mouseleave', () => isHovered.value = false)
+  useEventListener(el, 'mouseenter', () => toggle(true), { passive: true })
+  useEventListener(el, 'mouseleave', () => toggle(false), { passive: true })
 
   return isHovered
 }