@cnamts/synapse 1.0.25 → 1.0.27

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -3,7 +3,8 @@
 	import useFilterable from '@/composables/useFilterable/useFilterable'
 	import { mdiFilterVariant } from '@mdi/js'
 	import { computed, onMounted, ref, toRef, watch } from 'vue'
-	import { type VBtn, type VNavigationDrawer } from 'vuetify/components'
+	import type { VBtn } from 'vuetify/components/VBtn'
+	import type { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer'
 	import ChipList from '../ChipList/ChipList.vue'
 	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 	import { locales as defaultLocales } from './locales'
@@ -217,9 +218,9 @@
 							size="large"
 							class="sy-filters-side-bar__apply-btn"
 							variant="elevated"
-							type="submit"
+							type="button"
 							:aria-label="locales.applyAriaLabel"
-							@click.stop="applyFilters"
+							@click.prevent="applyFilters"
 						>
 							{{ locales.apply }}
 						</VBtn>

package/src/components/FooterBar/FooterBar.vue

@@ -363,32 +363,32 @@ a {
 .vd-footer-bar.v-theme--dark :deep() {
 	.vd-footer-bar-links li,
 	.vd-footer-bar-links a {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 
 		&.version {
-			color: rgb(var(--v-theme-textSubduedOnDark));
+			color: rgb(var(--v-theme-surface));
 		}
 	}
 
 	p,
 	.text--primary {
-		color: rgba(var(--v-theme-textOnDark), 0.87);
+		color: rgba(var(--v-theme-onPrimary));
 	}
 
 	.text--secondary {
-		color: rgba(var(--v-theme-textOnDark), 0.6);
+		color: rgba(var(--v-theme-onPrimary));
 	}
 
 	a.text--primary {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 	}
 
 	.v-divider {
-		border-color: rgba(var(--v-theme-borderSubdued), 1);
+		border-color: rgba(var(--v-theme-disabled), 1);
 	}
 
 	svg {
-		fill: rgb(var(--v-theme-textOnDark));
+		fill: rgb(var(--v-theme-onPrimary));
 	}
 }
 

package/src/components/FranceConnectBtn/FranceConnectBtn.vue

@@ -123,7 +123,7 @@
 
 .sy-france-connect-btn--dark {
 	.sy-france-connect-link {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 		background-color: #8585f6;
 
 		&:hover {

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -55,10 +55,10 @@
 
 	.header-menu-item:hover {
 		background-color: rgb(var(--v-theme-primary));
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 
 		> :deep(a > *) {
-			color: rgb(var(--v-theme-textOnDark)) !important;
+			color: rgb(var(--v-theme-onPrimary)) !important;
 		}
 	}
 </style>

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -111,11 +111,11 @@
 
 		&:hover {
 			background-color: rgb(var(--v-theme-primary));
-			color: rgb(var(--v-theme-textOnDark));
+			color: rgb(var(--v-theme-onPrimary));
 			text-decoration: underline;
 
 			> :deep(*) {
-				color: rgb(var(--v-theme-textOnDark)) !important;
+				color: rgb(var(--v-theme-onPrimary)) !important;
 			}
 		}
 
@@ -152,14 +152,14 @@
 		.sub-menu--open > .sub-menu-btn {
 			padding: 0 16px 8px 40px;
 			border-bottom: 1px solid $menu-border-color;
-			color: rgb(var(--v-theme-textBase));
+			color: rgb(var(--v-theme-onSurface));
 			background-color: transparent;
 
 			&:hover {
-				color: rgb(var(--v-theme-textBase));
+				color: rgb(var(--v-theme-onSurface));
 
 				> :deep(*) {
-					color: rgb(var(--v-theme-textBase)) !important;
+					color: rgb(var(--v-theme-onSurface)) !important;
 				}
 			}
 		}
@@ -177,11 +177,11 @@
 
 		.sub-menu--open > .sub-menu-btn {
 			background-color: rgb(var(--v-theme-primary));
-			color: rgb(var(--v-theme-textOnDark));
+			color: rgb(var(--v-theme-onPrimary));
 			transition: color 0.15s linear, background-color 0.15s linear;
 
 			> :deep(*) {
-				color: rgb(var(--v-theme-textOnDark)) !important;
+				color: rgb(var(--v-theme-onPrimary)) !important;
 			}
 		}
 

package/src/components/HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue

@@ -49,7 +49,7 @@
 	justify-content: center;
 	font-weight: 700;
 	background-color: rgb(var(--v-theme-primary));
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 	border: 2px solid transparent;
 	border-bottom:
 		solid 2px linear-gradient(
@@ -72,7 +72,7 @@
 .header-menu-btn__open {
 	background-color: rgb(var(--v-theme-surface));
 	color: rgb(var(--v-theme-primary));
-	border-color: rgb(var(--v-theme-textOnDark));
+	border-color: rgb(var(--v-theme-onPrimary));
 }
 
 @media screen and (max-width: ($header-breakpoint + 1)) {

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

@@ -4,15 +4,94 @@ import { mount } from '@vue/test-utils'
 import HeaderLoading from '../HeaderLoading.vue'
 
 describe('HeaderLoading', () => {
-	it('renders correctly', () => {
-		const wrapper = mount(HeaderLoading, {
-			props: {
-				width: '100px',
-				height: '1rem',
-			},
+	describe('mode non-standalone (défaut)', () => {
+		it('rend le skeleton avec la classe vd-header-loading', () => {
+			const wrapper = mount(HeaderLoading)
+			expect(wrapper.find('.vd-header-loading').exists()).toBe(true)
 		})
 
-		const elExists = wrapper.find('.vd-header-loading').exists()
-		expect(elExists).toBe(true)
+		it('applique aria-hidden="true" sur le skeleton', () => {
+			const wrapper = mount(HeaderLoading)
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('aria-hidden')).toBe('true')
+		})
+
+		it('ne rend pas le conteneur wrapper vd-header-loading-container', () => {
+			const wrapper = mount(HeaderLoading)
+			expect(wrapper.find('.vd-header-loading-container').exists()).toBe(false)
+		})
+
+		it('applique la width par défaut (100px)', () => {
+			const wrapper = mount(HeaderLoading)
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('100px')
+		})
+
+		it('applique la height par défaut (1rem)', () => {
+			const wrapper = mount(HeaderLoading)
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('1rem')
+		})
+
+		it('applique les props width et height personnalisées', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { width: '200px', height: '2rem' },
+			})
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('200px')
+			expect(skeleton.attributes('style') ?? '').toContain('2rem')
+		})
+	})
+
+	describe('mode standalone', () => {
+		it('rend un conteneur avec role="alert" et aria-live="polite"', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const container = wrapper.find('[role="alert"]')
+			expect(container.exists()).toBe(true)
+			expect(container.attributes('aria-live')).toBe('polite')
+		})
+
+		it('applique le ariaLabel par défaut', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const container = wrapper.find('[role="alert"]')
+			expect(container.attributes('aria-label')).toBe('Chargement en cours...')
+		})
+
+		it('applique un ariaLabel personnalisé', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true, ariaLabel: 'Chargement des données...' },
+			})
+			const container = wrapper.find('[role="alert"]')
+			expect(container.attributes('aria-label')).toBe('Chargement des données...')
+		})
+
+		it('rend le skeleton à l\'intérieur du conteneur', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const container = wrapper.find('.vd-header-loading-container')
+			expect(container.find('.vd-header-loading').exists()).toBe(true)
+		})
+
+		it('le skeleton standalone n\'a pas aria-hidden', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('aria-hidden')).toBeUndefined()
+		})
+
+		it('applique les props width et height en mode standalone', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true, width: '300px', height: '3rem' },
+			})
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('300px')
+			expect(skeleton.attributes('style') ?? '').toContain('3rem')
+		})
 	})
 })

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

@@ -323,7 +323,7 @@
 	transition: color 0.2s ease;
 
 	&:hover {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 	}
 
 	&:focus-visible {
@@ -334,7 +334,7 @@
 
 	&--active,
 	&[aria-current='page'] {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 		border-bottom: 3px solid #fff; /* Bordure solide et plus visible pour les éléments actifs */
 		box-shadow: 0 3px 0 0 #fff; /* Double effet pour être sûr que la bordure est bien visible */
 
@@ -350,7 +350,7 @@
 	padding: 8px 16px;
 	margin-top: 8px;
 	background-color: v-bind('options.sheet.color');
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 	text-decoration: none;
 	border-radius: 4px;
 	transition: background-color 0.2s ease;