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

.playground/pages/composant/inputText.vue

@@ -28,9 +28,9 @@
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
       <MalioInputText
-        model-value="Valeur verrouillee"
+        model-value="Valeur verrouillée"
         disabled
-        label="Champ desactive"
+        label="Champ désactivé"
       />
     </div>
 
@@ -44,26 +44,14 @@
     </div>
 
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succes</h2>
+      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
       <MalioInputText
-        v-model="emailValue"
+        v-model="cityValue"
-        label="Email"
+        label="Ville"
-        hint="Format attendu: nom@domaine.com"
+        icon-name="mdi:map-marker-outline"
+        icon-size="20"
+        hint="Commencez à taper le nom de la ville"
       />
-      <div class="mt-4">
-        <MalioInputText
-          model-value="abc"
-          label="Code"
-          error="Le code doit contenir au moins 6 caracteres"
-        />
-      </div>
-      <div class="mt-4">
-        <MalioInputText
-          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>
@@ -76,26 +64,14 @@
       />
     </div>
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succes + icône</h2>
+      <h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
       <MalioInputText
-        label="Email"
+        label="Code"
-        success="Adresse valide"
+        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">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
@@ -124,6 +100,40 @@
         :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>
 
@@ -131,8 +141,21 @@
 const simpleValue = ref('')
 const nameValue = ref('')
 const searchValue = ref('')
-const emailValue = 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: '@@-###-@@',

app/components/malio/InputText.vue

@@ -69,7 +69,7 @@
 
   </div>
   <p
-    v-if="hint && !hasError"
+    v-if="hint && !hasError && !hasSuccess"
     :id="`${inputId}-hint`"
     class="mt-1 text-xs text-m-muted"
   >
@@ -96,7 +96,7 @@
 <script setup lang="ts">
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
-import {computed, useAttrs} from 'vue'
+import {computed, useAttrs, useId} from 'vue'
 
 defineOptions({inheritAttrs: false})
 
@@ -158,16 +158,16 @@ const props = withDefaults(
 )
 
 const attrs = useAttrs()
-const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
+const generatedId = useId()
 
-const inputId = computed(() => props.id?.toString() || generatedId)
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
 const successMessage = computed(() => props.success || props.succes || '')
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!successMessage.value)
 
 const describedBy = computed(() => {
   const ids: string[] = []
-  if (props.hint) ids.push(`${inputId.value}-hint`)
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
   if (hasError.value) ids.push(`${inputId.value}-error`)
   if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
   return ids.length ? ids.join(' ') : undefined