@cnamts/synapse 1.0.25 → 1.0.26

package/src/components/Customs/Selects/SySelect/tests/SySelect.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { VList } from 'vuetify/components'
+import { nextTick } from 'vue'
 import SySelect from '../SySelect.vue'
 
 type ItemType = {
@@ -129,7 +130,7 @@ describe('SySelect.vue', () => {
 	it('renders error messages when provided', () => {
 		const errorMessages = ['Error 1']
 		const wrapper = mount(SySelect, {
-			props: { errorMessages, hideMessages: false },
+			props: { errorMessages, hideDetails: false },
 			attachTo: document.body,
 		})
 		const message = wrapper.find('.v-messages__message')
@@ -139,6 +140,99 @@ describe('SySelect.vue', () => {
 		wrapper.unmount()
 	})
 
+	describe('hideDetails', () => {
+		it('masque les messages de validation quand hideDetails est true', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					errorMessages: ['Erreur de test'],
+					hideDetails: true,
+				},
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+
+			wrapper.unmount()
+		})
+
+		it('affiche les messages de validation quand hideDetails est false', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					errorMessages: ['Erreur de test'],
+					hideDetails: false,
+				},
+				attachTo: document.body,
+			})
+
+			const message = wrapper.find('.v-messages__message')
+			expect(message.exists()).toBe(true)
+			expect(message.text()).toContain('Erreur de test')
+
+			wrapper.unmount()
+		})
+
+		it('affiche la zone de messages par défaut (hideDetails vaut false par défaut)', () => {
+			const wrapper = mount(SySelect, {
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.v-messages').exists()).toBe(true)
+
+			wrapper.unmount()
+		})
+
+		it('n\'affiche pas le helpText en dessous du champ quand hideDetails est true et qu\'il y a des erreurs', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					helpText: 'Texte d\'aide',
+					errorMessages: ['Erreur de test'],
+					hideDetails: true,
+				},
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.help-text-below').exists()).toBe(false)
+
+			wrapper.unmount()
+		})
+
+		it('affiche le helpText en dessous du champ quand hideDetails est false et qu\'il y a des erreurs', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					helpText: 'Texte d\'aide',
+					errorMessages: ['Erreur de test'],
+					hideDetails: false,
+				},
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.help-text-below').exists()).toBe(true)
+			expect(wrapper.find('.help-text-below').text()).toContain('Texte d\'aide')
+
+			wrapper.unmount()
+		})
+	})
+
+	it('keeps the label active when a validation error is displayed', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+				label: 'Option',
+				required: true,
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- exposed method is not part of the inferred public instance type
+		const isValid = await (wrapper.vm as any).validateOnSubmit()
+		await nextTick()
+
+		expect(isValid).toBe(false)
+		expect(wrapper.find('.v-field').classes()).toContain('v-field--active')
+
+		wrapper.unmount()
+	})
+
 	it('does not render error messages when not provided', () => {
 		const wrapper = mount(SySelect, {
 			attachTo: document.body,
@@ -522,25 +616,170 @@ describe('SySelect.vue', () => {
 			wrapper.unmount()
 		})
 
-		it('n\'affiche pas d\'erreur quand disableErrorHandling est true', async () => {
+		describe('disableErrorHandling', () => {
+			it('n\'affiche pas d\'erreur pour un champ requis sans valeur quand disableErrorHandling est true', async () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						required: true,
+						label: 'Test Label',
+						modelValue: undefined,
+						disableErrorHandling: true,
+					},
+					attachTo: document.body,
+				})
+
+				await wrapper.find('.v-field').trigger('click')
+				await wrapper.vm.$nextTick()
+				await wrapper.find('.v-field').trigger('click')
+				await wrapper.vm.$nextTick()
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(false)
+
+				wrapper.unmount()
+			})
+
+			it('ignore les errorMessages quand disableErrorHandling est true', () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						errorMessages: ['Erreur forcée'],
+						disableErrorHandling: true,
+					},
+					attachTo: document.body,
+				})
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(false)
+				expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+
+				wrapper.unmount()
+			})
+
+			it('n\'évalue pas les customRules quand disableErrorHandling est true', async () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						modelValue: '1',
+						disableErrorHandling: true,
+						isValidateOnBlur: false,
+						customRules: [{
+							type: 'custom',
+							options: {
+								validate: () => false,
+								message: 'Toujours invalide',
+							},
+						}],
+					},
+					attachTo: document.body,
+				})
+
+				await wrapper.vm.$nextTick()
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(false)
+				expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+
+				wrapper.unmount()
+			})
+
+			it('affiche les erreurs normalement quand disableErrorHandling est false', async () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						errorMessages: ['Erreur visible'],
+						disableErrorHandling: false,
+					},
+					attachTo: document.body,
+				})
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(true)
+				expect(wrapper.find('.v-messages__message').text()).toContain('Erreur visible')
+
+				wrapper.unmount()
+			})
+		})
+
+		it('valide immédiatement quand isValidateOnBlur est false', async () => {
 			const wrapper = mount(SySelect, {
 				props: {
-					required: true,
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
 					label: 'Test Label',
 					modelValue: undefined,
-					disableErrorHandling: true,
+					isValidateOnBlur: false,
+					customRules: [{
+						type: 'custom',
+						options: {
+							validate: (value: unknown) => value === '2',
+							message: 'Test error message',
+						},
+					}],
 				},
 				attachTo: document.body,
 			})
 
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(false)
+
+			// Sélection de Option 1 via interaction utilisateur
 			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
+			await wrapper.findComponent(VList).findAll('.v-list-item').at(0)!.trigger('click')
+			await wrapper.setProps({ modelValue: '1' })
+
+			await vi.waitUntil(() => instance.hasError === true)
+			expect(wrapper.find('.v-messages').text()).toContain('Test error message')
+
+			// Sélection de Option 2 via interaction utilisateur
 			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
+			await wrapper.findComponent(VList).findAll('.v-list-item').at(1)!.trigger('click')
+			await wrapper.setProps({ modelValue: '2' })
+
+			await vi.waitUntil(() => instance.hasError === false)
+			expect(wrapper.find('.v-messages').text()).not.toContain('Test error message')
+
+			wrapper.unmount()
+		})
+
+		it('masque le message de succes mais conserve l\'etat de succes quand showSuccessMessages est false', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					label: 'Test Label',
+					modelValue: undefined,
+					isValidateOnBlur: false,
+					showSuccessMessages: false,
+					customSuccessRules: [{
+						type: 'custom',
+						options: {
+							validate: (value: unknown) => value === '2',
+							successMessage: 'Test success message',
+						},
+					}],
+				},
+				attachTo: document.body,
+			})
 
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 			const instance = wrapper.vm as any
-			expect(instance.hasError).toBe(false)
+			expect(instance.hasSuccess).toBe(false)
+
+			await wrapper.setProps({ modelValue: '2' })
+
+			await vi.waitUntil(() => instance.hasSuccess === true)
+			expect(wrapper.find('.success-field').exists()).toBe(true)
+			expect(wrapper.findAll('.v-messages__message')).toHaveLength(0)
+			expect(wrapper.text()).not.toContain('Test success message')
 
 			wrapper.unmount()
 		})

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.vue

@@ -175,7 +175,7 @@
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const displaySuccesses = computed(() => validation.displaySuccesses.value)
 
 	const labelId = computed(() => (props.id ? `${props.id}-label` : undefined))
 	const computedAriaLabelledby = computed(() => {
@@ -267,8 +267,8 @@
 		>
 			<VMessages
 				ref="messagesRef"
-				:active="hasError || hasWarning || (hasSuccess && props.showSuccessMessages)"
-				:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+				:active="hasError || hasWarning || (hasSuccess && displaySuccesses.length > 0)"
+				:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? displaySuccesses : []))"
 			/>
 		</div>
 

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -204,7 +204,7 @@
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const displaySuccesses = computed(() => validation.displaySuccesses.value)
 
 	const ariaChecked = computed(() => {
 		if (internalIndeterminate.value) return 'mixed'
@@ -347,6 +347,11 @@
 			:aria-labelledby="props.ariaLabelledby"
 			:title="props.title"
 			:color="props.color"
+			:class="{
+				'success-field': hasSuccess && !hasError && !hasWarning,
+				'warning-field': hasWarning && !hasError,
+				'error-field': hasError,
+			}"
 			:style="{ color: labelColor }"
 			:disabled="props.disabled"
 			:readonly="props.readonly"
@@ -354,7 +359,7 @@
 			:density="props.density"
 			:error="hasError"
 			:error-messages="errors"
-			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? displaySuccesses : []))"
 			:indeterminate="internalIndeterminate"
 			:true-value="props.trueValue"
 			:false-value="props.falseValue"
@@ -387,6 +392,22 @@
 </template>
 
 <style scoped>
+.success-field :deep(.v-messages__message) {
+	color: rgb(var(--v-theme-success)) !important;
+}
+
+.success-field :deep(.v-selection-control__input) {
+	color: rgb(var(--v-theme-success));
+}
+
+.warning-field :deep(.v-messages__message) {
+	color: rgb(var(--v-theme-borderWarning)) !important;
+}
+
+.warning-field :deep(.v-selection-control__input) {
+	color: rgb(var(--v-theme-borderWarning));
+}
+
 :deep(.v-input--dirty .v-selection-control__input) {
 	color: v-bind('props.color');
 }

package/src/components/Customs/SyRadioGroup/SyRadioGroup.vue

@@ -2,6 +2,7 @@
 
 	import { computed, nextTick, onMounted, onUpdated, ref, watch } from 'vue'
 	import type { VRadioGroup } from 'vuetify/components'
+	import { VMessages } from 'vuetify/components'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { locales } from './locales'
@@ -148,7 +149,7 @@
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const displaySuccesses = computed(() => validation.displaySuccesses.value)
 
 	const getAriaChecked = (value: PropertyKey) => {
 		return model.value === value ? 'true' : 'false'
@@ -224,10 +225,6 @@
 		:error="hasError"
 		:error-messages="hasError ? errors : undefined"
 		:aria-describedby="messageId"
-		:messages="hasError ? errors :
-			hasWarning ? warnings :
-			(hasSuccess && props.showSuccessMessages ? successes : [])
-		"
 	>
 		<v-radio
 			v-for="opt in props.options"
@@ -258,14 +255,35 @@
 			{{ locales.labelledbyMessage }} <span v-if="props.label">{{ props.label + (props.displayAsterisk ? '*' : '')
 			}}</span>.
 		</span>
+		<template
+			v-if="!hasError && (hasWarning || hasSuccess)"
+			#details
+		>
+			<div class="v-input__details sy-radio-group__messages">
+				<VMessages
+					:active="hasWarning || (hasSuccess && displaySuccesses.length > 0)"
+					:messages="hasWarning ? warnings : displaySuccesses"
+				/>
+			</div>
+		</template>
 	</v-radio-group>
 </template>
 
 <style scoped>
+:deep(.v-input__details) {
+	display: block !important;
+	padding-inline: 0 !important;
+	margin-top: -10px !important;
+}
+
 :deep(.v-selection-control--error .v-selection-control__input) {
 	color: rgb(var(--v-theme-error));
 }
 
+.sy-radio-group__messages {
+	align-items: flex-start;
+}
+
 .sb-show-main.sb-main-centered #storybook-root {
 	margin: none !important;
 }

package/src/components/Customs/SyTabs/SyTabs.stories.ts

@@ -118,7 +118,7 @@ export const WithVModel: Story = {
           Onglet actif: {{ activeTab }}
           <button 
             class="ml-4 px-2 py-1 bg-primary text-white rounded" 
-            @click="activeTab = activeTab === 'tab1' ? 'tab2' : 'tab1'"
+            @click="activeTab = activeTab === 'tab1' ? 'tab2' : activeTab === 'tab2' ? 'tab3' : 'tab1'"
           >
             Changer d'onglet
           </button>
@@ -138,7 +138,7 @@ export const WithVModel: Story = {
       Onglet actif: {{ activeTab }}
       <button 
         class="ml-4 px-2 py-1 bg-primary text-white rounded" 
-        @click="activeTab = activeTab === 'tab1' ? 'tab2' : 'tab1'"
+        @click="activeTab = activeTab === 'tab1' ? 'tab2' : activeTab === 'tab2' ? 'tab3' : 'tab1'"
       >
         Changer d'onglet
       </button>
@@ -476,9 +476,9 @@ const items = [
 export const NavigationMode: Story = {
 	args: {
 		items: [
-			{ label: 'Accueil', value: 'home', href: '#' },
-			{ label: 'Profil', value: 'profile', href: '#profile' },
-			{ label: 'Paramètres', value: 'settings', href: '#settings' },
+			{ label: 'Accueil', value: 'home', href: 'javascript:void(0)' },
+			{ label: 'Profil', value: 'profile', href: 'javascript:void(0)' },
+			{ label: 'Paramètres', value: 'settings', href: 'javascript:void(0)' },
 		],
 	},
 	parameters: {

package/src/components/Customs/SyTabs/config.ts

@@ -9,9 +9,9 @@ export const config = {
 		'show-arrows': true,
 	},
 	tab: {
-		'base-color': '#0C419A',
-		'active-color': '#0C419A',
-		'slider-color': '#0C419A',
+		'base-color': 'rgb(var(--v-theme-colorPrimary))',
+		'active-color': 'rgb(var(--v-theme-colorPrimary))',
+		'slider-color': 'rgb(var(--v-theme-colorPrimary))',
 		'ripple': false,
 	},
 }

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -275,6 +275,13 @@
 		return 'rgba(0, 0, 0, 1)'
 	})
 
+	const clearButtonColorClass = computed(() => {
+		if (hasError.value) return 'error-field'
+		if (hasWarning.value) return 'warning-field'
+		if (hasSuccess.value) return 'success-field'
+		return 'text-iconBase'
+	})
+
 	const handlePrependIconClick = () => {
 		emit('prepend-icon-click')
 	}
@@ -346,7 +353,7 @@
 	const validationIcon = computed(() => {
 		if (hasError.value) return ICONS['error']
 		if (hasWarning.value) return ICONS['warning']
-		if (hasSuccess.value && props.showSuccessMessages) return ICONS['success']
+		if (hasSuccess.value) return ICONS['success']
 		return null
 	})
 
@@ -361,7 +368,7 @@
 	// Détermine s'il y a des messages d'erreur ou d'état
 	const hasMessages = computed(() => {
 		if (props.disableErrorHandling) return false
-		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || hasSuccess.value
+		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || (hasSuccess.value && props.showSuccessMessages)
 	})
 
 	// Détermine si le helpText doit être affiché à la position du message ou en dessous
@@ -634,7 +641,7 @@
 			:maxlength="props.maxlength"
 			:max-errors="props.maxErrors"
 			:max-width="props.maxWidth"
-			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : messages))"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? (props.showSuccessMessages ? successes : []) : messages))"
 			:min-width="props.minWidth"
 			:name="props.name"
 			:persistent-clear="props.displayPersistentClear"
@@ -778,7 +785,8 @@
 					<!-- Keyboard-focusable clear button -->
 					<VBtn
 						v-if="showClear"
-						class="v-btn v-btn--density-compact mr-1 text-iconBase"
+						class="v-btn v-btn--density-compact mr-1"
+						:class="clearButtonColorClass"
 						:aria-label="props.label ? `Vider ${props.label}` : 'Vider'"
 						:title="props.label ? `Vider ${props.label}` : 'Vider'"
 						:icon="mdiClose"
@@ -849,7 +857,11 @@
 	:deep(.v-field) {
 		color: rgb(var(--v-theme-borderWarning)) !important;
 
+		--v-medium-emphasis-opacity: 1;
+
 		.v-field__outline {
+			--v-field-border-opacity: 1;
+
 			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
@@ -863,6 +875,13 @@
 	}
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
+.text-iconBase {
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-borderAccentPrimary)) !important;
+	}
+}
+
 .error-field {
 	:deep(.v-input__details > .v-icon),
 	:deep(.v-input__prepend > .v-icon),
@@ -870,10 +889,16 @@
 		opacity: 1 !important;
 	}
 
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-textError)) !important;
+	}
+
 	:deep(.v-field) {
 		color: rgb(var(--v-theme-borderError)) !important;
 
 		.v-field__outline {
+			--v-field-border-opacity: 1;
+
 			color: rgb(var(--v-theme-borderError)) !important;
 		}
 	}
@@ -904,6 +929,8 @@
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
+			--v-field-border-opacity: 1;
+
 			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}

package/src/components/DatePicker/CalendarMode/DatePicker.stories.ts

@@ -172,7 +172,7 @@ const meta = {
 		},
 		'birthDate': {
 			control: 'boolean',
-			description: 'Alias pour isBirthDate (pour compatibilité avec l\'attribut kebab-case birth-date dans les templates). ⚠️ Utiliser soit birthDate soit isBirthDate, mais pas les deux.',
+			description: '⚠️ **DEPRECATED** — Utilisez `isBirthDate` à la place.',
 			defaultValue: false,
 		},
 		'isOutlined': {