276 lines
7.9 KiB
Vue
276 lines
7.9 KiB
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"
|
|
empty-option-label="Aucune selection"
|
|
:readonly="true"
|
|
/>
|
|
<MalioSelectCheckbox
|
|
:model-value="['a']"
|
|
label="Catégories (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">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>
|