.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",
@click="previousWeek"
)
base-input(
outlined,
:width="300",
fontSize="16px",
lineHeight="19px",
iconRight,
v-model="currentWeek",
readonly
)
.h-5.w-5.flex.items-center.justify-center
q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
:size="calendarVisibility ? '10px' : '16px'"
)
q-menu(
:style="{'margin-top': '4px !important'}"
v-model="calendarVisibility",
transition-show="scale",
transition-hide="scale"
self="top middle",
:offset="[122, 14]"
)
base-calendar(
v-model="date",
range,
:range-count="7",
:save="saveNewDate",
:cancel="cancelDateChanges"
)
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="4px"
)