Add lifecycle hook and fetch data on mounted

Add two-way binding for menitValue in InputWithSuffix
Add two-way binding for timeValue in InputNumber
Refactor filterData function in Table_5.vue

src/components/Form/FiltersType/Type16.vue

@@ -1,15 +1,81 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
-fetchMedia();
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  fetchMedia,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  itemsMedia
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const mediaPlaceholder = 'Semua Media'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const media = ref({ id: 0, name: mediaPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  media: media.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+const setMedia = (value: any) => {
+  media.value = value
+  data.value.media = value
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+  fetchMedia()
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      :data="itemsUid"
+      @update:selected="setUid($event)"
+      :placeholder="uidPlaceholder"
+      :selected="uid"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -17,27 +83,45 @@ fetchMedia();
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      :data="itemsUp3"
+      @update:selected="setUp3($event)"
+      :placeholder="up3Placeholder"
+      :selected="up3"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select
+      :data="itemsPosko"
+      @update:selected="setPosko($event)"
+      :placeholder="poskoPlaceholder"
+      :selected="posko"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
 
-    <Select placeholder="Semua Media" :data="itemsMedia" />
+    <Select
+      :selected="media"
+      @update:selected="setMedia($event)"
+      :placeholder="mediaPlaceholder"
+      :data="itemsMedia"
+    />
   </div>
-  
+
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
-      " />
+    <DatePicker
+      @update:date-value="
+        (value) => {
+          data.periode = value
+        }
+      "
+    />
   </div>
 </template>