Feature/use session storage

README.md

@@ -63,59 +63,61 @@ Vue.use(VueCompositionAPI);
 ## APIs
 
 - Sensors
-  - [`useGeolocation`](./src/components/useGeolocation/stories/useGeolocation.md) — tracks geolocation state of user's device.
+  - [`useGeolocation`](./src/functions/useGeolocation/stories/useGeolocation.md) — tracks geolocation state of user's device.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usegeolocation--demo)
-  - [`useHover`](./src/components/useHover/stories/useHover.md) — tracks mouse hover state of a given element.
+  - [`useHover`](./src/functions/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)
-  - [`useIdle`](./src/components/useIdle/stories/useIdle.md) — tracks whether user is being inactive.
+  - [`useIdle`](./src/functions/useIdle/stories/useIdle.md) — tracks whether user is being inactive.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useidle--demo)
-  - [`useIntersection`](./src/components/useIntersection/stories/useIntersection.md) — tracks intersection of target element with an ancestor element.
+  - [`useIntersection`](./src/functions/useIntersection/stories/useIntersection.md) — tracks intersection of target element with an ancestor element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--demo)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--advanced-demo)
-  - [`useLocation`](./src/components/useLocation/stories/useLocation.md) — tracks bar navigation location state.
+  - [`useLocation`](./src/functions/useLocation/stories/useLocation.md) — tracks bar navigation location state.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-uselocation--demo)
-  - [`useMedia`](./src/components/useMedia/stories/useMedia.md) — tracks state of a CSS media query.
+  - [`useMedia`](./src/functions/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)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--advanced-demo)
-  - [`useMediaDevices`](./src/components/useMediaDevices/stories/useMediaDevices.md) — tracks connected hardware devices.
+  - [`useMediaDevices`](./src/functions/useMediaDevices/stories/useMediaDevices.md) — tracks connected hardware devices.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemediadevices--demo)
-  - [`useMouse`](./src/components/useMouse/stories/useMouse.md) — tracks the mouse position.
+  - [`useMouse`](./src/functions/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)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--advanced-demo)
-  - [`useMouseElement`](./src/components/useMouseElement/stories/useMouseElement.md) — tracks the mouse position relative to given element.
+  - [`useMouseElement`](./src/functions/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)
-  - [`useMouseLeavePage`](./src/components/useMouseLeavePage/stories/useMouseLeavePage.md) — tracks when mouse leaves page boundaries.
+  - [`useMouseLeavePage`](./src/functions/useMouseLeavePage/stories/useMouseLeavePage.md) — tracks when mouse leaves page boundaries.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseleavepage--demo)
-  - [`useSearchParams`](./src/components/useSearchParams/stories/useSearchParams.md) — tracks browser's location search params.
+  - [`useSearchParams`](./src/functions/useSearchParams/stories/useSearchParams.md) — tracks browser's location search params.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesearchparams--demo)
 - Animations
-  - [`useInterval`](./src/components/useInterval/stories/useInterval.md) — updates `counter` value repeatedly on a fixed time delay.
+  - [`useInterval`](./src/functions/useInterval/stories/useInterval.md) — updates `counter` value repeatedly on a fixed time delay.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useinterval--demo)
-  - [`useIntervalFn`](./src/components/useIntervalFn/stories/useIntervalFn.md) — calls function repeatedly on a fixed time delay.
+  - [`useIntervalFn`](./src/functions/useIntervalFn/stories/useIntervalFn.md) — calls function repeatedly on a fixed time delay.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useintervalfn--demo)
-  - [`useRaf`](./src/components/useRaf/stories/useRaf.md) — returns `elapsedTime` with requestAnimationFrame.
+  - [`useRaf`](./src/functions/useRaf/stories/useRaf.md) — returns `elapsedTime` with requestAnimationFrame.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraf--demo)
-  - [`useRafFn`](./src/components/useRafFn/stories/useRafFn.md) — calls function with requestAnimationFrame.
+  - [`useRafFn`](./src/functions/useRafFn/stories/useRafFn.md) — calls function with requestAnimationFrame.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--demo)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--advanced-demo)
-  - [`useTimeout`](./src/components/useTimeout/stories/useTimeout.md) — returns `isReady` true when timer is completed.
+  - [`useTimeout`](./src/functions/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.
+  - [`useTimeoutFn`](./src/functions/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)
 - Side Effects
-  - [`useBeforeUnload`](./src/components/useBeforeUnload/stories/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.
+  - [`useBeforeUnload`](./src/functions/useBeforeUnload/stories/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usebeforeunload--demo)
-  - [`useCookie`](./src/components/useCookie/stories/useCookie.md) — provides way to read, update and delete a cookie.
+  - [`useCookie`](./src/functions/useCookie/stories/useCookie.md) — provides way to read, update and delete a cookie.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usecookie--demo)
-  - [`useLocalStorage`](./src/components/useLocalStorage/stories/useLocalStorage.md) — provides way to read, update and delete a localStorage key.
+  - [`useLocalStorage`](./src/functions/useLocalStorage/stories/useLocalStorage.md) — provides way to read, update and delete a localStorage key.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-uselocalstorage--demo)
+  - [`useSessionStorage`](./src/functions/useSessionStorage/stories/useSessionStorage.md) — provides way to read, update and delete a sessionStorage key.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usesessionstorage--demo)
 - UI
-  - [`useClickAway`](./src/components/useClickAway/stories/useClickAway.md) — triggers callback when user clicks outside target area.
+  - [`useClickAway`](./src/functions/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)
-  - [`useFullscreen`](./src/components/useFullscreen/stories/useFullscreen.md) — display an element in full-screen mode
+  - [`useFullscreen`](./src/functions/useFullscreen/stories/useFullscreen.md) — display an element in full-screen mode
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-usefullscreen--demo)
 - Utils
-  - [`getQuery`](./src/components/getQuery/stories/getQuery.md) — get a CSS media query string.
+  - [`getQuery`](./src/functions/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)
 
 ## Inspiration

src/components/useClickAway/useClickAway.spec.ts → src/functions/useClickAway/useClickAway.spec.ts

@@ -1,4 +1,4 @@
-import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
+import { checkOnMountAndUnmountEvents } from '@src/helpers/test'
 import { ref } from '@src/api'
 import { useClickAway } from '@src/vue-use-kit'
 

src/components/useCookie/useCookie.ts → src/functions/useCookie/useCookie.ts

@@ -8,7 +8,7 @@ import {
   trySerialize,
   tryDeserialize,
   isNullOrUndefined
-} from '@src/utils'
+} from '@src/shared/utils'
 import { ref, onMounted, Ref } from '@src/api'
 
 export interface UseCookieOptions {

src/components/useIdle/useIdle.spec.ts → src/functions/useIdle/useIdle.spec.ts

@@ -1,8 +1,7 @@
 import {
   checkOnMountAndUnmountEvents,
   checkOnStartEvents,
-  checkOnStopEvents,
-  mount
+  checkOnStopEvents
 } from '@src/helpers/test'
 import { useIdle, idleEventsList } from '@src/vue-use-kit'
 

src/components/useInterval/useInterval.ts → src/functions/useInterval/useInterval.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from '@src/api'
-import { useIntervalFn } from '@src/components/useIntervalFn'
+import { useIntervalFn } from '@src/functions/useIntervalFn'
 
 export function useInterval(ms = 0, runOnMount = true) {
   const counter = ref(0)

src/components/useLocalStorage/stories/useLocalStorage.md → src/functions/useLocalStorage/stories/useLocalStorage.md

@@ -5,7 +5,7 @@ Vue function that provides way to read, update and delete a localStorage key
 ## Reference
 
 ```typescript
-interface UseLocalStorageOptions {
+interface StorageOptions {
   isParsing: boolean
   serializer?: SerializerFunction
   deserializer?: DeserializerFunction
@@ -15,7 +15,7 @@ interface UseLocalStorageOptions {
 ```typescript
 function useLocalStorage(
   key: string,
-  options?: UseLocalStorageOptions,
+  options?: StorageOptions,
   runOnMount?: boolean
 ): {
   item: Ref<any>
@@ -27,20 +27,20 @@ function useLocalStorage(
 
 ### Parameters
 
-- `key: string` the localstorage key you wish to get/set/remove
-- `options: UseLocalStorageOptions`
-  - `isParsing: boolean` whether to enable parsing the localstorage key value or not, `false` by default
+- `key: string` the localStorage key you wish to get/set/remove
+- `options: StorageOptions`
+  - `isParsing: boolean` whether to enable parsing the localStorage key value or not, `false` by default
   - `serializer: SerializerFunction` a custom serializer, `JSON.stringify` by default
   - `deserializer: DeserializerFunction` a custom deserializer, `JSON.parse` by default
-- `runOnMount: boolean` whether to get the localstorage key on mount or not, `true` by default
+- `runOnMount: boolean` whether to get the localStorage key on mount or not, `true` by default
 
 ### Returns
 
-- `item: Ref<any>` the localstorage key value, it can be null, a string or a JSON object/array
-- `getItem: Function` get the localstorage key value
-- `setItem: Function` set the localstorage key value
+- `item: Ref<any>` the localStorage key value, it can be null, a string or a JSON object/array
+- `getItem: Function` get the localStorage key value
+- `setItem: Function` set the localStorage key value
   - `newVal: any`: the value to set, can be a string or an object/array
-- `removeItem: Function` delete the localstorage key
+- `removeItem: Function` delete the localStorage key
 
 ## Usage
 

src/components/useLocalStorage/useLocalStorage.spec.ts → src/functions/useLocalStorage/useLocalStorage.spec.ts

@@ -61,7 +61,7 @@ const testComponent = (
   }
 })
 
-describe('useItem', () => {
+describe('useLocalStorage', () => {
   it('should get a item with the given value', async () => {
     const itemKey = 'itemKey'
     const itemValue = 'itemValue'

src/functions/useLocalStorage/useLocalStorage.ts

@@ -0,0 +1,23 @@
+import { createStorage, StorageOptions } from '@src/shared/createStorage'
+import { onMounted, Ref } from '@src/api'
+
+export function useLocalStorage(
+  key: string,
+  options?: StorageOptions,
+  runOnMount = true
+) {
+  const { item, getItem, setItem, removeItem } = createStorage(
+    localStorage,
+    key,
+    options
+  )
+
+  onMounted(() => runOnMount && getItem())
+
+  return {
+    item,
+    getItem,
+    setItem,
+    removeItem
+  }
+}

src/components/useLocation/useLocation.ts → src/functions/useLocation/useLocation.ts

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted, Ref } from '@src/api'
-import { patchHistoryMethodsOnce } from '@src/utils'
+import { patchHistoryMethodsOnce } from '@src/shared/utils'
 
 export interface UseLocationState {
   trigger: string

src/components/useMediaDevices/useMediaDevices.spec.ts → src/functions/useMediaDevices/useMediaDevices.spec.ts

@@ -2,8 +2,7 @@ import {
   checkElementExistenceOnMount,
   checkOnMountAndUnmountEvents,
   checkOnStartEvents,
-  checkOnStopEvents,
-  mount
+  checkOnStopEvents
 } from '@src/helpers/test'
 import { useMediaDevices } from '@src/vue-use-kit'
 

src/components/useMouseLeavePage/useMouseLeavePage.spec.ts → src/functions/useMouseLeavePage/useMouseLeavePage.spec.ts

@@ -2,8 +2,7 @@ import {
   checkElementExistenceOnMount,
   checkOnMountAndUnmountEvents,
   checkOnStartEvents,
-  checkOnStopEvents,
-  mount
+  checkOnStopEvents
 } from '@src/helpers/test'
 import { useMouseLeavePage } from '@src/vue-use-kit'
 

src/components/useRaf/useRaf.ts → src/functions/useRaf/useRaf.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from '@src/api'
-import { TFps, useRafFn } from '@src/components/useRafFn'
+import { TFps, useRafFn } from '@src/functions/useRafFn'
 
 const fpsLimit = 60
 export function useRaf(fps: TFps = fpsLimit, runOnMount = true) {

src/components/useSearchParams/useSearchParams.ts → src/functions/useSearchParams/useSearchParams.ts

@@ -1,5 +1,8 @@
 import { ref, onMounted, onUnmounted, Ref } from '@src/api'
-import { patchHistoryMethodsOnce, normalizeEntriesData } from '@src/utils'
+import {
+  patchHistoryMethodsOnce,
+  normalizeEntriesData
+} from '@src/shared/utils'
 
 const normalizeParams = (urlParamsObj: { [key: string]: string }) => (
   paramAcc: any,

src/functions/useSessionStorage/index.ts

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

src/functions/useSessionStorage/stories/UseSessionStorageDemo.vue

@@ -0,0 +1,84 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>item</td>
+        <td>{{ item }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="handleSetItem">
+            Set / Update item
+          </button>
+          <button class="button is-danger" @click="removeItem()">
+            Remove item
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td>jsonItem</td>
+        <td>{{ jsonItem }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="handleSetJsonItem">
+            Set / Update JSON item
+          </button>
+          <button class="button is-danger" @click="jsonRemoveItem()">
+            Remove JSON item
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useSessionStorage } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'useSessionStorageDemo',
+  setup() {
+    const { item, setItem, removeItem } = useSessionStorage('normalItem')
+
+    const {
+      item: jsonItem,
+      setItem: jsonSetItem,
+      removeItem: jsonRemoveItem
+    } = useSessionStorage('jsonItem', {
+      isParsing: true
+    })
+
+    let counter = 0
+    const handleSetItem = () => {
+      counter++
+      setItem(`count${counter}`)
+    }
+
+    const handleSetJsonItem = () => {
+      counter++
+      jsonSetItem({
+        counter: counter,
+        counterTest: `test${counter}`
+      })
+    }
+
+    return {
+      item,
+      handleSetItem,
+      removeItem,
+      jsonItem,
+      handleSetJsonItem,
+      jsonRemoveItem,
+      counter
+    }
+  }
+})
+</script>