fix: update queryParams and downloadbase64

pnpm-lock.yaml

@@ -142,7 +142,7 @@ dependencies:
     version: 0.3.8
   pp-qr-code:
     specifier: ^0.6.3
-    version: 0.6.3
+    version: 0.6.4
   qrcode:
     specifier: ^1.5.1
     version: 1.5.1
@@ -3360,7 +3360,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.9.0(vue@3.3.4)
+      '@vueuse/shared': 10.11.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,20 +3993,19 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
+  /@vueuse/shared@10.11.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.8(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@10.9.0(vue@3.3.4):
+  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.7(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
-      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -7477,8 +7476,8 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /pp-qr-code@0.6.3:
+  /pp-qr-code@0.6.4:
-    resolution: {integrity: sha512-QhIlfia7KAHGGO3umM+leYyPP/Ad1Urw4xUhbIIy9XE4iVHI70+KKxMqL5BBHC8fJblh4Vh9SVrhayb0vHf1tQ==}
+    resolution: {integrity: sha512-6OhfzsFgZClbBh3XzfwysSwH4injljeMreKaZyxWydthkhXAdjSbFfEtrvfHt1SN65PmAHEOux+dOVvJRiOaDw==}
     dependencies:
       qrcode-generator: 1.4.4
     dev: false
@@ -9180,10 +9179,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.7(vue@3.3.4):
+  /vue-demi@0.14.8(vue@3.3.4):
-    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
-  /vue-demi@0.14.7(vue@3.3.4):
-    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true

src/composable/queryParams.ts

@@ -17,6 +17,12 @@ const transformers = {
     fromQuery: (value: string) => value.toLowerCase() === 'true',
     toQuery: (value: boolean) => (value ? 'true' : 'false'),
   },
+  object: {
+    fromQuery: (value: string) => {
+      return JSON.parse(value);
+    },
+    toQuery: (value: object) => JSON.stringify(value),
+  },
 };
 
 function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -35,30 +41,26 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
   });
 }
 
-function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue?: T }) {
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
   const type = typeof defaultValue;
   const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
 
   const storageRef = useStorage(storageName, defaultValue);
-  const storageDefaultValue = storageRef.value ?? defaultValue;
+  const proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
 
-  const proxy = useRouteQuery(name, transformer.toQuery(storageDefaultValue as never));
+  const r = ref(defaultValue);
 
-  const ref = computed<T>({
+  watch(r,
-    get() {
+    (value) => {
-      return transformer.fromQuery(proxy.value) as unknown as T;
-    },
-    set(value) {
       proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
     },
-  });
+    { deep: true });
 
-  watch(
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
-    ref,
+    ? transformer.fromQuery(proxy.value) as unknown as T
-    (newValue) => {
+    : storageRef.value as T) as never;
-      storageRef.value = newValue;
-    },
-  );
 
-  return ref;
+  return r;
 }

src/tools/qr-code-generator/qr-code-generator.vue

@@ -8,7 +8,7 @@ import type {
 } from 'pp-qr-code';
 import qrcodeConsole from 'qrcode-terminal-nooctal';
 import { useQRCodeStyling } from './useQRCode';
-import { useDownloadFileFromBase64Refs } from '@/composable/downloadBase64';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
 
 const foreground = useQueryParamOrStorage({ name: 'fg', storageName: 'qr-code-gen:fg', defaultValue: '#000000ff' });
@@ -83,7 +83,7 @@ const qrcodeTerminal = computedAsync(() => {
 
 const filename = ref('qr-code');
 const extension = computed(() => outputType.value.toString());
-const { download } = useDownloadFileFromBase64Refs({ source: qrcode, filename, extension });
+const { download } = useDownloadFileFromBase64({ source: qrcode, filename, extension });
 </script>
 
 <template>