feat: unique id attributes to UI components

src/components/08_request-list/DataDisplay.vue

@@ -27,11 +27,15 @@ withDefaults(
       class="app-text-muted q-pr-sm"
       :width="iconSize || '2rem'"
     />
-    <span class="row col">
-      <span class="col-12 app-text-muted-2" style="font-size: 10px">
+    <span :id="`dd-wrapper-${label}`" class="row col">
+      <span
+        :id="`dd-label-${label}`"
+        class="col-12 app-text-muted-2"
+        style="font-size: 10px"
+      >
         {{ label }}
       </span>
-      <span class="col-12 ellipsis">
+      <span :id="`dd-value-wrapper-${label}`" class="col-12 ellipsis">
         <slot name="value">
           <span
             :class="{ 'link cursor-pointer': clickable }"
@@ -43,7 +47,11 @@ withDefaults(
             {{ value }}
             <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
           </span>
-          <span v-else :class="{ 'link cursor-pointer': clickable }">
+          <span
+            :id="`dd-value-${label}`"
+            v-else
+            :class="{ 'link cursor-pointer': clickable }"
+          >
             <span
               v-for="(item, index) in value"
               :key="index"

src/components/button/MainButton.vue

@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  id?: string;
   icon?: string;
   color: string;
   iconOnly?: boolean;
@@ -18,6 +19,7 @@ defineProps<{
 
 <template>
   <button
+    :id="id"
     @click="(e) => $emit('click', e)"
     class="main-btn"
     :class="{

src/components/shared/SelectInput.vue

@@ -72,6 +72,7 @@ watch(
 </script>
 <template>
   <q-select
+    :id="id"
     :placeholder="placeholder"
     outlined
     :clearable

src/components/shared/select/SelectBranch.vue

@@ -75,7 +75,6 @@ function setDefaultValue() {
 </script>
 <template>
   <SelectInput
-    for="select-hq-id"
     v-model="value"
     incremental
     :label