feat: restructure list

app/components/content/medicine-method/list.vue

@@ -2,8 +2,8 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
 
 // Helpers
 import { usePaginatedList } from '~/composables/usePaginatedList'
@@ -57,7 +57,9 @@ const headerPrep: HeaderPrep = {
     minLength: 3,
     debounceMs: 500,
     showValidationFeedback: true,
-    onInput: (_val: string) => {},
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
     onClick: () => {},
     onClear: () => {},
   },
@@ -112,7 +114,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
   <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   <Dialog