feat(tool): uuid v4 generator

src/tools/index.ts

@@ -3,12 +3,13 @@ import type { ToolCategory } from './Tool';
 
 import { tool as tokenGenerator } from './token-generator';
 import { tool as hashText } from './hash-text';
+import { tool as uuidGenerator } from './uuid-generator';
 
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
     icon: LockOpen,
-    components: [tokenGenerator, hashText],
+    components: [tokenGenerator, hashText, uuidGenerator],
   },
 ];
 

src/tools/uuid-generator/index.ts

@@ -0,0 +1,12 @@
+import { Fingerprint } from '@vicons/tabler';
+import type { ITool } from '../Tool';
+
+export const tool: ITool = {
+  name: 'UUIDs v4 generator',
+  path: '/uuid-generator',
+  description:
+    'A universally unique identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot !).',
+  keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
+  component: () => import('./uuid-generator.vue'),
+  icon: Fingerprint,
+};

src/tools/uuid-generator/uuid-generator.vue

@@ -0,0 +1,52 @@
+<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 @click="copy" secondary autofocus>Copy</n-button>
+                <n-button @click="refreshUUIDs" secondary>Refresh</n-button>
+            </n-space>
+        </n-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { ref, watch } from 'vue'
+import { v4 as generateUUID } from 'uuid';
+
+const count = ref(1)
+
+const uuids = ref('')
+
+function refreshUUIDs() {
+    uuids.value = Array.from({ length: count.value }, () => generateUUID()).join('\n')
+}
+
+watch([count], refreshUUIDs)
+
+const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' })
+
+refreshUUIDs()
+</script>
+
+<style lang="scss" scoped>
+</style>