[#MUI-15] Création d'un composant drawer (#21)

| 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é Reviewed-on: #21 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-03-24 10:49:27 +00:00
parent bcadd46ce2
commit f09f8a91ac
6 changed files with 459 additions and 0 deletions
--- a/app/story/drawer/drawer.story.vue
+++ b/app/story/drawer/drawer.story.vue
@@ -0,0 +1,123 @@
+<template>
+  <Story title="Overlay/Drawer">
+    <Variant title="Simple">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showSimple = true"
+        >
+          Ouvrir le drawer
+        </button>
+        <MalioDrawer v-model="showSimple" title="Détails">
+          <p>Contenu simple du drawer.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Avec formulaire">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showForm = true"
+        >
+          Ouvrir le formulaire
+        </button>
+        <MalioDrawer v-model="showForm" title="Nouveau contact">
+          <div class="flex flex-col gap-4">
+            <MalioInputText v-model="formNom" label="Nom" />
+            <MalioInputText v-model="formPrenom" label="Prénom" />
+            <MalioButton label="Enregistrer" button-class="w-full" @click="showForm = false" />
+          </div>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Sans bouton fermer">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showNoClose = true"
+        >
+          Ouvrir (sans croix)
+        </button>
+        <MalioDrawer v-model="showNoClose" title="Information" :show-close="false">
+          <p>Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Largeur personnalisée">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showWide = true"
+        >
+          Ouvrir (large)
+        </button>
+        <MalioDrawer v-model="showWide" title="Drawer large" drawer-class="max-w-2xl">
+          <p>Ce drawer utilise une largeur personnalisée via la prop drawerClass.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioDrawer
+
+Panneau latéral (drawer) qui s'ouvre depuis la droite avec un fond semi-transparent.
+
+## Props détaillées
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto-généré | Identifiant HTML du drawer |
+| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
+| `title` | `string` | `''` | Titre affiché dans le header |
+| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
+| `drawerClass` | `string` | `''` | Classes CSS additionnelles sur le panneau (fusionnées via `twMerge`) |
+
+## Comportement
+
+- Le drawer s'ouvre en glissant depuis la droite avec une transition
+- Un backdrop semi-transparent couvre le reste de la page
+- Clic sur le backdrop ferme le drawer
+- Bouton de fermeture (croix) en haut à droite, masquable via `showClose`
+- Contenu scrollable si plus haut que la fenêtre
+- Teleport vers `<body>` pour éviter les problèmes de z-index
+
+## Accessibilité
+
+- `role="dialog"` et `aria-modal="true"` sur le panneau
+- `aria-labelledby` lié au titre
+- Bouton fermer avec `aria-label="Fermer"`
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `boolean` | Émis à la fermeture (backdrop ou bouton) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Contenu du drawer |
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioDrawer from '../../components/malio/drawer/Drawer.vue'
+import MalioInputText from '../../components/malio/input/InputText.vue'
+import MalioButton from '../../components/malio/button/Button.vue'
+
+defineOptions({ name: 'DrawerStory' })
+
+const showSimple = ref(false)
+const showForm = ref(false)
+const showNoClose = ref(false)
+const showWide = ref(false)
+
+const formNom = ref('Dupont')
+const formPrenom = ref('Jean')
+</script>