@cnamts/synapse 1.1.0 → 1.1.1

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

@@ -0,0 +1,1117 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import { VBtn, VForm } from 'vuetify/components'
+import MonthPicker from '../MonthPicker.vue'
+import { fn, userEvent, within } from '@storybook/test'
+import SyForm from '@/components/Customs/SyForm/SyForm.vue'
+import type { MonthPickerProps } from '../types'
+import { default as MonthPickerMeta } from '../MonthPicker.stories'
+
+const meta = {
+	title: 'Composants/Formulaires/MonthPicker/Validation',
+	component: MonthPicker,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	parameters: {
+		layout: 'fullscreen',
+		docs: {
+			description: {
+				component: `Exemples de validation pour le composant MonthPicker`,
+			},
+			controls: {
+				exclude: ['onUpdate:modelValue', 'onUpdate:open'],
+			},
+		},
+		controls: {
+			exclude: ['width', 'undefined', 'onUpdate:modelValue', 'onUpdate:open'],
+		},
+	},
+	argTypes: MonthPickerMeta.argTypes,
+	args: {
+		'modelValue': '',
+		'label': 'Mois de début',
+		'required': false,
+		'errorMessages': null,
+		'warningMessages': null,
+		'successMessages': null,
+		'readonly': false,
+		'disabled': false,
+		'customRules': [],
+		'customWarningRules': [],
+		'customSuccessRules': [],
+		'isValidateOnBlur': true,
+		'onUpdate:modelValue': fn(),
+	},
+} as Meta<typeof MonthPicker>
+
+export default meta
+
+type Story = StoryObj<MonthPickerProps>
+
+export const WithError: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<MonthPicker
+						v-model="selectedMonth"
+						label="Mois de début"
+						:custom-rules="customRules"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { MonthPicker } from '@cnamts/synapse'
+
+					const selectedMonth = ref('13/2025')
+
+					const customRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									return /^(0[1-9]|1[0-2])\\/\\d{4}$/.test(value)
+								},
+								message: 'Le format doit être MM/YYYY avec un mois entre 01 et 12 (ex: 03/2026).',
+								fieldIdentifier: 'selectedMonth',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: '13/2025',
+		customRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						return /^(0[1-9]|1[0-2])\/\d{4}$/.test(value)
+					},
+					message: 'Le format doit être MM/YYYY avec un mois entre 01 et 12 (ex: 03/2026).',
+					fieldIdentifier: 'selectedMonth',
+				},
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByRole('textbox')
+		await userEvent.clear(input)
+		await userEvent.type(input, '13/2025')
+		input.blur()
+	},
+
+}
+
+export const WithWarning: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<MonthPicker
+						v-model="selectedMonth"
+						label="Mois de début"
+						:custom-warning-rules="customWarningRules"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { MonthPicker } from '@cnamts/synapse'
+
+					const selectedMonth = ref('01/2035')
+
+					const customWarningRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || value === '') return true // Ne pas afficher de warning si le champ est vide
+									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.',
+								fieldIdentifier: 'selectedMonth',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: '01/2035',
+		customWarningRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						if (!value || value === '') return true // Ne pas afficher de warning si le champ est vide
+						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.',
+					fieldIdentifier: 'selectedMonth',
+				},
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByRole('textbox')
+		await userEvent.clear(input)
+		await userEvent.type(input, '01/2035')
+		input.blur()
+	},
+}
+
+export const WithSuccess: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<MonthPicker
+						v-model="selectedMonth"
+						label="Mois de début"
+						:custom-success-rules="customSuccessRules"
+						show-success-messages
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { MonthPicker } from '@cnamts/synapse'
+
+					const selectedMonth = ref('06/2026')
+
+					const customSuccessRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || value === '') return false // Ne pas afficher de succès si le champ est vide
+									const [, year] = value.split('/').map(Number) as [number, number]
+									const currentYear = new Date().getFullYear()
+									return year === currentYear
+								},
+								successMessage: 'La date est dans l\\'année en cours.',
+								fieldIdentifier: 'selectedMonth',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: '06/2026',
+		showSuccessMessages: true,
+		customSuccessRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						if (!value || value === '') return true // Ne pas afficher de success si le champ est vide
+						const [, year] = value.split('/').map(Number) as [number, number]
+						const currentYear = new Date().getFullYear()
+						return year === currentYear
+					},
+					successMessage: 'La date est dans l\'année en cours.',
+					fieldIdentifier: 'selectedMonth',
+				},
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByRole('textbox')
+		await userEvent.clear(input)
+		const currentYear = new Date().getFullYear()
+		await userEvent.type(input, `06/${currentYear}`)
+		input.blur()
+	},
+}
+
+export const WithCustomRules: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<MonthPicker
+						v-model="selectedMonth"
+						label="Mois de début"
+						:custom-rules="customRules"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { MonthPicker } from '@cnamts/synapse'
+
+					const selectedMonth = ref('')
+
+					const customRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || !/^\\d{2}\\/\\d{4}$/.test(value)) {
+										return false
+									}
+									return true
+								},
+								message: 'Le format doit être MM/YYYY (ex: 03/2026).',
+								fieldIdentifier: 'selectedMonth',
+							},
+						},
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value) return true // Ne pas afficher d'erreur si le champ est vide
+									const [month] = value.split('/').map(Number)
+									if (!month || month < 1 || month > 12) {
+										return false
+									}
+									return true
+								},
+								message: 'Le mois doit être compris entre 01 et 12.',
+								fieldIdentifier: 'selectedMonth',
+							},
+						},
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value) return true // Ne pas afficher d'erreur si le champ est vide
+									const [, year] = value.split('/').map(Number) as [number, number]
+									const currentYear = new Date().getFullYear()
+									if (year < currentYear - 10) {
+										return false
+									}
+									return true
+								},
+								message: 'La date ne peut pas être antérieure à 10 ans.',
+								fieldIdentifier: 'selectedMonth',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { MonthPicker },
+		setup() {
+			const selectedMonth = ref(args.modelValue ?? '')
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/^\d{2}\/\d{4}$/.test(value)) {
+								return false
+							}
+							return true
+						},
+						message: 'Le format doit être MM/YYYY (ex: 03/2026).',
+						fieldIdentifier: 'selectedMonth',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || value === '') return true // Ne pas afficher d'erreur si le champ est vide
+							const [month] = value.split('/').map(Number)
+							if (!month || month < 1 || month > 12) {
+								return false
+							}
+							return true
+						},
+						message: 'Le mois doit être compris entre 01 et 12.',
+						fieldIdentifier: 'selectedMonth',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || value === '') return true // Ne pas afficher d'erreur si le champ est vide
+							const [, year] = value.split('/').map(Number) as [number, number]
+							const currentYear = new Date().getFullYear()
+							if (year < currentYear - 10) {
+								return false
+							}
+							return true
+						},
+						message: 'La date ne peut pas être antérieure à 10 ans.',
+						fieldIdentifier: 'selectedMonth',
+					},
+				},
+			]
+
+			return { args, selectedMonth, customRules }
+		},
+		template: `
+			<div>
+				<p class="mb-2">Saisissez un mois pour voir les différents types de validation :</p>
+				<MonthPicker
+					v-bind="args"
+					v-model="selectedMonth"
+					:custom-rules="customRules"
+					width="400px"
+				/>
+				<div class="mt-4">
+					<p><strong>Conseils pour tester :</strong></p>
+					<ul>
+						<li>Laissez le champ vide pour voir l'erreur de champ requis</li>
+						<li>Saisissez un mois invalide (ex: 13/2026) pour voir l'erreur de format</li>
+						<li>Saisissez une date à plus de 5 ans (ex: 01/2032) pour voir l'avertissement</li>
+						<li>Saisissez une date entre aujourd'hui et dans 5 ans pour voir le message de succès</li>
+					</ul>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const DisableErrorHandling: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: `
+### Désactivation de la gestion des erreurs
+
+Cette story illustre l'utilisation de la propriété \`disableErrorHandling\` qui permet de désactiver complètement
+la gestion et l'affichage des erreurs dans un champ, même si des règles de validation sont définies.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <!-- Champ avec validation normale -->
+  <MonthPicker
+    v-model="value1"
+    label="Avec validation"
+    required
+    :custom-rules="customRules"
+  />
+
+  <!-- Champ avec gestion d'erreurs désactivée -->
+  <MonthPicker
+    v-model="value2"
+    label="Sans gestion d'erreurs"
+    required
+    disable-error-handling
+    :custom-rules="customRules"
+  />
+</template>`,
+			},
+		],
+	},
+	render: () => ({
+		components: { MonthPicker },
+		setup() {
+			const value1 = ref('')
+			const value2 = ref('')
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/^(0[1-9]|1[0-2])\/\d{4}$/.test(value)) {
+								return 'Le format doit être MM/YYYY avec un mois valide (ex: 03/2026).'
+							}
+							return true
+						},
+						fieldIdentifier: 'selectedMonth',
+					},
+				},
+			]
+
+			return { value1, value2, customRules }
+		},
+		template: `
+			<div>
+				<p class="mb-4">Cette démonstration compare un MonthPicker standard et un avec <code>disableErrorHandling=true</code>.</p>
+
+				<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
+					<div>
+						<p class="text-subtitle-2 mb-2">Validation normale</p>
+						<MonthPicker
+							v-model="value1"
+							label="Mois de début"
+							required
+							:custom-rules="customRules"
+						/>
+					</div>
+
+					<div>
+						<p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
+						<MonthPicker
+							v-model="value2"
+							label="Mois de début"
+							required
+							disable-error-handling
+							:custom-rules="customRules"
+						/>
+					</div>
+				</div>
+
+				<div class="mt-4 text-body-2">
+					<p>Instructions :</p>
+					<ol>
+						<li class="ml-4">Cliquez dans un champ puis en dehors pour déclencher la validation</li>
+						<li class="ml-4">Le champ de gauche affichera une erreur requise, mais pas celui de droite</li>
+					</ol>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+/**
+ * Validation déclenchée à chaque frappe (isValidateOnBlur: false).
+ */
+export const ValidateOnInput: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation à la saisie
+
+Lorsque \`isValidateOnBlur\` vaut \`false\`, la validation se déclenche à chaque modification
+de la valeur plutôt qu'à la perte de focus. Utile pour un retour immédiat à l'utilisateur.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<MonthPicker
+		v-model="selectedMonth"
+		label="Mois de début"
+		required
+		:is-validate-on-blur="false"
+		:custom-rules="[
+			{
+				type: 'custom',
+				options: {
+					message: 'Le format doit être MM/YYYY (ex: 03/2026).',
+					validate: (value) => /^(0[1-9]|1[0-2])\\/\\d{4}$/.test(value),
+				},
+			},
+		]"
+		show-success-messages
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { MonthPicker } from '@cnamts/synapse'
+
+const selectedMonth = ref('')
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { MonthPicker },
+		setup() {
+			const selectedMonth = ref('')
+			return { args, selectedMonth }
+		},
+		template: `
+			<div>
+				<p class="mb-4">La validation se déclenche à chaque frappe (<code>isValidateOnBlur="false"</code>).</p>
+				<MonthPicker
+					v-model="selectedMonth"
+					label="Mois de début"
+					required
+					:is-validate-on-blur="false"
+					:custom-rules="[
+						{
+							type: 'custom',
+							options: {
+								message: 'Le format doit être MM/YYYY (ex: 03/2026).',
+								validate: (value) => /^(0[1-9]|1[0-2])\\/\\d{4}$/.test(value),
+							},
+						},
+					]"
+					show-success-messages
+					width="400px"
+				/>
+			</div>
+		`,
+	}),
+}
+
+/**
+ * Messages de validation injectés directement par le parent (errorMessages, warningMessages, successMessages).
+ */
+export const ExternalMessages: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Messages externes
+
+Les props \`errorMessages\`, \`warningMessages\` et \`successMessages\` permettent d'injecter
+des messages depuis le parent sans déclencher de règle de validation.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<MonthPicker
+		v-model="selectedMonth"
+		label="Mois de début"
+		:error-messages="errorMessages"
+		:warning-messages="warningMessages"
+		:success-messages="successMessages"
+		show-success-messages
+	/>
+	<div class="mt-4">
+		<VBtn @click="setError">Simuler une erreur</VBtn>
+		<VBtn @click="setWarning" class="ml-2">Simuler un avertissement</VBtn>
+		<VBtn @click="setSuccess" class="ml-2">Simuler un succès</VBtn>
+		<VBtn @click="reset" class="ml-2">Réinitialiser</VBtn>
+	</div>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { MonthPicker } from '@cnamts/synapse'
+
+const selectedMonth = ref('')
+const errorMessages = ref<string[] | null>(null)
+const warningMessages = ref<string[] | null>(null)
+const successMessages = ref<string[] | null>(null)
+
+function setError() {
+	errorMessages.value = ['Ce mois est déjà utilisé dans un autre dossier']
+	warningMessages.value = null
+	successMessages.value = null
+}
+function setWarning() {
+	errorMessages.value = null
+	warningMessages.value = ["Ce mois est proche d'une échéance importante"]
+	successMessages.value = null
+}
+function setSuccess() {
+	errorMessages.value = null
+	warningMessages.value = null
+	successMessages.value = ['Mois accepté par le serveur']
+}
+function reset() {
+	errorMessages.value = null
+	warningMessages.value = null
+	successMessages.value = null
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { MonthPicker, VBtn },
+		setup() {
+			const selectedMonth = ref('')
+			const errorMessages = ref<string[] | null>(null)
+			const warningMessages = ref<string[] | null>(null)
+			const successMessages = ref<string[] | null>(null)
+
+			function setError() {
+				errorMessages.value = ['Ce mois est déjà utilisé dans un autre dossier']
+				warningMessages.value = null
+				successMessages.value = null
+			}
+			function setWarning() {
+				errorMessages.value = null
+				warningMessages.value = ['Ce mois est proche d\'une échéance importante']
+				successMessages.value = null
+			}
+			function setSuccess() {
+				errorMessages.value = null
+				warningMessages.value = null
+				successMessages.value = ['Mois accepté par le serveur']
+			}
+			function reset() {
+				errorMessages.value = null
+				warningMessages.value = null
+				successMessages.value = null
+			}
+
+			return { args, selectedMonth, errorMessages, warningMessages, successMessages, setError, setWarning, setSuccess, reset }
+		},
+		template: `
+			<div>
+				<p class="mb-4">
+					Les messages ci-dessous sont injectés par le parent sans déclencher de règle de validation.
+				</p>
+				<MonthPicker
+					v-model="selectedMonth"
+					label="Mois de début"
+					:error-messages="errorMessages"
+					:warning-messages="warningMessages"
+					:success-messages="successMessages"
+					show-success-messages
+					width="400px"
+				/>
+				<div class="mt-4 d-flex flex-wrap ga-2">
+					<VBtn color="error" @click="setError">Simuler une erreur</VBtn>
+					<VBtn color="warning" @click="setWarning">Simuler un avertissement</VBtn>
+					<VBtn color="success" @click="setSuccess">Simuler un succès</VBtn>
+					<VBtn @click="reset">Réinitialiser</VBtn>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const SyFormValidation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <SyForm @submit="handleSubmit">
+        <MonthPicker
+            v-model="selectedMonth"
+            label="Mois de début"
+            :custom-rules="customRules"
+			required
+        />
+        <div class="mt-4">
+            <VBtn type="submit" color="primary">Valider</VBtn>
+        </div>
+    </SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { MonthPicker, SyForm } from '@cnamts/synapse'
+
+const selectedMonth = ref('')
+
+const customRules = [
+    {
+        type: 'custom',
+        options: {
+            validate: (value: string) => {
+                if (!value || !/^(0[1-9]|1[0-2])\\/\\d{4}$/.test(value)) {
+                    return false
+                }
+                return true
+            },
+			message: 'Le format doit être MM/YYYY avec un mois valide (ex: 03/2026).',
+            fieldIdentifier: 'selectedMonth',
+        },
+    },
+]
+
+function handleSubmit(e) {
+    const isValid = e.isValid
+    alert(isValid ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { MonthPicker, VBtn, SyForm },
+		setup() {
+			const selectedMonth = ref('')
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/^(0[1-9]|1[0-2])\/\d{4}$/.test(value)) {
+								return false
+							}
+							return true
+						},
+						message: 'Le format doit être MM/YYYY avec un mois valide (ex: 03/2026).',
+						fieldIdentifier: 'selectedMonth',
+					},
+				},
+			]
+
+			function handleSubmit(e: { isValid: boolean }) {
+				const isValid = e.isValid
+				alert(isValid ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selectedMonth, customRules, handleSubmit }
+		},
+		template: `
+			<div>
+				<SyForm @submit="handleSubmit">
+					<MonthPicker
+						v-model="selectedMonth"
+						v-bind="args"
+						:custom-rules="customRules"
+						width="400px"
+						required
+					/>
+					<div class="mt-4">
+						<VBtn type="submit" color="primary">Valider</VBtn>
+					</div>
+				</SyForm>
+			</div>
+		`,
+	}),
+}
+
+export const VFormValidation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VForm @submit.prevent="handleSubmit">
+		<MonthPicker
+			ref="fieldRef"
+			v-model="selectedMonth"
+			label="Mois de début"
+			:custom-rules="customRules"
+			required
+		/>
+		<div class="mt-4">
+			<VBtn type="submit" color="primary">Valider</VBtn>
+		</div>
+	</VForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { MonthPicker } from '@cnamts/synapse'
+
+const selectedMonth = ref('')
+const fieldRef = ref<InstanceType<typeof MonthPicker> | null>(null)
+
+const customRules = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: string) => {
+				if (!value || !/^(0[1-9]|1[0-2])\\/\\d{4}$/.test(value)) {
+					return false
+				}
+				return true
+			},
+			message: 'Le format doit être MM/YYYY avec un mois valide (ex: 03/2026).',
+			fieldIdentifier: 'selectedMonth',
+		},
+	},
+]
+
+async function handleSubmit() {
+	const result = await fieldRef.value?.validateOnSubmit()
+	alert(result ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { MonthPicker, VBtn, VForm },
+		setup() {
+			const selectedMonth = ref('')
+			const fieldRef = ref<InstanceType<typeof MonthPicker> | null>(null)
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/^(0[1-9]|1[0-2])\/\d{4}$/.test(value)) {
+								return false
+							}
+							return true
+						},
+						message: 'Le format doit être MM/YYYY avec un mois valide (ex: 03/2026).',
+						fieldIdentifier: 'selectedMonth',
+					},
+				},
+			]
+
+			async function handleSubmit() {
+				const result = await (fieldRef.value!.validateOnSubmit! as () => Promise<boolean>)()
+				alert(result ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selectedMonth, customRules, handleSubmit, fieldRef }
+		},
+		template: `
+			<div>
+				<VForm @submit.prevent="handleSubmit">
+					<MonthPicker
+						v-bind="args"
+						ref="fieldRef"
+						v-model="selectedMonth"
+						label="Mois de début"
+						:custom-rules="customRules"
+						required
+						width="400px"
+					/>
+					<div class="mt-4">
+						<VBtn type="submit" color="primary">Valider</VBtn>
+					</div>
+				</VForm>
+			</div>
+		`,
+	}),
+}
+
+export const SyFormVuetifyValidation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <SyForm @submit="handleSubmit">
+        <MonthPicker
+            v-model="selectedMonth"
+            label="Mois de début"
+            :use-vuetify-validation="true"
+            :rules="vuetifyRules"
+        />
+        <div class="mt-4">
+            <VBtn type="submit" color="primary">Valider</VBtn>
+        </div>
+    </SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { MonthPicker, SyForm } from '@cnamts/synapse'
+
+const selectedMonth = ref('')
+
+const vuetifyRules = [
+    (value: string) => !!value || 'Le mois est requis',
+    (value: string) => /^(0[1-9]|1[0-2])\\/\\d{4}$/.test(value) || 'Le format doit être MM/YYYY (ex: 03/2026)',
+]
+
+function handleSubmit(e) {
+    const isValid = e.isValid
+    alert(isValid ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { MonthPicker, VBtn, SyForm },
+		setup() {
+			const selectedMonth = ref('')
+
+			const vuetifyRules = [
+				(value: string) => !!value || 'Le mois est requis',
+				(value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value) || 'Le format doit être MM/YYYY (ex: 03/2026)',
+			]
+
+			function handleSubmit(e: { isValid: boolean }) {
+				const isValid = e.isValid
+				alert(isValid ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selectedMonth, vuetifyRules, handleSubmit }
+		},
+		template: `
+			<div>
+				<SyForm @submit="handleSubmit">
+					<MonthPicker
+						v-model="selectedMonth"
+						v-bind="args"
+						:use-vuetify-validation="true"
+						:rules="vuetifyRules"
+						width="400px"
+					/>
+					<div class="mt-4">
+						<VBtn type="submit" color="primary">Valider</VBtn>
+					</div>
+				</SyForm>
+			</div>
+		`,
+	}),
+}
+
+export const VFormVuetifyValidation: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Validation de style Vuetify
+
+En passant \`useVuetifyValidation="true"\`, le composant délègue la validation à Vuetify.
+Les règles sont de simples fonctions qui retournent \`true\` si la valeur est valide,
+ou un message d'erreur (chaîne de caractères) sinon — exactement comme avec la prop \`rules\`
+native de Vuetify.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VForm @submit.prevent="handleSubmit">
+		<MonthPicker
+			v-model="selectedMonth"
+			label="Mois de début"
+			:use-vuetify-validation="true"
+			:rules="rules"
+			required
+			:is-validate-on-blur="true"
+		/>
+		<div class="mt-4">
+			<VBtn type="submit" color="primary">Valider</VBtn>
+		</div>
+	</VForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { MonthPicker } from '@cnamts/synapse'
+
+const selectedMonth = ref('')
+
+const rules = [
+	(value: string) => !!value || 'Le mois est requis',
+	(value: string) => /^(0[1-9]|1[0-2])\\/\\d{4}$/.test(value) || 'Le format doit être MM/YYYY (ex: 03/2026)',
+]
+
+async function handleSubmit(e: Promise<{ valid: boolean }>) {
+	const result = await e
+	alert(result.valid ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { MonthPicker, VBtn, VForm },
+		setup() {
+			const selectedMonth = ref('')
+			const fieldRef = ref()
+
+			const rules = [
+				(value: string) => !!value || 'Le mois est requis',
+				(value: string) => /^(0[1-9]|1[0-2])\/\d{4}$/.test(value) || 'Le format doit être MM/YYYY (ex: 03/2026)',
+			]
+
+			async function handleSubmit(e: Promise<{ valid: boolean }>) {
+				const result = await e
+				alert(result.valid ? 'Mois valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, selectedMonth, fieldRef, rules, handleSubmit }
+		},
+		template: `
+			<div>
+				<p class="mb-4">
+					Les règles sont des fonctions Vuetify natives <code>(value) => true | 'message'</code>.
+					Cliquez sur <strong>Valider</strong> ou quittez le champ pour déclencher la validation.
+				</p>
+				<VForm @submit.prevent="handleSubmit">
+					<MonthPicker
+						v-bind="args"
+						v-model="selectedMonth"
+						label="Mois de début"
+						:use-vuetify-validation="true"
+						:rules="rules"
+						:is-validate-on-blur="true"
+						width="400px"
+					/>
+					<div class="mt-4">
+						<VBtn type="submit" color="primary">Valider</VBtn>
+					</div>
+				</VForm>
+			</div>
+		`,
+	}),
+	args: {
+		showSuccessMessages: true,
+	},
+}