feat: enable input on select

src/components/02_personnel-management/FormPerson.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import useOptionStore from 'src/stores/options';
+import { selectOptionFilter } from 'src/stores/utils';
 import {
   dateFormat,
   calculateAge,
@@ -21,6 +22,12 @@ const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 
+const { options: genderOptions, filter: genderFilter } = selectOptionFilter(
+  optionStore.globalOption.gender,
+);
+const { options: nationalityOptions, filter: nationalityFilter } =
+  selectOptionFilter(optionStore.globalOption.nationality);
+
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
@@ -128,7 +135,9 @@ defineProps<{
       option-label="label"
       option-value="value"
       v-model="gender"
-      :options="optionStore.globalOption.gender"
+      use-input
+      @filter="genderFilter"
+      :options="genderOptions"
     />
 
     <VueDatePicker
@@ -223,8 +232,10 @@ defineProps<{
       class="col-md-3 col-6"
       option-label="label"
       option-value="value"
+      use-input
       v-model="gender"
-      :options="optionStore.globalOption.gender"
+      @filter="genderFilter"
+      :options="genderOptions"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputGender'),
@@ -247,7 +258,9 @@ defineProps<{
       option-label="label"
       option-value="label"
       v-model="nationality"
-      :options="optionStore.globalOption.nationality"
+      :options="nationalityOptions"
+      use-input
+      @filter="nationalityFilter"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputNationality'),