WIP Сделала фильтрацию

src/components/base/BaseSelect.vue

@@ -13,22 +13,42 @@
         map-options,
         :clearable="clearable",
         dropdown-icon="app:down-arrow",
-        :menu-offset="[0, 8]"
+        :menu-offset="[0, 8]",
+        :use-input="useInput",
+        :placeholder="useInput && placeholder ? placeholder : ''",
+        @filter="filterFn",
+        :popup-content-style="popupContentStyle"
       )
         template(v-slot:selected)
-          span(v-if="!value?.icon", :class="{placeholder: placeholder}") {{ textSelect }}
+          span(v-if="!value?.icon", :class="placeholderColor") {{ textSelect }}
           q-icon.selected-icon(
             v-else,
             :name="iconSelect",
             size="24px"
           )
-        template(v-slot:option="scope")
+        template(v-slot:option="scope", v-if="!customOption")
           q-item(v-bind="scope.itemProps", style="justify-content: center", v-if="value?.icon")
             q-item-section(avatar, style="padding: 0px; min-width: 0px")
               q-icon.icon(:name="scope.opt.icon", size="24px")
           q-item.item.px-4.py-2(v-bind="scope.itemProps", style="justify-content: center", v-else)
             q-item-section
               q-item-label.text-dark.text-base.font-medium {{ scope.opt.label }}
+        template(v-slot:option="{itemProps, opt}", v-else)
+          slot(
+            name="customOption",
+            :props="itemProps",
+            :label="opt.label"
+            :avatar="opt.avatar",
+            :medcard="opt.medcard"
+          )
+        template(v-slot:prepend, v-if="iconLeft")
+          slot(name="iconLeft")
+        template(v-slot:append, v-if="iconRight")
+          slot(name="iconRight")
+        template(v-slot:before-options)
+          slot(name="beforeOptions")
+        template(v-slot:no-option)
+          slot(name="noOption")
 </template>
 
 <script>
@@ -56,6 +76,12 @@ export default {
     width: String,
     clearable: Boolean,
     size: String,
+    useInput: Boolean,
+    iconLeft: Boolean,
+    iconRight: Boolean,
+    customOption: Boolean,
+    filterFn: Function,
+    popupContentStyle: Object,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -69,7 +95,11 @@ export default {
     },
     textSelect() {
       if (typeof this.modelValue === "string") return this.value;
-      return this.value?.label ? this.value.label : this.placeholder;
+      return this.value?.label
+        ? this.value.label
+        : !this.useInput
+        ? this.placeholder
+        : "";
     },
     iconSelect() {
       return this.value?.icon ? this.value.icon : this.placeholder;
@@ -123,14 +153,29 @@ export default {
         "--py": "8px 0",
       };
     },
+    placeholderColor() {
+      return {
+        placeholder: !this.useInput && this.placeholder,
+        selected:
+          typeof this.modelValue === "string"
+            ? !!this.value
+            : !!this.value?.label,
+      };
+    },
   },
 };
 </script>
 <style lang="sass">
 .placeholder
   color: var(--font-grey-color)
-.q-menu
-  font-feature-settings: 'pnum' on, 'lnum' on !important
+.selected
+  color: var(--font-dark-blue-color)
+
+.q-placeholder
+  font-weight: 500 !important
+  &::placeholder
+    opacity: 1 !important
+    color: var(--font-grey-color) !important
 
 .q-field--auto-height .q-field__native
   min-height: var(--input-height) !important
@@ -199,4 +244,6 @@ export default {
 
 .q-menu
   box-shadow: 1px 1px 8px 0px rgba(37, 40, 80, 0.15) !important
+  font-feature-settings: 'pnum' on, 'lnum' on !important
+  //max-height: var(--input-height) !important
 </style>