docs(playground) : exemples readonly

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

@@ -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)

.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>

.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)

.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('')

.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('')
 

.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('')

.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('')

.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')

.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('')
 

.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')