feat : ajout du masque et de l'etat succes sur le texte

.playground/pages/composant/inputText.vue

@@ -2,7 +2,7 @@
   <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" />
+      <MalioInputText v-model="simpleValue"/>
     </div>
 
     <div class="rounded-lg border p-4">
@@ -44,7 +44,7 @@
     </div>
 
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint et erreur</h2>
+      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succes</h2>
       <MalioInputText
         v-model="emailValue"
         label="Email"
@@ -57,26 +57,14 @@
           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">
+      <div class="mt-4">
         <MalioInputText
-          label="Petit"
-          min-width="w-56"
-        />
-        <MalioInputText
-          label="Moyen"
-          min-width="w-72"
-        />
-        <MalioInputText
-          label="Large"
-          min-width="w-full"
+          model-value="abcabc"
+          label="Code"
+          success="Le code est valide"
         />
       </div>
     </div>
-
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
       <MalioInputText
@@ -87,6 +75,15 @@
         error="Le code est invalide"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes + icône</h2>
+      <MalioInputText
+        label="Email"
+        success="Adresse 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">Hint + icône</h2>
@@ -120,6 +117,13 @@
         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>
 </template>
 
@@ -129,4 +133,14 @@ const nameValue = ref('')
 const searchValue = ref('')
 const emailValue = ref('')
 const cityValue = ref('')
+
+const maskOptions = {
+  mask: '@@-###-@@',
+  tokens: {
+    '@': {
+      pattern: /[A-Za-z]/,
+      transform: (char: string) => char.toUpperCase()
+    }
+  }
+}
 </script>