feat/fix: new component(select input/zone, quoCard)

src/components/shared/SelectInput.vue

@@ -1,45 +1,82 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { QSelect } from 'quasar';
 
 const model = defineModel<string | Date | null>();
-const option = defineModel<[]>('option', { default: [] });
-
-const props = defineProps<{
-  id?: string;
-  readonly?: boolean;
-  clearable?: boolean;
-  label?: string;
-  rules?: ((value: string) => string | true)[];
-  disabledDates?: string[] | Date[] | ((date: Date) => boolean);
-}>();
 
 const options = ref<Record<string, unknown>[]>([]);
-let typeBusinessFilter = selectFilterOptionRefMod(option, options, 'label');
+let defaultFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    label?: string;
+    option: Record<string, unknown>[];
+    optionLabel?: string;
+    optionValue?: string;
+
+    readonly?: boolean;
+    clearable?: boolean;
+    incremental?: boolean;
+
+    rules?: ((value: string) => string | true)[];
+  }>(),
+  { option: () => [], optionLabel: 'label', optionValue: 'value' },
+);
+
+defineEmits<{
+  (e: 'filter', val: string, update: void): void;
+}>();
+
+onMounted(() => {
+  defaultFilter = selectFilterOptionRefMod(
+    ref(props.option),
+    options,
+    props.optionLabel,
+  );
+});
+
+watch(
+  () => props.option,
+  () => {
+    defaultFilter = selectFilterOptionRefMod(
+      ref(props.option),
+      options,
+      props.optionLabel,
+    );
+  },
+);
 </script>
 <template>
   <q-select
     outlined
-    clearable
+    :clearable
     use-input
-    fill-input
     emit-value
     map-options
     hide-selected
     hide-bottom-space
+    :fill-input="!!model"
     :hide-dropdown-icon="readonly"
     input-debounce="0"
-    option-value="value"
-    option-label="label"
+    :option-value="optionValue"
+    :option-label="optionLabel"
     v-model="model"
-    class="col-md-6 col-12"
     dense
-    :readonly="readonly"
+    :readonly
     :label="label"
-    :options="options"
-    :for="`${prefixId}-select-business-type`"
-    @filter="typeBusinessFilter"
-    :rules="[(val: string) => !!val || $t('form.error.required')]"
+    :options="incremental ? option : options"
+    :for="`select-${id}`"
+    @filter="
+      (val, update) => {
+        incremental ? $emit('filter', val, update) : defaultFilter(val, update);
+      }
+    "
+    :rules
   >
     <template v-slot:no-option>
       <q-item>
@@ -48,5 +85,13 @@ let typeBusinessFilter = selectFilterOptionRefMod(option, options, 'label');
         </q-item-section>
       </q-item>
     </template>
+
+    <template v-if="$slots.name" v-slot:selected-item="scope">
+      <slot name="selected-item" :scope="scope"></slot>
+    </template>
+
+    <template v-if="$slots.option" v-slot:option="scope">
+      <slot name="option" :scope="scope"></slot>
+    </template>
   </q-select>
 </template>