@cnamts/synapse 1.0.9 → 1.0.11

package/src/components/HeaderBar/HeaderBurgerMenu/tests/HeaderBurgerMenu.spec.ts

@@ -1,4 +1,3 @@
-import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi, afterAll } from 'vitest'
 import { registerHeaderMenuKey } from '../../consts'
@@ -31,7 +30,6 @@ describe('HeaderBurgerMenu', () => {
 	it('should render the component', async () => {
 		const wrapper = mount(HeaderBurgerMenu, {
 			global: {
-				plugins: [vuetify],
 				provide: {
 					[registerHeaderMenuKey]: () => {},
 				},
@@ -58,7 +56,6 @@ describe('HeaderBurgerMenu', () => {
 	it('should close the menu when clicking outside', async () => {
 		const wrapper = mount(HeaderBurgerMenu, {
 			global: {
-				plugins: [vuetify],
 				provide: {
 					[registerHeaderMenuKey]: () => {},
 				},
@@ -87,7 +84,6 @@ describe('HeaderBurgerMenu', () => {
 	it('should not close the menu when clicking inside', async () => {
 		const wrapper = mount(HeaderBurgerMenu, {
 			global: {
-				plugins: [vuetify],
 				provide: {
 					[registerHeaderMenuKey]: () => {},
 				},
@@ -115,7 +111,6 @@ describe('HeaderBurgerMenu', () => {
 	it('should listen to the button to open and close the menu', async () => {
 		const wrapper = mount(HeaderBurgerMenu, {
 			global: {
-				plugins: [vuetify],
 				provide: {
 					[registerHeaderMenuKey]: () => {},
 				},
@@ -143,7 +138,6 @@ describe('HeaderBurgerMenu', () => {
 	it('reposition the menu when the size of the window changes', async () => {
 		const wrapper = mount(HeaderBurgerMenu, {
 			global: {
-				plugins: [vuetify],
 				provide: {
 					[registerHeaderMenuKey]: () => {},
 				},

package/src/components/HeaderBar/HeaderBurgerMenu/tests/useHandleSubMenus.spec.ts

@@ -1,5 +1,4 @@
 /* eslint-disable vue/one-component-per-file */
-import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { computed, defineComponent, inject, readonly, ref, type DeepReadonly, type Ref } from 'vue'
@@ -56,10 +55,6 @@ describe('useHandleSubMenus', () => {
 					<TestChildrenComponent />
 				</TestParentComponent>
 			`,
-		}, {
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.find('.parent-open').exists()).toBe(false)
@@ -96,10 +91,6 @@ describe('useHandleSubMenus', () => {
 					<TestChildrenComponent />
 				</TestParentComponent>
 			`,
-		}, {
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.find('.parent-open').exists()).toBe(false)
@@ -132,10 +123,6 @@ describe('useHandleSubMenus', () => {
 					<TestChildrenComponent />
 				</TestParentComponent>
 			`,
-		}, {
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		const parentBtn = wrapper.find('.parent-menu-btn')

package/src/components/HeaderBar/HeaderLogo/tests/HeaderLogo.spec.ts

@@ -1,4 +1,3 @@
-import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import HeaderLogo from '../HeaderLogo.vue'
@@ -15,9 +14,6 @@ describe('HeaderLogo', () => {
 		window.happyDOM.setInnerWidth(600)
 
 		const mobileWrapper = mount(HeaderLogo, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -35,9 +31,6 @@ describe('HeaderLogo', () => {
 		window.happyDOM.setInnerWidth(1200)
 
 		const desktopWrapper = mount(HeaderLogo, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 
@@ -58,9 +51,6 @@ describe('HeaderLogo', () => {
 
 	it('sould display the service and the logo aria-label', async () => {
 		const wrapper = mount(HeaderLogo, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				ariaLabel: 'Test aria label',
 				serviceTitle: 'Test service title',
@@ -77,9 +67,6 @@ describe('HeaderLogo', () => {
 
 	it('should render only the serviceTitle slot when set', async () => {
 		const wrapper = mount(HeaderLogo, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				serviceTitle: 'Test service title',
 			},
@@ -97,9 +84,7 @@ describe('HeaderLogo', () => {
 	it('render a router-link when homeLink is set with `to`', async () => {
 		const wrapper = mount(HeaderLogo, {
 			global: {
-				plugins: [vuetify],
-				stubs: ['RouterLink'],
-			},
+				stubs: ['RouterLink'] },
 			props: {
 				homeLink: {
 					to: '/',
@@ -113,9 +98,6 @@ describe('HeaderLogo', () => {
 
 	it('render a div when there there is no `RouterLink` component registered', async () => {
 		const wrapper = mount(HeaderLogo, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				homeLink: {
 					to: '/',
@@ -128,9 +110,6 @@ describe('HeaderLogo', () => {
 
 	it('render a div when the homeLink properties `to` and `href` are both set to `undefined`', async () => {
 		const wrapper = mount(HeaderLogo, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				homeLink: {
 					to: undefined,

package/src/components/HeaderBar/HeaderMenuBtn/tests/HeaderMenuBtn.spec.ts

@@ -1,4 +1,3 @@
-import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import HeaderMenuBtn from '../HeaderMenuBtn.vue'
@@ -7,9 +6,6 @@ import locals from '../locals'
 describe('HeaderMenuBtn', () => {
 	it('should render the component', async () => {
 		const wrapper = mount(HeaderMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: false,
 			},
@@ -26,9 +22,6 @@ describe('HeaderMenuBtn', () => {
 
 	it('emit an event when the button is clicked', async () => {
 		const wrapper = mount(HeaderMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: false,
 			},
@@ -44,9 +37,6 @@ describe('HeaderMenuBtn', () => {
 
 	it('focus when the focus exposed function is called', async () => {
 		const wrapper = mount(HeaderMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: false,
 			},

package/src/components/HeaderBar/tests/HeaderBar.spec.ts

@@ -1,4 +1,3 @@
-import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
 import { afterAll, describe, expect, it, vi } from 'vitest'
 import { defineComponent, inject, onMounted, ref, type Ref } from 'vue'
@@ -20,9 +19,6 @@ describe('HeaderBar', () => {
 			props: {
 				sticky: false,
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		window.dispatchEvent(new CustomEvent('scroll'))
@@ -49,9 +45,6 @@ describe('HeaderBar', () => {
 
 	it('should render all the component slots', async () => {
 		const wrapper = mount(HeaderBar, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 			slots: {
 				'default': '<div>Default slot</div>',
@@ -111,9 +104,6 @@ describe('HeaderBar', () => {
 					</template>
 				</HeaderBar>`,
 		}, {
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		const text = wrapper.text()
@@ -133,9 +123,6 @@ describe('HeaderBar', () => {
 			props: {
 				sticky: true,
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		window.dispatchEvent(new CustomEvent('scroll'))
@@ -165,9 +152,6 @@ describe('HeaderBar', () => {
 			props: {
 				hideWhenDown: true,
 			},
-			global: {
-				plugins: [vuetify],
-			},
 			attachTo: document.body,
 		})
 		window.dispatchEvent(new CustomEvent('scroll'))

package/src/components/HeaderLoading/tests/HeaderLoading.spec.ts

@@ -1,15 +1,11 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { vuetify } from '@tests/unit/setup'
 
 import HeaderLoading from '../HeaderLoading.vue'
 
 describe('HeaderLoading', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(HeaderLoading, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				width: '100px',
 				height: '1rem',

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -146,20 +146,30 @@
 								<HeaderMenuItem
 									v-for="item in items"
 									:key="item.label"
+									:disabled="item.disabled"
 								>
+									<!-- Link with href for enabled items -->
 									<a
-										v-if="'href' in item"
+										v-if="'href' in item && !item.disabled"
 										:href="item.href"
 									>
 										{{ item.label }}
 									</a>
+									<!-- RouterLink for enabled items -->
 									<RouterLink
-										v-else-if="item.to"
+										v-else-if="item.to && !item.disabled"
 										:to="item.to"
 										@click="menuOpen = false"
 									>
 										{{ item.label }}
 									</RouterLink>
+									<!-- Span for disabled items -->
+									<span
+										v-else
+										class="disabled-item"
+									>
+										{{ item.label }}
+									</span>
 								</HeaderMenuItem>
 							</HeaderMenuSection>
 						</slot>
@@ -228,4 +238,10 @@
 .inner-vertical-menu__main-content {
 	flex: 1;
 }
+
+.disabled-item {
+	opacity: 0.38;
+	color: rgba(var(--v-theme-on-surface), 0.38);
+	cursor: not-allowed;
+}
 </style>

package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue

@@ -47,8 +47,11 @@
 	const route = instance?.appContext.config.globalProperties.$route as RouteLocationNormalizedLoaded | null || null
 	const router = instance?.appContext.config.globalProperties.$router as Router | null || null
 
-	// État pour suivre l'élément actif
-	const activeTab = ref<number>(0)
+	// Chemin courant réactif (prend router.currentRoute si dispo)
+	const currentPath = computed<string | null>(() => router?.currentRoute?.value?.path ?? route?.path ?? (typeof window !== 'undefined' ? window.location.pathname : null))
+
+	// État pour suivre l'élément actif (-1 signifie aucun onglet actif)
+	const activeTab = ref<number>(-1)
 	const activeItemIndex = ref<number>(-1)
 
 	// Convertir les items de navigation en format TabItem pour SyTabs
@@ -60,23 +63,27 @@
 			content: '',
 			href: item.href,
 			to: item.to,
+			disabled: item.disabled,
 		}))
 	})
 
 	// Fonction pour déterminer si un élément de navigation est actif
 	function isActive(item: NavigationItem, index: number): boolean {
-		// Si l'élément est explicitement activé par un clic ou initialisé
-		if (activeItemIndex.value === index) {
-			return true
+		// Si l'élément est désactivé, il ne peut pas être actif
+		if (item.disabled) {
+			return false
 		}
 
+		// Ne pas court-circuiter sur l'état interne; recalculer toujours à partir de la route courante
+
 		// Pour les liens internes (router-link)
-		if (item.to && route) {
+		const pathNow = currentPath.value
+		if (item.to && pathNow) {
 			// Gestion des objets de route
 			if (typeof item.to === 'object') {
 				// Comparer avec le chemin de la route actuelle
 				const path = item.to.path || ''
-				const isActiveRoute = route.path === path
+				const isActiveRoute = pathNow === path
 				if (isActiveRoute) activeItemIndex.value = index
 				return isActiveRoute
 			}
@@ -84,7 +91,7 @@
 			// Gestion des chaînes de caractères
 			if (typeof item.to === 'string') {
 				// Comparer exactement ou vérifier si c'est un sous-chemin
-				const isActiveRoute = route.path === item.to || (item.to !== '/' && route.path.startsWith(item.to))
+				const isActiveRoute = pathNow === item.to || (item.to !== '/' && pathNow.startsWith(item.to))
 				if (isActiveRoute) activeItemIndex.value = index
 				return isActiveRoute
 			}
@@ -108,6 +115,14 @@
 
 	// Fonction pour gérer la navigation lors d'un changement d'onglet
 	async function handleTabChange(index: number) {
+		// Récupérer l'élément correspondant à cet index
+		const item = props.items?.[index]
+
+		// Ne pas continuer si l'item est désactivé ou n'existe pas
+		if (!item || item.disabled) {
+			return
+		}
+
 		// Mettre à jour l'élément actif
 		setActiveItem(index)
 
@@ -117,10 +132,6 @@
 			return
 		}
 
-		// Récupérer l'élément correspondant à cet index
-		const item = props.items?.[index]
-		if (!item) return
-
 		// Navigation vers la destination si nécessaire
 		if (item.to && router) {
 			try {
@@ -164,10 +175,10 @@
 			}
 		}
 
-		// Si aucun élément n'est actif, sélectionner le premier par défaut
-		if (!foundActiveItem && props.items.length > 0) {
-			activeItemIndex.value = 0
-			activeTab.value = 0
+		// Si aucun élément n'est actif, aucun onglet ne doit être sélectionné
+		if (!foundActiveItem) {
+			activeItemIndex.value = -1
+			activeTab.value = -1
 		}
 
 		return { activeTab: activeTab.value, activeItemIndex: activeItemIndex.value }
@@ -179,21 +190,27 @@
 	})
 
 	// Surveiller les changements de route pour mettre à jour l'élément actif
-	watch(() => route?.path, () => {
+	watch(() => currentPath.value, () => {
 		// Si route est undefined, ne rien faire
-		if (!route) return
+		if (!currentPath.value) return
 		if (Array.isArray(props.items)) {
 			// Reset activeItemIndex
 			activeItemIndex.value = -1
 
 			// Trouver l'élément actif basé sur la nouvelle route
+			let found = false
 			for (let i = 0; i < props.items.length; i++) {
 				if (isActive(props.items[i], i)) {
 					activeItemIndex.value = i
 					activeTab.value = i
+					found = true
 					break
 				}
 			}
+			if (!found) {
+				activeItemIndex.value = -1
+				activeTab.value = -1
+			}
 		}
 	})
 </script>

package/src/components/HeaderNavigationBar/tests/HeaderNavigationBar.spec.ts

@@ -1,5 +1,4 @@
 import HeaderBurgerMenu from '@/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue'
-import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
 import { afterAll, describe, expect, it, vi } from 'vitest'
 import HeaderNavbar from '../HeaderNavigationBar.vue'
@@ -21,7 +20,6 @@ describe('HeaderNavigationBar', () => {
 
 		const wrapper = mount(HeaderNavbar, {
 			global: {
-				plugins: [vuetify],
 				stubs: {
 					Teleport: true,
 					RouterLink: true, // Stub pour éviter l'avertissement de résolution de composant
@@ -64,7 +62,6 @@ describe('HeaderNavigationBar', () => {
 
 		const wrapper = mount(HeaderNavbar, {
 			global: {
-				plugins: [vuetify],
 				stubs: {
 					Teleport: true,
 					RouterLink: true, // Stub pour éviter l'avertissement de résolution de composant
@@ -99,7 +96,6 @@ describe('HeaderNavigationBar', () => {
 
 		const wrapper = mount(HeaderNavbar, {
 			global: {
-				plugins: [vuetify],
 				stubs: {
 					Teleport: true,
 					RouterLink: true,

package/src/components/HeaderNavigationBar/types.ts

@@ -4,4 +4,5 @@ export interface NavigationItem {
 	label: string
 	href?: string
 	to?: RouteLocationRaw
+	disabled?: boolean
 }

package/src/components/HeaderToolbar/Accessibilite.stories.ts

@@ -195,6 +195,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+                <div class="mt-4">
+                  <p>Rapport d’audit manuel : <a href="/audits/HeaderToolbar.xlsx" style="color:#0C41BD;">Voir le
+                    rapport</a></p>
+                  <p style="color: grey; font-size: 14px">Correctifs associés (<a
+                      href="https://github.com/assurance-maladie-digital/design-system-v3/issues/640" target="_blank"
+                      style="color:#0C41BD;"
+                  >issue #640</a>)</p>
+                </div>
 			  </div>
             `,
 		}

package/src/components/HeaderToolbar/HeaderToolbar.mdx

@@ -25,7 +25,6 @@ import * as HeaderToolbar from './HeaderToolbar.stories';
 <script setup lang="ts">
 	import { HeaderToolbar } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
 	<HeaderToolbar />

package/src/components/HeaderToolbar/HeaderToolbar.stories.ts

@@ -10,16 +10,75 @@ const meta: Meta<typeof HeaderToolbar> = {
 	},
 	argTypes: {
 		leftMenu: {
-			control: 'object',
-			description: 'Slot pour remplacer le menu de gauche.',
+			description: 'Éléments du menu de gauche. Peut être remplacé via slot #left-menu.',
+			control: { type: 'object' },
+			table: {
+				category: 'props',
+				type: { summary: 'MenuItem[]' },
+				defaultValue: {
+					summary: 'Liste par défaut',
+					detail: `[
+  { title: 'Assuré', href: 'https://www.ameli.fr/assure', openInNewTab: true },
+  { title: 'Professionnel de santé' },
+  { title: 'Entreprise', href: 'https://www.ameli.fr/entreprise', openInNewTab: true }
+]`,
+				},
+			},
 		},
 		rightMenu: {
-			control: 'object',
-			description: 'Slot pour remplacer le menu de droite.',
+			description: 'Éléments du menu de droite. Peut être remplacé via slot #right-menu.',
+			control: { type: 'object' },
+			table: {
+				category: 'props',
+				type: { summary: 'MenuItem[]' },
+				defaultValue: {
+					summary: 'Liste par défaut',
+					detail: `[
+  { title: 'Qui sommes-nous ?', href: 'https://www.assurance-maladie.ameli.fr/qui-sommes-nous', openInNewTab: true },
+  { title: 'Carrières', href: 'https://www.assurance-maladie.ameli.fr/carrieres', openInNewTab: true },
+  { title: 'Études et données', href: 'https://www.assurance-maladie.ameli.fr/etudes-et-donnees', openInNewTab: true },
+  { title: 'Presse', href: 'https://www.assurance-maladie.ameli.fr/presse', openInNewTab: true }
+]`,
+				},
+			},
 		},
 		itemsSelectMenu: {
-			control: 'object',
-			description: 'Menu de sélection.',
+			description: 'Sous-items du menu déroulant « Professionnel de santé ».',
+			control: { type: 'object' },
+			table: {
+				category: 'props',
+				type: { summary: 'SelectItem[]' },
+				defaultValue: {
+					summary: 'Liste par défaut',
+					detail: `[
+  { text: 'Chirurgien-dentiste', value: 'Chirurgien-dentiste', href: 'https://www.ameli.fr/chirurgien-dentiste', openInNewTab: true },
+  { text: 'Établissement', value: 'Établissement', href: 'https://www.ameli.fr/etablissement', openInNewTab: true },
+  { text: 'Exercice coordonné', value: 'Exercice coordonné', href: 'https://www.ameli.fr/exercice-coordonne', openInNewTab: true },
+  { text: 'Infirmier', value: 'Infirmier', href: 'https://www.ameli.fr/infirmier', openInNewTab: true },
+  { text: "Laboratoire d'analyses médicales", value: "Laboratoire d'analyses médicales", href: 'https://www.ameli.fr/laboratoire-danalyses-medicales', openInNewTab: true },
+  { text: 'Masseur-kinésithérapeute', value: 'Masseur-kinésithérapeute', href: 'https://www.ameli.fr/masseur-kinesitherapeute', openInNewTab: true },
+  { text: 'Médecin', value: 'Médecin', href: 'https://www.ameli.fr/medecin', openInNewTab: true },
+  { text: 'Orthophoniste', value: 'Orthophoniste', href: 'https://www.ameli.fr/orthophoniste', openInNewTab: true },
+  { text: 'Orthoptiste', value: 'Orthoptiste', href: 'https://www.ameli.fr/orthoptiste', openInNewTab: true },
+  { text: 'Pédicure-podologue', value: 'Pédicure-podologue', href: 'https://www.ameli.fr/pedicure-podologue', openInNewTab: true },
+  { text: 'Pharmacien', value: 'Pharmacien', href: 'https://www.ameli.fr/pharmacien', openInNewTab: true },
+  { text: 'Professionnel de la LPP/LATM', value: 'Professionnel de la LPP/LATM', href: 'https://www.ameli.fr/professionnel-de-la-lpplatm', openInNewTab: true },
+  { text: 'Psychologue', value: 'Psychologue', href: 'https://www.ameli.fr/psychologue', openInNewTab: true },
+  { text: 'Sage-femme', value: 'Sage-femme', href: 'https://www.ameli.fr/sage-femme', openInNewTab: true },
+  { text: 'Taxi conventionné', value: 'Taxi conventionné', href: 'https://www.ameli.fr/taxi-conventionne', openInNewTab: true },
+  { text: 'Transporteur sanitaire', value: 'Transporteur sanitaire', href: 'https://www.ameli.fr/transporteur-sanitaire', openInNewTab: true },
+]`,
+				},
+			},
+		},
+		currentPageIndex: {
+			description: 'Indice de la page actuelle dans le menu de gauche (0 Assuré, 1 Professionnel de santé, 2 Entreprise).',
+			control: { type: 'number' },
+			table: {
+				category: 'props',
+				type: { summary: 'number | null' },
+				defaultValue: { summary: 'null' },
+			},
 		},
 	},
 }