@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -8,76 +8,23 @@
 		mdiCheck,
 		mdiInformationOutline,
 		mdiClose,
+		mdiCloseCircle,
 		mdiAlertCircle,
 		mdiCalendar,
+		mdiChevronUp,
+		mdiChevronDown,
 	} from '@mdi/js'
 	import { computed, onMounted, ref, watch, nextTick, useAttrs, type ComponentPublicInstance, toRef } from 'vue'
-	import type { IconType, VariantStyle, ColorType } from '@/types/vuetifyTypes'
+	import type { IconType } from '@/types/vuetifyTypes'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
-	import type { ValidationRule } from '@/composables/validation/useValidation'
-	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+	import { validationPropsDefaults } from '@/composables/unifyValidation/useValidation'
+	import { useSyTextFieldValidation } from './useSyTextFieldValidation'
+	import { useNumberField } from './useNumberField'
+	import { locales as defaultLocales } from './locales'
+	import type { SyTextFieldProps } from './types'
 
 	const props = withDefaults(
-		defineProps<{
-			modelValue?: string | number | null | undefined
-			prependIcon?: IconType
-			appendIcon?: IconType
-			prependInnerIcon?: IconType
-			appendInnerIcon?: IconType
-			prependTooltip?: string
-			appendTooltip?: string
-			tooltipLocation?: 'top' | 'bottom' | 'start' | 'end'
-			variantStyle?: VariantStyle
-			color?: ColorType
-			isClearable?: boolean
-			showDivider?: boolean
-			label?: string
-			readonly?: boolean
-			isActive?: boolean
-			baseColor?: string
-			bgColor?: string
-			centerAffix?: boolean
-			counter?: string | number | boolean
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-			counterValue?: number | ((value: any) => number)
-			density?: 'default' | 'comfortable' | 'compact'
-			direction?: 'horizontal' | 'vertical'
-			isDirty?: boolean
-			disabled?: boolean
-			isFlat?: boolean
-			isFocused?: boolean
-			areDetailsHidden?: boolean | 'auto'
-			areSpinButtonsHidden?: boolean
-			hint?: string
-			id?: string
-			loading?: string | boolean
-			maxWidth?: string | number
-			messages?: string | string[]
-			minWidth?: string | number
-			name?: string
-			displayPersistentClear?: boolean
-			displayPersistentCounter?: boolean
-			displayPersistentHint?: boolean
-			displayPersistentPlaceholder?: boolean
-			placeholder?: string
-			prefix?: string
-			isReversed?: boolean
-			role?: string
-			rounded?: string | number | boolean
-			isOnSingleLine?: boolean
-			suffix?: string
-			theme?: string
-			isTiled?: boolean
-			type?: string
-			width?: string | number
-			displayAsterisk?: boolean
-			noIcon?: boolean
-			disableClickButton?: boolean
-			autocomplete?: string
-			helpText?: string
-			maxlength?: string | number
-			title?: string | false
-		} & FieldValidationProps>(),
+		defineProps<SyTextFieldProps>(),
 		{
 			modelValue: undefined,
 			prependIcon: undefined,
@@ -102,7 +49,7 @@
 			isDirty: false,
 			isFlat: false,
 			isFocused: false,
-			areDetailsHidden: false,
+			hideDetails: false,
 			areSpinButtonsHidden: false,
 			hint: undefined,
 			id: undefined,
@@ -133,10 +80,14 @@
 			helpText: '',
 			maxlength: undefined,
 			title: undefined,
+			locales: () => ({}),
 			...validationPropsDefaults,
 		},
 	)
 
+	// Libellés d'accessibilité : valeurs par défaut surchargeables via la prop `locales`.
+	const locales = computed(() => ({ ...defaultLocales, ...props.locales }))
+
 	const ICONS: Record<NonNullable<IconType>, string> = {
 		info: mdiInformationOutline,
 		success: mdiCheck,
@@ -157,18 +108,41 @@
 		'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 attrs = useAttrs()
 
-	const sanitizeNumberValue = (value: string | number | null | undefined) => {
-		if (props.type !== 'number' || typeof value !== 'string') {
-			return value
-		}
+	const lastEmittedModelValue = ref(props.modelValue)
 
-		return value.replace(NUMBER_ALLOWED_CHARACTERS_PATTERN, '')
-	}
+	const model = computed({
+		get() {
+			return props.modelValue
+		},
+		set(value) {
+			const sanitizedValue = sanitizeTypedValue(value)
+			emit('update:modelValue', sanitizedValue)
+			lastEmittedModelValue.value = sanitizedValue
+		},
+	})
+
+	// Logique propre au mode number (rendu en type=text, sanitization, incrément ↑/↓ + boutons).
+	const {
+		isNumberField,
+		nativeInputType,
+		sanitizeNumberValue,
+		isAllowedNumberCharacter,
+		hasDisallowedNumberCharacter,
+		stepValue,
+		handleStepKeydown,
+	} = useNumberField({
+		type: toRef(props, 'type'),
+		disabled: toRef(props, 'disabled'),
+		readonly: toRef(props, 'readonly'),
+		model,
+		attrs,
+	})
+
+	// Filtrage des caractères du mode "tel" (analogue au mode number géré par useNumberField).
+	const TEL_ALLOWED_CHARACTERS_PATTERN = /[^0-9+().\-\s]/g
+	const TEL_ALLOWED_SINGLE_CHARACTER_PATTERN = /^[0-9+().\-\s]$/
 
 	const sanitizeTelValue = (value: string | number | null | undefined) => {
 		if (props.type !== 'tel' || typeof value !== 'string') {
@@ -182,33 +156,8 @@
 		return sanitizeTelValue(sanitizeNumberValue(value))
 	}
 
-	const lastEmittedModelValue = ref(props.modelValue)
-
-	const model = computed({
-		get() {
-			return props.modelValue
-		},
-		set(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({
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess, iconColor, clearButtonColorClass, validationIcon, hasMessages } = useSyTextFieldValidation({
 		modelValue: model,
 		readonly: toRef(props, 'readonly'),
 		disabled: toRef(props, 'disabled'),
@@ -219,10 +168,7 @@
 		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
 		label: toRef(props, 'label'),
 		rules: toRef(props, 'rules'),
-		customRules: computed(() => {
-			const customRules = props.customRules ? props.customRules : []
-			return [...defaultRules.value, ...customRules]
-		}),
+		customRules: toRef(props, 'customRules'),
 		customWarningRules: toRef(props, 'customWarningRules'),
 		customSuccessRules: toRef(props, 'customSuccessRules'),
 		errorMessages: toRef(props, 'errorMessages'),
@@ -232,7 +178,7 @@
 		hasWarningProp: toRef(props, 'hasWarning'),
 		hasSuccessProp: toRef(props, 'hasSuccess'),
 		maxErrors: toRef(props, 'maxErrors'),
-		focused: focused,
+		focused,
 	})
 
 	const forwardedAttrs = computed(() => {
@@ -268,20 +214,6 @@
 		}
 	})
 
-	const iconColor = computed(() => {
-		if (hasError.value) return 'error'
-		if (hasWarning.value) return 'warning'
-		if (hasSuccess.value) return 'success'
-		return 'rgba(0, 0, 0, 1)'
-	})
-
-	const clearButtonColorClass = computed(() => {
-		if (hasError.value) return 'error-field'
-		if (hasWarning.value) return 'warning-field'
-		if (hasSuccess.value) return 'success-field'
-		return 'text-iconBase'
-	})
-
 	const handlePrependIconClick = () => {
 		emit('prepend-icon-click')
 	}
@@ -314,11 +246,11 @@
 			return
 		}
 
-		const allowedPattern = props.type === 'number'
-			? NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN
-			: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN
+		const hasDisallowed = props.type === 'number'
+			? hasDisallowedNumberCharacter(event.data)
+			: event.data.replace(TEL_ALLOWED_CHARACTERS_PATTERN, '') !== event.data
 
-		if (!allowedPattern.test(event.data)) {
+		if (hasDisallowed) {
 			event.preventDefault()
 		}
 	}
@@ -338,25 +270,21 @@
 				'Home',
 				'End',
 			]
-			const allowedPattern = props.type === 'number'
-				? NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN
-				: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN
+			const isAllowedCharacter = props.type === 'number'
+				? isAllowedNumberCharacter(event.key)
+				: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN.test(event.key)
 
-			if (!allowedNonCharacterKeys.includes(event.key) && event.key.length === 1 && !allowedPattern.test(event.key)) {
+			if (!allowedNonCharacterKeys.includes(event.key) && event.key.length === 1 && !isAllowedCharacter) {
 				event.preventDefault()
 			}
 		}
 
+		// type=number est rendu en type=text : l'incrément clavier ↑/↓ est délégué au composable.
+		handleStepKeydown(event)
+
 		emit('keydown', event)
 	}
 
-	const validationIcon = computed(() => {
-		if (hasError.value) return ICONS['error']
-		if (hasWarning.value) return ICONS['warning']
-		if (hasSuccess.value) return ICONS['success']
-		return null
-	})
-
 	const isShouldDisplayAsterisk = computed(() => {
 		return props.displayAsterisk && props.required
 	})
@@ -365,12 +293,6 @@
 		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
 	})
 
-	// Détermine s'il y a des messages d'erreur ou d'état
-	const hasMessages = computed(() => {
-		if (props.disableErrorHandling) return false
-		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || (hasSuccess.value && props.showSuccessMessages)
-	})
-
 	// Détermine si le helpText doit être affiché à la position du message ou en dessous
 	const showHelpTextAsMessage = computed(() => {
 		// Afficher à la position du message si pas de messages d'erreur
@@ -379,7 +301,7 @@
 
 	const showHelpTextBelow = computed(() => {
 		// Afficher en dessous si il y a des messages d'erreur ET hideMessages n'est pas activé
-		return props.helpText && hasMessages.value && !props.areDetailsHidden
+		return props.helpText && hasMessages.value && !props.hideDetails
 	})
 
 	// Use title prop if provided, otherwise fall back to accessible label
@@ -634,7 +556,7 @@
 			:error-messages="errors"
 			:flat="props.isFlat"
 			:focused="props.isFocused"
-			:hide-details="props.areDetailsHidden && !showHelpTextAsMessage"
+			:hide-details="props.hideDetails"
 			:hint="showHelpTextAsMessage ? props.helpText : props.hint"
 			:label="labelWithAsterisk"
 			:loading="props.loading"
@@ -646,7 +568,7 @@
 			:name="props.name"
 			:persistent-clear="props.displayPersistentClear"
 			:persistent-counter="props.displayPersistentCounter"
-			:persistent-hint="props.displayPersistentHint || !!showHelpTextAsMessage"
+			:persistent-hint="!!showHelpTextAsMessage || props.displayPersistentHint"
 			:persistent-placeholder="props.displayPersistentPlaceholder"
 			:placeholder="props.placeholder"
 			:prefix="props.prefix"
@@ -658,8 +580,8 @@
 			:suffix="props.suffix"
 			:theme="props.theme"
 			:tile="props.isTiled"
-			:type="props.type"
-			:inputmode="props.type === 'number' ? 'decimal' : (props.type === 'tel' ? 'tel' : undefined)"
+			:type="nativeInputType"
+			:inputmode="isNumberField ? 'decimal' : (props.type === 'tel' ? 'tel' : undefined)"
 			:variant="props.variantStyle"
 			:width="props.width"
 			v-bind="forwardedAttrs"
@@ -667,7 +589,8 @@
 				'error-field': hasError,
 				'warning-field': hasWarning,
 				'success-field': hasSuccess,
-				'basic-field': !hasError && !hasWarning && !hasSuccess
+				'basic-field': !hasError && !hasWarning && !hasSuccess,
+				'help-text-as-hint': showHelpTextAsMessage,
 			}"
 			@focus="focused = true; emit('focus')"
 			@blur="focused = false; emit('blur')"
@@ -767,7 +690,6 @@
 					<SyIcon
 						v-if="props.prependInnerIcon && !props.noIcon"
 						:icon="ICONS[props.prependInnerIcon]"
-						role="presentation"
 						:decorative="true"
 					/>
 					<VDivider
@@ -785,12 +707,13 @@
 					<!-- Keyboard-focusable clear button -->
 					<VBtn
 						v-if="showClear"
-						class="v-btn v-btn--density-compact mr-1"
+						class="v-btn v-btn--density-compact mr-1 sy-text-field__clear"
 						:class="clearButtonColorClass"
-						:aria-label="props.label ? `Vider ${props.label}` : 'Vider'"
+						:aria-label="locales.clear(props.label)"
 						:title="props.label ? `Vider ${props.label}` : 'Vider'"
-						:icon="mdiClose"
+						:icon="mdiCloseCircle"
 						variant="text"
+						:ripple="false"
 						@click.stop="clearField"
 						@keydown.enter.stop
 						@keydown.space.stop
@@ -798,16 +721,44 @@
 					<SyIcon
 						v-if="validationIcon && !props.appendInnerIcon"
 						:icon="validationIcon"
-						role="presentation"
 						:decorative="true"
 					/>
 					<SyIcon
 						v-if="props.appendInnerIcon && !props.noIcon"
 						:color="iconColor"
-						role="presentation"
 						:icon="ICONS[props.appendInnerIcon]"
 						:decorative="true"
 					/>
+					<!-- Boutons d'incrément custom (remplacent le spinner natif, perdu en type=text) -->
+					<div
+						v-if="isNumberField && !props.areSpinButtonsHidden && !props.disabled && !props.readonly"
+						class="sy-text-field__spinner"
+					>
+						<button
+							type="button"
+							tabindex="-1"
+							class="sy-text-field__spinner-btn"
+							:aria-label="locales.increment(props.label)"
+							@click.stop="stepValue(1)"
+						>
+							<SyIcon
+								:icon="mdiChevronUp"
+								:decorative="true"
+							/>
+						</button>
+						<button
+							type="button"
+							tabindex="-1"
+							class="sy-text-field__spinner-btn"
+							:aria-label="locales.decrement(props.label)"
+							@click.stop="stepValue(-1)"
+						>
+							<SyIcon
+								:icon="mdiChevronDown"
+								:decorative="true"
+							/>
+						</button>
+					</div>
 				</slot>
 			</template>
 
@@ -821,7 +772,7 @@
 					indeterminate
 					rounded
 					:color="loaderColor"
-					:aria-label="props.label ? `Chargement de ${props.label}` : 'Chargement en cours'"
+					:aria-label="locales.loading(props.label)"
 				/>
 			</template>
 		</VTextField>
@@ -851,18 +802,22 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-textWarning)) !important;
+		fill: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 
-	:deep(.v-field) {
+	:deep(.v-label.v-field-label) {
 		color: rgb(var(--v-theme-borderWarning)) !important;
+	}
+
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
 			--v-field-border-opacity: 1;
 
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-onWarningVariant)) !important;
 		}
 	}
 
@@ -870,7 +825,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-onWarningVariant)) !important;
 		}
 	}
 }
@@ -878,7 +833,7 @@
 /* stylelint-disable-next-line selector-class-pattern */
 .text-iconBase {
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		fill: rgb(var(--v-theme-primary)) !important;
 	}
 }
 
@@ -890,16 +845,16 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-textError)) !important;
+		fill: rgb(var(--v-theme-error)) !important;
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 
 		.v-field__outline {
 			--v-field-border-opacity: 1;
 
-			color: rgb(var(--v-theme-borderError)) !important;
+			color: rgb(var(--v-theme-error)) !important;
 		}
 	}
 
@@ -907,7 +862,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderError)) !important;
+			color: rgb(var(--v-theme-error)) !important;
 		}
 	}
 }
@@ -920,18 +875,22 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-textSuccess)) !important;
+		fill: rgb(var(--v-theme-onSuccessVariant)) !important;
 	}
 
-	:deep(.v-field) {
+	:deep(.v-label.v-field-label) {
 		color: rgb(var(--v-theme-borderSuccess)) !important;
+	}
+
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
 			--v-field-border-opacity: 1;
 
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 
@@ -939,7 +898,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 }
@@ -950,18 +909,82 @@
 	}
 
 	:deep(.v-field--focused .v-field__outline) {
-		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		color: rgb(var(--v-theme-primary)) !important;
 		opacity: 1 !important;
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
+		outline: 2px solid rgb(var(--v-theme-primary));
 		outline-offset: 2px;
 		opacity: 1;
 	}
 }
 
+:deep(.sy-text-field__clear .v-icon__svg),
+:deep(.v-field__clearable .v-icon__svg) {
+	fill: rgba(var(--v-theme-onSurface), 0.6) !important;
+}
+
+.sy-text-field__spinner {
+	display: flex;
+	flex-direction: column;
+	align-self: center;
+	margin-left: 2px;
+}
+
+.sy-text-field__spinner-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 13px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: rgba(var(--v-theme-onSurface), 0.6);
+	cursor: pointer;
+}
+
+.sy-text-field__spinner-btn:hover {
+	color: rgb(var(--v-theme-primary));
+}
+
+.sy-text-field__spinner-btn :deep(.v-icon) {
+	width: 18px;
+	height: 18px;
+	font-size: 18px;
+}
+
+.sy-text-field__clear {
+	transition: none !important;
+}
+
+.sy-text-field__clear:hover :deep(.v-btn__overlay) {
+	opacity: 0 !important;
+}
+
+:deep(.v-field__clearable),
+:deep(.v-field__clearable *) {
+	transition: none !important;
+}
+
+:deep(.v-field__clearable .v-icon) {
+	opacity: 1 !important;
+}
+
+// Quand le helpText occupe la position du message (état neutre ou succès sans message texte),
+// il conserve sa couleur neutre quel que soit l'état du champ (ne prend pas le vert de succès).
+.help-text-as-hint {
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+		}
+	}
+}
+
 .help-text-below {
 	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
 	font-size: var(--v-fontSize-liensEtLibelles);