MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : ajustements visuels du datepicker selon maquette (#MUI-33)

Browse Source 
- nouveau token couleur m-primary-light (#EFEFFD)
- popover en largeur du champ, shadow au lieu de bordure, collé au champ
- frames semaine (35x45) et jours alignés à 45px, cercle centré, font-medium
- colonne semaine étroite + marge, numéros en black/60 (semaine courante en black)
- vue mois en toutes lettres sur 3 colonnes, blocs 45px
- label bleu et grossissement calibré du champ à l'ouverture
- header sans hover, chevrons et titre plaqués en haut

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Autin
2026-05-20 11:13:08 +02:00
parent 9479c649be
commit c96cb5112d
7 changed files with 107 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/components/malio/date/internal/MonthGrid.vue
View File

@@ -1,24 +1,29 @@
<template>
<div data-test="month-grid">
<div class="grid grid-cols-8">
<div class="flex h-8 items-center justify-center text-xs font-medium uppercase text-m-muted">
Sem
<div class="grid grid-cols-[auto_repeat(7,minmax(0,1fr))]">
<div class="mr-[12px] flex h-8 w-[35px] items-center justify-center text-[14px] font-medium opacity-[60%]">
S
</div>
<div
v-for="d in dayLabels"
:key="d"
class="flex h-8 items-center justify-center text-xs font-medium uppercase text-m-muted"
class="flex h-8 items-center justify-center text-[14px] font-medium opacity-[60%]"
>
{{ d }}
</div>
<template
v-for="week in weeks"
v-for="(week, wIndex) in weeks"
:key="week.days[0].isoDate"
>
<div
data-test="week-number"
class="flex h-10 items-center justify-center bg-m-primary/10 text-sm text-m-primary/70"
class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center bg-m-primary-light p-[10px] text-sm"
:class="[
week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60',
wIndex === 0 ? 'rounded-t-md' : '',
wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
]"
>
{{ week.weekNumber }}
</div>
@@ -31,11 +36,16 @@
:disabled="!inRange(cell.isoDate)"
:aria-label="ariaLabel(cell)"
:aria-disabled="!inRange(cell.isoDate)"
class="flex h-10 w-10 items-center justify-center text-sm transition-colors duration-100"
:class="cellClass(cell)"
class="flex h-[45px] w-full items-center justify-center"
:class="inRange(cell.isoDate) ? 'cursor-pointer' : 'cursor-not-allowed'"
@click="onSelect(cell.isoDate)"
>
{{ cell.day }}
<span
class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"
:class="cellClass(cell)"
>
{{ cell.day }}
</span>
</button>
</template>
</div>
@@ -77,12 +87,12 @@ const ariaLabel = (cell: DayCell) => {
const cellClass = (cell: DayCell) => {
const selected = props.selectedDate === cell.isoDate
if (!inRange(cell.isoDate)) return 'text-m-muted/30 cursor-not-allowed'
if (selected) return 'bg-m-primary text-white font-medium rounded-full'
const parts = ['cursor-pointer hover:bg-m-primary/10 rounded-full']
if (cell.isToday) parts.push('border border-m-primary text-m-primary font-semibold')
if (!inRange(cell.isoDate)) return 'text-m-muted/30'
if (selected) return 'bg-m-primary text-white'
const parts = ['hover:bg-m-primary/10']
if (cell.isToday) parts.push('border border-m-primary text-m-primary')
else if (cell.isCurrentMonth) parts.push('text-black')
else parts.push('text-m-muted/50')
else parts.push('opacity-[60%]')
return parts.join(' ')
}