div(:class="{active: focused}")
.header-inputs-wrapper.flex.items-center.font-medium.text-base
.h-full.px-4.py-2.select.flex.items-center
q-menu(
:offset="[0, 6]",
v-model="isOpen",
:style="{'box-shadow': '-4px -4px 8px 0px rgba(9, 10, 21, 0.10), 4px 4px 8px 0px rgba(9, 10, 21, 0.10)'}"
)
.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.ok(name="app:ok", size="24px", v-if="filter === selectedFilter")
.flex.items-center.text-dark {{ filter }}
q-icon.mr-2(
name="app:search",
size="24px"
)
.flex-1.h-full.flex.items-center.justify-between
.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="16x",
:class="{'rotate-180': isOpen}"
)
q-input.input.px-4(
type="text",
placeholder="Искать ...",
borderless,
square,
@focus="focused = true",
@blur="focused = false"
)