feat : reorganisation de la structure projet

.playground/pages/composant/input/inputText.vue

@@ -0,0 +1,184 @@
+<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
+      />
+    </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 à droite</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">Avec icône à gauche</h2>
+      <MalioInputText
+        label="Recherche"
+        icon-name="mdi:magnify"
+        icon-size="20"
+        icon-position="left"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputText
+        model-value="Valeur verrouillée"
+        disabled
+        label="Champ désactivé"
+      />
+      <MalioInputText
+        disabled
+        label="Champ désactivé"
+      />
+    </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 + 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">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">Succès + icône</h2>
+      <MalioInputText
+        label="Code"
+        success="Code valide"
+        icon-name="mdi:alert-circle-outline"
+        icon-size="20"
+      />
+    </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 class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec masque</h2>
+      <MalioInputText
+        label="Plaque d'immatriculation"
+        :mask="maskOptions"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Code dynamique</h2>
+      <MalioInputText
+        v-model="dynamicCodeValue"
+        label="Code d'accès"
+        hint="Format attendu: 6 à 10 caractères alphanumériques"
+        :error="dynamicCodeError"
+        :success="dynamicCodeSuccess"
+        icon-name="mdi:key-outline"
+        icon-size="20"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succès</h2>
+      <MalioInputText
+        v-model="codeValue"
+        label="Code"
+        hint="Format attendu: 6 à 10 caractères alphanumériques"
+      />
+      <div class="mt-4">
+        <MalioInputText
+          model-value="invalide"
+          label="Code"
+          error="Le code doit contenir au moins 6 caractères"
+        />
+      </div>
+      <div class="mt-4">
+        <MalioInputText
+          model-value="valide"
+          label="Code"
+          success="Le code est valide"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+const nameValue = ref('')
+const searchValue = ref('')
+const codeValue = ref('')
+const cityValue = ref('')
+const dynamicCodeValue = ref('')
+
+const codeRegex = /^[A-Z0-9]{6,10}$/
+const normalizedDynamicCode = computed(() => dynamicCodeValue.value.toUpperCase())
+const isDynamicCodeValid = computed(() => codeRegex.test(normalizedDynamicCode.value))
+const dynamicCodeError = computed(() => {
+  if (!dynamicCodeValue.value) return ''
+  return isDynamicCodeValid.value ? '' : 'Code invalide (6 à 10 caractères alphanumériques)'
+})
+const dynamicCodeSuccess = computed(() => {
+  if (!dynamicCodeValue.value) return ''
+  return isDynamicCodeValid.value ? 'Code valide' : ''
+})
+
+const maskOptions = {
+  mask: '@@-###-@@',
+  tokens: {
+    '@': {
+      pattern: /[A-Za-z]/,
+      transform: (char: string) => char.toUpperCase()
+    }
+  }
+}
+</script>