@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/PasswordField/PasswordField.stories.ts

@@ -1,8 +1,9 @@
-import type { StoryObj, Meta } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
 import PasswordField from './PasswordField.vue'
 
 const meta = {
-	title: 'Composants/Formulaires/PasswordField',
+	title: 'Composants/Formulaires/Passwordfield',
 	component: PasswordField,
 	decorators: [
 		() => ({
@@ -11,57 +12,102 @@ const meta = {
 	],
 	parameters: {
 		layout: 'fullscreen',
+		docs: {
+			description: {
+				component: `PasswordField est un champ de saisie sécurisé pour les mots de passe`,
+			},
+		},
 	},
 	argTypes: {
 		modelValue: {
-			description: 'La valeur du modèle pour le champ.',
 			control: 'text',
-			default: null,
-			table: {
-				type: {
-					summary: 'string | null',
-				},
-			},
+			description: 'Valeur du champ de mot de passe',
 		},
-		outlined: {
-			description: 'Définit la variante du champ (outlined ou underlined).',
-			control: 'boolean',
-			default: true,
-			table: {
-				type: {
-					summary: 'boolean',
-				},
-			},
+		variantStyle: {
+			control: 'select',
+			options: ['outlined', 'underlined'],
+			description: 'Style du champ (contour ou souligné)',
+		},
+		color: {
+			control: 'select',
+			options: ['primary', 'secondary', 'error', 'warning', 'success', 'info'],
+			description: 'Couleur principale du champ',
+		},
+		label: {
+			control: 'text',
+			description: 'Libellé du champ',
 		},
 		required: {
-			description: 'Indique si le champ est requis.',
 			control: 'boolean',
-			default: false,
-			table: {
-				type: {
-					summary: 'boolean',
-				},
-			},
+			description: 'Indique si le champ est obligatoire',
 		},
-		isValidateOnBlur: {
-			description: 'Active ou non la validation lors du blur.',
+		errorMessages: {
+			control: 'object',
+			description: 'Messages d\'erreur à afficher',
+		},
+		warningMessages: {
+			control: 'object',
+			description: 'Messages d\'avertissement à afficher',
+		},
+		successMessages: {
+			control: 'object',
+			description: 'Messages de succès à afficher',
+		},
+		isReadOnly: {
 			control: 'boolean',
-			default: true,
-			table: {
-				type: {
-					summary: 'boolean',
-				},
-			},
+			description: 'Indique si le champ est en lecture seule',
+		},
+		isDisabled: {
+			control: 'boolean',
+			description: 'Indique si le champ est désactivé',
+		},
+		placeholder: {
+			control: 'text',
+			description: 'Texte d\'indication affiché lorsque le champ est vide',
 		},
 		customRules: {
-			description: 'Règles de validation personnalisées.',
 			control: 'object',
-			table: {
-				type: {
-					summary: 'array',
-				},
-			},
+			description: 'Règles de validation personnalisées',
 		},
+		customWarningRules: {
+			control: 'object',
+			description: 'Règles d\'avertissement personnalisées',
+		},
+		customSuccessRules: {
+			control: 'object',
+			description: 'Règles de succès personnalisées',
+		},
+		showSuccessMessages: {
+			control: 'boolean',
+			description: 'Indique si les messages de succès doivent être affichés',
+		},
+		displayAsterisk: {
+			control: 'boolean',
+			description: 'Affiche un astérisque à côté du libellé pour indiquer que le champ est obligatoire',
+		},
+		isValidateOnBlur: {
+			control: 'boolean',
+			description: 'Indique si la validation doit être effectuée lors de la perte de focus',
+		},
+	},
+	args: {
+		modelValue: '',
+		variantStyle: 'outlined',
+		color: 'primary',
+		label: 'Mot de passe',
+		required: false,
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		isReadOnly: false,
+		isDisabled: false,
+		placeholder: 'Entrez votre mot de passe',
+		customRules: [],
+		customWarningRules: [],
+		customSuccessRules: [],
+		showSuccessMessages: true,
+		displayAsterisk: false,
+		isValidateOnBlur: true,
 	},
 } satisfies Meta<typeof PasswordField>
 
@@ -70,144 +116,902 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 /**
- * Story par défaut
+ * Story par défaut montrant un champ de mot de passe basique.
  */
 export const Default: Story = {
-	args: {
-		modelValue: '',
-		outlined: true,
-		required: false,
-		isValidateOnBlur: true,
-		customRules: [],
-	},
-	render: (args) => {
-		return {
-			components: { PasswordField },
-			setup() {
-				return { args }
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						placeholder="Entrez votre mot de passe"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('')
+				</script>
+				`,
 			},
-			template: `
-                <PasswordField v-bind="args" v-model="args.modelValue"/>
-            `,
-		}
+		],
 	},
+	render: args => ({
+		components: { PasswordField },
+		setup() {
+			const password = ref(args.modelValue)
+			return { args, password }
+		},
+		template: `
+			<PasswordField
+				v-model="password"
+				:variant-style="args.variantStyle"
+				:color="args.color"
+				:label="args.label"
+				:required="args.required"
+				:error-messages="args.errorMessages"
+				:warning-messages="args.warningMessages"
+				:success-messages="args.successMessages"
+				:is-read-only="args.isReadOnly"
+				:is-disabled="args.isDisabled"
+				:placeholder="args.placeholder"
+				:custom-rules="args.customRules"
+				:custom-warning-rules="args.customWarningRules"
+				:custom-success-rules="args.customSuccessRules"
+				:show-success-messages="args.showSuccessMessages"
+				:display-asterisk="args.displayAsterisk"
+				:is-validate-on-blur="args.isValidateOnBlur"
+			/>
+		`,
+	}),
+}
+
+/**
+ * Champ de mot de passe avec validation requise.
+ */
+export const Required: Story = {
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
-<template>
-  <PasswordField
-    v-model="password"
-    :required="false"
-    :isValidateOnBlur="true"
-  />
-</template>
-        `,
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:required="true"
+					/>
+				</template>
+				`,
 			},
 			{
 				name: 'Script',
 				code: `
-<script setup lang="ts">
-import { ref } from 'vue'
-import PasswordField from '@cnamts/synapse'
-
-const password = ref('')
-</script>
-        `,
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('')
+				</script>
+				`,
 			},
 		],
 	},
+	args: {
+		required: true,
+		displayAsterisk: false,
+	},
 }
 
 /**
- * Story avec champ requis
+ * Champ de mot de passe avec validation requise avec asterisk.
  */
-export const Required: Story = {
+export const RequiredWithAsterisk: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:required="true"
+						:display-asterisk="true"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('')
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
-		...Default.args,
 		required: true,
+		displayAsterisk: true,
 	},
+}
+
+/**
+ * Champ de mot de passe désactivé.
+ */
+export const Disabled: Story = {
 	parameters: {
-		...Default.parameters,
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
-<template>
-  <PasswordField
-    v-model="password"
-    :required="true"
-    :isValidateOnBlur="true"
-  />
-</template>
-        `,
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:is-disabled="true"
+					/>
+				</template>
+				`,
 			},
 			{
 				name: 'Script',
 				code: `
-<script setup lang="ts">
-import { ref } from 'vue'
-import PasswordField  from '@cnamts/synapse'
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('MonMotDePasse123')
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		isDisabled: true,
+		modelValue: 'MonMotDePasse123',
+	},
+}
 
-const password = ref('')
-</script>
-        `,
+/**
+ * Champ de mot de passe en lecture seule.
+ */
+export const ReadOnly: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:is-read-only="true"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('MonMotDePasse123')
+				</script>
+				`,
 			},
 		],
 	},
+	args: {
+		isReadOnly: true,
+		modelValue: 'MonMotDePasse123',
+	},
 }
 
-export const WithCustomRules: Story = {
+/**
+ * Champ de mot de passe avec règles de validation qui génèrent une erreur.
+ */
+export const WithError: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:custom-rules="customRules"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('Mdp123')
+					
+					const customRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || value.length < 8) {
+										return 'Le mot de passe doit contenir au moins 8 caractères'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
 	args: {
-		...Default.args,
+		modelValue: 'Mdp123',
 		customRules: [
 			{
-				type: 'minLength',
+				type: 'custom',
 				options: {
-					length: 8,
-					message: 'Le mot de passe doit comporter au moins 8 caractères.',
-					successMessage: 'Le mot de passe est suffisamment long.',
+					validate: (value: string) => {
+						if (!value || value.length < 8) {
+							return 'Le mot de passe doit contenir au moins 8 caractères'
+						}
+						return true
+					},
+					fieldIdentifier: 'password',
 				},
 			},
 		],
 	},
+}
+
+/**
+ * Champ de mot de passe avec règles de validation qui génèrent un avertissement.
+ */
+export const WithWarning: Story = {
 	parameters: {
-		...Default.parameters,
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
-<template>
-  <PasswordField
-    v-model="password"
-    :required="false"
-    :isValidateOnBlur="true"
-    :customRules="[
-      { 
-        type: 'minLength', 
-        options: { 
-          length: 8, 
-          message: 'Le mot de passe doit comporter au moins 8 caractères.', 
-          successMessage: 'Le mot de passe est suffisamment long.' 
-        } 
-      },
-    ]"
-  />
-</template>
-        `,
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:custom-warning-rules="customWarningRules"
+					/>
+				</template>
+				`,
 			},
 			{
 				name: 'Script',
 				code: `
-<script setup lang="ts">
-import { ref } from 'vue'
-import PasswordField  from '@cnamts/synapse'
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('MotDePasse123')
+					
+					const customWarningRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
+									if (!hasSpecialChar) {
+										return 'Le mot de passe pourrait être plus fort avec des caractères spéciaux'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: 'MotDePasse123',
+		customWarningRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
+						if (!hasSpecialChar) {
+							return 'Le mot de passe pourrait être plus fort avec des caractères spéciaux'
+						}
+						return true
+					},
+					fieldIdentifier: 'password',
+				},
+			},
+		],
+	},
+}
+
+/**
+ * Champ de mot de passe avec règles de validation qui génèrent un succès.
+ */
+export const WithSuccess: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:custom-success-rules="customSuccessRules"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('MotDePasse123!@#')
+					
+					const customSuccessRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									const hasUpperCase = /[A-Z]/.test(value)
+									const hasLowerCase = /[a-z]/.test(value)
+									const hasNumber = /[0-9]/.test(value)
+									const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
+									const hasMinLength = value.length >= 8
+									
+									if (hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar && hasMinLength) {
+										return 'Mot de passe fort'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: 'MotDePasse123!@#',
+		customSuccessRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const hasUpperCase = /[A-Z]/.test(value)
+						const hasLowerCase = /[a-z]/.test(value)
+						const hasNumber = /[0-9]/.test(value)
+						const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value)
+						const isLongEnough = value.length >= 8
+
+						if (hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar && isLongEnough) {
+							return 'Mot de passe fort'
+						}
+						return false
+					},
+					fieldIdentifier: 'password',
+				},
+			},
+		],
+	},
+}
+
+/**
+ * Démonstration des différents types de validation (erreurs, avertissements, succès).
+ */
+export const WithValidation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:required="true"
+						:custom-rules="customRules"
+						:custom-warning-rules="customWarningRules"
+						:custom-success-rules="customSuccessRules"
+						:show-success-messages="true"
+						:display-asterisk="true"
+						:is-validate-on-blur="false"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('')
+					
+					// Règles personnalisées pour la validation du mot de passe
+					const customRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || value.length < 8) {
+										return 'Le mot de passe doit contenir au moins 8 caractères'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+					
+					const customWarningRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
+										return 'Le mot de passe pourrait être plus fort avec des caractères spéciaux'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+					
+					const customSuccessRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (value && value.length >= 12
+										&& /[A-Z]/.test(value)
+										&& /[0-9]/.test(value)
+										&& /[!@#$%^&*(),.?":{}|<>]/.test(value)) {
+										return 'Mot de passe très sécurisé !'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { PasswordField },
+		setup() {
+			const password = ref('')
 
-const password = ref('')
-</script>
-        `,
+			// Règles personnalisées pour la validation du mot de passe
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || value.length < 8) {
+								return 'Le mot de passe doit contenir au moins 8 caractères'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+			]
+
+			const customWarningRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
+								return 'Le mot de passe pourrait être plus fort avec des caractères spéciaux'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+			]
+
+			const customSuccessRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (value && value.length >= 12
+								&& /[A-Z]/.test(value)
+								&& /[0-9]/.test(value)
+								&& /[!@#$%^&*(),.?":{}|<>]/.test(value)) {
+								return true
+							}
+							return 'Pas encore un mot de passe fort'
+						},
+						successMessage: 'Mot de passe très sécurisé !',
+						fieldIdentifier: 'password',
+					},
+				},
+			]
+
+			return { args, password, customRules, customWarningRules, customSuccessRules }
+		},
+		template: `
+			<div>
+				<p class="mb-2">Entrez un mot de passe pour voir les différents types de validation :</p>
+				<PasswordField
+					v-model="password"
+					:variant-style="args.variantStyle"
+					:color="args.color"
+					label="Mot de passe"
+					:required="true"
+					:custom-rules="customRules"
+					:custom-warning-rules="customWarningRules"
+					:custom-success-rules="customSuccessRules"
+					:show-success-messages="true"
+					:display-asterisk="true"
+					:is-validate-on-blur="false"
+				/>
+				<div class="mt-4">
+					<p><strong>Conseils pour tester :</strong></p>
+					<ul>
+						<li>Laissez le champ vide pour voir l'erreur de champ requis</li>
+						<li>Entrez moins de 8 caractères pour voir l'erreur de longueur</li>
+						<li>Entrez un mot de passe sans caractères spéciaux pour voir l'avertissement</li>
+						<li>Entrez un mot de passe fort (12+ caractères avec majuscules, chiffres et caractères spéciaux) pour voir le message de succès</li>
+					</ul>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+/**
+ * Champ de mot de passe avec règles de validation personnalisées.
+ */
+export const WithCustomRules: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PasswordField
+						v-model="password"
+						label="Mot de passe"
+						:custom-rules="customRules"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('')
+					
+					// Règles personnalisées pour la validation du mot de passe
+					const customRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || value.length < 8) {
+										return 'Le mot de passe doit contenir au moins 8 caractères'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || !/[A-Z]/.test(value)) {
+										return 'Le mot de passe doit contenir au moins une lettre majuscule'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || !/[0-9]/.test(value)) {
+										return 'Le mot de passe doit contenir au moins un chiffre'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+				</script>
+				`,
 			},
 		],
 	},
+	render: args => ({
+		components: { PasswordField },
+		setup() {
+			const password = ref(args.modelValue)
+
+			// Règles personnalisées pour la validation du mot de passe
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || value.length < 8) {
+								return 'Le mot de passe doit contenir au moins 8 caractères'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/[A-Z]/.test(value)) {
+								return 'Le mot de passe doit contenir au moins une lettre majuscule'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/[0-9]/.test(value)) {
+								return 'Le mot de passe doit contenir au moins un chiffre'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+			]
+
+			return { args, password, customRules }
+		},
+		template: `
+			<PasswordField
+				v-model="password"
+				:variant-style="args.variantStyle"
+				:color="args.color"
+				:label="args.label"
+				:required="args.required"
+				:is-read-only="args.isReadOnly"
+				:is-disabled="args.isDisabled"
+				:placeholder="args.placeholder"
+				:custom-rules="customRules"
+				:show-success-messages="args.showSuccessMessages"
+				:display-asterisk="args.displayAsterisk"
+				:is-validate-on-blur="args.isValidateOnBlur"
+			/>
+		`,
+	}),
+}
+
+/**
+ * Démonstration de la validation de formulaire avec la méthode validateOnSubmit.
+ */
+export const WithFormValidation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<form @submit.prevent="handleSubmit">
+						<PasswordField
+							ref="passwordFieldRef"
+							v-model="password"
+							label="Mot de passe"
+							:required="true"
+							:custom-rules="customRules"
+							:display-asterisk="true"
+							:is-validate-on-blur="false"
+						/>
+						<button 
+							type="submit" 
+							class="mt-4 px-4 py-2 bg-primary text-white rounded"
+						>
+							Valider
+						</button>
+					</form>
+					<div v-if="formStatus" class="mt-4 p-4 rounded" :class="formStatus.includes('succès') ? 'bg-success-lighten5' : 'bg-error-lighten5'">
+						{{ formStatus }}
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PasswordField } from '@cnamts/synapse'
+					
+					const password = ref('')
+					const passwordFieldRef = ref(null)
+					const formStatus = ref('')
+					
+					// Règles personnalisées pour la validation du mot de passe
+					const customRules = [
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || value.length < 8) {
+										return 'Le mot de passe doit contenir au moins 8 caractères'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+						{
+							type: 'custom',
+							options: {
+								validate: (value: string) => {
+									if (!value || !/[A-Z]/.test(value)) {
+										return 'Le mot de passe doit contenir au moins une lettre majuscule'
+									}
+									return true
+								},
+								fieldIdentifier: 'password',
+							},
+						},
+					]
+					
+					// Fonction de soumission du formulaire
+					const handleSubmit = () => {
+						if (passwordFieldRef.value) {
+							const isValid = passwordFieldRef.value.validateOnSubmit()
+							if (isValid) {
+								formStatus.value = 'Formulaire soumis avec succès !'
+							} else {
+								formStatus.value = 'Erreur de validation, veuillez corriger les champs'
+							}
+						}
+					}
+				</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { PasswordField },
+		setup() {
+			const password = ref('')
+			const passwordFieldRef = ref<InstanceType<typeof PasswordField> | null>(null)
+			const formStatus = ref('')
+
+			// Règles personnalisées pour la validation du mot de passe
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || value.length < 8) {
+								return 'Le mot de passe doit contenir au moins 8 caractères'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || !/[A-Z]/.test(value)) {
+								return 'Le mot de passe doit contenir au moins une lettre majuscule'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+			]
+
+			// Fonction de soumission du formulaire
+			const handleSubmit = () => {
+				if (passwordFieldRef.value) {
+					const isValid = passwordFieldRef.value.validateOnSubmit()
+					if (isValid) {
+						formStatus.value = 'Formulaire soumis avec succès !'
+					}
+					else {
+						formStatus.value = 'Erreur de validation, veuillez corriger les champs'
+					}
+				}
+			}
+
+			return { args, password, passwordFieldRef, customRules, handleSubmit, formStatus }
+		},
+		template: `
+			<div>
+				<form @submit.prevent="handleSubmit" class="mb-4">
+					<PasswordField
+						ref="passwordFieldRef"
+						v-model="password"
+						:variant-style="args.variantStyle"
+						:color="args.color"
+						label="Mot de passe"
+						:required="true"
+						:custom-rules="customRules"
+						:display-asterisk="true"
+						:is-validate-on-blur="false"
+					/>
+					<button 
+						type="submit" 
+						class="mt-4 px-4 py-2 bg-primary text-white rounded"
+					>
+						Valider
+					</button>
+				</form>
+				<div v-if="formStatus" class="mt-4 p-4 rounded" :class="formStatus.includes('succès') ? 'bg-success-lighten5' : 'bg-error-lighten5'">
+					{{ formStatus }}
+				</div>
+				<div class="mt-4">
+					<p><strong>Instructions :</strong></p>
+					<p>Ce formulaire utilise la méthode <code>validateOnSubmit()</code> pour valider le champ lors de la soumission.</p>
+					<p>La validation ne se fait pas à la perte de focus (<code>isValidateOnBlur="false"</code>) mais uniquement lors du clic sur le bouton.</p>
+				</div>
+			</div>
+		`,
+	}),
 }