aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/tools/uuid-generator/index.ts4
-rw-r--r--src/tools/uuid-generator/uuid-generator.vue86
-rw-r--r--src/ui/c-buttons-select/c-buttons-select.demo.vue9
-rw-r--r--src/ui/c-buttons-select/c-buttons-select.vue21
4 files changed, 102 insertions, 18 deletions
diff --git a/src/tools/uuid-generator/index.ts b/src/tools/uuid-generator/index.ts
index ae5ae0d..9289b90 100644
--- a/src/tools/uuid-generator/index.ts
+++ b/src/tools/uuid-generator/index.ts
@@ -2,11 +2,11 @@ import { Fingerprint } from '@vicons/tabler';
import { defineTool } from '../tool';
export const tool = defineTool({
- name: 'UUIDs v4 generator',
+ name: 'UUIDs 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'],
+ keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique', 'v1', 'v3', 'v5', 'nil'],
component: () => import('./uuid-generator.vue'),
icon: Fingerprint,
});
diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index e9f55e6..22b32ba 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -1,22 +1,94 @@
<script setup lang="ts">
-import { v4 as generateUUID } from 'uuid';
+import { v1 as generateUuidV1, v3 as generateUuidV3, v4 as generateUuidV4, v5 as generateUuidV5, NIL as nilUuid } from 'uuid';
import { useCopy } from '@/composable/copy';
import { computedRefreshable } from '@/composable/computedRefreshable';
+import { withDefaultOnError } from '@/utils/defaults';
+const versions = ['NIL', 'v1', 'v3', 'v4', 'v5'] as const;
+
+const version = useStorage<typeof versions[number]>('uuid-generator:version', 'v4');
const count = useStorage('uuid-generator:quantity', 1);
+const v35Args = ref({ namespace: '6ba7b811-9dad-11d1-80b4-00c04fd430c8', name: '' });
+
+const validUuidRules = [
+ {
+ message: 'Invalid UUID',
+ validator: (value: string) => {
+ if (value === nilUuid) {
+ return true;
+ }
+
+ return Boolean(value.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/));
+ },
+ },
+];
+
+const generators = {
+ NIL: () => nilUuid,
+ v1: (index: number) => generateUuidV1({
+ clockseq: index,
+ msecs: Date.now(),
+ nsecs: Math.floor(Math.random() * 10000),
+ node: Array.from({ length: 6 }, () => Math.floor(Math.random() * 256)),
+ }),
+ v3: () => generateUuidV3(v35Args.value.name, v35Args.value.namespace),
+ v4: () => generateUuidV4(),
+ v5: () => generateUuidV5(v35Args.value.name, v35Args.value.namespace),
+};
-const [uuids, refreshUUIDs] = computedRefreshable(() =>
- Array.from({ length: count.value }, () => generateUUID()).join('\n'),
-);
+const [uuids, refreshUUIDs] = computedRefreshable(() => withDefaultOnError(() =>
+ Array.from({ length: count.value }, (_ignored, index) => {
+ const generator = generators[version.value] ?? generators.NIL;
+ return generator(index);
+ }).join('\n'), ''));
const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' });
</script>
<template>
<div>
- <div flex items-center justify-center gap-3>
- Quantity :
- <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
+ <c-buttons-select v-model:value="version" :options="versions" label="UUID version" label-width="100px" mb-2 />
+
+ <div mb-2 flex items-center>
+ <span w-100px>Quantity </span>
+ <n-input-number v-model:value="count" flex-1 :min="1" :max="50" placeholder="UUID quantity" />
+ </div>
+
+ <div v-if="version === 'v3' || version === 'v5'">
+ <div>
+ <c-buttons-select
+ v-model:value="v35Args.namespace"
+ :options="{
+ DNS: '6ba7b810-9dad-11d1-80b4-00c04fd430c8',
+ URL: '6ba7b811-9dad-11d1-80b4-00c04fd430c8',
+ OID: '6ba7b812-9dad-11d1-80b4-00c04fd430c8',
+ X500: '6ba7b814-9dad-11d1-80b4-00c04fd430c8',
+ }"
+ label="Namespace"
+ label-width="100px"
+ mb-2
+ />
+ </div>
+ <div flex-1>
+ <c-input-text
+ v-model:value="v35Args.namespace"
+ placeholder="Namespace"
+ label-width="100px"
+ label-position="left"
+ label=" "
+ :validation-rules="validUuidRules"
+ mb-2
+ />
+ </div>
+
+ <c-input-text
+ v-model:value="v35Args.name"
+ placeholder="Name"
+ label="Name"
+ label-width="100px"
+ label-position="left"
+ mb-2
+ />
</div>
<c-input-text
diff --git a/src/ui/c-buttons-select/c-buttons-select.demo.vue b/src/ui/c-buttons-select/c-buttons-select.demo.vue
index dea1528..4628601 100644
--- a/src/ui/c-buttons-select/c-buttons-select.demo.vue
+++ b/src/ui/c-buttons-select/c-buttons-select.demo.vue
@@ -4,11 +4,18 @@ const optionsA = [
{ label: 'Option B', value: 'b', tooltip: 'This is a tooltip' },
{ label: 'Option C', value: 'c' },
];
+
+const optionB = {
+ 'Option A': 'a',
+ 'Option B': 'b',
+ 'Option C': 'c',
+};
+
const valueA = ref('a');
</script>
<template>
<c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " />
<c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " label-position="left" mt-2 />
- <c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " label-position="left" mt-2 />
+ <c-buttons-select v-model:value="valueA" :options="optionB" label="Options object: " />
</template>
diff --git a/src/ui/c-buttons-select/c-buttons-select.vue b/src/ui/c-buttons-select/c-buttons-select.vue
index 38fff66..a1ffa42 100644
--- a/src/ui/c-buttons-select/c-buttons-select.vue
+++ b/src/ui/c-buttons-select/c-buttons-select.vue
@@ -1,10 +1,11 @@
<script setup lang="ts" generic="T extends unknown">
+import _ from 'lodash';
import type { CLabelProps } from '../c-label/c-label.types';
import type { CButtonSelectOption } from './c-buttons-select.types';
const props = withDefaults(
defineProps<{
- options?: CButtonSelectOption<T>[] | string[]
+ options?: CButtonSelectOption<T>[] | string[] | Record<string, T>
value?: T
size?: 'small' | 'medium' | 'large'
} & CLabelProps >(),
@@ -20,14 +21,18 @@ const emits = defineEmits(['update:value']);
const { options: rawOptions, size } = toRefs(props);
-const options = computed(() => {
- return rawOptions.value.map((option: string | CButtonSelectOption<T>) => {
- if (typeof option === 'string') {
- return { label: option, value: option };
- }
+const options = computed<CButtonSelectOption<T>[]>(() => {
+ if (_.isArray(rawOptions.value)) {
+ return rawOptions.value.map((option: string | CButtonSelectOption<T>) => {
+ if (typeof option === 'string') {
+ return { label: option, value: option };
+ }
- return option;
- });
+ return option;
+ }) as CButtonSelectOption<T>[];
+ }
+
+ return _.map(rawOptions.value, (value, label) => ({ label, value })) as CButtonSelectOption<T>[];
});
const value = useVModel(props, 'value', emits);
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-31 05:50:20 +0000