@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/PhoneField/PhoneField.stories.ts

@@ -2,35 +2,79 @@ import type { StoryObj, Meta } from '@storybook/vue3'
 import PhoneField from './PhoneField.vue'
 import { ref, watch } from 'vue'
 import { indicatifs } from './indicatifs'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
+import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Formulaires/PhoneField',
 	component: PhoneField,
 	parameters: {
 		layout: 'fullscreen',
-		actions: {
-			handles: ['update:modelValue', 'update:selectedDialCode', 'update:dialCodeModel', 'change'],
-		},
-		controls: { exclude: ['computedValue', 'phoneMask', 'counter', 'hasError', 'phoneNumber', 'mergedDialCodes'] },
+		actions: { argTypesRegex: '^on.*' },
+		controls: { exclude: /^on*|undefined/ },
 	},
 	argTypes: {
-		'modelValue': { control: false },
-		'dialCodeModel': { control: false },
-		'onUpdate:modelValue': { action: 'update:modelValue' },
-		'onUpdate:selectedDialCode': { action: 'update:selectedDialCode' },
-		'onUpdate:dialCodeModel': { action: 'update:dialCodeModel' },
-		'onChange': { action: 'change' },
-		'required': { control: 'boolean' },
-		'outlined': { control: 'boolean' },
-		'outlinedIndicatif': { control: 'boolean' },
-		'withCountryCode': { control: 'boolean' },
-		'countryCodeRequired': { control: 'boolean' },
+		'modelValue': {
+			control: 'string',
+			description: 'Valeur du champ numéro de téléphone. Ne doit contenir que les chiffres du numéro national, sans l\'indicatif pays. Par exemple, pour un numéro français +33 6 12 34 56 78, le `modelValue` doit être `0612345678`.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		'bgColor': {
+			control: 'color',
+			description: 'Couleur de fond du champ.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		'dialCodeModel': {
+			control: 'string',
+			description: 'Valeur de l\'indicatif pays sélectionné. Peut être une chaîne (ex : "+33") ou un objet indicatif complet (ex : { code: "+33", country: "France", abbreviation: "FR" }).' },
+		'outlined': {
+			control: 'boolean',
+			description: 'Affiche les champs avec une bordure.',
+			table: {
+				defaultValue: 'true',
+			},
+		},
+		'withCountryCode': {
+			control: 'boolean',
+			description: 'Affiche un sélecteur d\'indicatif pays à côté du champ numéro de téléphone. Lorsque cette prop est à `true`, le champ est divisé en deux parties : un sélecteur pour l\'indicatif pays et un champ pour le numéro national.',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
 		'displayFormat': {
 			control: { type: 'select' },
-			description: 'Format d\'affichage des items',
+			description: 'Format d\'affichage des options d\'indicatif pays dans le sélecteur. Les formats disponibles sont :\n\n- `code` (ex : +33)\n- `code-abbreviation` (ex : +33 - FR)\n- `code-country` (ex : +33 - France)\n- `country` (ex : France)\n- `abbreviation` (ex : FR)',
 			options: ['code', 'code-abbreviation', 'code-country', 'country', 'abbreviation'],
+			table: {
+				type: {
+					summary: `'code' | 'code-abbreviation' | 'code-country' | 'country' | 'abbreviation'`,
+				},
+			},
 		},
 		'customIndicatifs': {
+			table: {
+				type: {
+					summary: 'Indicatif[]',
+					details: `{
+	code: string
+	abbreviation: string
+	country: string
+	countryFr?: string
+	mask?: string
+	phoneLength?: number
+}[]					
+` },
+			},
 			control: 'object',
 			description: 'Permet d\'ajouter des indicatifs à la liste pre-existante',
 		},
@@ -41,20 +85,81 @@ const meta = {
 		'helpText': {
 			control: 'text',
 			description: 'Texte d\'aide affiché sous le champ. Lorsque présent, les messages d\'erreur incluent un exemple concret distinct du texte d\'aide.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
 		},
 		'autocompleteCountryCode': {
 			control: 'text',
 			description: 'Valeur de l\'attribut `autocomplete` pour le champ indicatif pays. Utiliser `tel-country-code` (défaut) lorsque le numéro est séparé en deux champs (indicatif + numéro national), conformément à [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-country-code) et [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose).',
+			table: {
+				type: {
+					summary: `'autocomplete' | 'tel-country-code' | undefined`,
+				},
+			},
 		},
 		'autocompletePhone': {
 			control: 'text',
+			table: {
+				type: {
+					summary: `'autocomplete' | 'tel-national' | 'tel' | 'tel-extension'`,
+				},
+			},
 			description: 'Valeur de l\'attribut `autocomplete` pour le champ numéro de téléphone. Valeurs recommandées selon le scénario :\n\n- `tel-national` (défaut) — numéro sans indicatif, lorsque le composant est en mode deux champs (`withCountryCode`).\n- `tel` — numéro complet avec indicatif intégré, pour un champ unique sans sélecteur de pays.\n- `tel-extension` — poste ou extension téléphonique.',
 		},
-		'isValidatedOnBlur': { control: 'boolean' },
 		'displayAsterisk': { control: 'boolean' },
-		'disableErrorHandling': { control: 'boolean' },
-		'disabled': { control: 'boolean' },
-		'readonly': { control: 'boolean' },
+		'update:modelValue': {
+			action: 'update:modelValue',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		'isClearable': {
+			control: 'boolean',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				category: 'props',
+			},
+			description: 'Affiche un bouton de nettoyage (clear) dans le champ lorsque du texte est saisi. Lorsque `true`, les utilisateurs peuvent facilement effacer le contenu du champ en cliquant sur ce bouton.',
+		},
+		'withoutFieldset': {
+			control: 'boolean',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				category: 'props',
+			},
+			description: 'N\'entoure pas le champ d\'un élément `<fieldset>`',
+		},
+		'update:dialCodeModel': {
+			action: 'update:dialCodeModel',
+			table: {
+				type: {
+					summary: 'Indicatif',
+					details: `{
+	code: string
+	abbreviation: string
+	country: string
+	countryFr?: string
+	mask?: string
+	phoneLength?: number
+}					
+`,
+				},
+			},
+		},
+		...getValidationDocumentation('string'),
+	} as Record<string, unknown>,
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onUpdate:dialCodeModel': fn(),
 	} as Record<string, unknown>,
 } satisfies Meta<typeof PhoneField>
 
@@ -76,11 +181,10 @@ export const Default: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -94,11 +198,10 @@ export const Default: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
 					const customIndicatifs = ref([])
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -108,17 +211,15 @@ export const Default: Story = {
 		modelValue: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: true,
 		displayFormat: 'code',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		bgColor: 'white',
 		readonly: false,
 		disabled: false,
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -126,12 +227,11 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-				<div class="pa-4">
-				<PhoneField
-					v-bind="args"
-				/>
+				<div class="pa-4 mb-8">
+					<PhoneField
+						v-bind="args"
+					/>
 				</div>
-				<br><br><br><br><br>
 			`,
 		}
 	},
@@ -151,11 +251,10 @@ export const Required: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -169,11 +268,10 @@ export const Required: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
 					const customIndicatifs = ref([])
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -183,17 +281,15 @@ export const Required: Story = {
 		modelValue: '',
 		required: true,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: true,
 		displayFormat: 'code',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		bgColor: 'white',
 		readonly: false,
 		disabled: false,
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -220,7 +316,7 @@ export const RequiredWithAsterisk: Story = {
 		required: true,
 		displayAsterisk: true,
 		bgColor: 'white',
-	},
+	} as Record<string, unknown>,
 	parameters: {
 		a11y: {
 			disable: false,
@@ -301,7 +397,7 @@ export const HelpText: Story = {
 			<h4 class="mb-2">Avec aide à la saisie et indicatif pays</h4>
 			<PhoneField
 				v-model="phoneValue2"
-				v-model:selected-dial-code="selectedDialCode"
+				v-model:dialCodeModel="dialCodeModel"
 				required
 				with-country-code
 				help-text="Choisissez votre pays et saisissez votre numéro de téléphone"
@@ -316,7 +412,7 @@ export const HelpText: Story = {
 			<h4>Valeurs actuelles :</h4>
 			<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
 			<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
-			<pre class="text-caption">selectedDialCode: {{ selectedDialCode }}</pre>
+			<pre class="text-caption">dialCodeModel: {{ dialCodeModel }}</pre>
 		</div>
 	</div>
 </template>`,
@@ -329,7 +425,7 @@ import PhoneField from './PhoneField.vue'
 
 const phoneValue1 = ref('')
 const phoneValue2 = ref('')
-const selectedDialCode = ref('')
+const dialCodeModel = ref('')
 </script>`,
 			},
 		],
@@ -337,20 +433,20 @@ const selectedDialCode = ref('')
 	args: {
 		required: true,
 		helpText: 'Saisissez votre numéro de téléphone français au format 01 23 45 67 89',
-	},
+	} as Record<string, unknown>,
 	render(args) {
 		return {
 			components: { PhoneField },
 			setup() {
 				const phoneValue1 = ref('')
 				const phoneValue2 = ref('')
-				const selectedDialCode = ref('')
+				const dialCodeModel = ref('')
 
 				return {
 					args,
 					phoneValue1,
 					phoneValue2,
-					selectedDialCode,
+					dialCodeModel,
 				}
 			},
 			template: `
@@ -373,7 +469,7 @@ const selectedDialCode = ref('')
 						<h4 class="mb-2">Avec aide à la saisie et indicatif pays</h4>
 						<PhoneField
 							v-model="phoneValue2"
-							v-model:selected-dial-code="selectedDialCode"
+							v-model:dialCodeModel="dialCodeModel"
 							required
 							with-country-code
 							help-text="Choisissez votre pays et saisissez votre numéro de téléphone"
@@ -388,7 +484,7 @@ const selectedDialCode = ref('')
 						<h4>Valeurs actuelles :</h4>
 						<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
 						<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
-						<pre class="text-caption">selectedDialCode: {{ selectedDialCode }}</pre>
+						<pre class="text-caption">dialCodeModel: {{ dialCodeModel }}</pre>
 					</div>
 				</div>
 			`,
@@ -429,7 +525,7 @@ Les attributs \`autocomplete\` permettent aux navigateurs et aux outils d'assist
 			<h4 class="mb-2">Avec indicatif pays (autocomplete="tel-country-code")</h4>
 			<PhoneField
 				v-model="phoneValue1"
-				v-model:selected-dial-code="selectedDialCode1"
+				v-model:dialCodeModel="dialCodeModel1"
 				required
 				with-country-code
 				autocomplete-country-code="tel-country-code"
@@ -464,7 +560,7 @@ Les attributs \`autocomplete\` permettent aux navigateurs et aux outils d'assist
 		<div class="mt-4">
 			<h4>Valeurs actuelles :</h4>
 			<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
-			<pre class="text-caption">selectedDialCode1: {{ selectedDialCode1 }}</pre>
+			<pre class="text-caption">dialCodeModel1: {{ dialCodeModel1 }}</pre>
 			<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
 			<pre class="text-caption">phoneValue3: {{ phoneValue3 }}</pre>
 		</div>
@@ -478,7 +574,7 @@ import { ref } from 'vue'
 import PhoneField from './PhoneField.vue'
 
 const phoneValue1 = ref('')
-const selectedDialCode1 = ref('')
+const dialCodeModel1 = ref('')
 const phoneValue2 = ref('')
 const phoneValue3 = ref('')
 </script>`,
@@ -491,20 +587,20 @@ const phoneValue3 = ref('')
 		autocompleteCountryCode: 'tel-country-code',
 		autocompletePhone: 'tel-national',
 		helpText: 'Utilisez les valeurs autocomplete appropriées pour l\'accessibilité',
-	},
+	} as Record<string, unknown>,
 	render(args) {
 		return {
 			components: { PhoneField },
 			setup() {
 				const phoneValue1 = ref('')
-				const selectedDialCode1 = ref('')
+				const dialCodeModel1 = ref('')
 				const phoneValue2 = ref('')
 				const phoneValue3 = ref('')
 
 				return {
 					args,
 					phoneValue1,
-					selectedDialCode1,
+					dialCodeModel1,
 					phoneValue2,
 					phoneValue3,
 				}
@@ -520,7 +616,7 @@ const phoneValue3 = ref('')
 						<h4 class="mb-2">Avec indicatif pays (autocomplete="tel-country-code")</h4>
 						<PhoneField
 							v-model="phoneValue1"
-							v-model:selected-dial-code="selectedDialCode1"
+							v-model:dialCodeModel="dialCodeModel1"
 							required
 							with-country-code
 							autocomplete-country-code="tel-country-code"
@@ -555,7 +651,7 @@ const phoneValue3 = ref('')
 					<div class="mt-4">
 						<h4>Valeurs actuelles :</h4>
 						<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
-						<pre class="text-caption">selectedDialCode1: {{ selectedDialCode1 }}</pre>
+						<pre class="text-caption">dialCodeModel1: {{ dialCodeModel1 }}</pre>
 						<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
 						<pre class="text-caption">phoneValue3: {{ phoneValue3 }}</pre>
 					</div>
@@ -579,11 +675,10 @@ export const CustomIndicatifs: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -597,7 +692,6 @@ export const CustomIndicatifs: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
 					const customIndicatifs = [
                         { code: '+33', country: 'France', abbreviation: 'FR', phoneLength: 10, mask: '## ## ## ## ##' },
@@ -606,7 +700,7 @@ export const CustomIndicatifs: Story = {
 						{ code: '+198', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##', phoneLength: 10 },
 					]
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -616,9 +710,7 @@ export const CustomIndicatifs: Story = {
 		modelValue: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: false,
 		displayFormat: 'code',
 		customIndicatifs: [
 			{ code: '+33', country: 'France', abbreviation: 'FR', phoneLength: 10, mask: '## ## ## ## ##' },
@@ -627,11 +719,10 @@ export const CustomIndicatifs: Story = {
 			{ code: '+98', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##', phoneLength: 18 },
 		],
 		useCustomIndicatifsOnly: true,
-		isValidatedOnBlur: true,
 		bgColor: 'white',
 		readonly: false,
 		disabled: false,
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -649,80 +740,6 @@ export const CustomIndicatifs: Story = {
 	},
 }
 
-export const NotValidatedOnBlur: Story = {
-	parameters: {
-		a11y: {
-			disable: false,
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<PhoneField
-						v-bind="args"
-						:required="required"
-						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
-						:displayFormat="displayFormat"
-						:customIndicatifs="customIndicatifs"
-						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
-					/>
-				</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import { PhoneField } from '@cnamts/synapse'
-					
-					const modelValue = ref('')
-					const required = ref(true)
-					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
-					const displayFormat = ref('code')
-					const customIndicatifs = ref([])
-					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(false)
-				</script>
-				`,
-			},
-		],
-	},
-	args: {
-		modelValue: '',
-		required: false,
-		outlined: true,
-		outlinedIndicatif: true,
-		withCountryCode: true,
-		countryCodeRequired: false,
-		displayFormat: 'code',
-		customIndicatifs: [],
-		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
-		readonly: false,
-		disabled: false,
-		bgColor: 'white',
-	},
-	render: (args) => {
-		return {
-			components: { PhoneField },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="pa-4">
-    <PhoneField
-     v-bind="args"
-    />
-				</div>
-   `,
-		}
-	},
-}
-
 export const DisplayFormatCode: Story = {
 	parameters: {
 		a11y: {
@@ -737,11 +754,10 @@ export const DisplayFormatCode: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -755,11 +771,10 @@ export const DisplayFormatCode: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
 					const customIndicatifs = ref([])
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -769,17 +784,15 @@ export const DisplayFormatCode: Story = {
 		modelValue: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: false,
 		displayFormat: 'code',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -811,11 +824,10 @@ export const DisplayFormatCodeAbbreviation: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -829,11 +841,10 @@ export const DisplayFormatCodeAbbreviation: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code-abbreviation')
 					const customIndicatifs = ref([])
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -843,17 +854,15 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		modelValue: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: false,
 		displayFormat: 'code-abbreviation',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -885,11 +894,10 @@ export const DisplayFormatCodeCountry: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -903,11 +911,10 @@ export const DisplayFormatCodeCountry: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code-country')
 					const customIndicatifs = ref([])
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -917,17 +924,15 @@ export const DisplayFormatCodeCountry: Story = {
 		modelValue: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: false,
 		displayFormat: 'code-country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -959,11 +964,10 @@ export const DisplayFormatCountry: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -977,11 +981,10 @@ export const DisplayFormatCountry: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('country')
 					const customIndicatifs = ref([])
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -991,17 +994,15 @@ export const DisplayFormatCountry: Story = {
 		modelValue: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: false,
 		displayFormat: 'country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -1033,11 +1034,10 @@ export const DisplayFormatAbbreviation: Story = {
 						v-model="modelValue"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -1051,11 +1051,10 @@ export const DisplayFormatAbbreviation: Story = {
 					const modelValue = ref('')
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('abbreviation')
 					const customIndicatifs = ref([])
 					const useCustomIndicatifsOnly = ref(false)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -1065,17 +1064,15 @@ export const DisplayFormatAbbreviation: Story = {
 		modelValue: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: false,
 		displayFormat: 'abbreviation',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -1108,11 +1105,10 @@ export const DefaultDialCode: Story = {
 						:dial-code-model="dialCodeModel"
 						:required="required"
 						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
 						:customIndicatifs="customIndicatifs"
 						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-						:isValidatedOnBlur="isValidatedOnBlur"
+						:isValidateOnBlur="isValidateOnBlur"
 					/>
 				</template>
 				`,
@@ -1138,10 +1134,9 @@ export const DefaultDialCode: Story = {
 					
 					const required = ref(true)
 					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code-country')
 					const useCustomIndicatifsOnly = ref(true)
-					const isValidatedOnBlur = ref(true)
+					const isValidateOnBlur = ref(true)
 				</script>
 				`,
 			},
@@ -1152,9 +1147,7 @@ export const DefaultDialCode: Story = {
 		dialCodeModel: { code: '+3433', country: 'Exemple', abbreviation: 'EX', phoneLength: 10, mask: '## ## ## ## ##' },
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: true,
 		displayFormat: 'code-country',
 		customIndicatifs: [
 			{ code: '+3433', country: 'Exemple', abbreviation: 'EX', phoneLength: 10, mask: '## ## ## ## ##' },
@@ -1162,11 +1155,11 @@ export const DefaultDialCode: Story = {
 			{ code: '+41', country: 'Suisse', abbreviation: 'CH', phoneLength: 9, mask: '### ### ###' },
 		],
 		useCustomIndicatifsOnly: true,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		bgColor: 'white',
 		readonly: false,
 		disabled: false,
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -1231,17 +1224,15 @@ export const DefaultDialCodeStandard: Story = {
 		dialCodeModel: indicatifs.find(ind => ind.country === 'France'),
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: true,
 		displayFormat: 'code-country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		bgColor: 'white',
 		readonly: false,
 		disabled: false,
-	},
+	} as Record<string, unknown>,
 	render: (args) => {
 		return {
 			components: { PhoneField },
@@ -1275,18 +1266,17 @@ export const DisplayModels: Story = {
 				code: `
         <template>
         	<span>
-				Indicatif: {{ selectedDialCode }}<br/>Numéro: {{ modelValue }}
+				Indicatif: {{ dialCodeModel }}<br/>Numéro: {{ modelValue }}
 			</span>
           <PhoneField
             v-model="modelValue"
-            v-model:selectedDialCode="selectedDialCode"
+            v-model:dialCodeModel="dialCodeModel"
             :required="required"
             :withCountryCode="withCountryCode"
-            :countryCodeRequired="countryCodeRequired"
             :displayFormat="displayFormat"
             :customIndicatifs="customIndicatifs"
             :useCustomIndicatifsOnly="useCustomIndicatifsOnly"
-            :isValidatedOnBlur="isValidatedOnBlur"
+            :isValidateOnBlur="isValidateOnBlur"
           />
         </template>
         `,
@@ -1298,14 +1288,13 @@ export const DisplayModels: Story = {
           import { PhoneField } from '@cnamts/synapse'
 
           const modelValue = ref('')
-          const selectedDialCode = ref('')
+          const dialCodeModel = ref('')
           const required = ref(true)
           const withCountryCode = ref(true)
-          const countryCodeRequired = ref(true)
           const displayFormat = ref('code-country')
           const customIndicatifs = ref([])
           const useCustomIndicatifsOnly = ref(false)
-          const isValidatedOnBlur = ref(true)
+          const isValidateOnBlur = ref(true)
         </script>
         `,
 			},
@@ -1316,64 +1305,59 @@ export const DisplayModels: Story = {
 		dialCodeModel: '',
 		required: false,
 		outlined: true,
-		outlinedIndicatif: true,
 		withCountryCode: true,
-		countryCodeRequired: false,
 		displayFormat: 'code-country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
+		isValidateOnBlur: true,
 		readonly: false,
 		bgColor: 'white',
-	},
+	} as Record<string, unknown>,
 	render: args => ({
 		components: { PhoneField },
 		setup() {
-			const modelValue = ref(args.modelValue)
-			const selectedDialCode = ref(args.dialCodeModel)
+			const _args = args as Record<string, unknown>
+			const modelValue = ref(_args.modelValue as string)
+			const dialCodeModel = ref(_args.dialCodeModel)
 
 			// Sync ref -> args (pour afficher les modèles dans la story)
 			watch(modelValue, (val) => {
-				args.modelValue = val
+				_args.modelValue = val
 			})
-			watch(selectedDialCode, (val) => {
-				args.dialCodeModel = val
+			watch(dialCodeModel, (val) => {
+				_args.dialCodeModel = val
 			})
 			// Sync args -> ref (quand on change les controls Storybook)
-			watch(() => args.modelValue, (val) => {
-				modelValue.value = val
+			watch(() => _args.modelValue, (val) => {
+				modelValue.value = val as string
 			})
-			watch(() => args.dialCodeModel, (val) => {
-				selectedDialCode.value = val
+			watch(() => _args.dialCodeModel, (val) => {
+				dialCodeModel.value = val
 			})
 
 			return {
 				args,
 				modelValue,
-				selectedDialCode,
+				dialCodeModel,
 			}
 		},
 		template: `
     <div class="pa-4">
       <div class="pa-4">
-        Indicatif: {{ selectedDialCode }}<br/>Numéro: {{ modelValue }}
+        Indicatif: {{ dialCodeModel }}<br/>Numéro: {{ modelValue }}
       </div>
 
       <PhoneField
         v-bind="args"
         v-model="modelValue"
-        v-model:selectedDialCode="selectedDialCode"
+        v-model:dialCodeModel="dialCodeModel"
       />
     </div>
   `,
 	}),
 }
 
-/**
- * Story qui montre le comportement du composant lorsque la gestion des erreurs est désactivée.
- * Aucun message d'erreur ne sera affiché, même si le champ est requis et vide.
- */
-export const DisabledErrorHandling: Story = {
+export const WithoutFieldset: Story = {
 	parameters: {
 		a11y: {
 			disable: false,
@@ -1382,206 +1366,39 @@ export const DisabledErrorHandling: Story = {
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<PhoneField
-						v-model="modelValue"
-						:required="required"
-						:withCountryCode="withCountryCode"
-						:countryCodeRequired="countryCodeRequired"
-						:displayFormat="displayFormat"
-						:isValidatedOnBlur="isValidatedOnBlur"
-						:disableErrorHandling="disableErrorHandling"
-					/>
-				</template>
-				`,
+<template>
+  <PhoneField
+	v-model="phoneNumber"
+	required
+	label="Numéro de téléphone"
+	without-fieldset
+  />
+</template>
+		`,
 			},
 			{
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { PhoneField } from '@cnamts/synapse'
-					
-					const modelValue = ref('')
-					const required = ref(true)
-					const withCountryCode = ref(true)
-					const countryCodeRequired = ref(true)
-					const displayFormat = ref('code')
-					const isValidatedOnBlur = ref(true)
-					const disableErrorHandling = ref(true)
-				</script>
-				`,
-			},
-		],
-	},
-	args: {
-		modelValue: '',
-		required: true,
-		outlined: true,
-		outlinedIndicatif: true,
-		withCountryCode: true,
-		countryCodeRequired: true,
-		displayFormat: 'code',
-		customIndicatifs: [],
-		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
-		disableErrorHandling: true,
-		readonly: false,
-		disabled: false,
-		bgColor: 'white',
-	},
-	render: (args) => {
-		return {
-			components: { PhoneField },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="pa-4">
-					<h3>Gestion des erreurs désactivée</h3>
-					<p>Ce champ est requis mais n'affichera pas d'erreur même s'il est vide.</p>
-					<PhoneField
-						v-bind="args"
-					/>
-					<div class="mt-6">
-						<h3>Comparaison avec gestion des erreurs activée</h3>
-						<p>Ce champ est requis et affichera une erreur s'il est vide.</p>
-						<PhoneField
-							v-bind="args"
-							:disable-error-handling="false"
-						/>
-					</div>
-				</div>
-			`,
-		}
-	},
-}
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PhoneField } from '@cnamts/synapse'
 
-export const FormValidation: Story = {
-	parameters: {
-		a11y: {
-			disable: false,
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<form @submit.prevent="submitForm" class="d-flex flex-column">
-						<PhoneField
-							ref="phoneFieldRef"
-							v-model="phoneNumber"
-							:required="true"
-							:outlined="true"
-							:outlinedIndicatif="true"
-							:withCountryCode="true"
-							:country-code-required="true"
-							:isValidatedOnBlur="true"
-							:readonly="readonly"
-							:disabled="disabled"
-						/>
-						<v-btn type="submit" color="primary" class="mt-4" style="width: 200px;">Soumettre le formulaire</v-btn>
-						<div v-if="formSubmitted" class="mt-4 pa-2" :class="{ 'bg-success': formIsValid, 'bg-error': !formIsValid }" style="width: fit-content;">
-							<p v-if="formIsValid" class="text-white">Formulaire valide !</p>
-							<p v-else class="text-white">Formulaire invalide !</p>
-						</div>
-					</form>
-				</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import { ref } from 'vue'
-					import { PhoneField } from '@cnamts/synapse'
-					
-					const phoneFieldRef = ref(null)
-					const phoneNumber = ref('')
-					const formSubmitted = ref(false)
-					const formIsValid = ref(false)
-					const readonly = ref(false)
-					const disabled = ref(false)
-					
-					const submitForm = async () => {
-						formSubmitted.value = true
-						// Validation du champ téléphone
-						let isValid = false
-						if (phoneFieldRef.value) {
-							// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Nécessaire pour accéder à validateOnSubmit
-							isValid = await (phoneFieldRef.value as any).validateOnSubmit()
-						}
-						
-						formIsValid.value = isValid
-						
-						console.log(isValid ? 'Formulaire valide !' : 'Formulaire invalide !')
-					}
-				</script>
-				`,
+const phoneNumber = ref('')
+</script>
+		`,
 			},
 		],
 	},
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
 	args: {
 		modelValue: '',
 		required: true,
-		outlined: true,
-		outlinedIndicatif: true,
+		label: 'Numéro de téléphone',
 		withCountryCode: true,
-		countryCodeRequired: true,
-		displayFormat: 'code',
-		customIndicatifs: [],
-		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: true,
-		bgColor: 'white',
-		readonly: false,
-		disabled: false,
-	},
-	render: (args) => {
-		return {
-			components: { PhoneField },
-			setup() {
-				const phoneFieldRef = ref(null)
-				const phoneNumber = ref('')
-				const formSubmitted = ref(false)
-				const formIsValid = ref(false)
-
-				const submitForm = async () => {
-					formSubmitted.value = true
-					// Validation du champ téléphone
-					let isValid = false
-					if (phoneFieldRef.value) {
-						// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Nécessaire pour accéder à validateOnSubmit
-						isValid = await (phoneFieldRef.value as any).validateOnSubmit()
-					}
-
-					formIsValid.value = isValid
-
-					console.log(isValid ? 'Formulaire valide !' : 'Formulaire invalide !')
-				}
-
-				return { phoneFieldRef, phoneNumber, formSubmitted, formIsValid, submitForm, args }
-			},
-			template: `
-				<div class="pa-4">
-					<form @submit.prevent="submitForm" class="d-flex flex-column">
-						<PhoneField
-							ref="phoneFieldRef"
-							v-bind="args"
-						/>
-						<v-btn type="submit" color="primary" class="mt-4" style="width: 200px;">Soumettre le formulaire</v-btn>
-						<div v-if="formSubmitted" class="mt-4 pa-2" :class="{ 'bg-success': formIsValid, 'bg-error': !formIsValid }" style="width: fit-content;">
-							<p v-if="formIsValid" class="text-white">Formulaire valide !</p>
-							<p v-else class="text-white">Formulaire invalide !</p>
-						</div>
-					</form>
-					<div class="mt-8">
-						<h3>Comment utiliser la validation à la soumission</h3>
-						<p>1. Ajoutez une référence au composant PhoneField avec <code>ref="phoneFieldRef"</code></p>
-						<p>2. Désactivez la validation au blur si nécessaire avec <code>:isValidatedOnBlur="false"</code></p>
-						<p>3. Dans votre méthode de soumission, appelez <code>phoneFieldRef.value.validateOnSubmit()</code></p>
-						<p>4. Cette méthode retourne une Promise qui résout à <code>true</code> si le champ est valide, <code>false</code> sinon</p>
-					</div>
-				</div>
-			`,
-		}
-	},
+		withoutFieldset: true,
+	} as Record<string, unknown>,
 }