@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { useValidation } from '../useValidation'
 
 describe('useValidation', () => {
@@ -13,7 +13,7 @@ describe('useValidation', () => {
 		expect(validation.hasSuccess.value).toBe(false)
 	})
 
-	it('should handle basic validation rules', () => {
+	it('should handle basic validation rules', async () => {
 		const validation = useValidation()
 		const rules = [{
 			type: 'required',
@@ -24,17 +24,17 @@ describe('useValidation', () => {
 		}]
 
 		// Test avec une valeur vide
-		const emptyResult = validation.validateField('', rules)
+		const emptyResult = await validation.validateField('', rules)
 		expect(emptyResult.hasError).toBe(true)
 		expect(emptyResult.state.errors).toContain('Ce champ est requis')
 
 		// Test avec une valeur valide
-		const validResult = validation.validateField('test', rules)
+		const validResult = await validation.validateField('test', rules)
 		expect(validResult.hasSuccess).toBe(true)
 		expect(validResult.state.successes).toContain('Champ valide')
 	})
 
-	it('should handle warning rules', () => {
+	it('should handle warning rules', async () => {
 		const validation = useValidation()
 		const warningRules = [{
 			type: 'custom',
@@ -46,17 +46,17 @@ describe('useValidation', () => {
 		}]
 
 		// Test avec une valeur courte
-		const shortResult = validation.validateField('test', [], warningRules)
+		const shortResult = await validation.validateField('test', [], warningRules)
 		expect(shortResult.hasWarning).toBe(true)
 		expect(shortResult.state.warnings[0]).toContain('8 caractères')
 
 		// Test avec une valeur valide
-		const validResult = validation.validateField('test_long', [], warningRules)
+		const validResult = await validation.validateField('test_long', [], warningRules)
 		expect(validResult.hasWarning).toBe(false)
 		expect(validResult.state.warnings).toEqual([])
 	})
 
-	it('should handle multiple validation rules', () => {
+	it('should handle multiple validation rules', async () => {
 		const validation = useValidation()
 		const rules = [
 			{
@@ -75,22 +75,22 @@ describe('useValidation', () => {
 		]
 
 		// Test avec une valeur vide
-		const emptyResult = validation.validateField('', rules)
+		const emptyResult = await validation.validateField('', rules)
 		expect(emptyResult.hasError).toBe(true)
 		expect(emptyResult.state.errors).toContain('Ce champ est requis')
 
 		// Test avec une valeur trop courte
-		const shortResult = validation.validateField('ab', rules)
+		const shortResult = await validation.validateField('ab', rules)
 		expect(shortResult.hasError).toBe(true)
 		expect(shortResult.state.errors).toContain('Minimum 3 caractères requis')
 
 		// Test avec une valeur valide
-		const validResult = validation.validateField('abc', rules)
+		const validResult = await validation.validateField('abc', rules)
 		expect(validResult.hasError).toBe(false)
 		expect(validResult.hasSuccess).toBe(true)
 	})
 
-	it('should respect showSuccessMessages option', () => {
+	it('should respect showSuccessMessages option', async () => {
 		const validation = useValidation({ showSuccessMessages: false })
 		const rules = [{
 			type: 'required',
@@ -100,12 +100,12 @@ describe('useValidation', () => {
 			},
 		}]
 
-		const result = validation.validateField('test', rules)
+		const result = await validation.validateField('test', rules)
 		expect(result.hasSuccess).toBe(false)
 		expect(result.state.successes).toEqual([])
 	})
 
-	it('should use fieldIdentifier in messages', () => {
+	it('should use fieldIdentifier in messages', async () => {
 		const validation = useValidation({ fieldIdentifier: 'Email' })
 		const rules = [{
 			type: 'required',
@@ -114,11 +114,11 @@ describe('useValidation', () => {
 			},
 		}]
 
-		const result = validation.validateField('', rules)
+		const result = await validation.validateField('', rules)
 		expect(result.state.errors[0]).toContain('Email')
 	})
 
-	it('should clear validation state', () => {
+	it('should clear validation state', async () => {
 		const validation = useValidation()
 		const rules = [{
 			type: 'required',
@@ -127,7 +127,7 @@ describe('useValidation', () => {
 			},
 		}]
 
-		validation.validateField('', rules)
+		await validation.validateField('', rules)
 		expect(validation.hasError.value).toBe(true)
 
 		validation.clearValidation()
@@ -145,10 +145,105 @@ describe('useValidation', () => {
 			},
 		}]
 
-		validation.validateField('', rules)
-		expect(await validation.validateOnSubmit()).toBe(false)
+		await validation.validateField('', rules)
+		expect(validation.validateOnSubmit()).toBe(false)
 
-		validation.validateField('test', rules)
-		expect(await validation.validateOnSubmit()).toBe(true)
+		await validation.validateField('test', rules)
+		expect(validation.validateOnSubmit()).toBe(true)
+	})
+
+	describe('Handle thrown errors in async rules', () => {
+		it('should handle thrown error in async validation rules', async () => {
+			const validation = useValidation()
+			const rules = [{
+				type: 'custom',
+				options: {
+					validate: async () => {
+						throw new Error('Network error')
+					},
+					message: 'Erreur personnalisée',
+				},
+			}]
+
+			const result = await validation.validateField('test', rules)
+			expect(result.hasError).toBe(true)
+			expect(result.state.errors[0]).toBe('Erreur personnalisée')
+		})
+
+		it('should use thrown error message when no custom message is provided', async () => {
+			const validation = useValidation()
+			const rules = [{
+				type: 'custom',
+				options: {
+					validate: async () => {
+						throw new Error('Service unavailable')
+					},
+				},
+			}]
+
+			const result = await validation.validateField('test', rules)
+			expect(result.hasError).toBe(true)
+			expect(result.state.errors[0]).toBe('Service unavailable')
+		})
+
+		it('should handle thrown error in async warning rules', async () => {
+			const validation = useValidation()
+			const warningRules = [{
+				type: 'custom',
+				options: {
+					validate: async () => {
+						throw new Error('Warning service failed')
+					},
+					isWarning: true,
+				},
+			}]
+
+			const result = await validation.validateField('test', [], warningRules)
+			expect(result.hasWarning).toBe(true)
+			expect(result.state.warnings[0]).toBe('Warning service failed')
+		})
+	})
+
+	it('should discard a slow async validation when a newer one is triggered after', async () => {
+		vi.useFakeTimers()
+		const validation = useValidation()
+
+		// Slow rule: resolves after 100ms with an error
+		const slowRules = [{
+			type: 'custom',
+			options: {
+				validate: () => new Promise<boolean>(resolve => setTimeout(() => resolve(false), 100)),
+				message: 'Erreur lente',
+			},
+		}]
+
+		// Fast rule: resolves immediately with success
+		const fastRules = [{
+			type: 'custom',
+			options: {
+				validate: () => true,
+				successMessage: 'Validation rapide réussie',
+			},
+		}]
+
+		// Launch slow validation first, then fast validation immediately after
+		const slowPromise = validation.validateField('test', slowRules)
+		const fastResult = await validation.validateField('test', fastRules)
+
+		// Fast validation should have succeeded
+		expect(fastResult.hasError).toBe(false)
+		expect(fastResult.hasSuccess).toBe(true)
+		expect(fastResult.state.successes).toContain('Validation rapide réussie')
+
+		// Wait for the slow validation to resolve
+		vi.advanceTimersByTime(100)
+		await slowPromise
+
+		// The slow validation must NOT have overwritten the fast result
+		expect(validation.errors.value).toEqual([])
+		expect(validation.hasError.value).toBe(false)
+		expect(validation.successes.value).toContain('Validation rapide réussie')
+
+		vi.useRealTimers()
 	})
 })

package/src/composables/validation/useFormValidation.ts

@@ -1,10 +1,13 @@
 import { provide, inject, ref, type InjectionKey, type Ref } from 'vue'
 
 // Type pour les composants pouvant être validés
-export interface ValidatableComponent {
+export type ValidatableComponent = {
 	validateOnSubmit: () => Promise<boolean> | boolean
 	clearValidation?: () => void
 	reset?: () => void
+	$props?: {
+		label?: string
+	}
 }
 
 // Clé d'injection pour le registre des composants validables
@@ -47,24 +50,28 @@ export function useFormValidation() {
 	// Fonction pour nettoyer les validations de tous les composants enregistrés
 	const clearAll = () => {
 		if (validatableComponents.value.length === 0) return
-		validatableComponents.value.forEach((component) => {
-			try {
-				component.clearValidation?.()
-			}
-			catch {
-				// no-op: un composant peut ne pas implémenter clearValidation
+		validatableComponents.value.forEach((component: ValidatableComponent) => {
+			if (component.clearValidation) {
+				try {
+					component.clearValidation()
+				}
+				catch (error) {
+					console.warn('Error clearing validation for field: ' + (component?.$props?.label ?? 'unknown'), error)
+				}
 			}
 		})
 	}
 
 	const resetAll = () => {
 		if (validatableComponents.value.length === 0) return
-		validatableComponents.value.forEach((component) => {
-			try {
-				component.reset?.()
-			}
-			catch {
-				// no-op: un composant peut ne pas implémenter reset
+		validatableComponents.value.forEach((component: ValidatableComponent) => {
+			if (component.reset) {
+				try {
+					component.reset()
+				}
+				catch (error) {
+					console.warn('Error resetting field: ' + (component?.$props?.label ?? 'unknown'), error)
+				}
 			}
 		})
 	}

package/src/composables/validation/useValidatable.ts

@@ -34,7 +34,14 @@ export function useValidatable(
 	const instance = getCurrentInstance()
 
 	// Keep a stable object reference for register/unregister symmetry
-	const componentRef = { validateOnSubmit: validateMethod, clearValidation, reset }
+	const componentRef = {
+		validateOnSubmit: validateMethod,
+		clearValidation,
+		reset,
+		$props: {
+			label: typeof instance?.props?.label === 'string' ? instance.props.label : undefined,
+		},
+	}
 
 	onMounted(() => {
 		if (instance) {

package/src/composables/validation/useValidation.ts

@@ -1,18 +1,24 @@
 import { ref, computed } from 'vue'
-import { useFieldValidation, type RuleOptions } from '../rules/useFieldValidation'
+import { useFieldValidation, type RuleOptions, type ValidationResult as FieldValidationResult } from '../rules/useFieldValidation'
 
-export type ValidationRule = {
-	type: string
+export type BuiltInRuleType = 'required' | 'email' | 'minLength' | 'maxLength'
+
+interface CustomValidationRule {
+	type: 'custom'
+	options: RuleOptions & { validate: NonNullable<RuleOptions['validate']> }
+}
+
+interface StandardValidationRule {
+	type: BuiltInRuleType | ({} & string)
 	options: RuleOptions
 }
 
+export type ValidationRule = CustomValidationRule | StandardValidationRule
+
 export interface ValidationOptions {
 	showSuccessMessages?: boolean
-	fieldIdentifier?: string
-	customRules?: ValidationRule[]
-	warningRules?: ValidationRule[]
-	successRules?: ValidationRule[]
 	disableErrorHandling?: boolean
+	fieldIdentifier?: string
 }
 
 export interface ValidationState {
@@ -38,6 +44,8 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	const warnings = ref<string[]>([])
 	const successes = ref<string[]>([])
 
+	let currentValidationToken = 0
+
 	const { generateRules } = useFieldValidation()
 
 	const hasError = computed(() => errors.value.length > 0)
@@ -52,128 +60,156 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		successes.value = []
 	}
 
+	/**
+	 * Resolves an array of rule results that may be sync or async.
+	 * Returns the resolved array directly if all are sync, or a Promise if any are async.
+	 */
+	const resolveRuleResults = (
+		results: (FieldValidationResult | Promise<FieldValidationResult>)[],
+	): FieldValidationResult[] | Promise<FieldValidationResult[]> => {
+		if (results.every(r => !(r instanceof Promise))) return results as FieldValidationResult[]
+
+		const safePromises = results.map((r: FieldValidationResult | Promise<FieldValidationResult>) => {
+			if (!(r instanceof Promise)) return Promise.resolve(r)
+
+			return r.catch((err: unknown) => {
+				const message = err instanceof Error ? err.message : String(err)
+				return { error: message || 'Erreur de validation' } as FieldValidationResult
+			})
+		})
+
+		return Promise.all(safePromises)
+	}
+
+	/** Executes validation rules against a value, returning sync or async results. */
+	const executeRules = (
+		rules: ValidationRule[],
+		value: unknown,
+		extraOptions?: Record<string, boolean>,
+	): FieldValidationResult[] | Promise<FieldValidationResult[]> => {
+		for (const rule of rules) {
+			if ('validator' in rule) {
+				console.error('[useValidation] "validator" en top level de ValidationRule n\'est plus supporté. Utilisez rule.options.validate à la place.')
+			}
+		}
+
+		const prepared = rules.map(rule => ({
+			type: rule.type,
+			options: { ...rule.options, ...extraOptions, ...(options.fieldIdentifier && !rule.options?.fieldIdentifier ? { fieldIdentifier: options.fieldIdentifier } : {}) },
+		}))
+		const fns = generateRules(prepared)
+		return resolveRuleResults(fns.map(fn => fn(value)))
+	}
+
+	/** Applies a callback to a sync or async value, discarding stale results via token. */
+	const thenOrSync = <T>(
+		value: T | Promise<T>,
+		token: number,
+		fn: (resolved: T) => ValidationResult | Promise<ValidationResult>,
+	): ValidationResult | Promise<ValidationResult> => {
+		if (value instanceof Promise) {
+			return value.then(resolved =>
+				token !== currentValidationToken ? buildResult() : fn(resolved),
+			)
+		}
+		return fn(value)
+	}
+
+	const buildResult = (): ValidationResult => ({
+		hasError: hasError.value,
+		hasWarning: hasWarning.value,
+		hasSuccess: hasSuccess.value,
+		state: {
+			errors: errors.value,
+			warnings: warnings.value,
+			successes: successes.value,
+		},
+	})
+
+	/** Adds a default success message when no custom success rules are provided. */
+	const addDefaultSuccessMessage = (rules: ValidationRule[]) => {
+		const customSuccessMessage = rules.find(rule => rule.options?.successMessage)?.options.successMessage
+		if (customSuccessMessage) {
+			successes.value.push(customSuccessMessage)
+		}
+		else {
+			const defaultMessage = options.fieldIdentifier ? `Le champ ${options.fieldIdentifier} est valide.` : 'Champ valide'
+			successes.value.push(defaultMessage)
+		}
+	}
+
 	const validateField = (
 		value: unknown,
 		rules: ValidationRule[] = [],
 		warningRules: ValidationRule[] = [],
 		successRules: ValidationRule[] = [],
-	): ValidationResult => {
+	): ValidationResult | Promise<ValidationResult> => {
+		const token = ++currentValidationToken
 		clearValidation()
 
-		// Si la gestion des erreurs est désactivée, on retourne un résultat sans erreurs
-		if (options.disableErrorHandling) {
-			return {
-				hasError: false,
-				hasWarning: false,
-				hasSuccess: false,
-				state: {
-					errors: [],
-					warnings: [],
-					successes: [],
-				},
-			}
-		}
+		if (options.disableErrorHandling) return buildResult()
 
-		// Validation des règles normales
-		const normalRules = rules.map(rule => ({
-			type: rule.type,
-			options: {
-				...rule.options,
-				fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
-			},
-		}))
+		const resolved = executeRules(rules, value)
 
-		const validationRules = generateRules(normalRules)
-		let hasValidationError = false
-		validationRules.forEach((validationRule) => {
-			const result = validationRule(value)
-			if (result.error) {
-				errors.value.push(result.error)
-				hasValidationError = true
+		return thenOrSync(resolved, token, (ruleResults) => {
+			let hasValidationError = false
+			for (const result of ruleResults) {
+				if (result.error) {
+					errors.value.push(result.error)
+					hasValidationError = true
+				}
 			}
-		})
 
-		// Si pas d'erreur, ajouter le message de succès ou un message par défaut
-		// Mais seulement si aucun customSuccessRules n'est défini pour éviter la duplication
-		if (!hasValidationError && value && options.showSuccessMessages !== false && (!successRules || successRules.length === 0)) {
-			const customSuccessMessage = rules.find(rule => rule.options.successMessage)?.options.successMessage
-			if (customSuccessMessage) {
-				successes.value.push(customSuccessMessage)
+			if (!hasValidationError && value && options.showSuccessMessages !== false && successRules.length === 0) {
+				addDefaultSuccessMessage(rules)
 			}
-			else {
-				const defaultMessage = options.fieldIdentifier ? `Le champ ${options.fieldIdentifier} est valide.` : 'Champ valide'
-				successes.value.push(defaultMessage)
+
+			if (!hasValidationError && warningRules.length > 0) {
+				const warningResolved = executeRules(warningRules, value, { isWarning: true })
+				return thenOrSync(warningResolved, token, (warningResults) => {
+					for (const r of warningResults) {
+						if (r.warning) warnings.value.push(r.warning)
+					}
+					return runSuccessRules(hasValidationError, value, successRules, token)
+				})
 			}
-		}
 
-		// Validation des règles d'avertissement
-		if (!hasValidationError) {
-			const warningValidationRules = generateRules(
-				warningRules.map(rule => ({
-					type: rule.type,
-					options: {
-						...rule.options,
-						isWarning: true,
-						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
-					},
-				})),
-			)
+			return runSuccessRules(hasValidationError, value, successRules, token)
+		})
+	}
 
-			warningValidationRules.forEach((validationRule) => {
-				const result = validationRule(value)
-				if (result.warning) {
-					warnings.value.push(result.warning)
-				}
-			})
-		}
+	/** Runs success rules after normal + warning rules. */
+	const runSuccessRules = (
+		hasValidationError: boolean,
+		value: unknown,
+		successRules: ValidationRule[],
+		token: number,
+	): ValidationResult | Promise<ValidationResult> => {
+		if (hasValidationError || hasWarning.value || successRules.length === 0) return buildResult()
 
-		// Validation des règles de succès
-		if (!hasValidationError && !hasWarning.value) {
-			const successValidationRules = generateRules(
-				successRules.map(rule => ({
-					type: rule.type,
-					options: {
-						...rule.options,
-						isSuccess: true,
-						fieldIdentifier: options.fieldIdentifier || rule.options.fieldIdentifier,
-					},
-				})),
-			)
+		const successResolved = executeRules(successRules, value, { isSuccess: true })
 
-			successValidationRules.forEach((validationRule) => {
-				const result = validationRule(value)
-				if (result.success && options.showSuccessMessages !== false) {
-					successes.value.push(result.success)
+		return thenOrSync(successResolved, token, (successResults) => {
+			for (const r of successResults) {
+				if (r.success && options.showSuccessMessages !== false) {
+					successes.value.push(r.success)
 				}
-			})
-		}
-
-		return {
-			hasError: hasError.value,
-			hasWarning: hasWarning.value,
-			hasSuccess: hasSuccess.value,
-			state: {
-				errors: errors.value,
-				warnings: warnings.value,
-				successes: successes.value,
-			},
-		}
+			}
+			return buildResult()
+		})
 	}
 
-	const validateOnSubmit = async (): Promise<boolean> => {
+	const validateOnSubmit = (): boolean => {
 		return !hasError.value
 	}
 
 	return {
-		// États
 		errors,
 		warnings,
 		successes,
 		hasError,
 		hasWarning,
 		hasSuccess,
-
-		// Méthodes
 		validateField,
 		validateOnSubmit,
 		clearValidation,

package/src/composantsVuetify/Introduction.mdx

@@ -0,0 +1,48 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Composants/Composants Vuetify/Introduction" />
+
+<div className="header">
+    <h1>Composants Vuetify</h1>
+Pour certains composants, nous avons fait le choix d'utiliser directement les composants natifs de Vuetify en leur appliquant un thème via les tokens du design system. Cela permet de bénéficier de toute la puissance et la flexibilité de Vuetify tout en respectant la charte graphique de chaque thème.
+</div>
+
+## Pourquoi utiliser les composants Vuetify directement ?
+
+Certains composants sont suffisamment couverts par Vuetify et ne nécessitent pas d'encapsulation supplémentaire. Dans ce cas, nous appliquons simplement les bonnes props Vuetify en combinaison avec les tokens de couleur de chaque thème.
+Cela signifie que vous pouvez utiliser toute l'API Vuetify native sur ces composants, sans restriction.
+
+## Utilisation
+
+Pour ces composants, il vous suffit d'utiliser directement le composant Vuetify avec les props adéquates.
+
+### Exemple avec `v-btn`
+
+```html
+<!-- Bouton primaire -->
+<v-btn color="primary">Button</v-btn>
+
+<!-- Bouton outlined -->
+<v-btn color="primary" variant="outlined">Button</v-btn>
+
+<!-- Bouton tonal -->
+<v-btn color="primary" variant="tonal">Button</v-btn>
+
+<!-- Bouton texte -->
+<v-btn color="primary" variant="text">Button</v-btn>
+
+<!-- Bouton désactivé -->
+<v-btn color="primary" disabled>Button</v-btn>
+```
+
+## Props Vuetify disponibles
+
+Vous pouvez utiliser n'importe quelle prop reconnue par Vuetify sur ces composants. Par exemple, pour un bouton `v-btn` la liste complète des props est disponible sur la [documentation Vuetify](https://vuetifyjs.com/en/api/v-btn/#props) du composant.
+
+## Thèmes supportés
+
+Pour le `v-btn` par exemple les couleurs `primary`, `secondary` et `tertiary` sont définies différemment selon le thème actif.
+
+## Conclusion
+
+L'utilisation directe des composants Vuetify avec les thèmes du design system vous offre une flexibilité maximale. Vous bénéficiez de toute l'API Vuetify tout en respectant automatiquement la charte graphique du thème actif. Il vous suffit d'utiliser les bonnes valeurs pour obtenir un rendu cohérent avec le design system.