Skip to content

Commit 80794a7

Browse files
laruisslaruiss
authored
Merge pull request #945 from dnum-mi/docs/improve-docs
docs/improve docs
2 parents e581673 + 01ac366 commit 80794a7

File tree

13 files changed

+387
-105
lines changed

13 files changed

+387
-105
lines changed

‎.vitepress/config.ts‎

Lines changed: 98 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,12 @@ const composants = [
9898
{
9999
text: 'DsfrAccordion',
100100
link: '/composants/DsfrAccordion.md',
101-
},
102-
{
103-
text: 'DsfrAccordionsGroup',
104-
link: '/composants/DsfrAccordionsGroup.md',
101+
items: [
102+
{
103+
text: 'DsfrAccordionsGroup',
104+
link: '/composants/DsfrAccordionsGroup.md',
105+
},
106+
],
105107
},
106108
{
107109
text: 'DsfrAlert',
@@ -122,10 +124,12 @@ const composants = [
122124
{
123125
text: 'DsfrButton',
124126
link: '/composants/DsfrButton.md',
125-
},
126-
{
127-
text: 'DsfrButtonGroup',
128-
link: '/composants/DsfrButtonGroup.md',
127+
items: [
128+
{
129+
text: 'DsfrButtonGroup',
130+
link: '/composants/DsfrButtonGroup.md',
131+
},
132+
],
129133
},
130134
{
131135
text: 'DsfrCallout',
@@ -138,10 +142,12 @@ const composants = [
138142
{
139143
text: 'DsfrCheckbox',
140144
link: '/composants/DsfrCheckbox.md',
141-
},
142-
{
143-
text: 'DsfrCheckboxSet',
144-
link: '/composants/DsfrCheckboxSet.md',
145+
items: [
146+
{
147+
text: 'DsfrCheckboxSet',
148+
link: '/composants/DsfrCheckboxSet.md',
149+
},
150+
],
145151
},
146152
{
147153
text: 'DsfrConsent',
@@ -170,34 +176,38 @@ const composants = [
170176
{
171177
text: 'DsfrFooter',
172178
link: '/composants/DsfrFooter.md',
173-
},
174-
{
175-
text: 'DsfrFooterLinkList',
176-
link: '/composants/DsfrFooterLinkList.md',
177-
},
178-
{
179-
text: 'DsfrFooterLink',
180-
link: '/composants/DsfrFooterLink.md',
181-
},
182-
{
183-
text: 'DsfrFooterPartners',
184-
link: '/composants/DsfrFooterPartners.md',
185-
},
186-
{
187-
text: 'DsfrFranceConnect',
188-
link: '/composants/DsfrFranceConnect.md',
179+
items: [
180+
{
181+
text: 'DsfrFooterLinkList',
182+
link: '/composants/DsfrFooterLinkList.md',
183+
},
184+
{
185+
text: 'DsfrFooterLink',
186+
link: '/composants/DsfrFooterLink.md',
187+
},
188+
{
189+
text: 'DsfrFooterPartners',
190+
link: '/composants/DsfrFooterPartners.md',
191+
},
192+
{
193+
text: 'DsfrFranceConnect',
194+
link: '/composants/DsfrFranceConnect.md',
195+
},
196+
],
189197
},
190198
{
191199
text: 'DsfrHeader',
192200
link: '/composants/DsfrHeader.md',
193-
},
194-
{
195-
text: 'DsfrHeaderMenuLink',
196-
link: '/composants/DsfrHeaderMenuLink.md',
197-
},
198-
{
199-
text: 'DsfrHeaderMenuLinks',
200-
link: '/composants/DsfrHeaderMenuLinks.md',
201+
items: [
202+
{
203+
text: 'DsfrHeaderMenuLink',
204+
link: '/composants/DsfrHeaderMenuLink.md',
205+
},
206+
{
207+
text: 'DsfrHeaderMenuLinks',
208+
link: '/composants/DsfrHeaderMenuLinks.md',
209+
},
210+
],
201211
},
202212
{
203213
text: 'DsfrHighlight',
@@ -206,10 +216,12 @@ const composants = [
206216
{
207217
text: 'DsfrInput',
208218
link: '/composants/DsfrInput.md',
209-
},
210-
{
211-
text: 'DsfrInputGroup',
212-
link: '/composants/DsfrInputGroup.md',
219+
items: [
220+
{
221+
text: 'DsfrInputGroup',
222+
link: '/composants/DsfrInputGroup.md',
223+
},
224+
],
213225
},
214226
{
215227
text: 'DsfrLanguageSelector',
@@ -226,10 +238,12 @@ const composants = [
226238
{
227239
text: 'DsfrRadioButton',
228240
link: '/composants/DsfrRadioButton.md',
229-
},
230-
{
231-
text: 'DsfrRadioButtonSet',
232-
link: '/composants/DsfrRadioButtonSet.md',
241+
items: [
242+
{
243+
text: 'DsfrRadioButtonSet',
244+
link: '/composants/DsfrRadioButtonSet.md',
245+
},
246+
],
233247
},
234248
{
235249
text: 'DsfrRange',
@@ -242,10 +256,12 @@ const composants = [
242256
{
243257
text: 'DsfrSegmented',
244258
link: '/composants/DsfrSegmented.md',
245-
},
246-
{
247-
text: 'DsfrSegmentedSet',
248-
link: '/composants/DsfrSegmentedSet.md',
259+
items: [
260+
{
261+
text: 'DsfrSegmentedSet',
262+
link: '/composants/DsfrSegmentedSet.md',
263+
},
264+
],
249265
},
250266
{
251267
text: 'DsfrSelect',
@@ -254,26 +270,38 @@ const composants = [
254270
{
255271
text: 'DsfrTable',
256272
link: '/composants/DsfrTable.md',
257-
},
258-
{
259-
text: 'DsfrTableHeader',
260-
link: '/composants/DsfrTableHeader.md',
261-
},
262-
{
263-
text: 'DsfrTableHeaders',
264-
link: '/composants/DsfrTableHeaders.md',
265-
},
266-
{
267-
text: 'DsfrTableRow',
268-
link: '/composants/DsfrTableRow.md',
269-
},
270-
{
271-
text: 'DsfrTableCell',
272-
link: '/composants/DsfrTableCell.md',
273+
items: [
274+
{
275+
text: 'DsfrTableHeader',
276+
link: '/composants/DsfrTableHeader.md',
277+
},
278+
{
279+
text: 'DsfrTableHeaders',
280+
link: '/composants/DsfrTableHeaders.md',
281+
},
282+
{
283+
text: 'DsfrTableRow',
284+
link: '/composants/DsfrTableRow.md',
285+
},
286+
{
287+
text: 'DsfrTableCell',
288+
link: '/composants/DsfrTableCell.md',
289+
},
290+
],
273291
},
274292
{
275293
text: 'DsfrTabs',
276294
link: '/composants/DsfrTabs.md',
295+
items: [
296+
{
297+
text: 'DsfrTabItem',
298+
link: '/composants/DsfrTabItem.md',
299+
},
300+
{
301+
text: 'DsfrTabContent',
302+
link: '/composants/DsfrTabContent.md',
303+
},
304+
],
277305
},
278306
{
279307
text: 'DsfrTag',
@@ -282,6 +310,12 @@ const composants = [
282310
{
283311
text: 'DsfrTile',
284312
link: '/composants/DsfrTile.md',
313+
items: [
314+
{
315+
text: 'DsfrTiles',
316+
link: '/composants/DsfrTiles.md',
317+
},
318+
],
285319
},
286320
{
287321
text: 'DsfrToggleSwitch',

‎src/components/DsfrTabs/DsfrTabContent.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Contenu d’onglet - `DsfrTabContent`
2+
3+
## 🌟 Introduction
4+
5+
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é.
6+
7+
Ce composant **doit** s’utiliser dans un [`DsfrTabs`](/composants/DsfrTabs).
8+
9+
## 📐 Structure
10+
11+
- `<DsfrTabContent>` : Le composant principal.
12+
- Affiche le contenu associé à un onglet.
13+
- Utilise une transition animée pour l'apparition et la disparition du contenu.
14+
- Utilise des classes pour gérer l'état de sélection de l'onglet.
15+
16+
## 🛠️ Props
17+
18+
| Propriété | Type | Description | Valeur par défaut |
19+
|-------------|-----------|------------------------------------------------------------------|-------------------|
20+
| `panelId` | `string` | ID unique pour le panneau, utilisé pour l'accessibilité. | `obligatoire` |
21+
| `tabId` | `string` | ID unique de l'onglet associé, utilisé pour l'accessibilité. | `obligatoire` |
22+
23+
## 📡 Événements
24+
25+
Ce composant ne déclenche pas d'événements spécifiques.
26+
27+
## 🧩 Slots
28+
29+
- `default` : Slot pour insérer le contenu de l'onglet à afficher.
30+
31+
## 📝 Exemples
32+
33+
::: code-group
34+
35+
<Story data-title="Démo" min-h="600px">
36+
<DsfrTabsDemoComplex />
37+
</Story>
38+
39+
<<< docs-demo/DsfrTabsDemoComplex.vue [Code de la démo]
40+
41+
:::
42+
43+
## ⚙️ Code source du composant
44+
45+
::: code-group
46+
<<< DsfrTabContent.vue
47+
<<< DsfrTabs.types.ts
48+
<<< injection-key.ts
49+
:::
50+
51+
<script setup lang="ts">
52+
import DsfrTabsDemoComplex from './docs-demo/DsfrTabsDemoComplex.vue'
53+
</script>

‎src/components/DsfrTabs/DsfrTabContent.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
import { computed, inject, toRef } from 'vue'
33
44
import { registerTabKey } from './injection-key'
5-
import type { DsfrTabContentProps } from './DsfrTabs.types'
6-
7-
export type { DsfrTabContentProps }
85
6+
export type DsfrTabContentProps = {
7+
panelId: string
8+
tabId: string
9+
}
910
const props = defineProps<DsfrTabContentProps>()
1011
1112
const values = { true: '100%', false: '-100%' }

‎src/components/DsfrTabs/DsfrTabItem.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Onglet - `DsfrTabItem`
2+
3+
## 🌟 Introduction
4+
5+
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.
6+
7+
Ce composant **doit** s’utiliser dans un [`DsfrTabs`](/composants/DsfrTabs).
8+
9+
## 📐 Structure
10+
11+
- `<DsfrTabItem>` : Un élément de liste représentant un onglet.
12+
- Contient un bouton pour activer l'onglet.
13+
- Gère les commandes clavier pour permettre la navigation entre les onglets.
14+
15+
## 🛠️ Props
16+
17+
| Propriété | Type | Description | Valeur par défaut |
18+
|-----------|----------|------------------------------------------------------------------|-------------------|
19+
| `panelId` | `string` | ID unique du panneau de contenu associé à cet onglet. | `obligatoire` |
20+
| `tabId` | `string` | ID unique de l'onglet, utilisé pour l'accessibilité. | `obligatoire` |
21+
| `icon` | `string` | Nom de l'icône à afficher dans l'onglet (facultatif). | `undefined` |
22+
23+
## 📡 Événements
24+
25+
- `click` : Événement émis lorsque l'onglet est cliqué, envoie l’index de l’onglet (`number`, entier commençant à `0`).
26+
- `next` : Événement émis lorsque l'utilisateur appuie sur la touche "flèche droite" ou "flèche bas".
27+
- `previous` : Événement émis lorsque l'utilisateur appuie sur la touche "flèche gauche" ou "flèche haut".
28+
- `first` : Événement émis lorsque l'utilisateur appuie sur la touche "Home".
29+
- `last` : Événement émis lorsque l'utilisateur appuie sur la touche "End".
30+
31+
## 🧩 Slots
32+
33+
- `default` : Slot pour insérer le contenu de l'onglet.
34+
35+
## 📝 Exemples
36+
37+
::: code-group
38+
39+
<Story data-title="Démo" min-h="600px">
40+
<DsfrTabsDemoComplex />
41+
</Story>
42+
43+
<<< docs-demo/DsfrTabsDemoComplex.vue [Code de la démo]
44+
45+
:::
46+
47+
## ⚙️ Code source du composant
48+
49+
::: code-group
50+
<<< DsfrTabContent.vue
51+
<<< DsfrTabs.types.ts
52+
<<< injection-key.ts
53+
:::
54+
55+
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.
56+
57+
<script setup lang="ts">
58+
import DsfrTabsDemoComplex from './docs-demo/DsfrTabsDemoComplex.vue'
59+
</script>

0 commit comments

Comments
 (0)