BC-5506: fix component uid

src/components/base/BaseInput/BaseInputDefault.vue

@@ -12,7 +12,7 @@
 					<label
 						v-show="showLabel"
 						:class="{ label: true, 'base-input-info': true }"
-						:for="`input-${$uid}`"
+						:for="`input-${uid}`"
 					>
 						{{ label }}
 					</label>
@@ -28,7 +28,7 @@
 				<div class="core">
 					<slot>
 						<input
-							:id="`input-${$uid}`"
+							:id="`input-${uid}`"
 							ref="input"
 							v-focus-on-mount="focus"
 							:aria-label="showLabel ? undefined : label"
@@ -88,9 +88,9 @@
 </template>
 <script>
 import { inputRangeDate } from "@/plugins/datetime";
-// VUE_UPGRADE do we need this?
-// import uidMixin from "@/mixins/uid";
 import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
+import { defineComponent } from "vue";
+import { useUid } from "@/utils/uid";
 
 export const supportedTypes = [
 	"email",
@@ -105,8 +105,14 @@ export const supportedTypes = [
 	"time",
 ];
 
-export default {
-	// mixins: [uidMixin],
+export default defineComponent({
+	setup() {
+		const { uid } = useUid();
+
+		return {
+			uid,
+		};
+	},
 	props: {
 		modelValue: { type: [String, Number], default: undefined },
 		type: {
@@ -184,7 +190,7 @@ export default {
 			this.$emit("blur", event);
 		},
 	},
-};
+});
 </script>
 
 <style lang="scss" scoped>

src/components/base/BaseModal.vue

@@ -5,8 +5,8 @@
 			:class="['modal-mask', design]"
 			role="dialog"
 			:aria-modal="active"
-			:aria-labelledby="`modal-${$uid}-title`"
-			:aria-describedby="`modal-${$uid}-body`"
+			:aria-labelledby="`modal-${uid}-title`"
+			:aria-describedby="`modal-${uid}-body`"
 		>
 			<div class="base-modal-wrapper" @click.self="handleBackgroundClick">
 				<div
@@ -19,12 +19,12 @@
 					<slot>
 						<h2
 							v-if="$slots.header"
-							:id="`modal-${$uid}-title`"
+							:id="`modal-${uid}-title`"
 							class="h4 modal-header"
 						>
 							<slot name="header" />
 						</h2>
-						<div :id="`modal-${$uid}-body`" class="modal-body">
+						<div :id="`modal-${uid}-body`" class="modal-body">
 							<slot name="body" />
 						</div>
 
@@ -46,14 +46,19 @@
 </template>
 
 <script>
-// VUE_UPGRADE do we need this?
-// import uidMixin from "@/mixins/uid";
 import ModalFooter from "@/components/molecules/ModalFooter";
-export default {
+import { defineComponent } from "vue";
+import { useUid } from "@/utils/uid";
+
+export default defineComponent({
+	setup() {
+		const { uid } = useUid();
+
+		return { uid };
+	},
 	components: {
 		ModalFooter,
 	},
-	// mixins: [uidMixin],
 	props: {
 		active: {
 			type: Boolean,
@@ -95,7 +100,7 @@ export default {
 			this.$emit("update:active", false);
 		},
 	},
-};
+});
 </script>
 
 <style lang="scss" scoped>

src/components/organisms/DataFilter/inputs/Checkbox.vue

@@ -7,19 +7,23 @@
 			v-model="vmodelProxy"
 			class="input-checkbox"
 			type="checkbox"
-			:name="$uid"
+			:name="uid"
 			:value="option.value"
 			:label="option.label"
 		/>
 	</fieldset>
 </template>
 
 <script>
-// VUE_UPGRADE do we need this?
-// import uid from "@/mixins/uid";
+import { useUid } from "@/utils/uid";
+import { defineComponent } from "vue";
 
-export default {
-	// mixins: [uid],
+export default defineComponent({
+	setup() {
+		const { uid } = useUid();
+
+		return { uid };
+	},
 	props: {
 		label: {
 			type: String,
@@ -59,7 +63,7 @@ export default {
 			},
 		},
 	},
-};
+});
 </script>
 <style lang="scss" scoped>
 fieldset {

src/components/organisms/DataFilter/inputs/Radio.vue

@@ -7,19 +7,23 @@
 			v-model="vmodelProxy"
 			class="input-radio"
 			type="radio"
-			:name="$uid"
+			:name="uid"
 			:value="option.value"
 			:label="option.label"
 		/>
 	</fieldset>
 </template>
 
 <script>
-// VUE_UPGRADE do we need this?
-// import uid from "@/mixins/uid";
+import { useUid } from "@/utils/uid";
+import { defineComponent } from "vue";
 
-export default {
-	// mixins: [uid],
+export default defineComponent({
+	setup() {
+		const { uid } = useUid();
+
+		return { uid };
+	},
 	props: {
 		label: {
 			type: String,
@@ -58,7 +62,7 @@ export default {
 			},
 		},
 	},
-};
+});
 </script>
 <style lang="scss" scoped>
 fieldset {

src/utils/uid.ts

@@ -0,0 +1,15 @@
+import { onBeforeMount, ref } from "vue";
+
+export const useUid = () => {
+	const uid = ref("");
+
+	onBeforeMount(() => {
+		uid.value = (
+			Date.now().toString(16) + Math.random().toString(16).substring(2)
+		).toUpperCase();
+	});
+
+	return {
+		uid,
+	};
+};