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:
@@ -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>
|
||||
Reference in New Issue
Block a user