.calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
base-input(
iconLeft,
outlined,
:width="280",
placeholder="Найти ...",
fontSize="16px",
lineHeight="19px"
)
q-icon(name="app:icon-search", size="20px")
.flex.gap-x-4.items-center.justify-center
q-btn(
color="secondary",
round,
size="14px",
dense,
icon="arrow_back_ios_new",
text-color="primary",
padding="2px 11px 2px 8px"
)
base-input(
outlined,
:width="300",
fontSize="16px",
lineHeight="19px",
iconRight,
id="calendarIcon"
)
q-icon.text(name="app:calendar", size="20px", ref="calendarIcon", @click="changeCalendarVisibility(false)")
//q-popup-proxy(
cover,
transition-show="scale",
transition-hide="scale"
anchor="bottom middle", self="top middle"
//)
//q-date(v-model="date", minimal, range)
.flex.items-center.justify-end
q-btn(
v-close-popup,
label="Закрыть",
color="primary",
flat
)
q-menu(
:style="{'margin-top': '4px !important'}"
target="#calendarIcon"
v-model="calendarVisibility",
transition-show="scale",
transition-hide="scale"
anchor="bottom middle",
self="top middle"
)
base-calendar(v-model="date", range)
q-btn(
color="secondary",
icon="arrow_forward_ios",
round,
size="14px",
text-color="primary",
dense
)
.h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
q-btn-toggle(
v-model="displayType",
:options="displayTypesList",
no-caps,
toggle-color="light-blue-4",
padding="4px"
)