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

feat : surlignage plage en pilule pleine cellule + playground DateRange en largeur ERP (#MUI-33)

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Autin
2026-05-20 13:58:23 +02:00
parent 4fb23302be
commit 9a752d08ad
2 changed files with 53 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
.playground/pages/composant/date/dateRange.vue
View File

@@ -1,42 +1,57 @@
<template>
<div class="max-w-md space-y-6">
<div class="space-y-6 p-4">
<h1 class="text-2xl font-bold">MalioDateRange</h1>
<MalioDateRange
v-model="value"
label="Période"
hint="Clique deux fois pour définir une plage"
/>
<div class="flex flex-wrap items-start gap-10">
<div class="w-[480px] space-y-3">
<h2 class="font-semibold">Large (480px)</h2>
<MalioDateRange
v-model="value"
label="Période"
hint="Clique deux fois pour définir une plage"
/>
<div class="rounded border p-3 text-sm">
<p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
<p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
</div>
<div class="flex gap-2">
<button
type="button"
class="rounded bg-m-primary px-3 py-1.5 text-white"
@click="value = {start: '2026-12-20', end: '2026-12-31'}"
>
Forcer 20→31/12/2026
</button>
<button
type="button"
class="rounded border px-3 py-1.5"
@click="value = null"
>
Réinitialiser
</button>
</div>
</div>
<div class="rounded border p-3 text-sm">
<p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
<p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
<div class="w-[396px] space-y-3">
<h2 class="font-semibold">ERP (396px)</h2>
<MalioDateRange
v-model="erpValue"
label="Période"
hint="Largeur cible ERP"
/>
<div class="rounded border p-3 text-sm">
<p>Début : <code>{{ erpValue?.start ?? 'null' }}</code></p>
<p>Fin : <code>{{ erpValue?.end ?? 'null' }}</code></p>
</div>
<MalioDateRange
v-model="bounded"
label="Plage bornée"
:min="todayIso"
:max="maxIso"
hint="Entre aujourd'hui et +30 jours"
/>
</div>
</div>
<div class="flex gap-2">
<button
type="button"
class="rounded bg-m-primary px-3 py-1.5 text-white"
@click="value = {start: '2026-12-20', end: '2026-12-31'}"
>
Forcer 20→31/12/2026
</button>
<button
type="button"
class="rounded border px-3 py-1.5"
@click="value = null"
>
Réinitialiser
</button>
</div>
<MalioDateRange
v-model="bounded"
label="Plage bornée"
:min="todayIso"
:max="maxIso"
hint="Entre aujourd'hui et +30 jours"
/>
</div>
</template>
@@ -52,5 +67,6 @@ const todayIso = toIso(now)
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
const value = ref<RangeValue | null>(null)
const erpValue = ref<RangeValue | null>(null)
const bounded = ref<RangeValue | null>(null)
</script>

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

@@ -47,15 +47,15 @@
>
<span
v-if="roleOf(cell) === 'in-range'"
class="absolute inset-0 bg-m-primary-light"
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 bg-m-primary-light"
/>
<span
v-else-if="roleOf(cell) === 'start'"
class="absolute inset-y-0 left-1/2 right-0 bg-m-primary-light"
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-l-full bg-m-primary-light"
/>
<span
v-else-if="roleOf(cell) === 'end'"
class="absolute inset-y-0 left-0 right-1/2 bg-m-primary-light"
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-r-full bg-m-primary-light"
/>
<span
class="relative flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"