malio-layer-ui/.playground/pages/composant/divers/readonly.vue

<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)"
            :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">MalioSelect</h2>
        <div class="space-y-4">
          <MalioSelect
            label="Catégorie (readonly vide)"
            :options="categoryOptions"
            empty-option-label="Aucune selection"
            :readonly="true"
          />
          <MalioSelect
            :model-value="'a'"
            label="Catégorie (readonly rempli)"
            :options="categoryOptions"
            empty-option-label="Aucune selection"
            :readonly="true"
          />
        </div>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">MalioSelectCheckbox</h2>
        <div class="space-y-4">
          <MalioSelectCheckbox
            label="Catégories (readonly vide)"
            :options="categoryOptions"
            :display-tag="true"
            :readonly="true"
          />
          <MalioSelectCheckbox
            :model-value="['a']"
            label="Catégories (readonly rempli)"
            :options="categoryOptions"
            empty-option-label="Aucune selection"
            :display-tag="true"
            :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 categoryOptions: Option[] = [
  {label: 'Catégorie A', value: 'a'},
  {label: 'Catégorie B', value: 'b'},
]

const rangeValue = ref<{start: string; end: string}>({start: '2026-12-20', end: '2026-12-31'})
</script>