app/story/drawer/drawer.story.vue

@@ -1,20 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const showRight = ref(false)
+const showLeft = ref(false)
+const showForm = ref(false)
+const showNoDismiss = ref(false)
+</script>
+
 <template>
   <Story title="Overlay/Drawer">
-    <Variant title="Simple">
+    <Variant title="Droite (défaut)">
       <div class="p-4">
         <button
           class="rounded bg-m-btn-primary px-4 py-2 text-white"
-          @click="showSimple = true"
+          @click="showRight = true"
         >
-          Ouvrir le drawer
+          Ouvrir à droite
         </button>
-        <MalioDrawer v-model="showSimple" title="Détails">
+        <MalioDrawer v-model="showRight">
+          <template #header>
+            <h2 class="text-xl font-bold">Détails</h2>
+          </template>
           <p>Contenu simple du drawer.</p>
         </MalioDrawer>
       </div>
     </Variant>
 
-    <Variant title="Avec formulaire">
+    <Variant title="Gauche">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showLeft = true"
+        >
+          Ouvrir à gauche
+        </button>
+        <MalioDrawer v-model="showLeft" side="left">
+          <template #header>
+            <h2 class="text-xl font-bold">Navigation</h2>
+          </template>
+          <p>Ce drawer glisse depuis la gauche.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Avec footer collant">
       <div class="p-4">
         <button
           class="rounded bg-m-btn-primary px-4 py-2 text-white"
@@ -22,102 +51,38 @@
         >
           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" />
+        <MalioDrawer v-model="showForm">
+          <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>
+            <div class="sticky bottom-0 flex gap-3 bg-white py-4">
+              <MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
+            </div>
+          </template>
         </MalioDrawer>
       </div>
     </Variant>
 
-    <Variant title="Sans bouton fermer">
+    <Variant title="Non dismissable">
       <div class="p-4">
         <button
           class="rounded bg-m-btn-primary px-4 py-2 text-white"
-          @click="showNoClose = true"
+          @click="showNoDismiss = true"
         >
-          Ouvrir (sans croix)
+          Ouvrir
         </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 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 ce drawer. Utilisez la croix.</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>