feat(Slugify): add separator option

Fix CorentinTh#267

Author: sharevb

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -16,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 }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+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 proxyDefaultValue = transformer.toQuery(defaultValue as never);
+  const proxy = useRouteQuery(name, proxyDefaultValue);
+
+  const r = ref(defaultValue);
+
+  watch(r,
+    (value) => {
+      proxy.value = transformer.toQuery(value as never);
+      storageRef.value = value as never;
+    },
+    { deep: true });
+
+  r.value = (proxy.value && proxy.value !== proxyDefaultValue
+    ? transformer.fromQuery(proxy.value) as unknown as T
+    : storageRef.value as T) as never;
+
+  return r;
+}

src/tools/slugify-string/slugify-string.vue

@@ -2,17 +2,35 @@
 import slugify from '@sindresorhus/slugify';
 import { withDefaultOnError } from '@/utils/defaults';
 import { useCopy } from '@/composable/copy';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
 
 const input = ref('');
-const slug = computed(() => withDefaultOnError(() => slugify(input.value), ''));
+const separator = useQueryParamOrStorage({ name: 'sep', storageName: 'slugify:sep', defaultValue: '-' });
+const slug = computed(() => withDefaultOnError(() => slugify(input.value, {
+  separator: separator.value,
+}), ''));
 const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
 </script>
 
 <template>
   <div>
-    <c-input-text v-model:value="input" multiline placeholder="Put your string here (ex: My file path)" label="Your string to slugify" autofocus raw-text mb-5 />
+    <c-input-text
+      v-model:value="input" multiline
+      placeholder="Put your string here (ex: My file path)"
+      label="Your string to slugify" autofocus raw-text mb-2
+    />
 
-    <c-input-text :value="slug" multiline readonly placeholder="You slug will be generated here (ex: my-file-path)" label="Your slug" mb-5 />
+    <c-input-text
+      v-model:value="separator"
+      placeholder="Put separator char here"
+      label="Separator character" raw-text mb-5
+    />
+
+    <c-input-text
+      :value="slug" multiline readonly
+      placeholder="You slug will be generated here (ex: my-file-path)"
+      label="Your slug" mb-5
+    />
 
     <div flex justify-center>
       <c-button :disabled="slug.length === 0" @click="copy()">