From 08c9d2bfa08cc93be3072cc13545d1774d150b43 Mon Sep 17 00:00:00 2001
From: ttquoccuong <ttquoccuong@gmail.com>
Date: Sun, 5 Mar 2023 21:09:58 +0700
Subject: [PATCH 1/2] Update FormControl.vue

Added `optionValue` & `optionLabel` in case `options` which do not use `id` & `label`
---
 src/components/FormControl.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/FormControl.vue b/src/components/FormControl.vue
index b8ac0fa4..bec9aed9 100644
--- a/src/components/FormControl.vue
+++ b/src/components/FormControl.vue
@@ -36,6 +36,14 @@ const props = defineProps({
     type: Array,
     default: null,
   },
+	optionLabel: {
+		type: String,
+		default: 'label',
+	},
+	optionValue: {
+		type: String,
+		default: 'id',
+	},
   type: {
     type: String,
     default: "text",
@@ -137,9 +145,9 @@ if (props.ctrlKFocus) {
       <option
         v-for="option in options"
         :key="option.id ?? option"
-        :value="option"
+        :value="option[optionValue] ?? option"
       >
-        {{ option.label ?? option }}
+        {{ option[optionLabel] ?? option }}
       </option>
     </select>
     <textarea

From d7be9fdc3be5a63d13be9c3dc41a62cd166ccece Mon Sep 17 00:00:00 2001
From: ttquoccuong <ttquoccuong@gmail.com>
Date: Sun, 5 Mar 2023 21:15:51 +0700
Subject: [PATCH 2/2] Update FromControl.vue

Added `attrs` to binding missing attributes
---
 src/components/FormControl.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/FormControl.vue b/src/components/FormControl.vue
index bec9aed9..1651b9bf 100644
--- a/src/components/FormControl.vue
+++ b/src/components/FormControl.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { computed, ref, onMounted, onBeforeUnmount, useAttrs } from "vue";
 import { useMainStore } from "@/stores/main";
 import FormControlIcon from "@/components/FormControlIcon.vue";
 
@@ -58,6 +58,8 @@ const props = defineProps({
   ctrlKFocus: Boolean,
 });
 
+const attrs = useAttrs();
+
 const emit = defineEmits(["update:modelValue", "setRef"]);
 
 const computedValue = computed({
@@ -141,6 +143,7 @@ if (props.ctrlKFocus) {
       v-model="computedValue"
       :name="name"
       :class="inputElClass"
+      v-bind="attrs"
     >
       <option
         v-for="option in options"
@@ -159,6 +162,7 @@ if (props.ctrlKFocus) {
       :maxlength="maxlength"
       :placeholder="placeholder"
       :required="required"
+      v-bind="attrs"
     />
     <input
       v-else
@@ -173,6 +177,7 @@ if (props.ctrlKFocus) {
       :placeholder="placeholder"
       :type="computedType"
       :class="inputElClass"
+      v-bind="attrs"
     />
     <FormControlIcon v-if="icon" :icon="icon" :h="controlIconH" />
   </div>