@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/Customs/SyTextField/locales.ts

@@ -0,0 +1,12 @@
+export const locales = {
+	// Bouton d'incrément du mode number (spinner ↑)
+	increment: (label?: string) => (label ? `Augmenter ${label}` : 'Augmenter'),
+	// Bouton de décrément du mode number (spinner ↓)
+	decrement: (label?: string) => (label ? `Diminuer ${label}` : 'Diminuer'),
+	// Bouton de réinitialisation du champ
+	clear: (label?: string) => (label ? `Vider ${label}` : 'Vider'),
+	// Barre de progression affichée pendant le chargement
+	loading: (label?: string) => (label ? `Chargement de ${label}` : 'Chargement en cours'),
+}
+
+export type SyTextFieldLocales = typeof locales

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

@@ -1,9 +1,16 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 import { VIcon } from 'vuetify/components'
+import { ref } from 'vue'
 
 import SyTextField from '../SyTextField.vue'
-import type { IconType } from '../types'
+import type { IconType, SyTextFieldProps } from '../types'
+import { SyForm } from '@/components'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface SyFormInstance extends Record<string, any> {
+	validate: () => Promise<boolean>
+}
 
 describe('SyTextField', () => {
 	let wrapper: ReturnType<typeof mount<typeof SyTextField>>
@@ -71,28 +78,28 @@ describe('SyTextField', () => {
 		wrapper = mount(SyTextField, {
 			props: { appendInnerIcon: 'success' as IconType, label: 'Test Field' },
 		})
-		expect(wrapper.props('appendInnerIcon')).toBe('success')
+		expect((wrapper.vm.$props as SyTextFieldProps).appendInnerIcon).toBe('success')
 	})
 
 	it('should update icon when validation state changes with warning', async () => {
 		wrapper = mount(SyTextField, {
 			props: { appendInnerIcon: 'warning' as IconType, label: 'Test Field' },
 		})
-		expect(wrapper.props('appendInnerIcon')).toBe('warning')
+		expect((wrapper.vm.$props as SyTextFieldProps).appendInnerIcon).toBe('warning')
 	})
 
 	it('should update icon when validation state changes with error', async () => {
 		wrapper = mount(SyTextField, {
 			props: { appendInnerIcon: 'error' as IconType, label: 'Test Field' },
 		})
-		expect(wrapper.props('appendInnerIcon')).toBe('error')
+		expect((wrapper.vm.$props as SyTextFieldProps).appendInnerIcon).toBe('error')
 	})
 
 	it('should update icon when validation state changes with success', async () => {
 		wrapper = mount(SyTextField, {
 			props: { appendInnerIcon: 'success' as IconType, label: 'Test Field' },
 		})
-		expect(wrapper.props('appendInnerIcon')).toBe('success')
+		expect((wrapper.vm.$props as SyTextFieldProps).appendInnerIcon).toBe('success')
 	})
 
 	it('emits prepend-icon-click event when prepend icon is clicked', async () => {
@@ -181,7 +188,7 @@ describe('SyTextField', () => {
 			props: { customRules: [customRule], label: 'Test Field' },
 		})
 
-		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.setProps({ modelValue: 'ab' } as Parameters<typeof wrapper.setProps>[0])
 		await wrapper.find('input').trigger('focus')
 		await wrapper.vm.$nextTick()
 		await wrapper.find('input').trigger('blur')
@@ -297,6 +304,7 @@ describe('SyTextField', () => {
 		})
 
 		const input = wrapper.find('input')
+		const inputElement = input.element as HTMLInputElement
 		const event = new InputEvent('beforeinput', {
 			data: 'a',
 			cancelable: true,
@@ -304,8 +312,109 @@ describe('SyTextField', () => {
 		})
 
 		input.element.dispatchEvent(event)
+		await wrapper.vm.$nextTick()
 
 		expect(event.defaultPrevented).toBe(true)
+		// Le caractère interdit n'est pas inséré : le champ reste vide
+		expect(inputElement.value).toBe('')
+	})
+
+	it('allows multi-character beforeinput data when type is number (spinner increment / paste)', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Test Field',
+				type: 'number',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const inputElement = input.element as HTMLInputElement
+		// Ex. incrément du spinner 9 -> 10, ou collage d'un nombre : data = "10"
+		const event = new InputEvent('beforeinput', {
+			data: '10',
+			cancelable: true,
+			bubbles: true,
+		})
+
+		input.element.dispatchEvent(event)
+
+		expect(event.defaultPrevented).toBe(false)
+
+		// La saisie n'étant pas bloquée, le navigateur l'applique : le champ la conserve telle quelle
+		inputElement.value = '10'
+		await input.trigger('input')
+		await wrapper.vm.$nextTick()
+
+		expect(inputElement.value).toBe('10')
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10'])
+	})
+
+	it('collapses multiple decimal separators when type is number', async () => {
+		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field', type: 'number' },
+		})
+
+		const input = wrapper.find('input')
+		const inputElement = input.element as HTMLInputElement
+		inputElement.value = '32323.....2332...32.32.323'
+
+		await input.trigger('input')
+
+		// Un seul séparateur décimal conservé (préfixe de nombre valide)
+		expect(inputElement.value).toBe('32323.')
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['32323.'])
+	})
+
+	it('renders as a text input (with inputmode decimal) when type is number', () => {
+		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field', type: 'number' },
+		})
+		const input = wrapper.find('input')
+		expect(input.attributes('type')).toBe('text')
+		expect(input.attributes('inputmode')).toBe('decimal')
+	})
+
+	describe('number increment buttons', () => {
+		it('increments via the up button', async () => {
+			wrapper = mount(SyTextField, {
+				props: { label: 'Test Field', type: 'number', modelValue: '5' },
+			})
+			await wrapper.find('button[aria-label="Augmenter Test Field"]').trigger('click')
+			expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['6'])
+		})
+
+		it('decrements via the down button', async () => {
+			wrapper = mount(SyTextField, {
+				props: { label: 'Test Field', type: 'number', modelValue: '5' },
+			})
+			await wrapper.find('button[aria-label="Diminuer Test Field"]').trigger('click')
+			expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['4'])
+		})
+
+		it('increments with the ArrowUp key', async () => {
+			wrapper = mount(SyTextField, {
+				props: { label: 'Test Field', type: 'number', modelValue: '5' },
+			})
+			await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+			expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['6'])
+		})
+
+		it('respects step and clamps to max', async () => {
+			wrapper = mount(SyTextField, {
+				props: { label: 'Test Field', type: 'number', modelValue: '0.2' },
+				attrs: { step: 0.1, max: 0.25 },
+			})
+			await wrapper.find('button[aria-label="Augmenter Test Field"]').trigger('click')
+			// 0.2 + 0.1 = 0.3 -> plafonné à 0.25
+			expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['0.25'])
+		})
+
+		it('hides the increment buttons when areSpinButtonsHidden is true', () => {
+			wrapper = mount(SyTextField, {
+				props: { label: 'Test Field', type: 'number', areSpinButtonsHidden: true },
+			})
+			expect(wrapper.find('button[aria-label="Augmenter Test Field"]').exists()).toBe(false)
+		})
 	})
 
 	it('filters alphabetic characters when type is tel', async () => {
@@ -346,6 +455,26 @@ describe('SyTextField', () => {
 		expect(event.defaultPrevented).toBe(true)
 	})
 
+	it('allows multi-character beforeinput data when type is tel (paste)', () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Telephone',
+				type: 'tel',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const event = new InputEvent('beforeinput', {
+			data: '+33 6 12',
+			cancelable: true,
+			bubbles: true,
+		})
+
+		input.element.dispatchEvent(event)
+
+		expect(event.defaultPrevented).toBe(false)
+	})
+
 	it('validates field immediately when isValidateOnBlur is false', async () => {
 		const customRule = {
 			type: 'custom',
@@ -364,7 +493,7 @@ describe('SyTextField', () => {
 			},
 		})
 
-		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.setProps({ modelValue: 'ab' } as Parameters<typeof wrapper.setProps>[0])
 		await wrapper.vm.$nextTick()
 
 		// settle all pending promises to ensure validation has completed
@@ -377,7 +506,7 @@ describe('SyTextField', () => {
 		expect(messages.text()).toContain('Test error message')
 
 		// Vérifie que l'erreur disparaît quand la valeur devient valide
-		await wrapper.setProps({ modelValue: 'abc' })
+		await wrapper.setProps({ modelValue: 'abc' } as Parameters<typeof wrapper.setProps>[0])
 		await wrapper.vm.$nextTick()
 
 		// the async validation should have updated the error messages, so we wait for the next tick before checking the messages again
@@ -390,4 +519,41 @@ describe('SyTextField', () => {
 
 		expect(messages.text()).not.toContain('Test error message')
 	})
+
+	it('s\'enregistre auprès d\'un SyForm parent et déclenche la validation à la soumission', async () => {
+		const wrapper = mount({
+			components: { SyForm, SyTextField },
+			template: `
+        <SyForm ref="form">
+          <SyTextField v-model="value" label="Nom" required />
+        </SyForm>
+      `,
+			setup() {
+				return { value: ref('') }
+			},
+		})
+
+		const form = wrapper.getComponent(SyForm)
+		const isValid = await (form.vm as unknown as SyFormInstance).validate()
+		await flushPromises()
+
+		expect(isValid).toBe(false) // champ requis vide
+		expect(wrapper.find('.v-messages__message').exists()).toBe(true)
+	})
+
+	it('does not show error messages when hideDetails is true even with validation errors', async () => {
+		const wrapper = mount(SyTextField, {
+			props: {
+				modelValue: null,
+				label: 'Test hideDetails + erreur',
+				hideDetails: true,
+				hasError: true,
+				errorMessages: ['Erreur de validation'],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.v-input__details').exists()).toBe(false)
+		expect(wrapper.find('.v-messages').exists()).toBe(false)
+	})
 })

package/src/components/Customs/SyTextField/tests/SyTextField.visual.cy.ts

@@ -0,0 +1,116 @@
+import SyTextField from '../SyTextField.vue'
+
+describe('SyTextField - Visual regression tests', () => {
+	it('displays the text field by default', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: { label: 'Prénom' },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-text-field-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the text field with a value', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Prénom',
+				modelValue: 'Jean',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-text-field-with-value', cy.get('.v-text-field'))
+	})
+
+	it('displays the text field as required', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Prénom',
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-text-field-required', cy.get('.v-text-field'))
+	})
+
+	it('displays the text field in readonly state', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Prénom',
+				modelValue: 'Jean',
+				readonly: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-text-field-readonly', cy.get('.v-text-field'))
+	})
+
+	it('displays the text field with clearable', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Prénom',
+				modelValue: 'Jean',
+				isClearable: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-text-field-clearable', cy.get('.v-text-field'))
+	})
+
+	it('displays the text field with prepend icon', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Recherche',
+				prependInnerIcon: 'info',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-text-field-prepend-icon', cy.get('.v-text-field'))
+	})
+
+	it('displays the number field with the custom spin buttons', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Quantité',
+				type: 'number',
+				modelValue: '42',
+			},
+		})
+
+		cy.get('.sy-text-field__spinner').should('be.visible')
+		cy.matchImageSnapshot('sy-text-field-number', cy.get('.v-text-field'))
+	})
+
+	it('displays the number field without the spin buttons when hidden', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Quantité',
+				type: 'number',
+				modelValue: '42',
+				areSpinButtonsHidden: true,
+			},
+		})
+
+		cy.get('.sy-text-field__spinner').should('not.exist')
+		cy.matchImageSnapshot('sy-text-field-number-no-spinner', cy.get('.v-text-field'))
+	})
+
+	it('displays the number field disabled without the spin buttons', () => {
+		cy.mountWithVuetify(SyTextField, {
+			props: {
+				label: 'Quantité',
+				type: 'number',
+				modelValue: '42',
+				disabled: true,
+			},
+		})
+
+		cy.get('.sy-text-field__spinner').should('not.exist')
+		cy.matchImageSnapshot('sy-text-field-number-disabled', cy.get('.v-text-field'))
+	})
+})

package/src/components/Customs/SyTextField/types.ts

@@ -0,0 +1,70 @@
+import type { FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import type { SyTextFieldLocales } from './locales'
+
+export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close' | 'calendar' | undefined
+export type VariantStyle = 'outlined' | 'plain' | 'underlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled'
+export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'
+export type ValidateOnType = 'eager' | 'lazy' | 'blur' | 'input' | 'submit' | 'invalid-input' | 'blur lazy' | 'input lazy' | 'submit lazy' | 'invalid-input lazy' | 'blur eager' | 'input eager' | 'submit eager' | 'invalid-input eager' | 'lazy blur' | 'lazy input' | 'lazy submit' | 'lazy invalid-input' | 'eager blur' | 'eager input' | 'eager submit' | 'eager invalid-input' | undefined
+
+export type SyTextFieldProps = {
+	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
+	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
+	hideDetails?: boolean | 'auto'
+	/** Surcharge des libellés d'accessibilité (boutons +/-, vider, chargement). */
+	locales?: Partial<SyTextFieldLocales>
+} & FieldValidationProps

package/src/components/Customs/SyTextField/useNumberField.ts

@@ -0,0 +1,93 @@
+import { computed, type Ref } from 'vue'
+
+// Caractères autorisés dans un champ number : chiffres, exposant, signes et séparateur décimal.
+const NUMBER_ALLOWED_CHARACTERS_PATTERN = /[^0-9eE+.-]/g
+const NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN = /^[0-9eE+.-]$/
+// Préfixe de nombre valide : un seul séparateur décimal, un seul exposant, signes bien placés.
+const NUMBER_PREFIX_PATTERN = /^[+-]?\d*\.?\d*(?:[eE][+-]?\d*)?/
+
+/**
+ * Regroupe la logique propre au mode `type="number"` de SyTextField.
+ *
+ * Un champ number est rendu en `type=text` (+ `inputmode=decimal`) pour que `input.value`
+ * reste lisible et corrigeable sur tous les navigateurs (Chrome comme Firefox). L'incrément
+ * natif étant alors perdu, il est réimplémenté ici (flèches ↑/↓ + boutons +/-).
+ */
+export function useNumberField(params: {
+	type: Ref<string | undefined>
+	disabled: Ref<boolean | undefined>
+	readonly: Ref<boolean | undefined>
+	model: Ref<string | number | null | undefined>
+	attrs: Record<string, unknown>
+}) {
+	const isNumberField = computed(() => params.type.value === 'number')
+
+	const nativeInputType = computed(() => (isNumberField.value ? 'text' : params.type.value))
+
+	// Retire les caractères interdits puis ne conserve qu'un préfixe de nombre valide.
+	const sanitizeNumberValue = (value: string | number | null | undefined) => {
+		if (!isNumberField.value || typeof value !== 'string') {
+			return value
+		}
+
+		const cleaned = value.replace(NUMBER_ALLOWED_CHARACTERS_PATTERN, '')
+		const match = cleaned.match(NUMBER_PREFIX_PATTERN)
+		return match ? match[0] : ''
+	}
+
+	// Un seul caractère saisi est-il autorisé dans un champ number ? (filtrage clavier)
+	const isAllowedNumberCharacter = (char: string) => NUMBER_ALLOWED_SINGLE_CHARACTER_PATTERN.test(char)
+
+	// Une donnée (collage, multi-caractères) contient-elle un caractère interdit ? (beforeinput)
+	const hasDisallowedNumberCharacter = (data: string) => data.replace(NUMBER_ALLOWED_CHARACTERS_PATTERN, '') !== data
+
+	const stepValue = (direction: 1 | -1) => {
+		if (params.disabled.value || params.readonly.value) {
+			return
+		}
+
+		const rawStep = Number(params.attrs.step ?? 1)
+		const step = Number.isFinite(rawStep) && rawStep > 0 ? rawStep : 1
+
+		const currentNum = Number(params.model.value)
+		const base = Number.isFinite(currentNum) ? currentNum : 0
+
+		// Arrondit l'addition AVANT le clamp pour éviter les imprécisions flottantes
+		// (ex. pas de 0.1) sans altérer la précision de min/max.
+		const decimals = (String(step).split('.')[1] ?? '').length
+		let next = Number((base + direction * step).toFixed(decimals))
+
+		const min = params.attrs.min !== undefined && params.attrs.min !== '' ? Number(params.attrs.min) : undefined
+		const max = params.attrs.max !== undefined && params.attrs.max !== '' ? Number(params.attrs.max) : undefined
+		if (min !== undefined && Number.isFinite(min) && next < min) {
+			next = min
+		}
+		if (max !== undefined && Number.isFinite(max) && next > max) {
+			next = max
+		}
+
+		params.model.value = String(next)
+	}
+
+	// type=number rendu en type=text : on réimplémente l'incrément clavier ↑/↓.
+	// Retourne true si la touche a été prise en charge (défaut empêché).
+	const handleStepKeydown = (event: KeyboardEvent) => {
+		if (!isNumberField.value || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) {
+			return false
+		}
+
+		event.preventDefault()
+		stepValue(event.key === 'ArrowUp' ? 1 : -1)
+		return true
+	}
+
+	return {
+		isNumberField,
+		nativeInputType,
+		sanitizeNumberValue,
+		isAllowedNumberCharacter,
+		hasDisallowedNumberCharacter,
+		stepValue,
+		handleStepKeydown,
+	}
+}

package/src/components/Customs/SyTextField/useSyTextFieldValidation.ts

@@ -0,0 +1,95 @@
+import { computed, type Ref } from 'vue'
+import { useValidation } from '@/composables/unifyValidation/useValidation'
+import type { ValidationRule as SyValidationRule, VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+
+export function useSyTextFieldValidation(params: {
+	modelValue: Ref<string | number | null | undefined>
+	readonly: Ref<boolean>
+	disabled: Ref<boolean>
+	required: Ref<boolean>
+	isValidateOnBlur: Ref<boolean>
+	showSuccessMessages: Ref<boolean>
+	disableErrorHandling: Ref<boolean>
+	useVuetifyValidation: Ref<boolean>
+	label: Ref<string | undefined>
+	focused: Ref<boolean>
+	customRules: Ref<SyValidationRule[]>
+	customWarningRules: Ref<SyValidationRule[] | undefined>
+	customSuccessRules: Ref<SyValidationRule[] | undefined>
+	rules: Ref<VuetifyValidationRule[] | undefined>
+	errorMessages: Ref<string[] | null | undefined>
+	warningMessages: Ref<string[] | null | undefined>
+	successMessages: Ref<string[] | null | undefined>
+	hasErrorProp: Ref<boolean>
+	hasWarningProp: Ref<boolean>
+	hasSuccessProp: Ref<boolean>
+	maxErrors: Ref<number>
+}) {
+	const defaultRules = computed<SyValidationRule[]>(() =>
+		params.required.value
+			? [{
+					type: 'required',
+					options: {
+						message: `Le champ ${params.label.value || 'ce champ'} est requis.`,
+						fieldIdentifier: params.label.value,
+					},
+				}]
+			: [],
+	)
+
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess, state, clearValidation } = useValidation({
+		modelValue: params.modelValue,
+		readonly: params.readonly,
+		disabled: params.disabled,
+		required: params.required,
+		isValidateOnBlur: params.isValidateOnBlur,
+		showSuccessMessages: params.showSuccessMessages,
+		disableErrorHandling: params.disableErrorHandling,
+		useVuetifyValidation: params.useVuetifyValidation,
+		label: params.label,
+		rules: params.rules,
+		customRules: computed(() => [
+			...defaultRules.value,
+			...(params.customRules.value ?? []),
+		]),
+		customWarningRules: params.customWarningRules as Ref<SyValidationRule[]>,
+		customSuccessRules: params.customSuccessRules as Ref<SyValidationRule[]>,
+		errorMessages: params.errorMessages,
+		warningMessages: params.warningMessages,
+		successMessages: params.successMessages,
+		hasErrorProp: params.hasErrorProp,
+		hasWarningProp: params.hasWarningProp,
+		hasSuccessProp: params.hasSuccessProp,
+		maxErrors: params.maxErrors,
+		focused: params.focused,
+	})
+
+	const iconColor = computed(() => {
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'warning'
+		if (hasSuccess.value) return 'success'
+		return 'rgba(0, 0, 0, 1)'
+	})
+
+	// Le bouton clear garde toujours une couleur neutre, quel que soit l'état de validation
+	const clearButtonColorClass = computed(() => 'text-iconBase')
+
+	const hasMessages = computed(() => {
+		return (params.errorMessages.value?.length ?? 0) > 0 || hasError.value || hasWarning.value || (hasSuccess.value && params.showSuccessMessages.value)
+	})
+
+	return {
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		iconColor,
+		clearButtonColorClass,
+		hasMessages,
+		state,
+		validate,
+		clearValidation,
+	}
+}

package/src/components/DataList/DataList.mdx

@@ -73,7 +73,6 @@ import * as DataList from './DataList.stories';
 		},
 	]
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
 	<DataList :items="items" />