@cnamts/synapse 0.0.2-alpha → 0.0.4-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (193) hide show
  1. package/README.md +1 -1
  2. package/dist/design-system-v3.d.ts +712 -27
  3. package/dist/design-system-v3.js +2745 -5384
  4. package/dist/design-system-v3.umd.cjs +10 -2
  5. package/dist/style.css +1 -1
  6. package/package.json +32 -29
  7. package/src/components/Alert/Alert.mdx +1 -1
  8. package/src/components/Alert/Alert.stories.ts +91 -1
  9. package/src/components/Alert/Alert.vue +8 -8
  10. package/src/components/BackBtn/BackBtn.mdx +1 -1
  11. package/src/components/BackBtn/BackBtn.stories.ts +84 -1
  12. package/src/components/BackToTopBtn/BackToTopBtn.mdx +3 -3
  13. package/src/components/BackToTopBtn/BackToTopBtn.stories.ts +172 -11
  14. package/src/components/CollapsibleList/CollapsibleList.mdx +2 -2
  15. package/src/components/CollapsibleList/CollapsibleList.stories.ts +37 -1
  16. package/src/components/CopyBtn/CopyBtn.mdx +1 -1
  17. package/src/components/CopyBtn/CopyBtn.stories.ts +120 -1
  18. package/src/components/CopyBtn/CopyBtn.vue +1 -1
  19. package/src/components/Customs/CustomInputSelect/CustomInputSelect.mdx +6 -8
  20. package/src/components/Customs/CustomInputSelect/CustomInputSelect.stories.ts +270 -4
  21. package/src/components/Customs/CustomInputSelect/CustomInputSelect.vue +80 -53
  22. package/src/components/Customs/CustomInputSelect/config.ts +10 -0
  23. package/src/components/Customs/CustomSelect/CustomSelect.mdx +3 -3
  24. package/src/components/Customs/CustomSelect/CustomSelect.stories.ts +158 -2
  25. package/src/components/Customs/CustomSelect/CustomSelect.vue +25 -6
  26. package/src/components/Customs/CustomTextField/CustomTextField.mdx +44 -0
  27. package/src/components/Customs/CustomTextField/CustomTextField.stories.ts +403 -0
  28. package/src/components/Customs/CustomTextField/CustomTextField.vue +110 -0
  29. package/src/components/Customs/CustomTextField/tests/CustomTextField.spec.ts +93 -0
  30. package/src/components/Customs/CustomTextField/tests/__snapshots__/CustomTextField.spec.ts.snap +59 -0
  31. package/src/components/Customs/CustomTextField/types.d.ts +3 -0
  32. package/src/components/DataList/DataList.mdx +77 -0
  33. package/src/components/DataList/DataList.stories.ts +960 -0
  34. package/src/components/DataList/DataList.vue +140 -0
  35. package/src/components/DataList/DataListLoading/DataListLoading.vue +56 -0
  36. package/src/components/DataList/DataListLoading/tests/DataListLoading.spec.ts +23 -0
  37. package/src/components/DataList/locales.ts +3 -0
  38. package/src/components/DataList/tests/DataList.spec.ts +194 -0
  39. package/src/components/DataList/types.d.ts +23 -0
  40. package/src/components/DataListGroup/DataListGroup.mdx +77 -0
  41. package/src/components/DataListGroup/DataListGroup.stories.ts +987 -0
  42. package/src/components/DataListGroup/DataListGroup.vue +59 -0
  43. package/src/components/DataListGroup/tests/DataListGroup.spec.ts +54 -0
  44. package/src/components/DataListGroup/tests/data/dataListGroupItems.ts +41 -0
  45. package/src/components/DataListGroup/types.d.ts +15 -0
  46. package/src/components/DataListItem/DataListItem.vue +135 -0
  47. package/src/components/DataListItem/config.ts +17 -0
  48. package/src/components/DataListItem/locales.ts +3 -0
  49. package/src/components/DataListItem/tests/DataListItem.spec.ts +156 -0
  50. package/src/components/DataListItem/types.d.ts +23 -0
  51. package/src/components/DownloadBtn/Accessibilite.mdx +14 -0
  52. package/src/components/DownloadBtn/Accessibilite.stories.ts +166 -0
  53. package/src/components/DownloadBtn/AccessibiliteItems.ts +129 -0
  54. package/src/components/DownloadBtn/DownloadBtn.mdx +5 -6
  55. package/src/components/DownloadBtn/DownloadBtn.stories.ts +207 -2
  56. package/src/components/DownloadBtn/constants/ExpertiseLevelEnum.ts +4 -0
  57. package/src/components/FooterBar/FooterBar.mdx +2 -2
  58. package/src/components/FooterBar/FooterBar.stories.ts +1 -1
  59. package/src/components/FranceConnectBtn/FranceConnectBtn.mdx +1 -1
  60. package/src/components/FranceConnectBtn/FranceConnectBtn.stories.ts +58 -1
  61. package/src/components/FranceConnectBtn/FranceConnectBtn.vue +2 -2
  62. package/src/components/HeaderBar/HeaderBar.mdx +256 -0
  63. package/src/components/HeaderBar/HeaderBar.stories.ts +703 -0
  64. package/src/components/HeaderBar/HeaderBar.vue +276 -0
  65. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.mdx +433 -0
  66. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.stories.ts +1089 -0
  67. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue +234 -0
  68. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.mdx +38 -0
  69. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.stories.ts +89 -0
  70. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue +51 -0
  71. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/tests/HeaderMenuItem.spec.ts +16 -0
  72. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/tests/__snapshots__/HeaderMenuItem.spec.ts.snap +3 -0
  73. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.mdx +17 -0
  74. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.stories.ts +121 -0
  75. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue +51 -0
  76. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/tests/HeaderMenuSection.spec.ts +31 -0
  77. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.mdx +43 -0
  78. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.stories.ts +261 -0
  79. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue +194 -0
  80. package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/tests/HeaderSubMenu.spec.ts +63 -0
  81. package/src/components/HeaderBar/HeaderBurgerMenu/conts.ts +1 -0
  82. package/src/components/HeaderBar/HeaderBurgerMenu/locals.ts +4 -0
  83. package/src/components/HeaderBar/HeaderBurgerMenu/tests/HeaderBurgerMenu.spec.ts +180 -0
  84. package/src/components/HeaderBar/HeaderBurgerMenu/tests/__snapshots__/HeaderBurgerMenu.spec.ts.snap +13 -0
  85. package/src/components/HeaderBar/HeaderBurgerMenu/tests/__snapshots__/HeaderComplexMenu.spec.ts.snap +13 -0
  86. package/src/components/HeaderBar/HeaderBurgerMenu/tests/useHandleSubMenus.spec.ts +158 -0
  87. package/src/components/HeaderBar/HeaderBurgerMenu/useHandleSubMenus.ts +49 -0
  88. package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue +143 -0
  89. package/src/components/HeaderBar/HeaderLogo/locales.ts +3 -0
  90. package/src/components/HeaderBar/HeaderLogo/logos/Logo-mobile.vue +117 -0
  91. package/src/components/HeaderBar/HeaderLogo/logos/Logo.vue +279 -0
  92. package/src/components/HeaderBar/HeaderLogo/tests/HeaderLogo.spec.ts +119 -0
  93. package/src/components/HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue +84 -0
  94. package/src/components/HeaderBar/HeaderMenuBtn/locals.ts +4 -0
  95. package/src/components/HeaderBar/HeaderMenuBtn/tests/HeaderMenuBtn.spec.ts +70 -0
  96. package/src/components/HeaderBar/Usages.mdx +85 -0
  97. package/src/components/HeaderBar/consts.scss +6 -0
  98. package/src/components/HeaderBar/consts.ts +2 -0
  99. package/src/components/HeaderBar/locales.ts +3 -0
  100. package/src/components/HeaderBar/tests/HeaderBar.spec.ts +216 -0
  101. package/src/components/HeaderBar/tests/__snapshots__/HeaderBar.spec.ts.snap +45 -0
  102. package/src/components/HeaderBar/tests/useHeaderResponsiveMode.spec.ts +26 -0
  103. package/src/components/HeaderBar/tests/useScrollDirection.spec.ts +34 -0
  104. package/src/components/HeaderBar/useHeaderResponsiveMode.ts +25 -0
  105. package/src/components/HeaderBar/useScrollDirection.ts +26 -0
  106. package/src/components/HeaderLoading/HeaderLoading.mdx +28 -0
  107. package/src/components/HeaderLoading/HeaderLoading.stories.ts +62 -0
  108. package/src/components/HeaderLoading/HeaderLoading.vue +45 -0
  109. package/src/components/HeaderLoading/tests/HeaderLoading.spec.ts +22 -0
  110. package/src/components/HeaderNavigationBar/HeaderNavigationBar.mdx +128 -0
  111. package/src/components/HeaderNavigationBar/HeaderNavigationBar.stories.ts +784 -0
  112. package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue +194 -0
  113. package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue +74 -0
  114. package/src/components/HeaderNavigationBar/HorizontalNavbar/config.ts +18 -0
  115. package/src/components/HeaderNavigationBar/tests/HeaderNavigationBar.spec.ts +127 -0
  116. package/src/components/HeaderNavigationBar/types.ts +7 -0
  117. package/src/components/HeaderToolbar/HeaderToolbar.mdx +31 -0
  118. package/src/components/HeaderToolbar/HeaderToolbar.stories.ts +343 -0
  119. package/src/components/HeaderToolbar/HeaderToolbar.vue +487 -0
  120. package/src/components/HeaderToolbar/tests/HeaderToolbar.spec.ts +196 -0
  121. package/src/components/HeaderToolbar/types.d.ts +20 -0
  122. package/src/components/LangBtn/LangBtn.mdx +1 -1
  123. package/src/components/LangBtn/LangBtn.stories.ts +125 -8
  124. package/src/components/Logo/Logo.mdx +2 -2
  125. package/src/components/Logo/Logo.stories.ts +147 -1
  126. package/src/components/LogoBrandSection/LogoBrandSection.mdx +14 -0
  127. package/src/components/LogoBrandSection/LogoBrandSection.stories.ts +158 -0
  128. package/src/components/LogoBrandSection/LogoBrandSection.vue +312 -0
  129. package/src/components/LogoBrandSection/assets/ameli-pro.svg +1 -0
  130. package/src/components/LogoBrandSection/assets/ameli.svg +1 -0
  131. package/src/components/LogoBrandSection/assets/cnam.svg +1 -0
  132. package/src/components/LogoBrandSection/assets/compte-ameli.svg +1 -0
  133. package/src/components/LogoBrandSection/dividerDimensionsMapping.ts +14 -0
  134. package/src/components/LogoBrandSection/locales.ts +14 -0
  135. package/src/components/LogoBrandSection/secondaryLogoMapping.ts +24 -0
  136. package/src/components/LogoBrandSection/tests/LogoBrandSection.spec.ts +365 -0
  137. package/src/components/LogoBrandSection/tests/__snapshots__/LogoBrandSection.spec.ts.snap +14 -0
  138. package/src/components/LogoBrandSection/types.ts +8 -0
  139. package/src/components/NotificationBar/NotificationBar.mdx +6 -6
  140. package/src/components/NotificationBar/NotificationBar.stories.ts +1 -1
  141. package/src/components/NotificationBar/NotificationBar.vue +7 -9
  142. package/src/components/NotificationBar/tests/NotificationBar.spec.ts +1 -1
  143. package/src/components/PageContainer/PageContainer.mdx +1 -1
  144. package/src/components/PageContainer/PageContainer.stories.ts +86 -1
  145. package/src/components/PageContainer/PageContainer.vue +0 -1
  146. package/src/components/PhoneField/PhoneField.mdx +49 -0
  147. package/src/components/PhoneField/PhoneField.stories.ts +869 -0
  148. package/src/components/PhoneField/PhoneField.vue +230 -0
  149. package/src/components/PhoneField/indicatifs.ts +104 -0
  150. package/src/components/PhoneField/locales.ts +4 -0
  151. package/src/components/PhoneField/tests/PhoneField.spec.ts +179 -0
  152. package/src/components/SkipLink/SkipLink.stories.ts +50 -1
  153. package/src/components/SocialMediaLinks/SocialMediaLinks.mdx +28 -1
  154. package/src/components/SocialMediaLinks/SocialMediaLinks.stories.ts +37 -1
  155. package/src/components/SubHeader/SubHeader.mdx +31 -0
  156. package/src/components/SubHeader/SubHeader.stories.ts +1032 -0
  157. package/src/components/SubHeader/SubHeader.vue +185 -0
  158. package/src/components/SubHeader/config.ts +12 -0
  159. package/src/components/SubHeader/locales.ts +3 -0
  160. package/src/components/SubHeader/tests/SubHeader.spec.ts +144 -0
  161. package/src/components/index.ts +24 -7
  162. package/src/composables/widthable/index.ts +29 -0
  163. package/src/composables/widthable/tests/widthable.spec.ts +52 -0
  164. package/src/designTokens/tokens/cnam/cnamLightTheme.ts +2 -2
  165. package/src/main.ts +1 -0
  166. package/src/modules.d.ts +4 -0
  167. package/src/services/index.ts +1 -0
  168. package/src/stories/Demarrer/Accueil.mdx +10 -0
  169. package/src/stories/Demarrer/Accueil.stories.ts +76 -0
  170. package/src/stories/Demarrer/PolitiqueDeConfidentialite.mdx +9 -0
  171. package/src/stories/Demarrer/PolitiqueDeConfidentialite.stories.ts +20 -0
  172. package/src/stories/Fondamentaux/Accessibilite/Accessibilite.mdx +1 -2
  173. package/src/stories/Fondamentaux/Accessibilite/Accessibilite.stories.ts +1 -1
  174. package/src/stories/Fondamentaux/EcoConception/Econception.stories.ts +1 -1
  175. package/src/stories/GuideDuDev/moduleDeNotification.mdx +52 -48
  176. package/src/stories/GuideDuDev/vuetifyOptions.mdx +31 -28
  177. package/src/stories/Guidelines/CustomisationEtThemes.mdx +1 -1
  178. package/src/utils/functions/throttleDisplayFn/tests/throttleDisplayFn.spec.ts +47 -0
  179. package/src/utils/functions/throttleDisplayFn/throttleDisplayFn.ts +26 -0
  180. package/src/utils/rules/exactLength/index.ts +33 -0
  181. package/src/utils/rules/exactLength/locales.ts +6 -0
  182. package/src/utils/rules/required/index.ts +25 -0
  183. package/src/utils/rules/required/locales.ts +5 -0
  184. package/src/utils/rules/required/ruleMessageHelper.ts +14 -0
  185. package/src/utils/rules/required/tests/index.spec.ts +47 -0
  186. package/src/utils/rules/required/tests/rulesMessageHelper.spec.ts +22 -0
  187. package/src/utils/rules/types.d.ts +15 -0
  188. package/src/components/Beta/beta.mdx +0 -5
  189. package/src/components/Deprecated/deprecated.mdx +0 -5
  190. package/src/stories/Home/Accueil.mdx +0 -7
  191. package/src/stories/Home/PolitiqueDeConfidentialite.mdx +0 -4
  192. package/src/stories/Home/synapse.webp +0 -0
  193. /package/src/components/Logo/{types.d.ts → types.ts} +0 -0
@@ -0,0 +1,13 @@
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
+
3
+ exports[`HeaderBurgerMenu > should render the component 1`] = `
4
+ "<div data-v-18e6540e="" class="overlay">
5
+ <div data-v-18e6540e="" role="menu" class="menu-wrapper" style="left: 0px; top: 0px; height: calc(100vh - 0px - 48px);"><button data-v-18e6540e="">Test</button>
6
+ <nav data-v-18e6540e="" id="header-menu-wrapper" class="header-menu-wrapper" role="navigation" aria-label="Menu public">
7
+ <div data-v-18e6540e="" class="header-menu">
8
+ <div>Default slot</div>
9
+ </div>
10
+ </nav>
11
+ </div>
12
+ </div>"
13
+ `;
@@ -0,0 +1,13 @@
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
+
3
+ exports[`HeaderBurgerMenu > should render the component 1`] = `
4
+ "<div data-v-18e6540e="" class="overlay">
5
+ <div data-v-18e6540e="" role="menu" class="menu-wrapper" style="left: 0px; top: 0px; height: calc(100vh - 0px - 48px);"><button data-v-18e6540e="">Test</button>
6
+ <nav data-v-18e6540e="" id="header-menu-wrapper" class="header-menu-wrapper" role="navigation" aria-label="Menu public">
7
+ <div data-v-18e6540e="" class="header-menu">
8
+ <div>Default slot</div>
9
+ </div>
10
+ </nav>
11
+ </div>
12
+ </div>"
13
+ `;
@@ -0,0 +1,158 @@
1
+ /* eslint-disable vue/one-component-per-file */
2
+ import { vuetify } from '@tests/unit/setup'
3
+ import { mount } from '@vue/test-utils'
4
+ import { describe, expect, it } from 'vitest'
5
+ import { computed, defineComponent, inject, readonly, ref, type DeepReadonly, type Ref } from 'vue'
6
+ import { registerSubMenuKey } from '../conts'
7
+ import useHandleSubMenus from '../useHandleSubMenus'
8
+
9
+ describe('useHandleSubMenus', () => {
10
+ const TestParentComponent = defineComponent({
11
+ setup() {
12
+ const openStatus = ref(false)
13
+ const { haveOpenSubMenu } = useHandleSubMenus(readonly(openStatus))
14
+ const rootClasses = computed(() => ({
15
+ 'parent-open': openStatus.value,
16
+ 'has-open-submenu': haveOpenSubMenu.value,
17
+ }))
18
+
19
+ return { rootClasses, openStatus }
20
+ },
21
+ template: `
22
+ <button @click="openStatus = !openStatus" class="parent-menu-btn">Toggle</button>
23
+ <div :class="rootClasses"><slot/></div>
24
+ `,
25
+ })
26
+
27
+ const TestChildrenComponent = defineComponent({
28
+ setup() {
29
+ const openStatus = ref(false)
30
+ const registerSubMenu = inject<((r: DeepReadonly<Ref<boolean>>, c: () => void) => void) | undefined>(registerSubMenuKey)!
31
+
32
+ registerSubMenu(readonly(openStatus), () => {
33
+ openStatus.value = false
34
+ })
35
+
36
+ const rootClasses = computed(() => ({
37
+ 'children-open': openStatus.value,
38
+ }))
39
+
40
+ return { rootClasses, openStatus }
41
+ },
42
+ template: `
43
+ <button @click="openStatus = !openStatus" class="child-menu-btn">Toggle</button>
44
+ <div :class="rootClasses"></div>
45
+ `,
46
+ })
47
+
48
+ it('if close the submenu if the parent menu is closed', async () => {
49
+ const wrapper = mount({
50
+ components: {
51
+ TestParentComponent,
52
+ TestChildrenComponent,
53
+ },
54
+ template: `
55
+ <TestParentComponent>
56
+ <TestChildrenComponent />
57
+ </TestParentComponent>
58
+ `,
59
+ }, {
60
+ global: {
61
+ plugins: [vuetify],
62
+ },
63
+ })
64
+
65
+ expect(wrapper.find('.parent-open').exists()).toBe(false)
66
+ expect(wrapper.find('.children-open').exists()).toBe(false)
67
+
68
+ const parentBtn = wrapper.find('.parent-menu-btn')
69
+ await parentBtn.trigger('click')
70
+ expect(wrapper.find('.parent-open').exists()).toBe(true)
71
+ expect(wrapper.find('.children-open').exists()).toBe(false)
72
+
73
+ const childBtn = wrapper.find('.child-menu-btn')
74
+ await childBtn.trigger('click')
75
+ expect(wrapper.find('.parent-open').exists()).toBe(true)
76
+ expect(wrapper.find('.children-open').exists()).toBe(true)
77
+
78
+ await parentBtn.trigger('click')
79
+ expect(wrapper.find('.parent-open').exists()).toBe(false)
80
+ expect(wrapper.find('.children-open').exists()).toBe(false)
81
+
82
+ await parentBtn.trigger('click')
83
+ expect(wrapper.find('.parent-open').exists()).toBe(true)
84
+ expect(wrapper.find('.children-open').exists()).toBe(false)
85
+ })
86
+
87
+ it('if close the submenu if another submenu is opened', async () => {
88
+ const wrapper = mount({
89
+ components: {
90
+ TestParentComponent,
91
+ TestChildrenComponent,
92
+ },
93
+ template: `
94
+ <TestParentComponent>
95
+ <TestChildrenComponent />
96
+ <TestChildrenComponent />
97
+ </TestParentComponent>
98
+ `,
99
+ }, {
100
+ global: {
101
+ plugins: [vuetify],
102
+ },
103
+ })
104
+
105
+ expect(wrapper.find('.parent-open').exists()).toBe(false)
106
+ expect(wrapper.findAll('.children-open').length).toBe(0)
107
+
108
+ const parentBtn = wrapper.find('.parent-menu-btn')
109
+ await parentBtn.trigger('click')
110
+ expect(wrapper.find('.parent-open').exists()).toBe(true)
111
+ expect(wrapper.findAll('.children-open').length).toBe(0)
112
+
113
+ const childBtns = wrapper.findAll('.child-menu-btn')
114
+ await childBtns[0].trigger('click')
115
+ expect(wrapper.find('.parent-open').exists()).toBe(true)
116
+ expect(wrapper.findAll('.children-open').length).toBe(1)
117
+
118
+ await childBtns[1].trigger('click')
119
+ expect(wrapper.find('.parent-open').exists()).toBe(true)
120
+ expect(wrapper.findAll('.children-open').length).toBe(1)
121
+ })
122
+
123
+ it('return haveOpenSubMenu and update it when the component have a submenu open', async () => {
124
+ const wrapper = mount({
125
+ components: {
126
+ TestParentComponent,
127
+ TestChildrenComponent,
128
+ },
129
+ template: `
130
+ <TestParentComponent>
131
+ <TestChildrenComponent />
132
+ <TestChildrenComponent />
133
+ </TestParentComponent>
134
+ `,
135
+ }, {
136
+ global: {
137
+ plugins: [vuetify],
138
+ },
139
+ })
140
+
141
+ const parentBtn = wrapper.find('.parent-menu-btn')
142
+ await parentBtn.trigger('click')
143
+ const parentMenu = wrapper.find('.parent-open')
144
+
145
+ expect(parentMenu!.classes()).not.toContain('has-open-submenu')
146
+
147
+ const childBtns = wrapper.findAll('.child-menu-btn')
148
+
149
+ await childBtns[0].trigger('click')
150
+ expect(parentMenu!.classes()).toContain('has-open-submenu')
151
+
152
+ await childBtns[0].trigger('click')
153
+ expect(parentMenu!.classes()).not.toContain('has-open-submenu')
154
+
155
+ await childBtns[1].trigger('click')
156
+ expect(parentMenu!.classes()).toContain('has-open-submenu')
157
+ })
158
+ })
@@ -0,0 +1,49 @@
1
+ import { computed, provide, ref, watch, type DeepReadonly, type Ref } from 'vue'
2
+ import { registerSubMenuKey } from './conts'
3
+
4
+ export default function useHandleSubMenus(openStatus: DeepReadonly<Ref<boolean>>) {
5
+ type SubMenu = { id: string, status: Ref<boolean>, close: () => void }
6
+ const subMenus: Ref<SubMenu[]> = ref([])
7
+
8
+ function registerSubMenu(status: Ref<boolean>, close: () => void) {
9
+ const id = String(subMenus.value.length)
10
+ const newSubMenu = { id, status, close }
11
+
12
+ // Register the new submenu
13
+ subMenus.value.push(newSubMenu)
14
+
15
+ // Watch for changes to the status of this specific submenu
16
+ watch(status, (newStatus) => {
17
+ if (newStatus) {
18
+ closeOtherSubMenus(newSubMenu)
19
+ }
20
+ })
21
+ }
22
+
23
+ function closeOtherSubMenus(subMenu: SubMenu) {
24
+ subMenus.value.forEach((otherSubMenu) => {
25
+ if (otherSubMenu.id !== subMenu.id && otherSubMenu.status) {
26
+ otherSubMenu.close()
27
+ }
28
+ })
29
+ }
30
+
31
+ // When the current menu is closed, close its submenus
32
+ watch(openStatus, (newOpenStatus) => {
33
+ if (!newOpenStatus) {
34
+ subMenus.value.forEach((subMenu) => {
35
+ if (subMenu.status) {
36
+ subMenu.close()
37
+ }
38
+ })
39
+ }
40
+ })
41
+
42
+ const haveOpenSubMenu = computed(() => subMenus.value.some(subMenu => subMenu.status))
43
+
44
+ provide(registerSubMenuKey, registerSubMenu)
45
+
46
+ return {
47
+ haveOpenSubMenu,
48
+ }
49
+ }
@@ -0,0 +1,143 @@
1
+ <script lang="ts" setup>
2
+ import { computed, getCurrentInstance } from 'vue'
3
+ import type { RouteLocationRaw } from 'vue-router'
4
+ import { useTheme } from 'vuetify'
5
+ import useHeaderResponsiveMode from '../useHeaderResponsiveMode'
6
+ import { locales } from './locales'
7
+ import LogoMobile from './logos/Logo-mobile.vue'
8
+ import Logo from './logos/Logo.vue'
9
+
10
+ const props = withDefaults(defineProps<{
11
+ ariaLabel?: string
12
+ serviceTitle?: string
13
+ serviceSubtitle?: string
14
+ homeLink?: {
15
+ ariaLabel?: string
16
+ to?: RouteLocationRaw
17
+ href?: string
18
+ }
19
+ }>(), {
20
+ ariaLabel: locales.ariaLabel,
21
+ serviceTitle: undefined,
22
+ serviceSubtitle: undefined,
23
+ homeLink: () => ({
24
+ href: '/',
25
+ }),
26
+ })
27
+
28
+ defineSlots<{
29
+ 'brand-content'?(): void
30
+ }>()
31
+
32
+ const theme = useTheme()
33
+ const primary = theme.current.value.colors.primary
34
+ const { isDesktop } = useHeaderResponsiveMode()
35
+
36
+ const routeType = computed(() => {
37
+ if (props.homeLink?.to) {
38
+ const componentsRegistered = getCurrentInstance()?.appContext?.components
39
+ const hasRouterLink = componentsRegistered && 'RouterLink' in componentsRegistered
40
+ if (hasRouterLink) {
41
+ return 'router-link'
42
+ }
43
+ return 'div'
44
+ }
45
+ if (props.homeLink?.href) {
46
+ return 'a'
47
+ }
48
+ return 'div'
49
+ })
50
+ </script>
51
+
52
+ <template>
53
+ <component
54
+ :is="routeType"
55
+ v-bind="{
56
+ to: 'to' in homeLink ? homeLink?.to : undefined,
57
+ href: 'href' in homeLink ? homeLink?.href : undefined,
58
+ 'aria-label': 'aria-label' in homeLink ? homeLink?.['aria-label'] : undefined,
59
+ }"
60
+ class="logo"
61
+ >
62
+ <Logo
63
+ v-if="isDesktop"
64
+ :aria-label="props.ariaLabel"
65
+ />
66
+ <LogoMobile
67
+ v-else
68
+ :aria-label="props.ariaLabel"
69
+ />
70
+
71
+ <slot
72
+ name="brand-content"
73
+ >
74
+ <svg
75
+ v-if="serviceTitle"
76
+ :width="22"
77
+ :height="64"
78
+ :fill="primary"
79
+ role="img"
80
+ focusable="false"
81
+ aria-hidden="true"
82
+ xmlns="http://www.w3.org/2000/svg"
83
+ viewBox="0 0 22 64"
84
+ class="vd-divider"
85
+ >
86
+ <path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
87
+ </svg>
88
+
89
+ <div v-if="serviceTitle">
90
+ <div class="service-title">
91
+ {{ serviceTitle }}
92
+ </div>
93
+ <div
94
+ v-if="serviceSubtitle"
95
+ class="service-subtitle"
96
+ >
97
+ {{ serviceSubtitle }}
98
+ </div>
99
+ </div>
100
+ </slot>
101
+ </component>
102
+ </template>
103
+
104
+ <style scoped lang="scss">
105
+ @use '../consts' as *;
106
+ @use '@/assets/tokens.scss' as *;
107
+
108
+ .logo {
109
+ display: flex;
110
+ height: 52px;
111
+ align-items: center;
112
+ color: $primary-base;
113
+ line-height: 1.45;
114
+ font-family: 'Cabin', 'Arial', 'Helvetica', sans-serif;
115
+ text-decoration: none;
116
+ cursor: pointer;
117
+ }
118
+
119
+ .logo :deep(svg) {
120
+ flex-grow: 0;
121
+ flex-shrink: 0;
122
+ }
123
+
124
+ .service-title {
125
+ font-size: 0.875rem;
126
+ font-weight: 500;
127
+ }
128
+
129
+ .service-subtitle {
130
+ font-size: 0.875rem;
131
+ font-weight: 400;
132
+ }
133
+
134
+ @media screen and (min-width: $header-breakpoint) {
135
+ .service-title {
136
+ font-size: 1.125rem;
137
+ }
138
+
139
+ .service-subtitle {
140
+ font-size: 0.75rem;
141
+ }
142
+ }
143
+ </style>
@@ -0,0 +1,3 @@
1
+ export const locales = {
2
+ ariaLabel: 'Ouvrir le menu',
3
+ }
@@ -0,0 +1,117 @@
1
+ <template>
2
+ <svg
3
+ fill="#0c419a"
4
+ :width="141"
5
+ :height="42"
6
+ :viewBox="'0 0 211 64'"
7
+ role="img"
8
+ focusable="false"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ >
11
+ <g>
12
+ <path
13
+ d="M100.1 45V30.6h3.8v14.6c0 .8.4 1 .7 1h.5l.5 2.9a5 5 0 0 1-2 .3c-2.6 0-3.5-1.7-3.5-4.4Z"
14
+ />
15
+
16
+ <path
17
+ d="m75.7 40.4 3.8-8.5h4V49h-3.6V38.4l-3 7.8h-2.4l-3-7.8v10.7H68V32h4l3.8 8.5Z"
18
+ />
19
+
20
+ <path
21
+ d="M107.1 45.5c0-2.8 2.3-4.3 7.4-4.9 0-1.1-.8-1.8-2.2-1.8-1 0-2.1.4-3.4 1.2l-1.3-2.6c1.6-1 3.5-1.7 5.5-1.7 3.3 0 5 1.9 5 5.9V49h-3.5v-1.3s-1.5 1.6-3.6 1.6c-2.4 0-3.9-1.7-3.9-4Zm7.4-.3V43c-2.7.3-3.7 1.2-3.7 2.2 0 .8.5 1.2 1.5 1.2.8 0 1.5-.5 2.2-1.2Z"
22
+ />
23
+
24
+ <path
25
+ d="M86.1 45.5c0-2.8 2.3-4.3 7.4-4.9 0-1.1-.8-1.8-2.2-1.8-1 0-2.1.4-3.4 1.2l-1.3-2.6c1.6-1 3.5-1.7 5.5-1.7 3.3 0 5 1.9 5 5.9V49h-3.5v-1.3S92 49.4 90 49.4c-2.4 0-3.9-1.7-3.9-4Zm7.4-.3V43c-2.7.3-3.7 1.2-3.7 2.2 0 .8.6 1.2 1.5 1.2.8 0 1.6-.5 2.2-1.2Z"
26
+ />
27
+
28
+ <path
29
+ d="M129 30.6v6.3a4.1 4.1 0 0 0-3.2-1.2c-2.7 0-5.3 2.6-5.3 6.8 0 4.3 2 7 5.2 7 1.8 0 3.1-1.4 3.2-1.5v1.1h3.8V30.6H129Zm-2.3 15.7c-1.5 0-2.4-1.2-2.4-3.8 0-2.5 1.1-3.6 2.4-3.6.6 0 1.4.2 2.2.8v5.4c-.7.8-1.4 1.2-2.2 1.2Z"
30
+ />
31
+
32
+ <path
33
+ d="M135.7 32c0-1.2 1-2 2.2-2 1.2 0 2.2.8 2.2 2s-1 2-2.2 2c-1.3 0-2.2-.8-2.2-2Zm.3 4h3.8V49H136V36Z"
34
+ />
35
+
36
+ <path
37
+ d="M142.2 42.5c0-4.2 2.6-6.8 5.9-6.8 3.6 0 5.6 2.7 5.6 6.3l-.1 1.7h-7.7c.3 2 1.6 2.8 3.3 2.8 1 0 1.8-.4 2.8-1l1.3 2.5c-1.3.9-3 1.4-4.6 1.4-3.8 0-6.5-2.5-6.5-6.9Zm8.3-1.4c0-1.4-.9-2.5-2.4-2.5-1.2 0-2 .9-2.3 2.5h4.7Z"
38
+ />
39
+
40
+ <path
41
+ d="M68 23.3V8.8h3.7v14.7c0 .8.4 1 .7 1h.5l.4 2.9a5 5 0 0 1-1.9.3c-2.6 0-3.5-1.7-3.5-4.4Z"
42
+ />
43
+
44
+ <path
45
+ d="m88.1 23.3 1 4.1h4l-5.3-17.3h-4.4l-5.3 17.3h4l1-4.1h5Zm-4.2-3 1.6-6.6h.2l1.6 6.5H84Z"
46
+ />
47
+
48
+ <path
49
+ d="m93.9 25.9 1.7-2.4c1.1.9 2.2 1.3 3.3 1.3 1.1 0 1.6-.4 1.6-1 0-1-1.2-1.4-2.6-1.9-1.6-.6-3.4-1.7-3.4-3.8 0-2.5 2-4.2 5-4.2 1.9 0 3.4.8 4.5 1.7l-1.7 2.4c-1-.7-1.8-1.2-2.8-1.2-1 0-1.4.4-1.4 1 0 1 1.2 1.2 2.5 1.7 1.6.7 3.5 1.6 3.5 4s-1.9 4.2-5.3 4.2c-1.7 0-3.6-.7-5-1.8Z"
50
+ />
51
+
52
+ <path
53
+ d="m105.3 25.9 1.7-2.4c1.1.9 2.2 1.3 3.3 1.3 1.1 0 1.6-.4 1.6-1 0-1-1.2-1.4-2.6-1.9-1.6-.6-3.4-1.7-3.4-3.8 0-2.5 2-4.2 5-4.2 1.9 0 3.4.8 4.5 1.7l-1.7 2.4c-1-.7-1.8-1.2-2.8-1.2-1 0-1.4.4-1.4 1 0 1 1.2 1.2 2.5 1.7 1.6.7 3.5 1.6 3.5 4s-1.9 4.2-5.3 4.2c-1.7 0-3.6-.7-5-1.8Z"
54
+ />
55
+
56
+ <path
57
+ d="M132.2 14.3h3.8V16c.8-1.4 2.5-2 3.4-2 .8 0 1.2.2 1.6.3l-.4 3.6c-.5-.2-1.1-.4-1.7-.4-1.5 0-2.8 1.3-2.9 3v6.8h-3.8V14.3Z"
58
+ />
59
+
60
+ <path
61
+ d="M155.7 14.3h3.8v1.6c1-1 2.2-2 4-2 2.7 0 4 2 4 5.3v8.2h-3.9v-7.7c0-1.9-.5-2.5-1.6-2.5-1 0-1.6.5-2.5 1.3v8.8h-3.8v-13Z"
62
+ />
63
+
64
+ <path
65
+ d="M180.6 20.8c0-4.3 2.7-6.9 5.9-6.9 3.7 0 5.7 2.8 5.7 6.3 0 .7 0 1.4-.2 1.8h-7.7c.4 1.9 1.7 2.8 3.4 2.8 1 0 1.8-.4 2.7-1l1.3 2.4c-1.3 1-3 1.5-4.6 1.5-3.7 0-6.5-2.5-6.5-6.9Zm8.4-1.4c0-1.4-.9-2.5-2.4-2.5-1.2 0-2 .8-2.3 2.5h4.7Z"
66
+ />
67
+
68
+ <path
69
+ d="M141.8 23.7c0-2.7 2.3-4.3 7.4-4.8 0-1.2-.8-1.9-2.2-1.9a7 7 0 0 0-3.4 1.2l-1.3-2.5c1.6-1 3.4-1.8 5.5-1.8 3.3 0 5 2 5 6v7.5h-3.6V26s-1.4 1.6-3.5 1.6c-2.4 0-4-1.7-4-4Zm7.4-.2v-2.3c-2.7.4-3.8 1.3-3.8 2.3 0 .8.6 1.2 1.5 1.2s1.7-.5 2.3-1.2Z"
70
+ />
71
+
72
+ <path
73
+ d="M76.7 8.8c-.8 0-1.9.6-1.9 1.7 0 1 .8 1.5 1.6 1.5 0 1.2-1 1.8-1.5 2.1l1 1.4c3.3-1 4-6.7.8-6.7Z"
74
+ />
75
+
76
+ <path
77
+ d="M125.3 14.3V23c-.8 1-1.4 1.4-2.3 1.4-1 0-1.6-.6-1.6-2.5v-7.6h-3.8v8.3c0 3 1.4 5.1 4 5.1 2.5 0 3.8-1.6 3.8-1.6v1.3h3.7V14.3h-3.8Z"
78
+ />
79
+
80
+ <path
81
+ d="M176.3 24.6c-1.7 0-3-1.5-3-3.7 0-2.3 1.3-3.8 3-3.8.6 0 1.1.2 1.7.7l1.8-2.5c-.9-.8-2.1-1.3-3.7-1.3a6.5 6.5 0 0 0-6.6 6.9c0 4.3 2.7 6.8 6.3 6.8 1.4 0 3-.4 4.2-1.5l-1.4-2.7c-.7.6-1.5 1-2.3 1Z"
82
+ />
83
+ </g>
84
+
85
+ <path
86
+ d="M34.8 9c-.1-.2-.4-.3-.6-.3H34c-.2-.2-5.3 0-6.5.7 0-.8-.4-1.8-1.7-2-1-.3-3.1.7-2.4 2.8 0 .3.3.6.7.8.2 0 .5 0 .7.6h.3l.2.2h.5c.4.4.8-.1 1-.5l.7 2c-.2-.2-1.8-.6-2.5.2s-1.2 1.8-1.7 3.5c-.2.4-.5.7-1 .9-.9.3-.4.7-.2.7a6 6 0 0 0 2 0c.4-.2.1-1 .5-1.4l.8-1c0 .5 0 .8-.3 1.5-.2.7-1 1-1.3 1.3-.4.5.6.5.8.5.7-.2 1-.2 1.3-.4.4-.2.2-.8.3-1 .3-.7 1.4-2 1.6-2.3.8.2 1.7.2 2 .2 1.9-.2 2.3-1.5 2-2.6-.1-1-.7-1.5-.9-1.8l-.9-1.4 3.5-.9c0 .3.3.3.4.4.2.1.3 0 .2-.1a.6.6 0 0 1-.2-.2h.7c.3 0 .4-.4.3-.5Z"
87
+ />
88
+
89
+ <path
90
+ fill-rule="evenodd"
91
+ clip-rule="evenodd"
92
+ d="M61 26.7c-.5-2.6-2.9-4.1-4.1-4.7l-1.4-.4-.4-.2c.1-.5.8-.5 1.2-1.3 1-2.3-1.2-3.8-2.8-3.5-.8.2-1.3.4-1.5 1 0 .4-.3.4-.7.8-.2.2.1.4.2.5l-.1.3v.5s-.3.3 0 .7l.3.8c0 .1 0 .2-.3 0l-3.4-1a37.4 37.4 0 0 1-4.2-4.7c-.7 0 .5 1.3-.1.8-.2 0-.7-.4-.8-.5l-.1-.2-.3-.3H42.2c-.2 0-.1.5 0 .7 0 0 .4 1.2.6 1.4l1.5 1 2.6 3c.7.7 3.8 2.5 3.9 2.6.2 0 .5.8 0 5.5-.1 1.8-1.4 5.6-.8 7.5.4 1.3.9 2.2 1.3 5.6.1.8-.5 1.3-1.3 2l-1.4.8c-.2.2 0 .4.2.5.2 0 .5.3.8.3.3.1.9 0 1.4-.3.7-.3.7-.4 1-.6.5-.3 1-.3 1.2-.8.2-.6-.3-1.4-.3-1.7.4-2.8.9-4.1.2-5.8-.2-.3 1-4 1-3.4.2.9.3 3.8.3 5.9 0 .9.8 4.2 1 5.4.4 1.8-2.6 3.2-2 3.8l1 .3 1-.1c.3-.1.6-.5.7-.6.6-.8.4-.6 1-1.1.4-.5 0-1.4 0-1.8v-2.9c0-1.9 0-2.4.2-3.2l1-6.2s.2 0 .3-.2c.2-.2.1-.5.2-.7 0-.2 0 0 0 0l.2.6-.2.8c-.2.4.1.4.2.5 0 0 1-.7 1.2-1l.1-.8-.2-1.8c.2-.9 1-3.2.8-3.8Zm-2.2 3.6c-.2.5-.2 0-.6 1.7V31.1c0-2.1-1.5-6.5-.6-5.6 0 0 1.2.8 1.4 1.4.2.5.1 1.8-.2 3.4Z"
93
+ />
94
+
95
+ <path
96
+ d="M20 35.3c-.3-.3-1.6-2-2.4-2.7l-1-1.5c-1.6-2-1.9-2.1-3-2.2-.1-.2 0-.3 0-.4 1.3-.5.9-1.6.8-1.7l.2-.6-.2-1-.1-.7c-.8-.9-2.6-.9-3.5-.3-.8.5-.3.9-.6 1.6-.1.5 0 .9.3 1.2 0 .3.8.7.7 1.2-.2.6-1 .7-1 .7l-.3.1c-1.4.8-2.7 2-2.9 3.2 0 1 1.7 2.5 2.7 3.3.1 1.7 1.2 4.4 1.3 4.5.1.3-.3-.3-1.4-.7-.6-.1-1.2-.9-1.4 0 0 .4 0 1-.3 1.8-.2.6 0 1.5.7 1.5.5 0 .8-1.4.8-1.4s2.3 1 3.3.7c.7-.2.8-2.7.2-5-.2-.8.4 1.3 2 3.1.2.4 0 .7.2 2.2v1c0 .7-.7 1.6.9 2 1.6.4 1.5.8 2.5.1.5-.3-1.4-.5-1.8-1.6v-.2c0-.9.3-2.9.2-3.6-.6-3.4-2-5-2.2-5.8 0-2.4-.2-3.2 0-2.6l1 1.5.3.3.4.4 2.8 2.1s.1 1 .6 1c.4 0 2.3-1 2.2-1.1 0-.3-2-.3-2-.4ZM9.7 34l-1-1.8c.4-.7 1-1 1-.9.2 0 0 2.7 0 2.7Z"
97
+ />
98
+
99
+ <path
100
+ d="M51.8 54.8c-.1 0-1.2-.5-2.2-2-.5-.8-3.8-7-4.3-8.2-.9-2.4-8-6.7-8.2-7-.2-.1-.2-.5-.1-.8.5-2 .3-3.8.4-4.1.3-.7.8-1.7.4-2.3l-.7-1.2s3.7 1.4 4.6 1.2c.8-.2 4.5-2.8 4.7-2.9.5-.2 1.8.1 3-1.3.5-.5.2-.6 0-.6.1 0-.1-.2-.4 0-.2.1-1.3.4-1.1.2.8-.5.2-.7.2-.7-.3.3-1.8.7-2.1 1l-.8.5c-.9.5-2.4 1.3-4 1.7-.3 0-3.3-2-5-2.2-1-.1-1.3 0-1.8.1-.6.2-.6-.7 0-1 .2 0 .6-.1.7-.4.2-.4 0-.7 0-.8v-.2l-.1-.1v-.5c.3-.2.2-.4.1-.4-.1-.1-.6-.4-.7-.7 0-.6-.3-.9-.3-1.2 0 0-.1-.8-.4-1-.4-.4-1.2-.8-2.8-.3-.6.1-.5.4-1.8.6-1.6.3-2.4 2.7-2.3 3.7.1.8.8.4.8.7 0 .6-.1 1.5 1 1.8.3 0 1.8-.2 2.4 0 0 0 .5 0 .2.4-.1.2-1.6.9-2 1-1 .4-3.6 4.6-4.3 5-.7.3-1 .6-1.3.8-1 .6-2.1 1.4-2.7 1.4-.7 0-1.4.3-1.9 1.5-.1.3 0 .5.3.5 0 .1.2.3.4.3.2.2.5 0 .7 0l1-.7c.5-.2 4-1.5 4.7-2.1 1.2-.6 3.5-3 4-3s1.6 1 1.2 3c0 .7-1 2-1.4 2.6-1 1.5-.2 2.7-.4 3-1 1.6-2.2 3.7-4.2 5.5-.8.6-2.4.7-3.3 1-2 .5-4.2 2-5.7 2.8-.5.3-1-.3-1.6-.4-.7 0-.7 1-1 1.8l-.7 1.5c-.1.4-.7 1.7-.1 2.2.4.7 1.5-1.4 2.4-2.3.4-.5.7-.7 1.7-1 .6 0 5.6-1.4 8.8-2.2h.3c4.2-1.1 8.6-6.6 8.7-6.6l7.2 3.5c.7.4.7 1.8 1.5 3.4a22 22 0 0 0 4.4 4.9c.4.4 0 1 .2 1.6.2.6.6.6 1.1.6l1.6-.2c.7 0 .5 0 1.3.2.4 0 1.3.1 2-.5 1-1.2-1.2-.6-2.3-1.1Z"
101
+ />
102
+
103
+ <path
104
+ d="M44 51.7a.4.4 0 0 0-.6-.2 22.2 22.2 0 0 1-21-.6.5.5 0 0 0-.6.2c-.1.2 0 .4.1.6a23 23 0 0 0 21.9.5c.2 0 .3-.3.2-.5Z"
105
+ />
106
+
107
+ <path
108
+ d="M12.9 22.9h-.2c-.2-.2-.3-.4-.2-.6 2-4.4 5.2-8 9.3-10.4.2-.1.5 0 .6.2.2.2 0 .4-.1.6-4 2.3-7.1 5.7-9 10l-.4.2Z"
109
+ />
110
+
111
+ <path
112
+ d="M50.3 17.3c-.1 0-.3 0-.3-.2A22 22 0 0 0 36.5 10c-.2 0-.4-.3-.3-.5 0-.3.2-.4.5-.4a23 23 0 0 1 14 7.5v.7h-.4Z"
113
+ />
114
+ </svg>
115
+ </template>
116
+
117
+ <style scoped>.cls-2{fill:#0c419a}</style>