@cnamts/synapse 1.1.0 → 1.1.1

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>

package/src/components/MonthPicker/MonthPickerText/MonthPickerInput.vue

@@ -3,48 +3,58 @@
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import { mdiCalendar } from '@mdi/js'
 	import { vMaska } from 'maska/vue'
-	import { nextTick, inject, ref, watch } from 'vue'
+	import { inject, ref, useId, watch } from 'vue'
 	import { locales as defaultLocales, localesKey } from '../locales'
 	import type { TextFieldProps } from './useTextField'
 	import { useTextField } from './useTextField'
-	import { useMonthPickerValidation, type ValidationProps } from '../useMonthPickerValidation'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		modelValue: string | undefined
-	} & TextFieldProps & ValidationProps>()
+		errorMessages?: string[] | null
+		warningMessages?: string[] | null
+		successMessages?: string[] | null
+		hasError?: boolean
+		hasWarning?: boolean
+		hasSuccess?: boolean
+		required?: boolean
+		displayAsterisk?: boolean
+		hideDetails?: boolean
+	} & TextFieldProps>(), {
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		hasError: false,
+		hasWarning: false,
+		hasSuccess: false,
+		required: false,
+		displayAsterisk: false,
+		hideDetails: false,
+	})
 
 	const emits = defineEmits<{
 		(e: 'update:modelValue', value: string | undefined): void
 	}>()
 
 	const locales = inject<typeof defaultLocales>(localesKey)!
-	const input = ref<InstanceType<typeof SyTextField>>()
 
 	const mask = '##/####'
 
 	const innerValue = ref<string | undefined>(props.modelValue)
+	const focused = ref(false)
+
 	watch(
 		() => props.modelValue,
 		async (newValue) => {
-			const shouldValidate = newValue !== innerValue.value
 			innerValue.value = newValue
-			if (shouldValidate) {
-				await nextTick()
-				input.value?.validateOnSubmit()
-			}
 		},
 	)
 
 	watch(innerValue, async (newValue) => {
-		if (newValue?.length === mask.length) {
-			await nextTick()
-			input.value?.validateOnSubmit()
-		}
-
 		emits('update:modelValue', newValue)
 	})
 
 	const toggleBtn = ref<HTMLButtonElement | null>(null)
+	const uniqueName = useId()
 	defineExpose({
 		toggleBtn,
 	})
@@ -52,13 +62,22 @@
 
 <template>
 	<SyTextField
-		ref="input"
 		v-model="innerValue"
 		v-maska="mask"
-		v-bind="{
-			...useTextField(props).value,
-			...useMonthPickerValidation(props).value
-		}"
+		v-bind="useTextField(props).value"
+		:name="uniqueName"
+		:error-messages="props.errorMessages"
+		:warning-messages="props.warningMessages"
+		:success-messages="props.successMessages"
+		:has-error="props.hasError"
+		:has-warning="props.hasWarning"
+		:has-success="props.hasSuccess"
+		:required="props.required"
+		:disable-error-handling="true"
+		:hide-details="props.hideDetails"
+		:display-asterisk="props.required && props.displayAsterisk"
+		@focus="focused = true"
+		@blur="focused = false"
 	>
 		<template #append>
 			<button
@@ -86,4 +105,9 @@
 	color: rgb(var(--v-theme-warning, 96, 72, 14));
 }
 
+:deep(.v-field__clearable .v-icon__svg) {
+	fill: rgb(var(--v-theme-iconBase)) !important;
+	opacity: var(--v-medium-emphasis-opacity) !important;
+}
+
 </style>

package/src/components/MonthPicker/MonthPickerText/useTextField.ts

@@ -4,15 +4,18 @@ export type TextFieldProps = {
 	label: string
 	density?: 'default' | 'comfortable' | 'compact'
 	hint?: string | false
+	helpText?: string
 	placeholder?: string
 	disabled?: boolean
 	readonly?: boolean
+	clearable?: boolean
 }
 
 export const defaultTextFieldProps = {
 	density: 'default',
 	disabled: false,
 	readonly: false,
+	clearable: false,
 } as const satisfies Partial<TextFieldProps>
 
 export function useTextField(props: TextFieldProps) {
@@ -20,8 +23,10 @@ export function useTextField(props: TextFieldProps) {
 		label: props.label,
 		density: props.density,
 		hint: props.hint || undefined,
+		helpText: props.helpText || undefined,
 		placeholder: props.placeholder,
 		disabled: props.disabled ? true : undefined,
 		readonly: props.readonly ? true : undefined,
+		clearable: props.clearable,
 	}))
 }