@cnamts/synapse 1.0.27 → 1.1.1

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,
+	}
 }

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

@@ -0,0 +1,22 @@
+import MaintenancePage from '../MaintenancePage.vue'
+
+describe('MaintenancePage - Visual regression tests', () => {
+	it('displays the maintenance page by default', () => {
+		cy.mountWithVuetify(MaintenancePage)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('maintenance-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the maintenance page with custom content', () => {
+		cy.mountWithVuetify(MaintenancePage, {
+			props: {
+				pageTitle: 'Site en maintenance',
+				message: 'Nous effectuons des travaux de maintenance. Merci de réessayer plus tard.',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('maintenance-page-custom', cy.get('.v-application'))
+	})
+})

package/src/components/MonthPicker/MonthPicker.stories.ts

@@ -1,14 +1,14 @@
 import { fn } from '@storybook/test'
-import { nextTick, ref } from 'vue'
 import MonthPicker from './MonthPicker.vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
 import type SyTextField from '../Customs/SyTextField/SyTextField.vue'
-import SyForm from '../Customs/SyForm/SyForm.vue'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
 
 const meta: Meta<typeof MonthPicker> = {
 	title: 'Composants/Formulaires/MonthPicker',
 	component: MonthPicker,
 	argTypes: {
+		...getValidationDocumentation('base'),
 		'modelValue': {
 			control: 'text',
 			description: 'Valeur du sélecteur de mois au format "MM/YYYY".',
@@ -19,7 +19,29 @@ const meta: Meta<typeof MonthPicker> = {
 		'locales': {
 			description: 'Objet de traduction pour le sélecteur de mois. Par défaut, les traductions françaises sont utilisées.',
 			table: {
-				type: { summary: 'object' },
+				type: {
+					summary: 'object',
+					detail: `{
+	btnLabel: string,
+	headerSelectYear: string,
+	headerSelectMonth: string,
+	yearSelectorLabel: string,
+	monthSelectorLabel: string,
+	yearBtnLabelSelected: (selectedYear: string) => string,
+	yearBtnLabelUnselected: (selectedYear: string) => string,
+	monthBtnLabelSelected: (selectedMonth: string) => string,
+	monthBtnLabelUnselected: (selectedMonth: string) => string,
+	fieldRequired: (label: string) => string,
+}`,
+				},
+			},
+		},
+		'clearable': {
+			control: 'boolean',
+			description: 'Affiche un bouton permettant de vider le champ',
+			table: {
+				type: { summary: 'boolean' },
+				category: 'props',
 			},
 		},
 		'minYear': {
@@ -85,109 +107,20 @@ const meta: Meta<typeof MonthPicker> = {
 			},
 		},
 		'hint': {
-			description: 'Texte d’aide affiché sous le champ de saisie.',
+			description: 'Texte d’aide affiché sous le champ de saisie lorsque le champ est focus.',
 			control: 'text',
 			table: {
 				type: { summary: 'string' },
 				category: 'props',
 			},
 		},
-		'customRules': {
-			description: 'Règles de validation personnalisées pour les erreurs.',
-			table: {
-				type: { summary: 'ValidationRule[]' },
-				category: 'props',
-			},
-		},
-		'customWarningRules': {
-			description: 'Règles de validation personnalisées pour les avertissements.',
-			table: {
-				type: { summary: 'ValidationRule[]' },
-				category: 'props',
-			},
-		},
-		'customSuccessRules': {
-			description: 'Règles de validation personnalisées pour les succès.',
-			table: {
-				type: { summary: 'ValidationRule[]' },
-				category: 'props',
-			},
-			category: 'validation',
-		},
-		'errorMessages': {
-			description: 'Messages d’erreur personnalisés à afficher lorsque la validation échoue. Peut être une chaîne de caractères ou un tableau de chaînes.',
-			control: 'text',
-			table: {
-				type: { summary: 'string | string[]' },
-				category: 'props',
-			},
-		},
-		'warningMessages': {
-			description: 'Messages d’avertissement personnalisés à afficher lorsque la validation génère un avertissement. Peut être une chaîne de caractères ou un tableau de chaînes.',
-			control: 'text',
-			table: {
-				type: { summary: 'string | string[]' },
-				category: 'props',
-			},
-		},
-		'successMessages': {
-			description: 'Messages de succès personnalisés à afficher lorsque la validation réussit. Peut être une chaîne de caractères ou un tableau de chaînes.',
+		'helpText': {
+			description: 'Texte d’aide permanent affiché sous le champ de saisie.',
 			control: 'text',
 			table: {
-				type: { summary: 'string | string[]' },
-				category: 'props',
-			},
-		},
-		'hasError': {
-			description: 'Indique si le champ est en état d’erreur. Utilisé pour forcer l’affichage des messages d’erreur.',
-			control: 'boolean',
-			table: {
-				type: { summary: 'boolean' },
-				category: 'props',
-			},
-		},
-		'hasWarning': {
-			description: 'Indique si le champ est en état d’avertissement. Utilisé pour forcer l’affichage des messages d’avertissement.',
-			control: 'boolean',
-			table: {
-				type: { summary: 'boolean' },
-				category: 'props',
-			},
-		},
-		'hasSuccess': {
-			description: 'Indique si le champ est en état de succès. Utilisé pour forcer l’affichage des messages de succès.',
-			control: 'boolean',
-			table: {
-				type: { summary: 'boolean' },
-				category: 'props',
-			},
-		},
-		'showSuccessMessages': {
-			description: 'Indique si les messages de succès doivent être affichés.',
-			control: 'boolean',
-			table: {
-				type: { summary: 'boolean' },
-				category: 'props',
-			},
-		},
-		'disabled': {
-			description: 'Indique si le champ de saisie est désactivé. Lorsqu’il est désactivé, le sélecteur de mois ne peut pas être ouvert et aucune interaction n’est possible.',
-			control: 'boolean',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-				category: 'props',
-			},
-		},
-		'readonly': {
-			description: 'Indique si le champ de saisie est en lecture seule. Lorsqu’il est en lecture seule, le sélecteur de mois peut être ouvert pour afficher la valeur sélectionnée, mais aucune modification n’est possible.',
-			control: 'boolean',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
+				type: { summary: 'string' },
 				category: 'props',
 			},
-			category: 'props',
 		},
 		'onUpdate:modelValue': {
 			action: 'update:modelValue',
@@ -271,26 +204,16 @@ export const Default: Story = {
 	},
 }
 
-export const MonthValidation: Story = {
+export const Required: Story = {
 	args: {
-		'modelValue': '11/2025',
+		'modelValue': '',
 		'label': 'Début du projet',
+		'required': true,
+		'displayAsterisk': true,
+		'width': '400px',
 		'onUpdate:modelValue': fn(),
 		'onUpdate:open': fn(),
 	},
-	play: async ({ canvasElement }) => {
-		const input = canvasElement.querySelector('input') as HTMLInputElement
-		const currentDate = new Date()
-
-		setTimeout(async () => {
-			input.focus()
-			const futureYear = currentDate.getFullYear() + 6
-			input.value = `11/${futureYear}`
-			input.dispatchEvent(new Event('input'))
-			await nextTick()
-			input.dispatchEvent(new Event('blur'))
-		}, 100)
-	},
 	parameters: {
 		sourceCode: [
 			{
@@ -300,8 +223,9 @@ export const MonthValidation: Story = {
 					<MonthPicker
 						v-model="selectedMonth"
 						label="Début du projet"
-						:custom-rules
-						:custom-warning-rules
+						width="400px"
+						required
+						display-asterisk
 					/>
 				</template>
 				`,
@@ -312,114 +236,12 @@ export const MonthValidation: Story = {
 					import { MonthPicker } from '@cnamts/synapse'
 					import { ref } from 'vue'
 
-					const selectedMonth = ref('11/2025')
-
-					const customRules = [
-						{
-							type: 'required',
-							options: {
-								message: 'Ce champ est requis.',
-							},
-						},
-						{
-							type: 'custom',
-							options: {
-								validate: (value: string) => {
-									const [month] = value.split('/').map(Number)
-									if (
-										!value ||
-										!month ||
-										!/^\\d{2}\\/\\d{4}$/.test(value) ||
-										month < 1 ||
-										month > 12
-									) {
-										return false
-									}
-									return true
-								},
-								message: 'Format de mois invalide.',
-							},
-						},
-					]
-
-					const customWarningRules = [{
-						type: 'custom',
-						options: {
-							validate: (value: string) => {
-								const [month, year] = value.split('/').map(Number) as [number, number]
-								const currentDate = new Date()
-								const currentYear = currentDate.getFullYear()
-								const currentMonth = currentDate.getMonth() + 1
-								if (year > currentYear + 5 || (year === currentYear + 5 && month > currentMonth)) {
-									return false
-								}
-								return true
-							},
-							warningMessage: 'La date est plus de 5 ans dans le futur.',
-						},
-					}]
+					const selectedMonth = ref('')
 				</script>
 				`,
 			},
 		],
 	},
-	render: args => ({
-		components: { MonthPicker },
-		setup() {
-			const customRules = [
-				{
-					type: 'required',
-					options: {
-						message: 'Ce champ est requis.',
-					},
-				},
-				{
-					type: 'custom',
-					options: {
-						validate: (value: string) => {
-							const [month] = value.split('/').map(Number)
-							if (
-								!month
-								|| !/^\d{2}\/\d{4}$/.test(value)
-								|| month < 1
-								|| month > 12
-							) {
-								return false
-							}
-							return true
-						},
-						message: 'Format de mois invalide.',
-					},
-				},
-			]
-
-			const customWarningRules = [{
-				type: 'custom',
-				options: {
-					validate: (value: string) => {
-						const [month, year] = value.split('/').map(Number) as [number, number]
-						const currentDate = new Date()
-						const currentYear = currentDate.getFullYear()
-						const currentMonth = currentDate.getMonth() + 1
-						if (year > currentYear + 5 || (year === currentYear + 5 && month > currentMonth)) {
-							return false
-						}
-						return true
-					},
-					warningMessage: 'La date est plus de 5 ans dans le futur.',
-				},
-			}]
-			return { args, customRules, customWarningRules }
-		},
-		template: `
-			<MonthPicker
-				v-bind="args"
-				:custom-rules="customRules"
-				:custom-warning-rules="customWarningRules"
-				width="400px"
-			/>
-		`,
-	}),
 }
 
 export const CustomDisplayedYears: Story = {
@@ -460,68 +282,3 @@ export const CustomDisplayedYears: Story = {
 		],
 	},
 }
-
-export const Form: Story = {
-	args: {
-		modelValue: '',
-		label: 'Début du projet',
-		width: '400px',
-	},
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<SyForm @submit="handleSubmit">
-						<MonthPicker
-							v-model="selectedMonth"
-							label="Début du projet"
-							width="400px"
-							:custom-rules="[{ type: 'required', options: { message: 'Ce champ est requis.' } }]"
-						/>
-						<VBtn type="submit" color="primary" class="mt-4">Soumettre</VBtn>
-					</SyForm>
-				</template>
-				`,
-			}, {
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import { MonthPicker, SyForm } from '@cnamts/synapse'
-					import { ref } from 'vue'
-
-					const selectedMonth = ref('')
-
-					const handleSubmit = (e: { isValid: boolean }) => {
-						alert(e.isValid ? 'Le formulaire est valide.' : 'Le formulaire est invalide.')
-					}
-				</script>
-				`,
-			},
-		],
-	},
-	render: args => ({
-		components: { MonthPicker, SyForm },
-		setup() {
-			const selectedMonth = ref('')
-
-			const handleSubmit = (e: { isValid: boolean }) => {
-				alert(e.isValid ? 'Le formulaire est valide.' : 'Le formulaire est invalide.')
-			}
-
-			return { args, selectedMonth, handleSubmit }
-		},
-		template: `
-			<SyForm @submit="handleSubmit">
-				<MonthPicker
-					v-bind="args"
-					v-model="selectedMonth"
-					width="400px"
-					:custom-rules="[{ type: 'required', options: { message: 'Ce champ est requis.' } }]"
-				/>
-				<VBtn type="submit" color="primary" class="mt-4">Soumettre</VBtn>
-			</SyForm>
-		`,
-	}),
-}

package/src/components/MonthPicker/MonthPicker.vue

@@ -1,27 +1,25 @@
 <script lang="ts" setup>
-	import { computed, provide, ref, useAttrs, type ComponentPublicInstance } from 'vue'
+	import { computed, provide, ref, toRef, useAttrs, type ComponentPublicInstance } from 'vue'
 	import MonthPickerInput from './MonthPickerText/MonthPickerInput.vue'
 	import MonthPickerVisual from './MonthPickerVisual/MonthPickerVisual.vue'
 	import { watch } from 'vue'
 	import { locales as defaultLocales, localesKey } from './locales'
-	import { defaultTextFieldProps, useTextField, type TextFieldProps } from './MonthPickerText/useTextField'
-	import { defaultMonthPickerVisualProps, type MonthPickerVisualProps } from './MonthPickerVisual/MonthPickerVisualProps'
-	import { useMonthPickerValidation, type ValidationProps } from './useMonthPickerValidation'
+	import { defaultTextFieldProps, useTextField } from './MonthPickerText/useTextField'
+	import { defaultMonthPickerVisualProps } from './MonthPickerVisual/MonthPickerVisualProps'
+	import { useMonthPickerValidation } from './useMonthPickerValidation'
+	import { validationPropsDefaults } from '@/composables/unifyValidation/useValidation'
+	import type { MonthPickerProps } from './types'
 
-	const props = withDefaults(defineProps<{
-		modelValue?: string
-		locales?: typeof defaultLocales
-		disabled?: boolean
-		readonly?: boolean
-	} & TextFieldProps & ValidationProps & Partial<MonthPickerVisualProps>>(), {
+	const props = withDefaults(defineProps<MonthPickerProps>(), {
 		modelValue: undefined,
 		locales: () => defaultLocales,
-		hint: 'Format MM/AAAA',
-		showSuccessMessages: false,
+		helpText: 'Format MM/AAAA',
+		...validationPropsDefaults,
 		...defaultMonthPickerVisualProps,
 		...defaultTextFieldProps,
 		disabled: false,
 		readonly: false,
+		displayAsterisk: false,
 	})
 
 	provide(localesKey, computed(() => props.locales))
@@ -50,6 +48,58 @@
 			emits('update:modelValue', newValue)
 		}
 	})
+
+	const focused = ref(false)
+
+	const { errors, warnings, successes, hasError, hasWarning, hasSuccess, validate, clearValidation } = useMonthPickerValidation({
+		modelValue: internalValue,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: toRef(props, 'label'),
+		rules: toRef(props, 'rules'),
+		customRules: toRef(props, 'customRules'),
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused,
+		locales: toRef(props, 'locales'),
+	})
+
+	const inputProps = computed(() => ({
+		...attrs,
+		...useTextField(props).value,
+		required: props.required,
+		displayAsterisk: props.displayAsterisk,
+		errorMessages: errors.value,
+		warningMessages: warnings.value,
+		successMessages: successes.value,
+		hasError: hasError.value,
+		hasWarning: hasWarning.value,
+		hasSuccess: hasSuccess.value,
+		showSuccessMessages: props.showSuccessMessages,
+	}))
+
+	defineExpose({
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		validateOnSubmit: validate,
+		clearValidation,
+	})
 </script>
 
 <template>
@@ -57,11 +107,9 @@
 		<MonthPickerInput
 			ref="textInput"
 			v-model="internalValue"
-			v-bind="{
-				...attrs,
-				...useTextField(props).value,
-				...useMonthPickerValidation(props).value
-			}"
+			v-bind="inputProps"
+			@focus="focused = true"
+			@blur="focused = false"
 		/>
 		<MonthPickerVisual
 			v-model="internalValue"
@@ -74,6 +122,7 @@
 			:disabled
 			:readonly
 			@update:open="emits('update:open', $event)"
+			@update:model-value="validate"
 		/>
 	</div>
 </template>