54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
||
<div class="columns is-mobile is-multiline mx-0">
|
||
<span
|
||
v-for="(year, i) in years"
|
||
:key="year"
|
||
:class="['column is-4 has-text-centered is-clickable fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
|
||
@click="$emit('year', year)"
|
||
>
|
||
{{ year }}
|
||
</span>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
const props = defineProps({
|
||
year: Number,
|
||
month: Number,
|
||
action: Object,
|
||
});
|
||
|
||
const emit = defineEmits(["caption"]);
|
||
const years = ref(
|
||
Array.from({ length: 12 })
|
||
.fill(props.year)
|
||
.map((y, i) => y + i - 6),
|
||
);
|
||
emit("caption", `${years.value[1]} – ${years.value[10]}`);
|
||
|
||
watch(
|
||
() => props.action,
|
||
(newVal) => {
|
||
if (newVal.name === "next") next();
|
||
if (newVal.name === "previous") previous();
|
||
},
|
||
);
|
||
|
||
watch(years, () => {
|
||
emit("caption", `${years.value[1]} – ${years.value[10]}`);
|
||
});
|
||
|
||
function next() {
|
||
const baseYear = years.value[11];
|
||
years.value = Array.from({ length: 12 })
|
||
.fill(baseYear)
|
||
.map((y, i) => y + i - 6);
|
||
}
|
||
|
||
function previous() {
|
||
const baseYear = years.value[0];
|
||
years.value = Array.from({ length: 12 })
|
||
.fill(baseYear)
|
||
.map((y, i) => y + i - 6);
|
||
}
|
||
</script>
|