@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/PasswordField/locales.ts

@@ -3,4 +3,6 @@ export const locales = {
 	showPassword: 'Afficher le mot de passe',
 	showedPassword: 'Le mot de passe est visible',
 	hidedPassword: 'Le mot de passe est caché',
+	required: 'Le mot de passe est requis',
+	clearPassword: (label: string) => `Vider ${label}`,
 }

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

@@ -1,17 +1,16 @@
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import PasswordField from '../PasswordField.vue'
 import { describe, it, expect } from 'vitest'
 
-// 1. Define an interface for the properties/methods you're testing
 interface PasswordFieldVM {
 	showEyeIcon: boolean
 	errors: string[]
+	warnings: string[]
+	successes: string[]
 	validateOnSubmit: () => Promise<boolean>
 	hasError: boolean
 	hasWarning: boolean
 	hasSuccess: boolean
-	validationIcon: string
-	validationIconColor: string
 }
 
 describe('PasswordField.vue', () => {
@@ -22,11 +21,10 @@ describe('PasswordField.vue', () => {
 
 	it('toggles password visibility', async () => {
 		const wrapper = mount(PasswordField, { props: { label: 'Password' } })
-		// 2. Cast wrapper.vm as your interface
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
 		const button = wrapper.find('.password-toggle-button')
-		expect(vm.showEyeIcon).toBe(false) // from your interface
+		expect(vm.showEyeIcon).toBe(false)
 		await button.trigger('click')
 		expect(vm.showEyeIcon).toBe(true)
 		await button.trigger('click')
@@ -40,146 +38,186 @@ describe('PasswordField.vue', () => {
 		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['new-password'])
 	})
 
-	it('validates the password field on blur', async () => {
+	it('shows clear button and clears value when clearable is enabled', async () => {
+		const withoutClearWrapper = mount(PasswordField, {
+			props: {
+				label: 'Password',
+				modelValue: 'initial-password',
+				clearable: false,
+			},
+		})
+		expect(withoutClearWrapper.find('.password-clear-button').exists()).toBe(false)
+
 		const wrapper = mount(PasswordField, {
 			props: {
-				required: true,
 				label: 'Password',
+				modelValue: 'initial-password',
+				clearable: true,
 			},
 		})
-		const vm = wrapper.vm as unknown as PasswordFieldVM
 
-		const input = wrapper.find('input')
-		await input.trigger('blur')
-		expect(vm.errors).toContain('Le mot de passe est requis')
+		const clearButton = wrapper.find('.password-clear-button')
+		expect(clearButton.exists()).toBe(true)
+
+		await clearButton.trigger('click')
+
+		const emitted = wrapper.emitted('update:modelValue')?.at(-1)
+		expect(emitted).toEqual([''])
 	})
 
-	it('validates fields on submit', async () => {
+	it('validates the password field on blur', async () => {
 		const wrapper = mount(PasswordField, {
 			props: {
-				modelValue: '',
-				variantStyle: 'underlined',
 				required: true,
 				label: 'Password',
 			},
 		})
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
-		const result = await vm.validateOnSubmit()
-		expect(result).toBe(false)
+		const input = wrapper.find('input')
+		await input.trigger('focus')
+		await wrapper.vm.$nextTick()
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
 		expect(vm.errors).toContain('Le mot de passe est requis')
+	})
 
-		await wrapper.setProps({ modelValue: 'valid-password' })
-		const validResult = await vm.validateOnSubmit()
+	it('validates fields on submit', async () => {
+		const emptyWrapper = mount(PasswordField, {
+			props: { modelValue: '', variantStyle: 'underlined', required: true, label: 'Password' },
+		})
+		const emptyVm = emptyWrapper.vm as unknown as PasswordFieldVM
+		const result = await emptyVm.validateOnSubmit()
+		expect(result).toBe(false)
+		expect(emptyVm.errors).toContain('Le mot de passe est requis')
+
+		const validWrapper = mount(PasswordField, {
+			props: { modelValue: 'valid-password', variantStyle: 'underlined', required: true, label: 'Password' },
+		})
+		const validVm = validWrapper.vm as unknown as PasswordFieldVM
+		const validResult = await validVm.validateOnSubmit()
 		expect(validResult).toBe(true)
-		expect(wrapper.emitted().submit).toBeTruthy()
 	})
 
 	it('displays warning and success messages', async () => {
-		const wrapper = mount(PasswordField, {
+		const warningWrapper = mount(PasswordField, {
 			props: {
 				label: 'Password',
 				modelValue: 'test',
+				showSuccessMessages: true,
 				warningMessages: ['Attention: mot de passe court'],
 				successMessages: ['Mot de passe valide'],
 			},
 		})
-
-		const messages = wrapper.findAll('.v-messages__message')
+		const messages = warningWrapper.findAll('.v-messages__message')
 		expect(messages.length).toBe(1)
 		expect(messages[0]?.text()).toBe('Attention: mot de passe court')
 
-		await wrapper.setProps({ warningMessages: [] })
-		const successMessages = wrapper.findAll('.v-messages__message')
-		expect(successMessages.length).toBe(1)
-		expect(successMessages[0]?.text()).toBe('Mot de passe valide')
-	})
-
-	it('handles custom validation rules', async () => {
-		const wrapper = mount(PasswordField, {
+		const successWrapper = mount(PasswordField, {
 			props: {
 				label: 'Password',
 				modelValue: 'test',
-				customRules: [{
-					type: 'custom',
-					options: {
-						message: 'Le mot de passe doit contenir au moins 8 caractères',
-						validate: (value: string) => value.length >= 8,
-					},
-				}],
-				customWarningRules: [{
-					type: 'custom',
-					options: {
-						warningMessage: 'Le mot de passe pourrait être plus fort',
-						validate: (value: string) => /[A-Z]/.test(value),
-					},
-				}],
-				customSuccessRules: [{
-					type: 'custom',
-					options: {
-						successMessage: 'Mot de passe fort',
-						validate: (value: string) => value.length >= 12,
-					},
-				}],
+				successMessages: ['Mot de passe valide'],
+				showSuccessMessages: true,
 			},
 		})
+		const successMessages = successWrapper.findAll('.v-messages__message')
+		expect(successMessages.length).toBe(1)
+		expect(successMessages[0]?.text()).toBe('Mot de passe valide')
+	})
 
-		const vm = wrapper.vm as unknown as PasswordFieldVM
-
-		await wrapper.find('input').trigger('blur')
-		expect(vm.errors).toContain('Le mot de passe doit contenir au moins 8 caractères')
-
-		await wrapper.setProps({ modelValue: 'testpassword' })
-		await wrapper.find('input').trigger('blur')
-		const messages = wrapper.findAll('.v-messages__message')
-		expect(messages[0]?.text()).toBe('Le mot de passe pourrait être plus fort')
-
-		await wrapper.setProps({ modelValue: 'TestPassword123' })
-		await wrapper.find('input').trigger('blur')
-		const successMessages = wrapper.findAll('.v-messages__message')
-		expect(successMessages[0]?.text()).toBe('Mot de passe fort')
+	it('handles custom validation rules', async () => {
+		async function mountAndBlur(modelValue: string) {
+			const wrapper = mount(PasswordField, {
+				props: {
+					label: 'Password',
+					modelValue,
+					showSuccessMessages: true,
+					customRules: [{
+						type: 'custom',
+						options: {
+							message: 'Le mot de passe doit contenir au moins 8 caractères',
+							validate: (value: string) => value.length >= 8,
+						},
+					}],
+					customWarningRules: [{
+						type: 'custom',
+						options: {
+							warningMessage: 'Le mot de passe pourrait être plus fort',
+							validate: (value: string) => /[A-Z]/.test(value),
+						},
+					}],
+					customSuccessRules: [{
+						type: 'custom',
+						options: {
+							successMessage: 'Mot de passe fort',
+							validate: (value: string) => value.length >= 12,
+						},
+					}],
+				},
+			})
+			await wrapper.find('input').trigger('focus')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('input').trigger('blur')
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+			return wrapper
+		}
+
+		const errorWrapper = await mountAndBlur('test')
+		expect((errorWrapper.vm as unknown as PasswordFieldVM).errors).toContain('Le mot de passe doit contenir au moins 8 caractères')
+
+		const warningWrapper = await mountAndBlur('testpassword')
+		const warningMessages = warningWrapper.findAll('.v-messages__message')
+		expect(warningMessages[0]?.text()).toBe('Le mot de passe pourrait être plus fort')
+
+		const successWrapper = await mountAndBlur('TestPassword123')
+		expect((successWrapper.vm as unknown as PasswordFieldVM).successes).toContain('Mot de passe fort')
 	})
 
 	it('displays validation states based on validation rules', async () => {
-		const wrapper = mount(PasswordField, {
-			props: {
-				label: 'Password',
-				modelValue: 'test',
-				customRules: [{
-					type: 'custom',
-					options: {
-						message: 'Le mot de passe doit contenir au moins 8 caractères',
-						validate: (value: string) => value.length >= 8,
-					},
-				}],
-				customWarningRules: [{
-					type: 'custom',
-					options: {
-						warningMessage: 'Le mot de passe pourrait être plus fort',
-						validate: (value: string) => /[A-Z]/.test(value),
-					},
-				}],
-				customSuccessRules: [{
-					type: 'custom',
-					options: {
-						successMessage: 'Mot de passe fort',
-						validate: (value: string) => value.length >= 12,
-					},
-				}],
-			},
-		})
-
-		await wrapper.find('input').trigger('blur')
-
-		const vm = wrapper.vm as unknown as PasswordFieldVM
-		expect(vm.hasError).toBe(true)
-
-		await wrapper.setProps({ modelValue: 'testpassword' })
-		await wrapper.find('input').trigger('blur')
-		expect(vm.hasWarning).toBe(true)
-
-		await wrapper.setProps({ modelValue: 'TestPassword123' })
-		await wrapper.find('input').trigger('blur')
-		expect(vm.hasSuccess).toBe(true)
+		async function mountAndBlur(modelValue: string) {
+			const wrapper = mount(PasswordField, {
+				props: {
+					label: 'Password',
+					modelValue,
+					customRules: [{
+						type: 'custom',
+						options: {
+							message: 'Le mot de passe doit contenir au moins 8 caractères',
+							validate: (value: string) => value.length >= 8,
+						},
+					}],
+					customWarningRules: [{
+						type: 'custom',
+						options: {
+							warningMessage: 'Le mot de passe pourrait être plus fort',
+							validate: (value: string) => /[A-Z]/.test(value),
+						},
+					}],
+					customSuccessRules: [{
+						type: 'custom',
+						options: {
+							successMessage: 'Mot de passe fort',
+							validate: (value: string) => value.length >= 12,
+						},
+					}],
+				},
+			})
+			await wrapper.find('input').trigger('focus')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('input').trigger('blur')
+			await wrapper.vm.$nextTick()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+			return wrapper.vm as unknown as PasswordFieldVM
+		}
+
+		expect((await mountAndBlur('test')).hasError).toBe(true)
+		expect((await mountAndBlur('testpassword')).hasWarning).toBe(true)
+		expect((await mountAndBlur('TestPassword123')).hasSuccess).toBe(true)
 	})
 })

package/src/components/PasswordField/tests/PasswordField.visual.cy.ts

@@ -0,0 +1,49 @@
+import PasswordField from '../PasswordField.vue'
+
+describe('PasswordField - Visual regression tests', () => {
+	it('displays the password field by default', () => {
+		cy.mountWithVuetify(PasswordField, {
+			props: { label: 'Mot de passe' },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('password-field-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the password field as required', () => {
+		cy.mountWithVuetify(PasswordField, {
+			props: {
+				label: 'Mot de passe',
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('password-field-required', cy.get('.v-text-field'))
+	})
+
+	it('displays the password field in disabled state', () => {
+		cy.mountWithVuetify(PasswordField, {
+			props: {
+				label: 'Mot de passe',
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('password-field-disabled', cy.get('.v-text-field'))
+	})
+
+	it('displays the password field with underlined variant', () => {
+		cy.mountWithVuetify(PasswordField, {
+			props: {
+				label: 'Mot de passe',
+				variantStyle: 'underlined',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('password-field-underlined', cy.get('.v-text-field'))
+	})
+})

package/src/components/PasswordField/types.ts

@@ -0,0 +1,17 @@
+import type { FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import type { CustomizableOptions } from '@/composables/useCustomizableOptions'
+import type { ColorType } from '@/components/Customs/SyTextField/types'
+
+export interface PasswordFieldProps extends CustomizableOptions, FieldValidationProps {
+	modelValue?: string | null
+	variantStyle?: 'outlined' | 'underlined'
+	color?: ColorType
+	label: string
+	clearable?: boolean
+	placeholder?: string
+	displayAsterisk?: boolean
+	bgColor?: string
+	autocompleteType?: 'current-password' | 'new-password'
+	helpText?: string
+	hideDetails?: boolean
+}

package/src/components/PasswordField/usePasswordFieldValidation.ts

@@ -0,0 +1,100 @@
+import { mdiAlertCircle, mdiAlert, mdiCheck } from '@mdi/js'
+import { computed, ref, type Ref } from 'vue'
+import type { ValidationRule as VuetifyValidationRule } from 'vuetify'
+import { locales } from './locales'
+import type { ValidationRule } from '@/composables/validation/useValidation'
+import { useValidation } from '@/composables/unifyValidation/useValidation'
+
+export function usePasswordField(params: {
+	password: Ref<string | null>
+	focused: Ref<boolean>
+	readonly: Ref<boolean>
+	disabled: Ref<boolean>
+	label: Ref<string>
+	required: Ref<boolean>
+	isValidateOnBlur: Ref<boolean>
+	showSuccessMessages: Ref<boolean>
+	disableErrorHandling: Ref<boolean>
+	useVuetifyValidation: Ref<boolean>
+	rules: Ref<VuetifyValidationRule[] | undefined>
+	customRules: Ref<ValidationRule[] | undefined>
+	customWarningRules: Ref<ValidationRule[] | undefined>
+	customSuccessRules: Ref<ValidationRule[] | undefined>
+	errorMessages: Ref<string[] | null | undefined>
+	warningMessages: Ref<string[] | null | undefined>
+	successMessages: Ref<string[] | null | undefined>
+	hasErrorProp: Ref<boolean | undefined>
+	hasWarningProp: Ref<boolean | undefined>
+	hasSuccessProp: Ref<boolean | undefined>
+	maxErrors: Ref<number | undefined>
+}) {
+	const alertMessage = ref('')
+
+	const allCustomRules = computed<ValidationRule[]>(() => {
+		const rules: ValidationRule[] = []
+
+		if (params.required.value) {
+			rules.push({
+				type: 'required',
+				options: {
+					message: locales.required,
+					fieldIdentifier: params.label.value || 'password',
+				},
+			})
+		}
+
+		return [...rules, ...(params.customRules.value || [])]
+	})
+
+	const { errors, warnings, successes, hasError, hasWarning, hasSuccess, validate, clearValidation } = useValidation({
+		modelValue: params.password,
+		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: allCustomRules,
+		customWarningRules: computed<ValidationRule[]>(() => params.customWarningRules.value || []),
+		customSuccessRules: computed<ValidationRule[]>(() => params.customSuccessRules.value || []),
+		errorMessages: params.errorMessages,
+		warningMessages: params.warningMessages,
+		successMessages: params.successMessages,
+		hasErrorProp: computed<boolean>(() => params.hasErrorProp.value ?? false),
+		hasWarningProp: computed<boolean>(() => params.hasWarningProp.value ?? false),
+		hasSuccessProp: computed<boolean>(() => params.hasSuccessProp.value ?? false),
+		maxErrors: computed<number>(() => params.maxErrors.value ?? 1),
+		focused: params.focused,
+	})
+
+	const validationIcon = computed(() => {
+		if (hasError.value) return mdiAlertCircle
+		if (hasWarning.value) return mdiAlert
+		if (hasSuccess.value) return mdiCheck
+		return ''
+	})
+
+	const validationColor = computed(() => {
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'onWarningVariant'
+		if (hasSuccess.value) return 'onSuccessVariant'
+		return 'rgb(var(--v-theme-onSurface))'
+	})
+
+	return {
+		alertMessage,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		validationIcon,
+		validationColor,
+		validate,
+		clearValidation,
+	}
+}

package/src/components/PeriodField/PeriodField.mdx

@@ -23,7 +23,6 @@ import * as PeriodFieldStories from "./PeriodField.stories.ts";
 	import { PeriodField } from '@cnamts/synapse'
 
 	const selectedPeriod = ref({ from: null, to: null })
-import '../../stories/styles/shared.css';
 </script>
 
 <template>

package/src/components/PeriodField/PeriodField.stories.ts

@@ -567,8 +567,9 @@ export const WithSuccess: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<PeriodField 
+					<PeriodField
 						v-model="selectedPeriod"
+						:show-success-messages="true"
 						:custom-rules="[
 							{ type: 'notWeekend', options: { message: 'La date ne peut pas être un weekend', successMessage: 'La date n\\'est pas un week-end' } }
 						]"
@@ -599,6 +600,7 @@ export const WithSuccess: Story = {
 		displayAppendIcon: true,
 		disabled: false,
 		noIcon: false,
+		showSuccessMessages: true,
 		modelValue: { from: '22/01/2024', to: '23/01/2024' },
 		customRules: [
 			{

package/src/components/PeriodField/PeriodField.vue

@@ -54,7 +54,7 @@
 		placeholderTo: 'Fin',
 		readonly: false,
 		required: false,
-		showSuccessMessages: true,
+		showSuccessMessages: false,
 		showWeekNumber: false,
 	})
 

package/src/components/PeriodField/tests/PeriodField.visual.cy.ts

@@ -0,0 +1,39 @@
+import PeriodField from '../PeriodField.vue'
+
+describe('PeriodField - Visual regression tests', () => {
+	it('displays the period field by default', () => {
+		cy.mountWithVuetify(PeriodField)
+
+		cy.get('.period-field').should('be.visible')
+		cy.matchImageSnapshot('period-field-default', cy.get('.period-field'))
+	})
+
+	it('displays the period field with a value', () => {
+		cy.mountWithVuetify(PeriodField, {
+			props: {
+				modelValue: { from: '01/01/2025', to: '31/12/2025' },
+			},
+		})
+
+		cy.get('.period-field').should('be.visible')
+		cy.matchImageSnapshot('period-field-with-value', cy.get('.period-field'))
+	})
+
+	it('displays the period field in no calendar mode', () => {
+		cy.mountWithVuetify(PeriodField, {
+			props: { noCalendar: true },
+		})
+
+		cy.get('.period-field').should('be.visible')
+		cy.matchImageSnapshot('period-field-no-calendar', cy.get('.period-field'))
+	})
+
+	it('displays the period field as required', () => {
+		cy.mountWithVuetify(PeriodField, {
+			props: { required: true },
+		})
+
+		cy.get('.period-field').should('be.visible')
+		cy.matchImageSnapshot('period-field-required', cy.get('.period-field'))
+	})
+})

package/src/components/PhoneField/PhoneField.mdx

@@ -23,14 +23,13 @@ import { PhoneField } from '@cnamts/synapse'
 import { ref } from 'vue'
 
 const value = ref('')
-import '../../stories/styles/shared.css';
 
 const handleChange = (newValue) => {
     console.log('Value changed:', newValue)
 }
 const customIndicatifs = ref([
-    { code: '+99', country: 'Utopia', abbreviation: 'UT', mask: '## ## ## ##', phoneLength: 8 },
-    { code: '+98', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##', phoneLength: 18 },
+    { code: '+99', country: 'Utopia', abbreviation: 'UT', mask: '## ## ## ##' },
+    { code: '+98', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##' },
 ])
 </script>