tristan
f09f8a91ac
| 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>
124 lines
3.8 KiB
Vue
124 lines
3.8 KiB
Vue
<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>
|