71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
||
<div class="fixed-grid has-3-cols">
|
||
<div
|
||
class="grid"
|
||
style="gap: 0.5rem 0"
|
||
>
|
||
<div
|
||
v-for="(year, i) in years"
|
||
:key="year"
|
||
class="cell"
|
||
>
|
||
<button
|
||
:class="['button is-white w-full fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
|
||
@click="emit('year', year)"
|
||
>
|
||
{{ year }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
const props = defineProps({
|
||
year: Number,
|
||
month: Number,
|
||
action: Object,
|
||
});
|
||
|
||
const emit = defineEmits(["caption", "year"]);
|
||
const years = ref(
|
||
Array.from({ length: 12 })
|
||
.fill(props.year)
|
||
.map((y, i) => y + i - 6),
|
||
);
|
||
|
||
watch(
|
||
() => props.action,
|
||
(newVal) => {
|
||
if (newVal.name === "next") next();
|
||
if (newVal.name === "previous") previous();
|
||
},
|
||
);
|
||
|
||
watch(
|
||
years,
|
||
() => {
|
||
emit("caption", `${years.value[1]} – ${years.value[10]}`);
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
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>
|
||
<style scoped>
|
||
.button {
|
||
--bulma-button-color-l: 25%;
|
||
}
|
||
</style>
|