137 lines
3.3 KiB
Vue
137 lines
3.3 KiB
Vue
<template lang="pug">
|
|
.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"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
import * as moment from "moment/moment";
|
|
import BaseCalendar from "@/components/base/BaseCalendar";
|
|
export default {
|
|
name: "CalendarHeader",
|
|
components: { BaseInput, BaseCalendar },
|
|
data() {
|
|
return {
|
|
displayType: "collapsed",
|
|
displayTypesList: [
|
|
{
|
|
label: "col",
|
|
value: "collapsed",
|
|
},
|
|
{
|
|
label: "exp",
|
|
value: "expanded",
|
|
},
|
|
],
|
|
date: {
|
|
from: moment().clone().add(1, "month"),
|
|
to: moment().clone().add(2, "month"),
|
|
},
|
|
calendarVisibility: false,
|
|
};
|
|
},
|
|
methods: {
|
|
changeCalendarVisibility(value) {
|
|
this.calendarVisibility = value;
|
|
},
|
|
},
|
|
watch: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.calendar-header-wrapper
|
|
background-color: var(--default-white)
|
|
height: 72px
|
|
border-radius: 4px
|
|
z-index: 10
|
|
|
|
.text
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.text-grey-color
|
|
color: var(--font-grey-color)
|
|
|
|
.text-primary
|
|
color: var(--font-dark-blue-color-0) !important
|
|
|
|
.bg-secondary
|
|
background: var(--bg-light-grey) !important
|
|
|
|
.q-btn--round
|
|
width: 32px !important
|
|
height: 32px !important
|
|
min-width: 32px !important
|
|
min-height: 32px !important
|
|
|
|
.q-btn-group :deep(.q-btn-item)
|
|
border-radius: 4px !important
|
|
</style>
|