@cnamts/synapse 1.0.26 → 1.0.27

package/src/components/DatePicker/docExamples/BidirectionalComplexValidation.vue

@@ -210,7 +210,7 @@
 
 			<v-btn
 				size="small"
-				color="success"
+				color="onSuccessVariant"
 				class="mr-2"
 				@click="setTestDates"
 			>

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -207,7 +207,7 @@
 
 			<v-btn
 				size="small"
-				color="success"
+				color="onSuccessVariant"
 				class="mr-2"
 				@click="setTestDates"
 			>

package/src/components/DatePicker/tests/exposed-methods.coverage.spec.ts

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import DateTextInput from '../DateTextInput/DateTextInput.vue'
+
+/**
+ * Tests pour couvrir les méthodes exposées (focus, blur)
+ * Zones non couvertes : DateTextInput.vue lignes 1138-1144
+ */
+describe('Exposed Methods Coverage Tests', () => {
+	/**
+	 * Test 1 : Méthode focus() exposée
+	 * Couvre ligne 1138-1140
+	 */
+	it('expose la méthode focus() pour le focus programmatique', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(typeof (wrapper.vm as any).focus).toBe('function')
+		// Appel réel pour couvrir le corps de la méthode (ligne 1139)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(() => (wrapper.vm as any).focus()).not.toThrow()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 2 : Méthode blur() exposée
+	 * Couvre ligne 1142-1144
+	 */
+	it('expose la méthode blur() pour le blur programmatique', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(typeof (wrapper.vm as any).blur).toBe('function')
+		// Appel réel pour couvrir le corps de la méthode (ligne 1142-1143)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(() => (wrapper.vm as any).blur()).not.toThrow()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 3 : validateOnSubmit exposé
+	 */
+	it('expose validateOnSubmit pour validation externe', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		// La méthode doit exister
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).validateOnSubmit).toBeDefined()
+
+		wrapper.unmount()
+	})
+})

package/src/components/DialogBox/DialogBox.vue

@@ -253,7 +253,7 @@
 }
 
 .v-btn--icon {
-	color: rgb(var(--v-theme-iconBase));
+	color: rgb(var(--v-theme-primary));
 	position: absolute;
 	right: 24px;
 }

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -97,7 +97,7 @@
 							v-else-if="state === 'success'"
 							:icon="mdiCheckCircle"
 							:size="cnamContextualTokens.iconSize.default"
-							color="success"
+							color="onSuccessVariant"
 							decorative
 						/>
 
@@ -211,7 +211,7 @@
 	flex-direction: column;
 	gap: var(--v-gap-3);
 	padding-block: var(--v-padding-4);
-	border-bottom: 1px solid rgb(var(--v-theme-borderSubdued));
+	border-bottom: 1px solid rgb(var(--v-theme-disabled));
 
 	&:first-child:last-child {
 		border-bottom: none;
@@ -224,7 +224,7 @@
 
 .file-item__name {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textBase));
+	color: rgb(var(--v-theme-onSurface));
 }
 
 .file-item__description {
@@ -278,7 +278,7 @@
 
 .file-item__message {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textSubdued));
+	color: rgb(var(--v-theme-onSurfaceVariant));
 }
 
 .file-item__message-success,

package/src/components/FileUpload/FileUpload.vue

@@ -174,14 +174,14 @@
 .sy-file-upload {
 	cursor: pointer;
 	position: relative;
-	border: 1px dashed rgb(var(--v-theme-borderAccentPrimary));
+	border: 1px dashed rgb(var(--v-theme-primary));
 	border-radius: var(--v-radius-roundedLg);
 	transition: background 0.25s;
 
 	&:hover,
 	&:focus-within,
 	&.dragover {
-		background: rgb(var(--v-theme-backgroundSurfaceAlt));
+		background: rgb(var(--v-theme-surfaceDim));
 	}
 
 	&.dark-mode {

package/src/components/FileUpload/FileUploadContent.vue

@@ -96,7 +96,7 @@
 
 .sy-file-upload-caption {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textSubdued));
+	color: rgb(var(--v-theme-onSurfaceVariant));
 }
 
 .sy-file-upload-btn {

package/src/components/FilterInline/FilterInline.mdx

@@ -6,7 +6,7 @@ import * as FilterSideBarStories from '@/components/FilterSideBar/FilterSideBar.
 
 <div className="header">
   <h1>FilterInline</h1>
-  
+
 </div><Canvas of={FilterInlineStories.Default} />
 
 # API
@@ -135,7 +135,7 @@ const professionList = [
 		value: 'pharmacien',
 	},
 ]
-	
+
 </script>
 
 <template>

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -486,7 +486,7 @@ export const FilterCombination: Story = {
 	decorators: [
 		() => ({
 			template: `
-			<VApp style="height: 500px; overflow-y: hidden;">
+			<VApp style="height: 500px; overflow-y: hidden; background: none">
 				<div class="pa-4">
 					<story />
 				</div>

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -218,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;