From 8685e83de99b8a25e4294ed0599a1538198fa856 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 13:04:36 +0200
Subject: [PATCH] docs(email) : exemples bouton + d'ajout (story + playground)

---
 .playground/pages/composant/input/inputEmail.vue | 15 +++++++++++++++
 app/story/input/inputEmail.story.vue             | 16 ++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/.playground/pages/composant/input/inputEmail.vue b/.playground/pages/composant/input/inputEmail.vue
index 8583754..664bb8d 100644
--- a/.playground/pages/composant/input/inputEmail.vue
+++ b/.playground/pages/composant/input/inputEmail.vue
@@ -14,6 +14,20 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Ajout dynamique (bouton +)</h2>
+      <div class="space-y-3">
+        <MalioInputEmail
+          v-for="(email, index) in emails"
+          :key="index"
+          v-model="emails[index]"
+          label="Adresse email"
+          addable
+          @add="emails.push('')"
+        />
+      </div>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
       <MalioInputEmail
@@ -127,6 +141,7 @@ import { computed, ref } from 'vue'
 
 const readonlyFilledEmail = ref('contact@malio.fr')
 const emailValue = ref('')
+const emails = ref<string[]>([''])
 const dynamicEmail = ref('')
 const requiredEmail = ref('')
 const lowercaseEmail = ref('')
diff --git a/app/story/input/inputEmail.story.vue b/app/story/input/inputEmail.story.vue
index 1626d0b..1fb2a22 100644
--- a/app/story/input/inputEmail.story.vue
+++ b/app/story/input/inputEmail.story.vue
@@ -18,6 +18,19 @@
         />
       </div>
 
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
+        <MalioInputEmail
+          v-model="addableValue"
+          label="Adresse email"
+          addable
+          @add="onAdd"
+        />
+        <p v-if="addClicks > 0" class="mt-2 text-sm text-m-muted">
+          Bouton cliqué {{ addClicks }} fois
+        </p>
+      </div>
+
       <div class="rounded-lg border p-4">
         <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
         <MalioInputEmail
@@ -251,6 +264,9 @@ import {ref} from 'vue'
 import MalioInputEmail from '../../components/malio/input/InputEmail.vue'
 
 const simpleValue = ref('')
+const addableValue = ref('')
+const addClicks = ref(0)
+const onAdd = () => { addClicks.value += 1 }
 const leftIconValue = ref('')
 const noIconValue = ref('')
 const hintValue = ref('')