feat: Ajout des composants modal, accordeon, datetime avec selecteur d'heure à la molette (#56)
Release / release (push) Successful in 2m38s
Release / release (push) Successful in 2m38s
| 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: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: matthieu <matthieu@yuno.malio.fr> Reviewed-on: #56 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #56.
This commit is contained in:
@@ -14,7 +14,12 @@
|
||||
"Bash(mv InputSelect.story.vue selectCheckbox.story.vue select/)",
|
||||
"Bash(mv inputCheckbox.story.vue checkbox/)",
|
||||
"Bash(npx eslint *)",
|
||||
"Bash(echo \"LINT EXIT: $?\")"
|
||||
"Bash(echo \"LINT EXIT: $?\")",
|
||||
"Bash(git commit *)",
|
||||
"mcp__chrome__navigate_page",
|
||||
"mcp__chrome__take_snapshot",
|
||||
"mcp__chrome__click",
|
||||
"mcp__chrome__evaluate_script"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Multiple (filtres) — défaut</h2>
|
||||
<MalioAccordion v-model="multiple">
|
||||
<MalioAccordionItem title="Prix" value="prix">
|
||||
<p>Slider de prix ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat">
|
||||
<p>Liste de checkboxes ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Marque" value="marque">
|
||||
<p>Recherche + liste ici…</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
<p class="mt-2 text-sm text-gray-500">Ouverts : {{ multiple }}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
|
||||
<MalioAccordion v-model="single" mode="single">
|
||||
<MalioAccordionItem title="Question 1" value="q1">
|
||||
<p>Réponse 1</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Question 2" value="q2">
|
||||
<p>Réponse 2</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
<p class="mt-2 text-sm text-gray-500">Ouvert : {{ single }}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non contrôlé + defaultOpen</h2>
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Section A" value="a" :default-open="true">
|
||||
<p>Ouverte au montage</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Section B" value="b">
|
||||
<p>Fermée au montage</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Active" value="ok">
|
||||
<p>Contenu accessible</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
|
||||
<p>Inaccessible</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const multiple = ref<string[]>(['prix'])
|
||||
const single = ref('q1')
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<div class="w-[1348px]">
|
||||
<div class="flex items-center justify-between mt-[46px]">
|
||||
<div class="flex items-center gap-3">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left-bold"
|
||||
icon-size="24"
|
||||
aria-label="Précédent"
|
||||
variant="ghost"
|
||||
/>
|
||||
<h1 class="text-[32px] text-m-primary font-bold">Filtres</h1>
|
||||
</div>
|
||||
<MalioButton
|
||||
label="Filtres"
|
||||
variant="tertiary"
|
||||
icon-name="mdi:tune"
|
||||
icon-position="left"
|
||||
button-class="w-[184px] px-2 py-2 justify-start text-black gap-4"
|
||||
@click="drawerOpen = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MalioDrawer
|
||||
v-model="drawerOpen"
|
||||
side="right"
|
||||
drawer-class="max-w-[450px]"
|
||||
body-class="p-0"
|
||||
footer-class="sticky bottom-0 flex justify-between gap-4 bg-white px-5 py-7"
|
||||
>
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold uppercase">Filtres</h2>
|
||||
</template>
|
||||
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Type de camion" value="camion">
|
||||
<div class="flex flex-col gap-6">
|
||||
<MalioCheckbox v-model="semiBenne" label="Semi Benne" />
|
||||
<MalioCheckbox v-model="benne" label="Benne" />
|
||||
</div>
|
||||
</MalioAccordionItem>
|
||||
|
||||
<MalioAccordionItem title="Date à Date" value="date">
|
||||
<div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
|
||||
<span>Du</span>
|
||||
<MalioDate v-model="dateDebut"/>
|
||||
<span>Au</span>
|
||||
<MalioDate v-model="dateFin"/>
|
||||
</div>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
|
||||
<template #footer>
|
||||
<MalioButton
|
||||
label="Réinitialiser"
|
||||
variant="tertiary"
|
||||
button-class="w-[150px]"
|
||||
@click="resetFiltres"
|
||||
/>
|
||||
<MalioButton
|
||||
label="Voir les résultats"
|
||||
variant="primary"
|
||||
button-class="w-[170px]"
|
||||
/>
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const drawerOpen = ref(false)
|
||||
|
||||
const semiBenne = ref(false)
|
||||
const benne = ref(false)
|
||||
|
||||
const dateDebut = ref<string | null>(null)
|
||||
const dateFin = ref<string | null>(null)
|
||||
|
||||
function resetFiltres() {
|
||||
semiBenne.value = false
|
||||
benne.value = false
|
||||
dateDebut.value = null
|
||||
dateFin.value = null
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioButton from "../../../../app/components/malio/button/Button.vue";
|
||||
|
||||
const modalBase = ref(false)
|
||||
const modalForm = ref(false)
|
||||
const modalLong = ref(false)
|
||||
const modalNoDismiss = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Modal simple</h2>
|
||||
<MalioButton label="Ouvrir" @click="modalBase = true" />
|
||||
<MalioModal v-model="modalBase" headerClass="py-7 px-[25px]" footerClass="flex justify-center pt-8">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Marquer comme vu ?</h2>
|
||||
</template>
|
||||
<template #footer>
|
||||
<MalioButton label="Valider"/>
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
|
||||
<MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="modalForm = true" />
|
||||
<MalioModal v-model="modalForm" modal-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
<MalioInputText label="Email" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="modalForm = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="modalForm = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Contenu long (body scrollable)</h2>
|
||||
<MalioButton label="Ouvrir" variant="tertiary" @click="modalLong = true" />
|
||||
<MalioModal v-model="modalLong">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Conditions</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<p v-for="n in 20" :key="n" class="text-m-text">
|
||||
Paragraphe {{ n }} — contenu long pour forcer le scroll interne ; le header et le footer restent fixes.
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Accepter" button-class="w-full" @click="modalLong = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
|
||||
<MalioButton label="Ouvrir" variant="danger" @click="modalNoDismiss = true" />
|
||||
<MalioModal v-model="modalNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Action requise</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioTimePicker v-model="simpleValue" label="Heure" />
|
||||
<p class="mt-2 text-sm text-m-muted">Valeur : {{ simpleValue || '—' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioTimePicker v-model="initialValue" label="Heure de départ" hint="Format HH:MM" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioTimePicker v-model="disabledValue" label="Heure verrouillée" disabled />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioTimePicker v-model="errorValue" label="Heure de fermeture" error="Heure invalide" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioTimePicker v-model="successValue" label="Heure confirmée" success="Horaire enregistré" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioTimePicker v-model="noClearValue" label="Heure" :clearable="false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const initialValue = ref('08:30')
|
||||
const disabledValue = ref('14:15')
|
||||
const errorValue = ref('25:90')
|
||||
const successValue = ref('09:00')
|
||||
const noClearValue = ref('10:00')
|
||||
</script>
|
||||
@@ -34,6 +34,7 @@ export const navSections: SidebarSection[] = [
|
||||
{label: 'Semaine', to: '/composant/date/dateWeek'},
|
||||
{label: 'Date & heure', to: '/composant/date/datetime'},
|
||||
{label: 'Heure', to: '/composant/time/time'},
|
||||
{label: 'Sélecteur d\'heure', to: '/composant/time/timePicker'},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -52,7 +53,9 @@ export const navSections: SidebarSection[] = [
|
||||
items: [
|
||||
{label: 'Sidebar', to: '/composant/sidebar/sidebar'},
|
||||
{label: 'Drawer', to: '/composant/drawer/drawer'},
|
||||
{label: 'Modal', to: '/composant/modal/modal'},
|
||||
{label: 'Onglets', to: '/composant/tab/tabList'},
|
||||
{label: 'Accordéon', to: '/composant/accordion/accordion'},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -69,6 +72,7 @@ export const navSections: SidebarSection[] = [
|
||||
{label: 'Heure', to: '/composant/time/time'},
|
||||
{label: 'Sélecteur de site', to: '/composant/site/siteSelector'},
|
||||
{label: 'Formulaire client', to: '/composant/form/client'},
|
||||
{label: 'Filtres', to: '/composant/filtre/filtres'},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -33,6 +33,9 @@ Liste des évolutions de la librairie Malio layer UI
|
||||
* [#MUI-34] Revoir le système de playground
|
||||
* [#MUI-33] Développer le composant Datepicker
|
||||
* [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
|
||||
* [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
|
||||
* [#MUI-37] Création d'un composant accordéon
|
||||
* [#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire)
|
||||
|
||||
### Changed
|
||||
* [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
|
||||
|
||||
+160
-1
@@ -563,11 +563,40 @@ Sélecteur d'heure.
|
||||
|
||||
---
|
||||
|
||||
## MalioTimePicker
|
||||
|
||||
Sélecteur d'heure à **molettes style iOS** (champ + popover). Deux colonnes infinies (heures `00–23`, minutes `00–59`, pas de 1) avec une bande de sélection centrale ; la valeur centrée est sélectionnée. Défilement, clic sur une valeur (recentrage) ou flèches clavier (`role="spinbutton"`). Pour une saisie clavier directe au format texte, voir plutôt `MalioTime`.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `modelValue` | `string \| null` | `undefined` | Heure au format `"HH:MM"` (v-model) |
|
||||
| `placeholder` | `string` | `'HH:MM'` | Placeholder |
|
||||
| `required` | `boolean` | `false` | Champ requis |
|
||||
| `disabled` | `boolean` | `false` | Désactive le champ |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
|
||||
|
||||
**Events :** `update:modelValue(value: string | null)`
|
||||
|
||||
```vue
|
||||
<MalioTimePicker v-model="heure" label="Heure" />
|
||||
<MalioTimePicker v-model="heure" label="Départ" hint="Format HH:MM" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDateTime
|
||||
|
||||
Champ unique combinant **date et heure** dans un popover (grille de calendrier + sélecteur d'heure sous la grille).
|
||||
|
||||
> ⚠️ **Version intérimaire** : le sélecteur d'heure est un `<input type="time">` natif, en attendant la maquette d'un sélecteur d'heure dédié. Le bloc heure est isolé pour être remplacé sans impact sur le reste.
|
||||
> Depuis MUI-39, le réglage de l'heure utilise le sélecteur à molettes (cf. `MalioTimePicker`), qui remplace l'ancien `<input type="time">` natif intérimaire.
|
||||
|
||||
La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:MM:00"` (heure murale locale). Symfony (`DateTimeNormalizer`) parse ce format et applique son fuseau configuré côté back — pas de gestion de fuseau côté front.
|
||||
|
||||
@@ -694,6 +723,54 @@ const tabs = computed(() => [
|
||||
|
||||
---
|
||||
|
||||
## MalioAccordion
|
||||
|
||||
Accordéon compositionnel : `<MalioAccordion>` enveloppe des `<MalioAccordionItem>`. Plusieurs panneaux ouverts (`multiple`, défaut) ou un seul (`single`). Pensé pour les filtres en drawer et les FAQ.
|
||||
|
||||
### MalioAccordion
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `mode` | `'single' \| 'multiple'` | `'multiple'` | Un seul ou plusieurs panneaux ouverts |
|
||||
| `modelValue` | `string \| string[]` | `undefined` | Clés ouvertes (v-model). `string[]` en `multiple`, `string` en `single` |
|
||||
| `id` | `string` | auto | Préfixe des IDs d'accessibilité |
|
||||
| `groupClass` | `string` | `''` | Classes du conteneur (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: string | string[])`
|
||||
|
||||
### MalioAccordionItem
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `title` | `string` | — | Texte de l'en-tête |
|
||||
| `value` | `string` | auto | Clé unique de la section |
|
||||
| `defaultOpen` | `boolean` | `false` | Ouvert au montage (mode non contrôlé) |
|
||||
| `disabled` | `boolean` | `false` | En-tête non cliquable |
|
||||
| `headerClass` | `string` | `''` | Override classes en-tête (twMerge) |
|
||||
| `panelClass` | `string` | `''` | Override classes panneau (twMerge) |
|
||||
|
||||
**Slot :** par défaut = contenu du panneau.
|
||||
|
||||
```vue
|
||||
<!-- Filtres : plusieurs sections ouvertes -->
|
||||
<MalioAccordion v-model="ouverts">
|
||||
<MalioAccordionItem title="Prix" value="prix">
|
||||
<MalioInputAmount v-model="prix" />
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat">
|
||||
<MalioCheckbox v-model="cats" />
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
|
||||
<!-- FAQ : une seule section ouverte -->
|
||||
<MalioAccordion mode="single">
|
||||
<MalioAccordionItem title="Question 1" value="q1">Réponse 1</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Question 2" value="q2">Réponse 2</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSidebar
|
||||
|
||||
Barre latérale de navigation rétractable.
|
||||
@@ -779,6 +856,58 @@ Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdro
|
||||
|
||||
---
|
||||
|
||||
## MalioModal
|
||||
|
||||
Boîte de dialogue modale centrée avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs modals. Structure : header fixe, body scrollable (`max-h-[85vh]`), footer fixe.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
|
||||
| `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
|
||||
| `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
|
||||
| `modalClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-lg` (twMerge) |
|
||||
| `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
|
||||
| `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
|
||||
| `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
|
||||
| `footerClass` | `string` | `''` | Classes CSS footer fixe (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`, `close()`
|
||||
|
||||
**Slots :**
|
||||
- `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
|
||||
- `default` — contenu (zone scrollable).
|
||||
- `footer` — actions (boutons). Rendu en bas, fixe, séparé par une bordure. N'apparaît que si le slot est fourni.
|
||||
|
||||
```vue
|
||||
<MalioModal v-model="isOpen">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu de la modal</p>
|
||||
</MalioModal>
|
||||
|
||||
<!-- Largeur custom + footer d'actions -->
|
||||
<MalioModal v-model="isOpen" modal-class="max-w-lg">
|
||||
<template #header><h2>Nouveau contact</h2></template>
|
||||
<MalioInputText label="Nom" />
|
||||
<template #footer>
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="isOpen = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="isOpen = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
|
||||
<!-- Non fermable au backdrop / Échap (croix uniquement) -->
|
||||
<MalioModal v-model="isOpen" :dismissable="false" :close-on-escape="false">
|
||||
<template #header><h2>Action requise</h2></template>
|
||||
<p>Fermeture via la croix uniquement</p>
|
||||
</MalioModal>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDataTable
|
||||
|
||||
Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
|
||||
@@ -832,3 +961,33 @@ Tableau de données presentational avec pagination, filtres par slots et lignes
|
||||
v-model:per-page="perPage"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSiteSelector
|
||||
|
||||
Sélecteur de site sous forme de tuiles segmentées (`role="radiogroup"`). Chaque site occupe une tuile de largeur égale ; la tuile active s'affiche pleine opacité dans sa couleur (`site.color`), les autres sont atténuées. Pattern contrôlé (`v-model`) ou non contrôlé (premier site sélectionné par défaut).
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `sites` | `{ id: string, name: string, color: string }[]` | **requis** | Liste des sites (la `color` colore la tuile active) |
|
||||
| `modelValue` | `string` | `undefined` | `id` du site sélectionné (v-model) |
|
||||
| `id` | `string` | auto | Identifiant HTML du conteneur |
|
||||
| `groupClass` | `string` | `''` | Classes CSS du conteneur (twMerge) |
|
||||
| `tileClass` | `string` | `''` | Classes CSS de chaque tuile (twMerge) |
|
||||
| `labelClass` | `string` | `''` | Classes CSS du label de tuile (twMerge) |
|
||||
|
||||
**Events :**
|
||||
- `update:modelValue(value: string)` — `id` du site sélectionné (v-model)
|
||||
- `change(site: Site)` — émis avec l'objet site complet sélectionné
|
||||
|
||||
```vue
|
||||
<MalioSiteSelector
|
||||
v-model="siteId"
|
||||
:sites="[
|
||||
{ id: 'paris', name: 'Paris', color: '#2563eb' },
|
||||
{ id: 'lyon', name: 'Lyon', color: '#16a34a' },
|
||||
]"
|
||||
@change="onSiteChange"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {nextTick} from 'vue'
|
||||
import Accordion from './Accordion.vue'
|
||||
import AccordionItem from './AccordionItem.vue'
|
||||
|
||||
const TWO_ITEMS = `
|
||||
<MalioAccordionItem title="Prix" value="prix"><p>Contenu prix</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat"><p>Contenu catégorie</p></MalioAccordionItem>
|
||||
`
|
||||
|
||||
function mountAccordion(props: Record<string, unknown> = {}, slot: string = TWO_ITEMS, attachTo?: HTMLElement) {
|
||||
return mount(Accordion, {
|
||||
props,
|
||||
slots: {default: slot},
|
||||
attachTo,
|
||||
global: {components: {MalioAccordionItem: AccordionItem}},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioAccordion — rendu & mode multiple', () => {
|
||||
it('renders each item header with its title', () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers).toHaveLength(2)
|
||||
expect(headers[0].text()).toContain('Prix')
|
||||
expect(headers[1].text()).toContain('Catégorie')
|
||||
})
|
||||
|
||||
it('renders the slot content of each panel', () => {
|
||||
const wrapper = mountAccordion()
|
||||
expect(wrapper.html()).toContain('Contenu prix')
|
||||
expect(wrapper.html()).toContain('Contenu catégorie')
|
||||
})
|
||||
|
||||
it('all panels are collapsed by default', () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('false')
|
||||
const regions = wrapper.findAll('[role="region"]')
|
||||
expect(regions[0].classes()).toContain('grid-rows-[0fr]')
|
||||
})
|
||||
|
||||
it('opens a panel on header click (multiple mode is default)', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('true')
|
||||
const regions = wrapper.findAll('[role="region"]')
|
||||
expect(regions[0].classes()).toContain('grid-rows-[1fr]')
|
||||
})
|
||||
|
||||
it('keeps multiple panels open simultaneously in multiple mode', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
await headers[1].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('true')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('closes an open panel when its header is clicked again', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
await headers[0].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
})
|
||||
|
||||
it('wires aria-controls / aria-labelledby / role=region correctly', () => {
|
||||
const wrapper = mountAccordion({id: 'acc'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
const regions = wrapper.findAll('[role="region"]')
|
||||
expect(headers[0].attributes('id')).toBe('acc-header-prix')
|
||||
expect(headers[0].attributes('aria-controls')).toBe('acc-panel-prix')
|
||||
expect(regions[0].attributes('id')).toBe('acc-panel-prix')
|
||||
expect(regions[0].attributes('aria-labelledby')).toBe('acc-header-prix')
|
||||
})
|
||||
|
||||
it('emits update:modelValue with an array in multiple mode', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['prix']])
|
||||
await nextTick()
|
||||
})
|
||||
})
|
||||
|
||||
describe('MalioAccordion — mode single & contrôlé', () => {
|
||||
it('opening a panel closes the others in single mode', async () => {
|
||||
const wrapper = mountAccordion({mode: 'single'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
await headers[1].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('emits a string in single mode', async () => {
|
||||
const wrapper = mountAccordion({mode: 'single'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[1].trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['cat'])
|
||||
})
|
||||
|
||||
it('emits empty string when closing the open panel in single mode', async () => {
|
||||
const wrapper = mountAccordion({mode: 'single', modelValue: 'prix'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
|
||||
})
|
||||
|
||||
it('respects modelValue array in controlled multiple mode', () => {
|
||||
const wrapper = mountAccordion({modelValue: ['cat']})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('respects modelValue string in controlled single mode', () => {
|
||||
const wrapper = mountAccordion({mode: 'single', modelValue: 'prix'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('true')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('false')
|
||||
})
|
||||
|
||||
it('does not mutate local state in controlled mode (emits only)', async () => {
|
||||
const wrapper = mountAccordion({modelValue: []})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
// état piloté par le parent : sans mise à jour de la prop, reste fermé
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['prix']])
|
||||
})
|
||||
})
|
||||
|
||||
describe('MalioAccordion — defaultOpen, disabled & clavier', () => {
|
||||
const WITH_DEFAULT_OPEN = `
|
||||
<MalioAccordionItem title="Prix" value="prix"><p>P</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat" :default-open="true"><p>C</p></MalioAccordionItem>
|
||||
`
|
||||
const WITH_DISABLED = `
|
||||
<MalioAccordionItem title="Prix" value="prix"><p>P</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat" :disabled="true"><p>C</p></MalioAccordionItem>
|
||||
`
|
||||
|
||||
it('opens defaultOpen items initially in uncontrolled mode', async () => {
|
||||
const wrapper = mountAccordion({}, WITH_DEFAULT_OPEN)
|
||||
await nextTick()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('sets disabled and aria-disabled on a disabled item', () => {
|
||||
const wrapper = mountAccordion({}, WITH_DISABLED)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[1].attributes('disabled')).toBeDefined()
|
||||
expect(headers[1].attributes('aria-disabled')).toBe('true')
|
||||
})
|
||||
|
||||
it('does not toggle a disabled item on click', async () => {
|
||||
const wrapper = mountAccordion({}, WITH_DISABLED)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[1].trigger('click')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('false')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('moves focus to the next header on ArrowDown', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const wrapper = mountAccordion({}, TWO_ITEMS, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[0].element as HTMLElement).focus()
|
||||
await headers[0].trigger('keydown', {key: 'ArrowDown'})
|
||||
expect(document.activeElement).toBe(headers[1].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('wraps focus to the first header on ArrowDown from the last', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const wrapper = mountAccordion({}, TWO_ITEMS, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[1].element as HTMLElement).focus()
|
||||
await headers[1].trigger('keydown', {key: 'ArrowDown'})
|
||||
expect(document.activeElement).toBe(headers[0].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('moves focus to the previous header on ArrowUp', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const wrapper = mountAccordion({}, TWO_ITEMS, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[1].element as HTMLElement).focus()
|
||||
await headers[1].trigger('keydown', {key: 'ArrowUp'})
|
||||
expect(document.activeElement).toBe(headers[0].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('skips disabled headers during keyboard navigation', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const slot = `
|
||||
<MalioAccordionItem title="A" value="a"><p>A</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="B" value="b" :disabled="true"><p>B</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="C" value="c"><p>C</p></MalioAccordionItem>
|
||||
`
|
||||
const wrapper = mountAccordion({}, slot, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[0].element as HTMLElement).focus()
|
||||
await headers[0].trigger('keydown', {key: 'ArrowDown'})
|
||||
// saute le header désactivé (B) pour aller directement à C
|
||||
expect(document.activeElement).toBe(headers[2].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
})
|
||||
|
||||
describe('MalioAccordion — overflow du panneau (popovers enfants)', () => {
|
||||
const ONE = `<MalioAccordionItem title="A" value="a"><p>contenu</p></MalioAccordionItem>`
|
||||
const ONE_OPEN = `<MalioAccordionItem title="A" value="a" :default-open="true"><p>contenu</p></MalioAccordionItem>`
|
||||
|
||||
it('clips the panel (overflow-hidden) while collapsed', () => {
|
||||
const wrapper = mountAccordion({}, ONE)
|
||||
const inner = wrapper.find('[role="region"] > div')
|
||||
expect(inner.classes()).toContain('overflow-hidden')
|
||||
expect(inner.classes()).not.toContain('overflow-visible')
|
||||
})
|
||||
|
||||
it('lets the panel overflow once open at mount (defaultOpen)', async () => {
|
||||
const wrapper = mountAccordion({}, ONE_OPEN)
|
||||
await nextTick()
|
||||
expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-visible')
|
||||
})
|
||||
|
||||
it('switches to overflow-visible after the open transition ends', async () => {
|
||||
const wrapper = mountAccordion({}, ONE)
|
||||
await wrapper.find('button[aria-expanded]').trigger('click')
|
||||
await wrapper.find('[role="region"]').trigger('transitionend', {propertyName: 'grid-template-rows'})
|
||||
expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-visible')
|
||||
})
|
||||
|
||||
it('re-clips (overflow-hidden) as soon as it closes', async () => {
|
||||
const wrapper = mountAccordion({}, ONE_OPEN)
|
||||
await nextTick()
|
||||
await wrapper.find('button[aria-expanded]').trigger('click')
|
||||
expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-hidden')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div v-bind="$attrs" :class="rootClass">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, provide, ref, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import {accordionContextKey, type AccordionItemRegistration} from './context'
|
||||
|
||||
defineOptions({name: 'MalioAccordion', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
mode?: 'single' | 'multiple'
|
||||
modelValue?: string | string[]
|
||||
id?: string
|
||||
groupClass?: string
|
||||
}>(), {
|
||||
mode: 'multiple',
|
||||
modelValue: undefined,
|
||||
id: '',
|
||||
groupClass: '',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string | string[]): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const baseId = computed(() => props.id || `malio-accordion-${generatedId}`)
|
||||
const mode = computed(() => props.mode)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localOpen = ref<string[]>([])
|
||||
|
||||
const items = ref<AccordionItemRegistration[]>([])
|
||||
|
||||
const openKeys = computed<string[]>(() => {
|
||||
if (isControlled.value) {
|
||||
const v = props.modelValue
|
||||
if (props.mode === 'single') return v ? [v as string] : []
|
||||
if (Array.isArray(v)) return v
|
||||
return v ? [v as string] : []
|
||||
}
|
||||
return localOpen.value
|
||||
})
|
||||
|
||||
function isOpen(value: string) {
|
||||
return openKeys.value.includes(value)
|
||||
}
|
||||
|
||||
function toggle(value: string) {
|
||||
const current = openKeys.value
|
||||
let next: string[]
|
||||
if (props.mode === 'single') {
|
||||
next = current.includes(value) ? [] : [value]
|
||||
} else {
|
||||
next = current.includes(value)
|
||||
? current.filter(v => v !== value)
|
||||
: [...current, value]
|
||||
}
|
||||
if (!isControlled.value) {
|
||||
localOpen.value = next
|
||||
}
|
||||
emit('update:modelValue', props.mode === 'single' ? (next[0] ?? '') : next)
|
||||
}
|
||||
|
||||
function register(item: AccordionItemRegistration, defaultOpen: boolean) {
|
||||
items.value.push(item)
|
||||
if (defaultOpen && !isControlled.value) {
|
||||
if (props.mode === 'single') {
|
||||
if (localOpen.value.length === 0) localOpen.value = [item.value]
|
||||
} else if (!localOpen.value.includes(item.value)) {
|
||||
localOpen.value.push(item.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function unregister(value: string) {
|
||||
items.value = items.value.filter(i => i.value !== value)
|
||||
}
|
||||
|
||||
// `items` est ordonné par ordre de montage (= ordre du DOM pour des sections
|
||||
// statiques/ajoutées en fin). Si un consommateur réordonne dynamiquement les
|
||||
// items, cet ordre peut diverger de l'ordre visuel ; trier par position DOM
|
||||
// serait alors nécessaire (hors périmètre v1).
|
||||
function focusSibling(value: string, offset: 1 | -1) {
|
||||
const enabled = items.value.filter(i => !i.isDisabled())
|
||||
const idx = enabled.findIndex(i => i.value === value)
|
||||
if (idx === -1) return
|
||||
const next = enabled[(idx + offset + enabled.length) % enabled.length]
|
||||
next?.getHeaderEl()?.focus()
|
||||
}
|
||||
|
||||
const rootClass = computed(() =>
|
||||
twMerge('divide-y divide-black border-y border-black', props.groupClass),
|
||||
)
|
||||
|
||||
provide(accordionContextKey, {
|
||||
mode,
|
||||
baseId,
|
||||
isOpen,
|
||||
toggle,
|
||||
register,
|
||||
unregister,
|
||||
focusSibling,
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import Accordion from './Accordion.vue'
|
||||
import AccordionItem from './AccordionItem.vue'
|
||||
|
||||
function mountInAccordion(slot: string, accordionProps: Record<string, unknown> = {}) {
|
||||
return mount(Accordion, {
|
||||
props: accordionProps,
|
||||
slots: {default: slot},
|
||||
global: {components: {MalioAccordionItem: AccordionItem}},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioAccordionItem', () => {
|
||||
it('throws when used outside MalioAccordion', () => {
|
||||
const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
||||
expect(() => mount(AccordionItem, {props: {title: 'Solo'}})).toThrow(
|
||||
/à l'intérieur de MalioAccordion/,
|
||||
)
|
||||
spy.mockRestore()
|
||||
})
|
||||
|
||||
it('generates an auto id-based value and still toggles when value prop is omitted', async () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="Sans value"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
const header = wrapper.find('button[aria-expanded]')
|
||||
expect(header.attributes('aria-controls')).toMatch(/-panel-malio-accordion-item-/)
|
||||
await header.trigger('click')
|
||||
expect(header.attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('applies headerClass and panelClass overrides via twMerge', () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="T" value="t" header-class="bg-red-500" panel-class="text-lg"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
const header = wrapper.find('button[aria-expanded]')
|
||||
expect(header.classes()).toContain('bg-red-500')
|
||||
expect(wrapper.find('[role="region"]').html()).toContain('text-lg')
|
||||
})
|
||||
|
||||
it('renders a rotating chevron icon', () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="T" value="t"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
expect(wrapper.find('button[aria-expanded] svg').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<button
|
||||
:id="headerId"
|
||||
ref="headerRef"
|
||||
type="button"
|
||||
:class="headerClasses"
|
||||
:aria-expanded="open"
|
||||
:aria-controls="panelId"
|
||||
:disabled="disabled"
|
||||
:aria-disabled="disabled || undefined"
|
||||
@click="onToggle"
|
||||
@keydown.down.prevent="ctx.focusSibling(value, 1)"
|
||||
@keydown.up.prevent="ctx.focusSibling(value, -1)"
|
||||
>
|
||||
<span>{{ title }}</span>
|
||||
<IconifyIcon
|
||||
icon="mdi:chevron-down"
|
||||
:width="24"
|
||||
class="shrink-0 transition-transform duration-200"
|
||||
:class="open ? 'rotate-180' : ''"
|
||||
/>
|
||||
</button>
|
||||
</h3>
|
||||
<div
|
||||
:id="panelId"
|
||||
role="region"
|
||||
:aria-labelledby="headerId"
|
||||
class="grid transition-[grid-template-rows] duration-200 ease-out"
|
||||
:class="open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
|
||||
@transitionend="onPanelTransitionEnd"
|
||||
>
|
||||
<div
|
||||
:class="overflowVisible ? 'overflow-visible' : 'overflow-hidden'"
|
||||
:inert="!open || undefined"
|
||||
>
|
||||
<div :class="panelInnerClass">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, inject, onBeforeUnmount, onMounted, ref, useId, watch} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import {accordionContextKey} from './context'
|
||||
|
||||
defineOptions({name: 'MalioAccordionItem', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title: string
|
||||
value?: string
|
||||
defaultOpen?: boolean
|
||||
disabled?: boolean
|
||||
headerClass?: string
|
||||
panelClass?: string
|
||||
}>(), {
|
||||
value: '',
|
||||
defaultOpen: false,
|
||||
disabled: false,
|
||||
headerClass: '',
|
||||
panelClass: '',
|
||||
})
|
||||
|
||||
const ctx = inject(accordionContextKey)
|
||||
if (!ctx) {
|
||||
throw new Error('MalioAccordionItem doit être utilisé à l\'intérieur de MalioAccordion')
|
||||
}
|
||||
|
||||
const generatedId = useId()
|
||||
const value = computed(() => props.value || `malio-accordion-item-${generatedId}`)
|
||||
const headerRef = ref<HTMLButtonElement | null>(null)
|
||||
const headerId = computed(() => `${ctx.baseId.value}-header-${value.value}`)
|
||||
const panelId = computed(() => `${ctx.baseId.value}-panel-${value.value}`)
|
||||
const open = computed(() => ctx.isOpen(value.value))
|
||||
|
||||
// Le panneau garde `overflow-hidden` pendant l'animation (clipping requis par
|
||||
// la transition grid-template-rows), puis passe en `overflow-visible` une fois
|
||||
// complètement ouvert pour qu'un popover enfant (datepicker, select…) ne soit
|
||||
// pas rogné. On re-clippe dès le début de la fermeture.
|
||||
const overflowVisible = ref(false)
|
||||
|
||||
watch(open, (isOpen) => {
|
||||
if (!isOpen) overflowVisible.value = false
|
||||
})
|
||||
|
||||
function onPanelTransitionEnd(e: TransitionEvent) {
|
||||
if (e.propertyName === 'grid-template-rows' && open.value) {
|
||||
overflowVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function onToggle() {
|
||||
if (props.disabled) return
|
||||
ctx.toggle(value.value)
|
||||
}
|
||||
|
||||
const headerClasses = computed(() =>
|
||||
twMerge(
|
||||
'flex w-full items-center justify-between gap-4 px-7 pt-[28px] pb-[20px] text-left font-[600] text-[20px] transition-colors',
|
||||
props.disabled ? 'cursor-not-allowed text-m-muted' : 'cursor-pointer hover:bg-m-surface',
|
||||
props.headerClass,
|
||||
),
|
||||
)
|
||||
|
||||
const panelInnerClass = computed(() => twMerge('px-7 pt-[10px] pb-[20px]', props.panelClass))
|
||||
|
||||
onMounted(() => {
|
||||
ctx.register(
|
||||
{
|
||||
value: value.value,
|
||||
getHeaderEl: () => headerRef.value,
|
||||
isDisabled: () => props.disabled,
|
||||
},
|
||||
props.defaultOpen,
|
||||
)
|
||||
// Ouvert au montage (defaultOpen / contrôlé) : pas d'animation, overflow visible direct.
|
||||
if (open.value) overflowVisible.value = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => ctx.unregister(value.value))
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
import type {ComputedRef, InjectionKey} from 'vue'
|
||||
|
||||
export interface AccordionItemRegistration {
|
||||
value: string
|
||||
getHeaderEl: () => HTMLElement | null
|
||||
isDisabled: () => boolean
|
||||
}
|
||||
|
||||
export interface AccordionContext {
|
||||
mode: ComputedRef<'single' | 'multiple'>
|
||||
baseId: ComputedRef<string>
|
||||
isOpen: (value: string) => boolean
|
||||
toggle: (value: string) => void
|
||||
register: (item: AccordionItemRegistration, defaultOpen: boolean) => void
|
||||
unregister: (value: string) => void
|
||||
focusSibling: (value: string, offset: 1 | -1) => void
|
||||
}
|
||||
|
||||
export const accordionContextKey: InjectionKey<AccordionContext> = Symbol('MalioAccordion')
|
||||
@@ -2,6 +2,7 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateTime_ from './DateTime.vue'
|
||||
import MalioTimePicker from '../time/TimePicker.vue'
|
||||
|
||||
type DateTimeProps = {
|
||||
id?: string
|
||||
@@ -30,7 +31,7 @@ const mountDateTime = (props: DateTimeProps = {}) =>
|
||||
describe('MalioDateTime', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
vi.setSystemTime(new Date(2026, 4, 19, 9, 5, 0)) // 19 mai 2026, 09:05
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
@@ -49,28 +50,30 @@ describe('MalioDateTime', () => {
|
||||
})
|
||||
|
||||
describe('popover', () => {
|
||||
it('ouvre la grille et l\'input heure au clic', async () => {
|
||||
it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="time-input"]').exists()).toBe(true)
|
||||
expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('sélection', () => {
|
||||
it('émet le jour à 00:00 et garde le popover ouvert', async () => {
|
||||
it('émet le jour à l\'heure actuelle (si aucune heure choisie) et garde le popover ouvert', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T00:00:00'])
|
||||
// heure système figée à 09:05
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:05:00'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('applique l\'heure réglée avant le clic du jour', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="time-input"]').setValue('09:15')
|
||||
// pas d'émission tant qu'aucun jour n'est choisi
|
||||
wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
|
||||
@@ -79,15 +82,15 @@ describe('MalioDateTime', () => {
|
||||
it('met à jour l\'heure quand une date est déjà choisie', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="time-input"]').setValue('08:45')
|
||||
wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
|
||||
})
|
||||
|
||||
it('initialise l\'input heure depuis la valeur', async () => {
|
||||
it('initialise le champ heure depuis la valeur', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const time = wrapper.get('[data-test="time-input"]').element as HTMLInputElement
|
||||
expect(time.value).toBe('14:30')
|
||||
expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -28,25 +28,25 @@
|
||||
:max="max?.slice(0, 10)"
|
||||
@select="onSelectDay"
|
||||
/>
|
||||
<!-- Bloc heure intérimaire : input natif, isolé pour remplacement futur par le sélecteur dédié. -->
|
||||
<div class="mt-[26px] flex-col items-center gap-2">
|
||||
<input
|
||||
:id="timeInputId"
|
||||
data-test="time-input"
|
||||
type="time"
|
||||
:value="timeValue"
|
||||
class="w-full border border-m-muted bg-white px-2 py-1 text-base outline-none focus:border-m-primary"
|
||||
@input="onTimeInput"
|
||||
>
|
||||
<div class="mt-4">
|
||||
<MalioTimePicker
|
||||
:model-value="timeValue || null"
|
||||
label="Heure"
|
||||
:clearable="false"
|
||||
static-popover
|
||||
@update:model-value="onTimeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useId, watch} from 'vue'
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import MalioTimePicker from '../time/TimePicker.vue'
|
||||
import {formatTime} from '../time/composables/timeFormat'
|
||||
import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
|
||||
|
||||
defineOptions({name: 'MalioDateTime', inheritAttrs: false})
|
||||
@@ -94,9 +94,6 @@ const props = withDefaults(
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const timeInputId = computed(() => `${props.id || `malio-datetime-${generatedId}`}-time`)
|
||||
|
||||
// pendingTime : heure réglée avant qu'un jour ne soit choisi (sinon on ne peut pas émettre).
|
||||
const pendingTime = ref('')
|
||||
|
||||
@@ -106,12 +103,14 @@ const displayValue = computed(() => formatIsoDateTimeToDisplay(props.modelValue
|
||||
const timeValue = computed(() => parts.value.time || pendingTime.value)
|
||||
|
||||
function onSelectDay(iso: string) {
|
||||
const time = parts.value.time || pendingTime.value || '00:00'
|
||||
// Si aucune heure n'a été choisie, on prend l'heure actuelle (pas 00:00).
|
||||
// (heure courante au moment du clic)
|
||||
const now = new Date()
|
||||
const time = parts.value.time || pendingTime.value || formatTime(now.getHours(), now.getMinutes())
|
||||
emit('update:modelValue', composeDateTime(iso, time))
|
||||
}
|
||||
|
||||
function onTimeInput(e: Event) {
|
||||
const value = (e.target as HTMLInputElement).value
|
||||
function onTimeChange(value: string | null) {
|
||||
if (!value) return
|
||||
if (datePart.value) {
|
||||
emit('update:modelValue', composeDateTime(datePart.value, value))
|
||||
|
||||
@@ -0,0 +1,320 @@
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
import { enableAutoUnmount, mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import Modal from './Modal.vue'
|
||||
|
||||
type ModalProps = {
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
modalClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}
|
||||
|
||||
const ModalForTest = Modal as DefineComponent<ModalProps>
|
||||
|
||||
function mountComponent(props: ModalProps = {}, slots?: Record<string, string>) {
|
||||
return mount(ModalForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioModal', () => {
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
afterEach(() => {
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
|
||||
it('does not render when modelValue is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders the panel when modelValue is true', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('centers the modal (items-center justify-center)', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const root = wrapper.find('.fixed')
|
||||
expect(root.classes()).toContain('items-center')
|
||||
expect(root.classes()).toContain('justify-center')
|
||||
})
|
||||
|
||||
it('renders default slot in the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ default: '<p data-test="content">Contenu</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
|
||||
})
|
||||
|
||||
it('works in uncontrolled mode (defaults closed)', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, id: 'my-modal' })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toBe('my-modal')
|
||||
})
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-modal-/)
|
||||
})
|
||||
|
||||
it('has role="dialog" and aria-modal on the panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('role')).toBe('dialog')
|
||||
expect(panel.attributes('aria-modal')).toBe('true')
|
||||
})
|
||||
|
||||
it('applies modalClass to the panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, modalClass: 'max-w-2xl' })
|
||||
expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
|
||||
})
|
||||
|
||||
it('renders the #header slot inside the header bar', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ header: '<h2 data-test="title">Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
|
||||
})
|
||||
|
||||
it('renders the header bar when showClose is true even without #header', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the header bar when no #header and showClose is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, showClose: false })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows the close button by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides the close button when showClose is false', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, showClose: false },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button renders mdi:cancel-bold icon', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const icon = wrapper.findComponent(IconifyIcon)
|
||||
expect(icon.props('icon')).toBe('mdi:cancel-bold')
|
||||
})
|
||||
|
||||
it('close button has aria-label "Fermer"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on close button click', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="close-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('sets aria-labelledby to the header id when #header is provided', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, id: 'test-modal' },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-labelledby')).toBe('test-modal-header')
|
||||
expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-modal-header')
|
||||
})
|
||||
|
||||
it('sets aria-label from ariaLabel when no #header is provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Boîte de dialogue' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-label')).toBe('Boîte de dialogue')
|
||||
expect(panel.attributes('aria-labelledby')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies headerClass to the header bar', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
|
||||
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
|
||||
})
|
||||
|
||||
it('renders the #footer slot in a footer pinned below the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ footer: '<button data-test="save">Enregistrer</button>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the footer when no #footer slot', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('applies bodyClass to the body', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
|
||||
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
|
||||
})
|
||||
|
||||
it('applies footerClass to the footer', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, footerClass: 'justify-end' },
|
||||
{ footer: '<span>pied</span>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on backdrop click when dismissable is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, dismissable: false })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies overlayClass to the backdrop', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
|
||||
expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
|
||||
})
|
||||
|
||||
it('closes on Escape key when closeOnEscape is true', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on Escape when closeOnEscape is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('locks body scroll when opened and restores it when closed', async () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
|
||||
it('moves focus into the panel when opened', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: false, showClose: false },
|
||||
slots: { default: '<button data-test="first">OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="first"]').element
|
||||
expect(document.activeElement).toBe(first)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('restores focus to the trigger when closed', async () => {
|
||||
const trigger = document.createElement('button')
|
||||
document.body.appendChild(trigger)
|
||||
trigger.focus()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
slots: { default: '<button>OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
wrapper.unmount()
|
||||
trigger.remove()
|
||||
})
|
||||
|
||||
it('wraps focus to the first element when Tab is pressed on the last element', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
|
||||
last.focus()
|
||||
expect(document.activeElement).toBe(last)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
|
||||
first.focus()
|
||||
expect(document.activeElement).toBe(first)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('does not release body scroll-lock when one stacked modal closes while another is still open', async () => {
|
||||
const wrapperA = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
const wrapperB = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
|
||||
await wrapperA.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperB.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperB.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperA.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
name="modal"
|
||||
appear
|
||||
@after-leave="isRendered = false"
|
||||
>
|
||||
<div
|
||||
v-if="isRendered && isOpen"
|
||||
:id="componentId"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
:class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
|
||||
data-test="backdrop"
|
||||
@click="onBackdropClick"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref="panelRef"
|
||||
:class="twMerge(
|
||||
'relative z-50 flex max-h-[85vh] w-full max-w-md flex-col rounded-malio bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]',
|
||||
modalClass,
|
||||
)"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="hasHeader ? headerId : undefined"
|
||||
:aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
|
||||
tabindex="-1"
|
||||
data-test="panel"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<div
|
||||
v-if="hasHeader || showClose"
|
||||
:class="twMerge('flex shrink-0 items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
|
||||
data-test="header"
|
||||
>
|
||||
<div
|
||||
:id="headerId"
|
||||
class="min-w-0 flex-1"
|
||||
data-test="header-content"
|
||||
>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<button
|
||||
v-if="showClose"
|
||||
type="button"
|
||||
aria-label="Fermer"
|
||||
class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
|
||||
data-test="close-button"
|
||||
@click="close"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:cancel-bold"
|
||||
:width="16"
|
||||
:height="16"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
:class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
|
||||
data-test="body"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="$slots.footer"
|
||||
:class="twMerge('flex shrink-0 items-center gap-3 px-5 py-4', footerClass)"
|
||||
data-test="footer"
|
||||
>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
useAttrs,
|
||||
useId,
|
||||
useSlots,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
defineOptions({ name: 'MalioModal', inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
modalClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
showClose: true,
|
||||
dismissable: true,
|
||||
closeOnEscape: true,
|
||||
ariaLabel: '',
|
||||
modalClass: '',
|
||||
overlayClass: '',
|
||||
headerClass: '',
|
||||
bodyClass: '',
|
||||
footerClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const componentId = computed(() => props.id || `malio-modal-${generatedId}`)
|
||||
|
||||
const slots = useSlots()
|
||||
const headerId = computed(() => `${componentId.value}-header`)
|
||||
const hasHeader = computed(() => !!slots.header)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(false)
|
||||
const isOpen = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
const isRendered = ref(isOpen.value)
|
||||
|
||||
const panelRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let previouslyFocused: HTMLElement | null = null
|
||||
// Per-instance flag: true while this modal holds a scroll-lock count slot.
|
||||
let lockedByThisInstance = false
|
||||
|
||||
function getFocusable(container: HTMLElement): HTMLElement[] {
|
||||
return Array.from(
|
||||
container.querySelectorAll<HTMLElement>(
|
||||
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
|
||||
),
|
||||
).filter((el) => el.tabIndex !== -1)
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
|
||||
if (!lockedByThisInstance) {
|
||||
lockedByThisInstance = true
|
||||
openModalCount++
|
||||
if (openModalCount === 1) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
;(focusable[0] ?? panel).focus()
|
||||
})
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openModalCount = Math.max(0, openModalCount - 1)
|
||||
if (openModalCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
previouslyFocused?.focus?.()
|
||||
previouslyFocused = null
|
||||
}
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) {
|
||||
isRendered.value = true
|
||||
onOpen()
|
||||
}
|
||||
else {
|
||||
onClose()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (isOpen.value) onOpen()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// If this instance is still holding a scroll-lock slot, release it.
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openModalCount = Math.max(0, openModalCount - 1)
|
||||
if (openModalCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function onBackdropClick() {
|
||||
if (props.dismissable) close()
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && props.closeOnEscape) {
|
||||
e.stopPropagation()
|
||||
close()
|
||||
return
|
||||
}
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
if (focusable.length === 0) {
|
||||
e.preventDefault()
|
||||
panel.focus()
|
||||
return
|
||||
}
|
||||
const first = focusable[0]!
|
||||
const last = focusable[focusable.length - 1]!
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault()
|
||||
last.focus()
|
||||
}
|
||||
else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault()
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!isControlled.value) localValue.value = false
|
||||
emit('update:modelValue', false)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// Shared across all MalioModal instances: only the last open modal releases the body scroll-lock.
|
||||
let openModalCount = 0
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-active > div:last-child,
|
||||
.modal-leave-active > div:last-child {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from > div:last-child,
|
||||
.modal-leave-to > div:last-child {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import TimePicker from './TimePicker.vue'
|
||||
|
||||
type TimePickerProps = {
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}
|
||||
|
||||
const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
|
||||
const mountPicker = (props: TimePickerProps = {}) =>
|
||||
mount(TimePickerForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioTimePicker', () => {
|
||||
it('affiche le label et l\'icône horloge', () => {
|
||||
const wrapper = mountPicker({label: 'Heure'})
|
||||
expect(wrapper.get('label').text()).toBe('Heure')
|
||||
expect(wrapper.find('[data-test="clock-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('affiche la valeur HH:MM dans le champ', () => {
|
||||
const wrapper = mountPicker({modelValue: '14:30'})
|
||||
const input = wrapper.get('[data-test="time-field"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('14:30')
|
||||
})
|
||||
|
||||
it('ouvre le popover à molettes au clic', async () => {
|
||||
const wrapper = mountPicker()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n\'ouvre pas le popover si disabled', async () => {
|
||||
const wrapper = mountPicker({disabled: true})
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('émet la valeur réglée depuis les molettes', async () => {
|
||||
const wrapper = mountPicker({modelValue: '09:30'})
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
wrapper.findComponent({name: 'MalioTimeWheels'}).vm.$emit('update:modelValue', '10:30')
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10:30'])
|
||||
})
|
||||
|
||||
it('émet null au clic sur la croix', async () => {
|
||||
const wrapper = mountPicker({modelValue: '14:30'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('positionne aria-invalid et describedby sur erreur', () => {
|
||||
const wrapper = mountPicker({error: 'Heure requise'})
|
||||
const input = wrapper.get('[data-test="time-field"]')
|
||||
expect(input.attributes('aria-invalid')).toBe('true')
|
||||
expect(input.attributes('aria-describedby')).toBeTruthy()
|
||||
expect(wrapper.text()).toContain('Heure requise')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div ref="root">
|
||||
<div :class="mergedGroupClass">
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
data-test="time-field"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="displayValue"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="dialog"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@click="onFieldClick"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<button
|
||||
v-if="showClear"
|
||||
type="button"
|
||||
data-test="clear"
|
||||
class="text-m-muted hover:text-m-primary"
|
||||
aria-label="Effacer l'heure"
|
||||
@click.stop="onClear"
|
||||
>
|
||||
<Icon icon="mdi:close" :width="16" :height="16" />
|
||||
</button>
|
||||
<Icon
|
||||
data-test="clock-icon"
|
||||
icon="mdi:clock-outline"
|
||||
:width="24"
|
||||
:height="24"
|
||||
:class="iconStateClass"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mode overlay (par défaut) : popover absolu au-dessus du contenu suivant. -->
|
||||
<div
|
||||
v-if="isOpen && !staticPopover"
|
||||
data-test="popover"
|
||||
role="dialog"
|
||||
class="absolute left-0 right-0 top-full z-20 box-border w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<TimeWheels
|
||||
:model-value="wheelsValue"
|
||||
@update:model-value="onWheelChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode statique : molette en flux (hors du groupe à hauteur fixe) → le
|
||||
conteneur parent (ex. popover du DateTime) grandit pour l'englober. -->
|
||||
<div
|
||||
v-if="isOpen && staticPopover"
|
||||
data-test="popover"
|
||||
role="dialog"
|
||||
class="relative mt-4 w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<TimeWheels
|
||||
:model-value="wheelsValue"
|
||||
@update:model-value="onWheelChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
|
||||
import {Icon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import TimeWheels from './internal/TimeWheels.vue'
|
||||
|
||||
defineOptions({name: 'MalioTimePicker', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
staticPopover?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'HH:MM',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
clearable: true,
|
||||
staticPopover: false,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const isOpen = ref(false)
|
||||
const localValue = ref<string | null>(null)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? props.modelValue : localValue.value))
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-time-picker-${generatedId}`)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const displayValue = computed(() => currentValue.value ?? '')
|
||||
const isFilled = computed(() => displayValue.value.length > 0)
|
||||
const wheelsValue = computed(() => currentValue.value || '00:00')
|
||||
const showClear = computed(() =>
|
||||
props.clearable && isFilled.value && !props.disabled && !props.readonly,
|
||||
)
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const commit = (value: string | null) => {
|
||||
if (!isControlled.value) localValue.value = value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
const onWheelChange = (value: string) => commit(value)
|
||||
|
||||
const onClear = () => {
|
||||
commit(null)
|
||||
}
|
||||
|
||||
const onFieldClick = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const onMouseDown = (event: MouseEvent) => {
|
||||
if (!isOpen.value || !root.value) return
|
||||
if (!root.value.contains(event.target as Node)) isOpen.value = false
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onMouseDown))
|
||||
onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative flex h-12 w-full items-center', props.groupClass),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed border-m-muted text-black/60' : '',
|
||||
hasError.value
|
||||
? 'border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
isOpen.value ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left text-sm font-medium transition-transform duration-150',
|
||||
(isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: isOpen.value
|
||||
? 'text-m-primary'
|
||||
: 'text-black peer-placeholder-shown:text-m-muted',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (isOpen.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {clampHours, clampMinutes, formatTime, padSegment, parseTime} from './timeFormat'
|
||||
|
||||
describe('timeFormat', () => {
|
||||
it('parse une chaîne HH:MM valide', () => {
|
||||
expect(parseTime('09:05')).toEqual({hours: 9, minutes: 5})
|
||||
})
|
||||
|
||||
it('renvoie null pour vide ou invalide', () => {
|
||||
expect(parseTime('')).toBeNull()
|
||||
expect(parseTime(null)).toBeNull()
|
||||
expect(parseTime('abc')).toBeNull()
|
||||
expect(parseTime('12')).toBeNull()
|
||||
})
|
||||
|
||||
it('clamp les valeurs hors bornes au parsing', () => {
|
||||
expect(parseTime('99:88')).toEqual({hours: 23, minutes: 59})
|
||||
})
|
||||
|
||||
it('formate avec zéro-padding', () => {
|
||||
expect(formatTime(9, 5)).toBe('09:05')
|
||||
expect(formatTime(0, 0)).toBe('00:00')
|
||||
})
|
||||
|
||||
it('clamp et pad les helpers', () => {
|
||||
expect(clampHours(30)).toBe(23)
|
||||
expect(clampHours(-2)).toBe(0)
|
||||
expect(clampMinutes(75)).toBe(59)
|
||||
expect(padSegment(7)).toBe('07')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
export interface TimeParts {
|
||||
hours: number
|
||||
minutes: number
|
||||
}
|
||||
|
||||
export function clampHours(value: number): number {
|
||||
if (Number.isNaN(value)) return 0
|
||||
return Math.min(23, Math.max(0, Math.trunc(value)))
|
||||
}
|
||||
|
||||
export function clampMinutes(value: number): number {
|
||||
if (Number.isNaN(value)) return 0
|
||||
return Math.min(59, Math.max(0, Math.trunc(value)))
|
||||
}
|
||||
|
||||
export function padSegment(value: number): string {
|
||||
return value.toString().padStart(2, '0')
|
||||
}
|
||||
|
||||
export function parseTime(value: string | null | undefined): TimeParts | null {
|
||||
if (!value) return null
|
||||
const match = /^(\d{1,2}):(\d{1,2})$/.exec(value.trim())
|
||||
if (!match) return null
|
||||
return {
|
||||
hours: clampHours(Number.parseInt(match[1], 10)),
|
||||
minutes: clampMinutes(Number.parseInt(match[2], 10)),
|
||||
}
|
||||
}
|
||||
|
||||
export function formatTime(hours: number, minutes: number): string {
|
||||
return `${padSegment(clampHours(hours))}:${padSegment(clampMinutes(minutes))}`
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {defineComponent, nextTick, ref} from 'vue'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {
|
||||
CENTER_OFFSET,
|
||||
VISIBLE_ROWS,
|
||||
loopCorrection,
|
||||
scrollTopForValueIndex,
|
||||
useInfiniteWheel,
|
||||
valueIndexFromScroll,
|
||||
} from './useInfiniteWheel'
|
||||
|
||||
const H = 40 // itemHeight
|
||||
const LEN = 24 // ex. heures
|
||||
|
||||
describe('useInfiniteWheel — math pure', () => {
|
||||
it('expose 5 lignes visibles et un offset central de 2', () => {
|
||||
expect(VISIBLE_ROWS).toBe(5)
|
||||
expect(CENTER_OFFSET).toBe(2)
|
||||
})
|
||||
|
||||
it('scrollTopForValueIndex et valueIndexFromScroll font un aller-retour', () => {
|
||||
for (const index of [0, 1, 9, 23]) {
|
||||
const top = scrollTopForValueIndex(index, H, LEN)
|
||||
expect(valueIndexFromScroll(top, H, LEN)).toBe(index)
|
||||
}
|
||||
})
|
||||
|
||||
it('valueIndexFromScroll boucle en modulo', () => {
|
||||
const top = scrollTopForValueIndex(0, H, LEN)
|
||||
expect(valueIndexFromScroll(top + LEN * H, H, LEN)).toBe(0)
|
||||
})
|
||||
|
||||
it('loopCorrection laisse le scroll de la copie du milieu inchangé', () => {
|
||||
const top = scrollTopForValueIndex(12, H, LEN)
|
||||
expect(loopCorrection(top, H, LEN)).toBe(top)
|
||||
})
|
||||
|
||||
it('loopCorrection ramène vers le milieu quand on dérive vers le haut', () => {
|
||||
const drifted = scrollTopForValueIndex(0, H, LEN) - LEN * H
|
||||
expect(loopCorrection(drifted, H, LEN)).toBe(drifted + LEN * H)
|
||||
})
|
||||
|
||||
it('loopCorrection ramène vers le milieu quand on dérive vers le bas', () => {
|
||||
const drifted = scrollTopForValueIndex(0, H, LEN) + LEN * H
|
||||
expect(loopCorrection(drifted, H, LEN)).toBe(drifted - LEN * H)
|
||||
})
|
||||
})
|
||||
|
||||
function mountWheelHarness(initialIndex: number, onChange: (i: number) => void) {
|
||||
let api!: ReturnType<typeof useInfiniteWheel>
|
||||
const Harness = defineComponent({
|
||||
setup() {
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
api = useInfiniteWheel(container, {
|
||||
length: 24,
|
||||
itemHeight: 40,
|
||||
initialIndex: () => initialIndex,
|
||||
onChange,
|
||||
})
|
||||
return {container}
|
||||
},
|
||||
template: '<div ref="container" style="height:200px;overflow:auto"><div style="height:2880px" /></div>',
|
||||
})
|
||||
const wrapper = mount(Harness, {attachTo: document.body})
|
||||
return {wrapper, api: () => api}
|
||||
}
|
||||
|
||||
describe('useInfiniteWheel — composable', () => {
|
||||
it('step(+1) émet l\'index suivant', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(9, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().step(1)
|
||||
expect(changes.at(-1)).toBe(10)
|
||||
})
|
||||
|
||||
it('step boucle de 23 à 0', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(23, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().step(1)
|
||||
expect(changes.at(-1)).toBe(0)
|
||||
})
|
||||
|
||||
it('onKeydown ArrowUp décrémente (avec wrap)', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(0, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().onKeydown(new KeyboardEvent('keydown', {key: 'ArrowUp'}))
|
||||
expect(changes.at(-1)).toBe(23)
|
||||
})
|
||||
|
||||
// Anti-boucle navigateur : un scroll programmatique déclenche une rafale d'évènements
|
||||
// scroll (animation/snap). Ils ne doivent PAS être pris pour du scroll utilisateur,
|
||||
// sinon settle() ré-émet en boucle et corrompt le patch DOM de Vue.
|
||||
it('n\'émet pas en double quand un scroll programmatique déclenche une rafale de scroll', async () => {
|
||||
vi.useFakeTimers()
|
||||
try {
|
||||
const changes: number[] = []
|
||||
const {wrapper, api} = mountWheelHarness(9, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
const el = wrapper.element as HTMLElement
|
||||
changes.length = 0
|
||||
|
||||
api().scrollToIndex(12)
|
||||
|
||||
el.dispatchEvent(new Event('scroll'))
|
||||
el.dispatchEvent(new Event('scroll'))
|
||||
el.dispatchEvent(new Event('scroll'))
|
||||
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(changes).toEqual([12])
|
||||
}
|
||||
finally {
|
||||
vi.useRealTimers()
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,117 @@
|
||||
import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
|
||||
|
||||
export const VISIBLE_ROWS = 5
|
||||
export const CENTER_OFFSET = (VISIBLE_ROWS - 1) / 2 // 2
|
||||
|
||||
/** Index de valeur logique (0..length-1) centré pour un scrollTop donné. */
|
||||
export function valueIndexFromScroll(scrollTop: number, itemHeight: number, length: number): number {
|
||||
const flat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
||||
return ((flat % length) + length) % length
|
||||
}
|
||||
|
||||
/** scrollTop qui centre l'index donné dans la copie du milieu (buffer à 3 copies). */
|
||||
export function scrollTopForValueIndex(valueIndex: number, itemHeight: number, length: number): number {
|
||||
const flat = length + valueIndex - CENTER_OFFSET
|
||||
return flat * itemHeight
|
||||
}
|
||||
|
||||
/** Recentre le scrollTop dans la copie du milieu [length, 2*length) si on a dérivé. */
|
||||
export function loopCorrection(scrollTop: number, itemHeight: number, length: number): number {
|
||||
const block = length * itemHeight
|
||||
const centeredFlat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
||||
if (centeredFlat < length) return scrollTop + block
|
||||
if (centeredFlat >= 2 * length) return scrollTop - block
|
||||
return scrollTop
|
||||
}
|
||||
|
||||
export interface UseInfiniteWheelOptions {
|
||||
length: number
|
||||
itemHeight: number
|
||||
initialIndex: () => number
|
||||
onChange: (index: number) => void
|
||||
}
|
||||
|
||||
export function useInfiniteWheel(
|
||||
containerRef: Ref<HTMLElement | null>,
|
||||
options: UseInfiniteWheelOptions,
|
||||
) {
|
||||
const centeredIndex = ref(options.initialIndex())
|
||||
let scrollEndTimer: ReturnType<typeof setTimeout> | null = null
|
||||
// Fenêtre de suppression : ignore les évènements scroll provoqués par NOS
|
||||
// repositionnements programmatiques (et les réajustements de scroll-snap), qui
|
||||
// arrivent en rafale. Un booléen one-shot n'en absorberait qu'un seul : les
|
||||
// suivants seraient pris pour du scroll utilisateur → settle() → onChange en
|
||||
// boucle (re-render ré-entrant qui corrompt le patch DOM dans le navigateur).
|
||||
let suppressed = false
|
||||
let suppressTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
// Scroll programmatique INSTANTANÉ : pas de 'smooth', dont l'animation multi-frames
|
||||
// émettrait justement la rafale d'évènements scroll problématique.
|
||||
function applyScroll(top: number) {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
suppressed = true
|
||||
if (suppressTimer) clearTimeout(suppressTimer)
|
||||
suppressTimer = setTimeout(() => { suppressed = false }, 100)
|
||||
el.scrollTop = top
|
||||
}
|
||||
|
||||
function readCentered() {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
centeredIndex.value = valueIndexFromScroll(el.scrollTop, options.itemHeight, options.length)
|
||||
}
|
||||
|
||||
function settle() {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
readCentered()
|
||||
options.onChange(centeredIndex.value)
|
||||
const corrected = loopCorrection(el.scrollTop, options.itemHeight, options.length)
|
||||
if (corrected !== el.scrollTop) applyScroll(corrected)
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if (suppressed) return
|
||||
readCentered()
|
||||
if (scrollEndTimer) clearTimeout(scrollEndTimer)
|
||||
scrollEndTimer = setTimeout(settle, 120)
|
||||
}
|
||||
|
||||
function scrollToIndex(index: number) {
|
||||
centeredIndex.value = index
|
||||
applyScroll(scrollTopForValueIndex(index, options.itemHeight, options.length))
|
||||
options.onChange(index)
|
||||
}
|
||||
|
||||
function step(delta: number) {
|
||||
const next = (((centeredIndex.value + delta) % options.length) + options.length) % options.length
|
||||
scrollToIndex(next)
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
step(-1)
|
||||
}
|
||||
else if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
step(1)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
el.addEventListener('scroll', onScroll, {passive: true})
|
||||
applyScroll(scrollTopForValueIndex(options.initialIndex(), options.itemHeight, options.length))
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
containerRef.value?.removeEventListener('scroll', onScroll)
|
||||
if (scrollEndTimer) clearTimeout(scrollEndTimer)
|
||||
if (suppressTimer) clearTimeout(suppressTimer)
|
||||
})
|
||||
|
||||
return {centeredIndex, scrollToIndex, step, onKeydown}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import TimeWheel from './TimeWheel.vue'
|
||||
|
||||
const HOURS = Array.from({length: 24}, (_, i) => i)
|
||||
|
||||
const mountWheel = (modelValue = 9) =>
|
||||
mount(TimeWheel, {
|
||||
props: {modelValue, values: HOURS, ariaLabel: 'Heures'},
|
||||
attachTo: document.body,
|
||||
})
|
||||
|
||||
describe('MalioTimeWheel', () => {
|
||||
it('expose le rôle spinbutton et les attributs aria', () => {
|
||||
const wrapper = mountWheel(9)
|
||||
const el = wrapper.get('[role="spinbutton"]')
|
||||
expect(el.attributes('aria-label')).toBe('Heures')
|
||||
expect(el.attributes('aria-valuenow')).toBe('9')
|
||||
expect(el.attributes('aria-valuemin')).toBe('0')
|
||||
expect(el.attributes('aria-valuemax')).toBe('23')
|
||||
expect(el.attributes('aria-valuetext')).toBe('09')
|
||||
})
|
||||
|
||||
it('rend 3 copies des valeurs (buffer infini)', () => {
|
||||
const wrapper = mountWheel()
|
||||
expect(wrapper.findAll('[data-test="wheel-item"]')).toHaveLength(24 * 3)
|
||||
})
|
||||
|
||||
it('émet la nouvelle valeur au clavier ArrowDown', async () => {
|
||||
const wrapper = mountWheel(9)
|
||||
await wrapper.get('[role="spinbutton"]').trigger('keydown', {key: 'ArrowDown'})
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([10])
|
||||
})
|
||||
|
||||
it('émet la valeur cliquée', async () => {
|
||||
const wrapper = mountWheel(9)
|
||||
const item = wrapper.findAll('[data-test="wheel-item"]').find((w) => w.text() === '11')!
|
||||
await item.trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([11])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div
|
||||
ref="container"
|
||||
class="malio-wheel relative h-[160px] w-14 snap-y snap-mandatory overflow-y-scroll"
|
||||
role="spinbutton"
|
||||
:tabindex="0"
|
||||
:aria-label="ariaLabel"
|
||||
:aria-valuenow="modelValue"
|
||||
:aria-valuemin="values[0]"
|
||||
:aria-valuemax="values[values.length - 1]"
|
||||
:aria-valuetext="pad(modelValue)"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<button
|
||||
v-for="item in buffer"
|
||||
:key="item.key"
|
||||
type="button"
|
||||
data-test="wheel-item"
|
||||
class="flex h-8 w-full snap-center items-center justify-center leading-none outline-none transition-all"
|
||||
:class="itemClass(item.flat)"
|
||||
tabindex="-1"
|
||||
@click="onItemClick(item.value)"
|
||||
>
|
||||
{{ pad(item.value) }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {useInfiniteWheel} from '../composables/useInfiniteWheel'
|
||||
import {padSegment} from '../composables/timeFormat'
|
||||
|
||||
defineOptions({name: 'MalioTimeWheel', inheritAttrs: false})
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number
|
||||
values: number[]
|
||||
ariaLabel: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: number): void}>()
|
||||
|
||||
const ITEM_HEIGHT = 32
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
|
||||
const pad = (value: number) => padSegment(value)
|
||||
const indexOfValue = (value: number) => Math.max(0, props.values.indexOf(value))
|
||||
|
||||
const {centeredIndex, scrollToIndex, onKeydown} = useInfiniteWheel(container, {
|
||||
length: props.values.length,
|
||||
itemHeight: ITEM_HEIGHT,
|
||||
initialIndex: () => indexOfValue(props.modelValue),
|
||||
onChange: (index) => emit('update:modelValue', props.values[index]),
|
||||
})
|
||||
|
||||
const buffer = computed(() =>
|
||||
[0, 1, 2].flatMap((copy) =>
|
||||
props.values.map((value, i) => {
|
||||
const flat = copy * props.values.length + i
|
||||
return {value, flat, key: flat}
|
||||
}),
|
||||
),
|
||||
)
|
||||
|
||||
// Taille décroissante avec la distance au centre (effet molette iOS).
|
||||
const itemClass = (flat: number) => {
|
||||
const distance = Math.abs(flat - (props.values.length + centeredIndex.value))
|
||||
if (distance === 0) return 'text-[16px] font-medium text-black'
|
||||
if (distance === 1) return 'text-[14px] text-m-muted'
|
||||
return 'text-[12px] text-m-muted'
|
||||
}
|
||||
|
||||
const onItemClick = (value: number) => scrollToIndex(indexOfValue(value))
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
if (props.values[centeredIndex.value] !== value) scrollToIndex(indexOfValue(value))
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.malio-wheel {
|
||||
scrollbar-width: none;
|
||||
/* Estompe les valeurs en haut et en bas (effet molette iOS) pour qu'elles ne
|
||||
débordent pas visuellement du cadre. */
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
|
||||
}
|
||||
.malio-wheel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import TimeWheels from './TimeWheels.vue'
|
||||
import TimeWheel from './TimeWheel.vue'
|
||||
|
||||
const mountWheels = (modelValue = '09:30') =>
|
||||
mount(TimeWheels, {props: {modelValue}, attachTo: document.body})
|
||||
|
||||
describe('MalioTimeWheels', () => {
|
||||
it('rend deux molettes (heures + minutes) et un séparateur', () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels).toHaveLength(2)
|
||||
expect(wheels[0].props('ariaLabel')).toBe('Heures')
|
||||
expect(wheels[1].props('ariaLabel')).toBe('Minutes')
|
||||
expect(wrapper.text()).toContain(':')
|
||||
})
|
||||
|
||||
it('splitte modelValue vers les bonnes molettes', () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels[0].props('modelValue')).toBe(9)
|
||||
expect(wheels[1].props('modelValue')).toBe(30)
|
||||
})
|
||||
|
||||
it('recompose et émet HH:MM quand l\'heure change', async () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
wheels[0].vm.$emit('update:modelValue', 14)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['14:30'])
|
||||
})
|
||||
|
||||
it('recompose et émet HH:MM quand la minute change', async () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
wheels[1].vm.$emit('update:modelValue', 5)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['09:05'])
|
||||
})
|
||||
|
||||
it('par défaut 00:00 quand modelValue est vide', () => {
|
||||
const wrapper = mountWheels('')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels[0].props('modelValue')).toBe(0)
|
||||
expect(wheels[1].props('modelValue')).toBe(0)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div
|
||||
data-test="time-wheels"
|
||||
class="relative flex items-center justify-center gap-3 py-2"
|
||||
>
|
||||
<!-- bande centrale (overlay, traverse les 2 colonnes) -->
|
||||
<div
|
||||
class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-8 mx-3 -translate-y-1/2 rounded-lg bg-m-primary-light"
|
||||
/>
|
||||
|
||||
<MalioTimeWheel
|
||||
:model-value="hours"
|
||||
:values="HOURS"
|
||||
aria-label="Heures"
|
||||
class="relative z-10"
|
||||
@update:model-value="onHours"
|
||||
/>
|
||||
|
||||
<span class="relative z-10 text-[14px] font-bold text-black">:</span>
|
||||
|
||||
<MalioTimeWheel
|
||||
:model-value="minutes"
|
||||
:values="MINUTES"
|
||||
aria-label="Minutes"
|
||||
class="relative z-10"
|
||||
@update:model-value="onMinutes"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed} from 'vue'
|
||||
import MalioTimeWheel from './TimeWheel.vue'
|
||||
import {formatTime, parseTime} from '../composables/timeFormat'
|
||||
|
||||
defineOptions({name: 'MalioTimeWheels', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{modelValue?: string | null}>(),
|
||||
{modelValue: ''},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>()
|
||||
|
||||
const HOURS = Array.from({length: 24}, (_, i) => i)
|
||||
const MINUTES = Array.from({length: 60}, (_, i) => i)
|
||||
|
||||
const parts = computed(() => parseTime(props.modelValue) ?? {hours: 0, minutes: 0})
|
||||
const hours = computed(() => parts.value.hours)
|
||||
const minutes = computed(() => parts.value.minutes)
|
||||
|
||||
const onHours = (value: number) => emit('update:modelValue', formatTime(value, minutes.value))
|
||||
const onMinutes = (value: number) => emit('update:modelValue', formatTime(hours.value, value))
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<Story title="Disclosure/Accordion">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Multiple (filtres) — défaut</h2>
|
||||
<MalioAccordion v-model="multiple">
|
||||
<MalioAccordionItem title="Prix" value="prix">
|
||||
<p>Slider de prix ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat">
|
||||
<p>Liste de checkboxes ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Marque" value="marque">
|
||||
<p>Recherche + liste ici…</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
|
||||
<MalioAccordion v-model="single" mode="single">
|
||||
<MalioAccordionItem title="Question 1" value="q1">
|
||||
<p>Réponse 1</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Question 2" value="q2">
|
||||
<p>Réponse 2</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Active" value="ok">
|
||||
<p>Contenu accessible</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
|
||||
<p>Inaccessible</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioAccordion
|
||||
|
||||
Accordéon compositionnel : un parent `MalioAccordion` qui enveloppe des
|
||||
`MalioAccordionItem`. Conçu pour des systèmes de filtres (plusieurs sections
|
||||
dépliées simultanément) comme pour des FAQ (une seule section ouverte).
|
||||
|
||||
---
|
||||
|
||||
## Props — MalioAccordion
|
||||
|
||||
### mode
|
||||
- Type: `'single' | 'multiple'`
|
||||
- Défaut: `'multiple'`
|
||||
- Description: `multiple` autorise plusieurs panneaux ouverts ; `single` ferme les autres à l'ouverture.
|
||||
|
||||
### modelValue
|
||||
- Type: `string | string[]`
|
||||
- Description: clés ouvertes. `string[]` en mode `multiple`, `string` en mode `single`. Sans v-model, état interne (non contrôlé).
|
||||
|
||||
### id
|
||||
- Type: `string`
|
||||
- Description: préfixe des IDs d'accessibilité. Auto-généré si absent.
|
||||
|
||||
### groupClass
|
||||
- Type: `string`
|
||||
- Description: classes du conteneur, fusionnées via `twMerge`.
|
||||
|
||||
---
|
||||
|
||||
## Props — MalioAccordionItem
|
||||
|
||||
### title
|
||||
- Type: `string` (requis) — texte de l'en-tête.
|
||||
|
||||
### value
|
||||
- Type: `string` — clé unique de la section (recommandée pour piloter le v-model). Auto-générée si absente.
|
||||
|
||||
### defaultOpen
|
||||
- Type: `boolean` — défaut `false`. Ouvre la section au montage (mode non contrôlé uniquement).
|
||||
|
||||
### disabled
|
||||
- Type: `boolean` — défaut `false`. En-tête non cliquable.
|
||||
|
||||
### headerClass / panelClass
|
||||
- Type: `string` — override des classes de l'en-tête / du panneau (`twMerge`).
|
||||
|
||||
---
|
||||
|
||||
## Slots
|
||||
|
||||
Slot par défaut de `MalioAccordionItem` = contenu du panneau.
|
||||
|
||||
---
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- En-tête = `<button>` natif, `aria-expanded`, `aria-controls`.
|
||||
- Panneau `role="region"` + `aria-labelledby`.
|
||||
- Sections désactivées : `disabled` + `aria-disabled`.
|
||||
- Navigation clavier ↑/↓ entre les en-têtes.
|
||||
|
||||
---
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
- Émis à chaque bascule. Retourne `string[]` (mode `multiple`) ou `string` (mode `single`, `''` si tout fermé).
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioAccordion from '../../components/malio/accordion/Accordion.vue'
|
||||
import MalioAccordionItem from '../../components/malio/accordion/AccordionItem.vue'
|
||||
|
||||
defineOptions({ name: 'AccordionStory' })
|
||||
|
||||
const multiple = ref<string[]>(['prix'])
|
||||
const single = ref('q1')
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineOptions({ name: 'ModalStory' })
|
||||
|
||||
const showBase = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showNoDismiss = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Overlay/Modal">
|
||||
<Variant title="Simple">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showBase = true"
|
||||
>
|
||||
Ouvrir
|
||||
</button>
|
||||
<MalioModal v-model="showBase">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu simple de la modal.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Avec footer d'actions">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showForm = true"
|
||||
>
|
||||
Ouvrir le formulaire
|
||||
</button>
|
||||
<MalioModal v-model="showForm" modal-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Non dismissable">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showNoDismiss = true"
|
||||
>
|
||||
Ouvrir
|
||||
</button>
|
||||
<MalioModal v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Action requise</h2>
|
||||
</template>
|
||||
<p>Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<Story title="Time/TimePicker">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioTimePicker v-model="simpleValue" label="Heure" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioTimePicker v-model="initialValue" label="Heure de départ" hint="Format HH:MM" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioTimePicker v-model="disabledValue" label="Heure verrouillée" disabled />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioTimePicker v-model="errorValue" label="Heure de fermeture" error="Heure invalide" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioTimePicker v-model="successValue" label="Heure confirmée" success="Horaire enregistré" />
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioTimePicker from '../../components/malio/time/TimePicker.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const initialValue = ref('08:30')
|
||||
const disabledValue = ref('14:15')
|
||||
const errorValue = ref('25:90')
|
||||
const successValue = ref('09:00')
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,979 @@
|
||||
# MalioModal Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Ajouter un composant `MalioModal` (dialogue modal centré) autonome à `@malio/layer-ui`, sans modifier le Drawer existant.
|
||||
|
||||
**Architecture:** Composant Vue SFC unique `app/components/malio/modal/Modal.vue`, auto-importé comme `<MalioModal>`. Réimplémente sa propre logique (Teleport, focus-trap, scroll-lock partagé via compteur module-level, pattern contrôlé/non-contrôlé, transition fade+scale) en s'inspirant du Drawer. Structure : header fixe / body scrollable / footer fixe.
|
||||
|
||||
**Tech Stack:** Nuxt 4 layer, Vue 3 `<script setup lang="ts">`, Tailwind (tokens `m-*`), `tailwind-merge`, `@iconify/vue`, Vitest + `@vue/test-utils` (jsdom), Histoire.
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-05-26-modal-design.md`
|
||||
|
||||
**Conventions projet à respecter :**
|
||||
- Commits Conventional **avec espace avant les `:`** : `feat : … (#MUI-36)`, `docs : …`, `test : …`. Type en minuscules, pas de préfixe `[#…]`. Finir par la ligne `Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>`.
|
||||
- Le hook pre-commit lance lint + ~595 tests et **time out de façon flaky** sous WSL2. Pattern : réessayer ; après 2 échecs flaky (échecs différents d'un run à l'autre), vérifier les tests ciblés à la main (`npx vitest run <chemin>`) puis committer avec `--no-verify`.
|
||||
- Story : nom de fichier sous un dossier (`story/modal/modal.story.vue`) ; `defineOptions({ name: 'ModalStory' })` pour éviter `vue/multi-word-component-names`.
|
||||
|
||||
**File Structure:**
|
||||
- Create `app/components/malio/modal/Modal.vue` — le composant (≈ taille du Drawer).
|
||||
- Create `app/components/malio/modal/Modal.test.ts` — tests colocalisés.
|
||||
- Create `.playground/pages/composant/modal/modal.vue` — page de démo (route `/composant/modal/modal`).
|
||||
- Modify `.playground/playground.nav.ts` — ajout de l'entrée nav dans la section `NAVIGATION`.
|
||||
- Create `app/story/modal/modal.story.vue` — story Histoire.
|
||||
- Modify `COMPONENTS.md` — section `## MalioModal` (insérée après la section `## MalioDrawer`).
|
||||
- Modify `CHANGELOG.md` — ligne sous `### Added`.
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Composant MalioModal + suite de tests (cycle TDD)
|
||||
|
||||
**Files:**
|
||||
- Create: `app/components/malio/modal/Modal.test.ts`
|
||||
- Create: `app/components/malio/modal/Modal.vue`
|
||||
|
||||
- [ ] **Step 1: Écrire la suite de tests qui échoue**
|
||||
|
||||
Create `app/components/malio/modal/Modal.test.ts` :
|
||||
|
||||
```ts
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
import { enableAutoUnmount, mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import Modal from './Modal.vue'
|
||||
|
||||
type ModalProps = {
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
modalClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}
|
||||
|
||||
const ModalForTest = Modal as DefineComponent<ModalProps>
|
||||
|
||||
function mountComponent(props: ModalProps = {}, slots?: Record<string, string>) {
|
||||
return mount(ModalForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioModal', () => {
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
afterEach(() => {
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
|
||||
it('does not render when modelValue is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders the panel when modelValue is true', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('centers the modal (items-center justify-center)', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const root = wrapper.find('.fixed')
|
||||
expect(root.classes()).toContain('items-center')
|
||||
expect(root.classes()).toContain('justify-center')
|
||||
})
|
||||
|
||||
it('renders default slot in the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ default: '<p data-test="content">Contenu</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
|
||||
})
|
||||
|
||||
it('works in uncontrolled mode (defaults closed)', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, id: 'my-modal' })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toBe('my-modal')
|
||||
})
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-modal-/)
|
||||
})
|
||||
|
||||
it('has role="dialog" and aria-modal on the panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('role')).toBe('dialog')
|
||||
expect(panel.attributes('aria-modal')).toBe('true')
|
||||
})
|
||||
|
||||
it('applies modalClass to the panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, modalClass: 'max-w-2xl' })
|
||||
expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
|
||||
})
|
||||
|
||||
it('renders the #header slot inside the header bar', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ header: '<h2 data-test="title">Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
|
||||
})
|
||||
|
||||
it('renders the header bar when showClose is true even without #header', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the header bar when no #header and showClose is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, showClose: false })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows the close button by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides the close button when showClose is false', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, showClose: false },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button renders mdi:cancel-bold icon', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const icon = wrapper.findComponent(IconifyIcon)
|
||||
expect(icon.props('icon')).toBe('mdi:cancel-bold')
|
||||
})
|
||||
|
||||
it('close button has aria-label "Fermer"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on close button click', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="close-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('sets aria-labelledby to the header id when #header is provided', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, id: 'test-modal' },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-labelledby')).toBe('test-modal-header')
|
||||
expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-modal-header')
|
||||
})
|
||||
|
||||
it('sets aria-label from ariaLabel when no #header is provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Boîte de dialogue' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-label')).toBe('Boîte de dialogue')
|
||||
expect(panel.attributes('aria-labelledby')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies headerClass to the header bar', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
|
||||
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
|
||||
})
|
||||
|
||||
it('renders the #footer slot in a footer pinned below the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ footer: '<button data-test="save">Enregistrer</button>' },
|
||||
)
|
||||
// le footer n'est PAS dans la zone scrollable (≠ Drawer)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the footer when no #footer slot', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('applies bodyClass to the body', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
|
||||
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
|
||||
})
|
||||
|
||||
it('applies footerClass to the footer', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, footerClass: 'justify-end' },
|
||||
{ footer: '<span>pied</span>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on backdrop click when dismissable is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, dismissable: false })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies overlayClass to the backdrop', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
|
||||
expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
|
||||
})
|
||||
|
||||
it('closes on Escape key when closeOnEscape is true', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on Escape when closeOnEscape is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('locks body scroll when opened and restores it when closed', async () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
|
||||
it('moves focus into the panel when opened', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: false, showClose: false },
|
||||
slots: { default: '<button data-test="first">OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="first"]').element
|
||||
expect(document.activeElement).toBe(first)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('restores focus to the trigger when closed', async () => {
|
||||
const trigger = document.createElement('button')
|
||||
document.body.appendChild(trigger)
|
||||
trigger.focus()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
slots: { default: '<button>OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
wrapper.unmount()
|
||||
trigger.remove()
|
||||
})
|
||||
|
||||
it('wraps focus to the first element when Tab is pressed on the last element', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
|
||||
last.focus()
|
||||
expect(document.activeElement).toBe(last)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
|
||||
first.focus()
|
||||
expect(document.activeElement).toBe(first)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('does not release body scroll-lock when one stacked modal closes while another is still open', async () => {
|
||||
const wrapperA = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
const wrapperB = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
|
||||
await wrapperA.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperB.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperB.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperA.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Lancer les tests pour vérifier qu'ils échouent**
|
||||
|
||||
Run: `npx vitest run app/components/malio/modal/Modal.test.ts`
|
||||
Expected: FAIL — `Failed to resolve import "./Modal.vue"` (le composant n'existe pas encore).
|
||||
|
||||
- [ ] **Step 3: Implémenter le composant**
|
||||
|
||||
Create `app/components/malio/modal/Modal.vue` :
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
name="modal"
|
||||
appear
|
||||
@after-leave="isRendered = false"
|
||||
>
|
||||
<div
|
||||
v-if="isRendered && isOpen"
|
||||
:id="componentId"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
:class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
|
||||
data-test="backdrop"
|
||||
@click="onBackdropClick"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref="panelRef"
|
||||
:class="twMerge(
|
||||
'relative z-50 flex max-h-[85vh] w-full max-w-md flex-col rounded-malio bg-white',
|
||||
modalClass,
|
||||
)"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="hasHeader ? headerId : undefined"
|
||||
:aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
|
||||
tabindex="-1"
|
||||
data-test="panel"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<div
|
||||
v-if="hasHeader || showClose"
|
||||
:class="twMerge('flex shrink-0 items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
|
||||
data-test="header"
|
||||
>
|
||||
<div
|
||||
:id="headerId"
|
||||
class="min-w-0 flex-1"
|
||||
data-test="header-content"
|
||||
>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<button
|
||||
v-if="showClose"
|
||||
type="button"
|
||||
aria-label="Fermer"
|
||||
class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
|
||||
data-test="close-button"
|
||||
@click="close"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:cancel-bold"
|
||||
:width="16"
|
||||
:height="16"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
:class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
|
||||
data-test="body"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="$slots.footer"
|
||||
:class="twMerge('flex shrink-0 items-center gap-3 border-t border-m-border px-5 py-4', footerClass)"
|
||||
data-test="footer"
|
||||
>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
useAttrs,
|
||||
useId,
|
||||
useSlots,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
defineOptions({ name: 'MalioModal', inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
modalClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
showClose: true,
|
||||
dismissable: true,
|
||||
closeOnEscape: true,
|
||||
ariaLabel: '',
|
||||
modalClass: '',
|
||||
overlayClass: '',
|
||||
headerClass: '',
|
||||
bodyClass: '',
|
||||
footerClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const componentId = computed(() => props.id || `malio-modal-${generatedId}`)
|
||||
|
||||
const slots = useSlots()
|
||||
const headerId = computed(() => `${componentId.value}-header`)
|
||||
const hasHeader = computed(() => !!slots.header)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(false)
|
||||
const isOpen = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
const isRendered = ref(isOpen.value)
|
||||
|
||||
const panelRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let previouslyFocused: HTMLElement | null = null
|
||||
// Per-instance flag: true while this modal holds a scroll-lock count slot.
|
||||
let lockedByThisInstance = false
|
||||
|
||||
function getFocusable(container: HTMLElement): HTMLElement[] {
|
||||
return Array.from(
|
||||
container.querySelectorAll<HTMLElement>(
|
||||
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
|
||||
),
|
||||
).filter((el) => el.tabIndex !== -1)
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
|
||||
if (!lockedByThisInstance) {
|
||||
lockedByThisInstance = true
|
||||
openModalCount++
|
||||
if (openModalCount === 1) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
;(focusable[0] ?? panel).focus()
|
||||
})
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openModalCount = Math.max(0, openModalCount - 1)
|
||||
if (openModalCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
previouslyFocused?.focus?.()
|
||||
previouslyFocused = null
|
||||
}
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) {
|
||||
isRendered.value = true
|
||||
onOpen()
|
||||
}
|
||||
else {
|
||||
onClose()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (isOpen.value) onOpen()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// If this instance is still holding a scroll-lock slot, release it.
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openModalCount = Math.max(0, openModalCount - 1)
|
||||
if (openModalCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function onBackdropClick() {
|
||||
if (props.dismissable) close()
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && props.closeOnEscape) {
|
||||
e.stopPropagation()
|
||||
close()
|
||||
return
|
||||
}
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
if (focusable.length === 0) {
|
||||
e.preventDefault()
|
||||
panel.focus()
|
||||
return
|
||||
}
|
||||
const first = focusable[0]!
|
||||
const last = focusable[focusable.length - 1]!
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault()
|
||||
last.focus()
|
||||
}
|
||||
else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault()
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!isControlled.value) localValue.value = false
|
||||
emit('update:modelValue', false)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// Shared across all MalioModal instances: only the last open modal releases the body scroll-lock.
|
||||
let openModalCount = 0
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-active > div:last-child,
|
||||
.modal-leave-active > div:last-child {
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from > div:last-child,
|
||||
.modal-leave-to > div:last-child {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Lancer les tests pour vérifier qu'ils passent**
|
||||
|
||||
Run: `npx vitest run app/components/malio/modal/Modal.test.ts`
|
||||
Expected: PASS — tous les tests (≈ 32) verts.
|
||||
|
||||
- [ ] **Step 5: Lint**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: 0 erreur sur les fichiers du composant.
|
||||
|
||||
- [ ] **Step 6: Commit**
|
||||
|
||||
```bash
|
||||
git add app/components/malio/modal/Modal.vue app/components/malio/modal/Modal.test.ts
|
||||
git commit -m "feat : composant Modal (#MUI-36)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
(En cas de timeout flaky pre-commit, voir le pattern conventions en tête de plan : retry ×2 puis `--no-verify` après vérif ciblée `npx vitest run app/components/malio/modal/Modal.test.ts`.)
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Page playground + entrée nav
|
||||
|
||||
**Files:**
|
||||
- Create: `.playground/pages/composant/modal/modal.vue`
|
||||
- Modify: `.playground/playground.nav.ts` (section `NAVIGATION`, après le Drawer)
|
||||
|
||||
- [ ] **Step 1: Créer la page de démo**
|
||||
|
||||
Create `.playground/pages/composant/modal/modal.vue` :
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const modalBase = ref(false)
|
||||
const modalForm = ref(false)
|
||||
const modalLong = ref(false)
|
||||
const modalNoDismiss = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Modal simple</h2>
|
||||
<MalioButton label="Ouvrir" @click="modalBase = true" />
|
||||
<MalioModal v-model="modalBase">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Détails</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Contenu de la modal. Échap, clic backdrop et croix la ferment.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
|
||||
<MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="modalForm = true" />
|
||||
<MalioModal v-model="modalForm" modal-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
<MalioInputText label="Email" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="modalForm = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="modalForm = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Contenu long (body scrollable)</h2>
|
||||
<MalioButton label="Ouvrir" variant="tertiary" @click="modalLong = true" />
|
||||
<MalioModal v-model="modalLong">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Conditions</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<p v-for="n in 20" :key="n" class="text-m-text">
|
||||
Paragraphe {{ n }} — contenu long pour forcer le scroll interne ; le header et le footer restent fixes.
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Accepter" button-class="w-full" @click="modalLong = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
|
||||
<MalioButton label="Ouvrir" variant="danger" @click="modalNoDismiss = true" />
|
||||
<MalioModal v-model="modalNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Action requise</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Ajouter l'entrée nav**
|
||||
|
||||
Modify `.playground/playground.nav.ts`, dans la section `NAVIGATION`, ajouter la ligne Modal juste après le Drawer :
|
||||
|
||||
```ts
|
||||
{
|
||||
label: 'NAVIGATION',
|
||||
icon: 'mdi:navigation-variant',
|
||||
items: [
|
||||
{label: 'Sidebar', to: '/composant/sidebar/sidebar'},
|
||||
{label: 'Drawer', to: '/composant/drawer/drawer'},
|
||||
{label: 'Modal', to: '/composant/modal/modal'},
|
||||
{label: 'Onglets', to: '/composant/tab/tabList'},
|
||||
],
|
||||
},
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Vérifier le lint**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: 0 erreur.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add .playground/pages/composant/modal/modal.vue .playground/playground.nav.ts
|
||||
git commit -m "docs : page playground Modal (#MUI-36)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Story Histoire
|
||||
|
||||
**Files:**
|
||||
- Create: `app/story/modal/modal.story.vue`
|
||||
|
||||
- [ ] **Step 1: Créer la story**
|
||||
|
||||
Create `app/story/modal/modal.story.vue` :
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineOptions({ name: 'ModalStory' })
|
||||
|
||||
const showBase = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showNoDismiss = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Overlay/Modal">
|
||||
<Variant title="Simple">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showBase = true"
|
||||
>
|
||||
Ouvrir
|
||||
</button>
|
||||
<MalioModal v-model="showBase">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu simple de la modal.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Avec footer d'actions">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showForm = true"
|
||||
>
|
||||
Ouvrir le formulaire
|
||||
</button>
|
||||
<MalioModal v-model="showForm" modal-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Non dismissable">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showNoDismiss = true"
|
||||
>
|
||||
Ouvrir
|
||||
</button>
|
||||
<MalioModal v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Action requise</h2>
|
||||
</template>
|
||||
<p>Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Vérifier le lint**
|
||||
|
||||
Run: `npm run lint`
|
||||
Expected: 0 erreur (notamment pas de `vue/multi-word-component-names` grâce au `defineOptions`).
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add app/story/modal/modal.story.vue
|
||||
git commit -m "docs : story Histoire Modal (#MUI-36)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Documentation (COMPONENTS.md + CHANGELOG.md)
|
||||
|
||||
**Files:**
|
||||
- Modify: `COMPONENTS.md` (insérer après la section `## MalioDrawer`, juste avant `## MalioDataTable`)
|
||||
- Modify: `CHANGELOG.md` (ligne sous `### Added`)
|
||||
|
||||
- [ ] **Step 1: Ajouter la section dans COMPONENTS.md**
|
||||
|
||||
Dans `COMPONENTS.md`, insérer ce bloc juste après le `---` qui clôt la section `## MalioDrawer` (et avant `## MalioDataTable`) :
|
||||
|
||||
```markdown
|
||||
## MalioModal
|
||||
|
||||
Boîte de dialogue modale centrée avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs modals. Structure : header fixe, body scrollable (`max-h-[85vh]`), footer fixe.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
|
||||
| `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
|
||||
| `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
|
||||
| `modalClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-lg` (twMerge) |
|
||||
| `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
|
||||
| `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
|
||||
| `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
|
||||
| `footerClass` | `string` | `''` | Classes CSS footer fixe (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`, `close()`
|
||||
|
||||
**Slots :**
|
||||
- `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
|
||||
- `default` — contenu (zone scrollable).
|
||||
- `footer` — actions (boutons). Rendu en bas, fixe, séparé par une bordure. N'apparaît que si le slot est fourni.
|
||||
|
||||
```vue
|
||||
<MalioModal v-model="isOpen">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu de la modal</p>
|
||||
</MalioModal>
|
||||
|
||||
<!-- Largeur custom + footer d'actions -->
|
||||
<MalioModal v-model="isOpen" modal-class="max-w-lg">
|
||||
<template #header><h2>Nouveau contact</h2></template>
|
||||
<MalioInputText label="Nom" />
|
||||
<template #footer>
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="isOpen = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="isOpen = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
|
||||
<!-- Non fermable au backdrop / Échap (croix uniquement) -->
|
||||
<MalioModal v-model="isOpen" :dismissable="false" :close-on-escape="false">
|
||||
<template #header><h2>Action requise</h2></template>
|
||||
<p>Fermeture via la croix uniquement</p>
|
||||
</MalioModal>
|
||||
```
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Ajouter l'entrée CHANGELOG**
|
||||
|
||||
Dans `CHANGELOG.md`, sous `### Added`, ajouter en dernière ligne de la liste (après la ligne DateTime) :
|
||||
|
||||
```markdown
|
||||
* [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add COMPONENTS.md CHANGELOG.md
|
||||
git commit -m "docs : documentation du composant Modal (#MUI-36)
|
||||
|
||||
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Vérification finale
|
||||
|
||||
- [ ] `npx vitest run app/components/malio/modal/Modal.test.ts` → tous verts.
|
||||
- [ ] `npm run lint` → 0 erreur.
|
||||
- [ ] `npm run dev` → la page `/composant/modal/modal` s'affiche, l'entrée « Modal » est dans la nav sous NAVIGATION, les 4 démos fonctionnent (ouverture, fermeture backdrop/Échap/croix, scroll interne, non-dismissable).
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,167 @@
|
||||
# Spec — Composant Accordéon `<MalioAccordion>`
|
||||
|
||||
**Date :** 2026-05-26
|
||||
**Ticket :** MUI-37
|
||||
**Statut :** Validé (design), prêt pour planification
|
||||
|
||||
## Contexte & objectif
|
||||
|
||||
Ajouter un composant accordéon à `@malio/layer-ui`. Cas d'usage principal :
|
||||
un **système de filtres dans un drawer** d'ERP, où plusieurs sections de
|
||||
critères (prix, catégorie, marque…) doivent pouvoir être dépliées
|
||||
simultanément, chaque section ayant un contenu hétérogène (checkboxes,
|
||||
slider, recherche…).
|
||||
|
||||
## Décision d'API : composants enfants (compositional)
|
||||
|
||||
Plutôt que l'API « tableau `items` + slots » de NuxtUI (qui impose un template
|
||||
`#content` unique avec un switch central sur l'item courant), on adopte une
|
||||
**API compositionnelle** : un parent `<MalioAccordion>` qui enveloppe des
|
||||
enfants `<MalioAccordionItem>`. Chaque section déclare son titre **et** son
|
||||
contenu au même endroit, sans switch central, et s'ajoute/se retire
|
||||
indépendamment.
|
||||
|
||||
Rationale : pour des filtres au contenu hétérogène, c'est nettement plus
|
||||
lisible et évolutif. On reste **100 % natif** (pas de dépendance Reka UI,
|
||||
contrairement à NuxtUI), cohérent avec le `TabList` maison et les conventions
|
||||
du layer (`@iconify/vue`, `twMerge`, props `*Class`).
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
MalioAccordion (parent : état d'ouverture, mode, coordination)
|
||||
└─ MalioAccordionItem (enfant : en-tête cliquable + panneau animé + slot)
|
||||
```
|
||||
|
||||
Le parent **fournit** (`provide`) un contexte d'accordéon ; chaque enfant
|
||||
**l'injecte** (`inject`) pour connaître son état d'ouverture et déclencher les
|
||||
bascules. Communication via une clé `Symbol` (`InjectionKey`).
|
||||
|
||||
**Contexte fourni** (forme indicative) :
|
||||
|
||||
```ts
|
||||
interface AccordionContext {
|
||||
mode: ComputedRef<'single' | 'multiple'>
|
||||
isOpen: (value: string) => boolean
|
||||
toggle: (value: string) => void
|
||||
register: (value: string, defaultOpen: boolean) => void // enfant → parent au montage
|
||||
unregister: (value: string) => void
|
||||
baseId: string // pour générer les ids ARIA
|
||||
registerHeader / focus nav helpers // pour la navigation flèches
|
||||
}
|
||||
```
|
||||
|
||||
**Fichiers :**
|
||||
|
||||
```
|
||||
app/components/malio/accordion/Accordion.vue
|
||||
app/components/malio/accordion/AccordionItem.vue
|
||||
app/components/malio/accordion/Accordion.test.ts
|
||||
app/components/malio/accordion/AccordionItem.test.ts
|
||||
```
|
||||
|
||||
(+ page playground et story Histoire, cf. skill `creating-malio-component`.)
|
||||
|
||||
## API publique
|
||||
|
||||
### `<MalioAccordion>`
|
||||
|
||||
`defineOptions({ name: 'MalioAccordion', inheritAttrs: false })`
|
||||
|
||||
| Prop | Type | Défaut | Rôle |
|
||||
|------|------|--------|------|
|
||||
| `mode` | `'single' \| 'multiple'` | `'multiple'` | Un seul ou plusieurs panneaux ouverts |
|
||||
| `modelValue` | `string \| string[]` | `undefined` | v-model des clés ouvertes (`string` en `single`, `string[]` en `multiple`) |
|
||||
| `id` | `string` | auto (`useId`) | Base d'id pour les attributs ARIA |
|
||||
| `groupClass` | `string` | `''` | Classes du conteneur (fusion `twMerge`) |
|
||||
|
||||
**Events :** `update:modelValue(value: string | string[])`
|
||||
|
||||
**Pattern contrôlé / non-contrôlé** (convention maison) :
|
||||
`isControlled = computed(() => props.modelValue !== undefined)`, avec
|
||||
`localValue` en fallback. En non-contrôlé, l'état initial est dérivé des
|
||||
enfants ayant `defaultOpen`.
|
||||
|
||||
### `<MalioAccordionItem>`
|
||||
|
||||
`defineOptions({ name: 'MalioAccordionItem', inheritAttrs: false })`
|
||||
|
||||
| Prop | Type | Défaut | Rôle |
|
||||
|------|------|--------|------|
|
||||
| `title` | `string` | — | Texte de l'en-tête |
|
||||
| `value` | `string` | auto (`useId`) | Clé unique (recommandée pour piloter le v-model) |
|
||||
| `defaultOpen` | `boolean` | `false` | Ouvert au montage (mode non-contrôlé) |
|
||||
| `disabled` | `boolean` | `false` | En-tête non cliquable |
|
||||
| `headerClass` | `string` | `''` | Override classes de l'en-tête (`twMerge`) |
|
||||
| `panelClass` | `string` | `''` | Override classes du panneau (`twMerge`) |
|
||||
|
||||
**Slot par défaut** = contenu du panneau.
|
||||
|
||||
## Comportement : mode `single` vs `multiple`
|
||||
|
||||
- **`multiple`** (défaut) : `modelValue` est un `string[]`. Basculer une
|
||||
section ajoute/retire sa clé du tableau, sans affecter les autres.
|
||||
- **`single`** : `modelValue` est un `string` (clé ouverte, ou `''`/`undefined`
|
||||
si tout fermé). Ouvrir une section ferme la précédente.
|
||||
|
||||
L'en-tête minimal : **titre + chevron animé** uniquement. Pas de badge, pas
|
||||
d'icône leading, pas de slot d'en-tête custom dans cette version (extensible
|
||||
plus tard si besoin métier).
|
||||
|
||||
## Animation & rendu
|
||||
|
||||
- **Ouverture/fermeture** : transition de hauteur via
|
||||
`grid-template-rows: 0fr → 1fr` sur un wrapper en `overflow: hidden`
|
||||
(gère la hauteur dynamique du contenu sans mesure JS).
|
||||
- **Chevron** : `mdi:chevron-down` via `@iconify/vue`, rotation 180° en
|
||||
transition synchronisée avec l'ouverture.
|
||||
- **Tokens Malio** : séparateurs `border-m-border`, titre `text-m-text`,
|
||||
`rounded-malio` au besoin. Tout surchargeable via `headerClass` / `panelClass`
|
||||
fusionnés avec `twMerge()`.
|
||||
|
||||
## Accessibilité (WAI-ARIA Accordion Pattern)
|
||||
|
||||
- En-tête = vrai `<button type="button">` → focusable nativement,
|
||||
Entrée/Espace pour basculer.
|
||||
- `aria-expanded` sur le bouton, `aria-controls` → id du panneau.
|
||||
- Panneau : `role="region"` + `aria-labelledby` → id du bouton.
|
||||
- Sections désactivées : `disabled` + `aria-disabled` sur le bouton.
|
||||
- **Navigation clavier ↑/↓** entre les en-têtes (déplacement du focus d'un
|
||||
en-tête à l'autre), conformément au pattern WAI-ARIA. `Home`/`End`
|
||||
optionnels (nice-to-have).
|
||||
|
||||
## Tests (Vitest + @vue/test-utils, jsdom)
|
||||
|
||||
Helper `mountComponent(props)` colocalisé. Couverture cible :
|
||||
|
||||
**Accordion.test.ts**
|
||||
- Rendu des enfants (slots).
|
||||
- Mode `multiple` : plusieurs sections ouvertes simultanément.
|
||||
- Mode `single` : ouvrir une section ferme la précédente.
|
||||
- v-model contrôlé : `modelValue` pilote l'état ; émission de `update:modelValue`.
|
||||
- Non-contrôlé : `defaultOpen` sur enfants → état initial correct.
|
||||
|
||||
**AccordionItem.test.ts**
|
||||
- Toggle au clic sur l'en-tête.
|
||||
- `disabled` : clic sans effet, attributs `disabled` / `aria-disabled`.
|
||||
- Attributs ARIA : `aria-expanded`, `aria-controls`, `role="region"`,
|
||||
`aria-labelledby` correctement liés.
|
||||
- Navigation clavier ↑/↓ entre en-têtes.
|
||||
- Override de classes via `headerClass` / `panelClass`.
|
||||
|
||||
## Livrables documentaires (convention maison)
|
||||
|
||||
- Mise à jour de `COMPONENTS.md` (tableau de props + exemples).
|
||||
- Mise à jour de `CHANGELOG.md`.
|
||||
- Page playground (ajout à `playground.nav.ts`).
|
||||
- Story Histoire (`app/story/accordion/`).
|
||||
|
||||
## Hors périmètre (YAGNI, V1)
|
||||
|
||||
- Badge / compteur de filtres actifs dans l'en-tête.
|
||||
- Icône leading.
|
||||
- Slot d'en-tête personnalisé.
|
||||
- Persistance d'état (localStorage, URL).
|
||||
|
||||
Ces éléments pourront être ajoutés ultérieurement si un besoin métier concret
|
||||
émerge, sans casser l'API.
|
||||
@@ -0,0 +1,109 @@
|
||||
# Design — `MalioModal`
|
||||
|
||||
Date : 2026-05-26
|
||||
Statut : validé
|
||||
|
||||
## Objectif
|
||||
|
||||
Ajouter un composant `MalioModal` à `@malio/layer-ui` : un dialogue modal centré sur fond
|
||||
assombri. Périmètre initial = **shell générique seul** (pas de variante confirmation/alerte).
|
||||
Le consommateur place ce qu'il veut dans les slots.
|
||||
|
||||
## Décisions clés
|
||||
|
||||
- **Composant autonome** : la Modal réimplémente sa propre logique en s'inspirant du Drawer,
|
||||
**sans modifier le Drawer existant** (zéro risque de régression). Un éventuel refactor vers
|
||||
un composable partagé Drawer/Modal pourra se faire plus tard.
|
||||
- **Largeur unique + override** : une largeur par défaut (`max-w-md`), ajustable par le
|
||||
consommateur via la prop `modalClass` (pas de prop `size`).
|
||||
- **Footer fixe en bas** : header fixe en haut, body scrollable au milieu (`max-h-[85vh]`),
|
||||
footer fixe en bas séparé par une bordure — structure modale classique (≠ Drawer où le footer
|
||||
est dans la zone scrollable).
|
||||
- **Front volontairement simple** pour cette première version.
|
||||
|
||||
## Emplacement & livrables
|
||||
|
||||
- `app/components/malio/modal/Modal.vue`
|
||||
- `app/components/malio/modal/Modal.test.ts` (colocalisé, jsdom)
|
||||
- Page playground `.playground/pages/composant/modal/modal.vue`
|
||||
- Entrée nav : `{label: 'Modal', to: '/composant/modal/modal'}` ajoutée dans la section
|
||||
**NAVIGATION** de `.playground/playground.nav.ts`, juste après le Drawer
|
||||
- Story Histoire `app/story/modal.story.vue`
|
||||
- Mise à jour `COMPONENTS.md` (API) et `CHANGELOG.md` (`### Added`)
|
||||
|
||||
## Structure (template)
|
||||
|
||||
```
|
||||
Teleport to body
|
||||
└ Transition (fade overlay + fade/scale du panneau)
|
||||
└ div fixed inset-0 z-50 flex items-center justify-center p-4 ← centre la modal
|
||||
├ div backdrop (bg-black/40, @click → si dismissable)
|
||||
└ div panel (role=dialog, aria-modal, w-full max-w-md max-h-[85vh], flex flex-col)
|
||||
├ header (slot #header + bouton fermer) ← shrink-0, rendu si slot OU showClose
|
||||
├ body (slot par défaut) ← flex-1 overflow-y-auto
|
||||
└ footer (slot #footer, bordure haute) ← shrink-0, rendu si slot #footer présent
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Prop | Type | Défaut | Rôle |
|
||||
|------|------|--------|------|
|
||||
| `id` | `string` | `''` | id du composant (sinon généré via `useId`) |
|
||||
| `modelValue` | `boolean` | `undefined` | ouverture (contrôlé) ; fallback `localValue` interne si non fourni |
|
||||
| `showClose` | `boolean` | `true` | affiche le bouton de fermeture (croix) dans le header |
|
||||
| `dismissable` | `boolean` | `true` | clic sur le backdrop ferme la modal |
|
||||
| `closeOnEscape` | `boolean` | `true` | touche Échap ferme la modal |
|
||||
| `ariaLabel` | `string` | `''` | label ARIA si pas de slot header |
|
||||
| `modalClass` | `string` | `''` | override du panneau (ex. largeur `max-w-lg`) |
|
||||
| `overlayClass` | `string` | `''` | override du backdrop |
|
||||
| `headerClass` | `string` | `''` | override du header |
|
||||
| `bodyClass` | `string` | `''` | override du body |
|
||||
| `footerClass` | `string` | `''` | override du footer |
|
||||
|
||||
Mêmes props que le Drawer, **sans `side`** ; `drawerClass` → `modalClass`.
|
||||
|
||||
### Events
|
||||
|
||||
- `update:modelValue(value: boolean)` — pour le `v-model`
|
||||
- `close()` — émis à chaque fermeture (croix, backdrop, Échap, fermeture programmatique)
|
||||
|
||||
### Slots
|
||||
|
||||
- `#header` — contenu du header (titre…). Si absent **et** `showClose=false`, header non rendu.
|
||||
- *(défaut)* — corps de la modal (zone scrollable)
|
||||
- `#footer` — pied (boutons d'action). Rendu uniquement si le slot est fourni.
|
||||
|
||||
## Comportements repris du Drawer
|
||||
|
||||
- **Teleport** vers `<body>`.
|
||||
- **Focus-trap** : focus initial sur le 1er élément focusable (sinon le panneau) ; boucle
|
||||
Tab / Shift+Tab ; restauration du focus précédent à la fermeture.
|
||||
- **Scroll-lock partagé** : compteur module-level (`openModalCount`) — `overflow:hidden` sur
|
||||
`<body>` tant qu'au moins une instance est ouverte, libéré par la dernière (gère aussi
|
||||
`onBeforeUnmount`).
|
||||
- **Pattern contrôlé / non-contrôlé** : `isControlled = computed(() => modelValue !== undefined)`
|
||||
avec `localValue` en fallback ; `isRendered` pour démonter après la transition de sortie.
|
||||
- **`defineOptions({ name: 'MalioModal', inheritAttrs: false })`** + `v-bind="attrs"` sur le
|
||||
conteneur.
|
||||
- **Transition** : fade de l'overlay + fade léger **et scale** (`scale-95 → scale-100`) du
|
||||
panneau (remplace le translate latéral du Drawer).
|
||||
|
||||
## Accessibilité
|
||||
|
||||
`role="dialog"`, `aria-modal="true"`, `aria-labelledby` vers l'id du header si présent (sinon
|
||||
`aria-label`), bouton fermer avec `aria-label="Fermer"`.
|
||||
|
||||
## Tests (Vitest + @vue/test-utils, jsdom, colocalisés)
|
||||
|
||||
- Rendu conditionnel (fermé → non rendu ; ouvert → panneau + backdrop).
|
||||
- `v-model` / contrôlé vs non-contrôlé.
|
||||
- Fermeture : croix, backdrop (selon `dismissable`), Échap (selon `closeOnEscape`) ; events
|
||||
`update:modelValue(false)` + `close`.
|
||||
- Slots header / défaut / footer (footer rendu seulement si fourni ; header rendu si slot OU
|
||||
`showClose`).
|
||||
- Accessibilité : `role`, `aria-modal`, `aria-labelledby`/`aria-label`.
|
||||
- Focus-trap : focus initial, boucle Tab/Shift+Tab.
|
||||
- Scroll-lock : `overflow:hidden` à l'ouverture, libéré à la fermeture (et avec instances
|
||||
multiples).
|
||||
@@ -0,0 +1,173 @@
|
||||
# Design — `MalioTimePicker` (sélecteur d'heure molette, MUI-39)
|
||||
|
||||
Date : 2026-05-27
|
||||
Branche : `feature/MUI-39-developper-le-composant-select-heure`
|
||||
Statut : validé (design), prêt pour plan d'implémentation
|
||||
|
||||
## Contexte
|
||||
|
||||
`MalioDateTime` a été livré en version intérimaire (MUI-33) avec un `<input type="time">`
|
||||
natif sous la grille du calendrier, volontairement isolé dans `DateTime.vue` en attendant
|
||||
une maquette pour le sélecteur d'heure dédié. La maquette est maintenant fournie
|
||||
(`time.png` à la racine) : c'est une **molette de défilement style iOS** avec bande de
|
||||
sélection centrale (pastille teintée), valeur centrée en noir/gras, voisins estompés.
|
||||
|
||||
Ce ticket développe ce sélecteur dédié comme **nouveau composant** et rebranche `DateTime`
|
||||
dessus.
|
||||
|
||||
## Décisions (issues du brainstorming)
|
||||
|
||||
| Sujet | Décision |
|
||||
|-------|----------|
|
||||
| Relation à `MalioTime` (champs texte HH/MM) | **Nouveau composant séparé** ; `MalioTime` reste intact |
|
||||
| Nom public | **`MalioTimePicker`** (`time/TimePicker.vue`) |
|
||||
| Mécanique | **Molette iOS** : scroll vertical, snap, bande centrale ; valeur centrée = sélection |
|
||||
| Colonnes | **2 molettes** : heures `00–23`, minutes `00–59`, pas de **1** |
|
||||
| Format `modelValue` | `"HH:MM"` (24h) `string \| null` |
|
||||
| Bornes min/max | **Non** (YAGNI) — colonnes pleines |
|
||||
| Interaction | **Scroll + clic (recentre) + clavier (↑/↓)** — accessible |
|
||||
| Forme | **Champ + popover** (floating-label + icône horloge), comme `Date`/`DateTime` |
|
||||
| Style panneau | Même style que le popover date **mais sans `rounded-b`** |
|
||||
| Extrémités molette | **Boucle infinie** (23→00 sans fin) |
|
||||
| Approche technique | **CSS `scroll-snap` natif** + repositionnement par bloc pour la boucle (zéro dépendance) |
|
||||
| Rebranchement `DateTime` | **Dans cette itération** : retrait de l'`<input type="time">` natif |
|
||||
|
||||
## Arborescence des fichiers
|
||||
|
||||
```
|
||||
app/components/malio/time/
|
||||
TimePicker.vue # NOUVEAU — public <MalioTimePicker> : champ + popover
|
||||
TimePicker.test.ts
|
||||
internal/
|
||||
TimeWheels.vue # NOUVEAU — brique réutilisable : les 2 molettes (v-model "HH:MM")
|
||||
TimeWheel.vue # NOUVEAU — une colonne molette infinie (v-model number)
|
||||
composables/
|
||||
useInfiniteWheel.ts # NOUVEAU — scroll-snap + boucle infinie + index centré
|
||||
useInfiniteWheel.test.ts
|
||||
timeFormat.ts # NOUVEAU — parse/format/pad/clamp "HH:MM"
|
||||
timeFormat.test.ts
|
||||
```
|
||||
|
||||
`Time.vue` (`MalioTime`, champs texte) **n'est pas modifié**.
|
||||
|
||||
## Composants & responsabilités
|
||||
|
||||
### `TimeWheel.vue` (interne)
|
||||
Une colonne molette infinie.
|
||||
- **Props** : `modelValue: number`, `values: number[]` (ex. `0..23`), `ariaLabel: string`.
|
||||
- **Emits** : `update:modelValue (value: number)`.
|
||||
- Délègue scroll/snap/boucle/index-centré au composable `useInfiniteWheel`.
|
||||
- Rendu : buffer de valeurs répété ; item centré en noir/gras, voisins estompés (opacité
|
||||
décroissante avec la distance au centre).
|
||||
- **Clic** sur un item visible → recentre (`scrollToValue`).
|
||||
- **Clavier** : ↑/↓ changent l'index (et scrollent), `role="spinbutton"`, `tabindex=0`,
|
||||
`aria-valuenow` / `aria-valuemin` / `aria-valuemax` / `aria-valuetext`, `aria-label`.
|
||||
|
||||
### `TimeWheels.vue` (interne — la brique partagée)
|
||||
Compose les 2 molettes + la bande centrale.
|
||||
- **Props** : `modelValue: string` (`"HH:MM"`).
|
||||
- **Emits** : `update:modelValue (value: string)`.
|
||||
- Splitte via `timeFormat` → `heures` + `minutes` ; passe à chaque `TimeWheel` ; recompose
|
||||
et émet à chaque changement.
|
||||
- **Bande centrale** : pastille teintée (`bg-m-primary/10` ou équivalent) en overlay
|
||||
positionné au centre, traversant les 2 colonnes ; le « : » séparateur entre les colonnes.
|
||||
- **C'est ce bloc qui est inséré dans `DateTime`** (et dans le popover de `TimePicker`).
|
||||
|
||||
### `TimePicker.vue` (public `MalioTimePicker`)
|
||||
Champ + popover.
|
||||
- Input **lecture-seule** affichant `"HH:MM"` (ou placeholder), floating-label, icône
|
||||
`mdi:clock-outline`, bouton **clear** (si `clearable` et rempli).
|
||||
- Au clic → ouvre un **popover** au style du popover date **sans `rounded-b`**, contenant
|
||||
`<TimeWheels v-model>`.
|
||||
- **Props famille** : `id`, `name`, `label`, `modelValue`, `placeholder`, `required`,
|
||||
`disabled`, `readonly`, `hint`, `error`, `success`, `clearable`, `inputClass`,
|
||||
`labelClass`, `groupClass`.
|
||||
- Pattern **contrôlé/non-contrôlé** (`isControlled = computed(() => props.modelValue !== undefined)`).
|
||||
- Fermeture au **clic extérieur** (handler local sur le root ; on ne réutilise pas
|
||||
`useCalendarPopover` qui porte une logique `viewMode` propre au calendrier).
|
||||
- `disabled`/`readonly` n'ouvrent pas le popover.
|
||||
- Ligne `hint`/`error`/`success` + `aria-invalid`/`aria-describedby` comme `CalendarField`.
|
||||
|
||||
### `useInfiniteWheel.ts` (composable — cœur logique)
|
||||
Toute la mécanique délicate, isolée et testable.
|
||||
- **Entrées** : ref du conteneur scrollable, `itemHeight`, longueur des valeurs, valeur
|
||||
courante, callback de changement.
|
||||
- **Sorties** : `centeredIndex` (`round(scrollTop / itemHeight) % len`), `scrollToValue(value, smooth)`,
|
||||
handlers `onScroll` / `onScrollEnd` / clavier.
|
||||
- **Boucle infinie** : buffer répété N fois ; quand `scrollTop` approche un bord, on
|
||||
repositionne `scrollTop` d'un bloc (hauteur d'un cycle de valeurs) **sans animation**,
|
||||
position visuelle identique → illusion d'infini.
|
||||
- Garde anti-boucle entre scroll programmatique et émission `modelValue`.
|
||||
|
||||
### `timeFormat.ts` (composable pur)
|
||||
- `parseTime(value: string | null): { hours: number; minutes: number } | null`
|
||||
- `formatTime(hours: number, minutes: number): string` (zéro-paddé `"HH:MM"`)
|
||||
- `padSegment`, `clampHours` (0–23), `clampMinutes` (0–59).
|
||||
|
||||
## Flux de données
|
||||
|
||||
1. `TimePicker` détient `modelValue` `"HH:MM" | null` (contrôlé/non-contrôlé).
|
||||
2. À l'ouverture, `TimeWheels` reçoit la valeur courante ; si **vide**, les molettes se
|
||||
centrent sur un **défaut neutre `00:00` sans émettre**. La **1ʳᵉ interaction**
|
||||
(scroll/clic/clavier) committe et émet.
|
||||
3. `TimeWheels` splitte `"HH:MM"` → 2 nombres → `TimeWheel` ; tout changement recompose
|
||||
`"HH:MM"` et remonte via `update:modelValue`.
|
||||
4. Le **bouton clear** remet la valeur à vide/`null`.
|
||||
5. Le popover **reste ouvert** pendant le réglage (cohérent avec `DateTime`) ; se ferme au
|
||||
clic extérieur.
|
||||
|
||||
## Rebranchement `DateTime.vue`
|
||||
|
||||
- Remplacer le bloc `<input type="time">` (lignes ~31-41) par :
|
||||
`<TimeWheels :model-value="timeValue || '00:00'" @update:model-value="onTimeChange" />`.
|
||||
- `onTimeChange(hhmm)` reprend la logique existante de `onTimeInput` : si `datePart`
|
||||
présent → `composeDateTime(datePart, hhmm)` ; sinon → `pendingTime.value = hhmm`.
|
||||
- Supprimer `timeInputId` et le handler `onTimeInput` natif. `pendingTime` / `composeDateTime`
|
||||
/ `splitDateTime` inchangés.
|
||||
- **Mettre à jour `DateTime.test.ts`** : l'ancien test ciblait `data-test="time-input"` /
|
||||
`type="time"` ; le réécrire pour interagir avec `TimeWheels` (émission de
|
||||
`update:modelValue` depuis la brique).
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- Molette : `role="spinbutton"`, `tabindex=0`, `aria-label` « Heures » / « Minutes »,
|
||||
`aria-valuenow/valuemin/valuemax/valuetext`, flèches ↑/↓.
|
||||
- Champ : `aria-haspopup="dialog"`, `aria-expanded`, popover `role="dialog"`,
|
||||
`aria-invalid` + `aria-describedby` reliés à la ligne hint/error/success.
|
||||
- Label lié `for`/`id`.
|
||||
|
||||
## Stratégie de tests
|
||||
|
||||
- **`useInfiniteWheel.test.ts`** : index centré depuis `scrollTop`, `scrollToValue`, math du
|
||||
repositionnement de boucle (jump par bloc), modulo/clamp.
|
||||
- **`TimeWheel.test.ts`** : flèches clavier changent la valeur & émettent, clic recentre,
|
||||
attributs aria (`role`, `aria-valuenow`...).
|
||||
- **`TimeWheels.test.ts`** : split/compose `"HH:MM"`, émission de la valeur combinée, 2
|
||||
molettes rendues, séparateur.
|
||||
- **`TimePicker.test.ts`** : rendu, label/id, ouverture popover au clic, affichage de
|
||||
`modelValue`, clear, contrôlé/non-contrôlé, `disabled`/`readonly` n'ouvrent pas, aria.
|
||||
- **`timeFormat.test.ts`** : parse/format/pad/clamp (valeurs limites, `null`, invalides).
|
||||
- **`DateTime.test.ts`** : mis à jour pour la brique molette.
|
||||
- ⚠️ **Limite jsdom** : pas de scroll-snap réel. La mécanique est testée via le composable
|
||||
(métriques `scrollTop`/`itemHeight` mockées) ; les tests composant portent sur
|
||||
émissions/clavier/clic/aria, pas le snap pixel.
|
||||
- ⚠️ **Tests flaky connus** (Date & InputRichText) : relancer 2–3× avant de conclure à une
|
||||
régression ; hook pre-commit parfois flaky → `--no-verify` documenté.
|
||||
|
||||
## Livrables documentation (conventions projet)
|
||||
|
||||
- **`COMPONENTS.md`** : ajout `MalioTimePicker` + note « `DateTime` utilise désormais la
|
||||
molette ». (manuel)
|
||||
- **`CHANGELOG.md`** : entrée. (manuel)
|
||||
- **Playground** : page dédiée + entrée dans `playground.nav.ts` (routage Nuxt centralisé).
|
||||
- **Histoire** : `TimePicker.story.vue`.
|
||||
- Appui sur la skill `creating-malio-component` pendant l'implémentation.
|
||||
|
||||
## Hors scope
|
||||
|
||||
- Bornes horaires `min`/`max`.
|
||||
- Format 12h / AM-PM.
|
||||
- Granularité minutes configurable (`minuteStep`).
|
||||
- Colonne secondes.
|
||||
|
||||
Ces points pourront faire l'objet d'itérations ultérieures si le besoin métier émerge.
|
||||
Reference in New Issue
Block a user