53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template lang="pug">
|
|
.layout-switch-wrapper.flex.h-10.p-1
|
|
button#day.flex.items-center.px-3.transition.duration-200.ease-linear(
|
|
:class="dayLayoutState",
|
|
@click="changeSelectedLayout"
|
|
) День
|
|
button#week.flex.items-center.px-3.transition.duration-200.ease-linear(
|
|
:class="weekLayoutState",
|
|
@click="changeSelectedLayout"
|
|
) Неделя
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CalendarLayoutSwitch",
|
|
data() {
|
|
return {
|
|
selectedLayout: "day",
|
|
};
|
|
},
|
|
computed: {
|
|
dayLayoutState() {
|
|
return {
|
|
active: this.selectedLayout === "day",
|
|
};
|
|
},
|
|
weekLayoutState() {
|
|
return {
|
|
active: this.selectedLayout === "week",
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
changeSelectedLayout(event) {
|
|
this.selectedLayout = event.target.id;
|
|
this.$emit("selected", event.target.id);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.active
|
|
background-color: var(--bg-aqua-blue)
|
|
color: var(--default-white)
|
|
border-radius: 4px
|
|
|
|
.layout-switch-wrapper
|
|
background-color: var(--bg-light-grey)
|
|
color: var(--font-grey-color)
|
|
border-radius: 4px
|
|
</style>
|