From 734c7aba2f472b4d14cdcf34e21ed94a6d443202 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 15:56:08 +0200
Subject: [PATCH] docs(playground) : page DIVERS regroupant tous les champs
 readonly

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../pages/composant/divers/readonly.vue       | 233 ++++++++++++++++++
 .playground/playground.nav.ts                 |   1 +
 2 files changed, 234 insertions(+)
 create mode 100644 .playground/pages/composant/divers/readonly.vue

diff --git a/.playground/pages/composant/divers/readonly.vue b/.playground/pages/composant/divers/readonly.vue
new file mode 100644
index 0000000..582be56
--- /dev/null
+++ b/.playground/pages/composant/divers/readonly.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="space-y-6 p-4">
+    <h1 class="text-2xl font-bold">Champs en lecture seule (readonly)</h1>
+    <p class="text-sm text-m-muted">
+      Tous les champs de formulaire dans leur état <code>readonly</code>, vides puis remplis.
+      Règles : bordure noire même vide, label et icône gris quand vide → noir quand rempli,
+      pas de focus bleu ni de grossissement.
+    </p>
+
+    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2 xl:grid-cols-3">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputText</h2>
+        <div class="space-y-4">
+          <MalioInputText
+            label="Référence (vide)"
+            :readonly="true"
+          />
+          <MalioInputText
+            model-value="Commande #A-2048"
+            label="Référence (rempli)"
+            icon-name="mdi:lock-outline"
+            icon-size="20"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputEmail</h2>
+        <div class="space-y-4">
+          <MalioInputEmail
+            label="Adresse email (vide)"
+            :readonly="true"
+          />
+          <MalioInputEmail
+            model-value="contact@malio.fr"
+            label="Adresse email (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputAmount</h2>
+        <div class="space-y-4">
+          <MalioInputAmount
+            label="Montant (vide)"
+            :readonly="true"
+          />
+          <MalioInputAmount
+            model-value="1250.00"
+            label="Montant (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputAutocomplete</h2>
+        <div class="space-y-4">
+          <MalioInputAutocomplete
+            label="Pays (vide)"
+            :options="countryOptions"
+            :readonly="true"
+          />
+          <MalioInputAutocomplete
+            model-value="de"
+            label="Pays (rempli)"
+            icon-name="mdi:lock-outline"
+            icon-position="left"
+            :options="countryOptions"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputPassword</h2>
+        <div class="space-y-4">
+          <MalioInputPassword
+            label="Mot de passe (vide)"
+            :readonly="true"
+          />
+          <MalioInputPassword
+            model-value="motdepasse123"
+            label="Mot de passe (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputTextArea</h2>
+        <div class="space-y-4">
+          <MalioInputTextArea
+            label="Description (vide)"
+            :size="3"
+            :readonly="true"
+          />
+          <MalioInputTextArea
+            model-value="Ce texte est en lecture seule et ne peut pas être modifié."
+            label="Description (rempli)"
+            icon-name="mdi:lock-outline"
+            :size="3"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputPhone</h2>
+        <div class="space-y-4">
+          <MalioInputPhone
+            label="Téléphone (vide)"
+            :readonly="true"
+          />
+          <MalioInputPhone
+            model-value="+33 6 12 34 56 78"
+            label="Téléphone (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioInputUpload</h2>
+        <div class="space-y-4">
+          <MalioInputUpload
+            label="Fichier (vide)"
+            :readonly="true"
+          />
+          <MalioInputUpload
+            model-value="document.pdf"
+            label="Fichier (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDate</h2>
+        <div class="space-y-4">
+          <MalioDate
+            label="Date de naissance (vide)"
+            :readonly="true"
+          />
+          <MalioDate
+            model-value="2026-06-15"
+            label="Date de naissance (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDateTime</h2>
+        <div class="space-y-4">
+          <MalioDateTime
+            label="Date et heure (vide)"
+            :readonly="true"
+          />
+          <MalioDateTime
+            model-value="2026-12-25T09:30:00"
+            label="Date et heure (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDateRange</h2>
+        <div class="space-y-4">
+          <MalioDateRange
+            label="Période (vide)"
+            :readonly="true"
+          />
+          <MalioDateRange
+            :model-value="rangeValue"
+            label="Période (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioDateWeek</h2>
+        <div class="space-y-4">
+          <MalioDateWeek
+            label="Semaine (vide)"
+            :readonly="true"
+          />
+          <MalioDateWeek
+            model-value="2026-W52"
+            label="Semaine (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">MalioTimePicker</h2>
+        <div class="space-y-4">
+          <MalioTimePicker
+            label="Heure (vide)"
+            :readonly="true"
+          />
+          <MalioTimePicker
+            model-value="14:30"
+            label="Heure (rempli)"
+            :readonly="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+type Option = {label: string; value: string | number}
+
+const countryOptions: Option[] = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Luxembourg', value: 'lu'},
+  {label: 'Allemagne', value: 'de'},
+]
+
+const rangeValue = ref<{start: string; end: string}>({start: '2026-12-20', end: '2026-12-31'})
+</script>
diff --git a/.playground/playground.nav.ts b/.playground/playground.nav.ts
index a3c4a58..c10706f 100644
--- a/.playground/playground.nav.ts
+++ b/.playground/playground.nav.ts
@@ -69,6 +69,7 @@ export const navSections: SidebarSection[] = [
     label: 'DIVERS',
     icon: 'mdi:dots-horizontal',
     items: [
+      {label: 'Champs readonly', to: '/composant/divers/readonly'},
       {label: 'Heure', to: '/composant/time/time'},
       {label: 'Sélecteur de site', to: '/composant/site/siteSelector'},
       {label: 'Formulaire client', to: '/composant/form/client'},