@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -11,15 +11,15 @@
 		mdiAlertCircle,
 		mdiCalendar,
 	} from '@mdi/js'
-	import { computed, onMounted, ref, watch, nextTick, useAttrs, type ComponentPublicInstance } from 'vue'
+	import { computed, onMounted, ref, watch, nextTick, useAttrs, type ComponentPublicInstance, toRef } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from '@/types/vuetifyTypes'
-	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
-	import { useValidatable } from '@/composables/validation/useValidatable'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import type { ValidationRule } from '@/composables/validation/useValidation'
+	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
 
 	const props = withDefaults(
 		defineProps<{
-			modelValue?: string | number | null
+			modelValue?: string | number | null | undefined
 			prependIcon?: IconType
 			appendIcon?: IconType
 			prependInnerIcon?: IconType
@@ -32,10 +32,6 @@
 			isClearable?: boolean
 			showDivider?: boolean
 			label?: string
-			required?: boolean
-			errorMessages?: string[] | null
-			warningMessages?: string[] | null
-			successMessages?: string[] | null
 			readonly?: boolean
 			isActive?: boolean
 			baseColor?: string
@@ -56,7 +52,6 @@
 			hint?: string
 			id?: string
 			loading?: string | boolean
-			maxErrors?: string | number
 			maxWidth?: string | number
 			messages?: string | string[]
 			minWidth?: string | number
@@ -70,9 +65,6 @@
 			isReversed?: boolean
 			role?: string
 			rounded?: string | number | boolean
-			hasError?: boolean
-			hasWarning?: boolean
-			hasSuccess?: boolean
 			isOnSingleLine?: boolean
 			suffix?: string
 			theme?: string
@@ -81,18 +73,12 @@
 			width?: string | number
 			displayAsterisk?: boolean
 			noIcon?: boolean
-			customRules?: ValidationRule[]
-			customWarningRules?: ValidationRule[]
-			customSuccessRules?: ValidationRule[]
-			showSuccessMessages?: boolean
-			isValidateOnBlur?: boolean
-			disableErrorHandling?: boolean
 			disableClickButton?: boolean
 			autocomplete?: string
 			helpText?: string
 			maxlength?: string | number
 			title?: string | false
-		}>(),
+		} & FieldValidationProps>(),
 		{
 			modelValue: undefined,
 			prependIcon: undefined,
@@ -105,10 +91,6 @@
 			variantStyle: 'outlined',
 			color: 'primary',
 			label: '',
-			errorMessages: null,
-			warningMessages: null,
-			successMessages: null,
-			readonly: false,
 			isClearable: false,
 			isActive: false,
 			baseColor: undefined,
@@ -119,7 +101,6 @@
 			density: 'default',
 			direction: 'horizontal',
 			isDirty: false,
-			disabled: false,
 			isOnError: false,
 			isFlat: false,
 			isFocused: false,
@@ -128,13 +109,10 @@
 			hint: undefined,
 			id: undefined,
 			loading: false,
-			maxErrors: undefined,
 			maxWidth: undefined,
 			messages: undefined,
 			minWidth: undefined,
 			name: undefined,
-			hasError: false,
-			hasWarning: false,
 			displayPersistentClear: false,
 			displayPersistentCounter: false,
 			displayPersistentHint: false,
@@ -152,17 +130,12 @@
 			width: undefined,
 			displayAsterisk: false,
 			noIcon: false,
-			customRules: () => [],
-			customWarningRules: () => [],
-			customSuccessRules: () => [],
-			showSuccessMessages: true,
-			isValidateOnBlur: true,
-			disableErrorHandling: false,
 			disableClickButton: true,
 			autocomplete: 'off',
 			helpText: '',
 			maxlength: undefined,
 			title: undefined,
+			...validationPropsDefaults,
 		},
 	)
 
@@ -182,8 +155,35 @@
 		'clear',
 		'prepend-icon-click',
 		'append-icon-click',
+		'focus',
+		'blur',
 	])
 
+	const NUMBER_ALLOWED_CHARACTERS_PATTERN = /[^0-9eE+.-]/g
+	const NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN = /^[0-9eE+.-]$/
+	const TEL_ALLOWED_CHARACTERS_PATTERN = /[^0-9+().\-\s]/g
+	const TEL_ALLOWED_SINGLE_CHARACTER_PATTERN = /^[0-9+().\-\s]$/
+
+	const sanitizeNumberValue = (value: string | number | null | undefined) => {
+		if (props.type !== 'number' || typeof value !== 'string') {
+			return value
+		}
+
+		return value.replace(NUMBER_ALLOWED_CHARACTERS_PATTERN, '')
+	}
+
+	const sanitizeTelValue = (value: string | number | null | undefined) => {
+		if (props.type !== 'tel' || typeof value !== 'string') {
+			return value
+		}
+
+		return value.replace(TEL_ALLOWED_CHARACTERS_PATTERN, '')
+	}
+
+	const sanitizeTypedValue = (value: string | number | null | undefined) => {
+		return sanitizeTelValue(sanitizeNumberValue(value))
+	}
+
 	const lastEmittedModelValue = ref(props.modelValue)
 
 	const model = computed({
@@ -191,12 +191,51 @@
 			return props.modelValue
 		},
 		set(value) {
-			emit('update:modelValue', value)
-			lastEmittedModelValue.value = value
+			const sanitizedValue = sanitizeTypedValue(value)
+			emit('update:modelValue', sanitizedValue)
+			lastEmittedModelValue.value = sanitizedValue
 		},
 	})
 
 	const attrs = useAttrs()
+	const focused = ref(false)
+	// Construction des règles de validation
+	const defaultRules = computed<ValidationRule[]>(() => props.required
+		? [{
+			type: 'required',
+			options: {
+				message: `Le champ ${props.label || 'ce champ'} est requis.`,
+				fieldIdentifier: props.label,
+			},
+		}]
+		: [],
+	)
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: model,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: toRef(props, 'label'),
+		rules: toRef(props, 'rules'),
+		customRules: computed(() => {
+			const customRules = props.customRules ? props.customRules : []
+			return [...defaultRules.value, ...customRules]
+		}),
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused: focused,
+	})
 
 	const forwardedAttrs = computed(() => {
 		const filteredAttrs = Object.fromEntries(
@@ -215,8 +254,6 @@
 		return filteredAttrs
 	})
 
-	const isBlurred = ref(false)
-
 	const showClear = computed(() => {
 		if (!props.isClearable) return false
 		if (props.disabled) return false
@@ -227,102 +264,12 @@
 		model.value = ''
 	}
 
-	// Initialisation du composable de validation
-	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.label,
-		disableErrorHandling: props.disableErrorHandling,
-	})
-
-	// Synchronisation des messages externes
-	watch(() => props.errorMessages, (newVal) => {
-		validation.errors.value = newVal || []
-	}, { immediate: true })
-
-	watch(() => props.warningMessages, (newVal) => {
-		validation.warnings.value = newVal || []
-	}, { immediate: true })
-
-	watch(() => props.successMessages, (newVal) => {
-		validation.successes.value = newVal || []
-	}, { immediate: true })
-
-	// Construction des règles de validation
-	const defaultRules = computed<ValidationRule[]>(() => props.required
-		? [{
-			type: 'required',
-			options: {
-				message: `Le champ ${props.label || 'ce champ'} est requis.`,
-				fieldIdentifier: props.label,
-			},
-		}]
-		: [],
-	)
-
-	// Check if customRules contains a 'required' rule
-	const hasCustomRequiredRule = () => {
-		return props.customRules.some(rule => rule.type === 'required')
-	}
-
-	const validateField = (value: string | number | null) => {
-		if (props.readonly) {
-			validation.clearValidation()
-			return true
-		}
-
-		// Don't short-circuit if a custom required rule exists
-		if (!value && !props.required && !hasCustomRequiredRule()) {
-			validation.clearValidation()
-			return true
-		}
-
-		const result = validation.validateField(
-			value,
-			[...defaultRules.value, ...props.customRules],
-			props.customWarningRules,
-		)
-
-		return !result.hasError
-	}
-
-	const validateOnSubmit = () => {
-		isBlurred.value = true
-		return validateField(model.value ?? null)
-	}
-
-	const checkErrorOnBlur = () => {
-		isBlurred.value = true
-		validateField(model.value ?? null)
-		if (model.value !== lastEmittedModelValue.value) {
-			emit('update:modelValue', model.value)
-			lastEmittedModelValue.value = model.value
-		}
-	}
-
 	watch(model, (newValue) => {
-		if (!props.isValidateOnBlur) {
-			validateField(newValue ?? null)
-		}
 		if (props.isClearable && newValue === '') {
 			emit('clear')
 		}
 	})
 
-	const hasError = computed(() =>
-		validation.hasError.value
-		|| (props.errorMessages?.length ?? 0) > 0
-		|| props.hasError,
-	)
-	const hasWarning = computed(() => validation.hasWarning.value || props.hasWarning)
-	const hasSuccess = computed(() => ((validation.hasSuccess.value && !hasError.value && !hasWarning.value) || props.hasSuccess) && props.showSuccessMessages)
-
-	const errors = computed(() => [...validation.errors.value, ...(props.errorMessages || [])])
-	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
-
 	const iconColor = computed(() => {
 		if (hasError.value) return 'error'
 		if (hasWarning.value) return 'warning'
@@ -338,6 +285,66 @@
 		emit('append-icon-click')
 	}
 
+	const handleInput = (event: Event) => {
+		if (props.type === 'number' || props.type === 'tel') {
+			const target = event.target as HTMLInputElement | null
+
+			if (target) {
+				const sanitizedValue = sanitizeTypedValue(target.value)
+				if (typeof sanitizedValue === 'string' && target.value !== sanitizedValue) {
+					target.value = sanitizedValue
+				}
+			}
+		}
+
+		emit('input', event)
+	}
+
+	const handleBeforeInput = (event: InputEvent) => {
+		if (props.type !== 'number' && props.type !== 'tel') {
+			return
+		}
+
+		if (!event.data) {
+			return
+		}
+
+		const allowedPattern = props.type === 'number'
+			? NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN
+			: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN
+
+		if (!allowedPattern.test(event.data)) {
+			event.preventDefault()
+		}
+	}
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if ((props.type === 'number' || props.type === 'tel') && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			const allowedNonCharacterKeys = [
+				'Backspace',
+				'Delete',
+				'Tab',
+				'Escape',
+				'Enter',
+				'ArrowLeft',
+				'ArrowRight',
+				'ArrowUp',
+				'ArrowDown',
+				'Home',
+				'End',
+			]
+			const allowedPattern = props.type === 'number'
+				? NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN
+				: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN
+
+			if (!allowedNonCharacterKeys.includes(event.key) && event.key.length === 1 && !allowedPattern.test(event.key)) {
+				event.preventDefault()
+			}
+		}
+
+		emit('keydown', event)
+	}
+
 	const validationIcon = computed(() => {
 		if (hasError.value) return ICONS['error']
 		if (hasWarning.value) return ICONS['warning']
@@ -402,9 +409,6 @@
 
 	const syTextFieldRef = ref<ComponentPublicInstance | null>(null)
 
-	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit, validation.clearValidation)
-
 	onMounted(() => {
 		nextTick(() => {
 			const removeSvgRole = () => {
@@ -596,9 +600,7 @@
 	})
 
 	defineExpose({
-		validation,
-		validateOnSubmit,
-		checkErrorOnBlur,
+		validateOnSubmit: validate,
 	})
 </script>
 
@@ -652,6 +654,7 @@
 			:theme="props.theme"
 			:tile="props.isTiled"
 			:type="props.type"
+			:inputmode="props.type === 'number' ? 'decimal' : (props.type === 'tel' ? 'tel' : undefined)"
 			:variant="props.variantStyle"
 			:width="props.width"
 			v-bind="forwardedAttrs"
@@ -661,9 +664,11 @@
 				'success-field': hasSuccess,
 				'basic-field': !hasError && !hasWarning && !hasSuccess
 			}"
-			@blur="checkErrorOnBlur"
-			@input="(e: Event) => emit('input', e)"
-			@keydown="(e: KeyboardEvent) => emit('keydown', e)"
+			@focus="focused = true; emit('focus')"
+			@blur="focused = false; emit('blur')"
+			@beforeinput="handleBeforeInput"
+			@input="handleInput"
+			@keydown="handleKeydown"
 		>
 			<!-- Prepend -->
 			<template
@@ -826,14 +831,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
-// :deep(.v-field__input input::placeholder),
-// :deep(input.v-field__input::placeholder),
-// :deep(textarea.v-field__input::placeholder) {
-// 	opacity: 0;
-// }
-
 .sy-textfield-container {
 	display: flex;
 	flex-direction: column;
@@ -848,14 +845,14 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: tokens.$colors-text-warning !important;
+		fill: rgb(var(--v-theme-textWarning)) !important;
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -863,7 +860,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -876,10 +873,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-error !important;
+			color: rgb(var(--v-theme-borderError)) !important;
 		}
 	}
 
@@ -887,7 +884,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-error !important;
+			color: rgb(var(--v-theme-borderError)) !important;
 		}
 	}
 }
@@ -900,16 +897,16 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: tokens.$colors-text-success !important;
+		fill: rgb(var(--v-theme-textSuccess)) !important;
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -917,7 +914,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }
@@ -928,13 +925,13 @@
 	}
 
 	:deep(.v-field--focused .v-field__outline) {
-		color: tokens.$primary-base !important;
+		color: rgb(var(--v-theme-accentPrimary)) !important;
 		opacity: 1 !important;
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid tokens.$primary-base;
+		outline: 2px solid rgb(var(--v-theme-accentPrimary));
 		outline-offset: 2px;
 		opacity: 1;
 	}

package/src/components/Customs/SyTextField/tests/SyTextField.a11y.spec.ts

@@ -39,4 +39,36 @@ describe('SyTextField – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations for number input', async () => {
+		const wrapper = mount(SyTextField, {
+			props: {
+				label: 'Montant',
+				modelValue: '12.5',
+				type: 'number',
+				helpText: 'Saisissez un montant numerique',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextField – number input', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations for tel input', async () => {
+		const wrapper = mount(SyTextField, {
+			props: {
+				label: 'Telephone',
+				modelValue: '+33 1 23 45 67 89',
+				type: 'tel',
+				helpText: 'Saisissez un numero de telephone',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextField – tel input', {
+			ignoreRules: ['region'],
+		})
+	})
 })