49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<div
|
|
data-test="year-picker"
|
|
class="grid grid-cols-3 gap-3"
|
|
>
|
|
<button
|
|
v-for="year in years"
|
|
:key="year"
|
|
type="button"
|
|
data-test="year"
|
|
:data-year="year"
|
|
:disabled="!isYearInRange(year, min, max)"
|
|
:aria-disabled="!isYearInRange(year, min, max)"
|
|
class="flex h-[45px] w-full items-center justify-center"
|
|
:class="isYearInRange(year, min, max) ? 'cursor-pointer' : 'cursor-not-allowed'"
|
|
@click="emit('select', year)"
|
|
>
|
|
<span
|
|
class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
|
|
:class="year === selectedYear
|
|
? 'bg-m-primary text-white'
|
|
: isYearInRange(year, min, max)
|
|
? 'text-black hover:bg-m-primary/10'
|
|
: 'text-m-muted/30'"
|
|
>
|
|
{{ year }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed} from 'vue'
|
|
import {isYearInRange} from '../composables/dateFormat'
|
|
|
|
defineOptions({name: 'MalioDateYearPicker'})
|
|
|
|
const props = defineProps<{
|
|
pageStart: number
|
|
selectedYear?: number
|
|
min?: string
|
|
max?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{(e: 'select', year: number): void}>()
|
|
|
|
const years = computed(() => Array.from({length: 12}, (_, i) => props.pageStart + i))
|
|
</script>
|