docs/improve docs

.vitepress/config.ts

@@ -98,10 +98,12 @@ const composants = [
  {
  text: 'DsfrAccordion',
  link: '/composants/DsfrAccordion.md',
- },
- {
- text: 'DsfrAccordionsGroup',
- link: '/composants/DsfrAccordionsGroup.md',
+ items: [
+ {
+ text: 'DsfrAccordionsGroup',
+ link: '/composants/DsfrAccordionsGroup.md',
+ },
+ ],
  },
  {
  text: 'DsfrAlert',
@@ -122,10 +124,12 @@ const composants = [
  {
  text: 'DsfrButton',
  link: '/composants/DsfrButton.md',
- },
- {
- text: 'DsfrButtonGroup',
- link: '/composants/DsfrButtonGroup.md',
+ items: [
+ {
+ text: 'DsfrButtonGroup',
+ link: '/composants/DsfrButtonGroup.md',
+ },
+ ],
  },
  {
  text: 'DsfrCallout',
@@ -138,10 +142,12 @@ const composants = [
  {
  text: 'DsfrCheckbox',
  link: '/composants/DsfrCheckbox.md',
- },
- {
- text: 'DsfrCheckboxSet',
- link: '/composants/DsfrCheckboxSet.md',
+ items: [
+ {
+ text: 'DsfrCheckboxSet',
+ link: '/composants/DsfrCheckboxSet.md',
+ },
+ ],
  },
  {
  text: 'DsfrConsent',
@@ -170,34 +176,38 @@ const composants = [
  {
  text: 'DsfrFooter',
  link: '/composants/DsfrFooter.md',
- },
- {
- text: 'DsfrFooterLinkList',
- link: '/composants/DsfrFooterLinkList.md',
- },
- {
- text: 'DsfrFooterLink',
- link: '/composants/DsfrFooterLink.md',
- },
- {
- text: 'DsfrFooterPartners',
- link: '/composants/DsfrFooterPartners.md',
- },
- {
- text: 'DsfrFranceConnect',
- link: '/composants/DsfrFranceConnect.md',
+ items: [
+ {
+ text: 'DsfrFooterLinkList',
+ link: '/composants/DsfrFooterLinkList.md',
+ },
+ {
+ text: 'DsfrFooterLink',
+ link: '/composants/DsfrFooterLink.md',
+ },
+ {
+ text: 'DsfrFooterPartners',
+ link: '/composants/DsfrFooterPartners.md',
+ },
+ {
+ text: 'DsfrFranceConnect',
+ link: '/composants/DsfrFranceConnect.md',
+ },
+ ],
  },
  {
  text: 'DsfrHeader',
  link: '/composants/DsfrHeader.md',
- },
- {
- text: 'DsfrHeaderMenuLink',
- link: '/composants/DsfrHeaderMenuLink.md',
- },
- {
- text: 'DsfrHeaderMenuLinks',
- link: '/composants/DsfrHeaderMenuLinks.md',
+ items: [
+ {
+ text: 'DsfrHeaderMenuLink',
+ link: '/composants/DsfrHeaderMenuLink.md',
+ },
+ {
+ text: 'DsfrHeaderMenuLinks',
+ link: '/composants/DsfrHeaderMenuLinks.md',
+ },
+ ],
  },
  {
  text: 'DsfrHighlight',
@@ -206,10 +216,12 @@ const composants = [
  {
  text: 'DsfrInput',
  link: '/composants/DsfrInput.md',
- },
- {
- text: 'DsfrInputGroup',
- link: '/composants/DsfrInputGroup.md',
+ items: [
+ {
+ text: 'DsfrInputGroup',
+ link: '/composants/DsfrInputGroup.md',
+ },
+ ],
  },
  {
  text: 'DsfrLanguageSelector',
@@ -226,10 +238,12 @@ const composants = [
  {
  text: 'DsfrRadioButton',
  link: '/composants/DsfrRadioButton.md',
- },
- {
- text: 'DsfrRadioButtonSet',
- link: '/composants/DsfrRadioButtonSet.md',
+ items: [
+ {
+ text: 'DsfrRadioButtonSet',
+ link: '/composants/DsfrRadioButtonSet.md',
+ },
+ ],
  },
  {
  text: 'DsfrRange',
@@ -242,10 +256,12 @@ const composants = [
  {
  text: 'DsfrSegmented',
  link: '/composants/DsfrSegmented.md',
- },
- {
- text: 'DsfrSegmentedSet',
- link: '/composants/DsfrSegmentedSet.md',
+ items: [
+ {
+ text: 'DsfrSegmentedSet',
+ link: '/composants/DsfrSegmentedSet.md',
+ },
+ ],
  },
  {
  text: 'DsfrSelect',
@@ -254,26 +270,38 @@ const composants = [
  {
  text: 'DsfrTable',
  link: '/composants/DsfrTable.md',
- },
- {
- text: 'DsfrTableHeader',
- link: '/composants/DsfrTableHeader.md',
- },
- {
- text: 'DsfrTableHeaders',
- link: '/composants/DsfrTableHeaders.md',
- },
- {
- text: 'DsfrTableRow',
- link: '/composants/DsfrTableRow.md',
- },
- {
- text: 'DsfrTableCell',
- link: '/composants/DsfrTableCell.md',
+ items: [
+ {
+ text: 'DsfrTableHeader',
+ link: '/composants/DsfrTableHeader.md',
+ },
+ {
+ text: 'DsfrTableHeaders',
+ link: '/composants/DsfrTableHeaders.md',
+ },
+ {
+ text: 'DsfrTableRow',
+ link: '/composants/DsfrTableRow.md',
+ },
+ {
+ text: 'DsfrTableCell',
+ link: '/composants/DsfrTableCell.md',
+ },
+ ],
  },
  {
  text: 'DsfrTabs',
  link: '/composants/DsfrTabs.md',
+ items: [
+ {
+ text: 'DsfrTabItem',
+ link: '/composants/DsfrTabItem.md',
+ },
+ {
+ text: 'DsfrTabContent',
+ link: '/composants/DsfrTabContent.md',
+ },
+ ],
  },
  {
  text: 'DsfrTag',
@@ -282,6 +310,12 @@ const composants = [
  {
  text: 'DsfrTile',
  link: '/composants/DsfrTile.md',
+ items: [
+ {
+ text: 'DsfrTiles',
+ link: '/composants/DsfrTiles.md',
+ },
+ ],
  },
  {
  text: 'DsfrToggleSwitch',

src/components/DsfrTabs/DsfrTabContent.md

@@ -0,0 +1,53 @@
+# Contenu d’onglet - `DsfrTabContent`
+
+## 🌟 Introduction
+
+Le composant `DsfrTabContent` est conçu pour être utilisé comme panneau de contenu dans une interface à onglets. Il utilise une transition fluide pour animer l'affichage du contenu de l'onglet sélectionné.
+
+Ce composant **doit** s’utiliser dans un [`DsfrTabs`](/composants/DsfrTabs).
+
+## 📐 Structure
+
+- `<DsfrTabContent>` : Le composant principal.
+ - Affiche le contenu associé à un onglet.
+ - Utilise une transition animée pour l'apparition et la disparition du contenu.
+ - Utilise des classes pour gérer l'état de sélection de l'onglet.
+
+## 🛠️ Props
+
+| Propriété | Type | Description | Valeur par défaut |
+|-------------|-----------|------------------------------------------------------------------|-------------------|
+| `panelId` | `string` | ID unique pour le panneau, utilisé pour l'accessibilité. | `obligatoire` |
+| `tabId` | `string` | ID unique de l'onglet associé, utilisé pour l'accessibilité. | `obligatoire` |
+
+## 📡 Événements
+
+Ce composant ne déclenche pas d'événements spécifiques.
+
+## 🧩 Slots
+
+- `default` : Slot pour insérer le contenu de l'onglet à afficher.
+
+## 📝 Exemples
+
+::: code-group
+
+<Story data-title="Démo" min-h="600px">
+ <DsfrTabsDemoComplex />
+</Story>
+
+<<< docs-demo/DsfrTabsDemoComplex.vue [Code de la démo]
+
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+<<< DsfrTabContent.vue
+<<< DsfrTabs.types.ts
+<<< injection-key.ts
+:::
+
+<script setup lang="ts">
+import DsfrTabsDemoComplex from './docs-demo/DsfrTabsDemoComplex.vue'
+</script>

src/components/DsfrTabs/DsfrTabContent.vue

@@ -2,10 +2,11 @@
 import { computed, inject, toRef } from 'vue'
 
 import { registerTabKey } from './injection-key'
-import type { DsfrTabContentProps } from './DsfrTabs.types'
-
-export type { DsfrTabContentProps }
 
+export type DsfrTabContentProps = {
+ panelId: string
+ tabId: string
+}
 const props = defineProps<DsfrTabContentProps>()
 
 const values = { true: '100%', false: '-100%' }

src/components/DsfrTabs/DsfrTabItem.md

@@ -0,0 +1,59 @@
+# Onglet - `DsfrTabItem`
+
+## 🌟 Introduction
+
+Le composant `DsfrTabItem` représente un onglet individuel dans un ensemble d'onglets. Il gère les interactions utilisateur telles que les clics et les commandes clavier pour naviguer entre les onglets. Ce composant offre également une intégration avec des icônes pour une expérience utilisateur enrichie et intuitive.
+
+Ce composant **doit** s’utiliser dans un [`DsfrTabs`](/composants/DsfrTabs).
+
+## 📐 Structure
+
+- `<DsfrTabItem>` : Un élément de liste représentant un onglet.
+ - Contient un bouton pour activer l'onglet.
+ - Gère les commandes clavier pour permettre la navigation entre les onglets.
+
+## 🛠️ Props
+
+| Propriété | Type | Description | Valeur par défaut |
+|-----------|----------|------------------------------------------------------------------|-------------------|
+| `panelId` | `string` | ID unique du panneau de contenu associé à cet onglet. | `obligatoire` |
+| `tabId` | `string` | ID unique de l'onglet, utilisé pour l'accessibilité. | `obligatoire` |
+| `icon` | `string` | Nom de l'icône à afficher dans l'onglet (facultatif). | `undefined` |
+
+## 📡 Événements
+
+- `click` : Événement émis lorsque l'onglet est cliqué, envoie l’index de l’onglet (`number`, entier commençant à `0`).
+- `next` : Événement émis lorsque l'utilisateur appuie sur la touche "flèche droite" ou "flèche bas".
+- `previous` : Événement émis lorsque l'utilisateur appuie sur la touche "flèche gauche" ou "flèche haut".
+- `first` : Événement émis lorsque l'utilisateur appuie sur la touche "Home".
+- `last` : Événement émis lorsque l'utilisateur appuie sur la touche "End".
+
+## 🧩 Slots
+
+- `default` : Slot pour insérer le contenu de l'onglet.
+
+## 📝 Exemples
+
+::: code-group
+
+<Story data-title="Démo" min-h="600px">
+ <DsfrTabsDemoComplex />
+</Story>
+
+<<< docs-demo/DsfrTabsDemoComplex.vue [Code de la démo]
+
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+<<< DsfrTabContent.vue
+<<< DsfrTabs.types.ts
+<<< injection-key.ts
+:::
+
+Le `DsfrTabItem` utilise `v-on:keydown` pour gérer les interactions clavier et permettre la navigation entre les onglets. Le composant utilise également `watch` pour gérer la mise au point automatique lorsque l'onglet est sélectionné, améliorant ainsi l'accessibilité et l'expérience utilisateur.
+
+<script setup lang="ts">
+import DsfrTabsDemoComplex from './docs-demo/DsfrTabsDemoComplex.vue'
+</script>