tristan
82c4cfaa90
All checks were successful
Release / release (push) Successful in 1m14s
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: kevin <kevin@yuno.malio.fr> Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr> Reviewed-on: #23 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
110 lines
3.3 KiB
Vue
110 lines
3.3 KiB
Vue
<template>
|
|
<Story title="Tab/List">
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec icônes</h2>
|
|
<MalioTabList v-model="withIcons" :tabs="tabs">
|
|
<template #qualimat><p class="p-4">Contenu onglet Qualimat</p></template>
|
|
<template #adresses><p class="p-4">Contenu onglet Adresses</p></template>
|
|
<template #contacts><p class="p-4">Contenu onglet Contacts</p></template>
|
|
<template #comptabilite><p class="p-4">Contenu onglet Comptabilité</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
|
|
<MalioTabList v-model="withoutIcons" :tabs="tabsNoIcon">
|
|
<template #tab1><p class="p-4">Contenu onglet 1</p></template>
|
|
<template #tab2><p class="p-4">Contenu onglet 2</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Deuxième onglet actif par défaut</h2>
|
|
<MalioTabList v-model="secondActive" :tabs="tabs">
|
|
<template #qualimat><p class="p-4">Contenu Qualimat</p></template>
|
|
<template #adresses><p class="p-4">Contenu Adresses (actif par défaut)</p></template>
|
|
<template #contacts><p class="p-4">Contenu Contacts</p></template>
|
|
<template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
</div>
|
|
</Story>
|
|
</template>
|
|
|
|
<docs lang="md">
|
|
# MalioTabList
|
|
|
|
Navigation par onglets avec icônes optionnelles et gestion show/hide des panneaux via slots nommés.
|
|
|
|
---
|
|
|
|
## Props détaillées
|
|
|
|
### tabs
|
|
|
|
- Type: `Array<{ key: string; label: string; icon?: string }>`
|
|
- Requis: oui
|
|
- Description: Définit les onglets. Chaque entrée correspond à un slot nommé par `key`.
|
|
|
|
### modelValue
|
|
|
|
- Type: `string`
|
|
- Description: Clé de l'onglet actif. Sans v-model, le premier onglet est actif par défaut (mode non contrôlé).
|
|
|
|
### id
|
|
|
|
- Type: `string`
|
|
- Description: Préfixe pour les IDs d'accessibilité. Auto-généré si absent.
|
|
|
|
---
|
|
|
|
## Slots
|
|
|
|
Un slot nommé par `tab.key` pour chaque onglet. Le contenu du slot est affiché/masqué automatiquement.
|
|
|
|
```html
|
|
<MalioTabList :tabs="[{ key: 'foo', label: 'Foo' }]">
|
|
<template #foo>Contenu de Foo</template>
|
|
</MalioTabList>
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibilité
|
|
|
|
- `role="tablist"` sur le conteneur
|
|
- `role="tab"` avec `aria-selected`, `aria-controls`, `tabindex` sur chaque bouton
|
|
- `role="tabpanel"` avec `aria-labelledby` sur chaque panneau
|
|
|
|
---
|
|
|
|
## Events
|
|
|
|
### update:modelValue
|
|
|
|
- Émis au clic sur un onglet
|
|
- Retourne la clé (`string`) de l'onglet sélectionné
|
|
</docs>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import MalioTabList from '../../components/malio/tab/TabList.vue'
|
|
|
|
const tabs = [
|
|
{ key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },
|
|
{ key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
|
|
{ key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
|
|
{ key: 'comptabilite', label: 'Comptabilité', icon: 'mdi:web' },
|
|
]
|
|
|
|
const tabsNoIcon = [
|
|
{ key: 'tab1', label: 'Onglet 1' },
|
|
{ key: 'tab2', label: 'Onglet 2' },
|
|
]
|
|
|
|
const withIcons = ref('qualimat')
|
|
const withoutIcons = ref('tab1')
|
|
const secondActive = ref('adresses')
|
|
</script>
|