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="mt-4">
-
-    <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"
+          model-value="abcabc"
-          min-width="w-56"
+          label="Code"
-        />
+          success="Le code est valide"
-        <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
@@ -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>

app/assets/css/malio.css

@@ -14,5 +14,6 @@
     --m-bg: 243 244 248;          /* Couleur de fond générale */
 
     --m-error: 155 17 30;         /* rouge pur pour les erreurs */
+    --m-success: 15 149 70;         /* rouge pur pour les erreurs */
   }
 }

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
+  <p
-      v-if="hint && !error"
+    v-if="hint && !hasError"
-      :id="`${inputId}-hint`"
+    :id="`${inputId}-hint`"
-      class="mt-1 text-xs text-m-muted"
+    class="mt-1 text-xs text-m-muted"
-    >
+  >
-      {{ hint }}
+    {{ hint }}
-    </p>
+  </p>
 
-    <p
+  <p
-      v-if="error"
+    v-if="hasError"
-      :id="`${inputId}-error`"
+    :id="`${inputId}-error`"
-      class="mt-1 text-xs text-m-error"
+    class="mt-1 text-xs text-m-error"
-    >
+  >
-      {{ error }}
+    {{ error }}
-    </p>
+  </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>
-

nuxt.config.ts

@@ -24,6 +24,7 @@ export default defineNuxtConfig({
               muted: 'rgb(var(--m-muted) / <alpha-value>)',
               bg: 'rgb(var(--m-bg) / <alpha-value>)',
               error: 'rgb(var(--m-error) / <alpha-value>)',
+              success: 'rgb(var(--m-success) / <alpha-value>)',
             }
           }
         }

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
-        "@nuxtjs/tailwindcss": "^6.14.0"
+        "@nuxtjs/tailwindcss": "^6.14.0",
+        "maska": "^3.2.0"
       },
       "devDependencies": {
         "@nuxt/eslint": "latest",
@@ -9672,6 +9673,12 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/maska": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-3.2.0.tgz",
+      "integrity": "sha512-zSmSgs5/q9vMSmrdZT3rKOv9uLznNWR/niuuAdBZDTvB3SMKOX9vhMtDijFyExz+B4UClu2rvksylUh/ea1bLA==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "maska": "^3.2.0"
   }
 }