@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/PhoneField/PhoneField.vue

@@ -1,426 +1,161 @@
 <script lang="ts" setup>
-	import { computed, ref, watch, nextTick } from 'vue'
-	import type { PropType } from 'vue'
-	import { mdiAlertOutline, mdiCheck, mdiInformation, mdiPhone } from '@mdi/js'
-	import { indicatifs } from './indicatifs'
-	import { Mask } from 'maska'
-	import { locales } from './locales'
+	import { computed, ref, toRef, watch } from 'vue'
+	import { mdiPhone, mdiCloseCircle } from '@mdi/js'
+	import { locales as defaultLocales } from './locales'
 	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
-	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
-	import { useValidatable } from '@/composables/validation/useValidatable'
-
-	type DisplayFormat = 'code' | 'code-abbreviation' | 'code-country' | 'country' | 'abbreviation'
-	type Indicatif = {
-		code: string
-		abbreviation: string
-		country: string
-		countryFr?: string
-		mask?: string
-		phoneLength: number
-	}
-
-	const props = defineProps({
-		modelValue: { type: String, default: '' },
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		dialCodeModel: { type: [String, Object] as PropType<string | Record<string, any>>, default: '' },
-		required: { type: Boolean, default: false },
-		outlined: { type: Boolean, default: true },
-		outlinedIndicatif: { type: Boolean, default: true },
-		withCountryCode: { type: Boolean, default: false },
-		countryCodeRequired: { type: Boolean, default: false },
-		displayFormat: { type: String as PropType<DisplayFormat>, default: 'code' },
-		customIndicatifs: { type: Array as PropType<Indicatif[]>, default: () => [] },
-		useCustomIndicatifsOnly: { type: Boolean, default: false },
-		isValidatedOnBlur: { type: Boolean, default: true },
-		displayAsterisk: { type: Boolean, default: false },
-		disableErrorHandling: { type: Boolean, default: false },
-		showSuccessMessages: { type: Boolean, default: false },
-		bgColor: { type: String, default: 'white' },
-		readonly: { type: Boolean, default: false },
-		disabled: { type: Boolean, default: false },
-		helpText: { type: String, default: '' },
-		autocompleteCountryCode: { type: String, default: 'tel-country-code' },
-		autocompletePhone: { type: String, default: 'tel-national' },
-		withoutFieldset: { type: Boolean, default: false },
-	})
-
-	const emit = defineEmits(['update:modelValue', 'update:selectedDialCode', 'change'])
-
-	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)
-
-	const buildDefaultMask = (length: number): string =>
-		'#'.repeat(length || 10).replace(/(.{2})/g, '$1 ').trim()
-
-	const toTrimmedDigits = (value: string, maxDigits: number): string => {
-		return value.replace(/\D/g, '').slice(0, maxDigits)
-	}
-
-	// Cache the Mask instance — recreated only when phoneMask changes, not on every keystroke
-	const maskInstance = computed(() => new Mask({ mask: phoneMask.value }))
-	const applyMask = (digits: string): string => maskInstance.value.masked(digits)
-
-	// phoneNumber is always masked, so this is just a stable public alias
-	const computedValue = computed(() => phoneNumber.value)
-
-	watch(() => props.modelValue, (newVal) => {
-		if (newVal) {
-			// Apply mask to incoming value to ensure consistent formatting
-			const digits = toTrimmedDigits(newVal, counter.value)
-			phoneNumber.value = applyMask(digits)
-		}
-		else {
-			phoneNumber.value = ''
-		}
-	}, { immediate: true })
-
-	const isIndicatifLike = (value: unknown): value is Indicatif => {
-		return typeof value === 'object'
-			&& value !== null
-			&& 'code' in value
-			&& 'phoneLength' in value
-	}
-
-	watch(dialCode, async (newVal) => {
-		// Storybook / composants parents peuvent fournir un objet indicatif "stale" (mask/phoneLength obsolètes).
-		// On normalise donc TOUJOURS l'indicatif à partir de la liste dialCodeOptions
-		const dialCodeValue = typeof newVal === 'object' && newVal !== null
-			? newVal.code
-			: newVal
-		const resolvedDialCode = dialCodeOptions.value.find(opt => opt.code === dialCodeValue)
-			?? (isIndicatifLike(newVal) ? newVal : null)
-		const placeholdersCount = (resolvedDialCode?.mask?.match(/#/g) || []).length
-		const normalizedDialCode = resolvedDialCode
-			? {
-				...resolvedDialCode,
-				// Si le mask n'est pas cohérent avec phoneLength (ex: 10 placeholders mais phoneLength=9),
-				// on reconstruit un mask de secours à partir de phoneLength.
-				mask: resolvedDialCode.mask && placeholdersCount === resolvedDialCode.phoneLength
-					? resolvedDialCode.mask
-					: buildDefaultMask(resolvedDialCode.phoneLength),
-			}
-			: null
-
-		emit('update:selectedDialCode', normalizedDialCode ?? newVal)
-
-		if (normalizedDialCode) {
-			counter.value = normalizedDialCode.phoneLength || 10
-			phoneMask.value = normalizedDialCode.mask || buildDefaultMask(normalizedDialCode.phoneLength)
-			const digits = toTrimmedDigits(phoneNumber.value, counter.value)
-			const maskedValue = applyMask(digits)
-			phoneNumber.value = maskedValue
-			emit('update:modelValue', maskedValue)
-
-			await nextTick()
-			await nextTick()
-
-			// Le changement d'indicatif modifie les règles (longueur attendue), donc on revalide immédiatement
-			// si une valeur est déjà saisie. Objectif: messages à jour sans nécessiter un nouveau blur.
-			if (!shouldDisableErrorHandling.value && phoneNumber.value) {
-				onBlur.value = true
-				runValidation()
-			}
-		}
+	import { validationPropsDefaults } from '@/composables/unifyValidation/useValidation'
+	import type { PhoneFieldProps } from './types'
+	import { usePhoneIndicatifs } from './usePhoneIndicatifs'
+	import { vMaska } from 'maska/vue'
+	import { Mask } from 'maska'
+	import type { Indicatif } from './types'
+	import { usePhoneFieldValidation } from './usePhoneFieldValidation'
+	import FieldState from '@/components/Customs/SyTextField/FieldState.vue'
+
+	const props = withDefaults(defineProps<PhoneFieldProps>(), {
+		...validationPropsDefaults,
+		modelValue: '',
+		dialCodeModel: '',
+		outlined: true,
+		withCountryCode: false,
+		displayFormat: 'code',
+		customIndicatifs: () => [],
+		useCustomIndicatifsOnly: false,
+		displayAsterisk: true,
+		bgColor: 'white',
+		helpText: '',
+		autocompleteCountryCode: 'tel-country-code',
+		autocompletePhone: 'tel-national',
+		withoutFieldset: false,
+		isClearable: false,
+		locales: () => defaultLocales,
 	})
 
-	/**
-	 * Calcule la position ajustée du curseur en tenant compte des espaces ajoutés par le masque
-	 * @param cursorPosition - Position originale du curseur
-	 * @param originalValue - Valeur avant application du masque
-	 * @param maskedValue - Valeur après application du masque
-	 * @returns Position ajustée du curseur
-	 */
-	const calculateAdjustedPosition = (cursorPosition: number, originalValue: string, maskedValue: string): number => {
-		// Compte combien de caractères non-espace se trouvent avant la position du curseur dans la valeur originale
-		const digitsBeforeCursor = originalValue.substring(0, cursorPosition).replace(/\s/g, '').length
-
-		// Parcours la valeur masquée pour trouver la position qui contient le même nombre de caractères non-espace
-		let newPosition = 0
-		let digitCount = 0
-
-		for (let i = 0; i < maskedValue.length; i++) {
-			if (maskedValue[i] !== ' ') {
-				digitCount++
-			}
-
-			if (digitCount > digitsBeforeCursor) {
-				break
-			}
-
-			newPosition = i + 1
-		}
-
-		return newPosition
-	}
-
-	const handlePhoneInput = (event: Event) => {
-		const inputElement = event.target as HTMLInputElement
-		const input = inputElement.value
-
-		// Sauvegarder la position du curseur
-		const cursorPosition = inputElement.selectionStart || 0
-
-		// Appliquer le masque (en tronquant au nombre de chiffres attendu)
-		const digits = toTrimmedDigits(input, counter.value)
-		const maskedValue = applyMask(digits)
-
-		// Mettre à jour la valeur
-		phoneNumber.value = maskedValue
-		emit('update:modelValue', maskedValue)
-
-		// Restaurer la position du curseur sur le prochain cycle de rendu
-		nextTick(() => {
-			const adjustedPosition = calculateAdjustedPosition(cursorPosition, input, maskedValue)
-			inputElement.setSelectionRange(adjustedPosition, adjustedPosition)
-		})
-	}
-
-	const handlePhoneModelUpdate = (value: string | number | null) => {
-		const digits = toTrimmedDigits(String(value ?? ''), counter.value)
-		const maskedValue = applyMask(digits)
-		phoneNumber.value = maskedValue
-		emit('update:modelValue', maskedValue)
-	}
-
-	const handlePhoneKeydown = (event: KeyboardEvent) => {
-		if (counter.value <= 0) return
-		if (!event.key || !/\d/.test(event.key)) return
-
-		const inputElement = event.target as HTMLInputElement | null
-		const selectionStart = inputElement?.selectionStart ?? null
-		const selectionEnd = inputElement?.selectionEnd ?? null
-		const hasSelection
-			= selectionStart !== null
-				&& selectionEnd !== null
-				&& selectionEnd > selectionStart
-
-		const currentDigitsCount = phoneNumber.value.replace(/\D/g, '').length
-		if (currentDigitsCount >= counter.value && !hasSelection) {
-			event.preventDefault()
-		}
-	}
-
-	const mergedDialCodes = computed(() =>
-		props.useCustomIndicatifsOnly ? props.customIndicatifs : [...indicatifs, ...props.customIndicatifs],
-	)
-
-	const dialCodeOptions = computed(() =>
-		mergedDialCodes.value.map(ind => ({
-			...ind,
-			displayText: generateDisplayText(ind),
-			plainDisplayText: generateDisplayText(ind, true),
-		})),
+	const emits = defineEmits<{
+		'update:modelValue': [value: string]
+		'update:dialCodeModel': [value: Indicatif | string | undefined]
+	}>()
+
+	const phoneNumber = ref<string>(props.modelValue)
+	const { internalDialCode, dialCodeList } = usePhoneIndicatifs(
+		toRef(props, 'dialCodeModel'),
+		toRef(props, 'displayFormat'),
+		toRef(props, 'customIndicatifs'),
+		toRef(props, 'useCustomIndicatifsOnly'),
 	)
 
-	watch(() => props.readonly, () => {
-		if (onBlur.value && !shouldDisableErrorHandling.value) {
-			runValidation()
-		}
+	watch (phoneNumber, (newVal) => {
+		emits('update:modelValue', newVal)
 	})
 
-	const getFranceDefault = () =>
-		dialCodeOptions.value.find(opt => opt.code === '+33') ?? ''
-
-	// Watcher pour initialiser dialCode à partir de props.dialCodeModel
-	watch(() => props.dialCodeModel, (newVal) => {
-		if (!newVal) {
-			// Par défaut, pré-sélectionner la France (+33) quand l'indicatif est activé
-			dialCode.value = props.withCountryCode ? getFranceDefault() : ''
-			return
+	watch (() => props.modelValue, (newVal) => {
+		if (newVal !== phoneNumber.value) {
+			phoneNumber.value = newVal || ''
 		}
-
-		if (typeof newVal === 'object') {
-			const matchingOption = dialCodeOptions.value.find(opt => opt.code === newVal.code)
-			dialCode.value = matchingOption ?? newVal
-		}
-		else {
-			dialCode.value = newVal
-		}
-	}, { immediate: true })
-
-	function generateDisplayText(ind: Indicatif, plain = false): string {
-		const countryName = ind.countryFr || ind.country
-		const abbr = plain ? ind.abbreviation : `<abbr title="${countryName}">${ind.abbreviation}</abbr>`
-		const format: Record<DisplayFormat, string> = {
-			'code': ind.code,
-			'code-abbreviation': `${ind.code} (${abbr})`,
-			'code-country': `${ind.code} ${countryName}`,
-			'country': countryName,
-			'abbreviation': abbr,
-		}
-		return format[props.displayFormat] ?? ind.code
-	}
-
-	const phoneFieldIdentifier = computed(() => props.withCountryCode
-		? locales.phoneNumberWithoutCountryLabel
-		: locales.label,
-	)
-
-	const validationRules = computed<ValidationRule[]>(() => {
-		const rules = [{
-			type: 'exactLength',
-			options: {
-				length: counter.value,
-				ignoreSpace: true,
-				message: `Le numéro de téléphone doit contenir ${counter.value} chiffres.`,
-				successMessage: `Le champ ${phoneFieldIdentifier.value} est valide.`,
-				fieldIdentifier: phoneFieldIdentifier.value,
-			},
-		}] as ValidationRule[]
-
-		if (props.required) {
-			rules.unshift({
-				type: 'required',
-				options: {
-					length: counter.value,
-					ignoreSpace: true,
-					message: `Le champ ${phoneFieldIdentifier.value} est requis.`,
-					fieldIdentifier: phoneFieldIdentifier.value,
-				},
-			})
-		}
-
-		return rules
 	})
 
-	const shouldDisableErrorHandling = computed(() => props.disableErrorHandling || props.readonly)
-
-	// When disabling error handling, immediately clear any existing validation state
-	watch(shouldDisableErrorHandling, (disabled) => {
-		if (disabled) {
-			validation.clearValidation()
-		}
+	watch (internalDialCode, (newVal) => {
+		emits('update:dialCodeModel', newVal)
 	})
 
-	const validation = useValidation({
-		showSuccessMessages: props.showSuccessMessages,
-		disableErrorHandling: shouldDisableErrorHandling.value,
-	})
-
-	const hasError = computed(() => !shouldDisableErrorHandling.value && validation.hasError.value)
-	const hasWarning = computed(() => !shouldDisableErrorHandling.value && validation.hasWarning.value)
-	const hasSuccess = computed(() =>
-		!shouldDisableErrorHandling.value
-		&& !hasError.value
-		&& !hasWarning.value
-		&& validation.hasSuccess.value,
-	)
-
-	const iconColor = computed(() => {
-		if (shouldDisableErrorHandling.value) return '#222324'
-		if (hasError.value) return 'error'
-		if (hasWarning.value) return 'warning'
-		if (hasSuccess.value) return 'success'
-		return '#222324'
-	})
-
-	const errors = computed(() => shouldDisableErrorHandling.value ? [] : validation.errors.value)
-	const warnings = computed(() => shouldDisableErrorHandling.value ? [] : validation.warnings.value)
-	const successes = computed(() =>
-		shouldDisableErrorHandling.value || hasError.value || hasWarning.value
-			? []
-			: validation.displaySuccesses.value,
-	)
-
 	const showHelpTextBelow = computed(() => !!props.helpText?.trim())
+	const focused = ref(false)
 
-	const runValidation = async (): Promise<void> => {
-		const cleanedValue = phoneNumber.value.replace(/\s/g, '')
-		await validation.validateField(cleanedValue, validationRules.value)
-	}
-
-	function validateInputOnBlur() {
-		emit('change', phoneNumber.value)
-
-		if (!props.isValidatedOnBlur || shouldDisableErrorHandling.value) return
+	const {
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		state,
+		iconColor,
+		validate,
+		clearValidation,
+	} = usePhoneFieldValidation({
+		modelValue: phoneNumber,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		counter: computed(() => internalDialCode.value.phoneLength || 10),
+		phoneFieldIdentifier: computed(() => props.withCountryCode ? props.locales?.phoneNumberWithoutCountryLabel || 'Numéro de téléphone' : props.locales?.label || 'Téléphone'),
+		shouldDisableErrorHandling: computed(() => props.disableErrorHandling || props.readonly),
+		hasError: toRef(props, 'hasError'),
+		hasWarning: toRef(props, 'hasWarning'),
+		hasSuccess: toRef(props, 'hasSuccess'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		focused,
+		customRules: toRef(props, 'customRules'),
+		warningRules: toRef(props, 'customWarningRules'),
+		successRules: toRef(props, 'customSuccessRules'),
+		rules: toRef(props, 'rules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		locales: toRef(props, 'locales'),
+		dialCode: internalDialCode,
+		withCountryCode: toRef(props, 'withCountryCode'),
+	})
 
-		onBlur.value = true
-		runValidation()
+	const validation = {
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
 	}
 
-	watch(phoneNumber, async (newValue) => {
-		if (shouldDisableErrorHandling.value) return
+	const phoneMask = computed(() => internalDialCode.value.mask)
 
-		if (!props.isValidatedOnBlur) {
-			// Validation en temps réel (isValidatedOnBlur=false)
-			const cleanedValue = newValue.replace(/\s/g, '')
-			await validation.validateField(cleanedValue, validationRules.value)
-		}
-		else if (onBlur.value) {
-			// Après un premier blur, effacer les erreurs pendant la frappe —
-			// la revalidation se fera au prochain blur (comme SyTextField)
-			validation.clearValidation()
-		}
-	})
+	// Rattrape l'autofill du navigateur : avec un champ indicatif séparé, le navigateur
+	// remplit `tel-national` sans le préfixe national « 0 » (ex. « 612345678 »). On le détecte
+	// via un saut du nombre de chiffres (≠ frappe au clavier) et on repréfixe « 0 ».
+	const maskInstance = computed(() => new Mask({ mask: phoneMask.value }))
+	const previousDigitCount = ref(0)
 
-	watch(validationRules, () => {
-		if (onBlur.value && !shouldDisableErrorHandling.value) {
-			runValidation()
-		}
-	})
+	function handleNumberInput(event: Event) {
+		const target = event.target as HTMLInputElement | null
+		if (!target) return
 
-	/**
-	 * Valide le champ lors de la soumission d'un formulaire
-	 * @returns Promise<boolean> - true si le champ est valide, false sinon
-	 */
-	const validateOnSubmit = async (): Promise<boolean> => {
-		if (shouldDisableErrorHandling.value) {
-			return true
-		}
+		const digits = target.value.replace(/\D/g, '')
+		const jumped = digits.length - previousDigitCount.value > 1
+		previousDigitCount.value = digits.length
 
-		onBlur.value = true
-		await runValidation()
-
-		if (props.withCountryCode && props.countryCodeRequired && !dialCode.value) {
-			validation.errors.value.push(`Le champ ${locales.indicatifLabel} est requis.`)
+		const expectedLength = internalDialCode.value.phoneLength || 10
+		if (props.withCountryCode && jumped && digits.length === expectedLength - 1 && !digits.startsWith('0')) {
+			const normalized = maskInstance.value.masked(`0${digits}`)
+			phoneNumber.value = normalized
+			previousDigitCount.value = expectedLength
 		}
-
-		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()
+	const showClear = computed(() => {
+		if (!props.isClearable) return false
+		if (props.disabled) return false
+		return phoneNumber.value !== undefined && phoneNumber.value !== null && String(phoneNumber.value) !== ''
+	})
 
-		// Clear content
+	function clearField() {
 		phoneNumber.value = ''
-		emit('update:modelValue', '')
-
-		// Reset dial code : France par défaut si indicatif activé, sinon vide
-		const defaultDialCode = props.withCountryCode ? getFranceDefault() : ''
-		dialCode.value = defaultDialCode
-		emit('update:selectedDialCode', defaultDialCode)
-		counter.value = 10
-		phoneMask.value = '## ## ## ## ##'
-
-		// Force SySelect to be recreated to ensure internal classes are reset
-		dialSelectKey.value++
+		clearValidation()
 	}
 
-	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit, validation.clearValidation, reset)
-
 	defineExpose({
-		computedValue,
-		dialCode,
-		phoneMask,
-		counter,
+		dialCodeList,
 		hasError,
-		phoneNumber,
-		mergedDialCodes,
+		errors,
 		validation,
-		validateOnSubmit,
+		validateOnSubmit: validate,
+		phoneMask,
+		clearValidation,
 	})
+
 </script>
 
 <template>
@@ -440,24 +175,20 @@
 				class="phone-field-country"
 			>
 				<SySelect
-					:key="dialSelectKey"
-					v-model="dialCode"
-					:items="dialCodeOptions"
+					v-model="internalDialCode"
+					:items="dialCodeList"
 					:label="locales.indicatifLabel"
-					:outlined="outlinedIndicatif"
-					:required="countryCodeRequired"
-					:aria-required="countryCodeRequired"
-					:error="!!errors[1]"
-					:error-messages="errors[1] ? [errors[1]] : []"
-					:display-asterisk="displayAsterisk"
-					:disable-error-handling="shouldDisableErrorHandling"
+					:outlined="props.outlined"
+					:aria-required="true"
+					:display-asterisk="props.displayAsterisk"
+					:disable-error-handling="props.disableErrorHandling || props.readonly"
+					:bg-color="props.bgColor"
+					:readonly="props.readonly"
+					:disabled="props.disabled"
+					:autocomplete="props.autocompleteCountryCode"
 					:return-object="true"
-					:bg-color="bgColor"
-					:readonly="readonly"
-					:disabled="disabled"
-					:allow-html="displayFormat === 'code-abbreviation' || displayFormat === 'abbreviation'"
-					:autocomplete="autocompleteCountryCode"
-					class="custom-select mr-0 mr-sm-4"
+					:allow-html="true"
+					class="dial-code-select mr-0 mr-sm-4"
 					text-key="displayText"
 					plain-text-key="plainDisplayText"
 					value-key="code"
@@ -465,25 +196,26 @@
 			</div>
 			<div class="phone-field-number">
 				<SyTextField
-					ref="phoneField"
-					:model-value="phoneNumber"
-					:counter="counter"
+					v-model="phoneNumber"
+					v-maska="internalDialCode.mask"
+					:counter="internalDialCode.phoneLength"
 					:counter-value="(value: string) => value.replace(/\D/g, '').length"
 					:label="withCountryCode ? locales.phoneNumberWithoutCountryLabel : locales.label"
-					:required="required"
-					:aria-required="required"
+					:required="props.required"
+					:aria-required="props.required"
 					:error="hasError"
 					:error-messages="errors"
 					:warning-messages="warnings"
 					:success-messages="successes"
 					:show-success-messages="props.showSuccessMessages"
-					:disable-error-handling="shouldDisableErrorHandling"
-					:variant="outlined ? 'outlined' : 'underlined'"
-					:display-asterisk="displayAsterisk"
-					:readonly="readonly"
-					:bg-color="bgColor"
-					:disabled="disabled"
-					:autocomplete="autocompletePhone"
+					:disable-error-handling="props.disableErrorHandling || props.readonly"
+					:variant="props.outlined ? 'outlined' : 'underlined'"
+					:display-asterisk="props.displayAsterisk"
+					:readonly="props.readonly"
+					:bg-color="props.bgColor"
+					:disabled="props.disabled"
+					:hide-details="props.hideDetails"
+					:autocomplete="props.autocompletePhone"
 					:class="{
 						'phone-field': true,
 						'error-field': hasError,
@@ -492,30 +224,31 @@
 					}"
 					color="primary"
 					type="tel"
-					@blur="validateInputOnBlur"
-					@update:model-value="handlePhoneModelUpdate"
-					@input="handlePhoneInput"
-					@keydown="handlePhoneKeydown"
+					@input="handleNumberInput"
+					@focus="focused = true"
+					@blur="focused = false"
 				>
 					<template #append-inner>
 						<div class="d-flex align-center">
-							<SyIcon
-								v-if="hasError"
-								color="error"
-								:icon="mdiInformation"
-								decorative
-							/>
-							<SyIcon
-								v-else-if="hasWarning"
-								color="warning"
-								:icon="mdiAlertOutline"
-								decorative
-							/>
-							<SyIcon
-								v-else-if="hasSuccess"
-								color="success"
-								:icon="mdiCheck"
-								decorative
+							<button
+								v-if="showClear"
+								type="button"
+								class="phone-field__clear-button mr-1"
+								:aria-label="props.label ? locales.clearButtonAriaLabelWithField(props.label) : locales.clearButtonAriaLabel"
+								:title="props.label ? locales.clearButtonTitleWithField(props.label) : locales.clearButtonTitle"
+								@click.stop="clearField"
+								@keydown.enter.stop
+								@keydown.space.stop
+							>
+								<SyIcon
+									class="phone-field__clear-icon"
+									:icon="mdiCloseCircle"
+									:decorative="true"
+									width="24"
+								/>
+							</button>
+							<FieldState
+								:state="state"
 							/>
 							<SyIcon
 								class="ml-2"
@@ -598,7 +331,7 @@
 		flex: 1 1 auto;
 	}
 
-	.custom-select {
+	.dial-code-select {
 		margin-bottom: 0;
 		min-width: 144px;
 	}
@@ -630,4 +363,37 @@
 		opacity: 0.38;
 	}
 }
+
+.phone-field__clear-button {
+	background: transparent;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.v-icon {
+		position: static;
+	}
+}
+
+.phone-field__clear-icon {
+	color: rgb(var(--v-theme-onSurface)) !important;
+	opacity: var(--v-medium-emphasis-opacity) !important;
+}
+
+/* Icône de validation (état) : atténuée à ~0.6 sur PhoneField */
+.phone-field-number :deep(.field-state-icon .v-icon__svg) {
+	opacity: 0.6 !important;
+}
+
+/* …sauf en erreur, où l'icône reste à pleine opacité comme sur les autres composants */
+.phone-field-number :deep(.error-icon .v-icon__svg) {
+	opacity: 1 !important;
+}
+
+:deep(.phone-field__clear-icon .v-icon__svg) {
+	fill: rgb(var(--v-theme-onSurface)) !important;
+}
 </style>