From db817a2459e23bd096274a7f91815d613d5f7ff4 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Sat, 28 Jan 2023 21:06:16 +0100 Subject: [PATCH] refactor(tools): config in query params --- package.json | 1 + pnpm-lock.yaml | 93 ++++++++++++++++--- src/composable/queryParams.ts | 35 +++++++ src/tools/hash-text/hash-text.vue | 3 +- .../token-generator/token-generator.tool.vue | 15 ++- src/tools/uuid-generator/uuid-generator.vue | 3 +- 6 files changed, 126 insertions(+), 24 deletions(-) create mode 100644 src/composable/queryParams.ts diff --git a/package.json b/package.json index 274012fd..92f3e5ad 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@vicons/tabler": "^0.12.0", "@vueuse/core": "^8.9.4", "@vueuse/head": "^0.7.13", + "@vueuse/router": "^9.11.0", "bcryptjs": "^2.4.3", "change-case": "^4.1.2", "colord": "^2.9.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8266286..b96de112 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,7 @@ specifiers: '@vue/tsconfig': ^0.1.3 '@vueuse/core': ^8.9.4 '@vueuse/head': ^0.7.13 + '@vueuse/router': ^9.11.0 bcryptjs: ^2.4.3 c8: ^7.12.0 change-case: ^4.1.2 @@ -76,6 +77,7 @@ dependencies: '@vicons/tabler': 0.12.0 '@vueuse/core': 8.9.4_vue@3.2.45 '@vueuse/head': 0.7.13_vue@3.2.45 + '@vueuse/router': 9.11.0_xsxatmlnmmg5bcuv3xdnj6fj7y bcryptjs: 2.4.3 change-case: 4.1.2 colord: 2.9.3 @@ -124,7 +126,7 @@ devDependencies: eslint: 8.27.0 eslint-config-prettier: 8.5.0_eslint@8.27.0 eslint-import-resolver-typescript: 3.5.2_dcpv4nbdr5ks2h5677xdltrk6e - eslint-plugin-import: 2.26.0_eslint@8.27.0 + eslint-plugin-import: 2.26.0_gbipkkcbnjmysmpjttq6vkmfqq eslint-plugin-vue: 8.7.1_eslint@8.27.0 jsdom: 19.0.0 less: 4.1.3 @@ -134,7 +136,7 @@ devDependencies: typescript: 4.5.5 vite: 2.9.15_less@4.1.3 vite-plugin-md: 0.12.4_vite@2.9.15 - vite-plugin-pwa: 0.11.13_vite@2.9.15 + vite-plugin-pwa: 0.11.13_7mbbuzxp22mje5bxdolj2b6yg4 vite-svg-loader: 3.6.0 vitest: 0.13.1_uwxj23d3xojfwkqpytqc7pyhry vue-tsc: 0.31.4_typescript@4.5.5 @@ -2068,6 +2070,10 @@ packages: peerDependencies: eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 eslint-plugin-vue: ^8.0.1 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true dependencies: '@typescript-eslint/eslint-plugin': 5.42.1_vfr6z4qvdp6defk3ked6x75zyi '@typescript-eslint/parser': 5.42.1_4rqwsplhh2ekz63wktwk7d7ht4 @@ -2077,7 +2083,6 @@ packages: vue-eslint-parser: 8.3.0_eslint@8.27.0 transitivePeerDependencies: - supports-color - - typescript dev: true /@vue/reactivity-transform/3.2.45: @@ -2106,7 +2111,6 @@ packages: '@vue/runtime-core': 3.2.45 '@vue/shared': 3.2.45 csstype: 2.6.21 - dev: false /@vue/server-renderer/3.2.45_vue@3.2.45: resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==} @@ -2116,7 +2120,6 @@ packages: '@vue/compiler-ssr': 3.2.45 '@vue/shared': 3.2.45 vue: 3.2.45 - dev: false /@vue/shared/3.2.45: resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==} @@ -2173,6 +2176,19 @@ packages: resolution: {integrity: sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==} dev: false + /@vueuse/router/9.11.0_xsxatmlnmmg5bcuv3xdnj6fj7y: + resolution: {integrity: sha512-AlaQzbUy3XeqeoIapQxLvJjPzbdiO/Dt1thQhebP4iFUjc61a7WrboULxNBY+jEH0XipwK/T/b9mBnmn/jEStA==} + peerDependencies: + vue-router: '>=4.0.0-rc.1' + dependencies: + '@vueuse/shared': 9.11.0_vue@3.2.45 + vue-demi: 0.13.11_vue@3.2.45 + vue-router: 4.1.6_vue@3.2.45 + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /@vueuse/shared/8.9.4_vue@3.2.45: resolution: {integrity: sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==} peerDependencies: @@ -2188,6 +2204,15 @@ packages: vue-demi: 0.13.11_vue@3.2.45 dev: false + /@vueuse/shared/9.11.0_vue@3.2.45: + resolution: {integrity: sha512-8lO7wD5abYxupKy2KynH1pSgP715ky6iCrWYb8aX2AuAVi9uHXj7qE1dw6BnmArSaLHci4x9iuzWPCpAzUkC/A==} + dependencies: + vue-demi: 0.13.11_vue@3.2.45 + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /@vueuse/shared/9.5.0_vue@3.2.45: resolution: {integrity: sha512-HnnCWU1Vg9CVWRCcI8ohDKDRB2Sc4bTgT1XAIaoLSfVHHn+TKbrox6pd3klCSw4UDxkhDfOk8cAdcK+Z5KleCA==} dependencies: @@ -2861,8 +2886,8 @@ packages: engines: {node: '>=10'} hasBin: true dependencies: - is-text-path: 1.0.1 JSONStream: 1.3.5 + is-text-path: 1.0.1 lodash: 4.17.21 meow: 8.1.2 split2: 3.2.2 @@ -2991,7 +3016,6 @@ packages: /csstype/2.6.21: resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==} - dev: false /csstype/3.0.11: resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==} @@ -3030,12 +3054,22 @@ packages: /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true dependencies: ms: 2.0.0 dev: true /debug/3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true dependencies: ms: 2.1.3 dev: true @@ -3574,6 +3608,8 @@ packages: dependencies: debug: 3.2.7 resolve: 1.22.1 + transitivePeerDependencies: + - supports-color dev: true /eslint-import-resolver-typescript/3.5.2_dcpv4nbdr5ks2h5677xdltrk6e: @@ -3586,7 +3622,7 @@ packages: debug: 4.3.4 enhanced-resolve: 5.10.0 eslint: 8.27.0 - eslint-plugin-import: 2.26.0_eslint@8.27.0 + eslint-plugin-import: 2.26.0_gbipkkcbnjmysmpjttq6vkmfqq get-tsconfig: 4.2.0 globby: 13.1.2 is-core-module: 2.11.0 @@ -3596,32 +3632,54 @@ packages: - supports-color dev: true - /eslint-module-utils/2.7.4_eslint@8.27.0: + /eslint-module-utils/2.7.4_idrr6ghswzssuopqxluk4kfum4: resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==} engines: {node: '>=4'} peerDependencies: + '@typescript-eslint/parser': '*' eslint: '*' + eslint-import-resolver-node: '*' + eslint-import-resolver-typescript: '*' + eslint-import-resolver-webpack: '*' peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true eslint: optional: true + eslint-import-resolver-node: + optional: true + eslint-import-resolver-typescript: + optional: true + eslint-import-resolver-webpack: + optional: true dependencies: + '@typescript-eslint/parser': 5.42.1_4rqwsplhh2ekz63wktwk7d7ht4 debug: 3.2.7 eslint: 8.27.0 + eslint-import-resolver-node: 0.3.6 + eslint-import-resolver-typescript: 3.5.2_dcpv4nbdr5ks2h5677xdltrk6e + transitivePeerDependencies: + - supports-color dev: true - /eslint-plugin-import/2.26.0_eslint@8.27.0: + /eslint-plugin-import/2.26.0_gbipkkcbnjmysmpjttq6vkmfqq: resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==} engines: {node: '>=4'} peerDependencies: + '@typescript-eslint/parser': '*' eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true dependencies: + '@typescript-eslint/parser': 5.42.1_4rqwsplhh2ekz63wktwk7d7ht4 array-includes: 3.1.6 array.prototype.flat: 1.3.1 debug: 2.6.9 doctrine: 2.1.0 eslint: 8.27.0 eslint-import-resolver-node: 0.3.6 - eslint-module-utils: 2.7.4_eslint@8.27.0 + eslint-module-utils: 2.7.4_idrr6ghswzssuopqxluk4kfum4 has: 1.0.3 is-core-module: 2.11.0 is-glob: 4.0.3 @@ -3629,6 +3687,10 @@ packages: object.values: 1.1.6 resolve: 1.22.1 tsconfig-paths: 3.14.1 + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color dev: true /eslint-plugin-prettier/4.2.1_v7o5sx5x3wbs57ifz6wc4f76we: @@ -4834,6 +4896,8 @@ packages: mime: 1.6.0 needle: 3.1.0 source-map: 0.6.1 + transitivePeerDependencies: + - supports-color dev: true /leven/3.1.0: @@ -5176,6 +5240,8 @@ packages: debug: 3.2.7 iconv-lite: 0.6.3 sax: 1.2.4 + transitivePeerDependencies: + - supports-color dev: true optional: true @@ -6542,7 +6608,6 @@ packages: resolution: {integrity: sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==} engines: {node: '>=4.2.0'} hasBin: true - dev: true /uc.micro/1.0.6: resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==} @@ -6699,10 +6764,11 @@ packages: vite: 2.9.15_less@4.1.3 dev: true - /vite-plugin-pwa/0.11.13_vite@2.9.15: + /vite-plugin-pwa/0.11.13_7mbbuzxp22mje5bxdolj2b6yg4: resolution: {integrity: sha512-Ssj14m3TRVLfkFEAWSMcFE2d1cSdEZyrVTzfY2lSL+umHYvcIFHVDAY143sygtBCb44OPczsAOmWwBTxwOvh7g==} peerDependencies: vite: ^2.0.0 + workbox-window: ^6.4.0 dependencies: debug: 4.3.4 fast-glob: 3.2.12 @@ -6968,7 +7034,6 @@ packages: '@vue/runtime-dom': 3.2.45 '@vue/server-renderer': 3.2.45_vue@3.2.45 '@vue/shared': 3.2.45 - dev: false /vueuc/0.4.49_vue@3.2.45: resolution: {integrity: sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==} diff --git a/src/composable/queryParams.ts b/src/composable/queryParams.ts new file mode 100644 index 00000000..b62c8b39 --- /dev/null +++ b/src/composable/queryParams.ts @@ -0,0 +1,35 @@ +import { useRouteQuery } from '@vueuse/router'; +import { computed } from 'vue'; + +export { useQueryParam }; + +const transformers = { + number: { + fromQuery: (value: string) => Number(value), + toQuery: (value: number) => String(value), + }, + string: { + fromQuery: (value: string) => value, + toQuery: (value: string) => value, + }, + boolean: { + fromQuery: (value: string) => value.toLowerCase() === 'true', + toQuery: (value: boolean) => (value ? 'true' : 'false'), + }, +}; + +function useQueryParam({ name, defaultValue }: { name: string; defaultValue: T }) { + const type = typeof defaultValue; + const transformer = transformers[type as keyof typeof transformers] ?? transformers.string; + + const proxy = useRouteQuery(name, transformer.toQuery(defaultValue as never)); + + return computed({ + get() { + return transformer.fromQuery(proxy.value) as T; + }, + set(value) { + proxy.value = transformer.toQuery(value as never); + }, + }); +} diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue index 4b7bcf19..50a9c334 100644 --- a/src/tools/hash-text/hash-text.vue +++ b/src/tools/hash-text/hash-text.vue @@ -40,6 +40,7 @@ diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue index 36379f84..e274c987 100644 --- a/src/tools/uuid-generator/uuid-generator.vue +++ b/src/tools/uuid-generator/uuid-generator.vue @@ -32,8 +32,9 @@ import { useCopy } from '@/composable/copy'; import { ref, watch } from 'vue'; import { v4 as generateUUID } from 'uuid'; +import { useQueryParam } from '@/composable/queryParams'; -const count = ref(1); +const count = useQueryParam({ defaultValue: 1, name: 'count' }); const uuids = ref('');