docs(useBeforeUnload): Adding docs for useBeforeUnload

Author: microcipcip

src/components/useBeforeUnload/stories/useBeforeUnload.md

@@ -5,19 +5,56 @@ Vue function that shows browser alert when user try to reload or close the page.
 ## Reference
 
 ```typescript
-// function useBeforeUnload()
+function useBeforeUnload(
+  isPageDirty: Ref<boolean>,
+  runOnMount?: boolean
+): {
+  isTracking: Ref<boolean>
+  start: () => void
+  stop: () => void
+}
 ```
 
 ### Parameters
 
-- `value: string` lorem ipsa
+- `isPageDirty: Ref<boolean>` when this value is `true` value, it will show the browser alert on page change
+- `runOnMount: boolean` whether to listen to the 'beforeunload' event on mount, `true` by default
 
 ### Returns
 
-- `value: Ref<string>` lorem ipsa
+- `isTracking: Ref<boolean>` whether this function events are running or not
+- `start: Function` the function used to start tracking page change or reload
+- `stop: Function` the function used to stop tracking page change or reload
 
 ## Usage
 
 ```html
-<template></template>
+<template>
+  <div>
+    <div>
+      <a href="https://google.com">Change page</a>
+    </div>
+    <div>
+      <button @click="start" v-if="!isTracking">
+        Start tracking page change or reload
+      </button>
+      <button @click="stop" v-else>Stop tracking page change or reload</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref, watch } from '@vue/composition-api'
+  import { useBeforeUnload } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseBeforeUnloadDemo',
+    setup() {
+      const isPageDirty = ref(true)
+      const { isTracking, start, stop } = useBeforeUnload(isPageDirty)
+      return { isTracking, start, stop, isPageDirty }
+    }
+  })
+</script>
 ```

src/components/useClickAway/useClickAway.spec.ts

@@ -26,7 +26,7 @@ const testComponent = () => ({
 })
 
 describe('useClickAway', () => {
-  it('should call document.addEventListener', async () => {
+  it('should call addEventListener', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
     const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())

src/components/useIdle/useIdle.spec.ts

@@ -23,7 +23,7 @@ describe('useIdle', () => {
   // the total of the events is idleEventsList + visibilitychange
   const totEvents = idleEventsList.length + 1
 
-  it('should call document.addEventListener', async () => {
+  it('should call addEventListener', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
     const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())
@@ -43,7 +43,7 @@ describe('useIdle', () => {
     )
   })
 
-  it('should call document.addEventListener again when start is called', async () => {
+  it('should call addEventListener again when start is called', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
     const wrapper = mount(testComponent())
     expect(addEventListenerSpy).toHaveBeenCalledTimes(totEvents)
@@ -55,7 +55,7 @@ describe('useIdle', () => {
     expect(addEventListenerSpy).toHaveBeenCalledTimes(totEvents * 2)
   })
 
-  it('should call document.removeEventListener when stop is called', async () => {
+  it('should call removeEventListener when stop is called', async () => {
     const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())
     wrapper.find('#stop').trigger('click')

src/components/useLocation/useLocation.spec.ts

@@ -55,7 +55,7 @@ describe('useLocation', () => {
     })
   })
 
-  it('should call document.addEventListener again when start is called', async () => {
+  it('should call addEventListener again when start is called', async () => {
     const addEventListenerSpy = jest.spyOn(window, 'addEventListener')
     const wrapper = mount(testComponent())
     expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length)
@@ -67,7 +67,7 @@ describe('useLocation', () => {
     expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length * 2)
   })
 
-  it('should call document.removeEventListener when stop is called', async () => {
+  it('should call removeEventListener when stop is called', async () => {
     const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
     const wrapper = mount(testComponent())
     wrapper.find('#stop').trigger('click')

src/components/useMediaDevices/useMediaDevices.spec.ts

@@ -59,7 +59,7 @@ describe('useMediaDevices', () => {
     expect(removeEventListenerSpy).toBeCalledWith(event, expect.any(Function))
   })
 
-  it('should call document.addEventListener again when start is called', async () => {
+  it('should call addEventListener again when start is called', async () => {
     const addEventListenerSpy = jest.spyOn(
       navigator.mediaDevices,
       'addEventListener'
@@ -74,7 +74,7 @@ describe('useMediaDevices', () => {
     expect(addEventListenerSpy).toHaveBeenCalledTimes(1 * 2)
   })
 
-  it('should call document.removeEventListener when stop is called', async () => {
+  it('should call removeEventListener when stop is called', async () => {
     const removeEventListenerSpy = jest.spyOn(
       navigator.mediaDevices,
       'removeEventListener'

src/components/useMouse/useMouse.spec.ts

@@ -19,7 +19,7 @@ const testComponent = () => ({
 })
 
 describe('useMouse', () => {
-  it('should call document.addEventListener', async () => {
+  it('should call addEventListener', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
     const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())

src/components/useMouseElement/useMouseElement.spec.ts

@@ -36,7 +36,7 @@ const testComponent = () => ({
 })
 
 describe('useMouseElement', () => {
-  it('should call document.addEventListener', async () => {
+  it('should call addEventListener', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
     const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())

src/components/useMouseLeavePage/useMouseLeavePage.spec.ts

@@ -39,7 +39,7 @@ describe('useMouseLeavePage', () => {
     )
   })
 
-  it('should call document.addEventListener again when start is called', async () => {
+  it('should call addEventListener again when start is called', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
     const wrapper = mount(testComponent())
     expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
@@ -51,7 +51,7 @@ describe('useMouseLeavePage', () => {
     expect(addEventListenerSpy).toHaveBeenCalledTimes(1 * 2)
   })
 
-  it('should call document.removeEventListener when stop is called', async () => {
+  it('should call removeEventListener when stop is called', async () => {
     const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())
     wrapper.find('#stop').trigger('click')

src/components/useSearchParams/useSearchParams.spec.ts

@@ -49,7 +49,7 @@ describe('useSearchParams', () => {
     })
   })
 
-  it('should call document.addEventListener again when start is called', async () => {
+  it('should call addEventListener again when start is called', async () => {
     const addEventListenerSpy = jest.spyOn(window, 'addEventListener')
     const wrapper = mount(testComponent())
     expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length)
@@ -61,7 +61,7 @@ describe('useSearchParams', () => {
     expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length * 2)
   })
 
-  it('should call document.removeEventListener when stop is called', async () => {
+  it('should call removeEventListener when stop is called', async () => {
     const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
     const wrapper = mount(testComponent())
     wrapper.find('#stop').trigger('click')