feat: Ajout des composants modal, accordeon, datetime avec selecteur d'heure à la molette (#56)

| 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>
2026-05-27 12:11:51 +00:00
parent 7d7b2fb720
commit acd531f69e
36 changed files with 6581 additions and 30 deletions
@@ -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>