@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/LunarCalendar/tests/LunarCalendar.spec.ts

@@ -53,10 +53,10 @@ describe('LunarCalendar', () => {
 				},
 			})
 
-			const input = wrapper.find('input')
-			await input.setValue('10/19/1995')
-			await input.trigger('blur')
+			await (wrapper.vm.validateOnSubmit as () => Promise<boolean>)()
 			await flushPromises()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
 
 			expect(wrapper.html()).toContain('L\'année doit être supérieure ou égale à 1996.')
 		})
@@ -70,12 +70,203 @@ describe('LunarCalendar', () => {
 				},
 			})
 
-			const input = wrapper.find('input')
-			await input.setValue('10/19/1995')
-			await input.trigger('blur')
+			await (wrapper.vm.validateOnSubmit as () => Promise<boolean>)()
 			await flushPromises()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
 
 			expect(wrapper.html()).toContain('L\'année doit être inférieure ou égale à 1994.')
 		})
+
+		it('displays success messages when showSuccessMessages is true', async () => {
+			const successRule = {
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const regex = /^\d{2}\/\d{2}\/\d{4}$/
+						return regex.test(value)
+					},
+					successMessage: 'Date format valide',
+				},
+			}
+
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					showSuccessMessages: true,
+					customSuccessRules: [successRule],
+				},
+			})
+
+			await (wrapper.vm.validateOnSubmit as () => Promise<boolean>)()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.html()).toContain('Date format valide')
+		})
+
+		it('displays success messages when showSuccessMessages is true', async () => {
+			const successRule = {
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const regex = /^\d{2}\/\d{2}\/\d{4}$/
+						return regex.test(value)
+					},
+					successMessage: 'Date format valide',
+				},
+			}
+
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					showSuccessMessages: true,
+					customSuccessRules: [successRule],
+				},
+			})
+
+			await (wrapper.vm.validateOnSubmit as unknown as () => Promise<boolean>)()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.html()).toContain('Date format valide')
+		})
+	})
+
+	describe('new props iso SyTextField', () => {
+		it('renders with helpText', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					helpText: 'Format attendu : JJ/MM/AAAA',
+				},
+			})
+
+			expect(wrapper.html()).toContain('Format attendu : JJ/MM/AAAA')
+		})
+
+		it('renders with noIcon', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					noIcon: true,
+				},
+			})
+
+			// Vérifie que l'icône n'est pas présente
+			expect(wrapper.findComponent({ name: 'SyIcon' }).exists()).toBe(false)
+		})
+
+		it('renders with displayAsterisk when required', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '',
+					required: true,
+					displayAsterisk: true,
+				},
+			})
+
+			// Vérifie que l'astérisque est présent dans le label
+			expect(wrapper.html()).toContain('*')
+		})
+
+		it('renders with loading state', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					loading: true,
+				},
+			})
+
+			// Vérifie que le champ a l'attribut loading ou la classe correspondante
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('loading')).toBe(true)
+		})
+
+		it('renders with disabled state', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					disabled: true,
+				},
+			})
+
+			const input = wrapper.find('input')
+			expect(input.attributes('disabled')).toBeDefined()
+		})
+
+		it('renders with readonly state', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					readonly: true,
+				},
+			})
+
+			const input = wrapper.find('input')
+			expect(input.attributes('readonly')).toBeDefined()
+		})
+
+		it('renders with custom variantStyle', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					variantStyle: 'filled',
+				},
+			})
+
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('variantStyle')).toBe('filled')
+		})
+
+		it('renders with custom color', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					color: 'secondary',
+				},
+			})
+
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('color')).toBe('secondary')
+		})
+
+		it('renders with custom density', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					density: 'compact',
+				},
+			})
+
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('density')).toBe('compact')
+		})
+
+		it('renders with hint when focused', async () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					hint: 'Ceci est un hint',
+				},
+			})
+
+			// Le hint s'affiche quand le champ est focus
+			await wrapper.find('input').trigger('focus')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.html()).toContain('Ceci est un hint')
+		})
 	})
 })

package/src/components/LunarCalendar/tests/useLunarCalendarValidation.spec.ts

@@ -0,0 +1,287 @@
+import { describe, it, expect } from 'vitest'
+import { ref, nextTick } from 'vue'
+import { useLunarCalendarValidation } from '../useLunarCalendarValidation'
+import type { LunarCalendarProps } from '../types'
+
+function createProps(overrides: Partial<LunarCalendarProps> = {}): LunarCalendarProps {
+	return {
+		label: 'Date de naissance',
+		placeholder: undefined,
+		isClearable: false,
+		displayPrependIcon: true,
+		displayAppendIcon: false,
+		minYear: undefined,
+		maxYear: undefined,
+		// FieldValidationProps defaults
+		required: false,
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		readonly: false,
+		disabled: false,
+		customRules: [],
+		customWarningRules: [],
+		customSuccessRules: [],
+		showSuccessMessages: false,
+		isValidateOnBlur: true,
+		...overrides,
+	}
+}
+
+describe('useLunarCalendarValidation', () => {
+	describe('règle de format DD/MM/YYYY', () => {
+		it('ne retourne pas d\'erreur si la valeur est vide', async () => {
+			const modelValue = ref('')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('accepte une date au format DD/MM/YYYY', async () => {
+			const modelValue = ref('25/12/2000')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('retourne une erreur si le format est invalide', async () => {
+			const modelValue = ref('25122000')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('La date est invalide.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('retourne une erreur si la date est incomplète', async () => {
+			const modelValue = ref('25/12/200')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('La date est invalide.')
+		})
+	})
+
+	describe('règle required', () => {
+		it('ne retourne pas d\'erreur si non requis et vide', async () => {
+			const modelValue = ref('')
+			const props = createProps({ required: false })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('retourne une erreur si requis et vide', async () => {
+			const modelValue = ref('')
+			const props = createProps({ required: true, label: 'Date' })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('Le champ Date est requis.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('utilise le label dans le message d\'erreur', async () => {
+			const modelValue = ref('')
+			const props = createProps({ required: true, label: 'Date de naissance' })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('Le champ Date de naissance est requis.')
+		})
+	})
+
+	describe('règle minYear', () => {
+		it('retourne une erreur si l\'année est inférieure à minYear', async () => {
+			const modelValue = ref('25/12/1999')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être supérieure ou égale à 2000.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('accepte l\'année égale à minYear', async () => {
+			const modelValue = ref('25/12/2000')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('accepte l\'année supérieure à minYear', async () => {
+			const modelValue = ref('25/12/2020')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('ignore minYear si le format est invalide', async () => {
+			const modelValue = ref('invalid')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			// L'erreur de format est présente mais pas celle de minYear
+			expect(validation.errors.value).toContain('La date est invalide.')
+			expect(validation.errors.value).not.toContain('L\'année doit être supérieure ou égale à 2000.')
+		})
+	})
+
+	describe('règle maxYear', () => {
+		it('retourne une erreur si l\'année est supérieure à maxYear', async () => {
+			const modelValue = ref('25/12/2021')
+			const props = createProps({ maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être inférieure ou égale à 2020.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('accepte l\'année égale à maxYear', async () => {
+			const modelValue = ref('25/12/2020')
+			const props = createProps({ maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('accepte l\'année inférieure à maxYear', async () => {
+			const modelValue = ref('25/12/2010')
+			const props = createProps({ maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+	})
+
+	describe('règles minYear ET maxYear combinées', () => {
+		it('retourne une erreur si l\'année est hors plage (inférieure)', async () => {
+			const modelValue = ref('25/12/1999')
+			const props = createProps({ minYear: 2000, maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être comprise entre 2000 et 2020.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('retourne une erreur si l\'année est hors plage (supérieure)', async () => {
+			const modelValue = ref('25/12/2021')
+			const props = createProps({ minYear: 2000, maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être comprise entre 2000 et 2020.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('accepte une date dans la plage', async () => {
+			const modelValue = ref('25/12/2010')
+			const props = createProps({ minYear: 2000, maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+	})
+
+	describe('clearValidation', () => {
+		it('efface les erreurs après clearValidation', async () => {
+			const modelValue = ref('invalid')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+			expect(validation.errors.value.length).toBeGreaterThan(0)
+
+			validation.clearValidation()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+			expect(validation.hasError.value).toBe(false)
+		})
+	})
+
+	describe('validate return value', () => {
+		it('retourne true si la validation réussit', async () => {
+			const modelValue = ref('25/12/2000')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			const result = await validation.validate()
+
+			expect(result).toBe(true)
+		})
+
+		it('retourne false si la validation échoue', async () => {
+			const modelValue = ref('invalid')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			const result = await validation.validate()
+
+			expect(result).toBe(false)
+		})
+	})
+
+	describe('focused ref', () => {
+		it('exposed focused ref', () => {
+			const modelValue = ref('')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			expect(validation.focused).toBeDefined()
+			expect(validation.focused.value).toBe(false)
+		})
+	})
+})

package/src/components/LunarCalendar/types.ts

@@ -0,0 +1,39 @@
+import type { FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+
+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 DensityType = 'default' | 'comfortable' | 'compact'
+
+// On extrait modelValue car on utilise defineModel
+export type LunarCalendarProps = {
+	label: string
+	placeholder?: string
+	isClearable?: boolean
+	displayPrependIcon?: boolean
+	displayAppendIcon?: boolean
+	minYear?: number
+	maxYear?: number
+	// Props iso avec SyTextField
+	helpText?: string
+	noIcon?: boolean
+	displayAsterisk?: boolean
+	prependTooltip?: string
+	appendTooltip?: string
+	tooltipLocation?: 'top' | 'bottom' | 'start' | 'end'
+	variantStyle?: VariantStyle
+	color?: ColorType
+	density?: DensityType
+	loading?: boolean | string
+	hint?: string
+	bgColor?: string
+	baseColor?: string
+	counter?: string | number | boolean
+	id?: string
+	name?: string
+	autocomplete?: string
+	disabled?: boolean
+	readonly?: boolean
+	required?: boolean
+	hideDetails?: boolean | 'auto'
+} & Omit<FieldValidationProps, 'modelValue'>

package/src/components/LunarCalendar/useLunarCalendarValidation.ts

@@ -1,46 +1,122 @@
-import { useValidatable } from '@/composables/validation/useValidatable'
-import { useValidation } from '@/composables/validation/useValidation'
-import type { MaybeRefOrGetter } from 'vue'
-import { toValue, type ComputedRef } from 'vue'
-import { useLunarCalendarRules } from './useLunarCalendarRules'
-
-export function useLunarCalendarValidation(
-	modelValue: ComputedRef<string | undefined>,
-	label: MaybeRefOrGetter<string | undefined>,
-	successMessage: MaybeRefOrGetter<string | undefined>,
-	required: MaybeRefOrGetter<boolean | undefined>,
-	minYear: MaybeRefOrGetter<number | undefined>,
-	maxYear: MaybeRefOrGetter<number | undefined>,
-) {
-	const { rules } = useLunarCalendarRules(
-		successMessage,
-		required,
-		minYear,
-		maxYear,
-	)
+import { computed, ref, toValue, type Ref } from 'vue'
+import { useValidation, type ValidationRule } from '@/composables/unifyValidation/useValidation'
+import type { LunarCalendarProps } from './types'
 
-	const validation = useValidation({
-		showSuccessMessages: successMessage !== undefined,
-		fieldIdentifier: toValue(label),
-	})
+function getYearFromModel(model: string): number | null {
+	const parts = model.split('/')
+	if (parts.length !== 3 || parts[2]?.length !== 4 || isNaN(Number(parts[2]))) {
+		return null
+	}
+	return Number(parts[2])
+}
 
-	async function validateOnSubmit() {
-		const result = await validation.validateField(
-			modelValue.value,
-			rules.value,
-		)
+export function useLunarCalendarValidation(modelValue: Ref<string | undefined>, props: LunarCalendarProps) {
+	const focused = ref(false)
 
-		return !result.hasError
-	}
+	const customRules = computed<ValidationRule[]>(() => {
+		const rules: ValidationRule[] = []
 
-	useValidatable(validateOnSubmit, validation.clearValidation)
+		rules.push({
+			type: 'custom',
+			options: {
+				validate: (value: string) => {
+					if (!value) return true
+					const regex = /^\d{2}\/\d{2}\/\d{4}$/
+					return regex.test(value)
+				},
+				message: 'La date est invalide.',
+			},
+		})
 
-	async function validate() {
-		return await validation.validateField(
-			modelValue.value,
-			rules.value,
-		)
-	}
+		const minYear = toValue(props.minYear)
+		const maxYear = toValue(props.maxYear)
+
+		if (minYear !== undefined && maxYear !== undefined) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const year = getYearFromModel(value)
+						if (year === null) return true
+						return year >= minYear && year <= maxYear
+					},
+					message: `L'année doit être comprise entre ${minYear} et ${maxYear}.`,
+				},
+			})
+		}
+		else if (minYear !== undefined) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const year = getYearFromModel(value)
+						if (year === null) return true
+						return year >= minYear
+					},
+					message: `L'année doit être supérieure ou égale à ${minYear}.`,
+				},
+			})
+		}
+		else if (maxYear !== undefined) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const year = getYearFromModel(value)
+						if (year === null) return true
+						return year <= maxYear
+					},
+					message: `L'année doit être inférieure ou égale à ${maxYear}.`,
+				},
+			})
+		}
 
-	return { ...validation, validate }
+		return rules
+	})
+
+	const defaultRules = computed<ValidationRule[]>(() => props.required
+		? [{
+				type: 'required',
+				options: {
+					message: `Le champ ${props.label || 'ce champ'} est requis.`,
+					fieldIdentifier: props.label,
+				},
+			}]
+		: [],
+	)
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue,
+		readonly: computed(() => props.readonly ?? false),
+		disabled: computed(() => props.disabled ?? false),
+		required: computed(() => props.required ?? false),
+		isValidateOnBlur: computed(() => props.isValidateOnBlur ?? true),
+		showSuccessMessages: computed(() => props.showSuccessMessages ?? false),
+		disableErrorHandling: computed(() => props.disableErrorHandling ?? false),
+		useVuetifyValidation: false,
+		label: computed(() => props.label),
+		customRules: computed(() => [...defaultRules.value, ...customRules.value]),
+		customWarningRules: computed(() => props.customWarningRules ?? []),
+		customSuccessRules: computed(() => props.customSuccessRules ?? []),
+		errorMessages: computed(() => props.errorMessages ?? []),
+		warningMessages: computed(() => props.warningMessages ?? []),
+		successMessages: computed(() => props.successMessages ?? []),
+		hasErrorProp: computed(() => props.hasError ?? false),
+		hasWarningProp: computed(() => props.hasWarning ?? false),
+		hasSuccessProp: computed(() => props.hasSuccess ?? false),
+		maxErrors: computed(() => props.maxErrors ?? 1),
+		focused,
+	})
+
+	return {
+		focused,
+		validate,
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+	}
 }