feat: Added useHover function

Author: microcipcip

README.md

@@ -19,11 +19,13 @@ Please check the [documentation](https://microcipcip.github.io/vue-use-kit/) to
 ## APIs
 
 - Sensors
+  - [`useHover`](./src/components/useHover/stories/useHover.md) — tracks mouse hover state of a given element. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--basic-demo)
   - [`useMedia`](./src/components/useMedia/stories/useMedia.md) — tracks state of a CSS media query. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--basic-demo)
   - [`useMouse`](./src/components/useMouse/stories/useMouse.md) — tracks the mouse's position. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--demo)
   - [`useMouseElement`](./src/components/useMouseElement/stories/useMouseElement.md) — tracks the mouse's position relative to given element. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)
 - Animations
-  - [`useTimeoutFn`](./src/components/useTimeoutFn/stories/useTimeoutFn.md) — calls function after a timeout. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
+  - [`useTimeout`](./src/components/useTimeout/stories/useTimeout.md) — returns `isReady` prop as `true` when timer is completed. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeout--demo)
+  - [`useTimeoutFn`](./src/components/useTimeoutFn/stories/useTimeoutFn.md) — calls function when timer is completed. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
 - Utils
   - [`getQuery`](./src/components/getQuery/stories/getQuery.md) — get a CSS media query string. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/utils-getquery--demo)
 

src/components/useHover/index.ts

@@ -0,0 +1 @@
+export * from './useHover'

src/components/useHover/stories/UseHoverDemo.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="use-hover" ref="useHoverRef">
+    <div>
+      <div class="use-hover__emoji" v-if="!isHovered">😴</div>
+      <div class="use-hover__emoji" v-else>😃</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '../../../api'
+import { useHover } from '../../../vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseHoverDemo',
+  setup() {
+    const useHoverRef = ref(null)
+    const isHovered = useHover(useHoverRef)
+    return { isHovered, useHoverRef }
+  }
+})
+</script>
+
+<style>
+.use-hover {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  background: #b2b594;
+}
+
+.use-hover__emoji {
+  font-size: 90px;
+}
+</style>

src/components/useHover/stories/useHover.md

@@ -0,0 +1,43 @@
+# useHover
+
+Vue function that tracks mouse hover state of a given element.
+
+## Reference
+
+```typescript
+useHover(element: Ref<null | Element>): Ref<boolean>
+```
+
+### Parameters
+
+- `element: Ref<null | Element>` the element used for tracking the mouse hover state
+
+### Returns
+
+- `isHovered: boolean` whether the element is currently hovered or not
+
+## Usage
+
+```html
+<template>
+  <div ref="useHoverRef">
+    <div v-if="!isHovered">😴</div>
+    <div v-else>😃</div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref } from '../../../api'
+  import { useHover } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseHoverDemo',
+    setup() {
+      const useHoverRef = ref(null)
+      const isHovered = useHover(useHoverRef)
+      return { isHovered, useHoverRef }
+    }
+  })
+</script>
+```

src/components/useHover/stories/useHover.story.ts

@@ -0,0 +1,24 @@
+import { storiesOf } from '@storybook/vue'
+import StoryTitle from '../../../helpers/StoryTitle.vue'
+import UseHoverDemo from './UseHoverDemo.vue'
+
+const storiesPath = __dirname
+const notes = require('./useHover.md').default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseHoverDemo },
+  template: `
+    <div class="container">
+      <story-title stories-path="${storiesPath}" file-name="UseHoverDemo.vue">
+        <template v-slot:title></template>
+        <template v-slot:intro>
+          Try to move the mouse hover the box below to see the emoji change of expression. 
+        </template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('sensors|useHover', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useHover/useHover.spec.ts

@@ -0,0 +1,5 @@
+describe('useHover', () => {
+  it('should do something', () => {
+    // Add test here
+  })
+})

src/components/useHover/useHover.ts

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted, Ref } from '../../api'
+
+export function useHover(element: Ref<null | Element>) {
+  const isHovered = ref(false)
+
+  const mouseEnterHandler = (e: Event) => {
+    isHovered.value = true
+  }
+
+  const mouseLeaveHandler = (e: Event) => {
+    isHovered.value = false
+  }
+
+  onMounted(() => {
+    if (!element.value) return
+    element.value.addEventListener('mouseenter', mouseEnterHandler)
+    element.value.addEventListener('mouseleave', mouseLeaveHandler)
+  })
+
+  onUnmounted(() => {
+    if (!element.value) return
+    element.value.removeEventListener('mouseenter', mouseEnterHandler)
+    element.value.removeEventListener('mouseleave', mouseLeaveHandler)
+  })
+
+  return isHovered
+}

src/components/useMouseElement/stories/UseMouseElementDemo.vue

@@ -35,27 +35,27 @@
           </td>
         </tr>
         <tr>
-          <td>el.x, el.y</td>
+          <td>elInfoX, elInfoY</td>
           <td>
             Emoji element position <strong>relative to the document</strong>
           </td>
           <td>
-            <span>{{ toInt(el.x) }}px</span>
+            <span>{{ toInt(elInfoX) }}px</span>
           </td>
           <td>
-            <span>{{ toInt(el.y) }}px</span>
+            <span>{{ toInt(elInfoY) }}px</span>
           </td>
         </tr>
         <tr>
-          <td>el.w, el.h</td>
+          <td>elInfoW, elInfoH</td>
           <td>
             Emoji element width and height
           </td>
           <td>
-            <span>{{ toInt(el.w) }}px</span>
+            <span>{{ toInt(elInfoW) }}px</span>
           </td>
           <td>
-            <span>{{ toInt(el.h) }}px</span>
+            <span>{{ toInt(elInfoH) }}px</span>
           </td>
         </tr>
       </tbody>
@@ -76,7 +76,16 @@ export default Vue.extend({
     const emojiRef = ref(null)
     let pauseEmoji = ref(true)
 
-    const { docX, docY, elX, elY, el } = useMouseElement(emojiRef)
+    const {
+      docX,
+      docY,
+      elX,
+      elY,
+      elInfoX,
+      elInfoY,
+      elInfoW,
+      elInfoH
+    } = useMouseElement(emojiRef)
 
     const emojiStyle = computed(() => {
       if (pauseEmoji.value) return
@@ -114,7 +123,10 @@ export default Vue.extend({
       docY,
       elX,
       elY,
-      el
+      elInfoX,
+      elInfoY,
+      elInfoW,
+      elInfoH
     }
   }
 })

src/components/useMouseElement/stories/useMouseElement.md

@@ -11,12 +11,10 @@ useMouseElement(element: Ref<null | Element>): {
     docY: Ref<number>;
     elX: Ref<number>;
     elY: Ref<number>;
-    el: Ref<{
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    }>;
+    elInfoX: Ref<number>;
+    elInfoY: Ref<number>;
+    elInfoW: Ref<number>;
+    elInfoH: Ref<number>;
 }
 ```
 
@@ -30,10 +28,10 @@ useMouseElement(element: Ref<null | Element>): {
 - `docY: number` the mouse `y` position relative to the document
 - `elX: number` the mouse `x` position relative to the given element
 - `elY: number` the mouse `y` position relative to the given element
-- `el.x: number` the element `x` position
-- `el.y: number` the element `y` position
-- `el.w: number` the element `width` value
-- `el.h: number` the element `height` value
+- `elInfoX: number` the element `x` position
+- `elInfoY: number` the element `y` position
+- `elInfoW: number` the element `width` value
+- `elInfoH: number` the element `height` value
 
 ## Usage
 

src/components/useMouseElement/useMouseElement.spec.ts

@@ -4,21 +4,30 @@ import { useMouseElement } from '../../vue-use-kit'
 
 const testComponent = () => ({
   template: `
-    <div ref="div">
+    <div ref="divRef">
       <div id="docX" v-if="docX" />
       <div id="docY" v-if="docY" />
       <div id="elX" v-if="elX" />
       <div id="elY" v-if="elY" />
-      <div id="el.x" v-if="el.x" />
-      <div id="el.y" v-if="el.y" />
-      <div id="el.w" v-if="el.w" />
-      <div id="el.h" v-if="el.h" />
+      <div id="elInfoX" v-if="elInfoX" />
+      <div id="elInfoY" v-if="elInfoY" />
+      <div id="elInfoW" v-if="elInfoW" />
+      <div id="elInfoH" v-if="elInfoH" />
     </div>
   `,
   setup() {
     const divRef = ref(null)
-    const { docX, docY, elX, elY, el } = useMouseElement(divRef)
-    return { docX, docY, elX, elY, el }
+    const {
+      docX,
+      docY,
+      elX,
+      elY,
+      elInfoX,
+      elInfoY,
+      elInfoW,
+      elInfoH
+    } = useMouseElement(divRef)
+    return { docX, docY, elX, elY, elInfoX, elInfoY, elInfoW, elInfoH, divRef }
   }
 })
 
@@ -44,9 +53,9 @@ describe('useMouseElement', () => {
     expect(wrapper.find('#docY').exists()).toBe(false)
     expect(wrapper.find('#elX').exists()).toBe(false)
     expect(wrapper.find('#elY').exists()).toBe(false)
-    expect(wrapper.find('#el.x').exists()).toBe(false)
-    expect(wrapper.find('#el.y').exists()).toBe(false)
-    expect(wrapper.find('#el.w').exists()).toBe(false)
-    expect(wrapper.find('#el.h').exists()).toBe(false)
+    expect(wrapper.find('#elInfoX').exists()).toBe(false)
+    expect(wrapper.find('#elInfoY').exists()).toBe(false)
+    expect(wrapper.find('#elInfoW').exists()).toBe(false)
+    expect(wrapper.find('#elInfoH').exists()).toBe(false)
   })
 })