refactor filter select

src/components/table/table.filter.select.component.vue

@@ -1,23 +1,33 @@
 <script>
+/**
+ * Select input.
+ * Use for selecting filter column or filter column operator.
+ */
 
-import {onMounted, ref, toRefs} from "vue";
+import {onMounted, ref, toRefs, watch} from "vue";
 import {useDebounceFn} from "@vueuse/core";
 
 export default {
   name: 'fohn-table-filter-select',
   emits: ['onItemSelect'],
   props: {
+    initValue: String,
     items : {
       type: Array,
       default: () => [],
     }
   },
 
   setup(props, { attrs, slots, emit }) {
-    const { items } = toRefs(props);
+    const { items, initValue } = toRefs(props);
     const isActive = ref(false);
     const inputContainer = ref();
     const inputEl = ref();
+    const value = ref(initValue.value);
+
+    watch(initValue, (newVal) => {
+      value.value = newVal;
+    })
 
     const toggleSelect = () => {
       isActive.value = !isActive.value;
@@ -29,23 +39,24 @@ export default {
 
     const selectItem = (idx) => {
       inputEl.value.focus();
-      inputEl.value.value = items.value[idx].label;
-      emit('onItemSelect', items.value[idx].value);
+      value.value = items.value[idx].label;
+      emit('onItemSelect', idx, items.value[idx].id);
       closeSelect();
     }
 
     onMounted(() => {
       inputEl.value = inputContainer.value.querySelector('input');
     });
 
-    return {items, isActive, inputContainer, toggleSelect, selectItem, closeSelect}
+    return {value, items, isActive, inputContainer, toggleSelect, selectItem, closeSelect}
   }
 }
 </script>
 
 <template>
   <div ref="inputContainer">
     <slot
+        :value="value"
         :items="items"
         :isActive="isActive"
         :toggleSelect="toggleSelect"