fix(vue): generate predictable ids

xamu-co · Jun 5, 2024 · b24f95c · b24f95c
1 parent d9d57b3
commit b24f95c
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 65 deletions.
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -78,7 +78,6 @@
     "@types/node": "^18.17.17",
     "@types/validator": "^13.11.1",
     "@vitejs/plugin-vue": "^4.2.1",
-    "nanoid": "^4.0.2",
     "storybook": "^8.1.1",
     "ts-md5": "^1.3.1",
     "validator": "^13.11.0",
@@ -98,4 +97,4 @@
     "node": ">=18",
     "yarn": ">=1.22.4"
   }
-}
+}
diff --git a/packages/components-vue/src/components/base/Input.vue b/packages/components-vue/src/components/base/Input.vue
@@ -22,9 +22,9 @@
 <script setup lang="ts">
 	import { computed } from "vue";
 	import deburr from "lodash-es/deburr";
+	import { Md5 } from "ts-md5";
 
 	import type { iInputProps } from "../../types/props";
-	import useUUID from "../../composables/crypto";
 
 	interface iBaseInputProps extends iInputProps {
 		/**
@@ -47,14 +47,11 @@
 	const props = defineProps<iBaseInputProps>();
 	const emit = defineEmits(["update:model-value"]);
 
-	const { uuid } = useUUID();
-
-	const randomId = uuid().replace("-", "").substring(0, 8);
 	/** Prefer a predictable identifier */
 	const inputId = computed(() => {
-		const seed = deburr(props.id || props.name || props.placeholder || props.title);
+		const seed = deburr(props.placeholder || props.title);
 
-		return `input_${seed.replaceAll(" ", "") || randomId}`;
+		return props.name || props.id || Md5.hashStr(`input-${seed}`);
 	});
 	const useChecked = computed(() => {
 		return props.type === "checkbox" || props.type === "radio";

diff --git a/packages/components-vue/src/components/base/Select.vue b/packages/components-vue/src/components/base/Select.vue
@@ -26,13 +26,13 @@
 	import { computed, watch } from "vue";
 	import deburr from "lodash-es/deburr";
 	import omit from "lodash-es/omit";
+	import { Md5 } from "ts-md5";
 
 	import type { iFormOption } from "@open-xamu-co/ui-common-types";
 	import { useI18n } from "@open-xamu-co/ui-common-helpers";
 	import { toOption } from "@open-xamu-co/ui-common-helpers";
 
 	import type { iSelectProps } from "../../types/props";
-	import useUUID from "../../composables/crypto";
 	import { useHelpers } from "../../composables/utils";
 
 	interface iBaseSelectProps extends iSelectProps {
@@ -57,17 +57,15 @@
 	const emit = defineEmits(["update:model-value"]);
 
 	const { t } = useHelpers(useI18n);
-	const { uuid } = useUUID();
 
-	const randomId = uuid().replace("-", "").substring(0, 8);
 	const selectOptions = computed<iFormOption[]>(() => {
 		return (props.options ?? []).map(toOption);
 	});
 	/** Prefer a predictable identifier */
 	const selectId = computed(() => {
-		const seed = deburr(props.id || props.name || props.placeholder || props.title);
+		const seed = deburr(props.placeholder || props.title);
 
-		return `select_${seed.replaceAll(" ", "") || randomId}`;
+		return props.name || props.id || Md5.hashStr(`select-${seed}`);
 	});
 
 	function handleInput(e: Event) {

diff --git a/packages/components-vue/src/components/form/Input.vue b/packages/components-vue/src/components/form/Input.vue
@@ -4,9 +4,9 @@
 			<FormInputOptions
 				v-if="!input.defaults && input.type === eFT.CHOICE"
 				v-slot="{ options }"
-				:key="`options-${input.name}-${Md5.hashStr(String(input.values[0]))}-${
-					input.options.length
-				}`"
+				:key="
+					Md5.hashStr(`options-${input.name}-${input.values[0]}-${input.options.length}`)
+				"
 				:input="input"
 			>
 				<div

diff --git a/packages/components-vue/src/components/modal/Simple.vue b/packages/components-vue/src/components/modal/Simple.vue
@@ -121,7 +121,7 @@
 		Teleport,
 		getCurrentInstance,
 	} from "vue";
-	import deburr from "lodash-es/deburr";
+	import { Md5 } from "ts-md5";
 
 	import { useI18n, useSwal } from "@open-xamu-co/ui-common-helpers";
 	import { eColors } from "@open-xamu-co/ui-common-enums";
@@ -136,7 +136,6 @@
 
 	import type { iModalButtonConfig, iModalProps } from "../../types/props";
 	import useTheme from "../../composables/theme";
-	import useUUID from "../../composables/crypto";
 	import { useHelpers } from "../../composables/utils";
 
 	/**
@@ -158,19 +157,15 @@
 	const Swal = useHelpers(useSwal);
 	const { themeClasses, invertedThemeValues } = useTheme(props, true);
 	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
-	const { uuid } = useUUID();
 
 	const resolver = ref<(r?: boolean) => void>();
-	const randomId = uuid().replace("-", "").substring(0, 8);
 	const localModel = ref<boolean>();
 	const modalRef = ref<HTMLDialogElement>();
 	/** Are the requirements for the modal are taking longer than usual? */
 	const loadingTooLong = ref(false);
 	/** Prefer a predictable identifier */
 	const modalId = computed(() => {
-		const seed = deburr(props.subtitle || props.title);
-
-		return `modal_${seed.replaceAll(" ", "") || randomId}`;
+		return Md5.hashStr(`modal_${props.subtitle}-${props.title}`);
 	});
 	const saveButtonOptions = computed<iModalButtonConfig & { disabled?: boolean }>(() => ({
 		title: t("ok"),

diff --git a/packages/components-vue/src/components/select/Filter.vue b/packages/components-vue/src/components/select/Filter.vue
@@ -60,6 +60,7 @@
 	import { computed, ref } from "vue";
 	import deburr from "lodash-es/deburr";
 	import omit from "lodash-es/omit";
+	import { Md5 } from "ts-md5";
 
 	import type { iFormIconProps, iFormOption } from "@open-xamu-co/ui-common-types";
 	import { toOption, useI18n, useUtils } from "@open-xamu-co/ui-common-helpers";
@@ -75,7 +76,6 @@
 		iUseThemeProps,
 		iSelectProps,
 	} from "../../types/props";
-	import useUUID from "../../composables/crypto";
 	import { useHelpers } from "../../composables/utils";
 
 	interface iSelectFilterProps
@@ -105,15 +105,13 @@
 
 	const { t } = useHelpers(useI18n);
 	const { isBrowser } = useHelpers(useUtils);
-	const { uuid } = useUUID();
 
-	const randomId = uuid().replace("-", "").substring(0, 8);
 	const supportsDatalist = ref(true);
 	/** Prefer a predictable identifier */
 	const selectFilterName = computed(() => {
-		const seed = deburr(props.id || props.name || props.placeholder || props.title);
+		const seed = deburr(props.placeholder || props.title);
 
-		return `select-filter_${seed.replaceAll(" ", "") || randomId}`;
+		return props.name || props.id || Md5.hashStr(`select-filter-${seed}`);
 	});
 	const selectOptions = computed<iFormOption[]>(() => (props.options ?? []).map(toOption));
 	/**

diff --git a/packages/components-vue/src/components/table/Simple.vue b/packages/components-vue/src/components/table/Simple.vue
@@ -346,7 +346,7 @@
 	import upperFirst from "lodash-es/upperFirst";
 	import snakeCase from "lodash-es/snakeCase";
 	import startCase from "lodash-es/startCase";
-	import deburr from "lodash-es/deburr";
+	import { Md5 } from "ts-md5";
 
 	import type {
 		iNodeFn,
@@ -373,7 +373,6 @@
 	import type { iModalProps, iUseThemeProps } from "../../types/props";
 	import useTheme from "../../composables/theme";
 	import { useHelpers, useOrderBy } from "../../composables/utils";
-	import useUUID from "../../composables/crypto";
 
 	type tPropertyOrderFn = (a: [string, any], b: [string, any]) => -1 | 0 | 1;
 
@@ -467,9 +466,6 @@
 	const Swal = useHelpers(useSwal);
 	const { themeClasses, themeValues, dangerThemeValues } = useTheme(props);
 	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
-	const { uuid } = useUUID();
-
-	const randomId = uuid().replace("-", "").substring(0, 8);
 
 	/** [selected, show] */
 	const selectedNodes = ref<[boolean, boolean][]>(reFillNodes(props.nodes.length));
@@ -537,11 +533,10 @@
 	});
 	/** Prefer a predictable identifier */
 	const tableId = computed(() => {
-		const childrenBased = props.childrenName || props.childrenCountKey;
+		const childrenBased = props.childrenName || String(props.childrenCountKey);
 		const metaBased = propertiesMeta.value[0].alias || propertiesMeta.value[0].value;
-		const seed = deburr(String(childrenBased || metaBased || ""));
 
-		return `table_${seed.replaceAll(" ", "") || randomId}`;
+		return Md5.hashStr(`table-${childrenBased}-${metaBased}`);
 	});
 
 	const defaultOrderProperty: tPropertyOrderFn = ([a, aValue], [b, bValue]) => {

diff --git a/packages/components-vue/src/composables/crypto.ts b/packages/components-vue/src/composables/crypto.ts
diff --git a/yarn.lock b/yarn.lock
@@ -11795,11 +11795,6 @@ nanoid@^3.3.4, nanoid@^3.3.7:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
-nanoid@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-4.0.2.tgz#140b3c5003959adbebf521c170f282c5e7f9fb9e"
-  integrity sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==
-
 nanoid@^5.0.7:
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-5.0.7.tgz#6452e8c5a816861fd9d2b898399f7e5fd6944cc6"