docs: 📝 améliore la documentation

- amélioration de la documentation de l’infobulle
- homogénéisation de la documentation des composants

demo-app/views/AppHome.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import pDebounce from 'p-debounce'
 import { ref, watch } from 'vue'
 
@@ -71,6 +71,27 @@ const onClick = () => {
 }
 
 const activeAccordion = ref(-1)
+
+const selection = ref([])
+const headers = [
+  {
+    key: 'id',
+    label: 'ID',
+  },
+  {
+    key: 'name',
+    label: 'Name',
+  },
+  {
+    key: 'email',
+    label: 'Email',
+  },
+]
+const rows = [
+  [1, 'John Doe', '[email protected]'],
+  [2, 'Jane Doe', '[email protected]'],
+  [3, 'James Bond', '[email protected]'],
+]
 </script>
 
 <template>
@@ -126,6 +147,36 @@ const activeAccordion = ref(-1)
       </DsfrAccordion>
     </DsfrAccordionsGroup>
   </div>
+  <div>
+    <DsfrDataTable
+      v-model:selection="selection"
+      title="Titre du tableau (caption)"
+      :headers-row="headers"
+      :rows="rows"
+      selectable-rows
+      sortable-rows
+      :row-key="0"
+    >
+      <template #cell="{ colKey, cell }">
+        <template v-if="colKey === 'email'">
+          <DsfrTooltip
+            content="Envoyer un courriel"
+            on-hover
+          >
+            <a :href="`mailto:${cell as string}`">{{ cell }}</a>
+          </DsfrTooltip>
+        </template>
+        <template v-else>
+          <DsfrTooltip
+            :content="`(${colKey})`"
+            on-hover
+          >
+            {{ cell }}
+          </DsfrTooltip>
+        </template>
+      </template>
+    </DsfrDataTable>
+  </div>
 
   <div class="flex justify-between w-full relative">
     <DsfrTooltip
@@ -148,7 +199,7 @@ const activeAccordion = ref(-1)
   <AsyncButton
     :is-loading="isLoading"
     :disabled="disabled"
-    @click="onClick($event)"
+    @click="onClick()"
   >
     Cliquer pour voir un chargement
   </AsyncButton>

docs/gabarit-doc-composant.md

@@ -1,6 +1,6 @@
 # Tuile - `DsfrTile`
 
-## 🌟 Introduction
+## 🌟Introduction
 
 La tuile est un raccourci ou point d’entrée qui redirige les utilisateurs vers des pages de contenu. Elle fait généralement partie d'une collection ou liste de tuiles similaires. La tuile n’est jamais présentée de manière isolée.
 
@@ -10,7 +10,7 @@ Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour affich
 
 <VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtile--docs)
 
-## 📐 Structure
+## 📐Structure
 
 - `<DsfrTile>` : Le composant principal.
   - Affiche un titre, une description, des détails et un pictogramme (image ou SVG).
@@ -39,15 +39,15 @@ Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour affich
 | `noBackground` | `boolean`               | Si vrai, n'affiche pas de fond dans la tuile.                                                       | `false`                                                |
 | `grey`         | `boolean`               | Si vrai, affiche un fond gris pour la tuile.                                                        | `false`                                                |
 
-## 📡 Événements
+## 📡Événements
 
 Ce composant ne déclenche pas d'événements spécifiques.
 
-## 🧩 Slots
+## 🧩Slots
 
 - `header` : Slot pour insérer du contenu personnalisé dans l'en-tête de la tuile.
 
-## 📝 Exemples
+## 📝Exemples
 
 Section vide comme demandé.
 

docs/guide/guide-developpeur.md

@@ -95,7 +95,7 @@ Vous devriez voir 20.x.x
 - Faire des demandes dans [discussions](https://github.com/dnum-mi/vue-dsfr/discussions)
 - Rejoindre le [server Discord](https://discord.gg/jbBJ9769ZZ)
 
-### À propos des pull-requests
+### Àpropos des pull-requests
 
 Les commits doivent suivre la spécification des **[Commits Conventionnels](https://www.conventionalcommits.org/fr/v1.0.0/)** afin que
 l’outil de release automatique détecte les nouvelles fonctionnalités et les corrections d’anomalies.

src/components/DsfrAccordion/DsfrAccordion.md

@@ -1,14 +1,14 @@
 # Accordéon - `DsfrAccordion`
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.
 
 🏅 La documentation sur l’accordéon sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon)
 
 <VIcon name="vi-file-type-storybook" /> La story sur l’accordéon sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfraccordion--docs)
 
-## 📐 Structure
+## 📐 Structure
 
 Un accordéon est constitué des éléments suivants :
 
@@ -30,7 +30,7 @@ Autres props :
 | `titleTag`              | [*`TitleTag`*](/docs/types.md#title-tag)  |    `'h3'`        |              |
 | `id`                    | *`string`*                                | *random string*  |              |
 
-## 📡 Évenements
+## 📡Évenements
 
 Pas d'événements spécifiques émis directement par ce composant.
 
@@ -39,11 +39,11 @@ Pas d'événements spécifiques émis directement par ce composant.
 - **`title`** : Slot pour le contenu personnalisé du titre de l’accordéon. Si non utilisé, le texte fourni via la prop `title` sera utilisé.
 - **`default`** : Slot pour le contenu principal de l'accordéon, affiché dans la section repliable.
 
-## Utilisation
+## 📝 Exemples
 
 Ce composant peut être utilisé uniquement avec [`DsfrAccordionsGroup`](/composants/DsfrAccordionsGroup).
 
-## ⚙️ Code source du composant
+## ⚙️Code source du composant
 
 ::: code-group
 <<< DsfrAccordion.vue

src/components/DsfrAccordion/DsfrAccordionsGroup.md

@@ -1,6 +1,6 @@
 # Groupe d’accordéons - `DsfrAccordionsGroup`
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Le composant `DsfrAccordionsGroup` permet de regrouper plusieurs accordéons en une seule unité cohérente. Il gère la logique de sélection active entre les accordéons enfants, permettant ainsi d'ouvrir un accordéon tout en fermant les autres. Ce composant est essentiel pour organiser des ensembles d'accordéons liés de manière interactive.
 
@@ -16,7 +16,7 @@ Le composant `DsfrAccordionsGroup` agit comme un conteneur pour les composants d
 |-------------|------|------------|-------------|
 | `modelValue` | `number` | `-1` | Index de l'accordéon actuellement actif. Cette prop est utilisée pour le contrôle externe de l'accordéon ouvert (un seul peut être ouvert à la fois). |
 
-## 📡 Événements
+## 📡Événements
 
 | Nom de l'Événement | Payload | Description |
 |--------------------|---------|-------------|
@@ -26,11 +26,11 @@ Le composant `DsfrAccordionsGroup` agit comme un conteneur pour les composants d
 Il est donc possible (et recommandé) d’utiliser la directive `v-model` sur ce composant.
 :::
 
-## 🧩 Slots
+## 🧩 Slots
 
 - **`default`** : Slot par défaut pour le contenu du groupe d'accordéons. Ce slot contiendra les composants `DsfrAccordion` enfants.
 
-## 📝 Exemple
+## 📝 Exemple
 
 ::: code-group
 

src/components/DsfrAlert/DsfrAlert.md

@@ -1,6 +1,6 @@
 # Alertes - `DsfrAlert`
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Les alertes permettent d’attirer l’attention de l’utilisateur sur une information sans interrompre sa tâche en cours.
 

src/components/DsfrBackToTop/DsfrBackToTop.md

@@ -1,6 +1,6 @@
 # Retour en haut de page - `DsfrBackToTop`
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Bonjour et bienvenue à cette page de documentation incroyablement utile (et légèrement humoristique) pour notre composant `DsfrBackToTop`. Ce composant est votre meilleur ami pour permettre aux utilisateurs de remonter en haut de la page avec style et élégance. Et oui, même dans le monde du code, la classe, ça compte !
 
@@ -19,10 +19,6 @@ Si il y a des bloc de poursuite de lecture (liens vers d’autres articles), il
 
 <VIcon name="vi-file-type-storybook" /> La story sur le retour en haut de page sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrbacktotop--docs)
 
-## Aperçu
-
-`DsfrBackToTop` est un composant simple mais chic, permettant d'ajouter un lien de retour en haut de la page dans vos applications Vue. Il intègre un style distinctif et des options de positionnement pour s'adapter parfaitement à votre mise en page.
-
 ## 🛠️ Props
 
 Notre composant est assez flexible et comprend les props suivantes :
@@ -45,7 +41,7 @@ Afin de le faire fonctionner correctement, il est nécessaire d’ajouter l’at
 
 :::
 
-## Exemple d'Utilisation
+## 📝 Exemple
 
 Voici un petit exemple pour vous montrer comment utiliser `DsfrBackToTop` dans votre application :
 

src/components/DsfrBadge/DsfrBadge.md

@@ -1,14 +1,14 @@
 # Badges - `DsfrBadge`
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Le `DsfrBadge` est le super-héros des petites étiquettes ! Ce composant Vue est idéal pour afficher des informations courtes et importantes, comme des catégories, des étiquettes ou des statuts. C'est comme le fromage sur votre pizza : petit mais essentiel !
 
 🏅 La documentation sur le badge sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/badge)
 
 <VIcon name="vi-file-type-storybook" /> La story sur le badge sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrbadge--docs)
 
-## 📐 Structure
+## 📐 Structure
 
 - Le composant est un élément `p` avec la classe `fr-badge`.
 - Props permettent de modifier l'apparence du badge selon les props : type (), présence d'icône, taille et gestion du texte trop long.

src/components/DsfrBreadcrumb/DsfrBreadcrumb.md

@@ -1,6 +1,6 @@
 # Fil d’ariane - `DsfrBreadcrumb`
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Bienvenue à la documentation du composant DsfrBreadcrumb ! Ce composant est un véritable GPS pour vos interfaces utilisateur, guidant les utilisateurs à travers les différents niveaux de votre application avec aisance et élégance. Utilisons TypeScript et Vue pour explorer ses fonctionnalités.
 
@@ -27,15 +27,15 @@ Dans l’ordre, il se compose des éléments suivants :
 | navigationLabel     | String | `'vous êtes ici :'`             | Label affiché sur la balise `nav` du fil d’Ariane.                                                                                                       |
 | showBreadcrumbLabel | String | `'Voir le fil d’Ariane'`        | Label du bouton d'affichage du fil d’Ariane.                                                                                                             |
 
-## 📡 Évenements
+## 📡Évenements
 
 Ce composant n'émet pas directement d'événements, mais vous pouvez écouter les événements de clic sur les liens individuels si nécessaire.
 
-## 🧩 Slots
+## 🧩 Slots
 
 Pas de slots définis pour `DsfrBreadcrumb`. Le contenu est entièrement géré via les props.
 
-## 📝 Exemples
+## 📝 Exemples
 
 Voici un exemple d'utilisation de DsfrBreadcrumb  :
 

src/components/DsfrButton/DsfrButton.md

@@ -1,6 +1,6 @@
 # DsfrButton
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Le bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.
 
@@ -26,19 +26,19 @@ Les boutons sont composés de :
 | `label`     | `string`                   | `undefined`|             | Étiquette textuelle du bouton. Si le label est laissé à undefined, le slot par défaut doit contenir du texte !                        |
 | `onClick`   | `Function`                 | `() => {}` |             | Fonction appelée lors du clic sur le bouton.          |
 
-## 📡 Évenements
+## 📡Évenements
 
 - `click` : Émis lorsque le bouton est cliqué.
 
-## 🧩 Slots
+## 🧩 Slots
 
 - `default` : Emplacement pour le contenu personnalisé du bouton. Inséré dans `<button class="fr-btn"><span">`.
 
-## ✨ Les groupes de boutons
+## ✨ Les groupes de boutons
 
 Cf. [documentation dédiée](/composants/DsfrButtonGroup)
 
-## 📝 Exemples
+## 📝 Exemples
 
 Un bouton large avec une icône 'maison' à gauche et le texte 'Accueil' :
 

src/components/DsfrButton/DsfrButtonGroup.md

@@ -1,6 +1,6 @@
 # Groupe de boutons - `DsfrButtonGroup`
 
-## 🌟 Introduction
+## 🌟 Introduction
 
 Les boutons dans le contexte d'un groupe suivent les même règles que le composant bouton :
 
@@ -26,7 +26,7 @@ Aucune prop n’est obligatoire
 | iconRight        | `boolean`                       | false             | Si `true`, place les icônes à droite du texte dans tous les boutons. |
 | size             | `'sm' \| 'md' \| 'lg'`   | 'md'                 | Détermine la taille des boutons. Peut être `'sm'` (petit), `'md`' (moyen, défaut), `'lg'` (grand). |
 
-## 🧩 Slots
+## 🧩 Slots
 
 Le slot par défaut peut être utilisé pour mettre des boutons personnalisés.
 
@@ -36,7 +36,7 @@ Si vous utilisez le slot, il faut bien envelopper chaque bouton dans une balise
 
 :::
 
-## 📝 Exemples
+## 📝 Exemples
 
 ::: code-group
 

src/components/DsfrCallout/DsfrCallout.md

@@ -1,12 +1,12 @@
-## 🌟 Introduction
+## 🌟 Introduction
 
 Le composant `DsfrCallout` est un composant Vue.js qui permet de créer des encadrés de mise en avant avec un titre, un contenu, une icône optionnelle, et un bouton configurable. Il est conçu pour s'intégrer harmonieusement dans les projets utilisant le Design System Français (DSFR), tout en offrant une grande flexibilité grâce à la personnalisation des éléments visuels.
 
 🏅 La documentation sur la mise en avant sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant)
 
 <VIcon name="vi-file-type-storybook" /> La story sur la mise en avant sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrcallout--docs)
 
-## 📐 Structure
+## 📐 Structure
 
 Le composant `DsfrCallout` s'utilise pour afficher un message ou une information importante dans un encadré visuellement distinct, avec un titre, une icône, du contenu textuel, et éventuellement un bouton d'action. Chaque partie de l'encadré peut être personnalisée via les propriétés du composant.
 
@@ -22,15 +22,15 @@ Voici les différentes propriétés que vous pouvez utiliser avec ce composant :
 | `icon`    | `string \| object \| undefined` | `undefined` | Icône affichée à gauche du titre. Peut être une chaîne pour une icône DSFR, un objet pour un composant `VIcon`, ou `undefined` si aucune icône n'est nécessaire. |
 | `content` | `string`               | **Obligatoire** | Texte principal de l'encadré, généralement une description ou un message important.                                                                       |
 
-## 📡 Événements
+## 📡Événements
 
 Ce composant ne déclenche pas d'événements personnalisés.
 
-## 🧩 Slots
+## 🧩 Slots
 
 - `default` : Contenu additionnel à afficher à l'intérieur de l'encadré. Ce slot est intégré dans la structure principale du composant et s'affiche sous le texte principal.
 
-## 📝 Exemples
+## 📝 Exemples
 
 ::: code-group