61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex flex-wrap gap-2">
|
|
<label
|
|
v-for="year in availableYears"
|
|
:key="year"
|
|
class="label cursor-pointer gap-2 p-0"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox checkbox-sm checkbox-primary"
|
|
:checked="modelValue.includes(year)"
|
|
@change="toggleYear(year)"
|
|
/>
|
|
<span class="label-text">{{ year }}</span>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
interface Props {
|
|
modelValue: number[];
|
|
yearsBack?: number;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
yearsBack: 3
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: number[]): void;
|
|
}>();
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
const availableYears = computed(() => {
|
|
const years: number[] = [];
|
|
for (let i = 0; i <= props.yearsBack; i++) {
|
|
years.push(currentYear - i);
|
|
}
|
|
return years;
|
|
});
|
|
|
|
function toggleYear(year: number) {
|
|
const newValue = [...props.modelValue];
|
|
const index = newValue.indexOf(year);
|
|
|
|
if (index === -1) {
|
|
newValue.push(year);
|
|
} else if (newValue.length > 1) {
|
|
// Don't allow deselecting the last year
|
|
newValue.splice(index, 1);
|
|
}
|
|
|
|
// Sort descending
|
|
newValue.sort((a, b) => b - a);
|
|
emit('update:modelValue', newValue);
|
|
}
|
|
</script>
|