Files
malio-layer-ui/app/components/malio/date/internal/MonthPicker.vue
T
tristan 28705c8285
Release / release (push) Successful in 1m18s
fix: date year picker (#84)
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #84
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-22 09:29:59 +00:00

49 lines
1.4 KiB
Vue

<template>
<div
data-test="month-picker"
class="grid grid-cols-3 gap-3"
>
<button
v-for="(name, index) in months"
:key="name"
type="button"
data-test="month"
:data-month="index"
:disabled="!isMonthInRange(currentYear, index, min, max)"
:aria-disabled="!isMonthInRange(currentYear, index, min, max)"
class="flex h-[45px] w-full items-center justify-center"
:class="isMonthInRange(currentYear, index, min, max) ? 'cursor-pointer' : 'cursor-not-allowed'"
@click="emit('select', index)"
>
<span
class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
:class="index === selectedMonth
? 'bg-m-primary text-white'
: isMonthInRange(currentYear, index, min, max)
? 'text-black hover:bg-m-primary/10'
: 'text-m-muted/30'"
>
{{ name }}
</span>
</button>
</div>
</template>
<script setup lang="ts">
import {isMonthInRange} from '../composables/dateFormat'
defineOptions({name: 'MalioDateMonthPicker'})
defineProps<{
currentYear: number
selectedMonth?: number
min?: string
max?: string
}>()
const emit = defineEmits<{(e: 'select', month: number): void}>()
const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
</script>