Skip to content

Commit 655a618

Browse files
plegaudplegaud
authored
Merge pull request #255 from dnum-mi/feat/init-dsfr-with-vue-mode
Feat/init dsfr with vue mode
2 parents c7834df + 8aff97d commit 655a618

File tree

6 files changed

+100
-25
lines changed

6 files changed

+100
-25
lines changed

‎src/components/DsfrAccordion/DsfrAccordion.stories.js‎

Lines changed: 75 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import DsfrAccordion from './DsfrAccordion.vue'
2+
import DsfrAccordionsGroup from './DsfrAccordionsGroup.vue'
23

34
export default {
45
component: DsfrAccordion,
@@ -12,31 +13,43 @@ export default {
1213
control: 'text',
1314
description: 'Intitulé de l’accordéon',
1415
},
15-
expanded: {
16-
control: 'boolean',
17-
description: 'Spécifie si l’accordéon est déplié (`true`) ou non (`false`, défaut)',
18-
},
1916
},
2017
}
2118

2219
export const Accordeon = (args) => ({
2320
components: {
2421
DsfrAccordion,
22+
DsfrAccordionsGroup,
2523
},
2624

2725
data () {
2826
return {
2927
...args,
28+
expandedId: undefined,
3029
}
3130
},
3231

3332
template: `
34-
<DsfrAccordion
35-
:title="title"
36-
:expanded="expanded"
37-
>
38-
Contenu de l’accordéon
39-
</DsfrAccordion>
33+
<DsfrAccordionsGroup>
34+
<li>
35+
<DsfrAccordion
36+
:title="title + ' 1'"
37+
:expanded-id="expandedId"
38+
@expand="expandedId = $event"
39+
>
40+
Contenu de l’accordéon 1
41+
</DsfrAccordion>
42+
</li>
43+
<li>
44+
<DsfrAccordion
45+
:title="title + ' 2'"
46+
:expanded-id="expandedId"
47+
@expand="expandedId = $event"
48+
>
49+
Contenu de l’accordéon 2
50+
</DsfrAccordion>
51+
</li>
52+
</DsfrAccordionGroup>
4053
`,
4154

4255
mounted () {
@@ -46,33 +59,75 @@ export const Accordeon = (args) => ({
4659
Accordeon.args = {
4760
dark: false,
4861
title: 'Un titre d’accordéon',
49-
expanded: false,
5062
}
5163

5264
export const AccordeonDansUnAccordeon = (args) => ({
5365
components: {
5466
DsfrAccordion,
67+
DsfrAccordionsGroup,
5568
},
5669

5770
data () {
5871
return {
5972
...args,
6073
titleSub: 'Intitulé du sous-accordéon',
74+
expandedId: undefined,
75+
subExpandedId1: undefined,
76+
subExpandedId2: undefined,
6177
}
6278
},
6379

6480
template: `
65-
<DsfrAccordion
66-
:title="title"
67-
:expanded="expanded"
68-
>
81+
<DsfrAccordionsGroup>
82+
<DsfrAccordion
83+
:title="title + ' 1'"
84+
:expanded-id="expandedId"
85+
@expand="expandedId = $event"
86+
>
87+
<li>
88+
<DsfrAccordion
89+
:title="titleSub + ' 1'"
90+
:expanded-id="subExpandedId1"
91+
@expand="subExpandedId1 = $event"
92+
>
93+
Contenu de l’accordéon dans l’accordéon
94+
</DsfrAccordion>
95+
</li>
96+
<li>
97+
<DsfrAccordion
98+
:title="titleSub + ' 2'"
99+
:expanded-id="subExpandedId1"
100+
@expand="subExpandedId1 = $event"
101+
>
102+
Contenu de l’accordéon dans l’accordéon
103+
</DsfrAccordion>
104+
</li>
105+
</DsfrAccordion>
69106
<DsfrAccordion
70-
:title="titleSub"
71-
:expanded="false"
107+
:title="title + ' 2'"
108+
:expanded-id="expandedId"
109+
@expand="expandedId = $event"
72110
>
73-
Contenu de l’accordéon
111+
<li>
112+
<DsfrAccordion
113+
:title="titleSub + ' 1'"
114+
:expanded-id="subExpandedId2"
115+
@expand="subExpandedId2 = $event"
116+
>
117+
Contenu de l’accordéon dans l’accordéon
118+
</DsfrAccordion>
119+
</li>
120+
<li>
121+
<DsfrAccordion
122+
:title="titleSub + ' 2'"
123+
:expanded-id="subExpandedId2"
124+
@expand="subExpandedId2 = $event"
125+
>
126+
Contenu de l’accordéon dans l’accordéon
127+
</DsfrAccordion>
128+
</li>
74129
</DsfrAccordion>
75-
</DsfrAccordion>
130+
</DsfrAccordionsGroup>
76131
`,
77132

78133
mounted () {
@@ -83,5 +138,5 @@ export const AccordeonDansUnAccordeon = (args) => ({
83138
AccordeonDansUnAccordeon.args = {
84139
dark: false,
85140
title: 'Un titre d’accordéon',
86-
expanded: false,
141+
titleSub: 'Accordéon dans l’accordéon',
87142
}

‎src/components/DsfrAccordion/DsfrAccordion.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
22
// import '@gouvfr/dsfr/dist/component/accordion/accordion.module.js'
3+
34
import { defineComponent } from 'vue'
45
56
import { getRandomId } from '../../utils/random-utils.js'

‎src/components/DsfrHeader/DsfrHeader.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script>
22
import { defineComponent } from 'vue'
33
4-
// TODO: Demander au DSFR pourquoi cette erreur au clic sur le menu burger : TypeError: can't access property "insertBefore", parent is null
5-
// TODO: Demander au DSFR pourquoi cette erreur au clic sur la recherche : TypeError: can't access property "nextSibling", node is null
6-
// import '@gouvfr/dsfr/dist/component/header/header.module.js'
4+
// Pose problème dans les tests, et risque fort de poser problème dans Nuxt
5+
import '@gouvfr/dsfr/dist/component/header/header.module.js'
76
87
import DsfrLogo from '../DsfrLogo/DsfrLogo.vue'
98
import DsfrSearchBar from '../DsfrSearchBar/DsfrSearchBar.vue'

‎src/demo-app/App.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ref } from 'vue'
33
import DsfrNavigation from '../components/DsfrNavigation/DsfrNavigation.vue'
44
import DsfrButton from '../components/DsfrButton/DsfrButton.vue'
55
import DsfrAccordion from '../components/DsfrAccordion/DsfrAccordion.vue'
6+
import DsfrAccordionsGroup from '../components/DsfrAccordion/DsfrAccordionsGroup.vue'
67
78
const isModalOpen = ref(false)
89
const displayAlert = ref(false)
@@ -35,6 +36,9 @@ const actions = [
3536
3637
const showNotifications = ref(false)
3738
39+
const accordionTitle = 'Titre de l’accordéon'
40+
const expandedId = ref(undefined)
41+
3842
const displayNotifications = () => {
3943
showNotifications.value = true
4044
}
@@ -129,8 +133,17 @@ const navItems = [
129133
/>
130134
équivaut à
131135
<span class="fr-fi-search-line" />
132-
133-
<DsfrAccordion />
136+
<DsfrAccordionsGroup>
137+
<li>
138+
<DsfrAccordion
139+
:title="accordionTitle"
140+
:expanded-id="expandedId"
141+
@expand="expandedId = $event === expandedId ? undefined : $event"
142+
>
143+
Contenu de l’accordéon dans l’accordéon
144+
</DsfrAccordion>
145+
</li>
146+
</DsfrAccordionsGroup>
134147
</div>
135148

136149
<DsfrModal

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './init-dsfr.js'
12
import '@gouvfr/dsfr/dist/core/core.module.js'
23
import * as components from './components/index.js'
34
import VIcon from './icons.js'

‎src/init-dsfr.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
if (typeof window !== 'undefined') {
2+
window.dsfr = {
3+
verbose: false,
4+
mode: 'vue',
5+
}
6+
}

0 commit comments

Comments
 (0)