.calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
base-input.search(
iconLeft,
:width="280",
size="M",
placeholder="Найти ...",
icon-left
)
template(v-slot:iconLeft)
q-icon.search-icon(name="app: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",
@click="previousWeek"
)
base-input.search(
size="M"
:width="300",
v-model="currentWeek",
)
.h-5.w-5.flex.items-center.justify-center
q-icon.calendar-icon.text.cursor-pointer(
:name="calendarVisibility ? 'app:cancel-mini' : 'app:calendar'",
size="20px",
)
q-menu(
:style="{'margin-top': '8px !important'}"
v-model="calendarVisibility",
transition-show="scale",
transition-hide="scale"
self="top middle",
:offset="[118, 14]"
)
base-calendar(
v-model="dates",
range,
:range-count="7",
:save="saveDatesChange",
:start-year="2000"
)
q-btn(
color="secondary",
icon="arrow_forward_ios",
round,
size="14px",
text-color="primary",
dense,
@click="nextWeek"
)
.h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
q-btn-toggle(
v-model="value",
:options="displayTypesList",
no-caps,
toggle-color="light-blue-4",
padding="0px"
)
template(v-slot:one)
.w-12.h-8.flex.items-center.justify-center
date-switcher-svg(name-svg="expanded", :active="value === 'expanded'")
template(v-slot:two)
.w-12.h-8.flex.items-center.justify-center
date-switcher-svg(name-svg="compressed", :active="value === 'collapsed'")