-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useSessionStorage): Added useSessionStorage and refactored file …
…system structure
- Loading branch information
1 parent
db2d1b4
commit f799a09
Showing
160 changed files
with
573 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
src/components/useInterval/useInterval.ts → src/functions/useInterval/useInterval.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
src/components/useLocation/useLocation.ts → src/functions/useLocation/useLocation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
src/components/useRaf/useRaf.ts → src/functions/useRaf/useRaf.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
5 changes: 4 additions & 1 deletion
5
...onents/useSearchParams/useSearchParams.ts → ...ctions/useSearchParams/useSearchParams.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './useSessionStorage' |
84 changes: 84 additions & 0 deletions
84
src/functions/useSessionStorage/stories/UseSessionStorageDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
77 changes: 77 additions & 0 deletions
77
src/functions/useSessionStorage/stories/useSessionStorage.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<any> | ||
| 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<any>` 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 | ||
| <template> | ||
| <div> | ||
| <div>Item: {{ item }}</div> | ||
| <button @click="getItem">Get item</button> | ||
| <button @click="setItem('Value here')">Set item</button> | ||
| <button @click="removeItem">Remove item</button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import Vue from 'vue' | ||
| import { useSessionStorage } from 'vue-use-kit' | ||
| export default Vue.extend({ | ||
| name: 'UseSessionStorageDemo', | ||
| setup() { | ||
| const { item, getItem, setItem, removeItem } = useSessionStorage( | ||
| 'i_love_session_storage' | ||
| ) | ||
| return { | ||
| item, | ||
| getItem, | ||
| setItem, | ||
| removeItem | ||
| } | ||
| } | ||
| }) | ||
| </script> | ||
| ``` |
28 changes: 28 additions & 0 deletions
28
src/functions/useSessionStorage/stories/useSessionStorage.story.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: ` | ||
| <div class="container"> | ||
| <story-title | ||
| function-path="${functionPath}" | ||
| source-name="${functionName}" | ||
| demo-name="UseSessionStorageDemo.vue" | ||
| > | ||
| <template v-slot:title></template> | ||
| <template v-slot:intro></template> | ||
| </story-title> | ||
| <demo /> | ||
| </div>` | ||
| }) | ||
|
|
||
| storiesOf('side effects|useSessionStorage', module) | ||
| .addParameters({ notes }) | ||
| .add('Demo', basicDemo) |
Oops, something went wrong.