@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/Captcha/validation/validation.stories.ts

@@ -0,0 +1,1194 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn, userEvent, within } from '@storybook/test'
+import { ref, watch } from 'vue'
+import Captcha from '../Captcha.vue'
+import { VBtn, VCard, VForm } from 'vuetify/components'
+import SyForm from '../../Customs/SyForm/SyForm.vue'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
+
+const meta: Meta = {
+	title: 'Composants/Formulaires/Captcha/Validation',
+	component: Captcha,
+	argTypes: {
+		...getValidationDocumentation('string'),
+	},
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component: 'Exemples de validation pour le composant Captcha.',
+			},
+		},
+		controls: { exclude: ['onUpdate:modelValue', 'onUpdate:type', 'onImageError', 'onAudioError', 'onCreationError'] },
+	},
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onUpdate:type': fn(),
+		'onImageError': fn(),
+		'onAudioError': fn(),
+		'onCreationError': fn(),
+		'readonly': false,
+		'disabled': false,
+		'required': false,
+		'isValidateOnBlur': true,
+		'showSuccessMessages': true,
+		'disableErrorHandling': false,
+		'customRules': [],
+		'customWarningRules': [],
+		'customSuccessRules': [],
+		'errorMessages': null,
+		'warningMessages': null,
+		'successMessages': null,
+		'hasError': false,
+		'hasWarning': false,
+		'hasSuccess': false,
+		'useVuetifyValidation': false,
+		'maxErrors': 1,
+		'urlCreate': 'https://free.mockerapi.com/mock/0adac32b-e832-4553-aa7f-0011b7f35f0c',
+		'urlGetImage': '/captcha/captcha.png',
+		'urlGetAudio': '/captcha/captcha.mp3',
+		'type': 'image',
+		'modelValue': 'abc',
+	},
+}
+
+export default meta
+type StoryArgs = {
+	modelValue?: string
+} & Record<string, unknown>
+
+type Story = StoryObj<StoryArgs>
+
+export const WithError: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Validation bloquante via `customRules` (message d\'erreur personnalisé).',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<Captcha
+	v-model="modelValue"
+	required
+	:custom-rules="[
+		{
+			type: 'custom',
+			options: {
+				validate: (v) => (v as string).length >= 6,
+				message: 'Le captcha doit contenir au moins 6 caractères.',
+				successMessage: 'Le captcha contient au moins 6 caractères.'
+			}
+		}
+	]"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ref } from 'vue'
+import { Captcha } from '@cnamts/synapse'
+
+const modelValue = ref('ytq')
+				`,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { Captcha, VCard },
+			setup() {
+				const captchaValue = ref(args.modelValue)
+				watch(() => args.modelValue, () => {
+					captchaValue.value = args.modelValue
+				})
+
+				return { args, captchaValue }
+			},
+			template: `
+				<VCard class="pa-8" max-width="400" min-width="400">
+					<Captcha 
+						v-bind="args"
+						v-model="captchaValue"
+					/>
+				</VCard>
+			`,
+		}
+	},
+	args: {
+		modelValue: 'ytq',
+		// Validation à la saisie pour que l'état (erreur/succès) se mette à jour
+		// immédiatement quand on modifie le champ, sans attendre le blur.
+		isValidateOnBlur: false,
+		customRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (v: unknown) => {
+						return (String(v || '')).length >= 6
+					},
+					message: 'Le captcha doit contenir au moins 6 caractères.',
+					successMessage: 'Le captcha contient au moins 6 caractères.',
+				},
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByRole('textbox')
+		await userEvent.clear(input)
+		await userEvent.type(input, 'ytq')
+		input.blur()
+	},
+}
+
+export const WithWarning: Story = {
+	...WithError,
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Validation non bloquante via `customWarningRules` (message d\'avertissement personnalisé).',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<Captcha
+	v-model="modelValue"
+	required
+	:custom-warning-rules="[
+		{
+			type: 'custom',
+			options: {
+				validate: (v) => (String(v || '')).length >= 6,
+				warningMessage: 'Le captcha devrait idéalement contenir au moins 6 caractères.'
+			}
+		}
+]"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ref } from 'vue'
+import { Captcha } from '@cnamts/synapse'
+
+const modelValue = ref('ytq')
+				`,
+			},
+		],
+	},
+	args: {
+		...WithError.args,
+		customRules: [],
+		customWarningRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (v: unknown) => {
+						return (String(v || '')).length >= 6
+					},
+					warningMessage: 'Le captcha devrait idéalement contenir au moins 6 caractères.',
+				},
+			},
+		],
+	},
+}
+
+export const WithSuccess: Story = {
+	...WithError,
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Validation de succès via `customSuccessRules` (message de succès personnalisé).',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<Captcha
+	v-model="modelValue"
+	required
+	:custom-rules="[
+		{
+			type: 'custom',
+			options: {
+				validate: (v) => (String(v || '')).length >= 6,
+				message: 'Le captcha doit contenir au moins 6 caractères.'
+			}
+		}
+	]"
+	:custom-success-rules="[
+		{
+			type: 'custom',
+			options: {
+				validate: (v) => (String(v || '')).length >= 6,
+				successMessage: 'Le captcha est correctement renseigné.'
+			}
+		}
+]"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ref } from 'vue'
+import { Captcha } from '@cnamts/synapse'
+
+const modelValue = ref('ytqZNq')
+				`,
+			},
+		],
+	},
+	args: {
+		...WithError.args,
+		customRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (v: unknown) => (String(v || '')).length >= 6,
+					message: 'Le captcha doit contenir au moins 6 caractères.',
+				},
+			},
+		],
+		customSuccessRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (v: unknown) => (String(v || '')).length >= 6,
+					successMessage: 'Le captcha est correctement renseigné.',
+				},
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByRole('textbox')
+		await userEvent.clear(input)
+		await userEvent.type(input, 'ytqZNq')
+		input.blur()
+	},
+}
+
+export const ValidateOnInput: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Validation déclenchée à chaque frappe via `isValidateOnBlur=false`.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<Captcha
+	v-model="value"
+	required
+	:is-validate-on-blur="false"
+	:custom-rules="[
+		{
+			type: 'custom',
+			options: {
+				validate: (value) => String(value || '').length >= 6,
+				message: 'Le captcha doit contenir au moins 6 caractères.'
+			}
+		},
+		{
+			type: 'custom',
+			options: {
+				validate: async (value) => {
+					try {
+						const r = await verifyCaptcha()
+						return r.response.data.message === 'Success'
+					}
+					catch {
+						return false
+					}
+				},
+				message: 'Le captcha est incorrect',
+				successMessage: 'Le captcha est correct'
+			}
+		}
+]"
+/>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ref } from 'vue'
+import { Captcha } from '@cnamts/synapse'
+
+const value = ref('abc')
+
+const verifyCaptcha = () => {
+	// call the API to verify the captcha and return the response
+}
+`,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { Captcha, VCard },
+			setup() {
+				const captchaValue = ref(args.modelValue)
+				watch(() => args.modelValue, () => {
+					captchaValue.value = args.modelValue
+				})
+				const verifyCaptcha = () => {
+					if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
+						return Promise.resolve({ response: { data: { message: 'Success' } } })
+					}
+					return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+				}
+
+				return { args, captchaValue, verifyCaptcha }
+			},
+			template: `
+				<VCard class="pa-8" max-width="400" min-width="400">
+					<p class="mb-4">La validation se déclenche à chaque modification de la valeur.</p>
+					<Captcha
+						v-bind="args"
+						v-model="captchaValue"
+						:is-validate-on-blur="false"
+						:custom-rules="[
+							{
+								type: 'custom',
+								options: {
+									validate: (value) => String(value || '').length >= 6,
+									message: 'Le captcha doit contenir au moins 6 caractères.',
+								},
+							},
+							{
+								type: 'custom',
+								options: {
+									validate: async (value) => {
+										try {
+											const r = await verifyCaptcha()
+											return r.response.data.message === 'Success'
+										}
+										catch {
+											return false
+										}
+									},
+									message: 'Le captcha est incorrect',
+									successMessage: 'Le captcha est correct',
+								}
+							},
+						]"
+					/>
+				</VCard>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByRole('textbox')
+		await userEvent.clear(input)
+		// Saisie de la bonne réponse : la validation se met à jour à chaque frappe
+		// (erreur tant que < 6 caractères, puis succès une fois le bon captcha saisi).
+		await userEvent.type(input, 'ytqZNq')
+	},
+}
+
+export const ExternalMessages: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Messages injectés par le parent via `errorMessages`, `warningMessages` et `successMessages`.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<VCard class="pa-8" max-width="400">
+<Captcha
+	v-model="value"
+	:error-messages="errorMessages"
+	:warning-messages="warningMessages"
+	:success-messages="successMessages"
+/>
+<div class="mt-4 d-flex flex-wrap ga-2">
+	<VBtn @click="setError">Simuler une erreur</VBtn>
+	<VBtn @click="setWarning">Simuler un avertissement</VBtn>
+	<VBtn @click="setSuccess">Simuler un succès</VBtn>
+	<VBtn @click="reset">Réinitialiser</VBtn>
+</div>
+</VCard>
+`,
+			},
+		],
+	},
+	render: args => ({
+		components: { Captcha, VBtn, VCard },
+		setup() {
+			const captchaValue = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				captchaValue.value = newValue
+			})
+			const errorMessages = ref<string[] | null>(null)
+			const warningMessages = ref<string[] | null>(null)
+			const successMessages = ref<string[] | null>(null)
+
+			const verifyCaptcha = () => {
+				if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
+					return Promise.resolve({ response: { data: { message: 'Success' } } })
+				}
+				return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+			}
+
+			function setError() {
+				errorMessages.value = ['Ce captcha est déjà utilisé']
+				warningMessages.value = null
+				successMessages.value = null
+			}
+
+			function setWarning() {
+				errorMessages.value = null
+				warningMessages.value = ['Ce captcha pourrait être plus lisible']
+				successMessages.value = null
+			}
+
+			function setSuccess() {
+				errorMessages.value = null
+				warningMessages.value = null
+				successMessages.value = ['Captcha accepté']
+			}
+
+			function reset() {
+				errorMessages.value = null
+				warningMessages.value = null
+				successMessages.value = null
+			}
+
+			return { args, captchaValue, errorMessages, warningMessages, successMessages, verifyCaptcha, setError, setWarning, setSuccess, reset }
+		},
+		template: `
+			<VCard class="pa-8" max-width="400" min-width="400">
+				<p class="mb-4">Les messages sont fournis directement par le parent sans déclencher de règle de validation.</p>
+				<Captcha
+					v-bind="args"
+					v-model="captchaValue"
+					:error-messages="errorMessages"
+					:warning-messages="warningMessages"
+					:success-messages="successMessages"
+				/>
+			</VCard>
+			<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 color="black" @click="reset">Réinitialiser</VBtn>
+			</div>
+		`,
+	}),
+}
+
+export const DisableErrorHandling: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Désactivation de la gestion des erreurs via `disableErrorHandling`.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Captcha
+		v-model="value1"
+		required
+		:custom-rules="customRules"
+	/>
+
+	<Captcha
+		v-model="value2"
+		required
+		disable-error-handling
+		:custom-rules="customRules"
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { Captcha } from '@cnamts/synapse'
+const value1 = ref('')
+const value2 = ref('')
+
+const verifyCaptcha = (captchaValue: string | null) => {
+	// Simulate API call to verify captcha
+}
+
+const customRules = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: string) => {
+				if (!value || value.trim().length === 0) {
+					return false
+				}
+				return true
+			},
+			message: 'Ce champ est requis.',
+		}
+	},
+	{
+		type: 'custom',
+		options: {
+			validate: async (value: string) => {
+				try {
+					const r = await verifyCaptcha(value)
+					return r.response.data.message === 'Success'
+				}
+				catch {
+					return false
+				}
+			},
+			message: 'Le captcha est incorrect.',
+		}
+	},
+]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { Captcha, VCard },
+		setup() {
+			const value1 = ref('')
+			const value2 = ref('')
+
+			const verifyCaptcha = (captchaValue: string | null) => {
+				if (captchaValue === 'ytqZNq' || captchaValue === '941335') {
+					return Promise.resolve({ response: { data: { message: 'Success' } } })
+				}
+				return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+			}
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || value.trim().length === 0) {
+								return false
+							}
+							return true
+						},
+						message: 'Ce champ est requis.',
+						fieldIdentifier: 'captcha',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: async (value: string) => {
+							try {
+								const r = await verifyCaptcha(value)
+								return r.response.data.message === 'Success'
+							}
+							catch {
+								return false
+							}
+						},
+						message: 'Le captcha est incorrect.',
+					},
+				},
+			]
+
+			return { args, value1, value2, customRules }
+		},
+		template: `
+			<div>
+				<p class="mb-4">Cette démonstration compare un Captcha standard et un avec <code>disableErrorHandling=true</code>.</p>
+
+				<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 16px;">
+					<div>
+						<p class="text-subtitle-2 mb-2">Validation normale</p>
+						<VCard class="pa-8" max-width="400" min-width="400">
+							<Captcha
+								v-bind="args"
+								v-model="value1"
+								required
+								:custom-rules="customRules"
+							/>
+						</VCard>
+					</div>
+
+					<div>
+						<p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
+						<VCard class="pa-8" max-width="400" min-width="400">
+							<Captcha
+								v-bind="args"
+								v-model="value2"
+								required
+								disable-error-handling
+								:custom-rules="customRules"
+							/>
+						</VCard>
+					</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>
+		`,
+	}),
+}
+
+export const SyFormValidation: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Intégration avec `SyForm` pour soumettre un Captcha validé par règles personnalisées.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<SyForm @submit="handleSubmit">
+		<VCard class="pa-8" max-width="400">
+			<Captcha
+				v-model="value"
+				:custom-rules="customRules"
+				required
+			/>
+			<div class="mt-4">
+				<VBtn type="submit" color="primary">Valider</VBtn>
+			</div>
+		</VCard>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { Captcha, SyForm } from '@cnamts/synapse'
+
+const value = ref('')
+
+const verifyCaptcha = () => {
+	// Simulate API call to verify captcha
+}
+
+const customRules = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: string) => String(value || '').length >= 6,
+			message: 'Le captcha doit contenir au moins 6 caractères.',
+			fieldIdentifier: 'captcha',
+		},
+	},
+	{
+		type: 'custom',
+		options: {
+			validate: async (value: string) => {
+				try {
+					const r = await verifyCaptcha()
+					return r.response.data.message === 'Success'
+				}
+				catch {
+					return false
+				}
+			},
+			message: 'Le captcha est incorrect',
+			fieldIdentifier: 'captcha',
+			successMessage: 'Le captcha est correct',
+		},
+	},
+]
+
+function handleSubmit(e: { isValid: boolean }) {
+	alert(e.isValid ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { Captcha, VBtn, SyForm },
+		setup() {
+			const captchaValue = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				captchaValue.value = newValue
+			})
+
+			const verifyCaptcha = () => {
+				if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
+					return Promise.resolve({ response: { data: { message: 'Success' } } })
+				}
+				return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+			}
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => String(value || '').length >= 6,
+						message: 'Le captcha doit contenir au moins 6 caractères.',
+						fieldIdentifier: 'captcha',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: async () => {
+							try {
+								const r = await verifyCaptcha()
+								return r.response.data.message === 'Success'
+							}
+							catch {
+								return false
+							}
+						},
+						message: 'Le captcha est incorrect',
+						fieldIdentifier: 'captcha',
+						successMessage: 'Le captcha est correct',
+					},
+				},
+			]
+
+			function handleSubmit(e: { isValid: boolean }) {
+				alert(e.isValid ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, captchaValue, customRules, handleSubmit }
+		},
+		template: `
+			<div>
+				<p class="mb-4">Il faut privilégier l'utilisation de <code>SyForm</code> pour bénéficier de l'intégration de validation.</p>
+				<SyForm @submit="handleSubmit">
+					<VCard class="pa-8" max-width="400" min-width="400">
+						<Captcha
+							v-bind="args"
+							v-model="captchaValue"
+							:custom-rules="customRules"
+							width="400px"
+							required
+						/>
+						<div class="mt-4">
+							<VBtn type="submit" color="primary">Valider</VBtn>
+						</div>
+					</VCard>
+				</SyForm>
+			</div>
+		`,
+	}),
+}
+
+export const VFormValidation: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Validation déclenchée à la soumission du formulaire via l\'API exposée `validate()` du Captcha.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VForm @submit.prevent="handleSubmit">
+		<VCard class="pa-8" max-width="400">
+			<Captcha
+				ref="captchaRef"
+				v-model="value"
+				required
+				:custom-rules="customRules"
+			/>
+			<VBtn type="submit" color="primary" class="mt-4">Valider</VBtn>
+		</VCard>
+	</VForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { Captcha } from '@cnamts/synapse'
+import { VBtn, VForm } from 'vuetify/components'
+
+const value = ref('')
+const captchaRef = ref()
+
+const customRules = [
+	{
+		type: 'custom',
+		options: {
+			validate: (value: string) => String(value || '').length >= 6,
+			message: 'Le captcha doit contenir au moins 6 caractères.',
+			fieldIdentifier: 'captcha',
+		},
+	},
+	{
+		type: 'custom',
+		options: {
+			validate: async (value: string) => {
+				try {
+					const r = await verifyCaptcha()
+					return r.response.data.message === 'Success'
+				}
+				catch {
+					return false
+				}
+			},
+			message: 'Le captcha est incorrect',
+			successMessage: 'Le captcha est correct',
+		},
+	},
+]
+
+async function handleSubmit() {
+	if (captchaRef.value) {
+		const result = await captchaRef.value.validateOnSubmit()
+		alert(result ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+	}
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { Captcha, VBtn, VForm },
+		setup() {
+			const value = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				value.value = newValue
+			})
+			const captchaRef = ref()
+
+			const verifyCaptcha = () => {
+				if (value.value === 'ytqZNq' || value.value === '941335') {
+					return Promise.resolve({ response: { data: { message: 'Success' } } })
+				}
+				return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+			}
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (captchaValue: string) => String(captchaValue || '').length >= 6,
+						message: 'Le captcha doit contenir au moins 6 caractères.',
+						fieldIdentifier: 'captcha',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: async () => {
+							try {
+								const r = await verifyCaptcha()
+								return r.response.data.message === 'Success'
+							}
+							catch {
+								return false
+							}
+						},
+						message: 'Le captcha est incorrect',
+						successMessage: 'Le captcha est correct',
+						fieldIdentifier: 'captcha',
+					},
+				},
+			]
+
+			async function handleSubmit() {
+				if (captchaRef.value) {
+					const result = await captchaRef.value.validateOnSubmit()
+					alert(result ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+				}
+			}
+
+			return { args, value, captchaRef, customRules, handleSubmit }
+		},
+		template: `
+			<div>
+				<p class="mb-4">Il faut privilégier l'utilisation du composant SyForm pour déclencher la validation à la soumission.</p>
+				<VForm @submit.prevent="handleSubmit">
+					<VCard class="pa-8" max-width="400" min-width="400">
+						<Captcha
+							ref="captchaRef"
+							v-bind="args"
+							v-model="value"
+							:custom-rules="customRules"
+							required
+							width="400px"
+						/>
+						<VBtn type="submit" color="primary" class="mt-4">Valider</VBtn>
+					</VCard>
+				</VForm>
+			</div>
+		`,
+	}),
+}
+
+export const SyFormVuetifyValidation: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Validation native Vuetify (`useVuetifyValidation=true` + `rules`) intégrée automatiquement à un `SyForm`.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<SyForm @submit="handleSubmit">
+		<VCard class="pa-8" max-width="400">
+			<Captcha
+				v-model="value"
+				:use-vuetify-validation="true"
+				:rules="rules"
+				required
+			/>
+			<div class="mt-4">
+				<VBtn type="submit" color="primary">Valider</VBtn>
+			</div>
+		</VCard>
+	</SyForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { Captcha, SyForm } from '@cnamts/synapse'
+
+const value = ref('')
+
+const rules = [
+	(value: string) => !!value || 'Ce champ est requis',
+	(value: string) => String(value || '').length >= 6 || 'Le captcha doit contenir au moins 6 caractères',
+	async () => {
+		try {
+			const r = await verifyCaptcha()
+			return r.response.data.message === 'Success' || 'Le captcha est incorrect'
+		}
+		catch {
+			return 'Le captcha est incorrect'
+		}
+	},
+]
+
+function handleSubmit(e: { isValid: boolean }) {
+	alert(e.isValid ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { Captcha, VBtn, SyForm },
+		setup() {
+			const captchaValue = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				captchaValue.value = newValue
+			})
+
+			const verifyCaptcha = () => {
+				if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
+					return Promise.resolve({ response: { data: { message: 'Success' } } })
+				}
+				return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+			}
+
+			const rules = [
+				(value: string) => !!value || 'Ce champ est requis',
+				(value: string) => String(value || '').length >= 6 || 'Le captcha doit contenir au moins 6 caractères',
+				async () => {
+					try {
+						const r = await verifyCaptcha()
+						return r.response.data.message === 'Success' || 'Le captcha est incorrect'
+					}
+					catch {
+						return 'Le captcha est incorrect'
+					}
+				},
+			]
+
+			function handleSubmit(e: { isValid: boolean }) {
+				alert(e.isValid ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, captchaValue, rules, handleSubmit }
+		},
+		template: `
+			<div>
+				<p class="mb-4">Validation Vuetify native intégrée au <code>SyForm</code> via <code>useVuetifyValidation</code>.</p>
+				<SyForm @submit="handleSubmit">
+					<VCard class="pa-8" max-width="400" min-width="400">
+						<Captcha
+							v-bind="args"
+							v-model="captchaValue"
+							:use-vuetify-validation="true"
+							:rules="rules"
+							width="400px"
+							required
+						/>
+						<div class="mt-4">
+							<VBtn type="submit" color="primary">Valider</VBtn>
+						</div>
+					</VCard>
+				</SyForm>
+			</div>
+		`,
+	}),
+}
+
+export const VFormVuetifyValidation: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Validation de style Vuetify avec `useVuetifyValidation=true` et des règles natives.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VForm @submit.prevent="handleSubmit">
+		<VCard class="pa-8" max-width="400">
+			<Captcha
+				v-model="value"
+				:use-vuetify-validation="true"
+				:rules="rules"
+				required
+			/>
+			<div class="mt-4">
+				<VBtn type="submit" color="primary">Valider</VBtn>
+			</div>
+		</VCard>
+	</VForm>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import { Captcha } from '@cnamts/synapse'
+
+const value = ref('')
+
+const rules = [
+	(value: string) => !!value || 'Ce champ est requis',
+	(value: string) => String(value || '').length >= 6 || 'Le captcha doit contenir au moins 6 caractères',
+	async () => {
+		try {
+			const r = await verifyCaptcha()
+			return r.response.data.message === 'Success' || 'Le captcha est incorrect'
+		}
+		catch {
+			return 'Le captcha est incorrect'
+		}
+	},
+]
+
+async function handleSubmit(e) {
+	alert((await e).valid ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+}
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { Captcha, VBtn, VForm },
+		setup() {
+			const captchaValue = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				captchaValue.value = newValue
+			})
+
+			const rules = [
+				(value: string) => !!value || 'Ce champ est requis',
+				(value: string) => String(value || '').length >= 6 || 'Le captcha doit contenir au moins 6 caractères',
+				async () => {
+					try {
+						const r = await verifyCaptcha()
+						return r.response.data.message === 'Success' || 'Le captcha est incorrect'
+					}
+					catch {
+						return 'Le captcha est incorrect'
+					}
+				},
+			]
+
+			const verifyCaptcha = () => {
+				if (captchaValue.value === 'ytqZNq' || captchaValue.value === '941335') {
+					return Promise.resolve({ response: { data: { message: 'Success' } } })
+				}
+				return Promise.reject({ response: { data: { message: 'Le captcha est incorrect' } } })
+			}
+
+			async function handleSubmit(e: Promise<{ valid: boolean }>) {
+				const result = await e
+				alert(result.valid ? 'Valeur valide !' : 'Veuillez corriger les erreurs.')
+			}
+
+			return { args, captchaValue, rules, handleSubmit }
+		},
+		template: `
+			<div>
+				<p class="mb-4">Les règles suivent le contrat Vuetify natif: <code>(value) =&gt; true | 'message'</code>.</p>
+				<VForm @submit.prevent="handleSubmit">
+					<VCard class="pa-8" max-width="400" min-width="400">
+						<Captcha
+							v-bind="args"
+							v-model="captchaValue"
+							:use-vuetify-validation="true"
+							:rules="rules"
+							width="400px"
+						/>
+						<div class="mt-4">
+							<VBtn type="submit" color="primary">Valider</VBtn>
+						</div>
+					</VCard>
+				</VForm>
+			</div>
+		`,
+	}),
+}