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

app/components/malio/InputText.vue

@@ -5,14 +5,17 @@
   >
     <input
       :id="inputId"
+      v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
       class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
       :class="[
         disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
-        error
+        hasError
           ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
-          : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
+          : hasSuccess
+            ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+            : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
         text,
         iconInputPaddingClass,
         inputClass,
@@ -37,9 +40,11 @@
       :for="inputId"
       class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
       :class="[
-        error
+        hasError
           ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
-          : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
+          : hasSuccess
+            ? 'text-m-success peer-valid:text-m-success peer-focus:text-m-success'
+            : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
         labelClass,
         textSize,
       ]"
@@ -52,36 +57,47 @@
       :name="iconName"
       :size="iconSize"
       :class="[
-        error
+        hasError
           ? 'text-m-error'
-          : 'text-m-muted',
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
         'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
         iconColor,
       ]"
     />
 
   </div>
-    <p
-      v-if="hint && !error"
-      :id="`${inputId}-hint`"
-      class="mt-1 text-xs text-m-muted"
-    >
-      {{ hint }}
-    </p>
+  <p
+    v-if="hint && !hasError"
+    :id="`${inputId}-hint`"
+    class="mt-1 text-xs text-m-muted"
+  >
+    {{ hint }}
+  </p>
 
-    <p
-      v-if="error"
-      :id="`${inputId}-error`"
-      class="mt-1 text-xs text-m-error"
-    >
-      {{ error }}
-    </p>
+  <p
+    v-if="hasError"
+    :id="`${inputId}-error`"
+    class="mt-1 text-xs text-m-error"
+  >
+    {{ error }}
+  </p>
+
+  <p v-if="hasSuccess && !hasError"
+    :id="`${inputId}-success`"
+    class="mt-1 text-xs text-m-success"
+  >
+    {{ successMessage }}
+  </p>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import type {MaskInputOptions} from 'maska'
+import {vMaska} from 'maska/vue'
+import {computed, useAttrs} from 'vue'
 
-defineOptions({ inheritAttrs: false })
+defineOptions({inheritAttrs: false})
 
 const props = withDefaults(
   defineProps<{
@@ -103,10 +119,13 @@ const props = withDefaults(
     readonly?: boolean
     hint?: string
     error?: string
+    success?: string
+    succes?: string
     iconName?: string
     rounded?: string
     iconSize?: string | number
     iconColor?: string
+    mask?: string | MaskInputOptions
   }>(),
   {
     id: '',
@@ -129,8 +148,11 @@ const props = withDefaults(
     rounded: 'rounded-md',
     hint: '',
     error: '',
+    success: '',
+    succes: '',
     iconSize: 24,
     iconColor: '',
+    mask: undefined,
   },
 )
 
@@ -138,11 +160,15 @@ const attrs = useAttrs()
 const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
 
 const inputId = computed(() => props.id?.toString() || 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.error) ids.push(`${inputId.value}-error`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
   return ids.length ? ids.join(' ') : undefined
 })
 
@@ -186,4 +212,3 @@ const iconInputPaddingClass = computed(() => {
   }
 }
 </style>
-