feat : 333 creation du composant inputtext

.playground/pages/composant/inputText.vue

@@ -0,0 +1,132 @@
+<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>