feat(tool): uuid v4 generator

package-lock.json

@@ -17,6 +17,7 @@
         "naive-ui": "^2.27.0",
         "pinia": "^2.0.11",
         "randombytes": "^2.1.0",
+        "uuid": "^8.3.2",
         "vue": "^3.2.31",
         "vue-router": "^4.0.12"
       },
@@ -26,6 +27,7 @@
         "@types/jsdom": "^16.2.14",
         "@types/node": "^16.11.25",
         "@types/randombytes": "^2.0.0",
+        "@types/uuid": "^8.3.4",
         "@vitejs/plugin-vue": "^2.2.2",
         "@vitejs/plugin-vue-jsx": "^1.3.7",
         "@vue/eslint-config-typescript": "^10.0.0",
@@ -896,6 +898,12 @@
       "integrity": "sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
+      "dev": true
+    },
     "node_modules/@types/yauzl": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
@@ -6984,7 +6992,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -8410,6 +8417,12 @@
       "integrity": "sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==",
       "dev": true
     },
+    "@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
+      "dev": true
+    },
     "@types/yauzl": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
@@ -12828,8 +12841,7 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.3.0",

package.json

@@ -23,6 +23,7 @@
     "naive-ui": "^2.27.0",
     "pinia": "^2.0.11",
     "randombytes": "^2.1.0",
+    "uuid": "^8.3.2",
     "vue": "^3.2.31",
     "vue-router": "^4.0.12"
   },
@@ -32,6 +33,7 @@
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.25",
     "@types/randombytes": "^2.0.0",
+    "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^2.2.2",
     "@vitejs/plugin-vue-jsx": "^1.3.7",
     "@vue/eslint-config-typescript": "^10.0.0",

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>