WIP Изменила инпут в хедере

src/components/HeaderInputs.vue

@@ -1,25 +1,56 @@
 <template lang="pug">
-  .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(
+  div(:class="{active: focused}")
+    .header-inputs-wrapper.flex.items-center.font-medium.text-base
+      .h-full.px-4.py-2.select.flex.items-center(:style="{color: 'var(--font-grey-color)'}")
+        q-menu(:offset="[0, 6]" v-model="isOpen")
+          .menu.bg-shite.p-4.flex.flex-col.gap-y-3
+            .item.text-base.font-medium.flex.gap-x-2.cursor-pointer(v-for="filter in filters", v-close-popup, @click="selectFilter(filter)")
+              .h-6.w-6.items-center.justify-center.flex
+                q-icon(name="app:ok", size="12px", v-if="filter === selectedFilter")
+              .flex.items-center {{ filter }}
+        q-icon.mr-2(
           name="app:icon-search",
-          size="18px",
-          :style="{color: 'var(--btn-blue-color)', opacity: '0.7'}"
+          size="18px"
         )
-    q-input.px-4(
-      type="text",
-      placeholder="Искать ...",
-      borderless,
-      square
-    )
+        .text-base.font-medium {{ selectedFilter }}
+        .h-4.w-4.flex.items-center.pt-1.justify-center.ml-1
+          q-icon(
+            name="app:down-arrow",
+            size="8px",
+            :class="{'rotate-180': isOpen}"
+          )
+      //- q-select.pl-4.pr-5.select(
+      //-   v-model="selectedFilter",
+      //-   :options="filters",
+      //-   borderless,
+      //-   dense,
+      //-   dropdown-icon="app:down-arrow",
+      //-   behavior="menu",
+      //-   :menu-offset="[18, 4]"
+      //-   multiple
+      //- )
+      //-   template(v-slot:selected)
+      //-     span(:style="{color: 'var(--font-grey-color)', 'font-weight': 500, 'line-height': 'normal' }") {{ selectedFilter }}
+      //-   template(v-slot:prepend)
+      //-     q-icon.pr-1(
+      //-       name="app:icon-search",
+      //-       size="18px",
+      //-       :style="{color: 'var(--font-grey-color)'}"
+      //-     )
+      //-   template(v-slot:option="scope")
+      //-     //.p-14.bg-white.w-54.flex.gap-y-3
+      //-     q-item.item(v-bind="scope.itemProps", :clickable="false")
+      //-       q-item-section.flex
+      //-         q-icon(name="app:ok", size="16px", v-if="scope.opt === selectedFilter")
+      //-         q-item-label {{ scope.opt }}
+      q-input.input.px-4(
+        type="text",
+        placeholder="Искать ...",
+        borderless,
+        square,
+        @focus="focused = true",
+        @blur="focused = false"
+      )
 </template>
 
 <script>
@@ -30,6 +61,7 @@ export default {
       selectedFilter: "Календарь",
       filters: ["Календарь", "Клиенты"],
       isOpen: false,
+      focused: false,
     };
   },
   methods: {
@@ -45,8 +77,55 @@ export default {
   height: 40px
   background-color: var(--default-white)
   border-radius: 4px
-  border: 1px solid var(--border-light-grey-color)
+  border-width: 1.5px
+  border-style: solid
+  border-color: #DDDDE8
+  &:hover
+    border-color: var(--font-grey-color)
+    .select
+      border-right-color: var(--font-grey-color)
 
-.selected
-  border-right: 1px solid var(--border-light-grey-color)
+.active
+  .header-inputs-wrapper
+    border-color: var(--font-dark-blue-color)
+  .select
+    border-right-color: var(--font-dark-blue-color) !important
+
+// .select
+//   border-right-width: 1.5px
+//   border-right-style: solid
+//   border-right-color: var(--border-light-grey-color)
+//   width: 170px
+//   &:deep(q-field__native)
+//     color: var(--font-grey-color) !important
+//     font-weight: 500 !important
+//     line-height: normal !important
+//   &:deep(.q-select__dropdown-icon)
+//     font-size: 8px !important
+//   &:deep(.q-field__append)
+//     padding-left: 4px
+//     padding-top: 4px
+
+.select
+  border-right-width: 1.5px
+  border-right-style: solid
+  border-right-color: var(--border-light-grey-color)
+  width: 170px
+
+.input
+  width: 230px
+  &:deep(.q-field__native)
+    font-weight: 500
+    font-size: 16px
+    line-height: normal
+    color: var(--font-dark-blue-color)
+    &::placeholder
+      color: var(--font-grey-color)
+      opacity: 1
+
+.menu
+  width: 216px
+
+.item
+  color: var(--font-dark-blue-color)
 </style>