[WIP] Заменил степпер на квазаровский, фикс стилей

src/components/HeaderInputs.vue

@@ -1,22 +1,22 @@
 <template lang="pug">
-  .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
-    .select-container(@click="changeState", v-click-outside="closeOptions")
-      .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
-        .icon-wrapper.icon-search.flex.text-lg.justify-center.items-center
-        span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
-        .arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
-      .options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
-        .option-list.cursor-pointer.flex.flex-row.mb-4(
-          v-for="filter in filters",
-          :key="filter", @click="selectFilter(filter)"
+  .header-inputs-wrapper.flex.items-center.font-medium.text-base
+    q-select.w-40.pl-3.pr-2.selected(
+      v-model="selectedFilter",
+      :options="filters",
+      borderless,
+      dense
+    )
+      template(v-slot:selected)
+        span(:style="{color: 'var(--btn-blue-color)'}") {{ selectedFilter }}
+      template(v-slot:prepend)
+        q-icon.pr-1(
+          name="app:icon-search",
+          size="18px",
+          :style="{color: 'var(--btn-blue-color)', opacity: '0.7'}"
         )
-          .icon-wrapper.mr-2.flex.justify-center
-            .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
-          .flex.items-center {{ filter }}
     q-input.px-4(
       type="text",
       placeholder="Искать ...",
-      :input-style="{color: 'var(--btn-blue-color)'}",
       borderless,
       square
     )
@@ -24,10 +24,11 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect";
 
 export default {
   name: "HeaderInputs",
-  components: { BaseInput },
+  components: { BaseInput, BaseSelect },
   data() {
     return {
       selectedFilter: "Календарь",
@@ -36,80 +37,20 @@ export default {
     };
   },
   methods: {
-    changeState() {
-      this.isOpen = !this.isOpen;
-    },
     selectFilter(filter) {
       this.selectedFilter = filter;
     },
-    closeOptions() {
-      this.isOpen = false;
-    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.open
-  .arrow
-    transform: rotate(180deg)
-
 .header-inputs-wrapper
   height: 40px
   background-color: var(--default-white)
   border-radius: 4px
   border: 1px solid var(--border-light-grey-color)
 
-.select-container
+.selected
   border-right: 1px solid var(--border-light-grey-color)
-
-.icon-wrapper
-  width: 24px
-  height: 24px
-
-.custom-input
-  border: none
-  outline: none
-  background-color: transparent
-  color: var(--btn-blue-color)
-  height: 100%
-
-.select-wrapper
-  position: relative
-  z-index: 2
-
-.select-input
-  width: 100px
-
-.options-wrapper
-  width: 172px
-  background-color: var(--default-white)
-  color: var(--font-dark-blue-color)
-  border-radius: 4px
-  position: absolute
-  box-shadow: var(--default-shadow)
-
-.search-input
-  &::placeholder
-    color: var(--font-grey-color)
-
-.icon-search
-  color: var(--btn-blue-color)
-  opacity: 0.5
-
-.option-list
-  &:last-child
-    margin: 0
-  &:hover
-    color: var(--btn-blue-color)
-
-.arrow
-  color: var(--btn-blue-color)
-
-.icon-down-arrow
-  width: 16px
-  height: 16px
-
-.input-height
-  height: 38px
 </style>