@cnamts/synapse 1.0.23 → 1.0.24

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

@@ -0,0 +1,184 @@
+import { describe, it, expect } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import type { ValidationRule } from 'vuetify'
+import { useVuetifyValidation } from '../useVuetifyValidation'
+
+/** Run a composable inside a mounted Vue component (needed for Vuetify's internal composable). */
+function withSetup<T>(setup: () => T): { result: T, wrapper: ReturnType<typeof mount> } {
+	let result: T
+	const TestComponent = defineComponent({
+		setup() {
+			result = setup()
+			return {}
+		},
+		render: () => null,
+	})
+	const wrapper = mount(TestComponent)
+	return { result: result!, wrapper }
+}
+
+describe('useVuetifyValidation', () => {
+	const defaultArgs = () => ({
+		modelValue: ref<unknown>(''),
+		rules: ref<ValidationRule[]>([]),
+		disabled: ref(false),
+		errors: ref<string[]>([]),
+		error: ref(false),
+		errorMessages: ref<string[]>([]),
+		focused: ref(false),
+		maxErrors: ref(1),
+		name: ref('fieldName'),
+		label: ref('Mon label'),
+		readonly: ref(false),
+		validateOn: ref<'input' | 'blur' | 'submit'>('blur'),
+	})
+
+	it('returns a vuetify validator with a validate function', () => {
+		const args = defaultArgs()
+		const { result } = withSetup(() =>
+			useVuetifyValidation(
+				args.modelValue,
+				args.rules,
+				args.disabled,
+				args.errors,
+				args.error,
+				args.errorMessages,
+				args.focused,
+				args.maxErrors,
+				args.name,
+				args.label,
+				args.readonly,
+				args.validateOn,
+			),
+		)
+		expect(result).toBeDefined()
+		expect(typeof result.validate).toBe('function')
+	})
+
+	it('isPristine is true before any validate() call', () => {
+		const args = defaultArgs()
+		args.rules.value = [(v: unknown) => !!v || 'Ce champ est requis']
+		const { result } = withSetup(() =>
+			useVuetifyValidation(
+				args.modelValue,
+				args.rules,
+				args.disabled,
+				args.errors,
+				args.error,
+				args.errorMessages,
+				args.focused,
+				args.maxErrors,
+				args.name,
+				args.label,
+				args.readonly,
+				args.validateOn,
+			),
+		)
+		expect(result.isPristine.value).toBe(true)
+	})
+
+	it('errors are empty before validate() is called (isPristine guard)', async () => {
+		const args = defaultArgs()
+		args.rules.value = [(v: unknown) => !!v || 'Ce champ est requis']
+		withSetup(() =>
+			useVuetifyValidation(
+				args.modelValue,
+				args.rules,
+				args.disabled,
+				args.errors,
+				args.error,
+				args.errorMessages,
+				args.focused,
+				args.maxErrors,
+				args.name,
+				args.label,
+				args.readonly,
+				args.validateOn,
+			),
+		)
+		await nextTick()
+		expect(args.errors.value).toEqual([])
+	})
+
+	it('validate() with failing required rule populates errors', async () => {
+		const args = defaultArgs()
+		args.modelValue.value = ''
+		args.rules.value = [(v: unknown) => !!v || 'Ce champ est requis']
+		const { result } = withSetup(() =>
+			useVuetifyValidation(
+				args.modelValue,
+				args.rules,
+				args.disabled,
+				args.errors,
+				args.error,
+				args.errorMessages,
+				args.focused,
+				args.maxErrors,
+				args.name,
+				args.label,
+				args.readonly,
+				args.validateOn,
+			),
+		)
+		await result.validate()
+		await nextTick()
+		expect(args.errors.value).toContain('Ce champ est requis')
+	})
+
+	it('validate() with passing required rule keeps errors empty', async () => {
+		const args = defaultArgs()
+		args.modelValue.value = 'valid'
+		args.rules.value = [(v: unknown) => !!v || 'Ce champ est requis']
+		const { result } = withSetup(() =>
+			useVuetifyValidation(
+				args.modelValue,
+				args.rules,
+				args.disabled,
+				args.errors,
+				args.error,
+				args.errorMessages,
+				args.focused,
+				args.maxErrors,
+				args.name,
+				args.label,
+				args.readonly,
+				args.validateOn,
+			),
+		)
+		await result.validate()
+		await nextTick()
+		expect(args.errors.value).toEqual([])
+	})
+
+	it('validate() then fix value: errors are cleared on next validate()', async () => {
+		const args = defaultArgs()
+		args.modelValue.value = ''
+		args.rules.value = [(v: unknown) => !!v || 'Ce champ est requis']
+		const { result } = withSetup(() =>
+			useVuetifyValidation(
+				args.modelValue,
+				args.rules,
+				args.disabled,
+				args.errors,
+				args.error,
+				args.errorMessages,
+				args.focused,
+				args.maxErrors,
+				args.name,
+				args.label,
+				args.readonly,
+				args.validateOn,
+			),
+		)
+
+		await result.validate()
+		await nextTick()
+		expect(args.errors.value).toContain('Ce champ est requis')
+
+		args.modelValue.value = 'some input'
+		await result.validate()
+		await nextTick()
+		expect(args.errors.value).toEqual([])
+	})
+})

package/src/composables/unifyValidation/useCustomValidation.ts

@@ -0,0 +1,95 @@
+import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+import { useValidatable } from '@/composables/validation/useValidatable'
+import { watch } from 'vue'
+import type { Ref } from 'vue'
+
+/**
+ * Interface between the validation entrypoint "useValidation" composable and the custom validation logic.
+ */
+export function useCustomValidation(
+	modelValue: Ref<unknown>,
+	customRules: Ref<ValidationRule[]> | undefined,
+	customWarningRules: Ref<ValidationRule[]> | undefined,
+	customSuccessRules: Ref<ValidationRule[]> | undefined,
+	errors: Ref<string[]>,
+	warnings: Ref<string[]>,
+	successes: Ref<string[]>,
+	showSuccessMessages: Ref<boolean>,
+	label: Ref<string>,
+	focused: Ref<boolean>,
+	isValidateOnBlur: Ref<boolean>,
+	disableErrorHandling: Ref<boolean>,
+	readonly?: Ref<boolean>,
+	disabled?: Ref<boolean>,
+) {
+	let validator = useValidation({
+		showSuccessMessages: showSuccessMessages.value,
+		fieldIdentifier: label.value,
+		disableErrorHandling: disableErrorHandling.value,
+	})
+
+	watch(
+		() => [showSuccessMessages.value, label.value, customRules?.value, customWarningRules?.value, customSuccessRules?.value, disableErrorHandling.value],
+		() => {
+			validator = useValidation({
+				showSuccessMessages: showSuccessMessages.value,
+				fieldIdentifier: label.value,
+				disableErrorHandling: disableErrorHandling.value,
+			})
+
+			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0
+			if (isDirty) {
+				validate()
+			}
+		},
+		{ deep: true },
+	)
+
+	async function validate() {
+		if (readonly?.value || disabled?.value) {
+			errors.value = []
+			warnings.value = []
+			successes.value = []
+			return { hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [] as string[], warnings: [] as string[], successes: [] as string[] } }
+		}
+
+		const result = await validator.validateField(
+			modelValue.value,
+			customRules?.value,
+			customWarningRules?.value,
+			customSuccessRules?.value,
+		)
+
+		errors.value = result.state.errors
+		warnings.value = result.state.warnings
+		successes.value = result.state.successes
+
+		return result
+	}
+	useValidatable(
+		async () => {
+			const result = await validate()
+			return result.state.errors.length === 0
+		},
+		() => {
+			errors.value = []
+			warnings.value = []
+			successes.value = []
+		},
+		() => modelValue.value = undefined,
+	)
+
+	watch(focused, (newVal) => {
+		if (!newVal && !disableErrorHandling.value) {
+			validate()
+		}
+	})
+
+	watch(modelValue, () => {
+		if (!isValidateOnBlur.value && !disableErrorHandling.value) {
+			validate()
+		}
+	})
+
+	return { validate }
+}

package/src/composables/unifyValidation/useValidation.ts

@@ -0,0 +1,190 @@
+import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+import { computed, ref, toValue, type Ref } from 'vue'
+import type { ValidationRule as VuetifyValidationRule } from 'vuetify'
+import { useCustomValidation } from './useCustomValidation'
+import { useVuetifyValidation as useVuetifyValidationComposable } from './useVuetifyValidation'
+
+export interface FieldValidationProps {
+	modelValue?: unknown
+	readonly?: boolean
+	disabled?: boolean
+	required?: boolean
+	isValidateOnBlur?: boolean
+	showSuccessMessages?: boolean
+	disableErrorHandling?: boolean
+	// When true (Vuetify native mode), the controller should not handle errors/successes
+	useVuetifyValidation?: boolean
+	label: string
+	rules?: VuetifyValidationRule[]
+	customRules?: SyValidationRule[]
+	customWarningRules?: SyValidationRule[]
+	customSuccessRules?: SyValidationRule[]
+	errorMessages?: string[] | null
+	warningMessages?: string[] | null
+	successMessages?: string[] | null
+	hasError?: boolean
+	hasWarning?: boolean
+	hasSuccess?: boolean
+	maxErrors?: number
+}
+
+/**
+ * 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.
+ */
+export const validationPropsDefaults = {
+	readonly: false,
+	disabled: false,
+	required: false,
+	isValidateOnBlur: true,
+	showSuccessMessages: true,
+	disableErrorHandling: false,
+	customRules: () => [],
+	customWarningRules: () => [],
+	customSuccessRules: () => [],
+	errorMessages: null,
+	warningMessages: null,
+	successMessages: null,
+	useVuetifyValidation: false,
+	hasError: false,
+	hasWarning: false,
+	hasSuccess: false,
+	maxErrors: 1,
+}
+
+export function useValidation(params: {
+	modelValue: Ref<unknown>
+	readonly: Ref<boolean>
+	disabled: Ref<boolean>
+	required: Ref<boolean>
+	isValidateOnBlur: Ref<boolean>
+	showSuccessMessages: Ref<boolean>
+	disableErrorHandling: Ref<boolean>
+	label: Ref<string>
+	focused: Ref<boolean>
+	errorMessages?: Ref<string[] | null | undefined>
+	warningMessages?: Ref<string[] | null | undefined>
+	successMessages?: Ref<string[] | null | undefined>
+	hasErrorProp?: Ref<boolean>
+	hasWarningProp?: Ref<boolean>
+	hasSuccessProp?: Ref<boolean>
+} & ({
+	useVuetifyValidation: true
+	rules: Ref<VuetifyValidationRule[] | undefined>
+	customRules?: never
+	customWarningRules?: never
+	customSuccessRules?: never
+	maxErrors?: Ref<number>
+} | {
+	useVuetifyValidation: false
+	customRules: Ref<SyValidationRule[]>
+	customWarningRules?: Ref<SyValidationRule[]>
+	customSuccessRules?: Ref<SyValidationRule[]>
+	rules?: never
+} | {
+	useVuetifyValidation: Ref<boolean>
+	customRules: Ref<SyValidationRule[]>
+	customWarningRules?: Ref<SyValidationRule[]>
+	customSuccessRules?: Ref<SyValidationRule[]>
+	rules: Ref<VuetifyValidationRule[] | undefined>
+	maxErrors?: Ref<number>
+})) {
+	if (params.disableErrorHandling.value) {
+		return {
+			errors: ref<string[]>([]),
+			warnings: ref<string[]>([]),
+			successes: ref<string[]>([]),
+			hasError: computed(() => false),
+			hasWarning: computed(() => false),
+			hasSuccess: computed(() => false),
+			validate: async () => true,
+		}
+	}
+	const innerErrors = ref<string[]>([])
+	const innerWarnings = ref<string[]>([])
+	const innerSuccesses = ref<string[]>([])
+
+	let vuetifyValidator: ReturnType<typeof useVuetifyValidationComposable> | null = null
+
+	if (params.useVuetifyValidation !== false) {
+		vuetifyValidator = useVuetifyValidationComposable(
+			params.modelValue,
+			params.rules,
+			params.disabled,
+			innerErrors,
+			params.hasErrorProp || ref(false),
+			computed(() => params.errorMessages?.value || []),
+			params.focused,
+			params.maxErrors,
+			params.label,
+			params.label,
+			params.readonly,
+			computed(() => params.isValidateOnBlur.value ? 'blur' : 'input'),
+		)
+	}
+
+	const customValidator = useCustomValidation(
+		params.modelValue,
+		params.customRules,
+		params.customWarningRules,
+		params.customSuccessRules,
+		innerErrors,
+		innerWarnings,
+		innerSuccesses,
+		params.showSuccessMessages,
+		params.label,
+		params.focused,
+		params.isValidateOnBlur,
+		params.disableErrorHandling,
+		params.readonly,
+		params.disabled,
+	)
+
+	async function validate(): Promise<boolean> {
+		if (params.readonly.value || params.disabled.value || params.disableErrorHandling.value) {
+			innerErrors.value = []
+			innerWarnings.value = []
+			innerSuccesses.value = []
+
+			return true
+		}
+
+		if (toValue(params.useVuetifyValidation)) {
+			const result = await vuetifyValidator!.validate()
+			return result?.length === 0
+		}
+
+		else {
+			const result = await customValidator.validate()
+			return result.state.errors.length === 0
+		}
+	}
+
+	const errors = computed(() => [...new Set([
+		...innerErrors.value,
+		...(params.errorMessages?.value || []),
+	])])
+	const warnings = computed(() => [...new Set([
+		...innerWarnings.value,
+		...(params.warningMessages?.value || []),
+	])])
+	const successes = computed(() => [...new Set([
+		...(params.showSuccessMessages.value ? innerSuccesses.value : []),
+		...(params.successMessages?.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)
+
+	return {
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		validate,
+	}
+}

package/src/composables/unifyValidation/useVuetifyValidation.ts

@@ -0,0 +1,54 @@
+import { computed, reactive, watch, type Ref } from 'vue'
+import type { ValidationRule } from 'vuetify'
+import { useValidation } from 'vuetify/lib/composables/validation.mjs'
+
+/** Interface between the validation entrypoint "useValidation" composable and the Vuetify validation logic. */
+export function useVuetifyValidation(
+	modelValue: Ref<unknown>,
+	rules: Ref<ValidationRule[] | undefined>,
+	disabled: Ref<boolean>,
+	errors: Ref<string[]>,
+	error: Ref<boolean>,
+	errorMessages: Ref<string[]>,
+	focused: Ref<boolean>,
+	maxErrors: Ref<number> | undefined,
+	name: Ref<string>,
+	label: Ref<string>,
+	readonly: Ref<boolean>,
+	validateOn: Ref<'input' | 'blur' | 'submit'>,
+) {
+	// The vuetify validation composable expects props to be passed as a single object, so we create a reactive proxified object to pass the relevant props and keep them reactive.
+	const proxifiedProps = reactive({
+		'disabled': computed(() => !!disabled.value),
+		'error': computed(() => !!error.value),
+		'errorMessages': computed(() => errorMessages.value),
+		'focused': computed(() => !!focused.value),
+		'maxErrors': computed(() => maxErrors?.value || 1),
+		'name': computed(() => name.value),
+		'label': computed(() => label.value),
+		'readonly': computed(() => !!readonly.value),
+		'rules': computed(() => rules.value || []),
+		'modelValue': computed({
+			get: () => modelValue.value,
+			set: (value: unknown) => { modelValue.value = value },
+		}),
+		'validateOn': computed(() => validateOn.value),
+		'validationValue': computed(() => modelValue.value),
+		'onUpdate:modelValue': (value: unknown) => {
+			modelValue.value = value
+		},
+	})
+
+	const vuetifyValidator = useValidation(
+		proxifiedProps,
+	)
+
+	watch (() => vuetifyValidator.errorMessages.value, (newVal) => {
+		if (vuetifyValidator.isPristine.value) {
+			return
+		}
+		errors.value = newVal
+	})
+
+	return vuetifyValidator
+}

package/src/composables/useFormFieldErrorHandling.ts

@@ -27,8 +27,8 @@ export interface UseFormFieldErrorHandlingReturn {
 	errors: Ref<string[]>
 	warnings: Ref<string[]>
 	successes: Ref<string[]>
-	validateField: (value: unknown) => boolean
-	validateOnSubmit: () => boolean
+	validateField: (value: unknown) => Promise<boolean>
+	validateOnSubmit: () => Promise<boolean>
 	checkErrorOnBlur: () => void
 }
 
@@ -38,9 +38,6 @@ export const useFormFieldErrorHandling = (
 	emitUpdate?: () => void,
 ): UseFormFieldErrorHandlingReturn => {
 	const validation = useValidation({
-		customRules: props.customRules || [],
-		warningRules: props.customWarningRules || [],
-		successRules: props.customSuccessRules || [],
 		showSuccessMessages: props.showSuccessMessages ?? true,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling ?? false,
@@ -71,7 +68,7 @@ export const useFormFieldErrorHandling = (
 		: [],
 	)
 
-	const validateField = (value: unknown) => {
+	const validateField = async (value: unknown) => {
 		if (props.disableErrorHandling) {
 			validation.clearValidation()
 			return true
@@ -85,7 +82,7 @@ export const useFormFieldErrorHandling = (
 			return true
 		}
 
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules!],
 			props.customWarningRules!,

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

@@ -10,6 +10,12 @@ let lastChildApi: ReturnType<typeof useValidatableComponent> | null = null
 
 const ChildComponent = {
 	name: 'ValidatableChild',
+	props: {
+		label: {
+			type: String,
+			default: 'Child Field',
+		},
+	},
 	setup() {
 		const api = useValidatableComponent()
 		lastChildApi = api
@@ -81,6 +87,7 @@ describe('useFormValidation', () => {
 
 	it('clearAll calls clearValidation on registered components and ignores missing or throwing ones', () => {
 		lastChildApi = null
+		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
 		const wrapper = mount(ParentWithForm)
 		const form = (wrapper.vm as { form: FormValidationApi }).form
@@ -102,6 +109,7 @@ describe('useFormValidation', () => {
 		const componentThrowing: ValidatableComponent = {
 			validateOnSubmit: vi.fn(() => true),
 			clearValidation: throwingClear,
+			$props: { label: 'Champ test clear' },
 		}
 
 		childApi.register(componentWithClear)
@@ -112,6 +120,8 @@ describe('useFormValidation', () => {
 
 		expect(clearSpy).toHaveBeenCalledTimes(1)
 		expect(throwingClear).toHaveBeenCalledTimes(1)
+		expect(warnSpy).toHaveBeenCalledWith('Error clearing validation for field: Champ test clear', expect.any(Error))
+		warnSpy.mockRestore()
 	})
 
 	it('clearAll returns early when there are no registered components', () => {
@@ -126,6 +136,7 @@ describe('useFormValidation', () => {
 
 	it('resetAll calls reset on registered components and ignores missing or throwing ones', () => {
 		lastChildApi = null
+		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
 		const wrapper = mount(ParentWithForm)
 		const form = (wrapper.vm as { form: FormValidationApi }).form
@@ -147,6 +158,7 @@ describe('useFormValidation', () => {
 		const componentThrowingReset: ValidatableComponent = {
 			validateOnSubmit: vi.fn(() => true),
 			reset: throwingReset,
+			$props: { label: 'Champ test reset' },
 		}
 
 		childApi.register(componentWithReset)
@@ -157,6 +169,8 @@ describe('useFormValidation', () => {
 
 		expect(resetSpy).toHaveBeenCalledTimes(1)
 		expect(throwingReset).toHaveBeenCalledTimes(1)
+		expect(warnSpy).toHaveBeenCalledWith('Error resetting field: Champ test reset', expect.any(Error))
+		warnSpy.mockRestore()
 	})
 
 	it('resetAll returns early when there are no registered components', () => {