From 73b0def082d30f7f3c502bd014c7d1acd41186aa Mon Sep 17 00:00:00 2001
From: webfansplz <308241863@qq.com>
Date: Sat, 5 Mar 2022 17:03:15 +0800
Subject: [PATCH] feat(useElementHover): directive support (#1359)

---
 .../core/useElementHover/directive.test.ts    | 42 +++++++++++++++++++
 packages/core/useElementHover/directive.ts    | 15 +++++++
 packages/core/useElementHover/index.md        | 24 +++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 packages/core/useElementHover/directive.test.ts
 create mode 100644 packages/core/useElementHover/directive.ts

diff --git a/packages/core/useElementHover/directive.test.ts b/packages/core/useElementHover/directive.test.ts
new file mode 100644
index 00000000000..4575591f820
--- /dev/null
+++ b/packages/core/useElementHover/directive.test.ts
@@ -0,0 +1,42 @@
+import { defineComponent } from 'vue-demi'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+
+import { vElementHover } from './directive'
+
+const App = defineComponent({
+  props: {
+    onHover: {
+      type: Function,
+      required: true,
+    },
+  },
+
+  template: `<template>
+  <div v-element-hover="onHover">Hover me</div>
+  </template>
+  `,
+})
+
+describe('vElementHover', () => {
+  let onHover = vi.fn()
+  let wrapper: VueWrapper<any>
+
+  beforeEach(() => {
+    onHover = vi.fn()
+    wrapper = mount(App, {
+      props: {
+        onHover,
+      },
+      global: {
+        directives: {
+          elementHover: vElementHover,
+        },
+      },
+    })
+  })
+
+  it('should be defined', () => {
+    expect(wrapper).toBeDefined()
+  })
+})
diff --git a/packages/core/useElementHover/directive.ts b/packages/core/useElementHover/directive.ts
new file mode 100644
index 00000000000..f2e468cfaf2
--- /dev/null
+++ b/packages/core/useElementHover/directive.ts
@@ -0,0 +1,15 @@
+import { watch } from 'vue-demi'
+import type { FunctionDirective } from 'vue-demi'
+import { useElementHover } from '.'
+
+type BindingValueFunction = (state: boolean) => void
+
+export const vElementHover: FunctionDirective<
+HTMLElement,
+BindingValueFunction
+> = (el, binding) => {
+  if (typeof binding.value === 'function') {
+    const isHovered = useElementHover(el)
+    watch(isHovered, v => binding.value(v))
+  }
+}
diff --git a/packages/core/useElementHover/index.md b/packages/core/useElementHover/index.md
index bdcf09c65ff..221574f6b75 100644
--- a/packages/core/useElementHover/index.md
+++ b/packages/core/useElementHover/index.md
@@ -8,6 +8,8 @@ Reactive element's hover state.
 
 ## Usage
 
+### As a hook 
+
 ```vue
 <template>
   <button ref="myHoverableElement">
@@ -22,3 +24,25 @@ const myHoverableElement = ref()
 const isHovered = useElementHover(myHoverableElement)
 </script>
 ```
+### As a directive
+
+<LearnMoreComponents />
+
+```html
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vElementHover } from '@vueuse/components'
+
+const isHovered = ref(false)
+function onHover(state: boolean) {
+  isHovered.value = state
+}
+</script>
+
+<template>
+  <button v-element-hover="onHover">
+    {{ isHovered ? 'Thank you!' : 'Hover me' }}
+  </button>
+</template>
+
+```
\ No newline at end of file