add password field

assurance-maladie-digital · Jan 7, 2025 · 5f24930 · 5f24930
1 parent 8c23f7b
commit 5f24930
Show file tree

Hide file tree

Showing 8 changed files with 635 additions and 7 deletions.
diff --git a/dev/Playground.vue b/dev/Playground.vue
@@ -1,2 +1,53 @@
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import PasswordField from '@/components/PasswordField/PasswordField.vue'
+
+	const password = ref<string | null>(null)
+	const passwordFieldRef = ref()
+
+	const customRule = [
+		{
+			type: 'minLength',
+			options: {
+				length: 10,
+				message: 'Le mot de passe doit contenir au moins 10 caractères.',
+				successMessage: 'Le mot de passe a une longueur valide.',
+			},
+		},
+	]
+	const handleSubmit = () => {
+		// Appeler la méthode exposée `validateOnSubmit` via la référence
+		const isValid = passwordFieldRef.value?.validateOnSubmit()
+		if (!isValid) {
+			alert('Corrigez les erreurs avant de soumettre !')
+		}
+		else {
+			alert('Formulaire soumis avec succès !')
+		}
+	}
+</script>
+
 <template>
+	<main>
+		<v-form
+			class="mx-16 my-6"
+			@submit.prevent="handleSubmit"
+		>
+			<PasswordField
+				ref="passwordFieldRef"
+				v-model="password"
+				:custom-rules="customRule"
+				is-validate-on-blur
+				outlined
+				required
+			/>
+			<button type="submit">
+				Soumettre
+			</button>
+		</v-form>
+	</main>
 </template>
+
+<style scoped>
+/* Add any styles you need for the playground here */
+</style>
diff --git a/src/components/NirField/NirField.stories.ts b/src/components/NirField/NirField.stories.ts
@@ -154,7 +154,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -191,7 +191,7 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -228,7 +228,7 @@ export const WithoutKey: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -265,7 +265,7 @@ export const WithSuccessMessages: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -324,7 +324,7 @@ export const CustomRules: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -362,7 +362,7 @@ export const WithNumberTooltip: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -400,7 +400,7 @@ export const WithKeyTooltip: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')

diff --git a/src/components/PasswordField/PasswordField.mdx b/src/components/PasswordField/PasswordField.mdx
@@ -0,0 +1,72 @@
+import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
+import * as PasswordFieldStories from './PasswordField.stories';
+import PasswordField from './PasswordField.vue';
+
+<Meta title="Composants/Formulaires/PasswordField" component={PasswordField}/>
+
+# PasswordField
+
+Le composant `PasswordField` est utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.
+Il permet également d’afficher ou de masquer le contenu du champ à l’aide d’une icône.
+
+<Canvas story={{height: '150px'}} of={PasswordFieldStories.Default}/>
+
+# API
+
+<Controls of={PasswordFieldStories.Default}/>
+
+## Utilisation de base
+
+    <Source
+        dark
+        code={`
+<script setup lang="ts">
+    import {ref} from 'vue'
+    import PasswordField from './PasswordField.vue'
+
+    const password = ref('')
+    const passwordFieldRef = ref() // Référence Vue pour accéder au composant enfant
+
+    function handleSubmit() {
+    // Appeler la méthode exposée validateOnSubmit via la référence
+    const isValid = passwordFieldRef.value?.validateOnSubmit()
+    if (!isValid) {
+    alert('Veuillez corriger les erreurs avant de soumettre.')
+} else {
+    alert('Formulaire soumis avec succès !')
+}
+}
+</script>
+
+    <template>
+      <form @submit.prevent="handleSubmit">
+        <PasswordField
+          ref="passwordFieldRef"
+          v-model="password"
+          outlined
+          :is-validate-on-blur="true"
+        />
+        <button type="submit">Soumettre</button>
+      </form>
+    </template>
+`}
+/>
+
+---
+
+## Gestion de la validation
+
+### Validation par défaut
+
+- **required** : Si `true`, le champ est obligatoire et affiche une erreur si le champ est vide.
+- **isValidateOnBlur** : Si `true`, la validation se déclenche automatiquement lors du blur (perte de focus).
+
+### Règles de validation personnalisées (props `customRules`)
+
+Vous pouvez définir des règles de validation personnalisées sous forme de tableau d’objets.
+
+Pour savoir comment utiliser les regles personnalisees, veuillez consulter la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).
+
+
+
+