You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.5 KiB
134 lines
3.5 KiB
<template>
|
|
<div
|
|
class="weekdays-selection-component"
|
|
>
|
|
<div
|
|
v-if="!tabs"
|
|
class="row justify-around"
|
|
>
|
|
<q-btn
|
|
v-for="(day, index) in days"
|
|
:key="day.value"
|
|
:label="day.label"
|
|
:class="(index > 0)?'q-ml-sm':''"
|
|
round
|
|
no-caps
|
|
unelevated
|
|
:color="(isSelected(day))?'primary':'dark'"
|
|
:text-color="(isSelected(day))?'dark':'primary'"
|
|
:disable="disable"
|
|
@click="toggle(day)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
>
|
|
<q-tabs
|
|
v-model="selectedTab"
|
|
dense
|
|
active-color="primary"
|
|
indicator-color="primary"
|
|
align="center"
|
|
>
|
|
<q-tab
|
|
v-for="(day) in days"
|
|
:key="day.value"
|
|
:name="'tab-' + day.value"
|
|
:label="day.label"
|
|
class="text-primary no-padding"
|
|
inline-label
|
|
outside-arrows
|
|
mobile-arrows
|
|
no-caps
|
|
:disable="disable"
|
|
/>
|
|
</q-tabs>
|
|
<q-separator
|
|
v-if="tabs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
DAY_MAP,
|
|
getDayNameByNumber
|
|
} from 'src/filters/time-set'
|
|
|
|
export default {
|
|
name: 'CscCfSelectionWeekdays',
|
|
props: {
|
|
weekdays: {
|
|
type: Array,
|
|
default: () => [DAY_MAP[0]]
|
|
},
|
|
tabs: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disable: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
emits: ['input'],
|
|
data () {
|
|
return {
|
|
selectedWeekdays: this.weekdays
|
|
}
|
|
},
|
|
computed: {
|
|
selectedTab: {
|
|
get () {
|
|
return `tab-${this.selectedWeekdays[0]}`
|
|
},
|
|
set (tab) {
|
|
this.selectedWeekdays = [Number(tab.replace('tab-', ''))]
|
|
}
|
|
},
|
|
days () {
|
|
const options = []
|
|
DAY_MAP.forEach((day, index) => {
|
|
options.push({
|
|
label: getDayNameByNumber(index, true),
|
|
value: day
|
|
})
|
|
})
|
|
return options
|
|
}
|
|
},
|
|
watch: {
|
|
selectedWeekdays (weekdays) {
|
|
this.$emit('input', weekdays)
|
|
},
|
|
weekdays (weekdays) {
|
|
this.selectedWeekdays = weekdays
|
|
}
|
|
},
|
|
methods: {
|
|
toggle (day) {
|
|
if (this.isSelected(day)) {
|
|
this.selectedWeekdays = this.selectedWeekdays.filter((dayValue) => day.value !== dayValue)
|
|
} else {
|
|
this.selectedWeekdays.push(day.value)
|
|
}
|
|
this.$emit('input', this.selectedWeekdays)
|
|
},
|
|
isSelected (day) {
|
|
if (this.selectedWeekdays) {
|
|
return this.selectedWeekdays.find((dayValue) => day.value === dayValue)
|
|
}
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" rel="stylesheet/sass" scoped>
|
|
.weekdays-selection-component
|
|
// Note: the magic number for height is the max component height in buttons mode.
|
|
// It makes the height of our component stable in any mode (tab \ buttons)
|
|
min-height: 42px
|
|
</style>
|