feat : ajout des tests et retour sur le composant

app/components/malio/InputText.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative mt-4 w-full"
+    class="relative mt-4 flex h-12 w-full items-center"
     :class="[minWidth, maxWidth]"
   >
     <input
@@ -8,19 +8,19 @@
       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="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none border-m-muted focus:border-2"
       :class="[
-        disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
-        hasError
-          ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
-          : 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,
-        rounded,
-      ]"
+      disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+      hasError
+        ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
+        : hasSuccess
+          ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
+          : 'border-m-border focus:border-m-primary focus:pl-[11px]',
+      textInput,
+      iconInputPaddingClass,
+      inputClass,
+      rounded,
+    ]"
       :required="required"
       :maxlength="maxLength"
       :minlength="minLength"
@@ -38,18 +38,19 @@
     <label
       v-if="label"
       :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="floating-label absolute left-3 top-2 mt-1 origin-left transition-transform duration-150 font-medium"
       :class="[
-        hasError
-          ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
-          : 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,
+    disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError
+      ? 'text-m-error'
+      : hasSuccess
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+      labelClass,
+      textLabel,
       ]"
     >
-      {{ label }}
+    {{ label }}
     </label>
 
     <Icon
@@ -69,27 +70,18 @@
 
   </div>
   <p
-    v-if="hint && !hasError && !hasSuccess"
-    :id="`${inputId}-hint`"
-    class="mt-1 text-xs text-m-muted"
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
   >
-    {{ hint }}
-  </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 }}
+    {{ hint || error || successMessage }}
   </p>
 </template>
 
@@ -109,8 +101,8 @@ const props = withDefaults(
     modelValue?: string | null | undefined
     minWidth?: string
     maxWidth?: string
-    text?: string
-    textSize?: string
+    textInput?: string
+    textLabel?: string
     inputClass?: string
     labelClass?: string
     required?: boolean
@@ -139,12 +131,12 @@ const props = withDefaults(
     maxWidth: '',
     inputClass: '',
     labelClass: '',
-    text: 'text-lg',
+    textInput: 'text-lg',
     required: false,
     maxLength: undefined,
     minLength: undefined,
     readonly: false,
-    textSize: 'text-sm',
+    textLabel: 'text-sml',
     disabled: false,
     rounded: 'rounded-md',
     hint: '',
@@ -199,17 +191,14 @@ const iconInputPaddingClass = computed(() => {
 }
 
 .grow-height {
-  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-  transform-origin: center;
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 
 .grow-height:focus {
-  transform: scaleY(1.2);
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
 }
-
 @media (prefers-reduced-motion: reduce) {
-  .grow-height {
-    transition: none;
-  }
+  .grow-height { transition: none; }
 }
 </style>