fix: update queryParams and downloadbase64

Author: sharevb

pnpm-lock.yaml

@@ -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>({
-    get() {
-      return transformer.fromQuery(proxy.value) as unknown as T;
-    },
-    set(value) {
+  watch(r,
+    (value) => {
       proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
     },
-  });
+    { deep: true });
 
-  watch(
-    ref,
-    (newValue) => {
-      storageRef.value = newValue;
-    },
-  );
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
 
-  return ref;
+  return r;
 }

src/composable/queryParams.ts

@@ -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>