feat: Adding useClickAway function and tests for useHover function

Author: microcipcip

README.md

@@ -21,11 +21,13 @@ Please check the [documentation](https://microcipcip.github.io/vue-use-kit/) to
 - 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-usehover--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--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)
+  - [`useMouse`](./src/components/useMouse/stories/useMouse.md) — tracks the mouse 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 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
-  - [`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)
+  - [`useTimeout`](./src/components/useTimeout/stories/useTimeout.md) — returns `isReady` 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)
+- UI
+  - [`useClickAway`](./src/components/useClickAway/stories/useClickAway.md) — triggers callback when user clicks outside target area. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--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/useClickAway/index.ts

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

src/components/useClickAway/stories/UseClickAwayDemo.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="dropdown"
+    ref="dropdownRef"
+    :class="{ 'is-active': isDropdownOpen }"
+  >
+    <div class="dropdown-trigger">
+      <button class="button" @click="openDropdownHandler">
+        <span>Click me!</span>
+        <span class="icon is-small"><i class="fas fa-angle-down"></i></span>
+      </button>
+    </div>
+    <div class="dropdown-menu">
+      <div class="dropdown-content">
+        <a href="#" class="dropdown-item" @click.prevent="closeDropdownHandler"
+          >Home</a
+        >
+        <a href="#" class="dropdown-item" @click.prevent="closeDropdownHandler"
+          >About</a
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '../../../api'
+import { useClickAway } from '../../../vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseClickAwayDemo',
+  setup() {
+    const dropdownRef = ref(null)
+    const isDropdownOpen = ref(false)
+    const clickAwayHandler = () => {
+      isDropdownOpen.value = false
+    }
+
+    useClickAway(dropdownRef, clickAwayHandler)
+
+    const openDropdownHandler = () => {
+      isDropdownOpen.value = true
+    }
+
+    const closeDropdownHandler = () => {
+      isDropdownOpen.value = false
+    }
+
+    return {
+      dropdownRef,
+      isDropdownOpen,
+      openDropdownHandler,
+      closeDropdownHandler
+    }
+  }
+})
+</script>

src/components/useClickAway/stories/useClickAway.md

@@ -0,0 +1,50 @@
+# useClickAway
+
+Vue function that triggers callback when user clicks outside of target area.
+
+## Reference
+
+```typescript
+useClickAway(
+  element: Ref<null | Element>,
+  onClickAway: (e: Event) => void,
+  events?: string[]
+): void;
+```
+
+### Parameters
+
+- `element: string` the element to checked for click away events
+- `onClickAway: string` the callback to run when triggering a click away
+- `events: string` list of events to listen to, defaults to `['mousedown', 'touchstart']`
+
+## Usage
+
+```html
+<template>
+  <div ref="targetRef">
+    <span>Target area</span>
+    <div v-if="isDropdownOpen">Dropdown nav</div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref } from '../../../api'
+  import { useClickAway } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseClickAwayDemo',
+    setup() {
+      const targetRef = ref(null)
+      const isDropdownOpen = ref(true)
+      const clickAwayHandler = () => {
+        isDropdownOpen.value = false
+      }
+      useClickAway(targetRef, clickAwayHandler)
+
+      return { targetRef, isDropdownOpen }
+    }
+  })
+</script>
+```

src/components/useClickAway/stories/useClickAway.story.ts

@@ -0,0 +1,26 @@
+import { storiesOf } from '@storybook/vue'
+import StoryTitle from '../../../helpers/StoryTitle.vue'
+import UseClickAwayDemo from './UseClickAwayDemo.vue'
+
+const storiesPath = __dirname
+const notes = require('./useClickAway.md').default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseClickAwayDemo },
+  template: `
+    <div class="container">
+      <story-title stories-path="${storiesPath}" file-name="UseClickAwayDemo.vue">
+        <template v-slot:title></template>
+        <template v-slot:intro>
+          <p>
+            Open the dropdown below then <strong>click anywhere outside</strong> to close it.   
+          </p>
+        </template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('ui|useClickAway', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useClickAway/useClickAway.spec.ts

@@ -0,0 +1,38 @@
+import { mount } from '../../helpers/test'
+import { ref } from '../../api'
+import { useClickAway } from '../../vue-use-kit'
+
+const testComponent = () => ({
+  template: `
+    <div id="outside-el">
+      <div ref="dropdownRef" id="dropdown-trigger"></div>
+      <div id="dropdown" v-if="isDropdownOpen"></div>
+    </div>
+  `,
+  setup() {
+    const dropdownRef = ref(null)
+    const isDropdownOpen = ref(false)
+
+    useClickAway(dropdownRef, () => {
+      isDropdownOpen.value = true
+    })
+
+    return { dropdownRef, isDropdownOpen }
+  }
+})
+
+describe('useClickAway', () => {
+  it('should call document.addEventListener', async () => {
+    const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
+    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
+    expect(addEventListenerSpy).not.toHaveBeenCalled()
+    const wrapper = mount(testComponent())
+    await wrapper.vm.$nextTick()
+    expect(addEventListenerSpy).toHaveBeenCalled()
+
+    // Destroy instance to check if the remove event listener is being called
+    wrapper.destroy()
+    expect(removeEventListenerSpy).toHaveBeenCalled()
+    addEventListenerSpy.mockClear()
+  })
+})

src/components/useClickAway/useClickAway.ts

@@ -0,0 +1,23 @@
+import { onMounted, onUnmounted, Ref } from '../../api'
+
+const defaultEvents = ['mousedown', 'touchstart']
+
+export function useClickAway(
+  element: Ref<null | Element>,
+  onClickAway: (e: Event) => void,
+  events = defaultEvents
+) {
+  const handler = (e: Event) => {
+    if (element.value && !element.value.contains(e.target as Node)) {
+      onClickAway(e)
+    }
+  }
+
+  onMounted(() => {
+    events.forEach(evtName => document.addEventListener(evtName, handler))
+  })
+
+  onUnmounted(() => {
+    events.forEach(evtName => document.removeEventListener(evtName, handler))
+  })
+}

src/components/useHover/useHover.spec.ts

@@ -1,5 +1,35 @@
+import { mount } from '../../helpers/test'
+import { ref } from '../../api'
+import { useHover } from '../../vue-use-kit'
+
+const elementContainer: any = { ref: { value: null } }
+const testComponent = () => ({
+  template: `
+    <div id="isHovered" v-if="isHovered"></div>
+  `,
+  setup() {
+    const elRef = ref(document.body as any)
+    const isHovered = useHover(elRef)
+    return { isHovered }
+  }
+})
+
 describe('useHover', () => {
-  it('should do something', () => {
-    // Add test here
+  it('should call document.body hover events', () => {
+    const addEventListenerSpy = jest.spyOn(document.body, 'addEventListener')
+    const removeEventListenerSpy = jest.spyOn(
+      document.body,
+      'removeEventListener'
+    )
+    const wrapper = mount(testComponent())
+    expect(addEventListenerSpy).toHaveBeenCalled()
+    expect(removeEventListenerSpy).not.toHaveBeenCalled()
+    wrapper.destroy()
+    expect(removeEventListenerSpy).toHaveBeenCalled()
+  })
+
+  it('should return isHovered false by default', () => {
+    const wrapper = mount(testComponent())
+    expect(wrapper.find('#isHovered').exists()).toBe(false)
   })
 })

src/components/useSampleComponent/stories/useSampleComponent.md

@@ -5,7 +5,7 @@ Vue function that...
 ## Reference
 
 ```typescript
-// const valueReturned = useSampleComponent()
+// useSampleComponent()
 ```
 
 ### Parameters

src/vue-use-kit.ts

@@ -1,4 +1,5 @@
 export * from './components/getQuery'
+export * from './components/useClickAway'
 export * from './components/useMedia'
 export * from './components/useMouse'
 export * from './components/useMouseElement'