@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/PasswordField/PasswordField.vue

@@ -2,26 +2,54 @@
 	import { ref, computed, watch } from 'vue'
 	import { config } from './config'
 	import { locales } from './locales'
-	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
-	import { mdiEye, mdiEyeOff } from '@mdi/js'
-	// import deepMerge from 'deepmerge'
+	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+	import {
+		mdiEye,
+		mdiEyeOff,
+		mdiAlertCircle,
+		mdiAlert,
+		mdiCheckCircle,
+	} from '@mdi/js'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
-
-	type Rule = (value: string | null) => { error?: string, success?: string }
+	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+	import type { ColorType } from '@/components/Customs/SyTextField/types'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: string | null
-		outlined?: boolean
+		variantStyle?: 'outlined' | 'underlined'
+		color?: ColorType
+		label?: string
 		required?: boolean
+		errorMessages?: string[] | null
+		warningMessages?: string[] | null
+		successMessages?: string[] | null
+		isReadOnly?: boolean
+		isDisabled?: boolean
+		placeholder?: string
+		customRules?: ValidationRule[]
+		customWarningRules?: ValidationRule[]
+		customSuccessRules?: ValidationRule[]
+		showSuccessMessages?: boolean
+		displayAsterisk?: boolean
 		isValidateOnBlur?: boolean
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		customRules?: any
 	} & CustomizableOptions>(), {
 		modelValue: null,
-		outlined: true,
+		variantStyle: 'outlined',
+		color: 'primary',
+		label: undefined,
 		required: false,
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		isReadOnly: false,
+		isDisabled: false,
+		placeholder: undefined,
+		customRules: () => [],
+		customWarningRules: () => [],
+		customSuccessRules: () => [],
+		showSuccessMessages: true,
+		displayAsterisk: false,
 		isValidateOnBlur: true,
-		customRules: [],
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -43,147 +71,229 @@
 		},
 	)
 
-	const { generateRules } = useFieldValidation()
+	// Construction des règles de validation
+	const defaultRules = computed<ValidationRule[]>(() => {
+		const rules: ValidationRule[] = []
 
-	const defaultRules = [
-		...(props.required
-			? [{
+		if (props.required) {
+			rules.push({
 				type: 'required',
-				options: { message: 'Le mot de passe est requis.', fieldIdentifier: 'password' },
-			}]
-			: []),
-	]
-
-	const rules = computed(() => {
-		const baseRules = (props.required ? defaultRules : [])
-		return props.customRules ? generateRules([...baseRules, ...props.customRules]) : generateRules(baseRules)
-	})
-
-	const errors = ref<string[]>([])
-	const successes = ref<string[]>([])
+				options: {
+					message: 'Le mot de passe est requis',
+					fieldIdentifier: props.label || 'password',
+				},
+			})
+		}
 
-	const isValidating = ref(false)
+		// Règle pour le message de succès
+		rules.push({
+			type: 'custom',
+			options: {
+				validate: (value: string) => value ? true : 'Ce champ est requis',
+				successMessage: 'Mot de passe fort',
+				fieldIdentifier: props.label || 'password',
+			},
+		})
 
-	watch(() => password.value, () => {
-		validateFields()
-	}, { immediate: true })
+		return rules
+	})
 
-	watch(
-		() => props.isValidateOnBlur,
-		() => {
-			validateFields()
-		},
-		{ immediate: true },
-	)
+	// Initialisation du composable de validation
+	const { errors, warnings, successes, validateField } = useValidation({
+		customRules: defaultRules.value,
+		warningRules: props.customWarningRules || [],
+		successRules: props.customSuccessRules || [],
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: props.label || 'password',
+	})
 
-	watch(
-		() => props.required,
-		() => {
-			validateFields()
-		},
-		{ immediate: true },
-	)
+	// Computed pour les états de validation
+	const hasError = computed(() => errors.value.length > 0)
+	const hasWarning = computed(() => warnings.value.length > 0)
+	const hasSuccess = computed(() => successes.value.length > 0 && props.showSuccessMessages)
 
-	function validateFieldSet(value: string | null, rules: Rule[]) {
-		rules.forEach((rule) => {
-			const { error, success } = rule(value)
-			if (error) errors.value.push(error)
-			if (success && success !== 'Le champ est valide.') successes.value.push(success)
-		})
-	}
+	const validationIcon = computed(() => {
+		if (hasError.value) return mdiAlertCircle
+		if (hasWarning.value) return mdiAlert
+		if (hasSuccess.value) return mdiCheckCircle
+		return undefined
+	})
 
-	function validateFields(onBlur = false): void {
-		errors.value = []
-		successes.value = []
+	const validationColor = computed(() => {
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'warning'
+		if (hasSuccess.value) return 'success'
+		return 'rgb(0 0 0 / 100%)'
+	})
 
-		const shouldValidate = onBlur || !props.isValidateOnBlur
+	// Synchronisation des messages externes
+	watch(() => props.errorMessages, (newVal) => {
+		if (newVal) {
+			errors.value = newVal
+		}
+	}, { immediate: true })
 
-		if (!shouldValidate) return
+	watch(() => props.warningMessages, (newVal) => {
+		if (newVal) {
+			warnings.value = newVal
+		}
+	}, { immediate: true })
 
-		validateFieldSet(password.value, rules.value)
-	}
+	watch(() => props.successMessages, (newVal) => {
+		if (newVal) {
+			successes.value = newVal
+		}
+	}, { immediate: true })
 
-	function emitChangeEvent(value: string): void {
-		emit('update:modelValue', value)
-		validateFields()
-	}
+	watch(() => password.value, () => {
+		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
+		emit('update:modelValue', password.value)
+	})
 
 	function handleKeydown(event: KeyboardEvent): void {
 		if (event.key === 'Enter') {
-			emit('submit')
+			validateOnSubmit()
 		}
 	}
 
-	function validateOnSubmit() {
-		isValidating.value = true
-		validateFields(true)
-		return errors.value.length === 0
+	const validateOnSubmit = () => {
+		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
+		const isValid = errors.value.length === 0
+		if (isValid) {
+			emit('submit')
+		}
+		return isValid
 	}
 
 	defineExpose({
+		showEyeIcon,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
 		validateOnSubmit,
 	})
 </script>
 
 <template>
-	<VTextField
+	<SyTextField
 		v-model="password"
-		:class="{
-			'v-messages__message--success': successes.length > 0
-		}"
+		v-bind="options"
+		:variant-style="props.variantStyle"
+		:color="props.color"
+		:label="props.label"
+		:required="props.required"
 		:error-messages="errors"
-		:messages="successes"
+		:warning-messages="warnings"
+		:success-messages="successes"
+		:is-read-only="props.isReadOnly"
+		:is-disabled="props.isDisabled"
+		:placeholder="props.placeholder"
 		:type="showEyeIcon ? 'text' : 'password'"
-		:variant="outlined ? 'outlined' : 'underlined'"
+		:display-asterisk="props.displayAsterisk"
+		:rules="[...defaultRules, ...props.customRules]"
 		class="vd-password"
-		color="primary"
-		title="password"
-		validate-on="blur lazy"
-		@blur="validateFields(true)"
+		:validate-on="props.isValidateOnBlur ? 'blur lazy' : 'lazy'"
+		@blur="props.isValidateOnBlur ? validateField(password, [...defaultRules, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || []) : () => {}"
 		@keydown="handleKeydown"
-		@update:model-value="emitChangeEvent"
 	>
 		<template #append-inner>
-			<VBtn
-				:aria-label="btnLabel"
-				class="mx-auto"
+			<div
+				class="d-flex align-center"
 				v-bind="options.btn"
-				@click="showEyeIcon = !showEyeIcon"
 			>
-				<VIcon v-bind="options.icon">
-					{{ showEyeIcon ? eyeIcon : eyeOffIcon }}
-				</VIcon>
-			</VBtn>
+				<VIcon
+					:icon="validationIcon"
+					:color="validationColor"
+					class="mr-2"
+				/>
+				<VIcon
+					:icon="showEyeIcon ? eyeIcon : eyeOffIcon"
+					color="rgb(0 0 0 / 70%)"
+					:aria-label="btnLabel"
+					role="button"
+					@click="showEyeIcon = !showEyeIcon"
+				/>
+			</div>
 		</template>
-	</VTextField>
+	</SyTextField>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
 .vd-password {
-	.v-btn--icon.v-btn--density-default {
-		width: var(--v-btn-height);
-		height: var(--v-btn-height);
+	:deep(.v-field) {
+		.v-field__input {
+			padding-right: 48px;
+		}
+	}
+}
+
+.warning-field {
+	:deep(.v-input__details > .v-icon),
+	:deep(.v-input__prepend > .v-icon),
+	:deep(.v-input__append > .v-icon) {
+		opacity: 1 !important;
 	}
 
-	:deep(.v-field.v-field--variant-underlined .v-field__append-inner) {
-		padding-top: 0;
-		padding-bottom: 0;
-		display: flex;
-		align-items: center;
+	:deep(.v-field) {
+		color: tokens.$colors-border-warning !important;
+
+		.v-field__outline {
+			color: tokens.$colors-border-warning !important;
+		}
 	}
 
-	:deep(.v-field.v-field--variant-underlined .v-field__input) {
-		padding-top: calc(var(--v-field-input-padding-top) - 15px);
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: tokens.$colors-border-warning !important;
+		}
 	}
 }
 
-.v-messages__message--success {
-	color: tokens.$colors-border-success !important;
+.error-field {
+	:deep(.v-input__control),
+	:deep(.v-messages__message) {
+		color: tokens.$colors-text-error !important;
+	}
 
 	.v-field--active & {
+		color: tokens.$colors-border-error !important;
+	}
+}
+
+.success-field {
+	:deep(.v-input__details > .v-icon),
+	:deep(.v-input__prepend > .v-icon),
+	:deep(.v-input__append > .v-icon) {
+		opacity: 1 !important;
+	}
+
+	:deep(.v-field) {
 		color: tokens.$colors-border-success !important;
+
+		.v-field__outline {
+			color: tokens.$colors-border-success !important;
+		}
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: tokens.$colors-border-success !important;
+		}
+	}
+}
+
+.basic-field {
+	:deep(.v-icon__svg) {
+		fill: rgb(0 0 0 / 70%);
 	}
 }
 </style>

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

@@ -7,8 +7,12 @@ import { createVuetify } from 'vuetify'
 interface PasswordFieldVM {
 	showEyeIcon: boolean
 	errors: string[]
-	isValidating: boolean
 	validateOnSubmit: () => boolean
+	hasError: boolean
+	hasWarning: boolean
+	hasSuccess: boolean
+	validationIcon: string
+	validationIconColor: string
 }
 
 describe('PasswordField.vue', () => {
@@ -36,7 +40,7 @@ describe('PasswordField.vue', () => {
 		// 2. Cast wrapper.vm as your interface
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
-		const button = wrapper.find('button')
+		const button = wrapper.find('[role="button"]')
 		expect(vm.showEyeIcon).toBe(false) // from your interface
 		await button.trigger('click')
 		expect(vm.showEyeIcon).toBe(true)
@@ -62,35 +66,160 @@ describe('PasswordField.vue', () => {
 			},
 			props: {
 				required: true,
+				label: 'Password',
 			},
 		})
 		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.')
+		expect(vm.errors).toContain('Le mot de passe est requis')
 	})
 
-	it('validates fields on submit and sets validating flag', async () => {
+	it('validates fields on submit', async () => {
 		const wrapper = mount(PasswordField, {
 			global: {
 				plugins: [vuetify],
 			},
 			props: {
 				modelValue: '',
-				outlined: false,
+				variantStyle: 'underlined',
 				required: true,
+				label: 'Password',
 			},
 		})
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
 		const result = vm.validateOnSubmit()
-		expect(vm.isValidating).toBe(true)
 		expect(result).toBe(false)
+		expect(vm.errors).toContain('Le mot de passe est requis')
 
-		// This awaits the Vue microtask queue to let any reactive data settle
-		await wrapper.vm.$nextTick()
+		// Test avec un mot de passe valide
+		await wrapper.setProps({ modelValue: 'valid-password' })
+		const validResult = vm.validateOnSubmit()
+		expect(validResult).toBe(true)
+		expect(wrapper.emitted().submit).toBeTruthy()
+	})
+
+	it('displays warning and success messages', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: 'test',
+				warningMessages: ['Attention: mot de passe court'],
+				successMessages: ['Mot de passe valide'],
+			},
+		})
+
+		const messages = wrapper.findAll('.v-messages__message')
+		expect(messages.length).toBe(1) // SyTextField affiche soit les warnings, soit les succès
+		expect(messages[0].text()).toBe('Attention: mot de passe court')
+
+		// Simuler la suppression du warning pour voir le message de succès
+		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, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				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,
+					},
+				}],
+			},
+		})
+
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+
+		// Forcer la validation initiale
+		await wrapper.find('input').trigger('blur')
+		expect(vm.errors).toContain('Le mot de passe doit contenir au moins 8 caractères')
+
+		// Mettons un mot de passe plus long mais sans majuscule -> warning
+		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')
+
+		// Mettons un mot de passe fort -> succès
+		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('displays validation states based on validation rules', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				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,
+					},
+				}],
+			},
+		})
+
+		// Forcer la validation initiale
+		await wrapper.find('input').trigger('blur')
+
+		// État d'erreur
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+		expect(vm.hasError).toBe(true)
+
+		// État d'avertissement
+		await wrapper.setProps({ modelValue: 'testpassword' })
+		await wrapper.find('input').trigger('blur')
+		expect(vm.hasWarning).toBe(true)
 
-		expect(vm.errors).toContain('Le mot de passe est requis.')
+		// État de succès
+		await wrapper.setProps({ modelValue: 'TestPassword123' })
+		await wrapper.find('input').trigger('blur')
+		expect(vm.hasSuccess).toBe(true)
 	})
 })

package/src/components/PeriodField/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />