[WIP] Добавил поиск на модальное окно выбора льгот, правки кода

src/components/base/BaseCategorySelection.vue

@@ -2,13 +2,19 @@
   .selection-wrapper.flex
     .left-side.flex.flex-col.gap-y-4
       .flex.font-bold.text-xl Категории
-      base-input(placeholder="Поиск", outlined, :width="300")
-        .flex.items-center.cursor-pointer
-          q-icon(
-            name="app:icon-search",
-            size="18px",
-            style="color: var(--font-dark-blue-color)"
-          )
+      base-input(
+        placeholder="Поиск",
+        @keyup.enter="searchCategory",
+        v-model="searchBenefit",
+        outlined,
+        :width="300",
+        iconLeft
+      )
+        q-icon(
+          name="app:icon-search",
+          size="20px",
+          style="color: var(--font-grey-color)"
+        )
       .field.flex.flex-col.overflow-y-scroll
         .flex.items-center(
           v-for="benefit in benefitData",
@@ -24,7 +30,11 @@
           .name.flex.items-center.font-medium.text-xm {{benefit.name}}
       .buttons-group.flex.py-4.px-8.justify-center
         base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
-        base-button.text-base.font-semibold(:size="40", @click="saveCategories(selected[0])") Сохранить
+        base-button.text-base.font-semibold(
+          v-if="selected.length > 0",
+          :size="40",
+          @click="saveCategories(selected[0])"
+        ) Сохранить
     .right-side.flex.px-14.font-bold.relative
       q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
       .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
@@ -58,10 +68,12 @@ export default {
     shiftSelected: Function,
     closeModalCategories: Function,
     saveCategories: Function,
+    showModal: Boolean,
   },
   data() {
     return {
       selected: [],
+      searchBenefit: "",
     };
   },
   computed: {
@@ -75,6 +87,11 @@ export default {
       return this.selected[0]?.privileges.split(",");
     },
   },
+  methods: {
+    searchCategory() {
+      this.$emit("search", this.searchBenefit);
+    },
+  },
   watch: {
     selected: {
       immediate: true,
@@ -83,6 +100,12 @@ export default {
         if (this.selected.length >= 2) this.selected.shift();
       },
     },
+    showModal: {
+      immediate: true,
+      handler(newVal) {
+        if (!newVal) this.searchBenefit = "";
+      },
+    },
   },
 };
 </script>
@@ -91,6 +114,7 @@ export default {
 .selection-wrapper
   width: 895px
   height: 660px
+  font-feature-settings: 'pnum' on, 'lnum' on
 
 .left-side
   width: 364px

src/components/base/BaseInput.vue

@@ -22,10 +22,12 @@
       :autogrow="autogrow",
       :square="square",
       :standout="standout"
-      :accept="accept"
+      :accept="accept",
       hide-bottom-space
     )
-      slot.cursor-pointer
+      template(v-slot:prepend, v-if="iconLeft")
+        slot
+      slot.cursor-pointer(v-if="!iconLeft")
 </template>
 
 <script>
@@ -85,6 +87,7 @@ export default {
     disabled: Boolean,
     label: String,
     readonly: Boolean,
+    iconLeft: Boolean,
   },
   emits: ["update:modelValue"],
   computed: {