From 5b9b7711744ca086bb43c0c15c97cb88b9bb919d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 15:39:30 +0200
Subject: [PATCH] docs(playground) : exemples readonly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajout de deux blocs readonly (vide + rempli) sur chaque page playground
concernée : InputText, InputEmail, InputAmount, InputAutocomplete,
InputPassword, InputTextArea, InputPhone, InputUpload, Date, TimePicker.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .playground/pages/composant/date/date.vue     | 20 +++++++++++++++++++
 .../pages/composant/input/inputAmount.vue     | 20 +++++++++++++++++++
 .../composant/input/inputAutocomplete.vue     | 20 +++++++++++++++++++
 .../pages/composant/input/inputEmail.vue      | 18 +++++++++++++++++
 .../pages/composant/input/inputPassword.vue   | 18 +++++++++++++++++
 .../pages/composant/input/inputPhone.vue      | 18 +++++++++++++++++
 .../pages/composant/input/inputText.vue       | 20 +++++++++++++++++++
 .../pages/composant/input/inputTextArea.vue   | 20 +++++++++++++++++++
 .../pages/composant/input/inputUpload.vue     | 18 +++++++++++++++++
 .../pages/composant/time/timePicker.vue       | 11 ++++++++++
 10 files changed, 183 insertions(+)

diff --git a/.playground/pages/composant/date/date.vue b/.playground/pages/composant/date/date.vue
index 320a5b2..ec73c15 100644
--- a/.playground/pages/composant/date/date.vue
+++ b/.playground/pages/composant/date/date.vue
@@ -50,6 +50,25 @@
         />
       </div>
     </div>
+
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">Readonly (readonly vide)</h2>
+        <MalioDate
+          label="Date de naissance (readonly vide)"
+          :readonly="true"
+        />
+      </div>
+
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">Readonly (readonly rempli)</h2>
+        <MalioDate
+          v-model="readonlyFilledDate"
+          label="Date de naissance (readonly rempli)"
+          :readonly="true"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -62,6 +81,7 @@ const now = new Date()
 const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 
+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)
diff --git a/.playground/pages/composant/input/inputAmount.vue b/.playground/pages/composant/input/inputAmount.vue
index 1006ee6..42190d5 100644
--- a/.playground/pages/composant/input/inputAmount.vue
+++ b/.playground/pages/composant/input/inputAmount.vue
@@ -36,6 +36,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputAmount
+        label="Montant (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputAmount
+        v-model="readonlyFilledAmount"
+        label="Montant (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Erreur et succès</h2>
       <div class="mt-4">
@@ -57,4 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
+const readonlyFilledAmount = ref('1250.00')
 </script>
diff --git a/.playground/pages/composant/input/inputAutocomplete.vue b/.playground/pages/composant/input/inputAutocomplete.vue
index 7597851..dfac49b 100644
--- a/.playground/pages/composant/input/inputAutocomplete.vue
+++ b/.playground/pages/composant/input/inputAutocomplete.vue
@@ -82,6 +82,25 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputAutocomplete
+        label="Pays (readonly vide)"
+        :options="staticOptions"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputAutocomplete
+        v-model="readonlyFilledAutocomplete"
+        label="Pays (readonly rempli)"
+        :options="staticOptions"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputAutocomplete
@@ -140,6 +159,7 @@ const staticOptions: Option[] = [
   {label: 'Italie', value: 'it'},
 ]
 
+const readonlyFilledAutocomplete = ref<string | number | null>('de')
 const simpleValue = ref<string | number | null>(null)
 const leftIconValue = ref<string | number | null>(null)
 const createValue = ref<string | number | null>(null)
diff --git a/.playground/pages/composant/input/inputEmail.vue b/.playground/pages/composant/input/inputEmail.vue
index 665f17f..8583754 100644
--- a/.playground/pages/composant/input/inputEmail.vue
+++ b/.playground/pages/composant/input/inputEmail.vue
@@ -48,6 +48,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputEmail
+        label="Adresse email (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputEmail
+        v-model="readonlyFilledEmail"
+        label="Adresse email (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputEmail
@@ -108,6 +125,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+const readonlyFilledEmail = ref('contact@malio.fr')
 const emailValue = ref('')
 const dynamicEmail = ref('')
 const requiredEmail = ref('')
diff --git a/.playground/pages/composant/input/inputPassword.vue b/.playground/pages/composant/input/inputPassword.vue
index 54a8dc0..2f8d515 100644
--- a/.playground/pages/composant/input/inputPassword.vue
+++ b/.playground/pages/composant/input/inputPassword.vue
@@ -41,6 +41,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputPassword
+        label="Mot de passe (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputPassword
+        v-model="readonlyFilledPassword"
+        label="Mot de passe (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputPassword
@@ -83,6 +100,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+const readonlyFilledPassword = ref('motdepasse123')
 const passwordValue = ref('')
 const dynamicPassword = ref('')
 
diff --git a/.playground/pages/composant/input/inputPhone.vue b/.playground/pages/composant/input/inputPhone.vue
index 5775e28..dde4c3c 100644
--- a/.playground/pages/composant/input/inputPhone.vue
+++ b/.playground/pages/composant/input/inputPhone.vue
@@ -73,6 +73,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputPhone
+        label="Téléphone (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputPhone
+        v-model="readonlyFilledPhone"
+        label="Téléphone (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputPhone
@@ -121,6 +138,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+const readonlyFilledPhone = ref('+33 6 12 34 56 78')
 const phoneValue = ref('')
 const phoneAddable = ref('')
 const phoneFrench = ref('')
diff --git a/.playground/pages/composant/input/inputText.vue b/.playground/pages/composant/input/inputText.vue
index 2a118a9..fad5445 100644
--- a/.playground/pages/composant/input/inputText.vue
+++ b/.playground/pages/composant/input/inputText.vue
@@ -108,6 +108,25 @@
         icon-size="20"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputText
+        label="Référence (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputText
+        v-model="readonlyFilledValue"
+        label="Référence (readonly rempli)"
+        icon-name="mdi:lock-outline"
+        icon-size="20"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Champ obligatoire</h2>
       <MalioInputText
@@ -162,6 +181,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+const readonlyFilledValue = ref('Commande #A-2048')
 const nameValue = ref('')
 const searchValue = ref('')
 const codeValue = ref('')
diff --git a/.playground/pages/composant/input/inputTextArea.vue b/.playground/pages/composant/input/inputTextArea.vue
index 677937a..2544b6b 100644
--- a/.playground/pages/composant/input/inputTextArea.vue
+++ b/.playground/pages/composant/input/inputTextArea.vue
@@ -61,6 +61,25 @@
       </div>
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputTextArea
+        label="Description (readonly vide)"
+        :readonly="true"
+        :size="3"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputTextArea
+        v-model="readonlyFilledTextArea"
+        label="Description (readonly rempli)"
+        :readonly="true"
+        :size="3"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
       <MalioInputTextArea
@@ -94,6 +113,7 @@
 import {ref} from 'vue'
 import MalioInputTextArea from '../../../../app/components/malio/input/InputTextArea.vue'
 
+const readonlyFilledTextArea = ref('Ce texte est en lecture seule et ne peut pas être modifié.')
 const hintValue = ref('')
 const iconValue = ref('')
 const errorValue = ref('abc')
diff --git a/.playground/pages/composant/input/inputUpload.vue b/.playground/pages/composant/input/inputUpload.vue
index 5aa3afe..abb474a 100644
--- a/.playground/pages/composant/input/inputUpload.vue
+++ b/.playground/pages/composant/input/inputUpload.vue
@@ -31,6 +31,23 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioInputUpload
+        label="Fichier (readonly vide)"
+        :readonly="true"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioInputUpload
+        v-model="readonlyFilledUpload"
+        label="Fichier (readonly rempli)"
+        :readonly="true"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
       <MalioInputUpload
@@ -74,6 +91,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+const readonlyFilledUpload = ref('document.pdf')
 const uploadValue = ref('')
 const dynamicUpload = ref('')
 
diff --git a/.playground/pages/composant/time/timePicker.vue b/.playground/pages/composant/time/timePicker.vue
index 127342c..e2ab011 100644
--- a/.playground/pages/composant/time/timePicker.vue
+++ b/.playground/pages/composant/time/timePicker.vue
@@ -30,12 +30,23 @@
       <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
       <MalioTimePicker v-model="noClearValue" label="Heure" :clearable="false" />
     </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
+      <MalioTimePicker label="Heure (readonly vide)" :readonly="true" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
+      <MalioTimePicker v-model="readonlyFilledTime" label="Heure (readonly rempli)" :readonly="true" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {ref} from 'vue'
 
+const readonlyFilledTime = ref('14:30')
 const simpleValue = ref('')
 const initialValue = ref('08:30')
 const disabledValue = ref('14:15')