@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -3,9 +3,9 @@ import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 import { VIcon } from 'vuetify/components'
 import { ref, watch } from 'vue'
 import { mdiAccountBox } from '@mdi/js'
-import { VBtn } from 'vuetify/components'
 import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
 import { fn } from '@storybook/test'
+import type { SyTextFieldProps } from './types'
 
 const meta = {
 	title: 'Composants/Formulaires/SyTextField',
@@ -22,6 +22,9 @@ const meta = {
 				component: `SyTextField`,
 			},
 		},
+		controls: {
+			exclude: /^on*/,
+		},
 	},
 	argTypes: {
 		...getValidationDocumentation('string'),
@@ -29,221 +32,373 @@ const meta = {
 		'label': {
 			description: 'Texte affiché comme label du champ',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'autocomplete': {
 			description: 'Valeur de l\'attribut autocomplete',
 			control: 'text',
+			table: {
+				type: { summary: 'on|off' },
+			},
 		},
 		'prependIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'appendIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'prependInnerIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'appendInnerIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'variantStyle': {
 			control: 'select',
 			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'color': {
 			control: 'select',
 			options: ['primary', 'secondary', 'success', 'error', 'warning'],
 			description: 'Couleur du champ',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'density': {
 			control: 'select',
 			options: ['default', 'comfortable', 'compact'],
 			description: 'Densité du champ',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'isActive': {
 			description: 'Force l\'état actif du champ (label flottant et styles visuels)',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'isClearable': {
 			description: 'Affiche un bouton pour effacer le contenu du champ',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'prependTooltip': {
 			description: 'Si le texte du prepend tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'appendTooltip': {
 			description: 'Si le texte du append tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'tooltipLocation': {
 			description: 'Position des tooltips',
 			control: 'select',
 			options: ['top', 'bottom', 'start', 'end'],
 			default: 'top',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'displayAsterisk': {
 			description: 'Affiche un astérisque à côté du label',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'disableClickButton': {
 			description: 'Désactive le click sur les icônes append et prepend',
 			control: 'boolean',
 			default: true,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'baseColor': {
 			description: 'Couleur de base du champ (par défaut hérite de color)',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'bgColor': {
 			description: 'Couleur de fond du champ',
 			control: 'color',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'centerAffix': {
 			description: 'Centre verticalement les éléments ajoutés avant/après le champ',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'counter': {
 			description: 'Affiche un compteur de caractères',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'counterValue': {
 			description: 'Fonction personnalisée pour calculer la valeur du compteur',
 			control: 'object',
+			table: {
+				type: { summary: '(value: unknown) => number' },
+			},
 		},
 		'direction': {
 			description: 'Direction du champ (horizontal ou vertical)',
 			control: 'select',
 			options: ['horizontal', 'vertical'],
+			table: {
+				type: { summary: 'horizontal | vertical' },
+			},
 		},
 		'isDirty': {
 			description: 'Indique si le champ a été modifié',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'isFlat': {
 			description: 'Supprime l\'élévation du champ',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'isFocused': {
 			description: 'Force l\'état focus du champ',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
-		'areDetailsHidden': {
+		'hideDetails': {
 			description: 'Masque la section des détails (messages d\'erreur, compteur)',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'areSpinButtonsHidden': {
 			description: 'Masque les boutons d\'incrémentation pour les champs numériques',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'hint': {
 			description: 'Texte d\'aide affiché sous le champ',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'helpText': {
 			description: 'Texte d\'aide affiché sous le champ',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'maxlength': {
 			description: 'Nombre maximal de caractères autorisés dans le champ',
 			control: { type: 'text' },
+			table: {
+				type: { summary: 'number' },
+			},
 		},
 		'loading': {
 			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'maxWidth': {
 			description: 'Largeur maximale du champ',
 			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'minWidth': {
 			description: 'Largeur minimale du champ',
 			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'name': {
 			description: 'Nom du champ pour les formulaires',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'displayPersistentClear': {
 			description: 'Affiche toujours le bouton de réinitialisation',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'displayPersistentCounter': {
 			description: 'Affiche toujours le compteur',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'displayPersistentHint': {
 			description: 'Affiche toujours le texte d\'aide',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'displayPersistentPlaceholder': {
 			description: 'Garde le placeholder visible. Si le champ est vide, le placeholder reste affiché',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'placeholder': {
 			description: 'Texte affiché quand le champ est vide',
 			control: 'text',
 			default: 'Placeholder',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'prefix': {
 			description: 'Texte affiché avant la valeur: prefix="€" : affichera "€" avant la valeur saisie',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'isReversed': {
 			description: 'Inverse l\'ordre des éléments',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'role': {
 			description: 'Rôle ARIA du champ',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'rounded': {
 			description: 'Arrondit les coins du champ',
 			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'isOnSingleLine': {
 			description: 'Force l\'affichage sur une seule ligne',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'suffix': {
 			description: 'Texte affiché après la valeur',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'theme': {
 			description: 'Thème à appliquer au champ',
 			control: 'text',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'isTiled': {
 			description: 'Applique un style tuile',
 			control: 'boolean',
 			default: false,
+			table: {
+				type: { summary: 'boolean' },
+			},
 		},
 		'type': {
 			description: 'Type du champ de saisie',
 			control: 'select',
 			options: ['text', 'number', 'password', 'email', 'tel', 'url', 'search'],
 			default: 'text',
+			table: {
+				type: {
+					summary: 'string',
+					detail: 'text | number | password | email | tel | url | search',
+				},
+			},
 		},
 		'width': {
 			description: 'Largeur du champ',
 			control: { type: 'text' },
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		'validateOnSubmit': {
 			description: 'Valide le champ avec la valeur donnée',
-			type: '(value: string | number | null) => Promise<void>',
+			table: {
+				type: { summary: '(value: string | number | null) => Promise<void>' },
+			},
 		},
 		'append': {
 			description: 'Slot pour ajouter du contenu à droite du champ',
@@ -308,7 +463,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<SyTextFieldProps>
 export const Default: Story = {
 	parameters: {
 		sourceCode: [
@@ -340,7 +495,7 @@ export const Default: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { SyTextField, VIcon },
+			components: { SyTextField },
 			setup() {
 				const value = ref(args.modelValue)
 				watch(() => args.modelValue, (newValue) => {
@@ -851,196 +1006,6 @@ export const SlotCustomIcon: Story = {
 	},
 }
 
-export const ValidationRules: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: `
-### Validation avec règles standard
-
-Cette story montre l'utilisation des règles de validation standard. Le champ :
-- Est requis
-- Doit contenir au moins 3 caractères
-- Affiche un message de succès quand valide
-`,
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `<SyTextField
-	v-model="value"
-	label="Champ avec validation"
-	helpText="Le champ doit contenir à minima 3 caractères"
-	:customRules="[
-		{
-			type: 'minLength',
-			options: {
-				length: 3,
-				message: 'Le champ doit contenir au moins 3 caractères'
-			}
-		}
-	]"
-	showSuccessMessages
-/>`,
-			},
-		],
-	},
-	render: args => ({
-		components: { SyTextField },
-		setup() {
-			const value = ref('')
-			return { args, value }
-		},
-		template: `
-			<SyTextField
-				v-model="value"
-				v-bind="args"
-				label="Champ avec validation"
-				helpText="Le champ doit contenir à minima 3 caractères"
-				:customRules="[
-					{
-						type: 'minLength',
-						options: {
-							length: 3,
-							message: 'Le champ doit contenir au moins 3 caractères'
-						}
-					}
-				]"
-				showSuccessMessages
-			/>
-		`,
-	}),
-}
-
-export const ValidationWithWarnings: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: `
-### Validation avec avertissements
-
-Cette story montre l'utilisation combinée des règles standard et d'avertissement. Le champ :
-- Est requis (règle standard)
-- Affiche un avertissement si le texte dépasse 10 caractères
-- Les avertissements sont affichés en orange et n'empêchent pas la validation
-`,
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `<SyTextField
-	v-model="value"
-	label="Champ avec avertissements"
-	required
-	:customWarningRules="[
-		{
-			type: 'minLength',
-			options: {
-				length: 10,
-				message: 'Le texte doit comporter plus de 10 caracteres'
-			}
-		}
-	]"
-	showSuccessMessages
-/>`,
-			},
-		],
-	},
-	render: args => ({
-		components: { SyTextField },
-		setup() {
-			const value = ref('')
-			return { args, value }
-		},
-		template: `
-			<SyTextField
-				v-model="value"
-				v-bind="args"
-				label="avec avertissements"
-				required
-				:customWarningRules="[
-					{
-						type: 'minLength',
-						options: {
-							length: 10,
-							message: 'Le texte doit comporter plus de 10 caracteres'
-						}
-					}
-				]"
-				showSuccessMessages
-			/>
-		`,
-	}),
-}
-
-export const EmailValidation: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: `
-### Validation d'email
-
-Cette story montre un cas d'usage courant : la validation d'une adresse email. Le champ :
-- Est requis
-- Vérifie le format de l'email
-- Affiche un message de succès quand l'email est valide
-`,
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `<SyTextField
-	v-model="value"
-	autocomplete="email"
-	label="Email"
-	helpText="Format attendu : nom@domaine.fr"
-	required
-	:customRules="[
-		{
-			type: 'email',
-			options: {
-				message: 'L'email n'est pas valide'
-				successMessage: 'L'email est valide'
-			}
-		}
-	]"
-	showSuccessMessages
-/>`,
-			},
-		],
-	},
-	render: args => ({
-		components: { SyTextField },
-		setup() {
-			const value = ref('')
-			return { args, value }
-		},
-		template: `
-			<SyTextField
-				v-model="value"
-				v-bind="args"
-				label="Email"
-				helpText="Format attendu : nom@domaine.fr"
-				autocomplete="email"
-				required
-				:customRules="[
-					{
-						type: 'email',
-						options: {
-							message: 'L\\'email n\\'est pas valide',
-							successMessage: 'L\\'email est valide'
-						}
-					}
-				]"
-				showSuccessMessages
-			/>
-		`,
-	}),
-}
-
 export const PatternValidation: Story = {
 	parameters: {
 		docs: {
@@ -1109,19 +1074,22 @@ Cette story montre l'utilisation de la règle \`matchPattern\` pour valider un f
 	}),
 }
 
+// Persistent value for WithTooltips
+const withTooltipsValueMain = ref('')
+
 export const WithTooltips: Story = {
 	args: {
-		modelValue: '',
 		label: 'Champ avec tooltips',
 		prependTooltip: 'Information à gauche du champ',
 		appendTooltip: 'Information à droite du champ',
 		tooltipLocation: 'top',
+		isClearable: true,
+		disableClickButton: true,
 	},
 	render: args => ({
 		components: { SyTextField },
 		setup() {
-			const value = ref(args.modelValue)
-			return { args, value }
+			return { args, value: withTooltipsValueMain }
 		},
 		template: `
 			<div>
@@ -1161,406 +1129,6 @@ export const WithTooltips: Story = {
 	},
 }
 
-/**
- * Story avec validation désactivée au blur
- */
-export const ValidateOnBlur: Story = {
-	args: {
-		modelValue: '',
-		label: 'Champ texte',
-		required: true,
-		isValidateOnBlur: true,
-		customRules: [
-			{
-				type: 'custom',
-				options: {
-					message: 'Le champ doit contenir au moins 3 caractères',
-					validate: (value: string) => value.length >= 3,
-				},
-			},
-		],
-	},
-	render: args => ({
-		components: { SyTextField, VBtn },
-		setup() {
-			const value = ref(args.modelValue)
-			const fieldRef = ref()
-
-			watch(() => args.modelValue, (newValue) => {
-				if (value.value !== newValue) {
-					value.value = newValue
-				}
-			})
-
-			async function handleSubmit() {
-				const isValid = await fieldRef.value?.validateOnSubmit()
-				alert(isValid ? 'Formulaire valide !' : 'Formulaire invalide, veuillez corriger les erreurs.')
-			}
-
-			return { args, value, fieldRef, handleSubmit }
-		},
-		template: `
-			<form @submit.prevent="handleSubmit">
-				<p class="mb-4">
-					La validation ne se déclenche  qu'à la perte de focus ou à la soumission du formulaire.
-				</p>
-				<SyTextField
-					ref="fieldRef"
-					v-bind="args"
-					v-model="value"
-				/>
-				<div class="mt-4">
-					<VBtn type="submit" color="primary">
-						Valider
-					</VBtn>
-				</div>
-			</form>
-		`,
-	}),
-	parameters: {
-		docs: {
-			description: {
-				story: 'Exemple de champ avec validation désactivée au blur. La validation ne se déclenche que lors de la soumission du formulaire.',
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-	<form @submit.prevent="handleSubmit">
-		<SyTextField
-			ref="fieldRef"
-			v-model="value"
-			label="Champ texte"
-			required
-			:is-validate-on-blur="true"
-			:custom-rules="[
-				{
-					type: 'custom',
-					options: {
-						message: 'Le champ doit contenir au moins 3 caractères',
-						validate: value => value.length >= 3
-					}
-				}
-			]"
-		/>
-		<button type="submit">
-			Valider
-		</button>
-	</form>
-</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-<script setup lang="ts">
-import { ref } from 'vue'
-import { SyTextField } from '@cnamts/synapse'
-
-const value = ref('')
-const fieldRef = ref()
-
-async function handleSubmit() {
-	const isValid = await fieldRef.value?.validateOnSubmit()
-	if (!isValid) {
-		// Gérer l'erreur
-		return
-	}
-	// Continuer avec la soumission
-}
-</script>
-				`,
-			},
-		],
-	},
-}
-
-export const FormValidation: Story = {
-	render: args => ({
-		components: { SyTextField },
-		setup() {
-			const nomField = ref()
-			const prenomField = ref()
-			const ageField = ref()
-			const nomValue = ref('')
-			const prenomValue = ref('')
-			const ageValue = ref('')
-
-			// Règle minLength pour le prénom
-			const prenomRules = [{
-				type: 'minLength',
-				options: {
-					length: 3,
-					message: 'Le prénom doit contenir au moins 3 caractères',
-					successMessage: 'Le prénom est valide',
-					fieldIdentifier: 'prénom',
-				},
-			}]
-
-			// Règle pattern pour l'âge (uniquement des chiffres)
-			const ageRules = [{
-				type: 'matchPattern',
-				options: {
-					pattern: /^\d+$/,
-					message: 'L\'âge doit contenir uniquement des chiffres',
-					successMessage: 'L\'âge est valide',
-					fieldIdentifier: 'âge',
-				},
-			}]
-
-			const handleSubmit = async () => {
-				const fields = [
-					{ ref: nomField, name: 'Nom' },
-					{ ref: prenomField, name: 'Prénom' },
-					{ ref: ageField, name: 'Âge' },
-				]
-
-				const invalidFields: string[] = []
-				for (const { ref, name } of fields) {
-					const isValid = await ref.value?.validateOnSubmit()
-					if (!isValid) {
-						invalidFields.push(name)
-					}
-				}
-
-				if (invalidFields.length > 0) {
-					alert(`Les champs suivants sont invalides: ${invalidFields.join(', ')}`)
-				}
-				else {
-					alert('Formulaire soumis avec succès !')
-				}
-			}
-
-			return {
-				args,
-				nomField,
-				prenomField,
-				ageField,
-				nomValue,
-				prenomValue,
-				ageValue,
-				prenomRules,
-				ageRules,
-				handleSubmit,
-			}
-		},
-		template: `
-			<div style="max-width: 500px;">
-				<h3>Validation de formulaire</h3>
-				<form @submit.prevent="handleSubmit">
-					<div class="mb-4">
-						<SyTextField
-							ref="nomField"
-							v-model="nomValue"
-							label="Nom"
-							placeholder="Votre nom"
-							autocomplete="family-name"
-							required
-							show-success-messages
-							class="mb-4"
-							aria-describedby="nom-rule"
-						/>
-
-						<SyTextField
-							ref="prenomField"
-							v-model="prenomValue"
-							label="Prénom"
-							placeholder="Votre prénom"
-							autocomplete="given-name"
-							required
-							:custom-rules="prenomRules"
-							show-success-messages
-							class="mb-4"
-							aria-describedby="prenom-rule"
-						/>
-
-						<SyTextField
-							ref="ageField"
-							v-model="ageValue"
-							label="Âge"
-							required
-							placeholder="Votre âge"
-							:custom-rules="ageRules"
-							show-success-messages
-							class="mb-4"
-							aria-describedby="age-rule"
-						/>
-					</div>
-
-					<div class="text-caption mb-4">
-						<strong>Règles de validation :</strong>
-						<ul>
-							<li id="nom-rule">Nom : Champ requis</li>
-							<li id="prenom-rule">Prénom : Minimum 3 caractères</li>
-							<li id="age-rule">Âge : Uniquement des chiffres</li>
-						</ul>
-					</div>
-
-					<button
-						type="submit"
-						style="
-							background-color: #1976d2;
-							color: white;
-							padding: 8px 16px;
-							border: none;
-							border-radius: 4px;
-							cursor: pointer;
-							font-size: 1rem;
-						"
-					>
-						Soumettre
-					</button>
-				</form>
-			</div>
-		`,
-	}),
-	parameters: {
-		docs: {
-			description: {
-				story: 'Exemple de champ avec validation désactivée au blur. La validation ne se déclenche que lors de la soumission du formulaire.',
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-	<div>
-			<div style="max-width: 500px;">
-				<h3>Validation de formulaire</h3>
-				<form @submit.prevent="handleSubmit">
-					<div class="mb-4">
-						<SyTextField
-							ref="nomField"
-							v-model="nomValue"
-							label="Nom"
-							placeholder="Votre nom"
-							autocomplete="family-name"
-							required
-							show-success-messages
-							class="mb-4"
-							aria-describedby="nom-rule"
-						/>
-
-						<SyTextField
-							ref="prenomField"
-							v-model="prenomValue"
-							label="Prénom"
-							placeholder="Votre prénom"
-							autocomplete="given-name"
-							required
-							:custom-rules="prenomRules"
-							show-success-messages
-							class="mb-4"
-							aria-describedby="prenom-rule"
-						/>
-
-						<SyTextField
-							ref="ageField"
-							v-model="ageValue"
-							label="Âge"
-							required
-							placeholder="Votre âge"
-							:custom-rules="ageRules"
-							show-success-messages
-							class="mb-4"
-							aria-describedby="age-rule"
-						/>
-					</div>
-
-					<div class="text-caption mb-4">
-						<strong>Règles de validation :</strong>
-						<ul>
-							<li id="nom-rule">Nom : Champ requis</li>
-							<li id="prenom-rule">Prénom : Minimum 3 caractères</li>
-							<li id="age-rule">Âge : Uniquement des chiffres</li>
-						</ul>
-					</div>
-
-					<button
-						type="submit"
-						style="
-							background-color: #1976d2;
-							color: white;
-							padding: 8px 16px;
-							border: none;
-							border-radius: 4px;
-							cursor: pointer;
-							font-size: 1rem;
-						"
-					>
-						Soumettre
-					</button>
-				</form>
-			</div>
-	</div>
-</template>
-`,
-			},
-			{
-				name: 'Script',
-				code: `
-<script setup lang="ts">
-const nomField = ref()
-			const prenomField = ref()
-			const ageField = ref()
-			const nomValue = ref('')
-			const prenomValue = ref('')
-			const ageValue = ref('')
-
-			// Règle minLength pour le prénom
-			const prenomRules = [{
-				type: 'minLength',
-				options: {
-					length: 3,
-					message: 'Le prénom doit contenir au moins 3 caractères',
-					successMessage: 'Le prénom est valide',
-					fieldIdentifier: 'prénom',
-				},
-			}]
-
-			// Règle pattern pour l'âge (uniquement des chiffres)
-			const ageRules = [{
-				type: 'matchPattern',
-				options: {
-					pattern: /^d+$/,
-					message: 'L'âge doit contenir uniquement des chiffres',
-					successMessage: 'L'âge est valide',
-					fieldIdentifier: 'âge',
-				},
-			}]
-
-			const handleSubmit = () => {
-				const fields = [
-					{ ref: nomField, name: 'Nom' },
-					{ ref: prenomField, name: 'Prénom' },
-					{ ref: ageField, name: 'Âge' },
-				]
-
-				const invalidFields: string[] = []
-				for (const { ref, name } of fields) {
-					const isValid = await ref.value?.validateOnSubmit()
-					if (!isValid) {
-						invalidFields.push(name)
-					}
-				}
-
-				if (invalidFields.length > 0) {
-					alert('Les champs suivants sont invalides: ' + invalidFields.join('\\n'))
-				}
-				else {
-					alert('Formulaire soumis avec succès !')
-				}
-			}
-</script>
-				`,
-			},
-		],
-	},
-}
-
 export const WithPrefixAndSuffix: Story = {
 	args: {
 		modelValue: '42',
@@ -1610,208 +1178,3 @@ export const WithPrefixAndSuffix: Story = {
 		],
 	},
 }
-
-export const DisabledErrorHandling: Story = {
-	args: {
-		label: 'Champ requis',
-		required: true,
-		customRules: [
-			{
-				type: 'required',
-				options: {
-					message: 'Ce champ est obligatoire.',
-				},
-			},
-		],
-	},
-	render: (args) => {
-		return {
-			components: { SyTextField },
-			setup() {
-				const value1 = ref('')
-				const value2 = ref('')
-
-				return { args, value1, value2 }
-			},
-			template: `
-        <div>
-          <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>
-              <SyTextField
-                v-model="value1"
-                v-bind="args"
-                is-validate-on-blur
-              />
-            </div>
-            
-            <div>
-              <p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
-              <SyTextField
-                v-model="value2"
-                v-bind="args"
-                disableErrorHandling
-                is-validate-on-blur
-              />
-            </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">Observez que le champ de gauche affiche un message d'erreur</li>
-              <li class="ml-4">Le champ de droite n'affiche aucune erreur malgré les mêmes règles</li>
-            </ol>
-          </div>
-        </div>
-      `,
-		}
-	},
-	parameters: {
-		docs: {
-			description: {
-				story: 'La prop `disableErrorHandling` permet de désactiver complètement la gestion des erreurs de validation, même si des règles sont définies.',
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-  <!-- Champ avec validation normale -->
-  <SyTextField
-    v-model="value"
-    label="Champ obligatoire"
-    required
-    :custom-rules="[{
-      type: 'required',
-      options: { message: 'Ce champ est obligatoire.' }
-    }]"
-    is-validate-on-blur
-  />
-
-  <!-- Champ avec gestion d'erreur désactivée -->
-  <SyTextField
-    v-model="value"
-    label="Champ obligatoire"
-    required
-    :custom-rules="[{
-      type: 'required',
-      options: { message: 'Ce champ est obligatoire.' }
-    }]"
-    disableErrorHandling
-    is-validate-on-blur
-  />
-</template>`,
-			},
-		],
-	},
-}
-
-export const WithoutSuccessMessages: Story = {
-	args: {
-		label: 'Email',
-		customRules: [
-			{
-				type: 'matchPattern',
-				options: {
-					pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-					message: 'Veuillez entrer une adresse email valide',
-					successMessage: 'Le format de l\'email est correct',
-					fieldIdentifier: 'Email',
-				},
-			},
-		],
-	},
-	render: (args) => {
-		return {
-			components: { SyTextField },
-			setup() {
-				const value1 = ref('user@example.com')
-				const value2 = ref('user@example.com')
-
-				return { args, value1, value2 }
-			},
-			template: `
-        <div>
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
-            <div>
-              <p class="text-subtitle-2 mb-2">Avec messages de succès (défaut)</p>
-              <SyTextField
-                v-model="value1"
-                v-bind="args"
-                autocomplete="email"
-                showSuccessMessages
-              />
-            </div>
-            
-            <div>
-              <p class="text-subtitle-2 mb-2">Sans messages de succès</p>
-              <SyTextField
-                v-model="value2"
-                v-bind="args"
-                autocomplete="email"
-                :showSuccessMessages="false"
-              />
-            </div>
-          </div>
-          
-          <div class="mt-4 text-body-2">
-            <p>Les deux champs ont la même valeur et passent la validation :</p>
-            <ul >
-              <li class="ml-4">Le champ de gauche affiche le message de succès</li>
-              <li class="ml-4">Le champ de droite n'affiche aucun message</li>
-            </ul>
-            <p class="mt-2">Essayez de modifier les valeurs pour voir le comportement.</p>
-          </div>
-        </div>
-      `,
-		}
-	},
-	parameters: {
-		docs: {
-			description: {
-				story: 'La prop `showSuccessMessages` (par défaut: `true`) permet de contrôler l\'affichage des messages de succès lors de la validation.',
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-  <!-- Champ avec messages de succès (défaut) -->
-  <SyTextField
-    v-model="email"
-    label="Email"
-    autocomplete="email"
-    :custom-rules="[{
-      type: 'matchPattern',
-      options: {
-        pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,
-        message: 'Veuillez entrer une adresse email valide',
-        successMessage: 'Le format de l\\'email est correct',
-      }
-    }]"
-  />
-
-  <!-- Champ sans messages de succès -->
-  <SyTextField
-    v-model="email"
-    label="Email"
-    autocomplete="email"
-    :custom-rules="[{
-      type: 'matchPattern',
-      options: {
-        pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/,
-        message: 'Veuillez entrer une adresse email valide',
-        successMessage: 'Le format de l\\'email est correct',
-      }
-    }]"
-    :showSuccessMessages="false"
-  />
-</template>`,
-			},
-		],
-	},
-}