From db2d1b455921a4e58ad3f4c50a43205b63a7bf9f Mon Sep 17 00:00:00 2001 From: Salvatore Tedde Date: Sat, 29 Feb 2020 11:59:02 +0000 Subject: [PATCH 1/2] refactor: Fix eslint errors --- src/components/useClickAway/useClickAway.spec.ts | 2 +- src/components/useIdle/useIdle.spec.ts | 3 +-- src/components/useMediaDevices/useMediaDevices.spec.ts | 3 +-- src/components/useMouseLeavePage/useMouseLeavePage.spec.ts | 3 +-- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/useClickAway/useClickAway.spec.ts b/src/components/useClickAway/useClickAway.spec.ts index b1addc6..46e16de 100755 --- a/src/components/useClickAway/useClickAway.spec.ts +++ b/src/components/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' diff --git a/src/components/useIdle/useIdle.spec.ts b/src/components/useIdle/useIdle.spec.ts index 49d7561..f74e6f4 100755 --- a/src/components/useIdle/useIdle.spec.ts +++ b/src/components/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' diff --git a/src/components/useMediaDevices/useMediaDevices.spec.ts b/src/components/useMediaDevices/useMediaDevices.spec.ts index cde5583..02cf512 100755 --- a/src/components/useMediaDevices/useMediaDevices.spec.ts +++ b/src/components/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' diff --git a/src/components/useMouseLeavePage/useMouseLeavePage.spec.ts b/src/components/useMouseLeavePage/useMouseLeavePage.spec.ts index bb684db..458e4ce 100755 --- a/src/components/useMouseLeavePage/useMouseLeavePage.spec.ts +++ b/src/components/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' From f799a09d2086ff47e1782a90f53b7915896bccbb Mon Sep 17 00:00:00 2001 From: Salvatore Tedde Date: Sat, 29 Feb 2020 21:15:30 +0000 Subject: [PATCH 2/2] feat(useSessionStorage): Added useSessionStorage and refactored file system structure --- README.md | 48 ++--- .../getQuery/getQuery.spec.ts | 0 .../getQuery/getQuery.ts | 0 .../getQuery/index.ts | 0 .../getQuery/stories/GetQueryDemo.vue | 0 .../getQuery/stories/getQuery.md | 0 .../getQuery/stories/getQuery.story.ts | 0 .../useBeforeUnload/index.ts | 0 .../stories/UseBeforeUnloadDemo.vue | 0 .../stories/useBeforeUnload.md | 0 .../stories/useBeforeUnload.story.ts | 0 .../useBeforeUnload/useBeforeUnload.spec.ts | 0 .../useBeforeUnload/useBeforeUnload.ts | 0 .../useClickAway/index.ts | 0 .../useClickAway/stories/UseClickAwayDemo.vue | 0 .../useClickAway/stories/useClickAway.md | 0 .../stories/useClickAway.story.ts | 0 .../useClickAway/useClickAway.spec.ts | 0 .../useClickAway/useClickAway.ts | 0 .../useCookie/index.ts | 0 .../useCookie/stories/UseCookieDemo.vue | 0 .../useCookie/stories/useCookie.md | 0 .../useCookie/stories/useCookie.story.ts | 0 .../useCookie/useCookie.spec.ts | 0 .../useCookie/useCookie.ts | 2 +- .../useFullscreen/index.ts | 0 .../stories/UseFullscreenDemo.vue | 0 .../useFullscreen/stories/useFullscreen.md | 0 .../stories/useFullscreen.story.ts | 0 .../useFullscreen/useFullscreen.spec.ts | 0 .../useFullscreen/useFullscreen.ts | 0 .../useGeolocation/index.ts | 0 .../stories/UseGeolocationDemo.vue | 0 .../useGeolocation/stories/useGeolocation.md | 0 .../stories/useGeolocation.story.ts | 0 .../useGeolocation/useGeolocation.spec.ts | 0 .../useGeolocation/useGeolocation.ts | 0 .../useHover/index.ts | 0 .../useHover/stories/UseHoverDemo.vue | 0 .../useHover/stories/useHover.md | 0 .../useHover/stories/useHover.story.ts | 0 .../useHover/useHover.spec.ts | 0 .../useHover/useHover.ts | 0 .../useIdle/index.ts | 0 .../useIdle/stories/UseIdleDemo.vue | 0 .../useIdle/stories/useIdle.md | 0 .../useIdle/stories/useIdle.story.ts | 0 .../useIdle/useIdle.spec.ts | 0 .../useIdle/useIdle.ts | 0 .../useIntersection/index.ts | 0 .../stories/UseIntersectionAdvancedDemo.vue | 0 .../stories/UseIntersectionDemo.vue | 0 .../stories/UseIntersectionElementDemo.vue | 0 .../stories/useIntersection.md | 0 .../stories/useIntersection.story.ts | 0 .../useIntersection/useIntersection.spec.ts | 0 .../useIntersection/useIntersection.ts | 0 .../useInterval/index.ts | 0 .../useInterval/stories/UseIntervalDemo.vue | 0 .../useInterval/stories/useInterval.md | 0 .../useInterval/stories/useInterval.story.ts | 0 .../useInterval/useInterval.spec.ts | 0 .../useInterval/useInterval.ts | 2 +- .../useIntervalFn/index.ts | 0 .../stories/UseIntervalFnDemo.vue | 0 .../useIntervalFn/stories/useIntervalFn.md | 0 .../stories/useIntervalFn.story.ts | 0 .../useIntervalFn/useIntervalFn.spec.ts | 0 .../useIntervalFn/useIntervalFn.ts | 0 .../useLocalStorage/index.ts | 0 .../stories/UseLocalStorageDemo.vue | 0 .../stories/useLocalStorage.md | 20 +- .../stories/useLocalStorage.story.ts | 0 .../useLocalStorage/useLocalStorage.spec.ts | 2 +- .../useLocalStorage/useLocalStorage.ts | 23 +++ .../useLocation/index.ts | 0 .../useLocation/stories/UseLocationDemo.vue | 0 .../useLocation/stories/useLocation.md | 0 .../useLocation/stories/useLocation.story.ts | 0 .../useLocation/useLocation.spec.ts | 0 .../useLocation/useLocation.ts | 2 +- .../useMedia/index.ts | 0 .../useMedia/stories/UseMediaAdvancedDemo.vue | 0 .../useMedia/stories/UseMediaDemo.vue | 0 .../useMedia/stories/useMedia.md | 0 .../useMedia/stories/useMedia.story.ts | 0 .../useMedia/useMedia.spec.ts | 0 .../useMedia/useMedia.ts | 0 .../useMediaDevices/index.ts | 0 .../stories/UseMediaDevicesDemo.vue | 0 .../stories/useMediaDevices.md | 0 .../stories/useMediaDevices.story.ts | 0 .../useMediaDevices/useMediaDevices.spec.ts | 0 .../useMediaDevices/useMediaDevices.ts | 0 .../useMouse/index.ts | 0 .../useMouse/stories/UseMouseAdvancedDemo.vue | 0 .../useMouse/stories/UseMouseDemo.vue | 0 .../useMouse/stories/useMouse.md | 0 .../useMouse/stories/useMouse.story.ts | 0 .../useMouse/useMouse.spec.ts | 0 .../useMouse/useMouse.ts | 0 .../useMouseElement/index.ts | 0 .../stories/UseMouseElementDemo.vue | 0 .../stories/useMouseElement.md | 0 .../stories/useMouseElement.story.ts | 0 .../useMouseElement/useMouseElement.spec.ts | 0 .../useMouseElement/useMouseElement.ts | 0 .../useMouseLeavePage/index.ts | 0 .../stories/UseMouseLeavePageDemo.vue | 0 .../stories/useMouseLeavePage.md | 0 .../stories/useMouseLeavePage.story.ts | 0 .../useMouseLeavePage.spec.ts | 0 .../useMouseLeavePage/useMouseLeavePage.ts | 0 src/{components => functions}/useRaf/index.ts | 0 .../useRaf/stories/UseRafDemo.vue | 0 .../useRaf/stories/useRaf.md | 0 .../useRaf/stories/useRaf.story.ts | 0 .../useRaf/useRaf.spec.ts | 0 .../useRaf/useRaf.ts | 2 +- .../useRafFn/index.ts | 0 .../useRafFn/stories/UseRafFnAdvancedDemo.vue | 0 .../useRafFn/stories/UseRafFnDemo.vue | 0 .../useRafFn/stories/useRafFn.md | 0 .../useRafFn/stories/useRafFn.story.ts | 0 .../useRafFn/useRafFn.spec.ts | 0 .../useRafFn/useRafFn.ts | 0 .../useSampleComponent/index.ts | 0 .../stories/UseSampleComponentDemo.vue | 0 .../stories/useSampleComponent.md | 0 .../stories/useSampleComponent.storySample.ts | 0 .../useSampleComponent.spec.ts | 0 .../useSampleComponent/useSampleComponent.ts | 0 .../useSearchParams/index.ts | 0 .../useSearchParams/stories/Field.vue | 0 .../stories/UseSearchParamsDemo.vue | 0 .../stories/useSearchParams.md | 0 .../stories/useSearchParams.story.ts | 0 .../useSearchParams/useSearchParams.spec.ts | 0 .../useSearchParams/useSearchParams.ts | 5 +- src/functions/useSessionStorage/index.ts | 1 + .../stories/UseSessionStorageDemo.vue | 84 ++++++++ .../stories/useSessionStorage.md | 77 +++++++ .../stories/useSessionStorage.story.ts | 28 +++ .../useSessionStorage.spec.ts | 188 ++++++++++++++++++ .../useSessionStorage/useSessionStorage.ts | 23 +++ .../useTimeout/index.ts | 0 .../useTimeout/stories/UseTimeoutDemo.vue | 0 .../useTimeout/stories/useTimeout.md | 0 .../useTimeout/stories/useTimeout.story.ts | 0 .../useTimeout/useTimeout.spec.ts | 0 .../useTimeout/useTimeout.ts | 2 +- .../useTimeoutFn/index.ts | 0 .../useTimeoutFn/stories/UseTimeoutFnDemo.vue | 0 .../useTimeoutFn/stories/useTimeoutFn.md | 0 .../stories/useTimeoutFn.story.ts | 0 .../useTimeoutFn/useTimeoutFn.spec.ts | 0 .../useTimeoutFn/useTimeoutFn.ts | 0 .../createStorage.ts} | 159 +++++++-------- src/{ => shared}/utils.ts | 0 src/vue-use-kit.ts | 47 ++--- 160 files changed, 573 insertions(+), 142 deletions(-) rename src/{components => functions}/getQuery/getQuery.spec.ts (100%) rename src/{components => functions}/getQuery/getQuery.ts (100%) rename src/{components => functions}/getQuery/index.ts (100%) rename src/{components => functions}/getQuery/stories/GetQueryDemo.vue (100%) rename src/{components => functions}/getQuery/stories/getQuery.md (100%) rename src/{components => functions}/getQuery/stories/getQuery.story.ts (100%) rename src/{components => functions}/useBeforeUnload/index.ts (100%) rename src/{components => functions}/useBeforeUnload/stories/UseBeforeUnloadDemo.vue (100%) rename src/{components => functions}/useBeforeUnload/stories/useBeforeUnload.md (100%) rename src/{components => functions}/useBeforeUnload/stories/useBeforeUnload.story.ts (100%) rename src/{components => functions}/useBeforeUnload/useBeforeUnload.spec.ts (100%) rename src/{components => functions}/useBeforeUnload/useBeforeUnload.ts (100%) rename src/{components => functions}/useClickAway/index.ts (100%) rename src/{components => functions}/useClickAway/stories/UseClickAwayDemo.vue (100%) rename src/{components => functions}/useClickAway/stories/useClickAway.md (100%) rename src/{components => functions}/useClickAway/stories/useClickAway.story.ts (100%) rename src/{components => functions}/useClickAway/useClickAway.spec.ts (100%) rename src/{components => functions}/useClickAway/useClickAway.ts (100%) rename src/{components => functions}/useCookie/index.ts (100%) rename src/{components => functions}/useCookie/stories/UseCookieDemo.vue (100%) rename src/{components => functions}/useCookie/stories/useCookie.md (100%) rename src/{components => functions}/useCookie/stories/useCookie.story.ts (100%) rename src/{components => functions}/useCookie/useCookie.spec.ts (100%) rename src/{components => functions}/useCookie/useCookie.ts (98%) rename src/{components => functions}/useFullscreen/index.ts (100%) rename src/{components => functions}/useFullscreen/stories/UseFullscreenDemo.vue (100%) rename src/{components => functions}/useFullscreen/stories/useFullscreen.md (100%) rename src/{components => functions}/useFullscreen/stories/useFullscreen.story.ts (100%) rename src/{components => functions}/useFullscreen/useFullscreen.spec.ts (100%) rename src/{components => functions}/useFullscreen/useFullscreen.ts (100%) rename src/{components => functions}/useGeolocation/index.ts (100%) rename src/{components => functions}/useGeolocation/stories/UseGeolocationDemo.vue (100%) rename src/{components => functions}/useGeolocation/stories/useGeolocation.md (100%) rename src/{components => functions}/useGeolocation/stories/useGeolocation.story.ts (100%) rename src/{components => functions}/useGeolocation/useGeolocation.spec.ts (100%) rename src/{components => functions}/useGeolocation/useGeolocation.ts (100%) rename src/{components => functions}/useHover/index.ts (100%) rename src/{components => functions}/useHover/stories/UseHoverDemo.vue (100%) rename src/{components => functions}/useHover/stories/useHover.md (100%) rename src/{components => functions}/useHover/stories/useHover.story.ts (100%) rename src/{components => functions}/useHover/useHover.spec.ts (100%) rename src/{components => functions}/useHover/useHover.ts (100%) rename src/{components => functions}/useIdle/index.ts (100%) rename src/{components => functions}/useIdle/stories/UseIdleDemo.vue (100%) rename src/{components => functions}/useIdle/stories/useIdle.md (100%) rename src/{components => functions}/useIdle/stories/useIdle.story.ts (100%) rename src/{components => functions}/useIdle/useIdle.spec.ts (100%) rename src/{components => functions}/useIdle/useIdle.ts (100%) rename src/{components => functions}/useIntersection/index.ts (100%) rename src/{components => functions}/useIntersection/stories/UseIntersectionAdvancedDemo.vue (100%) rename src/{components => functions}/useIntersection/stories/UseIntersectionDemo.vue (100%) rename src/{components => functions}/useIntersection/stories/UseIntersectionElementDemo.vue (100%) rename src/{components => functions}/useIntersection/stories/useIntersection.md (100%) rename src/{components => functions}/useIntersection/stories/useIntersection.story.ts (100%) rename src/{components => functions}/useIntersection/useIntersection.spec.ts (100%) rename src/{components => functions}/useIntersection/useIntersection.ts (100%) rename src/{components => functions}/useInterval/index.ts (100%) rename src/{components => functions}/useInterval/stories/UseIntervalDemo.vue (100%) rename src/{components => functions}/useInterval/stories/useInterval.md (100%) rename src/{components => functions}/useInterval/stories/useInterval.story.ts (100%) rename src/{components => functions}/useInterval/useInterval.spec.ts (100%) rename src/{components => functions}/useInterval/useInterval.ts (83%) rename src/{components => functions}/useIntervalFn/index.ts (100%) rename src/{components => functions}/useIntervalFn/stories/UseIntervalFnDemo.vue (100%) rename src/{components => functions}/useIntervalFn/stories/useIntervalFn.md (100%) rename src/{components => functions}/useIntervalFn/stories/useIntervalFn.story.ts (100%) rename src/{components => functions}/useIntervalFn/useIntervalFn.spec.ts (100%) rename src/{components => functions}/useIntervalFn/useIntervalFn.ts (100%) rename src/{components => functions}/useLocalStorage/index.ts (100%) rename src/{components => functions}/useLocalStorage/stories/UseLocalStorageDemo.vue (100%) rename src/{components => functions}/useLocalStorage/stories/useLocalStorage.md (73%) rename src/{components => functions}/useLocalStorage/stories/useLocalStorage.story.ts (100%) rename src/{components => functions}/useLocalStorage/useLocalStorage.spec.ts (99%) create mode 100755 src/functions/useLocalStorage/useLocalStorage.ts rename src/{components => functions}/useLocation/index.ts (100%) rename src/{components => functions}/useLocation/stories/UseLocationDemo.vue (100%) rename src/{components => functions}/useLocation/stories/useLocation.md (100%) rename src/{components => functions}/useLocation/stories/useLocation.story.ts (100%) rename src/{components => functions}/useLocation/useLocation.spec.ts (100%) rename src/{components => functions}/useLocation/useLocation.ts (96%) rename src/{components => functions}/useMedia/index.ts (100%) rename src/{components => functions}/useMedia/stories/UseMediaAdvancedDemo.vue (100%) rename src/{components => functions}/useMedia/stories/UseMediaDemo.vue (100%) rename src/{components => functions}/useMedia/stories/useMedia.md (100%) rename src/{components => functions}/useMedia/stories/useMedia.story.ts (100%) rename src/{components => functions}/useMedia/useMedia.spec.ts (100%) rename src/{components => functions}/useMedia/useMedia.ts (100%) rename src/{components => functions}/useMediaDevices/index.ts (100%) rename src/{components => functions}/useMediaDevices/stories/UseMediaDevicesDemo.vue (100%) rename src/{components => functions}/useMediaDevices/stories/useMediaDevices.md (100%) rename src/{components => functions}/useMediaDevices/stories/useMediaDevices.story.ts (100%) rename src/{components => functions}/useMediaDevices/useMediaDevices.spec.ts (100%) rename src/{components => functions}/useMediaDevices/useMediaDevices.ts (100%) rename src/{components => functions}/useMouse/index.ts (100%) rename src/{components => functions}/useMouse/stories/UseMouseAdvancedDemo.vue (100%) rename src/{components => functions}/useMouse/stories/UseMouseDemo.vue (100%) rename src/{components => functions}/useMouse/stories/useMouse.md (100%) rename src/{components => functions}/useMouse/stories/useMouse.story.ts (100%) rename src/{components => functions}/useMouse/useMouse.spec.ts (100%) rename src/{components => functions}/useMouse/useMouse.ts (100%) rename src/{components => functions}/useMouseElement/index.ts (100%) rename src/{components => functions}/useMouseElement/stories/UseMouseElementDemo.vue (100%) rename src/{components => functions}/useMouseElement/stories/useMouseElement.md (100%) rename src/{components => functions}/useMouseElement/stories/useMouseElement.story.ts (100%) rename src/{components => functions}/useMouseElement/useMouseElement.spec.ts (100%) rename src/{components => functions}/useMouseElement/useMouseElement.ts (100%) rename src/{components => functions}/useMouseLeavePage/index.ts (100%) rename src/{components => functions}/useMouseLeavePage/stories/UseMouseLeavePageDemo.vue (100%) rename src/{components => functions}/useMouseLeavePage/stories/useMouseLeavePage.md (100%) rename src/{components => functions}/useMouseLeavePage/stories/useMouseLeavePage.story.ts (100%) rename src/{components => functions}/useMouseLeavePage/useMouseLeavePage.spec.ts (100%) rename src/{components => functions}/useMouseLeavePage/useMouseLeavePage.ts (100%) rename src/{components => functions}/useRaf/index.ts (100%) rename src/{components => functions}/useRaf/stories/UseRafDemo.vue (100%) rename src/{components => functions}/useRaf/stories/useRaf.md (100%) rename src/{components => functions}/useRaf/stories/useRaf.story.ts (100%) rename src/{components => functions}/useRaf/useRaf.spec.ts (100%) rename src/{components => functions}/useRaf/useRaf.ts (86%) rename src/{components => functions}/useRafFn/index.ts (100%) rename src/{components => functions}/useRafFn/stories/UseRafFnAdvancedDemo.vue (100%) rename src/{components => functions}/useRafFn/stories/UseRafFnDemo.vue (100%) rename src/{components => functions}/useRafFn/stories/useRafFn.md (100%) rename src/{components => functions}/useRafFn/stories/useRafFn.story.ts (100%) rename src/{components => functions}/useRafFn/useRafFn.spec.ts (100%) rename src/{components => functions}/useRafFn/useRafFn.ts (100%) rename src/{components => functions}/useSampleComponent/index.ts (100%) rename src/{components => functions}/useSampleComponent/stories/UseSampleComponentDemo.vue (100%) rename src/{components => functions}/useSampleComponent/stories/useSampleComponent.md (100%) rename src/{components => functions}/useSampleComponent/stories/useSampleComponent.storySample.ts (100%) rename src/{components => functions}/useSampleComponent/useSampleComponent.spec.ts (100%) rename src/{components => functions}/useSampleComponent/useSampleComponent.ts (100%) rename src/{components => functions}/useSearchParams/index.ts (100%) rename src/{components => functions}/useSearchParams/stories/Field.vue (100%) rename src/{components => functions}/useSearchParams/stories/UseSearchParamsDemo.vue (100%) rename src/{components => functions}/useSearchParams/stories/useSearchParams.md (100%) rename src/{components => functions}/useSearchParams/stories/useSearchParams.story.ts (100%) rename src/{components => functions}/useSearchParams/useSearchParams.spec.ts (100%) rename src/{components => functions}/useSearchParams/useSearchParams.ts (94%) create mode 100755 src/functions/useSessionStorage/index.ts create mode 100755 src/functions/useSessionStorage/stories/UseSessionStorageDemo.vue create mode 100755 src/functions/useSessionStorage/stories/useSessionStorage.md create mode 100755 src/functions/useSessionStorage/stories/useSessionStorage.story.ts create mode 100755 src/functions/useSessionStorage/useSessionStorage.spec.ts create mode 100755 src/functions/useSessionStorage/useSessionStorage.ts rename src/{components => functions}/useTimeout/index.ts (100%) rename src/{components => functions}/useTimeout/stories/UseTimeoutDemo.vue (100%) rename src/{components => functions}/useTimeout/stories/useTimeout.md (100%) rename src/{components => functions}/useTimeout/stories/useTimeout.story.ts (100%) rename src/{components => functions}/useTimeout/useTimeout.spec.ts (100%) rename src/{components => functions}/useTimeout/useTimeout.ts (78%) rename src/{components => functions}/useTimeoutFn/index.ts (100%) rename src/{components => functions}/useTimeoutFn/stories/UseTimeoutFnDemo.vue (100%) rename src/{components => functions}/useTimeoutFn/stories/useTimeoutFn.md (100%) rename src/{components => functions}/useTimeoutFn/stories/useTimeoutFn.story.ts (100%) rename src/{components => functions}/useTimeoutFn/useTimeoutFn.spec.ts (100%) rename src/{components => functions}/useTimeoutFn/useTimeoutFn.ts (100%) rename src/{components/useLocalStorage/useLocalStorage.ts => shared/createStorage.ts} (66%) rename src/{ => shared}/utils.ts (100%) diff --git a/README.md b/README.md index 7df2547..b8496a8 100755 --- a/README.md +++ b/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 diff --git a/src/components/getQuery/getQuery.spec.ts b/src/functions/getQuery/getQuery.spec.ts similarity index 100% rename from src/components/getQuery/getQuery.spec.ts rename to src/functions/getQuery/getQuery.spec.ts diff --git a/src/components/getQuery/getQuery.ts b/src/functions/getQuery/getQuery.ts similarity index 100% rename from src/components/getQuery/getQuery.ts rename to src/functions/getQuery/getQuery.ts diff --git a/src/components/getQuery/index.ts b/src/functions/getQuery/index.ts similarity index 100% rename from src/components/getQuery/index.ts rename to src/functions/getQuery/index.ts diff --git a/src/components/getQuery/stories/GetQueryDemo.vue b/src/functions/getQuery/stories/GetQueryDemo.vue similarity index 100% rename from src/components/getQuery/stories/GetQueryDemo.vue rename to src/functions/getQuery/stories/GetQueryDemo.vue diff --git a/src/components/getQuery/stories/getQuery.md b/src/functions/getQuery/stories/getQuery.md similarity index 100% rename from src/components/getQuery/stories/getQuery.md rename to src/functions/getQuery/stories/getQuery.md diff --git a/src/components/getQuery/stories/getQuery.story.ts b/src/functions/getQuery/stories/getQuery.story.ts similarity index 100% rename from src/components/getQuery/stories/getQuery.story.ts rename to src/functions/getQuery/stories/getQuery.story.ts diff --git a/src/components/useBeforeUnload/index.ts b/src/functions/useBeforeUnload/index.ts similarity index 100% rename from src/components/useBeforeUnload/index.ts rename to src/functions/useBeforeUnload/index.ts diff --git a/src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue b/src/functions/useBeforeUnload/stories/UseBeforeUnloadDemo.vue similarity index 100% rename from src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue rename to src/functions/useBeforeUnload/stories/UseBeforeUnloadDemo.vue diff --git a/src/components/useBeforeUnload/stories/useBeforeUnload.md b/src/functions/useBeforeUnload/stories/useBeforeUnload.md similarity index 100% rename from src/components/useBeforeUnload/stories/useBeforeUnload.md rename to src/functions/useBeforeUnload/stories/useBeforeUnload.md diff --git a/src/components/useBeforeUnload/stories/useBeforeUnload.story.ts b/src/functions/useBeforeUnload/stories/useBeforeUnload.story.ts similarity index 100% rename from src/components/useBeforeUnload/stories/useBeforeUnload.story.ts rename to src/functions/useBeforeUnload/stories/useBeforeUnload.story.ts diff --git a/src/components/useBeforeUnload/useBeforeUnload.spec.ts b/src/functions/useBeforeUnload/useBeforeUnload.spec.ts similarity index 100% rename from src/components/useBeforeUnload/useBeforeUnload.spec.ts rename to src/functions/useBeforeUnload/useBeforeUnload.spec.ts diff --git a/src/components/useBeforeUnload/useBeforeUnload.ts b/src/functions/useBeforeUnload/useBeforeUnload.ts similarity index 100% rename from src/components/useBeforeUnload/useBeforeUnload.ts rename to src/functions/useBeforeUnload/useBeforeUnload.ts diff --git a/src/components/useClickAway/index.ts b/src/functions/useClickAway/index.ts similarity index 100% rename from src/components/useClickAway/index.ts rename to src/functions/useClickAway/index.ts diff --git a/src/components/useClickAway/stories/UseClickAwayDemo.vue b/src/functions/useClickAway/stories/UseClickAwayDemo.vue similarity index 100% rename from src/components/useClickAway/stories/UseClickAwayDemo.vue rename to src/functions/useClickAway/stories/UseClickAwayDemo.vue diff --git a/src/components/useClickAway/stories/useClickAway.md b/src/functions/useClickAway/stories/useClickAway.md similarity index 100% rename from src/components/useClickAway/stories/useClickAway.md rename to src/functions/useClickAway/stories/useClickAway.md diff --git a/src/components/useClickAway/stories/useClickAway.story.ts b/src/functions/useClickAway/stories/useClickAway.story.ts similarity index 100% rename from src/components/useClickAway/stories/useClickAway.story.ts rename to src/functions/useClickAway/stories/useClickAway.story.ts diff --git a/src/components/useClickAway/useClickAway.spec.ts b/src/functions/useClickAway/useClickAway.spec.ts similarity index 100% rename from src/components/useClickAway/useClickAway.spec.ts rename to src/functions/useClickAway/useClickAway.spec.ts diff --git a/src/components/useClickAway/useClickAway.ts b/src/functions/useClickAway/useClickAway.ts similarity index 100% rename from src/components/useClickAway/useClickAway.ts rename to src/functions/useClickAway/useClickAway.ts diff --git a/src/components/useCookie/index.ts b/src/functions/useCookie/index.ts similarity index 100% rename from src/components/useCookie/index.ts rename to src/functions/useCookie/index.ts diff --git a/src/components/useCookie/stories/UseCookieDemo.vue b/src/functions/useCookie/stories/UseCookieDemo.vue similarity index 100% rename from src/components/useCookie/stories/UseCookieDemo.vue rename to src/functions/useCookie/stories/UseCookieDemo.vue diff --git a/src/components/useCookie/stories/useCookie.md b/src/functions/useCookie/stories/useCookie.md similarity index 100% rename from src/components/useCookie/stories/useCookie.md rename to src/functions/useCookie/stories/useCookie.md diff --git a/src/components/useCookie/stories/useCookie.story.ts b/src/functions/useCookie/stories/useCookie.story.ts similarity index 100% rename from src/components/useCookie/stories/useCookie.story.ts rename to src/functions/useCookie/stories/useCookie.story.ts diff --git a/src/components/useCookie/useCookie.spec.ts b/src/functions/useCookie/useCookie.spec.ts similarity index 100% rename from src/components/useCookie/useCookie.spec.ts rename to src/functions/useCookie/useCookie.spec.ts diff --git a/src/components/useCookie/useCookie.ts b/src/functions/useCookie/useCookie.ts similarity index 98% rename from src/components/useCookie/useCookie.ts rename to src/functions/useCookie/useCookie.ts index 9d667d7..dcf9481 100755 --- a/src/components/useCookie/useCookie.ts +++ b/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 { diff --git a/src/components/useFullscreen/index.ts b/src/functions/useFullscreen/index.ts similarity index 100% rename from src/components/useFullscreen/index.ts rename to src/functions/useFullscreen/index.ts diff --git a/src/components/useFullscreen/stories/UseFullscreenDemo.vue b/src/functions/useFullscreen/stories/UseFullscreenDemo.vue similarity index 100% rename from src/components/useFullscreen/stories/UseFullscreenDemo.vue rename to src/functions/useFullscreen/stories/UseFullscreenDemo.vue diff --git a/src/components/useFullscreen/stories/useFullscreen.md b/src/functions/useFullscreen/stories/useFullscreen.md similarity index 100% rename from src/components/useFullscreen/stories/useFullscreen.md rename to src/functions/useFullscreen/stories/useFullscreen.md diff --git a/src/components/useFullscreen/stories/useFullscreen.story.ts b/src/functions/useFullscreen/stories/useFullscreen.story.ts similarity index 100% rename from src/components/useFullscreen/stories/useFullscreen.story.ts rename to src/functions/useFullscreen/stories/useFullscreen.story.ts diff --git a/src/components/useFullscreen/useFullscreen.spec.ts b/src/functions/useFullscreen/useFullscreen.spec.ts similarity index 100% rename from src/components/useFullscreen/useFullscreen.spec.ts rename to src/functions/useFullscreen/useFullscreen.spec.ts diff --git a/src/components/useFullscreen/useFullscreen.ts b/src/functions/useFullscreen/useFullscreen.ts similarity index 100% rename from src/components/useFullscreen/useFullscreen.ts rename to src/functions/useFullscreen/useFullscreen.ts diff --git a/src/components/useGeolocation/index.ts b/src/functions/useGeolocation/index.ts similarity index 100% rename from src/components/useGeolocation/index.ts rename to src/functions/useGeolocation/index.ts diff --git a/src/components/useGeolocation/stories/UseGeolocationDemo.vue b/src/functions/useGeolocation/stories/UseGeolocationDemo.vue similarity index 100% rename from src/components/useGeolocation/stories/UseGeolocationDemo.vue rename to src/functions/useGeolocation/stories/UseGeolocationDemo.vue diff --git a/src/components/useGeolocation/stories/useGeolocation.md b/src/functions/useGeolocation/stories/useGeolocation.md similarity index 100% rename from src/components/useGeolocation/stories/useGeolocation.md rename to src/functions/useGeolocation/stories/useGeolocation.md diff --git a/src/components/useGeolocation/stories/useGeolocation.story.ts b/src/functions/useGeolocation/stories/useGeolocation.story.ts similarity index 100% rename from src/components/useGeolocation/stories/useGeolocation.story.ts rename to src/functions/useGeolocation/stories/useGeolocation.story.ts diff --git a/src/components/useGeolocation/useGeolocation.spec.ts b/src/functions/useGeolocation/useGeolocation.spec.ts similarity index 100% rename from src/components/useGeolocation/useGeolocation.spec.ts rename to src/functions/useGeolocation/useGeolocation.spec.ts diff --git a/src/components/useGeolocation/useGeolocation.ts b/src/functions/useGeolocation/useGeolocation.ts similarity index 100% rename from src/components/useGeolocation/useGeolocation.ts rename to src/functions/useGeolocation/useGeolocation.ts diff --git a/src/components/useHover/index.ts b/src/functions/useHover/index.ts similarity index 100% rename from src/components/useHover/index.ts rename to src/functions/useHover/index.ts diff --git a/src/components/useHover/stories/UseHoverDemo.vue b/src/functions/useHover/stories/UseHoverDemo.vue similarity index 100% rename from src/components/useHover/stories/UseHoverDemo.vue rename to src/functions/useHover/stories/UseHoverDemo.vue diff --git a/src/components/useHover/stories/useHover.md b/src/functions/useHover/stories/useHover.md similarity index 100% rename from src/components/useHover/stories/useHover.md rename to src/functions/useHover/stories/useHover.md diff --git a/src/components/useHover/stories/useHover.story.ts b/src/functions/useHover/stories/useHover.story.ts similarity index 100% rename from src/components/useHover/stories/useHover.story.ts rename to src/functions/useHover/stories/useHover.story.ts diff --git a/src/components/useHover/useHover.spec.ts b/src/functions/useHover/useHover.spec.ts similarity index 100% rename from src/components/useHover/useHover.spec.ts rename to src/functions/useHover/useHover.spec.ts diff --git a/src/components/useHover/useHover.ts b/src/functions/useHover/useHover.ts similarity index 100% rename from src/components/useHover/useHover.ts rename to src/functions/useHover/useHover.ts diff --git a/src/components/useIdle/index.ts b/src/functions/useIdle/index.ts similarity index 100% rename from src/components/useIdle/index.ts rename to src/functions/useIdle/index.ts diff --git a/src/components/useIdle/stories/UseIdleDemo.vue b/src/functions/useIdle/stories/UseIdleDemo.vue similarity index 100% rename from src/components/useIdle/stories/UseIdleDemo.vue rename to src/functions/useIdle/stories/UseIdleDemo.vue diff --git a/src/components/useIdle/stories/useIdle.md b/src/functions/useIdle/stories/useIdle.md similarity index 100% rename from src/components/useIdle/stories/useIdle.md rename to src/functions/useIdle/stories/useIdle.md diff --git a/src/components/useIdle/stories/useIdle.story.ts b/src/functions/useIdle/stories/useIdle.story.ts similarity index 100% rename from src/components/useIdle/stories/useIdle.story.ts rename to src/functions/useIdle/stories/useIdle.story.ts diff --git a/src/components/useIdle/useIdle.spec.ts b/src/functions/useIdle/useIdle.spec.ts similarity index 100% rename from src/components/useIdle/useIdle.spec.ts rename to src/functions/useIdle/useIdle.spec.ts diff --git a/src/components/useIdle/useIdle.ts b/src/functions/useIdle/useIdle.ts similarity index 100% rename from src/components/useIdle/useIdle.ts rename to src/functions/useIdle/useIdle.ts diff --git a/src/components/useIntersection/index.ts b/src/functions/useIntersection/index.ts similarity index 100% rename from src/components/useIntersection/index.ts rename to src/functions/useIntersection/index.ts diff --git a/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue b/src/functions/useIntersection/stories/UseIntersectionAdvancedDemo.vue similarity index 100% rename from src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue rename to src/functions/useIntersection/stories/UseIntersectionAdvancedDemo.vue diff --git a/src/components/useIntersection/stories/UseIntersectionDemo.vue b/src/functions/useIntersection/stories/UseIntersectionDemo.vue similarity index 100% rename from src/components/useIntersection/stories/UseIntersectionDemo.vue rename to src/functions/useIntersection/stories/UseIntersectionDemo.vue diff --git a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue b/src/functions/useIntersection/stories/UseIntersectionElementDemo.vue similarity index 100% rename from src/components/useIntersection/stories/UseIntersectionElementDemo.vue rename to src/functions/useIntersection/stories/UseIntersectionElementDemo.vue diff --git a/src/components/useIntersection/stories/useIntersection.md b/src/functions/useIntersection/stories/useIntersection.md similarity index 100% rename from src/components/useIntersection/stories/useIntersection.md rename to src/functions/useIntersection/stories/useIntersection.md diff --git a/src/components/useIntersection/stories/useIntersection.story.ts b/src/functions/useIntersection/stories/useIntersection.story.ts similarity index 100% rename from src/components/useIntersection/stories/useIntersection.story.ts rename to src/functions/useIntersection/stories/useIntersection.story.ts diff --git a/src/components/useIntersection/useIntersection.spec.ts b/src/functions/useIntersection/useIntersection.spec.ts similarity index 100% rename from src/components/useIntersection/useIntersection.spec.ts rename to src/functions/useIntersection/useIntersection.spec.ts diff --git a/src/components/useIntersection/useIntersection.ts b/src/functions/useIntersection/useIntersection.ts similarity index 100% rename from src/components/useIntersection/useIntersection.ts rename to src/functions/useIntersection/useIntersection.ts diff --git a/src/components/useInterval/index.ts b/src/functions/useInterval/index.ts similarity index 100% rename from src/components/useInterval/index.ts rename to src/functions/useInterval/index.ts diff --git a/src/components/useInterval/stories/UseIntervalDemo.vue b/src/functions/useInterval/stories/UseIntervalDemo.vue similarity index 100% rename from src/components/useInterval/stories/UseIntervalDemo.vue rename to src/functions/useInterval/stories/UseIntervalDemo.vue diff --git a/src/components/useInterval/stories/useInterval.md b/src/functions/useInterval/stories/useInterval.md similarity index 100% rename from src/components/useInterval/stories/useInterval.md rename to src/functions/useInterval/stories/useInterval.md diff --git a/src/components/useInterval/stories/useInterval.story.ts b/src/functions/useInterval/stories/useInterval.story.ts similarity index 100% rename from src/components/useInterval/stories/useInterval.story.ts rename to src/functions/useInterval/stories/useInterval.story.ts diff --git a/src/components/useInterval/useInterval.spec.ts b/src/functions/useInterval/useInterval.spec.ts similarity index 100% rename from src/components/useInterval/useInterval.spec.ts rename to src/functions/useInterval/useInterval.spec.ts diff --git a/src/components/useInterval/useInterval.ts b/src/functions/useInterval/useInterval.ts similarity index 83% rename from src/components/useInterval/useInterval.ts rename to src/functions/useInterval/useInterval.ts index b56ad1d..0b846f9 100755 --- a/src/components/useInterval/useInterval.ts +++ b/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) diff --git a/src/components/useIntervalFn/index.ts b/src/functions/useIntervalFn/index.ts similarity index 100% rename from src/components/useIntervalFn/index.ts rename to src/functions/useIntervalFn/index.ts diff --git a/src/components/useIntervalFn/stories/UseIntervalFnDemo.vue b/src/functions/useIntervalFn/stories/UseIntervalFnDemo.vue similarity index 100% rename from src/components/useIntervalFn/stories/UseIntervalFnDemo.vue rename to src/functions/useIntervalFn/stories/UseIntervalFnDemo.vue diff --git a/src/components/useIntervalFn/stories/useIntervalFn.md b/src/functions/useIntervalFn/stories/useIntervalFn.md similarity index 100% rename from src/components/useIntervalFn/stories/useIntervalFn.md rename to src/functions/useIntervalFn/stories/useIntervalFn.md diff --git a/src/components/useIntervalFn/stories/useIntervalFn.story.ts b/src/functions/useIntervalFn/stories/useIntervalFn.story.ts similarity index 100% rename from src/components/useIntervalFn/stories/useIntervalFn.story.ts rename to src/functions/useIntervalFn/stories/useIntervalFn.story.ts diff --git a/src/components/useIntervalFn/useIntervalFn.spec.ts b/src/functions/useIntervalFn/useIntervalFn.spec.ts similarity index 100% rename from src/components/useIntervalFn/useIntervalFn.spec.ts rename to src/functions/useIntervalFn/useIntervalFn.spec.ts diff --git a/src/components/useIntervalFn/useIntervalFn.ts b/src/functions/useIntervalFn/useIntervalFn.ts similarity index 100% rename from src/components/useIntervalFn/useIntervalFn.ts rename to src/functions/useIntervalFn/useIntervalFn.ts diff --git a/src/components/useLocalStorage/index.ts b/src/functions/useLocalStorage/index.ts similarity index 100% rename from src/components/useLocalStorage/index.ts rename to src/functions/useLocalStorage/index.ts diff --git a/src/components/useLocalStorage/stories/UseLocalStorageDemo.vue b/src/functions/useLocalStorage/stories/UseLocalStorageDemo.vue similarity index 100% rename from src/components/useLocalStorage/stories/UseLocalStorageDemo.vue rename to src/functions/useLocalStorage/stories/UseLocalStorageDemo.vue diff --git a/src/components/useLocalStorage/stories/useLocalStorage.md b/src/functions/useLocalStorage/stories/useLocalStorage.md similarity index 73% rename from src/components/useLocalStorage/stories/useLocalStorage.md rename to src/functions/useLocalStorage/stories/useLocalStorage.md index 901f865..57d6e79 100755 --- a/src/components/useLocalStorage/stories/useLocalStorage.md +++ b/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 @@ -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` 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` 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 diff --git a/src/components/useLocalStorage/stories/useLocalStorage.story.ts b/src/functions/useLocalStorage/stories/useLocalStorage.story.ts similarity index 100% rename from src/components/useLocalStorage/stories/useLocalStorage.story.ts rename to src/functions/useLocalStorage/stories/useLocalStorage.story.ts diff --git a/src/components/useLocalStorage/useLocalStorage.spec.ts b/src/functions/useLocalStorage/useLocalStorage.spec.ts similarity index 99% rename from src/components/useLocalStorage/useLocalStorage.spec.ts rename to src/functions/useLocalStorage/useLocalStorage.spec.ts index ebf3c42..57d3ae8 100755 --- a/src/components/useLocalStorage/useLocalStorage.spec.ts +++ b/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' diff --git a/src/functions/useLocalStorage/useLocalStorage.ts b/src/functions/useLocalStorage/useLocalStorage.ts new file mode 100755 index 0000000..17aba76 --- /dev/null +++ b/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 + } +} diff --git a/src/components/useLocation/index.ts b/src/functions/useLocation/index.ts similarity index 100% rename from src/components/useLocation/index.ts rename to src/functions/useLocation/index.ts diff --git a/src/components/useLocation/stories/UseLocationDemo.vue b/src/functions/useLocation/stories/UseLocationDemo.vue similarity index 100% rename from src/components/useLocation/stories/UseLocationDemo.vue rename to src/functions/useLocation/stories/UseLocationDemo.vue diff --git a/src/components/useLocation/stories/useLocation.md b/src/functions/useLocation/stories/useLocation.md similarity index 100% rename from src/components/useLocation/stories/useLocation.md rename to src/functions/useLocation/stories/useLocation.md diff --git a/src/components/useLocation/stories/useLocation.story.ts b/src/functions/useLocation/stories/useLocation.story.ts similarity index 100% rename from src/components/useLocation/stories/useLocation.story.ts rename to src/functions/useLocation/stories/useLocation.story.ts diff --git a/src/components/useLocation/useLocation.spec.ts b/src/functions/useLocation/useLocation.spec.ts similarity index 100% rename from src/components/useLocation/useLocation.spec.ts rename to src/functions/useLocation/useLocation.spec.ts diff --git a/src/components/useLocation/useLocation.ts b/src/functions/useLocation/useLocation.ts similarity index 96% rename from src/components/useLocation/useLocation.ts rename to src/functions/useLocation/useLocation.ts index c0d6a71..40f0ef6 100755 --- a/src/components/useLocation/useLocation.ts +++ b/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 diff --git a/src/components/useMedia/index.ts b/src/functions/useMedia/index.ts similarity index 100% rename from src/components/useMedia/index.ts rename to src/functions/useMedia/index.ts diff --git a/src/components/useMedia/stories/UseMediaAdvancedDemo.vue b/src/functions/useMedia/stories/UseMediaAdvancedDemo.vue similarity index 100% rename from src/components/useMedia/stories/UseMediaAdvancedDemo.vue rename to src/functions/useMedia/stories/UseMediaAdvancedDemo.vue diff --git a/src/components/useMedia/stories/UseMediaDemo.vue b/src/functions/useMedia/stories/UseMediaDemo.vue similarity index 100% rename from src/components/useMedia/stories/UseMediaDemo.vue rename to src/functions/useMedia/stories/UseMediaDemo.vue diff --git a/src/components/useMedia/stories/useMedia.md b/src/functions/useMedia/stories/useMedia.md similarity index 100% rename from src/components/useMedia/stories/useMedia.md rename to src/functions/useMedia/stories/useMedia.md diff --git a/src/components/useMedia/stories/useMedia.story.ts b/src/functions/useMedia/stories/useMedia.story.ts similarity index 100% rename from src/components/useMedia/stories/useMedia.story.ts rename to src/functions/useMedia/stories/useMedia.story.ts diff --git a/src/components/useMedia/useMedia.spec.ts b/src/functions/useMedia/useMedia.spec.ts similarity index 100% rename from src/components/useMedia/useMedia.spec.ts rename to src/functions/useMedia/useMedia.spec.ts diff --git a/src/components/useMedia/useMedia.ts b/src/functions/useMedia/useMedia.ts similarity index 100% rename from src/components/useMedia/useMedia.ts rename to src/functions/useMedia/useMedia.ts diff --git a/src/components/useMediaDevices/index.ts b/src/functions/useMediaDevices/index.ts similarity index 100% rename from src/components/useMediaDevices/index.ts rename to src/functions/useMediaDevices/index.ts diff --git a/src/components/useMediaDevices/stories/UseMediaDevicesDemo.vue b/src/functions/useMediaDevices/stories/UseMediaDevicesDemo.vue similarity index 100% rename from src/components/useMediaDevices/stories/UseMediaDevicesDemo.vue rename to src/functions/useMediaDevices/stories/UseMediaDevicesDemo.vue diff --git a/src/components/useMediaDevices/stories/useMediaDevices.md b/src/functions/useMediaDevices/stories/useMediaDevices.md similarity index 100% rename from src/components/useMediaDevices/stories/useMediaDevices.md rename to src/functions/useMediaDevices/stories/useMediaDevices.md diff --git a/src/components/useMediaDevices/stories/useMediaDevices.story.ts b/src/functions/useMediaDevices/stories/useMediaDevices.story.ts similarity index 100% rename from src/components/useMediaDevices/stories/useMediaDevices.story.ts rename to src/functions/useMediaDevices/stories/useMediaDevices.story.ts diff --git a/src/components/useMediaDevices/useMediaDevices.spec.ts b/src/functions/useMediaDevices/useMediaDevices.spec.ts similarity index 100% rename from src/components/useMediaDevices/useMediaDevices.spec.ts rename to src/functions/useMediaDevices/useMediaDevices.spec.ts diff --git a/src/components/useMediaDevices/useMediaDevices.ts b/src/functions/useMediaDevices/useMediaDevices.ts similarity index 100% rename from src/components/useMediaDevices/useMediaDevices.ts rename to src/functions/useMediaDevices/useMediaDevices.ts diff --git a/src/components/useMouse/index.ts b/src/functions/useMouse/index.ts similarity index 100% rename from src/components/useMouse/index.ts rename to src/functions/useMouse/index.ts diff --git a/src/components/useMouse/stories/UseMouseAdvancedDemo.vue b/src/functions/useMouse/stories/UseMouseAdvancedDemo.vue similarity index 100% rename from src/components/useMouse/stories/UseMouseAdvancedDemo.vue rename to src/functions/useMouse/stories/UseMouseAdvancedDemo.vue diff --git a/src/components/useMouse/stories/UseMouseDemo.vue b/src/functions/useMouse/stories/UseMouseDemo.vue similarity index 100% rename from src/components/useMouse/stories/UseMouseDemo.vue rename to src/functions/useMouse/stories/UseMouseDemo.vue diff --git a/src/components/useMouse/stories/useMouse.md b/src/functions/useMouse/stories/useMouse.md similarity index 100% rename from src/components/useMouse/stories/useMouse.md rename to src/functions/useMouse/stories/useMouse.md diff --git a/src/components/useMouse/stories/useMouse.story.ts b/src/functions/useMouse/stories/useMouse.story.ts similarity index 100% rename from src/components/useMouse/stories/useMouse.story.ts rename to src/functions/useMouse/stories/useMouse.story.ts diff --git a/src/components/useMouse/useMouse.spec.ts b/src/functions/useMouse/useMouse.spec.ts similarity index 100% rename from src/components/useMouse/useMouse.spec.ts rename to src/functions/useMouse/useMouse.spec.ts diff --git a/src/components/useMouse/useMouse.ts b/src/functions/useMouse/useMouse.ts similarity index 100% rename from src/components/useMouse/useMouse.ts rename to src/functions/useMouse/useMouse.ts diff --git a/src/components/useMouseElement/index.ts b/src/functions/useMouseElement/index.ts similarity index 100% rename from src/components/useMouseElement/index.ts rename to src/functions/useMouseElement/index.ts diff --git a/src/components/useMouseElement/stories/UseMouseElementDemo.vue b/src/functions/useMouseElement/stories/UseMouseElementDemo.vue similarity index 100% rename from src/components/useMouseElement/stories/UseMouseElementDemo.vue rename to src/functions/useMouseElement/stories/UseMouseElementDemo.vue diff --git a/src/components/useMouseElement/stories/useMouseElement.md b/src/functions/useMouseElement/stories/useMouseElement.md similarity index 100% rename from src/components/useMouseElement/stories/useMouseElement.md rename to src/functions/useMouseElement/stories/useMouseElement.md diff --git a/src/components/useMouseElement/stories/useMouseElement.story.ts b/src/functions/useMouseElement/stories/useMouseElement.story.ts similarity index 100% rename from src/components/useMouseElement/stories/useMouseElement.story.ts rename to src/functions/useMouseElement/stories/useMouseElement.story.ts diff --git a/src/components/useMouseElement/useMouseElement.spec.ts b/src/functions/useMouseElement/useMouseElement.spec.ts similarity index 100% rename from src/components/useMouseElement/useMouseElement.spec.ts rename to src/functions/useMouseElement/useMouseElement.spec.ts diff --git a/src/components/useMouseElement/useMouseElement.ts b/src/functions/useMouseElement/useMouseElement.ts similarity index 100% rename from src/components/useMouseElement/useMouseElement.ts rename to src/functions/useMouseElement/useMouseElement.ts diff --git a/src/components/useMouseLeavePage/index.ts b/src/functions/useMouseLeavePage/index.ts similarity index 100% rename from src/components/useMouseLeavePage/index.ts rename to src/functions/useMouseLeavePage/index.ts diff --git a/src/components/useMouseLeavePage/stories/UseMouseLeavePageDemo.vue b/src/functions/useMouseLeavePage/stories/UseMouseLeavePageDemo.vue similarity index 100% rename from src/components/useMouseLeavePage/stories/UseMouseLeavePageDemo.vue rename to src/functions/useMouseLeavePage/stories/UseMouseLeavePageDemo.vue diff --git a/src/components/useMouseLeavePage/stories/useMouseLeavePage.md b/src/functions/useMouseLeavePage/stories/useMouseLeavePage.md similarity index 100% rename from src/components/useMouseLeavePage/stories/useMouseLeavePage.md rename to src/functions/useMouseLeavePage/stories/useMouseLeavePage.md diff --git a/src/components/useMouseLeavePage/stories/useMouseLeavePage.story.ts b/src/functions/useMouseLeavePage/stories/useMouseLeavePage.story.ts similarity index 100% rename from src/components/useMouseLeavePage/stories/useMouseLeavePage.story.ts rename to src/functions/useMouseLeavePage/stories/useMouseLeavePage.story.ts diff --git a/src/components/useMouseLeavePage/useMouseLeavePage.spec.ts b/src/functions/useMouseLeavePage/useMouseLeavePage.spec.ts similarity index 100% rename from src/components/useMouseLeavePage/useMouseLeavePage.spec.ts rename to src/functions/useMouseLeavePage/useMouseLeavePage.spec.ts diff --git a/src/components/useMouseLeavePage/useMouseLeavePage.ts b/src/functions/useMouseLeavePage/useMouseLeavePage.ts similarity index 100% rename from src/components/useMouseLeavePage/useMouseLeavePage.ts rename to src/functions/useMouseLeavePage/useMouseLeavePage.ts diff --git a/src/components/useRaf/index.ts b/src/functions/useRaf/index.ts similarity index 100% rename from src/components/useRaf/index.ts rename to src/functions/useRaf/index.ts diff --git a/src/components/useRaf/stories/UseRafDemo.vue b/src/functions/useRaf/stories/UseRafDemo.vue similarity index 100% rename from src/components/useRaf/stories/UseRafDemo.vue rename to src/functions/useRaf/stories/UseRafDemo.vue diff --git a/src/components/useRaf/stories/useRaf.md b/src/functions/useRaf/stories/useRaf.md similarity index 100% rename from src/components/useRaf/stories/useRaf.md rename to src/functions/useRaf/stories/useRaf.md diff --git a/src/components/useRaf/stories/useRaf.story.ts b/src/functions/useRaf/stories/useRaf.story.ts similarity index 100% rename from src/components/useRaf/stories/useRaf.story.ts rename to src/functions/useRaf/stories/useRaf.story.ts diff --git a/src/components/useRaf/useRaf.spec.ts b/src/functions/useRaf/useRaf.spec.ts similarity index 100% rename from src/components/useRaf/useRaf.spec.ts rename to src/functions/useRaf/useRaf.spec.ts diff --git a/src/components/useRaf/useRaf.ts b/src/functions/useRaf/useRaf.ts similarity index 86% rename from src/components/useRaf/useRaf.ts rename to src/functions/useRaf/useRaf.ts index 4aa9651..24bddaf 100755 --- a/src/components/useRaf/useRaf.ts +++ b/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) { diff --git a/src/components/useRafFn/index.ts b/src/functions/useRafFn/index.ts similarity index 100% rename from src/components/useRafFn/index.ts rename to src/functions/useRafFn/index.ts diff --git a/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue b/src/functions/useRafFn/stories/UseRafFnAdvancedDemo.vue similarity index 100% rename from src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue rename to src/functions/useRafFn/stories/UseRafFnAdvancedDemo.vue diff --git a/src/components/useRafFn/stories/UseRafFnDemo.vue b/src/functions/useRafFn/stories/UseRafFnDemo.vue similarity index 100% rename from src/components/useRafFn/stories/UseRafFnDemo.vue rename to src/functions/useRafFn/stories/UseRafFnDemo.vue diff --git a/src/components/useRafFn/stories/useRafFn.md b/src/functions/useRafFn/stories/useRafFn.md similarity index 100% rename from src/components/useRafFn/stories/useRafFn.md rename to src/functions/useRafFn/stories/useRafFn.md diff --git a/src/components/useRafFn/stories/useRafFn.story.ts b/src/functions/useRafFn/stories/useRafFn.story.ts similarity index 100% rename from src/components/useRafFn/stories/useRafFn.story.ts rename to src/functions/useRafFn/stories/useRafFn.story.ts diff --git a/src/components/useRafFn/useRafFn.spec.ts b/src/functions/useRafFn/useRafFn.spec.ts similarity index 100% rename from src/components/useRafFn/useRafFn.spec.ts rename to src/functions/useRafFn/useRafFn.spec.ts diff --git a/src/components/useRafFn/useRafFn.ts b/src/functions/useRafFn/useRafFn.ts similarity index 100% rename from src/components/useRafFn/useRafFn.ts rename to src/functions/useRafFn/useRafFn.ts diff --git a/src/components/useSampleComponent/index.ts b/src/functions/useSampleComponent/index.ts similarity index 100% rename from src/components/useSampleComponent/index.ts rename to src/functions/useSampleComponent/index.ts diff --git a/src/components/useSampleComponent/stories/UseSampleComponentDemo.vue b/src/functions/useSampleComponent/stories/UseSampleComponentDemo.vue similarity index 100% rename from src/components/useSampleComponent/stories/UseSampleComponentDemo.vue rename to src/functions/useSampleComponent/stories/UseSampleComponentDemo.vue diff --git a/src/components/useSampleComponent/stories/useSampleComponent.md b/src/functions/useSampleComponent/stories/useSampleComponent.md similarity index 100% rename from src/components/useSampleComponent/stories/useSampleComponent.md rename to src/functions/useSampleComponent/stories/useSampleComponent.md diff --git a/src/components/useSampleComponent/stories/useSampleComponent.storySample.ts b/src/functions/useSampleComponent/stories/useSampleComponent.storySample.ts similarity index 100% rename from src/components/useSampleComponent/stories/useSampleComponent.storySample.ts rename to src/functions/useSampleComponent/stories/useSampleComponent.storySample.ts diff --git a/src/components/useSampleComponent/useSampleComponent.spec.ts b/src/functions/useSampleComponent/useSampleComponent.spec.ts similarity index 100% rename from src/components/useSampleComponent/useSampleComponent.spec.ts rename to src/functions/useSampleComponent/useSampleComponent.spec.ts diff --git a/src/components/useSampleComponent/useSampleComponent.ts b/src/functions/useSampleComponent/useSampleComponent.ts similarity index 100% rename from src/components/useSampleComponent/useSampleComponent.ts rename to src/functions/useSampleComponent/useSampleComponent.ts diff --git a/src/components/useSearchParams/index.ts b/src/functions/useSearchParams/index.ts similarity index 100% rename from src/components/useSearchParams/index.ts rename to src/functions/useSearchParams/index.ts diff --git a/src/components/useSearchParams/stories/Field.vue b/src/functions/useSearchParams/stories/Field.vue similarity index 100% rename from src/components/useSearchParams/stories/Field.vue rename to src/functions/useSearchParams/stories/Field.vue diff --git a/src/components/useSearchParams/stories/UseSearchParamsDemo.vue b/src/functions/useSearchParams/stories/UseSearchParamsDemo.vue similarity index 100% rename from src/components/useSearchParams/stories/UseSearchParamsDemo.vue rename to src/functions/useSearchParams/stories/UseSearchParamsDemo.vue diff --git a/src/components/useSearchParams/stories/useSearchParams.md b/src/functions/useSearchParams/stories/useSearchParams.md similarity index 100% rename from src/components/useSearchParams/stories/useSearchParams.md rename to src/functions/useSearchParams/stories/useSearchParams.md diff --git a/src/components/useSearchParams/stories/useSearchParams.story.ts b/src/functions/useSearchParams/stories/useSearchParams.story.ts similarity index 100% rename from src/components/useSearchParams/stories/useSearchParams.story.ts rename to src/functions/useSearchParams/stories/useSearchParams.story.ts diff --git a/src/components/useSearchParams/useSearchParams.spec.ts b/src/functions/useSearchParams/useSearchParams.spec.ts similarity index 100% rename from src/components/useSearchParams/useSearchParams.spec.ts rename to src/functions/useSearchParams/useSearchParams.spec.ts diff --git a/src/components/useSearchParams/useSearchParams.ts b/src/functions/useSearchParams/useSearchParams.ts similarity index 94% rename from src/components/useSearchParams/useSearchParams.ts rename to src/functions/useSearchParams/useSearchParams.ts index df71c83..2d69684 100755 --- a/src/components/useSearchParams/useSearchParams.ts +++ b/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, diff --git a/src/functions/useSessionStorage/index.ts b/src/functions/useSessionStorage/index.ts new file mode 100755 index 0000000..13a084e --- /dev/null +++ b/src/functions/useSessionStorage/index.ts @@ -0,0 +1 @@ +export * from './useSessionStorage' diff --git a/src/functions/useSessionStorage/stories/UseSessionStorageDemo.vue b/src/functions/useSessionStorage/stories/UseSessionStorageDemo.vue new file mode 100755 index 0000000..5e80f8d --- /dev/null +++ b/src/functions/useSessionStorage/stories/UseSessionStorageDemo.vue @@ -0,0 +1,84 @@ + + + diff --git a/src/functions/useSessionStorage/stories/useSessionStorage.md b/src/functions/useSessionStorage/stories/useSessionStorage.md new file mode 100755 index 0000000..f21eb26 --- /dev/null +++ b/src/functions/useSessionStorage/stories/useSessionStorage.md @@ -0,0 +1,77 @@ +# useSessionStorage + +Vue function that provides way to read, update and delete a sessionStorage key + +## Reference + +```typescript +interface StorageOptions { + isParsing: boolean + serializer?: SerializerFunction + deserializer?: DeserializerFunction +} +``` + +```typescript +function useSessionStorage( + key: string, + options?: StorageOptions, + runOnMount?: boolean +): { + item: Ref + getItem: () => void + setItem: (newVal: any) => void + removeItem: () => void +} +``` + +### Parameters + +- `key: string` the sessionStorage key you wish to get/set/remove +- `options: StorageOptions` + - `isParsing: boolean` whether to enable parsing the sessionStorage 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 sessionStorage key on mount or not, `true` by default + +### Returns + +- `item: Ref` the sessionStorage key value, it can be null, a string or a JSON object/array +- `getItem: Function` get the sessionStorage key value +- `setItem: Function` set the sessionStorage key value + - `newVal: any`: the value to set, can be a string or an object/array +- `removeItem: Function` delete the sessionStorage key + +## Usage + +```html + + + +``` diff --git a/src/functions/useSessionStorage/stories/useSessionStorage.story.ts b/src/functions/useSessionStorage/stories/useSessionStorage.story.ts new file mode 100755 index 0000000..d3df0b5 --- /dev/null +++ b/src/functions/useSessionStorage/stories/useSessionStorage.story.ts @@ -0,0 +1,28 @@ +import { storiesOf } from '@storybook/vue' +import path from 'path' +import StoryTitle from '@src/helpers/StoryTitle.vue' +import UseSessionStorageDemo from './UseSessionStorageDemo.vue' + +const functionName = 'useSessionStorage' +const functionPath = path.resolve(__dirname, '..') +const notes = require(`./${functionName}.md`).default + +const basicDemo = () => ({ + components: { StoryTitle, demo: UseSessionStorageDemo }, + template: ` +
+ + + + + +
` +}) + +storiesOf('side effects|useSessionStorage', module) + .addParameters({ notes }) + .add('Demo', basicDemo) diff --git a/src/functions/useSessionStorage/useSessionStorage.spec.ts b/src/functions/useSessionStorage/useSessionStorage.spec.ts new file mode 100755 index 0000000..bb4c5c7 --- /dev/null +++ b/src/functions/useSessionStorage/useSessionStorage.spec.ts @@ -0,0 +1,188 @@ +import { mount } from '@src/helpers/test' +import { useSessionStorage } from '@src/vue-use-kit' + +const sessionStorageMock = () => { + let store = {} as any + return { + getItem(key: any) { + return store[key] + }, + setItem(key: any, value: any) { + store[key] = String(value) + }, + clear() { + store = {} + }, + removeItem(key: any) { + delete store[key] + } + } +} + +beforeEach(() => { + ;(window as any).sessionStorage = sessionStorageMock() +}) + +afterEach(() => { + jest.clearAllMocks() +}) + +const testComponent = ( + key = 'key', + itemValue: any = '', + opts = { isParsing: false } as any, + onMount = true +) => ({ + template: ` +
+
{{ item }}
+
+ {{ item && item.value1 }} - {{ item && item.value2 }} +
+ + + +
+ `, + setup() { + const { item, getItem, setItem, removeItem } = useSessionStorage( + key, + opts, + onMount + ) + + return { + item, + getItem, + setItem, + removeItem, + itemValue + } + } +}) + +describe('useSessionStorage', () => { + it('should get a item with the given value', async () => { + const itemKey = 'itemKey' + const itemValue = 'itemValue' + ;(window as any).sessionStorage.setItem(itemKey, itemValue) + const wrapper = mount(testComponent(itemKey)) + await wrapper.vm.$nextTick() + expect(wrapper.html()).toContain(itemValue) + }) + + it('should set a item with the given value', async () => { + const itemKey = 'itemKey' + const itemValue = 'itemValue' + const wrapper = mount(testComponent(itemKey, itemValue)) + await wrapper.vm.$nextTick() + expect(sessionStorage.getItem(itemKey)).toContain(itemValue) + }) + + it('should remove a item with the given value', async () => { + const itemKey = 'itemKey' + const itemValue = 'itemValue' + const wrapper = mount(testComponent(itemKey, itemValue)) + await wrapper.vm.$nextTick() + expect(sessionStorage.getItem(itemKey)).toContain(itemValue) + wrapper.find('#removeItem').trigger('click') + await wrapper.vm.$nextTick() + expect(sessionStorage.getItem(itemKey)).toBeFalsy() + }) + + it('should correctly get and set the isParsing object', async () => { + const itemKey = 'itemKey' + const itemValue = { value1: 'testValue1', value2: 'testValue2' } + const wrapper = mount( + testComponent(itemKey, itemValue, { isParsing: true }) + ) + wrapper.find('#setItem').trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.find('#itemJson').html()).toContain(itemValue.value1) + expect(wrapper.find('#itemJson').html()).toContain(itemValue.value2) + + // Also check that when clicking #getItem we still get a proper JSON object + wrapper.find('#getItem').trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.find('#itemJson').html()).toContain(itemValue.value1) + expect(wrapper.find('#itemJson').html()).toContain(itemValue.value2) + }) + + it('should correctly get using the deserializer', async () => { + const itemKey = 'itemKey' + const itemValue = { value1: 'testValue1', value2: 'testValue2' } + const deserializerVal = { value1: 'gatto', value2: 'topo' } + const wrapper = mount( + testComponent(itemKey, itemValue, { + isParsing: true, + deserializer: () => deserializerVal + }) + ) + await wrapper.vm.$nextTick() + expect(wrapper.find('#itemJson').html()).toContain(deserializerVal.value1) + expect(wrapper.find('#itemJson').html()).toContain(deserializerVal.value2) + }) + + it('should ignore deserializer when isParsing is false', async () => { + const itemKey = 'itemKey' + const itemValue = { value1: 'testValue1', value2: 'testValue2' } + const deserializerVal = { value1: 'gatto', value2: 'topo' } + const wrapper = mount( + testComponent(itemKey, itemValue, { + isParsing: false, + deserializer: () => deserializerVal + }) + ) + await wrapper.vm.$nextTick() + expect(wrapper.find('#item').html()).toContain(itemValue.value1) + expect(wrapper.find('#item').html()).toContain(itemValue.value2) + expect(wrapper.find('#itemJson').html()).not.toContain( + deserializerVal.value1 + ) + expect(wrapper.find('#itemJson').html()).not.toContain( + deserializerVal.value2 + ) + }) + + it('should correctly set the object using the serializer', async () => { + const itemKey = 'itemKey' + const itemValue = { value1: 'testValue1', value2: 'testValue2' } + const serializerVal = { value1: 'testValue1+1', value2: 'testValue2+1' } + const wrapper = mount( + testComponent(itemKey, itemValue, { + isParsing: true, + serializer: (obj: any) => + JSON.stringify({ + value1: `${obj.value1}+1`, + value2: `${obj.value2}+1` + }) + }) + ) + wrapper.find('#setItem').trigger('click') + wrapper.find('#getItem').trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.find('#itemJson').html()).toContain(serializerVal.value1) + expect(wrapper.find('#itemJson').html()).toContain(serializerVal.value2) + }) + + it('should ignore serializer when isParsing is false', async () => { + const itemKey = 'itemKey' + const itemValue = { value1: 'testValue1', value2: 'testValue2' } + const serializerVal = { value1: 'testValue1+1', value2: 'testValue2+1' } + const wrapper = mount( + testComponent(itemKey, itemValue, { + isParsing: false, + serializer: (obj: any) => ({ + value1: `${obj.value1}+1`, + value2: `${obj.value2}+1` + }) + }) + ) + wrapper.find('#setItem').trigger('click') + wrapper.find('#getItem').trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.find('#item').html()).toContain('[object Object]') + expect(wrapper.find('#itemJson').html()).not.toContain(serializerVal.value1) + expect(wrapper.find('#itemJson').html()).not.toContain(serializerVal.value2) + }) +}) diff --git a/src/functions/useSessionStorage/useSessionStorage.ts b/src/functions/useSessionStorage/useSessionStorage.ts new file mode 100755 index 0000000..ded9e09 --- /dev/null +++ b/src/functions/useSessionStorage/useSessionStorage.ts @@ -0,0 +1,23 @@ +import { createStorage, StorageOptions } from '@src/shared/createStorage' +import { onMounted, Ref } from '@src/api' + +export function useSessionStorage( + key: string, + options?: StorageOptions, + runOnMount = true +) { + const { item, getItem, setItem, removeItem } = createStorage( + sessionStorage, + key, + options + ) + + onMounted(() => runOnMount && getItem()) + + return { + item, + getItem, + setItem, + removeItem + } +} diff --git a/src/components/useTimeout/index.ts b/src/functions/useTimeout/index.ts similarity index 100% rename from src/components/useTimeout/index.ts rename to src/functions/useTimeout/index.ts diff --git a/src/components/useTimeout/stories/UseTimeoutDemo.vue b/src/functions/useTimeout/stories/UseTimeoutDemo.vue similarity index 100% rename from src/components/useTimeout/stories/UseTimeoutDemo.vue rename to src/functions/useTimeout/stories/UseTimeoutDemo.vue diff --git a/src/components/useTimeout/stories/useTimeout.md b/src/functions/useTimeout/stories/useTimeout.md similarity index 100% rename from src/components/useTimeout/stories/useTimeout.md rename to src/functions/useTimeout/stories/useTimeout.md diff --git a/src/components/useTimeout/stories/useTimeout.story.ts b/src/functions/useTimeout/stories/useTimeout.story.ts similarity index 100% rename from src/components/useTimeout/stories/useTimeout.story.ts rename to src/functions/useTimeout/stories/useTimeout.story.ts diff --git a/src/components/useTimeout/useTimeout.spec.ts b/src/functions/useTimeout/useTimeout.spec.ts similarity index 100% rename from src/components/useTimeout/useTimeout.spec.ts rename to src/functions/useTimeout/useTimeout.spec.ts diff --git a/src/components/useTimeout/useTimeout.ts b/src/functions/useTimeout/useTimeout.ts similarity index 78% rename from src/components/useTimeout/useTimeout.ts rename to src/functions/useTimeout/useTimeout.ts index 82e3804..6e070cf 100755 --- a/src/components/useTimeout/useTimeout.ts +++ b/src/functions/useTimeout/useTimeout.ts @@ -1,5 +1,5 @@ import { Ref } from '@src/api' -import { useTimeoutFn } from '@src/components/useTimeoutFn' +import { useTimeoutFn } from '@src/functions/useTimeoutFn' const noop = () => null export function useTimeout(ms = 0, runOnMount = true) { diff --git a/src/components/useTimeoutFn/index.ts b/src/functions/useTimeoutFn/index.ts similarity index 100% rename from src/components/useTimeoutFn/index.ts rename to src/functions/useTimeoutFn/index.ts diff --git a/src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue b/src/functions/useTimeoutFn/stories/UseTimeoutFnDemo.vue similarity index 100% rename from src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue rename to src/functions/useTimeoutFn/stories/UseTimeoutFnDemo.vue diff --git a/src/components/useTimeoutFn/stories/useTimeoutFn.md b/src/functions/useTimeoutFn/stories/useTimeoutFn.md similarity index 100% rename from src/components/useTimeoutFn/stories/useTimeoutFn.md rename to src/functions/useTimeoutFn/stories/useTimeoutFn.md diff --git a/src/components/useTimeoutFn/stories/useTimeoutFn.story.ts b/src/functions/useTimeoutFn/stories/useTimeoutFn.story.ts similarity index 100% rename from src/components/useTimeoutFn/stories/useTimeoutFn.story.ts rename to src/functions/useTimeoutFn/stories/useTimeoutFn.story.ts diff --git a/src/components/useTimeoutFn/useTimeoutFn.spec.ts b/src/functions/useTimeoutFn/useTimeoutFn.spec.ts similarity index 100% rename from src/components/useTimeoutFn/useTimeoutFn.spec.ts rename to src/functions/useTimeoutFn/useTimeoutFn.spec.ts diff --git a/src/components/useTimeoutFn/useTimeoutFn.ts b/src/functions/useTimeoutFn/useTimeoutFn.ts similarity index 100% rename from src/components/useTimeoutFn/useTimeoutFn.ts rename to src/functions/useTimeoutFn/useTimeoutFn.ts diff --git a/src/components/useLocalStorage/useLocalStorage.ts b/src/shared/createStorage.ts similarity index 66% rename from src/components/useLocalStorage/useLocalStorage.ts rename to src/shared/createStorage.ts index 3631122..e2cf4e5 100755 --- a/src/components/useLocalStorage/useLocalStorage.ts +++ b/src/shared/createStorage.ts @@ -1,79 +1,80 @@ -import { - createSerializer, - createDeserializer, - SerializerFunction, - DeserializerFunction, - trySerialize, - tryDeserialize, - isNullOrUndefined -} from '@src/utils' -import { ref, onMounted, Ref } from '@src/api' - -export interface UseLocalStorageOptions { - isParsing: boolean - serializer?: SerializerFunction - deserializer?: DeserializerFunction -} - -const defaultOptions = { - isParsing: false -} - -export function useLocalStorage( - key: string, - options?: UseLocalStorageOptions, - runOnMount = true -) { - const { isParsing, ...opts } = Object.assign({}, defaultOptions, options) - const serializer = createSerializer(opts.serializer) - const deserializer = createDeserializer(opts.deserializer) - - const item: Ref = ref(null) - - const getItem = () => { - try { - const itemVal = tryDeserialize( - localStorage.getItem(key), - deserializer, - isParsing - ) - if (!isNullOrUndefined(itemVal)) item.value = itemVal - } catch (error) { - // If user is in private mode or has storage restriction localStorage can throw - } - } - - const setItem = ( - // The user may pass a 'string', a 'number', a valid JSON object/array - // or even a custom object when serializer/deserializer are defined - // so it is better to set allowed newItemVal as 'any' - newVal: any - ) => { - try { - const newItemVal = trySerialize(newVal, serializer, isParsing) - localStorage.setItem(key, newItemVal) - item.value = tryDeserialize(newItemVal, deserializer, isParsing) - } catch (error) { - // If user is in private mode or has storage restriction localStorage can throw - } - } - - const removeItem = () => { - try { - localStorage.removeItem(key) - item.value = null - } catch (error) { - // If user is in private mode or has storage restriction localStorage can throw - item.value = null - } - } - - onMounted(() => runOnMount && getItem()) - - return { - item, - getItem, - setItem, - removeItem - } -} +import { + createSerializer, + createDeserializer, + SerializerFunction, + DeserializerFunction, + trySerialize, + tryDeserialize, + isNullOrUndefined +} from '@src/shared/utils' +import { ref, Ref } from '@src/api' + +export interface StorageOptions { + isParsing: boolean + serializer?: SerializerFunction + deserializer?: DeserializerFunction +} + +const defaultOptions = { + isParsing: false +} + +export function createStorage( + storage: Storage, + key: string, + options?: StorageOptions +) { + const { isParsing, ...opts } = Object.assign({}, defaultOptions, options) + const serializer = createSerializer(opts.serializer) + const deserializer = createDeserializer(opts.deserializer) + + const item: Ref = ref(null) + + const getItem = () => { + try { + const itemVal = tryDeserialize( + storage.getItem(key), + deserializer, + isParsing + ) + if (!isNullOrUndefined(itemVal)) item.value = itemVal + } catch (error) { + // If user is in private mode or has storage restriction + // sessionStorage/locationStorage can throw + } + } + + const setItem = ( + // The user may pass a 'string', a 'number', a valid JSON object/array + // or even a custom object when serializer/deserializer are defined + // so it is better to set allowed newItemVal as 'any' + newVal: any + ) => { + try { + const newItemVal = trySerialize(newVal, serializer, isParsing) + storage.setItem(key, newItemVal) + item.value = tryDeserialize(newItemVal, deserializer, isParsing) + } catch (error) { + // If user is in private mode or has storage restriction + // sessionStorage/locationStorage can throw + } + } + + const removeItem = () => { + try { + storage.removeItem(key) + item.value = null + } catch (error) { + // If user is in private mode or has storage restriction + // sessionStorage/locationStorage can throw + item.value = null + } + } + + return { + item, + getItem, + setItem, + removeItem + } +} diff --git a/src/utils.ts b/src/shared/utils.ts similarity index 100% rename from src/utils.ts rename to src/shared/utils.ts diff --git a/src/vue-use-kit.ts b/src/vue-use-kit.ts index 98aac17..3681121 100755 --- a/src/vue-use-kit.ts +++ b/src/vue-use-kit.ts @@ -1,28 +1,29 @@ // Utility -export * from './components/getQuery' +export * from './functions/getQuery' // UI -export * from './components/useClickAway' -export * from './components/useFullscreen' +export * from './functions/useClickAway' +export * from './functions/useFullscreen' // Sensors -export * from './components/useGeolocation' -export * from './components/useHover' -export * from './components/useIdle' -export * from './components/useIntersection' -export * from './components/useLocation' -export * from './components/useMedia' -export * from './components/useMediaDevices' -export * from './components/useMouse' -export * from './components/useMouseElement' -export * from './components/useMouseLeavePage' -export * from './components/useSearchParams' +export * from './functions/useGeolocation' +export * from './functions/useHover' +export * from './functions/useIdle' +export * from './functions/useIntersection' +export * from './functions/useLocation' +export * from './functions/useMedia' +export * from './functions/useMediaDevices' +export * from './functions/useMouse' +export * from './functions/useMouseElement' +export * from './functions/useMouseLeavePage' +export * from './functions/useSearchParams' // Animations -export * from './components/useIntervalFn' -export * from './components/useInterval' -export * from './components/useRafFn' -export * from './components/useRaf' -export * from './components/useTimeoutFn' -export * from './components/useTimeout' +export * from './functions/useIntervalFn' +export * from './functions/useInterval' +export * from './functions/useRafFn' +export * from './functions/useRaf' +export * from './functions/useTimeoutFn' +export * from './functions/useTimeout' // Site Effects -export * from './components/useBeforeUnload' -export * from './components/useCookie' -export * from './components/useLocalStorage' +export * from './functions/useBeforeUnload' +export * from './functions/useCookie' +export * from './functions/useLocalStorage' +export * from './functions/useSessionStorage'