113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<template lang="pug">
|
|
.header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
|
|
.select-container(@click="changeState", v-click-outside="closeOptions")
|
|
.select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
|
|
.icon-wrapper.icon-search.flex.text-lg.justify-center.items-center
|
|
span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
|
|
.arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
|
|
.options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
|
|
.option-list.cursor-pointer.flex.flex-row.mb-4(
|
|
v-for="filter in filters",
|
|
:key="filter", @click="selectFilter(filter)"
|
|
)
|
|
.icon-wrapper.mr-2.flex.justify-center
|
|
.icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
|
|
.flex.items-center {{ filter }}
|
|
base-input.p-4(
|
|
type="text",
|
|
placeholder="Искать ...",
|
|
text-color="var(--btn-blue-color)",
|
|
borderless,
|
|
square
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
|
|
export default {
|
|
name: "HeaderInputs",
|
|
components: { BaseInput },
|
|
data() {
|
|
return {
|
|
selectedFilter: "Календарь",
|
|
filters: ["Календарь", "Клиенты"],
|
|
isOpen: false,
|
|
};
|
|
},
|
|
methods: {
|
|
changeState() {
|
|
this.isOpen = !this.isOpen;
|
|
},
|
|
selectFilter(filter) {
|
|
this.selectedFilter = filter;
|
|
},
|
|
closeOptions() {
|
|
this.isOpen = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.open
|
|
.arrow
|
|
transform: rotate(180deg)
|
|
|
|
.header-inputs-wrapper
|
|
height: 40px
|
|
background-color: var(--default-white)
|
|
border-radius: 4px
|
|
border: 1px solid var(--border-light-grey-color)
|
|
|
|
.select-container
|
|
border-right: 1px solid var(--border-light-grey-color)
|
|
|
|
.icon-wrapper
|
|
width: 24px
|
|
height: 24px
|
|
|
|
.custom-input
|
|
border: none
|
|
outline: none
|
|
background-color: transparent
|
|
color: var(--btn-blue-color)
|
|
height: 100%
|
|
|
|
.select-wrapper
|
|
position: relative
|
|
z-index: 2
|
|
|
|
.select-input
|
|
width: 100px
|
|
|
|
.options-wrapper
|
|
width: 172px
|
|
background-color: var(--default-white)
|
|
color: var(--font-dark-blue-color)
|
|
border-radius: 4px
|
|
position: absolute
|
|
box-shadow: var(--default-shadow)
|
|
|
|
.search-input
|
|
&::placeholder
|
|
color: var(--font-grey-color)
|
|
|
|
.icon-search
|
|
color: var(--btn-blue-color)
|
|
opacity: 0.5
|
|
|
|
.option-list
|
|
&:last-child
|
|
margin: 0
|
|
&:hover
|
|
color: var(--btn-blue-color)
|
|
|
|
.arrow
|
|
color: var(--btn-blue-color)
|
|
|
|
.icon-down-arrow
|
|
width: 16px
|
|
height: 16px
|
|
</style>
|