@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

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

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 	import { computed, ref, watch } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
-	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
-	import type { RuleOptions } from '@/composables/rules/useFieldValidation'
+	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import {
 		mdiAlertOutline,
 		mdiCheck,
@@ -19,6 +18,9 @@
 			appendIcon?: IconType
 			prependInnerIcon?: IconType
 			appendInnerIcon?: IconType
+			prependTooltip?: string
+			appendTooltip?: string
+			tooltipLocation?: 'top' | 'bottom' | 'start' | 'end'
 			variantStyle?: VariantStyle
 			color?: ColorType
 			isClearable?: boolean
@@ -70,9 +72,12 @@
 			width?: string | number
 			displayAsterisk?: boolean
 			noIcon?: boolean
-			customRules?: { type: string, options: RuleOptions }[]
-			customWarningRules?: { type: string, options: RuleOptions }[]
+			customRules?: ValidationRule[]
+			customWarningRules?: ValidationRule[]
+			customSuccessRules?: ValidationRule[]
 			showSuccessMessages?: boolean
+			isValidateOnBlur?: boolean
+			disableErrorHandling?: boolean
 		}>(),
 		{
 			modelValue: undefined,
@@ -80,6 +85,9 @@
 			appendIcon: undefined,
 			appendInnerIcon: undefined,
 			prependInnerIcon: undefined,
+			prependTooltip: undefined,
+			appendTooltip: undefined,
+			tooltipLocation: 'top',
 			variantStyle: 'outlined',
 			color: 'primary',
 			label: 'custom label',
@@ -106,7 +114,7 @@
 			hint: undefined,
 			id: undefined,
 			loading: false,
-			maxErrors: 2,
+			maxErrors: undefined,
 			maxWidth: undefined,
 			messages: undefined,
 			minWidth: undefined,
@@ -130,7 +138,10 @@
 			noIcon: false,
 			customRules: () => [],
 			customWarningRules: () => [],
+			customSuccessRules: () => [],
 			showSuccessMessages: true,
+			isValidateOnBlur: true,
+			disableErrorHandling: false,
 		},
 	)
 
@@ -143,137 +154,119 @@
 		calendar: mdiCalendar,
 	}
 
+	const emit = defineEmits([
+		'update:modelValue',
+		'clear',
+		'prepend-icon-click',
+		'append-icon-click',
+	])
+
 	const model = computed({
-		get: () => props.modelValue,
-		set: (value) => {
-			emit('update:model-value', value)
+		get() {
+			return props.modelValue
+		},
+		set(value) {
+			emit('update:modelValue', value)
 		},
 	})
 
 	const isBlurred = ref(false)
-	const errors = ref<string[]>([])
-	const warnings = ref<string[]>([])
-	const successes = ref<string[]>([])
 
+	// 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) => {
-		errors.value = newVal || []
+		validation.errors.value = newVal || []
 	}, { immediate: true })
 
 	watch(() => props.warningMessages, (newVal) => {
-		warnings.value = newVal || []
+		validation.warnings.value = newVal || []
 	}, { immediate: true })
 
 	watch(() => props.successMessages, (newVal) => {
-		successes.value = newVal || []
+		validation.successes.value = newVal || []
 	}, { immediate: true })
 
-	type Rule = { type: string, options?: RuleOptions }
-
-	const customRules = ref<Rule[]>(props.customRules || [])
-	const customWarningRules = ref<Rule[]>(props.customWarningRules || [])
-
-	const { generateRules } = useFieldValidation()
-
-	const validationRules = computed(() => {
-		const defaultRules: Rule[] = props.required
-			? [{
-				type: 'required',
-				options: {
-					message: `Le champ ${props.label || 'ce champ'} est requis.`,
-					fieldIdentifier: props.label,
-				},
-			}]
-			: []
-
-		return generateRules([...defaultRules, ...customRules.value])
-	})
-
-	const warningValidationRules = computed(() => {
-		const rulesWithWarning = customWarningRules.value.map(rule => ({
-			type: rule.type,
-			options: { ...(rule.options || {}), isWarning: true },
-		}))
-		return generateRules(rulesWithWarning)
-	})
+	// 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 validateField = (value: string | number | null) => {
-		errors.value = []
-		warnings.value = []
-		successes.value = []
-
 		// Si le champ est vide et non requis, on ne fait pas de validation
 		if (!value && !props.required) {
+			validation.clearValidation()
 			return true
 		}
 
-		let hasSuccess = false
-
-		// Validation des règles standard
-		validationRules.value.forEach((rule) => {
-			const result = rule(value)
-			if (result.error) {
-				errors.value.push(result.error)
-			}
-			else if (props.showSuccessMessages && result.success && !errors.value.length && !hasSuccess) {
-				successes.value = [result.success]
-				hasSuccess = true
-			}
-		})
-
-		// Si on a des erreurs, on n'affiche pas les warnings ni les succès
-		if (errors.value.length) {
-			warnings.value = []
-			successes.value = []
-			return false
-		}
-
-		// Validation des règles d'avertissement
-		warningValidationRules.value.forEach((rule) => {
-			const result = rule(value)
-			if (result.warning) {
-				warnings.value.push(result.warning)
-			}
-		})
-
-		// Si on a des warnings, on n'affiche pas les succès
-		if (warnings.value.length) {
-			successes.value = []
-		}
+		const result = validation.validateField(
+			value,
+			[...defaultRules.value, ...props.customRules],
+			props.customWarningRules,
+		)
 
-		return true
+		return !result.hasError
 	}
 
 	const validateOnSubmit = () => {
 		isBlurred.value = true
-		// On s'assure que model.value n'est pas undefined
 		return validateField(model.value ?? null)
 	}
 
-	const hasError = computed(() => errors.value.length > 0)
-	const hasWarning = computed(() => warnings.value.length > 0)
-	const hasSuccess = computed(() => successes.value.length > 0 && !hasError.value && !hasWarning.value)
-
 	const checkErrorOnBlur = () => {
 		isBlurred.value = true
 		validateField(model.value ?? null)
+		emit('update:modelValue', model.value)
 	}
 
 	watch(model, (newValue) => {
-		validateField(newValue ?? null)
+		if (!props.isValidateOnBlur) {
+			validateField(newValue ?? null)
+		}
 		if (props.isClearable && newValue === '') {
 			emit('clear')
 		}
 	})
 
+	// Computed pour l'affichage des états
+	const hasError = computed(() => validation.hasError.value)
+	const hasWarning = computed(() => validation.hasWarning.value)
+	const hasSuccess = computed(() => validation.hasSuccess.value)
+
+	const errors = computed(() => validation.errors.value)
+	const warnings = computed(() => validation.warnings.value)
+	const successes = computed(() => validation.successes.value)
+
+	// Computed pour les icônes
 	const appendInnerIconColor = computed(() => {
-		if (hasError.value) return 'error'
-		if (hasWarning.value) return 'warning'
-		if (hasSuccess.value) return 'success'
-		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success' || props.appendInnerIcon === 'warning'
-			? props.appendInnerIcon
-			: 'black'
+		if (props.appendInnerIcon === 'error') return 'error'
+		if (props.appendInnerIcon === 'success') return 'success'
+		return 'rgba(0, 0, 0, 1)'
 	})
 
+	const handlePrependIconClick = () => {
+		emit('prepend-icon-click')
+	}
+
+	const handleAppendIconClick = () => {
+		emit('append-icon-click')
+	}
+
 	const validationIcon = computed(() => {
 		if (hasError.value) return ICONS['error']
 		if (hasWarning.value) return ICONS['warning']
@@ -296,14 +289,10 @@
 		opacity: '1',
 	}
 
-	const emit = defineEmits(['update:model-value', 'clear', 'prepend-icon-click', 'append-icon-click'])
-
 	defineExpose({
-		appendInnerIconColor,
+		validation,
 		validateOnSubmit,
-		errors,
-		warnings,
-		successes,
+		checkErrorOnBlur,
 	})
 </script>
 
@@ -312,6 +301,7 @@
 		:id="props.id"
 		v-model="model"
 		:active="props.isActive"
+		:title="props.label"
 		:aria-label="props.label"
 		:base-color="props.baseColor"
 		:bg-color="props.bgColor"
@@ -336,7 +326,7 @@
 		:loading="props.loading"
 		:max-errors="props.maxErrors"
 		:max-width="props.maxWidth"
-		:messages="hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : [])"
+		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
 		:min-width="props.minWidth"
 		:name="props.name"
 		:no-icon="props.noIcon"
@@ -360,35 +350,70 @@
 		:class="{
 			'error-field': hasError,
 			'warning-field': hasWarning,
-			'success-field': hasSuccess
+			'success-field': hasSuccess,
+			'basic-field': !hasError && !hasWarning && !hasSuccess
 		}"
 		@blur="checkErrorOnBlur"
 	>
 		<template
-			v-if="props.prependIcon && !props.noIcon"
+			v-if="props.prependIcon || props.prependTooltip"
 			#prepend
 		>
 			<slot name="prepend">
+				<template v-if="props.prependTooltip">
+					<VTooltip
+						:text="props.prependTooltip"
+						:location="props.tooltipLocation"
+					>
+						<template #activator="{ props: tooltipProps }">
+							<VIcon
+								v-bind="tooltipProps"
+								:aria-label="props.label ? `${props.label} - info` : 'Info'"
+								:color="appendInnerIconColor"
+								:icon="ICONS.info"
+								role="button"
+							/>
+						</template>
+					</VTooltip>
+				</template>
 				<VIcon
+					v-else-if="props.prependIcon"
 					:aria-label="props.label ? `${props.label} - bouton ${props.prependIcon}` : `Bouton ${props.prependIcon}`"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.prependIcon]"
 					role="button"
-					@click="$emit('prepend-icon-click')"
+					@click="handlePrependIconClick"
 				/>
 			</slot>
 		</template>
 		<template
-			v-if="props.appendIcon && !props.noIcon"
+			v-if="props.appendIcon || props.appendTooltip"
 			#append
 		>
 			<slot name="append">
+				<template v-if="props.appendTooltip">
+					<VTooltip
+						:text="props.appendTooltip"
+						:location="props.tooltipLocation"
+					>
+						<template #activator="{ props: tooltipProps }">
+							<VIcon
+								v-bind="tooltipProps"
+								:aria-label="props.label ? `${props.label} - info` : 'Info'"
+								:color="appendInnerIconColor"
+								:icon="ICONS.info"
+								role="button"
+							/>
+						</template>
+					</VTooltip>
+				</template>
 				<VIcon
+					v-else-if="props.appendIcon"
 					:aria-label="props.label ? `${props.label} - bouton ${props.appendIcon}` : `Bouton ${props.appendIcon}`"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.appendIcon]"
 					role="button"
-					@click="$emit('append-icon-click')"
+					@click="handleAppendIconClick"
 				/>
 			</slot>
 		</template>
@@ -494,4 +519,10 @@
 		}
 	}
 }
+
+.basic-field {
+	:deep(.v-icon__svg) {
+		fill: rgb(0 0 0 / 100%);
+	}
+}
 </style>

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

@@ -1,36 +1,56 @@
+import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-import SyTextField from '../SyTextField.vue'
-import { expect, describe, it } from 'vitest'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
 import { VIcon } from 'vuetify/components'
-import { vuetify } from '@tests/unit/setup'
 
-describe('SyTextField', () => {
-	const factory = (props = {}, slots = {}) => {
-		return mount(SyTextField, {
-			props,
-			slots,
+import SyTextField from '../SyTextField.vue'
+import type { IconType } from '../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('SyTextField.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof SyTextField>>
+
+	beforeEach(() => {
+		wrapper = mount(SyTextField, {
 			global: {
 				plugins: [vuetify],
 			},
+			props: {
+				modelValue: undefined,
+				required: true,
+				showSuccessMessages: true,
+				outlined: true,
+			},
 		})
-	}
+	})
 
 	it('renders correctly with default props', () => {
-		const wrapper = factory()
 		expect(wrapper.exists()).toBe(true)
-		expect(wrapper.findComponent(VIcon).exists()).toBe(false) // No icons by default
+		expect(wrapper.findComponent({ name: 'VIcon' }).exists()).toBe(false) // No icons by default
 	})
 
 	it('applies the correct variant style', () => {
-		const wrapper = factory({ variantStyle: 'filled' })
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { variantStyle: 'filled' },
+		})
 		const textField = wrapper.findComponent({ name: 'VTextField' })
 		expect(textField.props('variant')).toBe('filled')
 	})
 
 	it('renders default slots correctly', () => {
-		const wrapper = factory({}, {
-			prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
-			append: '<div data-testid="append-slot">Append Slot Content</div>',
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			slots: {
+				prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
+				append: '<div data-testid="append-slot">Append Slot Content</div>',
+			},
 		})
 
 		const prependSlot = wrapper.find('.v-field--prepended')
@@ -41,9 +61,12 @@ describe('SyTextField', () => {
 	})
 
 	it('renders inner slots correctly', () => {
-		const wrapper = factory({}, {
-			'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
-			'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			slots: {
+				'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
+				'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
+			},
 		})
 
 		const prependInnerSlot = wrapper.find('[data-testid="prepend-inner-slot"]')
@@ -55,38 +78,167 @@ describe('SyTextField', () => {
 		expect(appendInnerSlot.text()).toBe('Append Inner Slot Content')
 	})
 
-	it('matches snapshot', () => {
+	it('should update icon when validation state changes', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'success' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('success')
+	})
+
+	it('should update icon when validation state changes with warning', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'warning' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('warning')
+	})
+
+	it('should update icon when validation state changes with error', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'error' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('error')
+	})
+
+	it('should update icon when validation state changes with success', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'success' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('success')
+	})
+
+	it('emits prepend-icon-click event when prepend icon is clicked', async () => {
+		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { prependIcon: 'info' as IconType },
+		})
+
+		await wrapper.vm.$nextTick()
+		const prependIcon = wrapper.findComponent(VIcon)
+		expect(prependIcon.exists()).toBe(true)
+		await prependIcon.trigger('click')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('prepend-icon-click')).toBeTruthy()
+	})
+
+	it('emits append-icon-click event when append icon is clicked', async () => {
+		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendIcon: 'info' as IconType },
+		})
+
+		await wrapper.vm.$nextTick()
+		const appendIcon = wrapper.findComponent(VIcon)
+		expect(appendIcon.exists()).toBe(true)
+		await appendIcon.trigger('click')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('append-icon-click')).toBeTruthy()
+	})
+
+	it('shows validation error message', async () => {
 		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
 			props: {
-				label: 'custom label',
-				modelValue: '',
-				errorMessages: ['Test error message'],
+				required: true,
+				label: 'Test Field',
 			},
-			global: {
-				plugins: [vuetify],
+		})
+		await wrapper.find('input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.v-messages').text()).toContain('Le champ Test Field est requis')
+	})
+
+	it('validates field with custom rules', async () => {
+		const customRule = {
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length > 2,
+				message: 'Test error message',
 			},
+		}
+
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { customRules: [customRule] },
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
-	})
+		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.find('input').trigger('blur')
+		await wrapper.vm.$nextTick()
 
-	it('returns error color for appendInnerIcon when value is error', () => {
-		const wrapper = factory({ appendInnerIcon: 'error' })
-		expect(wrapper.vm.appendInnerIconColor).toBe('error')
+		const messages = wrapper.find('.v-messages')
+		expect(messages.text()).toContain('Test error message')
 	})
 
-	it('returns success color for appendInnerIcon when value is success', () => {
-		const wrapper = factory({ appendInnerIcon: 'success' })
-		expect(wrapper.vm.appendInnerIconColor).toBe('success')
+	it('validates field with custom warning rules', async () => {
+		const warningRule = {
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length <= 3,
+				message: 'Test warning message',
+				isWarning: true,
+			},
+		}
+
+		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: {
+				modelValue: 'test',
+				customWarningRules: [warningRule],
+				showSuccessMessages: true,
+				label: 'Test Field',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		await wrapper.find('input').trigger('blur')
+		await wrapper.vm.$nextTick()
+
+		const messages = wrapper.find('.v-messages')
+		expect(messages.exists()).toBe(true)
+		expect(messages.text()).toContain('Attention : Test Field peut contenir une erreur')
 	})
 
-	it('returns default color for appendInnerIcon when value is info', () => {
-		const wrapper = factory({ appendInnerIcon: 'info' })
-		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	it('maintains input value without validation rules', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+		})
+		const input = wrapper.find('input')
+
+		await input.setValue('test value')
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test value'])
 	})
 
-	it('returns default color for appendInnerIcon when value is undefined', () => {
-		const wrapper = factory({ appendInnerIcon: undefined })
-		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	it('validates field immediately when isValidateOnBlur is false', async () => {
+		const customRule = {
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length > 2,
+				message: 'Test error message',
+			},
+		}
+
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: {
+				customRules: [customRule],
+				isValidateOnBlur: false,
+			},
+		})
+
+		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.vm.$nextTick()
+
+		const messages = wrapper.find('.v-messages')
+		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.vm.$nextTick()
+
+		expect(messages.text()).not.toContain('Test error message')
 	})
 })

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

@@ -1,3 +1,4 @@
 export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close' | 'calendar' | undefined
 export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'underlined'
 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