@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/Customs/SyCheckbox/composables/useSyCheckboxValidation.ts

@@ -0,0 +1,105 @@
+import { computed, ref, toRef, type ComputedRef, type Ref } from 'vue'
+import { useValidation, type ValidationRule } from '@/composables/unifyValidation/useValidation'
+import type { SyCheckboxValidationProps } from '../types'
+
+export interface UseSyCheckboxValidationReturn {
+	validate: () => Promise<boolean>
+	validateOnSubmit: () => Promise<boolean>
+	clearValidation: () => void
+	errors: Ref<string[]>
+	warnings: Ref<string[]>
+	successes: Ref<string[]>
+	hasError: ComputedRef<boolean | undefined>
+	hasWarning: ComputedRef<boolean | undefined>
+	hasSuccess: ComputedRef<boolean | undefined>
+	defaultRules: ComputedRef<ValidationRule[]>
+	focused: Ref<boolean>
+}
+
+/**
+ * Composable de validation du composant SyCheckbox
+ *
+ * Version simplifiée du système unifié : pour une case à cocher, « required » signifie
+ * que la case doit être cochée (`value === true`). On utilise donc une règle `custom`
+ * plutôt que la règle `required` générique, qui considère `false` comme une valeur valide.
+ *
+ * @example
+ * const { validate, errors, hasError } = useSyCheckboxValidation(props, model, focused)
+ */
+export function useSyCheckboxValidation(
+	props: SyCheckboxValidationProps,
+	model: Ref<boolean | null>,
+	focused?: Ref<boolean>,
+): UseSyCheckboxValidationReturn {
+	const focusedRef = focused !== undefined ? focused : ref(false)
+
+	// « required » pour une case = doit être cochée (true)
+	const defaultRules = computed<ValidationRule[]>(() =>
+		props.required
+			? [{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === true,
+						message: `Le champ ${props.label || 'ce champ'} est requis.`,
+						fieldIdentifier: props.label,
+					},
+				}]
+			: [],
+	)
+
+	// Vuetify ne gère pas les messages de succès : on les désactive en mode Vuetify
+	const effectiveShowSuccessMessages = computed(() =>
+		props.useVuetifyValidation ? false : (props.showSuccessMessages ?? false),
+	)
+
+	const {
+		validate,
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+	} = useValidation({
+		modelValue: model,
+		readonly: toRef(() => props.readonly ?? false),
+		disabled: toRef(() => props.disabled ?? false),
+		required: toRef(() => props.required ?? false),
+		isValidateOnBlur: toRef(() => props.isValidateOnBlur ?? false),
+		showSuccessMessages: effectiveShowSuccessMessages,
+		disableErrorHandling: toRef(() => props.disableErrorHandling ?? false),
+		useVuetifyValidation: toRef(() => props.useVuetifyValidation ?? false),
+		label: toRef(() => props.label ?? ''),
+		rules: toRef(() => props.rules),
+		customRules: computed(() => [...defaultRules.value, ...(props.customRules ?? [])]),
+		customWarningRules: toRef(() => props.customWarningRules ?? []),
+		customSuccessRules: toRef(() => props.customSuccessRules ?? []),
+		errorMessages: toRef(() => props.errorMessages ?? null),
+		warningMessages: toRef(() => props.warningMessages ?? null),
+		successMessages: toRef(() => props.successMessages ?? null),
+		hasErrorProp: toRef(() => props.hasError ?? false),
+		hasWarningProp: toRef(() => props.hasWarning ?? false),
+		hasSuccessProp: toRef(() => props.hasSuccess ?? false),
+		maxErrors: toRef(() => props.maxErrors ?? 1),
+		focused: focusedRef,
+	})
+
+	const validateOnSubmit = async (): Promise<boolean> => {
+		return await validate()
+	}
+
+	return {
+		validate,
+		validateOnSubmit,
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		defaultRules,
+		focused: focusedRef,
+	}
+}

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

@@ -178,4 +178,110 @@ describe('SyCheckbox', () => {
 		await wrapper.find('.v-checkbox').trigger('click')
 		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 	})
+
+	it('affiche le helpText quand aucun message de validation n\'est présent', () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				helpText: 'Texte d\'aide',
+			},
+		})
+
+		const help = wrapper.find('.help-text-below')
+		expect(help.exists()).toBe(true)
+		expect(help.text()).toContain('Texte d\'aide')
+	})
+
+	it('masque le helpText et affiche l\'erreur quand la validation échoue', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				helpText: 'Texte d\'aide',
+				required: true,
+				modelValue: false,
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.find('.help-text-below').exists()).toBe(false)
+		expect(wrapper.find('.v-messages').text()).toContain('CGU est requis')
+	})
+
+	it('disableErrorHandling : aucune erreur affichée même si requis et décoché', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				required: true,
+				disableErrorHandling: true,
+				modelValue: false,
+			},
+		})
+
+		const isValid = await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(isValid).toBe(true)
+		expect(wrapper.find('.error-field').exists()).toBe(false)
+		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+	})
+
+	it('affiche un message d\'avertissement via customWarningRules', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				modelValue: false,
+				customWarningRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: boolean) => value === true,
+						warningMessage: 'Avertissement de test',
+					},
+				}],
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.find('.warning-field').exists()).toBe(true)
+		expect(wrapper.find('.v-messages').text()).toContain('Avertissement de test')
+	})
+
+	it('affiche un message de succès via customSuccessRules et showSuccessMessages', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				modelValue: true,
+				showSuccessMessages: true,
+				customSuccessRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: boolean) => value === true,
+						successMessage: 'Succès de test',
+					},
+				}],
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.find('.success-field').exists()).toBe(true)
+		expect(wrapper.find('.v-messages').text()).toContain('Succès de test')
+	})
+
+	it('affiche les messages externes (errorMessages + hasError)', () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				hasError: true,
+				errorMessages: ['Erreur externe'],
+			},
+		})
+
+		expect(wrapper.find('.error-field').exists()).toBe(true)
+		expect(wrapper.find('.v-messages').text()).toContain('Erreur externe')
+	})
 })

package/src/components/Customs/SyCheckbox/tests/useSyCheckboxValidation.spec.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { defineComponent, ref, nextTick, type Ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { useSyCheckboxValidation, type UseSyCheckboxValidationReturn } from '../composables/useSyCheckboxValidation'
+import type { SyCheckboxValidationProps } from '../types'
+
+function createProps(overrides: Partial<SyCheckboxValidationProps> = {}): SyCheckboxValidationProps {
+	return {
+		label: 'Conditions générales',
+		required: false,
+		readonly: false,
+		disabled: false,
+		customRules: [],
+		customWarningRules: [],
+		customSuccessRules: [],
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		showSuccessMessages: false,
+		isValidateOnBlur: false,
+		...overrides,
+	}
+}
+
+// Exécute le composable dans un contexte de setup (requis par les composables Vuetify internes)
+function withValidation(props: SyCheckboxValidationProps, model: Ref<boolean | null>): UseSyCheckboxValidationReturn {
+	let result!: UseSyCheckboxValidationReturn
+	const Harness = defineComponent({
+		setup() {
+			result = useSyCheckboxValidation(props, model)
+			return () => null
+		},
+	})
+	mount(Harness)
+	return result
+}
+
+describe('useSyCheckboxValidation', () => {
+	describe('required (la case doit être cochée)', () => {
+		it('échoue quand la case est décochée', async () => {
+			const model = ref<boolean | null>(false)
+			const { validate, errors, hasError } = withValidation(createProps({ required: true }), model)
+
+			expect(await validate()).toBe(false)
+			await nextTick()
+			expect(hasError.value).toBe(true)
+			expect(errors.value.join(' ')).toContain('Conditions générales est requis')
+		})
+
+		it('réussit quand la case est cochée', async () => {
+			const model = ref<boolean | null>(true)
+			const { validate, hasError } = withValidation(createProps({ required: true }), model)
+
+			expect(await validate()).toBe(true)
+			await nextTick()
+			expect(hasError.value).toBeFalsy()
+		})
+	})
+
+	it('non requis : valide même décochée', async () => {
+		const model = ref<boolean | null>(false)
+		const { validate, hasError } = withValidation(createProps({ required: false }), model)
+
+		expect(await validate()).toBe(true)
+		expect(hasError.value).toBeFalsy()
+	})
+
+	it('customRules : la case doit être cochée', async () => {
+		const model = ref<boolean | null>(false)
+		const { validate, errors } = withValidation(
+			createProps({
+				customRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === true,
+						message: 'Doit être coché',
+					},
+				}],
+			}),
+			model,
+		)
+
+		expect(await validate()).toBe(false)
+		await nextTick()
+		expect(errors.value.join(' ')).toContain('Doit être coché')
+	})
+
+	it('disableErrorHandling : ne produit pas d\'erreur', async () => {
+		const model = ref<boolean | null>(false)
+		const { validate, hasError } = withValidation(
+			createProps({ required: true, disableErrorHandling: true }),
+			model,
+		)
+
+		expect(await validate()).toBe(true)
+		expect(hasError.value).toBeFalsy()
+	})
+})

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

@@ -0,0 +1,51 @@
+import type { FieldValidationProps, ValidationRule, VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+
+/**
+ * Props du composant SyCheckbox
+ */
+export interface SyCheckboxProps extends FieldValidationProps {
+	modelValue?: boolean | null
+	indeterminate?: boolean
+	label?: string
+	helpText?: string
+	ariaLabel?: string
+	ariaLabelledby?: string
+	title?: string
+	color?: string
+	hideDetails?: boolean | 'auto'
+	density?: 'default' | 'comfortable' | 'compact'
+	id?: string
+	name?: string
+	value?: unknown
+	trueValue?: unknown
+	falseValue?: unknown
+	controlsIds?: string[]
+	displayAsterisk?: boolean
+	decorative?: boolean
+}
+
+/**
+ * Props de validation passées au composable dédié
+ */
+export interface SyCheckboxValidationProps extends FieldValidationProps {
+	modelValue?: boolean | null
+	required?: boolean
+	readonly?: boolean
+	disabled?: boolean
+	label?: string
+	customRules?: ValidationRule[]
+	customWarningRules?: ValidationRule[]
+	customSuccessRules?: ValidationRule[]
+	isValidateOnBlur?: boolean
+	showSuccessMessages?: boolean
+	useVuetifyValidation?: boolean
+	rules?: VuetifyValidationRule[]
+	errorMessages?: string[] | null
+	warningMessages?: string[] | null
+	successMessages?: string[] | null
+	hasError?: boolean
+	hasWarning?: boolean
+	hasSuccess?: boolean
+	maxErrors?: number
+	disableErrorHandling?: boolean
+}

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+	import { mdiAlertOutline, mdiCheck, mdiAlertCircle } from '@mdi/js'
+	import { computed } from 'vue'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+
+	const props = defineProps<{
+		state?: 'default' | 'error' | 'success' | 'warning'
+	}>()
+
+	const validationIcon = computed(() => {
+		if (props.state === 'error') return mdiAlertCircle
+		if (props.state === 'warning') return mdiAlertOutline
+		if (props.state === 'success') return mdiCheck
+		return null
+	})
+
+	const className = computed(() => {
+		if (props.state === 'error') return 'error-icon'
+		if (props.state === 'warning') return 'warning-icon'
+		if (props.state === 'success') return 'success-icon'
+		return null
+	})
+</script>
+<template>
+	<SyIcon
+		v-if="validationIcon"
+		:icon="validationIcon"
+		:class="className"
+		class="field-state-icon"
+		decorative
+	/>
+</template>
+<style scoped lang="scss">
+.field-state-icon :deep(.v-icon__svg) {
+	opacity: 1;
+}
+
+.success-icon :deep(.v-icon__svg) {
+	fill: rgb(var(--v-theme-onSuccessVariant)) !important;
+}
+
+.warning-icon :deep(.v-icon__svg) {
+	fill: rgb(var(--v-theme-onWarningVariant)) !important;
+}
+
+.error-icon :deep(.v-icon__svg) {
+	fill: rgb(var(--v-theme-error)) !important;
+	opacity: 1;
+}
+</style>

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

@@ -22,6 +22,7 @@
 	import { useNumberField } from './useNumberField'
 	import { locales as defaultLocales } from './locales'
 	import type { SyTextFieldProps } from './types'
+	import FieldState from './FieldState.vue'
 
 	const props = withDefaults(
 		defineProps<SyTextFieldProps>(),
@@ -157,7 +158,7 @@
 	}
 
 	const focused = ref(false)
-	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess, iconColor, clearButtonColorClass, validationIcon, hasMessages } = useSyTextFieldValidation({
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess, iconColor, clearButtonColorClass, state, hasMessages } = useSyTextFieldValidation({
 		modelValue: model,
 		readonly: toRef(props, 'readonly'),
 		disabled: toRef(props, 'disabled'),
@@ -246,6 +247,10 @@
 			return
 		}
 
+		if (event.inputType === 'insertFromPaste') {
+			return
+		}
+
 		const hasDisallowed = props.type === 'number'
 			? hasDisallowedNumberCharacter(event.data)
 			: event.data.replace(TEL_ALLOWED_CHARACTERS_PATTERN, '') !== event.data
@@ -274,7 +279,7 @@
 				? isAllowedNumberCharacter(event.key)
 				: TEL_ALLOWED_SINGLE_CHARACTER_PATTERN.test(event.key)
 
-			if (!allowedNonCharacterKeys.includes(event.key) && event.key.length === 1 && !isAllowedCharacter) {
+			if (!allowedNonCharacterKeys.includes(event.key) && event.key?.length === 1 && !isAllowedCharacter) {
 				event.preventDefault()
 			}
 		}
@@ -293,14 +298,13 @@
 		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
 	})
 
-	// Détermine si le helpText doit être affiché à la position du message ou en dessous
+	// Détermine si le helpText doit être affiché dans le composant VTextField ou en dessous
 	const showHelpTextAsMessage = computed(() => {
-		// Afficher à la position du message si pas de messages d'erreur
 		return props.helpText && !hasMessages.value
 	})
 
 	const showHelpTextBelow = computed(() => {
-		// Afficher en dessous si il y a des messages d'erreur ET hideMessages n'est pas activé
+		// Afficher en dessous si il y a des messages d'erreur ET hideDetails n'est pas activé
 		return props.helpText && hasMessages.value && !props.hideDetails
 	})
 
@@ -718,10 +722,9 @@
 						@keydown.enter.stop
 						@keydown.space.stop
 					/>
-					<SyIcon
-						v-if="validationIcon && !props.appendInnerIcon"
-						:icon="validationIcon"
-						:decorative="true"
+					<FieldState
+						v-if="!props.appendInnerIcon"
+						:state="state"
 					/>
 					<SyIcon
 						v-if="props.appendInnerIcon && !props.noIcon"

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

@@ -1,7 +1,6 @@
 import { computed, type Ref } from 'vue'
 import { useValidation } from '@/composables/unifyValidation/useValidation'
 import type { ValidationRule as SyValidationRule, VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
-import { mdiAlertOutline, mdiCheck, mdiAlertCircle } from '@mdi/js'
 
 export function useSyTextFieldValidation(params: {
 	modelValue: Ref<string | number | null | undefined>
@@ -38,7 +37,7 @@ export function useSyTextFieldValidation(params: {
 			: [],
 	)
 
-	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess, clearValidation } = useValidation({
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess, state, clearValidation } = useValidation({
 		modelValue: params.modelValue,
 		readonly: params.readonly,
 		disabled: params.disabled,
@@ -75,15 +74,7 @@ export function useSyTextFieldValidation(params: {
 	// Le bouton clear garde toujours une couleur neutre, quel que soit l'état de validation
 	const clearButtonColorClass = computed(() => 'text-iconBase')
 
-	const validationIcon = computed(() => {
-		if (hasError.value) return mdiAlertCircle
-		if (hasWarning.value) return mdiAlertOutline
-		if (hasSuccess.value) return mdiCheck
-		return null
-	})
-
 	const hasMessages = computed(() => {
-		if (params.disableErrorHandling.value) return false
 		return (params.errorMessages.value?.length ?? 0) > 0 || hasError.value || hasWarning.value || (hasSuccess.value && params.showSuccessMessages.value)
 	})
 
@@ -96,8 +87,8 @@ export function useSyTextFieldValidation(params: {
 		hasSuccess,
 		iconColor,
 		clearButtonColorClass,
-		validationIcon,
 		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" />

package/src/components/DataListGroup/DataListGroup.mdx

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

package/src/components/DiacriticPicker/DiacriticPicker.mdx

@@ -90,7 +90,6 @@ Vous pouvez personnaliser la liste des caractères diacritiques affichés dans l
   import { ref } from 'vue'
   
   const text = ref('')
-import '../../stories/styles/shared.css';
   const caracteres = ['é', 'è', 'ê', 'à', 'ç', 'ù']
 </script>
 

package/src/components/DialogBox/DialogBox.mdx

@@ -22,7 +22,6 @@ import * as DialogBoxStories from './DialogBox.stories';
     import { ref } from 'vue'
 
     const dialogOpen = ref(false)
-import '../../stories/styles/shared.css';
 </script>
 
 <template>