@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/MonthPicker/locales.ts

@@ -9,4 +9,5 @@ export const locales = {
 	yearBtnLabelUnselected: (selectedYear: string) => `Sélectionner une année, nous sommes actuellement en ${selectedYear}`,
 	monthBtnLabelSelected: (selectedMonth: string) => `Sélectionner un mois, le mois sélectionné est ${selectedMonth}`,
 	monthBtnLabelUnselected: (selectedMonth: string) => `Sélectionner un mois, nous sommes actuellement en ${selectedMonth}`,
+	fieldRequired: (label?: string) => `${label ? `Le champ ${label}` : 'Ce champ'} est requis.`,
 }

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

@@ -84,6 +84,8 @@ describe('mounthpicker', () => {
 
 			expect(wrapper.find('input').element.value).toBe('11/2025')
 
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore - Vue Test Utils cannot infer props from complex intersection type
 			await wrapper.setProps({ modelValue: '12/2026' })
 			expect(wrapper.find('input').element.value).toBe('12/2026')
 
@@ -434,6 +436,8 @@ describe('mounthpicker', () => {
 				await yearButton.trigger('keydown', { key: 'ArrowRight' })
 				expect(yearSelector.find('.year-2025').attributes('tabindex')).toBe('0')
 
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore - Vue Test Utils cannot infer props from complex intersection type
 				await wrapper.setProps({ yearsOrder: 'asc' })
 				expect(yearSelector.find('.year-2025').attributes('tabindex')).toBe('0')
 				await yearButton.trigger('keydown', { key: 'ArrowUp' })
@@ -473,6 +477,8 @@ describe('mounthpicker', () => {
 			expect(yearButtons[0]!.text()).toBe('2100')
 			expect(yearButtons[yearButtons.length - 1]!.text()).toBe('1900')
 
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore - Vue Test Utils cannot infer props from complex intersection type
 			await wrapper.setProps({ yearsOrder: 'asc' })
 
 			const newYearButtons = wrapper.findComponent({ name: 'YearSelector' }).findAll('.year-selector__year')
@@ -1162,7 +1168,7 @@ describe('mounthpicker', () => {
 						options: {
 							validate: (value: string) => {
 								const regex = /^(0[1-9]|1[0-2])\/\d{4}$/
-								return regex.test(value) || 'Invalid month/year format. Use MM/YYYY.'
+								return regex.test(value)
 							},
 							message: 'Invalid month/year format. Use MM/YYYY.',
 						},
@@ -1171,6 +1177,7 @@ describe('mounthpicker', () => {
 			})
 
 			const input = wrapper.find('input')
+			await input.trigger('focus')
 			await input.setValue('99/2025')
 			await input.trigger('blur')
 
@@ -1189,7 +1196,7 @@ describe('mounthpicker', () => {
 						options: {
 							validate: (value: string) => {
 								const regex = /^(0[1-9]|1[0-2])\/\d{4}$/
-								return regex.test(value) || 'Invalid month/year format. Use MM/YYYY.'
+								return regex.test(value)
 							},
 							message: 'Invalid month/year format. Use MM/YYYY.',
 						},
@@ -1239,11 +1246,355 @@ describe('mounthpicker', () => {
 			const yearButton = wrapper.findComponent({ name: 'YearSelector' }).find('.year-2025')
 			await yearButton.trigger('click')
 			await flushPromises()
+			await (wrapper.vm as unknown as { validateOnSubmit: () => Promise<boolean> }).validateOnSubmit()
+			await flushPromises()
 
 			expect(wrapper.find('.v-field--error').exists()).toBe(true)
 			expect(wrapper.find('.v-input__details').text()).toBe('The year must be 2026 or later.')
 
 			wrapper.unmount()
 		})
+
+		it('shows error when required field is left empty on blur', async () => {
+			const wrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					required: true,
+				},
+			})
+			const vm = wrapper.vm as unknown as { errors: string[] }
+
+			const input = wrapper.find('input')
+			await input.trigger('focus')
+			await wrapper.vm.$nextTick()
+			await input.trigger('blur')
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			expect(vm.errors).toContain('Le champ Début du projet est requis.')
+
+			wrapper.unmount()
+		})
+
+		it('validateOnSubmit returns false for empty required field and true for valid value', async () => {
+			const emptyWrapper = mount(MonthPicker, {
+				props: { modelValue: '', required: true, label: 'Début du projet' },
+			})
+			const emptyVm = emptyWrapper.vm as unknown as { validateOnSubmit: () => Promise<boolean>, errors: string[] }
+			const result = await emptyVm.validateOnSubmit()
+			expect(result).toBe(false)
+			expect(emptyVm.errors).toContain('Le champ Début du projet est requis.')
+			emptyWrapper.unmount()
+
+			const validWrapper = mount(MonthPicker, {
+				props: { modelValue: '03/2026', required: true, label: 'Début du projet' },
+			})
+			const validVm = validWrapper.vm as unknown as { validateOnSubmit: () => Promise<boolean> }
+			const validResult = await validVm.validateOnSubmit()
+			expect(validResult).toBe(true)
+			validWrapper.unmount()
+		})
+
+		it('displays external errorMessages, warningMessages, successMessages injected by the parent', async () => {
+			const errorWrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					modelValue: '03/2026',
+					errorMessages: ['Ce mois est déjà utilisé'],
+				},
+			})
+			const errorMsg = errorWrapper.findAll('.v-messages__message')
+			expect(errorMsg[0]?.text()).toBe('Ce mois est déjà utilisé')
+			errorWrapper.unmount()
+
+			const warningWrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					modelValue: '03/2026',
+					warningMessages: ['Ce mois est proche d\'une échéance'],
+				},
+			})
+			const warningMsg = warningWrapper.findAll('.v-messages__message')
+			expect(warningMsg[0]?.text()).toBe('Ce mois est proche d\'une échéance')
+			warningWrapper.unmount()
+
+			const successWrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					modelValue: '03/2026',
+					successMessages: ['Mois accepté'],
+					showSuccessMessages: true,
+				},
+			})
+			const successMsg = successWrapper.findAll('.v-messages__message')
+			expect(successMsg[0]?.text()).toBe('Mois accepté')
+			successWrapper.unmount()
+		})
+
+		it('handles customWarningRules and customSuccessRules', async () => {
+			async function mountAndBlur(modelValue: string) {
+				const wrapper = mount(MonthPicker, {
+					props: {
+						label: 'Début du projet',
+						modelValue,
+						customRules: [{
+							type: 'custom',
+							options: {
+								message: 'Le format doit être MM/YYYY.',
+								validate: (value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value),
+							},
+						}],
+						customWarningRules: [{
+							type: 'custom',
+							options: {
+								warningMessage: 'La date est dans le passé.',
+								validate: (value: string) => {
+									const [month, year] = value.split('/').map(Number) as [number, number]
+									const now = new Date()
+									return year > now.getFullYear() || (year === now.getFullYear() && month >= now.getMonth() + 1)
+								},
+							},
+						}],
+						customSuccessRules: [{
+							type: 'custom',
+							options: {
+								successMessage: 'Date valide.',
+								validate: (value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value),
+							},
+						}],
+						showSuccessMessages: true,
+					},
+				})
+				await wrapper.find('input').trigger('focus')
+				await wrapper.vm.$nextTick()
+				await wrapper.find('input').trigger('blur')
+				await wrapper.vm.$nextTick()
+				await flushPromises()
+				await wrapper.vm.$nextTick()
+				return wrapper
+			}
+
+			const errorWrapper = await mountAndBlur('99/2025')
+			expect((errorWrapper.vm as unknown as { errors: string[] }).errors).toContain('Le format doit être MM/YYYY.')
+			errorWrapper.unmount()
+
+			const warningWrapper = await mountAndBlur('01/2020')
+			const warningMessages = warningWrapper.findAll('.v-messages__message')
+			expect(warningMessages[0]?.text()).toBe('La date est dans le passé.')
+			warningWrapper.unmount()
+
+			const successWrapper = await mountAndBlur('03/2030')
+			expect((successWrapper.vm as unknown as { successes: string[] }).successes).toContain('Date valide.')
+			successWrapper.unmount()
+		})
+
+		it('sets hasError, hasWarning, hasSuccess based on validation state', async () => {
+			async function mountAndBlur(modelValue: string) {
+				const wrapper = mount(MonthPicker, {
+					props: {
+						label: 'Début du projet',
+						modelValue,
+						customRules: [{
+							type: 'custom',
+							options: {
+								message: 'Le format doit être MM/YYYY.',
+								validate: (value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value),
+							},
+						}],
+						customWarningRules: [{
+							type: 'custom',
+							options: {
+								warningMessage: 'La date est dans le passé.',
+								validate: (value: string) => {
+									const [month, year] = value.split('/').map(Number) as [number, number]
+									const now = new Date()
+									return year > now.getFullYear() || (year === now.getFullYear() && month >= now.getMonth() + 1)
+								},
+							},
+						}],
+						customSuccessRules: [{
+							type: 'custom',
+							options: {
+								successMessage: 'Date valide.',
+								validate: (value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value),
+							},
+						}],
+					},
+				})
+				await wrapper.find('input').trigger('focus')
+				await wrapper.vm.$nextTick()
+				await wrapper.find('input').trigger('blur')
+				await wrapper.vm.$nextTick()
+				await flushPromises()
+				await wrapper.vm.$nextTick()
+				return wrapper.vm as unknown as { hasError: boolean, hasWarning: boolean, hasSuccess: boolean }
+			}
+
+			expect((await mountAndBlur('99/2025')).hasError).toBe(true)
+			expect((await mountAndBlur('01/2020')).hasWarning).toBe(true)
+			expect((await mountAndBlur('03/2030')).hasSuccess).toBe(true)
+		})
+
+		it('does not show errors when disableErrorHandling is true', async () => {
+			const wrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					required: true,
+					disableErrorHandling: true,
+				},
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('focus')
+			await wrapper.vm.$nextTick()
+			await input.trigger('blur')
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-field--error').exists()).toBe(false)
+			expect((wrapper.vm as unknown as { errors: string[] }).errors).toHaveLength(0)
+
+			wrapper.unmount()
+		})
+
+		it('validates on input when isValidateOnBlur is false', async () => {
+			const wrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					isValidateOnBlur: false,
+					customRules: [{
+						type: 'custom',
+						options: {
+							message: 'Le format doit être MM/YYYY.',
+							validate: (value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value),
+						},
+					}],
+				},
+			})
+
+			const input = wrapper.find('input')
+			await input.setValue('99/2025')
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-field--error').exists()).toBe(true)
+			expect((wrapper.vm as unknown as { errors: string[] }).errors).toContain('Le format doit être MM/YYYY.')
+
+			wrapper.unmount()
+		})
+
+		it('sets aria-required from the required prop alone (without displaying the asterisk)', async () => {
+			const wrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					required: true,
+				},
+			})
+
+			const input = wrapper.find('input')
+			expect(input.attributes('aria-required')).toBe('true')
+			// L'astérisque ne s'affiche pas tant que displayAsterisk n'est pas activé
+			expect(wrapper.find('label').text()).not.toContain('*')
+
+			wrapper.unmount()
+		})
+
+		it('displays the asterisk only when both required and displayAsterisk are true', async () => {
+			const wrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					required: true,
+					displayAsterisk: true,
+				},
+			})
+
+			expect(wrapper.find('label').text()).toContain('*')
+			expect(wrapper.find('input').attributes('aria-required')).toBe('true')
+
+			wrapper.unmount()
+
+			// displayAsterisk sans required : pas d'astérisque
+			const asteriskOnlyWrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+					displayAsterisk: true,
+				},
+			})
+			expect(asteriskOnlyWrapper.find('label').text()).not.toContain('*')
+			asteriskOnlyWrapper.unmount()
+		})
+
+		it('does not set aria-required nor asterisk by default', async () => {
+			const wrapper = mount(MonthPicker, {
+				props: {
+					label: 'Début du projet',
+				},
+			})
+
+			const input = wrapper.find('input')
+			expect(input.attributes('aria-required')).toBeUndefined()
+			expect(wrapper.find('label').text()).not.toContain('*')
+
+			wrapper.unmount()
+		})
+
+		it('displays the validation state icon (error / warning / success)', async () => {
+			async function mountAndBlur(modelValue: string) {
+				const wrapper = mount(MonthPicker, {
+					props: {
+						label: 'Début du projet',
+						modelValue,
+						showSuccessMessages: true,
+						customRules: [{
+							type: 'custom',
+							options: {
+								message: 'Le format doit être MM/YYYY.',
+								validate: (value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value),
+							},
+						}],
+						customWarningRules: [{
+							type: 'custom',
+							options: {
+								warningMessage: 'La date est dans le passé.',
+								validate: (value: string) => {
+									const [month, year] = value.split('/').map(Number) as [number, number]
+									const now = new Date()
+									return year > now.getFullYear() || (year === now.getFullYear() && month >= now.getMonth() + 1)
+								},
+							},
+						}],
+						customSuccessRules: [{
+							type: 'custom',
+							options: {
+								successMessage: 'Date valide.',
+								validate: (value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value),
+							},
+						}],
+					},
+				})
+				await wrapper.find('input').trigger('focus')
+				await wrapper.vm.$nextTick()
+				await wrapper.find('input').trigger('blur')
+				await wrapper.vm.$nextTick()
+				await flushPromises()
+				await wrapper.vm.$nextTick()
+				return wrapper
+			}
+
+			const errorWrapper = await mountAndBlur('99/2025')
+			expect(errorWrapper.find('.field-state-icon.error-icon').exists()).toBe(true)
+			errorWrapper.unmount()
+
+			const warningWrapper = await mountAndBlur('01/2020')
+			expect(warningWrapper.find('.field-state-icon.warning-icon').exists()).toBe(true)
+			warningWrapper.unmount()
+
+			const successWrapper = await mountAndBlur('03/2030')
+			expect(successWrapper.find('.field-state-icon.success-icon').exists()).toBe(true)
+			successWrapper.unmount()
+		})
 	})
 })

package/src/components/MonthPicker/tests/MonthPicker.visual.cy.ts

@@ -0,0 +1,37 @@
+import MonthPicker from '../MonthPicker.vue'
+
+describe('MonthPicker - Visual regression tests', () => {
+	it('displays the month picker by default', () => {
+		cy.mountWithVuetify(MonthPicker)
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the month picker with a value', () => {
+		cy.mountWithVuetify(MonthPicker, {
+			props: { modelValue: '03/2025' },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-with-value', cy.get('.v-text-field'))
+	})
+
+	it('displays the month picker in disabled state', () => {
+		cy.mountWithVuetify(MonthPicker, {
+			props: { disabled: true },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-disabled', cy.get('.v-text-field'))
+	})
+
+	it('displays the month picker in readonly state', () => {
+		cy.mountWithVuetify(MonthPicker, {
+			props: { readonly: true },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-readonly', cy.get('.v-text-field'))
+	})
+})

package/src/components/MonthPicker/tests/__snapshots__/MonthPicker.spec.ts.snap

@@ -2169,7 +2169,7 @@ exports[`mounthpicker > should open the menu when clicking on the input 1`] = `
   <div class="visual-picker-header">
     <div
       class="visual-picker-header__title"
-      id="v-4-title"
+      id="v-6-title"
     >
       Sélectionner un mois
     </div>
@@ -2396,6 +2396,7 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
   <div class="sy-textfield-container">
     <div class="
       basic-field
+      help-text-as-hint
       v-input
       v-input--center-affix
       v-input--density-default
@@ -2439,20 +2440,21 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
                 v-field-label
                 v-label
               "
-              id="input-v-2-label"
+              id="input-v-4-label"
             >
               <!---->
               Début du projet
             </label>
             <!---->
             <input
-              aria-describedby="input-v-2-messages"
+              aria-describedby="input-v-4-messages"
               aria-label="Début du projet"
-              aria-labelledby="input-v-2-label"
+              aria-labelledby="input-v-4-label"
               autocomplete="off"
               class="v-field__input"
               direction="horizontal"
-              id="input-v-2"
+              id="input-v-4"
+              name="v-1"
               size="1"
               title="Début du projet"
               type="text"
@@ -2466,6 +2468,8 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
             <!-- v-if -->
             <!-- v-if -->
             <!-- v-if -->
+            <!-- Boutons d'incrément custom (remplacent le spinner natif, perdu en type=text) -->
+            <!-- v-if -->
           </div>
           <div class="v-field__outline">
             <div class="v-field__outline__start"></div>
@@ -2477,7 +2481,7 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
                   v-field-label--floating
                   v-label
                 "
-                for="input-v-2"
+                for="input-v-4"
               >
                 <!---->
                 Début du projet
@@ -2521,7 +2525,7 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
       <div
         aria-live="polite"
         class="v-input__details"
-        id="input-v-2-messages"
+        id="input-v-4-messages"
         role="alert"
       >
         <transition-group-stub
@@ -2532,7 +2536,9 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
           persisted="false"
           tag="div"
         >
-          <!---->
+          <div class="v-messages__message">
+            Format MM/AAAA
+          </div>
         </transition-group-stub>
         <!---->
       </div>

package/src/components/MonthPicker/types.ts

@@ -0,0 +1,16 @@
+import { type TextFieldProps } from './MonthPickerText/useTextField'
+import { type MonthPickerVisualProps } from './MonthPickerVisual/MonthPickerVisualProps'
+import { type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import { locales as defaultLocales } from './locales'
+
+export type MonthPickerProps =
+	TextFieldProps
+	& FieldValidationProps
+	& Partial<MonthPickerVisualProps>
+	& {
+		modelValue?: string
+		locales?: typeof defaultLocales
+		disabled?: boolean
+		readonly?: boolean
+		displayAsterisk?: boolean
+	}

package/src/components/MonthPicker/useMonthPickerValidation.ts

@@ -1,30 +1,67 @@
-import { type ValidationRule } from '@/composables/validation/useValidation'
-import { computed } from 'vue'
+import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+import { useValidation } from '@/composables/unifyValidation/useValidation'
+import { computed, type Ref } from 'vue'
+import type { ValidationRule as VuetifyValidationRule } from 'vuetify'
+import type { locales } from './locales'
 
-export type ValidationProps = {
-	customRules?: ValidationRule[]
-	customWarningRules?: ValidationRule[]
-	customSuccessRules?: ValidationRule[]
-	errorMessages?: string[] | null
-	warningMessages?: string[] | null
-	successMessages?: string[] | null
-	hasError?: boolean
-	hasWarning?: boolean
-	hasSuccess?: boolean
-	showSuccessMessages?: boolean
-}
+export function useMonthPickerValidation(args: {
+	modelValue: Ref<unknown>
+	readonly: Ref<boolean>
+	disabled: Ref<boolean>
+	required: Ref<boolean>
+	isValidateOnBlur: Ref<boolean>
+	showSuccessMessages: Ref<boolean>
+	disableErrorHandling: Ref<boolean>
+	useVuetifyValidation: Ref<boolean>
+	label: Ref<string | undefined>
+	rules: Ref<VuetifyValidationRule[] | undefined>
+	customRules: Ref<SyValidationRule[]>
+	customWarningRules?: Ref<SyValidationRule[]>
+	customSuccessRules?: Ref<SyValidationRule[]>
+	errorMessages?: Ref<string[] | null | undefined>
+	warningMessages?: Ref<string[] | null | undefined>
+	successMessages?: Ref<string[] | null | undefined>
+	hasErrorProp?: Ref<boolean>
+	hasWarningProp?: Ref<boolean>
+	hasSuccessProp?: Ref<boolean>
+	maxErrors?: Ref<number>
+	focused: Ref<boolean>
+	locales: Ref<typeof locales>
+}) {
+	const allCustomRules = computed<SyValidationRule[]>(() => {
+		const base: SyValidationRule[] = args.required.value
+			? [{
+					type: 'required',
+					options: {
+						message: args.locales.value.fieldRequired(args.label.value),
+						fieldIdentifier: args.label.value,
+					},
+				}]
+			: []
+		return [...base, ...(args.customRules.value ?? [])]
+	})
 
-export function useMonthPickerValidation(props: ValidationProps) {
-	return computed(() => ({
-		customRules: props.customRules,
-		customWarningRules: props.customWarningRules,
-		customSuccessRules: props.customSuccessRules,
-		errorMessages: props.errorMessages,
-		warningMessages: props.warningMessages,
-		successMessages: props.successMessages,
-		hasError: props.hasError,
-		hasWarning: props.hasWarning,
-		hasSuccess: props.hasSuccess,
-		showSuccessMessages: props.showSuccessMessages,
-	}))
+	return useValidation({
+		modelValue: args.modelValue,
+		readonly: args.readonly,
+		disabled: args.disabled,
+		required: args.required,
+		isValidateOnBlur: args.isValidateOnBlur,
+		showSuccessMessages: args.showSuccessMessages,
+		disableErrorHandling: args.disableErrorHandling,
+		useVuetifyValidation: args.useVuetifyValidation,
+		label: args.label,
+		rules: args.rules,
+		customRules: allCustomRules,
+		customWarningRules: args.customWarningRules,
+		customSuccessRules: args.customSuccessRules,
+		errorMessages: args.errorMessages,
+		warningMessages: args.warningMessages,
+		successMessages: args.successMessages,
+		hasErrorProp: args.hasErrorProp,
+		hasWarningProp: args.hasWarningProp,
+		hasSuccessProp: args.hasSuccessProp,
+		maxErrors: args.maxErrors,
+		focused: args.focused,
+	})
 }