From 232834cb066265618653714d4514e253e7e39a5e Mon Sep 17 00:00:00 2001
From: geekreal <42457717+LockingReal@users.noreply.github.com>
Date: Sat, 18 Feb 2023 17:22:11 +0800
Subject: [PATCH] feat(useElementHover): give hook delay properties (#2741)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/core/useElementHover/demo.vue |  2 +-
 packages/core/useElementHover/index.ts | 31 +++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/core/useElementHover/demo.vue b/packages/core/useElementHover/demo.vue
index f2d6af1d0ef..ffd74005939 100644
--- a/packages/core/useElementHover/demo.vue
+++ b/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>
diff --git a/packages/core/useElementHover/index.ts b/packages/core/useElementHover/index.ts
index 28681838a38..714babe8316 100644
--- a/packages/core/useElementHover/index.ts
+++ b/packages/core/useElementHover/index.ts
@@ -2,12 +2,37 @@ import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
 import type { MaybeComputedRef } from '@vueuse/shared'
 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
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    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
 }