@cnamts/synapse 1.0.12 → 1.0.13

package/src/components/NirField/NirField.vue

@@ -43,6 +43,7 @@
 		disableErrorHandling?: boolean
 		nirType?: 'simple' | 'complexe'
 		withoutFieldset?: boolean
+		customLocale?: Partial<Record<keyof typeof locales, string>>
 	}>(), {
 		modelValue: undefined,
 		label: 'Identifiant d\'assuré',
@@ -79,6 +80,14 @@
 		disableErrorHandling: false,
 		nirType: 'simple',
 		withoutFieldset: false,
+		customLocale: () => ({
+			errorRequiredNumber: locales.errorRequiredNumber,
+			errorInvalidNumber: locales.errorInvalidNumber,
+			errorRequiredKey: locales.errorRequiredKey,
+			errorInvalidKey: locales.errorInvalidKey,
+			successNumberValid: locales.successNumberValid,
+			successKeyValid: locales.successKeyValid,
+		} as Partial<Record<keyof typeof locales, string>>),
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -199,7 +208,7 @@
 			rules.push({
 				type: 'required',
 				options: {
-					message: locales.errorRequiredNumber,
+					message: props.customLocale.errorRequiredNumber,
 					fieldIdentifier: props.numberLabel,
 				},
 			})
@@ -221,13 +230,13 @@
 					if (!value) return true
 					// Ne valider que si tous les caractères sont saisis
 					if (value.length < 13) {
-						return locales.erreurInvalidNumber
+						return props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
 					}
 					const result = checkNIR(value, props.nirType)
-					return result === true ? true : locales.erreurInvalidNumber
+					return result ? true : props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
 				},
-				message: locales.erreurInvalidNumber,
-				successMessage: locales.successNumberValid,
+				message: props.customLocale.errorInvalidNumber,
+				successMessage: props.customLocale.successNumberValid,
 				fieldIdentifier: props.numberLabel,
 			},
 		})
@@ -250,7 +259,7 @@
 			rules.push({
 				type: 'required',
 				options: {
-					message: locales.errorRequiredKey,
+					message: props.customLocale.errorRequiredKey,
 					fieldIdentifier: props.keyLabel,
 				},
 			})
@@ -274,8 +283,8 @@
 				type: 'custom',
 				options: {
 					validate: validateKey,
-					message: locales.errorInvalidKey,
-					successMessage: locales.successKeyValid,
+					message: props.customLocale.errorInvalidKey,
+					successMessage: props.customLocale.successKeyValid,
 					fieldIdentifier: props.keyLabel,
 				},
 			})
@@ -506,7 +515,23 @@
 	})
 
 	// Rendre le composant auto-validable dans un SyForm
-	useValidatable(validateOnSubmit)
+	useValidatable(
+		validateOnSubmit,
+		() => {
+			try {
+				numberValidation.clearValidation()
+			}
+			catch {
+				void 0
+			}
+			try {
+				keyValidation.clearValidation()
+			}
+			catch {
+				void 0
+			}
+		},
+	)
 
 	defineExpose({
 		validateOnSubmit,

package/src/components/NirField/locales.ts

@@ -1,9 +1,7 @@
 export const locales = {
 	errorRequiredNumber: 'Le numéro de sécurité sociale est requis, ce sont les 13 premiers chiffres sur votre carte vitale.',
-	errorLengthNumber: (length: number) => `Le numéro de sécurité sociale doit contenir ${length} caractères.`,
-	erreurInvalidNumber: 'Le numéro de sécurité sociale est invalide.',
+	errorInvalidNumber: 'Le numéro de sécurité sociale est invalide.',
 	errorRequiredKey: 'La clé de contrôle est requise, ce sont les 2 derniers chiffres sur votre carte vitale.',
-	errorLengthKey: (length: number) => `La clé du numéro de sécurité sociale doit contenir ${length} caractères.`,
 	errorInvalidKey: 'La clé de contrôle est invalide.',
 	successNumberValid: 'Le numéro de sécurité sociale est valide.',
 	successKeyValid: 'La clé de contrôle est valide.',

package/src/components/PasswordField/PasswordField.vue

@@ -68,10 +68,13 @@
 	const showEyeIcon = ref(false)
 	const passwordFieldId = ref(`password-field-${Math.random().toString(36).substring(2, 10)}`)
 	const alertMessage = ref('')
+	// Force re-render of SyTextField when needed (e.g., after reset)
+	const fieldKey = ref(0)
 
 	const btnLabel = locales.showPassword
 
 	const password = ref<string | null>(props.modelValue)
+	const isProgrammaticChange = ref(false)
 	watch(
 		() => props.modelValue,
 		(newVal) => {
@@ -160,11 +163,14 @@
 		}
 	}, { immediate: true })
 
-	watch(() => password.value, () => {
-		if (props.readonly) return
-		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
-		emit('update:modelValue', password.value)
-	})
+	// Ne pas revalider automatiquement à chaque changement de valeur.
+	// La validation est gérée explicitement au blur et à la soumission.
+	watch(
+		() => password.value,
+		(newVal) => {
+			emit('update:modelValue', newVal)
+		},
+	)
 
 	function togglePasswordVisibility() {
 		showEyeIcon.value = !showEyeIcon.value
@@ -209,8 +215,32 @@
 		return isValid
 	}
 
+	// Nettoie uniquement l'état de validation (messages) sans modifier la valeur
+	const clearValidation = () => {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+	}
+
+	// Reset hook utilisé par SyForm.reset() via useValidatable
+	const reset = () => {
+		// Réinitialiser d'abord l'état de validation et d'interaction
+		clearValidation()
+		alertMessage.value = ''
+		showEyeIcon.value = false
+
+		// Réinitialiser le contenu du champ
+		isProgrammaticChange.value = true
+		password.value = null
+		emit('update:modelValue', null)
+		isProgrammaticChange.value = false
+
+		// Forcer la recréation du champ pour réinitialiser l'état interne de Vuetify
+		fieldKey.value++
+	}
+
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, clearValidation, reset)
 
 	defineExpose({
 		showEyeIcon,
@@ -221,6 +251,8 @@
 		hasWarning,
 		hasSuccess,
 		validateOnSubmit,
+		clearValidation,
+		reset,
 	})
 </script>
 
@@ -228,6 +260,7 @@
 	<SyTextField
 		v-bind="Object.fromEntries(Object.entries(options).filter(([key]) => key !== 'btn' && key !== 'icon' && key !== 'variant'))"
 		:id="passwordFieldId"
+		:key="fieldKey"
 		v-model="password"
 		:variant-style="props.variantStyle"
 		:color="props.color"
@@ -244,7 +277,6 @@
 		:aria-invalid="hasError"
 		:aria-describedby="`${passwordFieldId}-status${props.customRules && props.customRules.length > 0 ? ' ' + passwordFieldId + '-guidelines' : ''}`"
 		:display-asterisk="props.displayAsterisk"
-		:rules="[...defaultRules, ...props.customRules]"
 		:autocomplete="props.autocompleteType"
 		class="vd-password"
 		:validate-on="props.isValidateOnBlur ? 'blur lazy' : 'lazy'"

package/src/components/PhoneField/PhoneField.vue

@@ -55,6 +55,8 @@
 	const phoneNumber = ref(props.modelValue || '')
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const dialCode = ref<string | Record<string, any>>(props.dialCodeModel || '')
+	// Force re-render of SySelect when needed (e.g., after reset)
+	const dialSelectKey = ref(0)
 	const counter = ref(10)
 	const phoneMask = ref('## ## ## ## ##')
 	const onBlur = ref(false)
@@ -241,6 +243,13 @@
 
 	const shouldDisableErrorHandling = computed(() => props.disableErrorHandling || props.readonly)
 
+	// When disabling error handling, immediately clear any existing validation state
+	watch(shouldDisableErrorHandling, (disabled) => {
+		if (disabled) {
+			validation.clearValidation()
+		}
+	})
+
 	const validation = useValidation({
 		customRules: validationRules.value,
 		showSuccessMessages: true,
@@ -248,9 +257,9 @@
 		disableErrorHandling: shouldDisableErrorHandling.value,
 	})
 
-	const hasError = computed(() => validation.hasError.value)
-	const hasWarning = computed(() => validation.hasWarning.value)
-	const hasSuccess = computed(() => validation.hasSuccess.value)
+	const hasError = computed(() => !shouldDisableErrorHandling.value && validation.hasError.value)
+	const hasWarning = computed(() => !shouldDisableErrorHandling.value && validation.hasWarning.value)
+	const hasSuccess = computed(() => !shouldDisableErrorHandling.value && validation.hasSuccess.value)
 
 	const iconColor = computed(() => {
 		if (shouldDisableErrorHandling.value) return '#222324'
@@ -260,9 +269,9 @@
 		return '#222324'
 	})
 
-	const errors = computed(() => validation.errors.value)
-	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const errors = computed(() => shouldDisableErrorHandling.value ? [] : validation.errors.value)
+	const warnings = computed(() => shouldDisableErrorHandling.value ? [] : validation.warnings.value)
+	const successes = computed(() => shouldDisableErrorHandling.value ? [] : validation.successes.value)
 
 	const showHelpTextBelow = computed(() => {
 		// Display help text below by default if it exists
@@ -312,8 +321,28 @@
 		return !validation.hasError.value
 	}
 
+	// Reset hook used by SyForm.reset() via useValidatable
+	const reset = () => {
+		// Reset interaction state and validation FIRST to avoid triggering watchers with errors
+		onBlur.value = false
+		validation.clearValidation()
+
+		// Clear content
+		phoneNumber.value = ''
+		emit('update:modelValue', '')
+
+		// Clear dial code and restore defaults
+		dialCode.value = ''
+		emit('update:selectedDialCode', '')
+		counter.value = 10
+		phoneMask.value = '## ## ## ## ##'
+
+		// Force SySelect to be recreated to ensure internal classes are reset
+		dialSelectKey.value++
+	}
+
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, validation.clearValidation, reset)
 
 	defineExpose({
 		computedValue,
@@ -342,14 +371,15 @@
 		<div class="phone-field-container">
 			<SySelect
 				v-if="withCountryCode"
+				:key="dialSelectKey"
 				v-model="dialCode"
 				:items="dialCodeOptions"
 				:label="locales.indicatifLabel"
 				:outlined="outlinedIndicatif"
 				:required="countryCodeRequired"
 				:aria-required="countryCodeRequired"
-				:error="hasError"
-				:error-messages="errors[1]"
+				:error="!!errors[1]"
+				:error-messages="errors[1] ? [errors[1]] : []"
 				:display-asterisk="displayAsterisk"
 				:disable-error-handling="shouldDisableErrorHandling"
 				:return-object="true"
@@ -426,7 +456,10 @@
 		</div>
 		<div
 			v-if="showHelpTextBelow"
-			class="help-text-below px-4 mt-1"
+			class="help-text-below px-4"
+			:style="{
+				marginTop: hasError || hasWarning || hasSuccess ? '0.25rem' : '-1rem',
+			}"
 			:class="{ 'text-disabled': disabled }"
 		>
 			{{ helpText }}

package/src/components/index.ts

@@ -63,6 +63,7 @@ export { default as SySelect } from './Customs/Selects/SySelect/SySelect.vue'
 export { default as SyTextArea } from './SyTextArea/SyTextArea.vue'
 export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
+export { default as Captcha } from './Captcha/Captcha.vue'
 export { default as SyForm } from './Customs/SyForm/SyForm.vue'
 
 // ===========================

package/src/composables/validation/useFormValidation.ts

@@ -3,12 +3,16 @@ import { provide, inject, ref, type InjectionKey, type Ref } from 'vue'
 // Type pour les composants pouvant être validés
 export interface ValidatableComponent {
 	validateOnSubmit: () => Promise<boolean> | boolean
+	clearValidation?: () => void
+	reset?: () => void
 }
 
 // Clé d'injection pour le registre des composants validables
 const ValidatableComponentsKey: InjectionKey<{
 	register: (component: ValidatableComponent) => void
 	unregister: (component: ValidatableComponent) => void
+	clearAll: () => void
+	resetAll: () => void
 	components: Ref<ValidatableComponent[]>
 }> = Symbol('ValidatableComponents')
 
@@ -29,23 +33,55 @@ export function useFormValidation() {
 
 	// Fonction pour supprimer un composant validable du registre
 	const unregister = (component: ValidatableComponent) => {
-		const index = validatableComponents.value.indexOf(component)
+		// Prefer direct reference removal
+		let index = validatableComponents.value.indexOf(component)
+		// Fallback: locate by matching validateOnSubmit reference
+		if (index === -1) {
+			index = validatableComponents.value.findIndex(c => c.validateOnSubmit === component.validateOnSubmit)
+		}
 		if (index !== -1) {
 			validatableComponents.value.splice(index, 1)
 		}
 	}
 
+	// 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
+			}
+		})
+	}
+
+	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
+			}
+		})
+	}
+
 	// Fournir le registre aux composants enfants
 	provide(ValidatableComponentsKey, {
 		register,
 		unregister,
+		clearAll,
+		resetAll,
 		components: validatableComponents,
 	})
 
 	/**
-	 * Valide tous les composants enfants enregistrés
-	 * @returns Promise<boolean> - true si tous les composants sont valides
-	 */
+     * Valide tous les composants enfants enregistrés
+     * @returns Promise<boolean> - true si tous les composants sont valides
+     */
 	const validateAll = async (): Promise<boolean> => {
 		if (validatableComponents.value.length === 0) {
 			return true
@@ -65,6 +101,8 @@ export function useFormValidation() {
 	return {
 		validateAll,
 		validatableComponents,
+		clearAll,
+		resetAll,
 	}
 }
 
@@ -73,19 +111,19 @@ export function useFormValidation() {
  * @returns Fonction pour s'enregistrer et se désinscrire du formulaire parent
  */
 export function useValidatableComponent() {
-	// Récupérer le registre du formulaire parent
 	const formRegistry = inject(ValidatableComponentsKey, null)
-
-	// Si le composant n'est pas dans un formulaire avec useFormValidation, ne rien faire
 	if (!formRegistry) {
 		return {
 			register: () => {},
 			unregister: () => {},
+			clearAll: () => {},
+			resetAll: () => {},
 		}
 	}
-
 	return {
 		register: formRegistry.register,
 		unregister: formRegistry.unregister,
+		clearAll: formRegistry.clearAll,
+		resetAll: formRegistry.resetAll,
 	}
 }

package/src/composables/validation/useValidatable.ts

@@ -14,26 +14,37 @@ import { useValidatableComponent } from './useFormValidation'
  *   return isValid
  * }
  *
+ * const clearValidation = () => {
+ *   // Logique de nettoyage de la validation
+ * }
+ *
+ * const reset = () => {
+ *   // Logique de réinitialisation
+ * }
+ *
  * // Enregistrer le composant auprès du formulaire parent
- * useValidatable(validateOnSubmit)
+ * useValidatable(validateOnSubmit, clearValidation, reset)
  */
-export function useValidatable(validateMethod: () => Promise<boolean> | boolean) {
+export function useValidatable(
+	validateMethod: () => Promise<boolean> | boolean,
+	clearValidation?: () => void,
+	reset?: () => void,
+) {
 	const { register, unregister } = useValidatableComponent()
 	const instance = getCurrentInstance()
 
+	// Keep a stable object reference for register/unregister symmetry
+	const componentRef = { validateOnSubmit: validateMethod, clearValidation, reset }
+
 	onMounted(() => {
 		if (instance) {
-			register({
-				validateOnSubmit: validateMethod,
-			})
+			register(componentRef)
 		}
 	})
 
 	onBeforeUnmount(() => {
 		if (instance) {
-			unregister({
-				validateOnSubmit: validateMethod,
-			})
+			unregister(componentRef)
 		}
 	})