feat(ui) : MalioDate — markedDates (statut par jour) + event month-change (#MUI-45) (#76)
## MUI-45 — MalioDate : statut par jour (`markedDates`) + event `@month-change`
Étend la famille `date` du layer de façon **générique** (aucune logique métier dans le layer) pour marquer des jours et exposer le mois affiché. **Bloquant** pour le ticket SIRH « Heures (vue Jour) : calendrier avec jours validés en vert ».
### Changements
- **`MonthGrid.vue`** : prop `markedDates?: Record<string /* ISO yyyy-mm-dd */, 'success' | 'danger'>`. Fond tokenisé par jour (`bg-m-success/15` / `bg-m-danger/15`, par opacité — pas de nouveau token). **Précédence** : sélection (primary) > variante marquée ; le jour courant (`today`) **garde sa bordure ET reçoit le fond marqué**.
- **`CalendarField.vue`** : emit `month-change { month: 0-11, year }` à l'ouverture du popover **et** à chaque navigation de mois.
- **`Date.vue`** : expose `markedDates` (passée à `MonthGrid` via le slot) et réémet `month-change`.
> `success` et `danger` suffisent dans un premier temps (pas de `warning`).
> `month` est **0-11** (état brut de `useCalendarView`).
### Tests
- `MonthGrid.test.ts` (nouveau) : variantes success/danger, précédence sélection, today marqué (bordure + fond) / non marqué.
- `Date.test.ts` (+5) : `month-change` à l'ouverture (mois courant / mois de la valeur), à chaque nav, non ré-émis après fermeture, passthrough `markedDates`.
- Suite complète : **998/998** verts, lint clean.
### Doc / démo
- `COMPONENTS.md` (section MalioDate) + `CHANGELOG.md` (`[#MUI-45]`).
- Story `app/story/date/datePicker.story.vue` + playground `.playground/pages/composant/date/date.vue`.
### Reste à faire (hors PR)
- Publier une version du layer **> 1.4.6** incluant la famille `date` (débloque SIRH).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Reviewed-on: #76
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #76.
This commit is contained in:
@@ -82,6 +82,20 @@
|
||||
success="Enregistrée"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Statuts par jour (markedDates) + @month-change</h2>
|
||||
<MalioDate
|
||||
v-model="markedValue"
|
||||
label="Jours validés / à corriger"
|
||||
hint="Ouvre le calendrier : jours verts (success) et rouges (danger)"
|
||||
:marked-dates="markedDates"
|
||||
@month-change="onMonthChange"
|
||||
/>
|
||||
<p class="mt-2 text-sm text-m-muted">
|
||||
Mois affiché : <code>{{ shownMonth }}</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -102,4 +116,20 @@ const initialValue = ref<string | null>(todayIso)
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
const editableValue = ref<string | null>(null)
|
||||
|
||||
const ym = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`
|
||||
const markedDates = ref<Record<string, 'success' | 'danger'>>({
|
||||
[`${ym}-05`]: 'success',
|
||||
[`${ym}-06`]: 'success',
|
||||
[`${ym}-12`]: 'success',
|
||||
[`${ym}-09`]: 'danger',
|
||||
[`${ym}-20`]: 'danger',
|
||||
})
|
||||
const markedValue = ref<string | null>(null)
|
||||
const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
|
||||
const shownMonth = ref('—')
|
||||
const onMonthChange = ({month, year}: {month: number, year: number}) => {
|
||||
shownMonth.value = `${monthsLong[month]} ${year}`
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user