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

2026-02-23 08:56:27 +01:00
parent 2340256ee1
commit 75a3912727
6 changed files with 93 additions and 44 deletions
--- a/.playground/pages/composant/inputText.vue
+++ b/.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>
--- a/app/assets/css/malio.css
+++ b/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 */
  }
 }
--- a/app/components/malio/InputText.vue
+++ b/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>
-
--- a/nuxt.config.ts
+++ b/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>)',
            }
          }
        }
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  }
 }