refactor(uuid-generator): prevent NaN in quantity

1 files changed, 25 insertions, 29 deletions

diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index 52f2c4a..76df113 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -1,40 +1,36 @@
 <template>
-  <div>
-    <n-card>
-      <n-space align="center" justify="center">
-        Quantity :
-        <n-input-number v-model:value="count" :min="1" :max="50" />
-      </n-space>
-      <br />
-      <n-input
-        style="text-align: center; font-family: monospace"
-        :value="uuids"
-        type="textarea"
-        placeholder="Your uuids"
-        :autosize="{ minRows: 1 }"
-        readonly
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-      <br />
-      <br />
-      <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-        <n-button secondary @click="refreshUUIDs"> Refresh </n-button>
-      </n-space>
-    </n-card>
-  </div>
+  <n-space vertical :size="20">
+    <n-space align="center" justify="center">
+      Quantity :
+      <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
+    </n-space>
+
+    <n-input
+      style="text-align: center; font-family: monospace"
+      :value="uuids"
+      type="textarea"
+      placeholder="Your uuids"
+      :autosize="{ minRows: 1 }"
+      readonly
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+
+    <n-space justify="center">
+      <n-button secondary autofocus @click="copy"> Copy </n-button>
+      <n-button secondary @click="refreshUUIDs"> Refresh </n-button>
+    </n-space>
+  </n-space>
 </template>
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { v4 as generateUUID } from 'uuid';
-import { useQueryParam } from '@/composable/queryParams';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 
-const count = useQueryParam({ defaultValue: 1, name: 'count' });
+const count = useStorage('uuid-generator:quantity', 1);
 
 const [uuids, refreshUUIDs] = computedRefreshable(() =>
   Array.from({ length: count.value }, () => generateUUID()).join('\n'),