From 36e0d933c00f2d6e14e350d14c8780ba0d1b5122 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 9 Jun 2026 12:06:17 +0200
Subject: [PATCH] docs(date) : exemples saisie manuelle (playground + story)

---
 .playground/pages/composant/date/date.vue | 10 ++++++++++
 app/story/date/datePicker.story.vue       | 11 +++++++++++
 2 files changed, 21 insertions(+)

diff --git a/.playground/pages/composant/date/date.vue b/.playground/pages/composant/date/date.vue
index ec73c15..7d50df5 100644
--- a/.playground/pages/composant/date/date.vue
+++ b/.playground/pages/composant/date/date.vue
@@ -13,6 +13,15 @@
         <div class="rounded border p-3 text-sm">
           <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
         </div>
+        <MalioDate
+          v-model="editableValue"
+          label="Date (saisie clavier)"
+          editable
+          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur éditable (ISO) : <code>{{ editableValue ?? 'null' }}</code></p>
+        </div>
         <div class="flex gap-2">
           <button
             type="button"
@@ -85,4 +94,5 @@ const readonlyFilledDate = ref<string | null>('2026-06-15')
 const value = ref<string | null>(null)
 const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
+const editableValue = ref<string | null>(null)
 </script>
diff --git a/app/story/date/datePicker.story.vue b/app/story/date/datePicker.story.vue
index 5c6248f..936b56a 100644
--- a/app/story/date/datePicker.story.vue
+++ b/app/story/date/datePicker.story.vue
@@ -28,6 +28,16 @@
         />
       </div>
 
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Saisie clavier (editable)</h2>
+        <MalioDate
+          v-model="editableValue"
+          label="Date de naissance"
+          editable
+          hint="Tape JJ/MM/AAAA ou utilise le calendrier"
+        />
+      </div>
+
       <div class="rounded-lg border p-4">
         <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
         <MalioDate
@@ -91,4 +101,5 @@ const simpleValue = ref<string | null>(null)
 const initialValue = ref<string | null>(todayIso)
 const boundedValue = ref<string | null>(null)
 const errorValue = ref<string | null>(null)
+const editableValue = ref<string | null>(null)
 </script>