Skip to content

Commit 663ba97

Browse files
laruisslaruiss
committed
feat(DsfrAccordion): ✨ permet d’utiliser v-model
BREAKING CHANGE: L’API de `DsfrAccordion` a été modifiée pour permettre l’utilisation de `v-model`.
1 parent f00ebdb commit 663ba97

18 files changed

+263
-394
lines changed

‎demo-app/App.vue‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,6 @@ const navItems: DsfrNavigationProps['navItems'] = [
7575
to: { name: 'Modal' },
7676
text: 'Modales',
7777
},
78-
{
79-
to: { name: 'Tabs' },
80-
text: 'Onglets',
81-
},
8278
{
8379
to: { name: 'Forms' },
8480
text: 'Formulaires',
@@ -95,6 +91,22 @@ const navItems: DsfrNavigationProps['navItems'] = [
9591
to: { name: 'Languages' },
9692
text: 'Languages',
9793
},
94+
{
95+
title: 'Accordéons et Onglets',
96+
get active () {
97+
return ['Accordéons', 'Onglets'].includes(route.name as string)
98+
},
99+
links: [
100+
{
101+
to: { name: 'Accordions' },
102+
text: 'Accordéons',
103+
},
104+
{
105+
to: { name: 'Tabs' },
106+
text: 'Onglets',
107+
},
108+
],
109+
},
98110
{
99111
title: 'Alertes et Bandeau',
100112
get active () {

‎demo-app/router.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ import SimpleModal from './views/SimpleModal.vue'
1212
import SideMenu from './views/SideMenu.vue'
1313
import CardTile from './views/CardTile.vue'
1414
import CalloutTest from './views/CalloutTest.vue'
15+
import AppAccordions from './views/AppAccordions.vue'
1516

1617
export const routes = [
1718
{ path: '/', name: 'Home', component: AppHome },
1819
{ path: '/about', name: 'AboutUs', component: AboutUs },
1920
{ path: '/modal', name: 'Modal', component: SimpleModal },
2021
{ path: '/tabs', name: 'Tabs', component: AppTabs },
22+
{ path: '/accordions', name: 'Accordions', component: AppAccordions },
2123
{ path: '/forms', name: 'Forms', component: AppForm },
2224
{ path: '/languages', name: 'Languages', component: LanguageSelector },
2325
{ path: '/settings', name: 'Settings', component: SchemeSettings },

‎demo-app/views/AppAccordions.vue‎

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,66 @@ import { ref } from 'vue'
33
44
import DsfrAccordion from '@/components/DsfrAccordion/DsfrAccordion.vue'
55
import DsfrAccordionsGroup from '@/components/DsfrAccordion/DsfrAccordionsGroup.vue'
6+
import DsfrTranscription from '@/components/DsfrTranscription/DsfrTranscription.vue'
67
7-
const accordionTitle = 'Titre de l’accordéon'
8-
const expandedId = ref(undefined)
8+
const activeAccordion = ref(-1)
9+
const activeAccordionInGroup = ref(-1)
10+
const title1 = 'Un titre d’accordéon 1'
11+
const title2 = 'Un titre d’accordéon 2'
12+
const title3 = 'Un titre d’accordéon 3'
913
</script>
1014

1115
<template>
12-
<DsfrAccordionsGroup>
13-
<li>
14-
<DsfrAccordion
15-
:title="accordionTitle"
16-
:expanded-id="expandedId"
17-
@expand="expandedId = $event === expandedId ? undefined : $event"
18-
>
19-
Contenu de l’accordéon dans l’accordéon
20-
</DsfrAccordion>
21-
</li>
16+
<h2 class="mt-8">
17+
Un accordéon seul
18+
</h2>
19+
<DsfrAccordionsGroup
20+
v-model="activeAccordionInGroup"
21+
>
22+
<DsfrAccordion
23+
id="accordion-alone"
24+
title="Titre de l’accordéon"
25+
>
26+
Contenu de l’accordéon dans le groupe
27+
</DsfrAccordion>
2228
</DsfrAccordionsGroup>
29+
30+
<h2 class="mt-8">
31+
Un composant transcription
32+
</h2>
33+
2334
<DsfrTranscription title="Le titre de la transcription">
2435
La transcription blablabla
2536
</DsfrTranscription>
37+
38+
<h2 class="mt-8">
39+
Un groupe de 3 accordéons
40+
</h2>
41+
42+
<DsfrAccordionsGroup v-model="activeAccordion">
43+
<DsfrAccordion
44+
id="accordion-1"
45+
:title="title1"
46+
>
47+
Contenu de l’accordéon 1
48+
</DsfrAccordion>
49+
<DsfrAccordion
50+
id="accordion-2"
51+
:title="title2"
52+
>
53+
Contenu de l’accordéon 2
54+
</DsfrAccordion>
55+
<DsfrAccordion
56+
id="accordion-3"
57+
:title="title3"
58+
>
59+
Contenu de l’accordéon 3
60+
</DsfrAccordion>
61+
</DsfrAccordionsGroup>
2662
</template>
63+
64+
<style scoped>
65+
.mt-8 {
66+
margin-top: 2rem;
67+
}
68+
</style>

‎demo-app/views/AppTabs.vue‎

Lines changed: 21 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,56 +11,42 @@ const tabTitles = [
1111
{ title: 'Onglet avec accordéon', icon: 'ri-checkbox-circle-line', tabId: 'tab-0', panelId: 'tab-content-0' },
1212
{ title: 'Titre 2', icon: 'ri-checkbox-circle-line', tabId: 'tab-1', panelId: 'tab-content-1' },
1313
]
14-
const selectedTabIndex = ref(1)
15-
const initialSelectedIndex = 0
14+
const selectedTabIndex = ref(0)
1615
const title1 = 'Un titre d’accordéon 1'
1716
const title2 = 'Un titre d’accordéon 2'
1817
const title3 = 'Un titre d’accordéon 3'
19-
const expandedId = ref(undefined)
18+
const activeAccordion = ref(-1)
2019
</script>
2120

2221
<template>
2322
<DsfrTabs
2423
v-model="selectedTabIndex"
2524
:tab-list-name="tabListName"
2625
:tab-titles="tabTitles"
27-
:initial-selected-index="initialSelectedIndex"
2826
>
2927
<DsfrTabContent
3028
panel-id="tab-content-0"
3129
tab-id="tab-0"
3230
>
33-
<DsfrAccordionsGroup>
34-
<li>
35-
<DsfrAccordion
36-
id="accordion-1"
37-
:title="title1"
38-
:expanded-id="expandedId"
39-
@expand="expandedId = $event"
40-
>
41-
Contenu de l’accordéon 1
42-
</DsfrAccordion>
43-
</li>
44-
<li>
45-
<DsfrAccordion
46-
id="accordion-2"
47-
:title="title2"
48-
:expanded-id="expandedId"
49-
@expand="id => expandedId = id"
50-
>
51-
Contenu de l’accordéon 2
52-
</DsfrAccordion>
53-
</li>
54-
<li>
55-
<DsfrAccordion
56-
id="accordion-3"
57-
:title="title3"
58-
:expanded-id="expandedId"
59-
@expand="id => expandedId = id"
60-
>
61-
Contenu de l’accordéon 3
62-
</DsfrAccordion>
63-
</li>
31+
<DsfrAccordionsGroup v-model="activeAccordion">
32+
<DsfrAccordion
33+
id="accordion-1"
34+
:title="title1"
35+
>
36+
Contenu de l’accordéon 1
37+
</DsfrAccordion>
38+
<DsfrAccordion
39+
id="accordion-2"
40+
:title="title2"
41+
>
42+
Contenu de l’accordéon 2
43+
</DsfrAccordion>
44+
<DsfrAccordion
45+
id="accordion-3"
46+
:title="title3"
47+
>
48+
Contenu de l’accordéon 3
49+
</DsfrAccordion>
6450
</DsfrAccordionsGroup>
6551
</DsfrTabContent>
6652
<DsfrTabContent

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@
126126
"lint-staged": "^15.2.9",
127127
"npm-run-all": "^4.1.5",
128128
"p-debounce": "^4.0.0",
129-
"patch-package": "^8.0.0",
130129
"playwright": "^1.46.1",
131130
"publint": "^0.2.10",
132131
"regenerator-runtime": "^0.14.1",

0 commit comments

Comments
 (0)