feat(i18n): uuid and ulid generator

src/tools/ulid-generator/index.ts

@@ -1,10 +1,11 @@
 import { SortDescendingNumbers } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'ULID generator',
+  name: translate('tools.ulid-generator.title'),
   path: '/ulid-generator',
-  description: 'Generate random Universally Unique Lexicographically Sortable Identifier (ULID).',
+  description: translate('tools.ulid-generator.description'),
   keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
   component: () => import('./ulid-generator.vue'),
   icon: SortDescendingNumbers,

src/tools/ulid-generator/locales/en.yml

@@ -0,0 +1,11 @@
+tools:
+  ulid-generator:
+    title: 'ULID generator'
+    description: 'Generate random Universally Unique Lexicographically Sortable Identifier (ULID).'
+
+    copied: 'ULIDs copied to the clipboard'
+    quantity: 'Quantity'
+    formatLabel: 'Format'
+    button:
+      copy: Copy
+      refresh: Refresh

src/tools/ulid-generator/ulid-generator.vue

@@ -7,7 +7,7 @@ import { useCopy } from '@/composable/copy';
 const amount = useStorage('ulid-generator-amount', 1);
 const formats = [{ label: 'Raw', value: 'raw' }, { label: 'JSON', value: 'json' }] as const;
 const format = useStorage<typeof formats[number]['value']>('ulid-generator-format', formats[0].value);
-
+const { t } = useI18n();
 const [ulids, refreshUlids] = computedRefreshable(() => {
   const ids = _.times(amount.value, () => ulid());
 
@@ -18,17 +18,17 @@ const [ulids, refreshUlids] = computedRefreshable(() => {
   return ids.join('\n');
 });
 
-const { copy } = useCopy({ source: ulids, text: 'ULIDs copied to the clipboard' });
+const { copy } = useCopy({ source: ulids, text: t('tools.ulid-generator.copied') });
 </script>
 
 <template>
   <div flex flex-col justify-center gap-2>
     <div flex items-center>
-      <label w-75px> Quantity:</label>
+      <label w-75px>{{ t('tools.ulid-generator.quantity') }}:</label>
       <n-input-number v-model:value="amount" min="1" max="100" flex-1 />
     </div>
 
-    <c-buttons-select v-model:value="format" :options="formats" label="Format: " label-width="75px" />
+    <c-buttons-select v-model:value="format" :options="formats" :label="`${t('tools.ulid-generator.formatLabel')}:`" label-width="75px" />
 
     <c-card mt-5 flex data-test-id="ulids">
       <pre m-0 m-x-auto>{{ ulids }}</pre>
@@ -36,10 +36,10 @@ const { copy } = useCopy({ source: ulids, text: 'ULIDs copied to the clipboard'
 
     <div flex justify-center gap-2>
       <c-button data-test-id="refresh" @click="refreshUlids()">
-        Refresh
+        {{ t('tools.ulid-generator.button.refresh') }}
       </c-button>
       <c-button @click="copy()">
-        Copy
+        {{ t('tools.ulid-generator.button.copy') }}
       </c-button>
     </div>
   </div>

src/tools/uuid-generator/index.ts

@@ -1,11 +1,11 @@
 import { Fingerprint } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'UUIDs v4 generator',
+  name: translate('tools.uuid-generator.title'),
   path: '/uuid-generator',
-  description:
+  description: translate('tools.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/locales/en.yml

@@ -0,0 +1,14 @@
+tools:
+  uuid-generator:
+    title: 'UUIDs v4 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!).'
+
+    copied: 'UUIDs copied to the clipboard'
+    quantity: 'Quantity'
+    button:
+      copy: Copy
+      refresh: Refresh
+
+
+
+

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

@@ -3,19 +3,20 @@ import { v4 as generateUUID } from 'uuid';
 import { useCopy } from '@/composable/copy';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 
+const { t } = useI18n();
 const count = useStorage('uuid-generator:quantity', 1);
 
 const [uuids, refreshUUIDs] = computedRefreshable(() =>
   Array.from({ length: count.value }, () => generateUUID()).join('\n'),
 );
 
-const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' });
+const { copy } = useCopy({ source: uuids, text: t('tools.uuid-generator.copied') });
 </script>
 
 <template>
   <div>
     <div flex items-center justify-center gap-3>
-      Quantity :
+      {{ t('tools.uuid-generator.quantity') }}:
       <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
     </div>
 
@@ -35,10 +36,10 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
 
     <div flex justify-center gap-3>
       <c-button autofocus @click="copy()">
-        Copy
+        {{ t('tools.uuid-generator.button.copy') }}
       </c-button>
       <c-button @click="refreshUUIDs">
-        Refresh
+        {{ t('tools.uuid-generator.button.refresh') }}
       </c-button>
     </div>
   </div>