@cnamts/synapse 1.0.24 → 1.0.26

package/src/composables/date/tests/{useDateInitialization.spec.ts → useDateInitializationDayjs.spec.ts}

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { initializeSelectedDates, type DateInput } from '../useDateInitialization'
+import { initializeSelectedDates, type DateInput } from '../useDateInitializationDayjs'
 
-describe('useDateInitialization', () => {
+describe('useDateInitializationDayjs', () => {
 	describe('initializeSelectedDates', () => {
 		it('returns null when modelValue is null or undefined', () => {
 			expect(initializeSelectedDates(null, 'DD/MM/YYYY')).toBeNull()
@@ -70,7 +70,7 @@ describe('useDateInitialization', () => {
 			expect(result1).toBeInstanceOf(Date)
 			expect((result1 as Date).getDate()).toBe(15)
 
-			// Date au format d'affichage quand le format de retour est différen
+			// Date au format d'affichage quand le format de retour est différent
 			const result2 = initializeSelectedDates('15/01/2023', 'DD/MM/YYYY', 'YYYY-MM-DD')
 			expect(result2).toBeInstanceOf(Date)
 			expect((result2 as Date).getDate()).toBe(15)
@@ -97,6 +97,42 @@ describe('useDateInitialization', () => {
 			})
 		})
 
+		it('creates dates at midnight (00:00:00.000)', () => {
+			const result = initializeSelectedDates('15/06/2023', 'DD/MM/YYYY') as Date
+			expect(result.getHours()).toBe(0)
+			expect(result.getMinutes()).toBe(0)
+			expect(result.getSeconds()).toBe(0)
+			expect(result.getMilliseconds()).toBe(0)
+		})
+
+		it('creates dates at midnight for arrays too', () => {
+			const result = initializeSelectedDates(['01/03/2023', '15/03/2023'], 'DD/MM/YYYY') as Date[]
+			result.forEach((date) => {
+				expect(date.getHours()).toBe(0)
+				expect(date.getMinutes()).toBe(0)
+				expect(date.getSeconds()).toBe(0)
+			})
+		})
+
+		it('handles range array with different return format', () => {
+			const result = initializeSelectedDates(['2023-01-10', '2023-01-20'], 'DD/MM/YYYY', 'YYYY-MM-DD')
+			expect(Array.isArray(result)).toBe(true)
+			const dates = result as Date[]
+			expect(dates).toHaveLength(2)
+			expect(dates[0]?.getDate()).toBe(10)
+			expect(dates[1]?.getDate()).toBe(20)
+		})
+
+		it('accepts a range where both dates are equal', () => {
+			const result = initializeSelectedDates(['15/01/2023', '15/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(2)
+		})
+
+		it('returns null for empty string input', () => {
+			expect(initializeSelectedDates('', 'DD/MM/YYYY')).toBeNull()
+		})
+
 		it('returns null for object input', () => {
 			const result = initializeSelectedDates({}, 'DD/MM/YYYY')
 			expect(result).toBeNull()

package/src/composables/date/useDateInitializationDayjs.ts

@@ -14,7 +14,10 @@ dayjs.extend(timezone)
 dayjs.locale('fr')
 
 // Types
-export type DateValue = string | [string, string] | null
+export type DateModelValue = string | [string, string] | null
+
+/** @deprecated Utilisez DateModelValue à la place */
+export type DateValue = DateModelValue
 export type DateInput = string | string[] | null | object
 
 /**

package/src/composables/unifyValidation/documentationValidationProps.ts

@@ -0,0 +1,235 @@
+const RuleGeneralType = `'required' | 'custom'`
+const StringRuleType = `'minLength' | 'maxLength' | 'exactLength' | 'email' | 'matchPattern'`
+const NumberRuleType = `'min' | 'max'`
+const DateRuleType = `'noWeekend' | 'noBeforeToday' | 'notAfterToday' | 'notBeforeDate' | 'notAfterDate' | 'dateExact' | 'isHolidayDay'`
+
+function generateBuiltInRuleType(type: 'base' | 'date' | 'number' | 'string' | 'all' = 'all') {
+	switch (type) {
+		case 'base':
+			return RuleGeneralType
+		case 'date':
+			return `${RuleGeneralType} | ${DateRuleType}`
+		case 'number':
+			return `${RuleGeneralType} | ${NumberRuleType}`
+		case 'string':
+			return `${RuleGeneralType} | ${StringRuleType}`
+		case 'all':
+			return `${RuleGeneralType} | ${NumberRuleType} | ${StringRuleType} | ${DateRuleType}`
+	}
+}
+
+export function getValidationDocumentation(type: 'date' | 'number' | 'string' | 'all' = 'all') {
+	const builtInRuleType = generateBuiltInRuleType(type)
+
+	return {
+		readonly: {
+			description: 'Permet de rendre le champ en lecture seule, le champ deviens grisé.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		disabled: {
+			description: 'Désactive le champ sans changement visuel pour l\'utilisateur.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		required: {
+			description: 'Indique que le champ est requis.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		isValidateOnBlur: {
+			description: 'Détermine si la validation doit être déclenchée lors de la saisie ou du blur de l\'input.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'props',
+			},
+		},
+		showSuccessMessages: {
+			description: 'Affiche les messages de succès lorsque la validation est réussie. Si la prop est à `false` cela cache uniquement les messages texte, l\'état visuel reste actif.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'props',
+			},
+		},
+		disableErrorHandling: {
+			description: 'Désactive la gestion des erreurs, utile lorsque vous souhaitez gérer les erreurs manuellement.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		useVuetifyValidation: {
+			description: 'Indique si la validation doit être gérée par Vuetify (true) ou par Synapse (false).',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		label: {
+			description: 'Le label du champ.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				category: 'props',
+			},
+		},
+		rules: {
+			description: 'Les règles de validation Vuetify à appliquer au champ si useVuetifyValidation est true.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+						(value: unknown) => boolean | string
+					`,
+				},
+				category: 'props',
+			},
+		},
+		customRules: {
+			description: 'Les règles de validation personnalisées d\'erreur (bloquantes) à appliquer au champ. Elles sont évaluées à partir de la valeur du champ.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+{
+	type: ${builtInRuleType},
+	options: {
+		validate: (value: unknown) => boolean | string,
+		message: string,
+		[key: string]: unknown
+	}
+}
+					`,
+				},
+				category: 'props',
+			},
+		},
+		customWarningRules: {
+			description: 'Les règles de validation personnalisées d\'avertissement (non bloquantes) à appliquer au champ. Elles sont évaluées à partir de la valeur du champ.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+{
+	type: ${builtInRuleType},
+	options: {
+		validate: (value: unknown) => boolean | string,
+		message: string,
+		[key: string]: unknown
+	}
+}
+					`,
+				},
+				category: 'props',
+			},
+		},
+		customSuccessRules: {
+			description: 'Les règles de validation personnalisées de succès à appliquer au champ. Elles sont évaluées à partir de la valeur du champ.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+					detail: `
+{
+	type: ${builtInRuleType},
+	options: {
+		validate: (value: unknown) => boolean | string,
+		message: string,
+		[key: string]: unknown
+	}
+}
+					`,
+				},
+				category: 'props',
+			},
+		},
+		errorMessages: {
+			description: 'Permet d\'injecter des messages d\'erreur depuis le parent. Aucun calcul de validation n\'est exécuté.',
+			control: 'object',
+			table: {
+				type: { summary: 'array<string>' },
+				category: 'props',
+			},
+		},
+		warningMessages: {
+			description: 'Permet d\'injecter des messages d\'avertissement depuis le parent. Aucun calcul de validation n\'est exécuté.',
+			control: 'object',
+			table: {
+				type: { summary: 'array<string>' },
+				category: 'props',
+			},
+		},
+		successMessages: {
+			description: 'Permet d\'injecter des messages de succès depuis le parent. Aucun calcul de validation n\'est exécuté.',
+			control: 'object',
+			table: {
+				type: { summary: 'array<string>' },
+				category: 'props',
+			},
+		},
+		hasError: {
+			description: 'Indique si le champ a une erreur, peut être utilisé pour forcer l\'état d\'erreur.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				category: 'props',
+			},
+		},
+		hasWarning: {
+			description: 'Indique si le champ a un avertissement, peut être utilisé pour forcer l\'état d\'avertissement.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				category: 'props',
+			},
+		},
+		hasSuccess: {
+			description: 'Indique si le champ a un succès, peut être utilisé pour forcer l\'état de succès.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				category: 'props',
+			},
+		},
+		hideDetails: {
+			description: 'Masque la section des détails (messages d\'erreur, compteur)',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+		maxErrors: {
+			description: 'Le nombre maximum d\'erreurs à afficher, applicable uniquement si useVuetifyValidation est true.',
+			control: 'number',
+			table: {
+				type: { summary: 'number' },
+				category: 'props',
+			},
+		},
+	}
+}

package/src/composables/unifyValidation/tests/useCustomValidation.spec.ts

@@ -468,7 +468,8 @@ describe('useCustomValidation', () => {
 				args.disableErrorHandling,
 			),
 		)
-		await result.validate()
+		const validationResult = await result.validate()
+		expect(validationResult.hasSuccess).toBe(true)
 		expect(args.successes.value).toEqual([])
 	})
 

package/src/composables/unifyValidation/tests/useValidation.spec.ts

@@ -1490,6 +1490,7 @@ describe('useValidation (unifyValidation)', () => {
 			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
 
 			await result.validate()
+			expect(result.hasSuccess.value).toBe(true)
 			expect(result.successes.value).toContain('Succès externe')
 		})
 
@@ -1510,9 +1511,30 @@ describe('useValidation (unifyValidation)', () => {
 			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
 
 			await result.validate()
+			expect(result.hasSuccess.value).toBe(true)
 			expect(result.successes.value).not.toContain('Succès interne')
 			expect(result.successes.value).toContain('Succès externe')
 		})
+
+		it('keeps hasSuccess true when inner success messages are hidden', async () => {
+			const params = makeParams({
+				modelValue: ref('ok'),
+				showSuccessMessages: ref(false),
+				customRules: ref([]),
+				customSuccessRules: ref([{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === 'ok',
+						successMessage: 'Succès interne',
+					},
+				}]),
+			})
+			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
+
+			await result.validate()
+			expect(result.hasSuccess.value).toBe(true)
+			expect(result.successes.value).toEqual([])
+		})
 	})
 
 	describe('rules concurrences', () => {

package/src/composables/unifyValidation/useCustomValidation.ts

@@ -1,6 +1,6 @@
 import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 import { useValidatable } from '@/composables/validation/useValidatable'
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
 /**
@@ -15,13 +15,15 @@ export function useCustomValidation(
 	warnings: Ref<string[]>,
 	successes: Ref<string[]>,
 	showSuccessMessages: Ref<boolean>,
-	label: Ref<string>,
+	label: Ref<string | undefined>,
 	focused: Ref<boolean>,
 	isValidateOnBlur: Ref<boolean>,
 	disableErrorHandling: Ref<boolean>,
 	readonly?: Ref<boolean>,
 	disabled?: Ref<boolean>,
 ) {
+	const hasSuccess = ref(false)
+
 	let validator = useValidation({
 		showSuccessMessages: showSuccessMessages.value,
 		fieldIdentifier: label.value,
@@ -37,7 +39,7 @@ export function useCustomValidation(
 				disableErrorHandling: disableErrorHandling.value,
 			})
 
-			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0
+			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0 || hasSuccess.value
 			if (isDirty) {
 				validate()
 			}
@@ -50,6 +52,7 @@ export function useCustomValidation(
 			errors.value = []
 			warnings.value = []
 			successes.value = []
+			hasSuccess.value = false
 			return { hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [] as string[], warnings: [] as string[], successes: [] as string[] } }
 		}
 
@@ -63,6 +66,7 @@ export function useCustomValidation(
 		errors.value = result.state.errors
 		warnings.value = result.state.warnings
 		successes.value = result.state.successes
+		hasSuccess.value = result.hasSuccess
 
 		return result
 	}
@@ -75,6 +79,7 @@ export function useCustomValidation(
 			errors.value = []
 			warnings.value = []
 			successes.value = []
+			hasSuccess.value = false
 		},
 		() => modelValue.value = undefined,
 	)
@@ -91,5 +96,12 @@ export function useCustomValidation(
 		}
 	})
 
-	return { validate }
+	function clearValidation() {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+		hasSuccess.value = false
+	}
+
+	return { validate, hasSuccess, clearValidation }
 }

package/src/composables/unifyValidation/useValidation.ts

@@ -12,15 +12,21 @@ export interface FieldValidationProps {
 	isValidateOnBlur?: boolean
 	showSuccessMessages?: boolean
 	disableErrorHandling?: boolean
-	// When true (Vuetify native mode), the controller should not handle errors/successes
+	// Quand cette prop vaut true (mode natif Vuetify), c'est Vuetify qui gère les erreurs, avertissements et succès
 	useVuetifyValidation?: boolean
-	label: string
+	label?: string
 	rules?: VuetifyValidationRule[]
+	// Règles de validation personnalisées d'erreur (bloquantes), évaluées à partir de la valeur du champ
 	customRules?: SyValidationRule[]
+	// Règles de validation personnalisées d'avertissement (non bloquantes), évaluées à partir de la valeur du champ
 	customWarningRules?: SyValidationRule[]
+	// Règles de validation personnalisées de succès, évaluées à partir de la valeur du champ
 	customSuccessRules?: SyValidationRule[]
+	// Messages d'erreur injectés par le parent ; ils n'exécutent aucune logique de validation
 	errorMessages?: string[] | null
+	// Messages d'avertissement injectés par le parent ; ils n'exécutent aucune logique de validation
 	warningMessages?: string[] | null
+	// Messages de succès injectés par le parent ; ils n'exécutent aucune logique de validation
 	successMessages?: string[] | null
 	hasError?: boolean
 	hasWarning?: boolean
@@ -29,9 +35,13 @@ export interface FieldValidationProps {
 }
 
 /**
- * Entrypoint to handle validation in fields components.
- * It handles both Vuetify native validation (if useVuetifyValidation is true) and Synapse custom validation (if customRules are provided).
- * It also provides a unified interface to handle errors, warnings and successes, and to trigger validation on demand.
+ * Point d'entrée de la validation pour les composants de champ.
+ * Gère à la fois la validation native Vuetify (si useVuetifyValidation vaut true)
+ * et la validation custom Synapse (si customRules/customWarningRules/customSuccessRules sont fournis).
+ * customRules correspond aux règles d'erreur bloquantes.
+ * errorMessages/warningMessages/successMessages sont des messages externes injectés par le parent
+ * et ne déclenchent aucun calcul de validation.
+ * Expose aussi une interface unifiée pour les erreurs, avertissements, succès et la validation à la demande.
  */
 export const validationPropsDefaults = {
 	readonly: false,
@@ -61,7 +71,7 @@ export function useValidation(params: {
 	isValidateOnBlur: Ref<boolean>
 	showSuccessMessages: Ref<boolean>
 	disableErrorHandling: Ref<boolean>
-	label: Ref<string>
+	label: Ref<string | undefined>
 	focused: Ref<boolean>
 	errorMessages?: Ref<string[] | null | undefined>
 	warningMessages?: Ref<string[] | null | undefined>
@@ -95,13 +105,15 @@ export function useValidation(params: {
 			errors: ref<string[]>([]),
 			warnings: ref<string[]>([]),
 			successes: ref<string[]>([]),
-			hasError: computed(() => false),
-			hasWarning: computed(() => false),
-			hasSuccess: computed(() => false),
+			hasError: computed(() => params.hasErrorProp?.value ?? false),
+			hasWarning: computed(() => params.hasWarningProp?.value ?? false),
+			hasSuccess: computed(() => params.hasSuccessProp?.value ?? false),
 			validate: async () => true,
+			clearValidation: () => {},
 		}
 	}
-	const innerErrors = ref<string[]>([])
+	const vuetifyErrors = ref<string[]>([])
+	const customErrors = ref<string[]>([])
 	const innerWarnings = ref<string[]>([])
 	const innerSuccesses = ref<string[]>([])
 
@@ -112,7 +124,7 @@ export function useValidation(params: {
 			params.modelValue,
 			params.rules,
 			params.disabled,
-			innerErrors,
+			vuetifyErrors,
 			params.hasErrorProp || ref(false),
 			computed(() => params.errorMessages?.value || []),
 			params.focused,
@@ -129,7 +141,7 @@ export function useValidation(params: {
 		params.customRules,
 		params.customWarningRules,
 		params.customSuccessRules,
-		innerErrors,
+		customErrors,
 		innerWarnings,
 		innerSuccesses,
 		params.showSuccessMessages,
@@ -143,7 +155,8 @@ export function useValidation(params: {
 
 	async function validate(): Promise<boolean> {
 		if (params.readonly.value || params.disabled.value || params.disableErrorHandling.value) {
-			innerErrors.value = []
+			vuetifyErrors.value = []
+			customErrors.value = []
 			innerWarnings.value = []
 			innerSuccesses.value = []
 
@@ -162,7 +175,8 @@ export function useValidation(params: {
 	}
 
 	const errors = computed(() => [...new Set([
-		...innerErrors.value,
+		...vuetifyErrors.value,
+		...customErrors.value,
 		...(params.errorMessages?.value || []),
 	])])
 	const warnings = computed(() => [...new Set([
@@ -173,10 +187,26 @@ export function useValidation(params: {
 		...(params.showSuccessMessages.value ? innerSuccesses.value : []),
 		...(params.successMessages?.value || []),
 	])])
+	const internalHasSuccess = computed(() => customValidator.hasSuccess.value)
 
 	const hasError = computed(() => errors.value.length > 0 || params.hasErrorProp?.value)
 	const hasWarning = computed(() => warnings.value.length > 0 || params.hasWarningProp?.value)
-	const hasSuccess = computed(() => (successes.value.length > 0 && !hasError.value && !hasWarning.value) || params.hasSuccessProp?.value)
+	// TODO: vérifier si c'est la meilleure approche pour supprimer le succès en mode Vuetify
+	const hasSuccess = computed(() => {
+		if (toValue(params.useVuetifyValidation)) {
+			return params.hasSuccessProp?.value ?? false
+		}
+		return (
+			(internalHasSuccess.value || (params.successMessages?.value?.length ?? 0) > 0)
+			&& !hasError.value
+			&& !hasWarning.value
+		) || (params.hasSuccessProp?.value ?? false)
+	})
+
+	function clearValidation() {
+		vuetifyErrors.value = []
+		customValidator.clearValidation()
+	}
 
 	return {
 		errors,
@@ -186,5 +216,6 @@ export function useValidation(params: {
 		hasWarning,
 		hasSuccess,
 		validate,
+		clearValidation,
 	}
 }

package/src/composables/unifyValidation/useVuetifyValidation.ts

@@ -12,8 +12,8 @@ export function useVuetifyValidation(
 	errorMessages: Ref<string[]>,
 	focused: Ref<boolean>,
 	maxErrors: Ref<number> | undefined,
-	name: Ref<string>,
-	label: Ref<string>,
+	name: Ref<string | undefined>,
+	label: Ref<string | undefined>,
 	readonly: Ref<boolean>,
 	validateOn: Ref<'input' | 'blur' | 'submit'>,
 ) {

package/src/composables/useFormFieldErrorHandling.ts

@@ -123,7 +123,10 @@ export const useFormFieldErrorHandling = (
 
 	const hasError = computed(() => validation.hasError.value || (props.hasError ?? false))
 	const hasWarning = computed(() => validation.hasWarning.value || (props.hasWarning ?? false))
-	const hasSuccess = computed(() => ((validation.hasSuccess.value && !hasError.value && !hasWarning.value) || (props.hasSuccess ?? false)) && (props.showSuccessMessages ?? true))
+	const hasSuccess = computed(() =>
+		(validation.hasSuccess.value && !hasError.value && !hasWarning.value)
+		|| (props.hasSuccess ?? false),
+	)
 
 	const errors = computed(() => [...validation.errors.value, ...(props.errorMessages || [])])
 	const warnings = computed(() => validation.warnings.value)

package/src/composables/validation/tests/useValidation.spec.ts

@@ -90,7 +90,7 @@ describe('useValidation', () => {
 		expect(validResult.hasSuccess).toBe(true)
 	})
 
-	it('should respect showSuccessMessages option', async () => {
+	it('keeps the success state when showSuccessMessages is false while hiding messages', async () => {
 		const validation = useValidation({ showSuccessMessages: false })
 		const rules = [{
 			type: 'required',
@@ -101,7 +101,7 @@ describe('useValidation', () => {
 		}]
 
 		const result = await validation.validateField('test', rules)
-		expect(result.hasSuccess).toBe(false)
+		expect(result.hasSuccess).toBe(true)
 		expect(result.state.successes).toEqual([])
 	})