fix: change crypto.randomUUID() with a sequential id generation

packages/oruga/src/components/autocomplete/Autocomplete.vue

@@ -32,6 +32,7 @@ import {
     useInputHandler,
     useEventListener,
     isOptionValid,
+    useSequentialId,
 } from "@/composables";
 
 import { injectField } from "../field/fieldInjection";
@@ -207,10 +208,13 @@ const inputValue = defineModel<string>("input", { default: "" });
 /** create a unique id for the menu */
 const menuId = useId();
 
+// create a unique id sequence
+const { nextSequence } = useSequentialId();
+
 /** normalized programamtic options */
 const groupedOptions = computed<OptionsGroupItem<T>[]>(() => {
-    const normalizedOptions = normalizeOptions<T>(props.options);
-    const groupedOptions = toOptionsGroup(normalizedOptions);
+    const normalizedOptions = normalizeOptions<T>(props.options, nextSequence);
+    const groupedOptions = toOptionsGroup(normalizedOptions, nextSequence());
     return groupedOptions;
 });
 

packages/oruga/src/components/dropdown/Dropdown.vue

@@ -25,6 +25,7 @@ import {
     useEventListener,
     useClickOutside,
     usePreventScrolling,
+    useSequentialId,
 } from "@/composables";
 
 import type { DropdownComponent } from "./types";
@@ -112,10 +113,13 @@ const vmodel = defineModel<ModelValue>({ default: undefined });
 /** The active state of the dropdown, use v-model:active to make it two-way binding */
 const isActive = defineModel<boolean>("active", { default: false });
 
+// create a unique id sequence
+const { nextSequence } = useSequentialId();
+
 /** normalized programamtic options */
 const groupedOptions = computed(() => {
-    const normalizedOptions = normalizeOptions<T>(props.options);
-    const groupedOptions = toOptionsGroup(normalizedOptions);
+    const normalizedOptions = normalizeOptions<T>(props.options, nextSequence);
+    const groupedOptions = toOptionsGroup(normalizedOptions, nextSequence());
     return groupedOptions;
 });
 

packages/oruga/src/components/select/Select.vue

@@ -17,6 +17,7 @@ import {
     isGroupOption,
     normalizeOptions,
     useInputHandler,
+    useSequentialId,
 } from "@/composables";
 
 import { injectField } from "../field/fieldInjection";
@@ -134,8 +135,13 @@ watch(
     { immediate: true, flush: "post" },
 );
 
+// create a unique id sequence
+const { nextSequence } = useSequentialId();
+
 /** normalized programamtic options */
-const normalizedptions = computed(() => normalizeOptions<T>(props.options));
+const normalizedptions = computed(() =>
+    normalizeOptions<T>(props.options, nextSequence),
+);
 
 const placeholderVisible = computed(
     () =>

packages/oruga/src/components/steps/Steps.vue

@@ -20,6 +20,7 @@ import {
     normalizeOptions,
     useProviderParent,
     useMatchMedia,
+    useSequentialId,
 } from "@/composables";
 
 import type { StepItem, StepItemComponent, StepsComponent } from "./types";
@@ -114,8 +115,13 @@ const items = computed<StepItem<T>[]>(() =>
     })),
 );
 
+// create a unique id sequence
+const { nextSequence } = useSequentialId();
+
 /** normalized programamtic options */
-const groupedOptions = computed(() => normalizeOptions<T>(props.options));
+const groupedOptions = computed(() =>
+    normalizeOptions<T>(props.options, nextSequence),
+);
 
 /** When v-model is changed set the new active step. */
 watch(

packages/oruga/src/components/switch/tests/switch.axe.test.ts

@@ -4,7 +4,7 @@ import { axe } from "jest-axe";
 
 import OSwitch from "../Switch.vue";
 
-describe("Checkbox axe tests", () => {
+describe("Switch axe tests", () => {
     enableAutoUnmount(afterEach);
 
     const a11yCases = [

packages/oruga/src/components/table/Table.vue

@@ -39,6 +39,7 @@ import {
     useMatchMedia,
     useDebounce,
     useObjectMap,
+    useSequentialId,
 } from "@/composables";
 
 import type { ClassBind } from "@/types";
@@ -368,9 +369,12 @@ const tableColumns = computed<TableColumnItem<T>[]>(() => {
     }));
 });
 
+// create a unique id sequence
+const { nextSequence } = useSequentialId();
+
 /** all defined data elements as an object map */
 const tableData = computed<TableRow<T>[]>(() =>
-    useObjectMap(props.data, props.rowKey),
+    useObjectMap(props.data, props.rowKey, nextSequence),
 );
 
 const tableRows = ref(tableData.value) as Ref<TableRow<T>[]>;

packages/oruga/src/components/tabs/Tabs.vue

@@ -20,6 +20,7 @@ import {
     defineClasses,
     normalizeOptions,
     useProviderParent,
+    useSequentialId,
 } from "@/composables";
 
 import type { TabsComponent, TabItem, TabItemComponent } from "./types";
@@ -105,8 +106,13 @@ const items = computed<TabItem<T>[]>(() =>
     })),
 );
 
+// create a unique id sequence
+const { nextSequence } = useSequentialId();
+
 /** normalized programamtic options */
-const groupedOptions = computed(() => normalizeOptions<T>(props.options));
+const groupedOptions = computed(() =>
+    normalizeOptions<T>(props.options, nextSequence),
+);
 
 /**  When v-model is changed set the new active tab. */
 watch(

packages/oruga/src/components/taginput/Taginput.vue

@@ -19,6 +19,7 @@ import {
     normalizeOptions,
     findOption,
     useInputHandler,
+    useSequentialId,
 } from "@/composables";
 
 import type { TaginputProps } from "./props";
@@ -154,8 +155,13 @@ const itemsLength = computed(() => selectedItems.value?.length || 0);
 
 const isComposing = ref(false);
 
+// create a unique id sequence
+const { nextSequence } = useSequentialId();
+
 /** normalized programamtic options */
-const normalizedOptions = computed(() => normalizeOptions<T>(props.options));
+const normalizedOptions = computed(() =>
+    normalizeOptions<T>(props.options, nextSequence),
+);
 
 /** map the selected items into option items */
 const selectedOptions = computed(() => {

packages/oruga/src/composables/index.ts

@@ -10,3 +10,4 @@ export * from "./useScrollingParent";
 export * from "./useObjectMap";
 export * from "./useOptions";
 export * from "./usePreventScrolling";
+export * from "./useSequentialId";

packages/oruga/src/composables/tests/useOptions.test.ts

@@ -1,4 +1,4 @@
-import { describe, test, beforeEach, afterEach, vi, expect } from "vitest";
+import { describe, test, beforeEach, expect } from "vitest";
 import {
     checkOptionsEmpty,
     filterOptionsItems,
@@ -11,36 +11,36 @@ import {
     toOptionsList,
     type OptionsGroupItem,
 } from "../useOptions";
+import { useSequentialId } from "../useSequentialId";
 
 describe("useOptions tests", () => {
-    const UUID = "123";
+    let isSecuencer: ReturnType<typeof useSequentialId>;
 
     beforeEach(() => {
-        vi.stubGlobal("crypto", { randomUUID: vi.fn(() => UUID) });
-    });
-
-    afterEach(() => {
-        vi.clearAllMocks();
+        isSecuencer = useSequentialId();
     });
 
     describe("test normalizeOptions", () => {
         test("test empty list", () => {
-            const normOptions = normalizeOptions([]);
+            const normOptions = normalizeOptions([], isSecuencer.nextSequence);
             expect(normOptions).toEqual([]);
         });
 
         test("test options object", () => {
             const options = { foo: "bar", a: "b" };
-            const normOptions = normalizeOptions(options);
+            const normOptions = normalizeOptions(
+                options,
+                isSecuencer.nextSequence,
+            );
 
             expect(normOptions).toEqual([
                 {
-                    key: UUID,
+                    key: "0",
                     label: "bar",
                     value: "foo",
                 },
                 {
-                    key: UUID,
+                    key: "1",
                     label: "b",
                     value: "a",
                 },
@@ -49,18 +49,21 @@ describe("useOptions tests", () => {
 
         test("test options array of strings", () => {
             const options = ["foo", "bar"];
-            const normOptions = normalizeOptions(options);
+            const normOptions = normalizeOptions(
+                options,
+                isSecuencer.nextSequence,
+            );
 
             expect(normOptions).toEqual([
                 {
+                    key: "0",
                     label: "foo",
                     value: "foo",
-                    key: UUID,
                 },
                 {
+                    key: "1",
                     label: "bar",
                     value: "bar",
-                    key: UUID,
                 },
             ]);
         });
@@ -70,21 +73,25 @@ describe("useOptions tests", () => {
                 { label: "foo", value: "bar" },
                 { label: "a", value: "b" },
             ];
-            const normOptions = normalizeOptions(options);
+            const normOptions = normalizeOptions(
+                options,
+                isSecuencer.nextSequence,
+            );
 
             expect(normOptions).toEqual([
                 {
+                    key: "0",
                     label: "foo",
                     value: "bar",
-                    key: UUID,
                 },
                 {
+                    key: "1",
                     label: "a",
                     value: "b",
-                    key: UUID,
                 },
             ]);
         });
+
         test("test can recursively handle options with nested groups", () => {
             const options = [
                 {
@@ -102,23 +109,26 @@ describe("useOptions tests", () => {
                 },
             ];
 
-            const normOptions = normalizeOptions(options);
+            const normOptions = normalizeOptions(
+                options,
+                isSecuencer.nextSequence,
+            );
 
             expect(normOptions).toEqual([
                 {
+                    key: "4",
                     group: "foo",
-                    key: "123",
                     options: [
-                        { key: "123", label: "#ff985d", value: "#ff985d" },
-                        { key: "123", label: "#f7ce68", value: "#f7ce68" },
-                        { key: "123", label: "#FFFFFF", value: "#FFFFFF" },
-                        { key: "123", label: "#2b2b35", value: "#2b2b35" },
+                        { key: "0", label: "#ff985d", value: "#ff985d" },
+                        { key: "1", label: "#f7ce68", value: "#f7ce68" },
+                        { key: "2", label: "#FFFFFF", value: "#FFFFFF" },
+                        { key: "3", label: "#2b2b35", value: "#2b2b35" },
                     ],
                 },
                 {
+                    key: "6",
                     group: "Other",
-                    key: "123",
-                    options: [{ key: "123", label: "Red", value: "#ff0000" }],
+                    options: [{ key: "5", label: "Red", value: "#ff0000" }],
                 },
             ]);
         });
@@ -141,22 +151,25 @@ describe("useOptions tests", () => {
                 },
             ];
 
-            const normOptions = normalizeOptions(options);
+            const normOptions = normalizeOptions(
+                options,
+                isSecuencer.nextSequence,
+            );
             expect(normOptions).toEqual([
                 {
+                    key: "2",
                     group: "Foo",
-                    key: "123",
                     options: [
-                        { key: "123", label: "A", value: 0 },
-                        { key: "123", label: "B", value: 1 },
+                        { key: "0", label: "A", value: 0 },
+                        { key: "1", label: "B", value: 1 },
                     ],
                 },
                 {
+                    key: "5",
                     group: "Bar",
-                    key: "123",
                     options: [
-                        { key: "123", label: "D", value: 3 },
-                        { key: "123", label: "E", value: 4 },
+                        { key: "3", label: "D", value: 3 },
+                        { key: "4", label: "E", value: 4 },
                     ],
                 },
             ]);
@@ -179,28 +192,28 @@ describe("useOptions tests", () => {
 
     describe("test toOptionsGroup", () => {
         test("test empty list", () => {
-            const groupOptions = toOptionsGroup([]);
-            expect(groupOptions).toEqual([{ key: UUID, options: [] }]);
+            const groupOptions = toOptionsGroup([], "0");
+            expect(groupOptions).toEqual([{ key: "0", options: [] }]);
         });
 
         test("test is normal options", () => {
             const options = [
                 {
+                    key: "0",
                     label: "foo",
                     value: "bar",
-                    key: UUID,
                 },
                 {
+                    key: "1",
                     label: "a",
                     value: "b",
-                    key: UUID,
                 },
             ];
 
-            const groupOptions = toOptionsGroup(options);
+            const groupOptions = toOptionsGroup(options, "3");
             expect(groupOptions).toEqual([
                 {
-                    key: UUID,
+                    key: "3",
                     options,
                 },
             ]);
@@ -240,7 +253,7 @@ describe("useOptions tests", () => {
                 },
             ];
 
-            const groupOptions = toOptionsGroup(options);
+            const groupOptions = toOptionsGroup(options, "22");
             expect(groupOptions).toEqual(options);
         });
     });