57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template lang="pug">
|
|
.header-inputs-wrapper.flex.items-center.font-medium.text-base
|
|
q-select.w-40.pl-3.pr-2.selected(
|
|
v-model="selectedFilter",
|
|
:options="filters",
|
|
borderless,
|
|
dense
|
|
)
|
|
template(v-slot:selected)
|
|
span(:style="{color: 'var(--btn-blue-color)'}") {{ selectedFilter }}
|
|
template(v-slot:prepend)
|
|
q-icon.pr-1(
|
|
name="app:icon-search",
|
|
size="18px",
|
|
:style="{color: 'var(--btn-blue-color)', opacity: '0.7'}"
|
|
)
|
|
q-input.px-4(
|
|
type="text",
|
|
placeholder="Искать ...",
|
|
borderless,
|
|
square
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
import BaseSelect from "@/components/base/BaseSelect";
|
|
|
|
export default {
|
|
name: "HeaderInputs",
|
|
components: { BaseInput, BaseSelect },
|
|
data() {
|
|
return {
|
|
selectedFilter: "Календарь",
|
|
filters: ["Календарь", "Клиенты"],
|
|
isOpen: false,
|
|
};
|
|
},
|
|
methods: {
|
|
selectFilter(filter) {
|
|
this.selectedFilter = filter;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.header-inputs-wrapper
|
|
height: 40px
|
|
background-color: var(--default-white)
|
|
border-radius: 4px
|
|
border: 1px solid var(--border-light-grey-color)
|
|
|
|
.selected
|
|
border-right: 1px solid var(--border-light-grey-color)
|
|
</style>
|