133 lines
3.3 KiB
Vue
133 lines
3.3 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
|
<MalioInputText v-model="simpleValue" />
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
|
<MalioInputText
|
|
v-model="nameValue"
|
|
label="Nom d'utilisateur"
|
|
name="username"
|
|
autocomplete="username"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Avec icône</h2>
|
|
<MalioInputText
|
|
v-model="searchValue"
|
|
label="Recherche"
|
|
icon-name="mdi:magnify"
|
|
icon-size="20"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
|
<MalioInputText
|
|
model-value="Valeur verrouillee"
|
|
disabled
|
|
label="Champ desactive"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
|
<MalioInputText
|
|
model-value="Lecture seule"
|
|
readonly
|
|
label="Champ readonly"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Hint et erreur</h2>
|
|
<MalioInputText
|
|
v-model="emailValue"
|
|
label="Email"
|
|
hint="Format attendu: nom@domaine.com"
|
|
/>
|
|
<div class="mt-4">
|
|
<MalioInputText
|
|
model-value="abc"
|
|
label="Code"
|
|
error="Le code doit contenir au moins 6 caracteres"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Largeurs</h2>
|
|
<div class="space-y-4">
|
|
<MalioInputText
|
|
label="Petit"
|
|
min-width="w-56"
|
|
/>
|
|
<MalioInputText
|
|
label="Moyen"
|
|
min-width="w-72"
|
|
/>
|
|
<MalioInputText
|
|
label="Large"
|
|
min-width="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
|
|
<MalioInputText
|
|
model-value="ab"
|
|
label="Code promo"
|
|
icon-name="mdi:alert-circle-outline"
|
|
icon-size="20"
|
|
error="Le code est invalide"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
|
|
<MalioInputText
|
|
v-model="cityValue"
|
|
label="Ville"
|
|
icon-name="mdi:map-marker-outline"
|
|
icon-size="20"
|
|
hint="Commencez à taper le nom de la ville"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Readonly + icône</h2>
|
|
<MalioInputText
|
|
model-value="Commande #A-2048"
|
|
label="Référence"
|
|
readonly
|
|
icon-name="mdi:lock-outline"
|
|
icon-size="20"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Désactivé + icône</h2>
|
|
<MalioInputText
|
|
model-value="Compte indisponible"
|
|
label="Compte"
|
|
disabled
|
|
icon-name="mdi:account-off-outline"
|
|
icon-size="20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const simpleValue = ref('')
|
|
const nameValue = ref('')
|
|
const searchValue = ref('')
|
|
const emailValue = ref('')
|
|
const cityValue = ref('')
|
|
</script>
|