Merge branch 'feat/slug-sep' into chore/all-my-stuffs

Author: sharevb

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()">