fix: style des composants inputs + affichage des hint/error/success (#25)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #25
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/input/InputAmount.vue

@@ -1,67 +1,69 @@
 <template>
-  <div
-    :class="mergedGroupClass"
-  >
-    <input
-      :id="inputId"
-      :name="name"
-      :autocomplete="autocomplete"
-      :class="mergedInputClass"
-      :required="required"
-      :maxlength="maxLength"
-      :minlength="minLength"
-      :disabled="disabled"
-      :value="currentValue"
-      :readonly="readonly"
-      :aria-invalid="!!error"
-      :aria-describedby="describedBy"
-      v-bind="attrs"
-      type="text"
-      inputmode="decimal"
-      placeholder="_"
-      @input="onInput"
-      @focus="isFocused = true"
-      @blur="onBlur"
+  <div>
+    <div
+      :class="mergedGroupClass"
     >
+      <input
+        :id="inputId"
+        :name="name"
+        :autocomplete="autocomplete"
+        :class="mergedInputClass"
+        :required="required"
+        :maxlength="maxLength"
+        :minlength="minLength"
+        :disabled="disabled"
+        :value="currentValue"
+        :readonly="readonly"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        type="text"
+        inputmode="decimal"
+        placeholder="_"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="onBlur"
+      >
 
-    <label
-      v-if="label"
-      :for="inputId"
-      :class="mergedLabelClass"
-    >
-      {{ label }}
-    </label>
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
 
-    <IconifyIcon
-      v-if="iconName"
-      :icon="iconName"
-      :width="iconSize"
-      :height="iconSize"
-      data-test="icon"
-      :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success' : iconColor,
-      iconPositionClass,
-    ]"
-    />
-
-  </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${inputId}-describedby`"
-    :class="[
+      <IconifyIcon
+        v-if="iconName"
+        :icon="iconName"
+        :width="iconSize"
+        :height="iconSize"
+        data-test="icon"
+        :class="[
         hasError
           ? 'text-m-danger'
           : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'mt-1 text-xs ml-[2px] ',
+            ? 'text-m-success' : iconColor,
+        iconPositionClass,
       ]"
-  >
-    {{ hint || error || success }}
-  </p>
+      />
+
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          'mt-1 text-xs ml-[2px] ',
+        ]"
+    >
+      {{ hint || error || success }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -133,7 +135,7 @@ const isFilled = computed(() => currentValue.value.trim().length > 0)
 
 const mergedGroupClass = computed(() =>
   twMerge(
-    'relative mt-4 flex h-12 w-full items-center',
+    'relative flex h-12 w-full items-center',
     props.groupClass,
   ),
 )

app/components/malio/input/InputNumber.vue

@@ -1,68 +1,70 @@
 <template>
-  <div :class="mergedGroupClass" >
-    <label
-      v-if="label"
-      :for="inputId"
-      :class="mergedLabelClass"
-    >
-      {{ label }}
-    </label>
-    <button
-      type="button"
-      :disabled="isMinusDisabled"
-      @click="decrement"
-    >
-      <IconifyIcon
-        icon="mdi:minus"
-        :class="mergedButtonMinusClass"
-      />
-    </button>
-    <input
-      :id="inputId"
-      :name="name"
-      autocomplete="off"
-      :class="mergedInputClass"
-      :style="inputWidthStyle"
-      :value="displayedValue"
-      :required="required"
-      :disabled="disabled"
-      :readonly="readonly"
-      :aria-invalid="!!error"
-      :aria-describedby="describedBy"
-      v-bind="attrs"
-      type="text"
-      inputmode="numeric"
-      placeholder="_"
-      @input="onInput"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    >
-    <button
-      type="button"
-      :disabled="isPlusDisabled"
-      @click="increment"
-    >
-      <IconifyIcon
-        icon="mdi:plus"
-        :class="mergedButtonPlusClass"
-      />
-    </button>
+  <div>
+    <div :class="mergedGroupClass" >
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+      <button
+        type="button"
+        :disabled="isMinusDisabled"
+        @click="decrement"
+      >
+        <IconifyIcon
+          icon="mdi:minus"
+          :class="mergedButtonMinusClass"
+        />
+      </button>
+      <input
+        :id="inputId"
+        :name="name"
+        autocomplete="off"
+        :class="mergedInputClass"
+        :style="inputWidthStyle"
+        :value="displayedValue"
+        :required="required"
+        :disabled="disabled"
+        :readonly="readonly"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        type="text"
+        inputmode="numeric"
+        placeholder="_"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
+      <button
+        type="button"
+        :disabled="isPlusDisabled"
+        @click="increment"
+      >
+        <IconifyIcon
+          icon="mdi:plus"
+          :class="mergedButtonPlusClass"
+        />
+      </button>
 
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          'text-xs ml-[2px] ',
+        ]"
+    >
+      {{ hint || error || success }}
+    </p>
   </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${inputId}-describedby`"
-    :class="[
-        hasError
-          ? 'text-m-danger'
-          : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'text-xs ml-[2px] ',
-      ]"
-  >
-    {{ hint || error || success }}
-  </p>
 </template>
 
 <script setup lang="ts">
@@ -170,7 +172,7 @@ const isPlusDisabled = computed(() =>
 
 const mergedGroupClass = computed(() =>
   twMerge(
-    'relative mt-4 flex h-12 w-full items-center',
+    'relative flex h-12 w-full items-center',
     props.groupClass,
   ),
 )

app/components/malio/input/InputPassword.vue

@@ -1,67 +1,69 @@
 <template>
-  <div
-    :class="mergedGroupClass"
-  >
-    <input
-      :id="inputId"
-      :name="name"
-      :autocomplete="autocomplete"
-      :class="mergedInputClass"
-      :required="required"
-      :maxlength="maxLength"
-      :minlength="minLength"
-      :disabled="disabled"
-      :value="currentValue"
-      :readonly="readonly"
-      :aria-invalid="!!error"
-      :aria-describedby="describedBy"
-      v-bind="attrs"
-      placeholder="_"
-      :type="isPasswordVisible ? 'text' : 'password'"
-      @input="onInput"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+  <div>
+    <div
+      :class="mergedGroupClass"
     >
+      <input
+        :id="inputId"
+        :name="name"
+        :autocomplete="autocomplete"
+        :class="mergedInputClass"
+        :required="required"
+        :maxlength="maxLength"
+        :minlength="minLength"
+        :disabled="disabled"
+        :value="currentValue"
+        :readonly="readonly"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        placeholder="_"
+        :type="isPasswordVisible ? 'text' : 'password'"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
 
-    <label
-      v-if="label"
-      :for="inputId"
-      :class="mergedLabelClass"
-    >
-      {{ label }}
-    </label>
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
 
-    <IconifyIcon
-      v-if="displayIcon"
-      :icon="isPasswordVisible ? 'mdi:eye-outline' : 'mdi:eye-off-outline'"
-      :width="24"
-      :height="24"
-      data-test="icon"
-      :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success' : 'text-m-muted',
-      'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
-    ]"
-      @click="toggleVisibility"
-    />
-
-  </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${inputId}-describedby`"
-    :class="[
+      <IconifyIcon
+        v-if="displayIcon"
+        :icon="isPasswordVisible ? 'mdi:eye-outline' : 'mdi:eye-off-outline'"
+        :width="24"
+        :height="24"
+        data-test="icon"
+        :class="[
         hasError
           ? 'text-m-danger'
           : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'mt-1 text-xs ml-[2px] ',
+            ? 'text-m-success' : 'text-m-muted',
+        'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
       ]"
-  >
-    {{ hint || error || success }}
-  </p>
+        @click="toggleVisibility"
+      />
+
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          'mt-1 text-xs ml-[2px] ',
+        ]"
+    >
+      {{ hint || error || success }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -132,7 +134,7 @@ const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
 const mergedGroupClass = computed(() =>
   twMerge(
-    'relative mt-4 flex h-12 w-full items-center',
+    'relative flex h-12 w-full items-center',
     props.groupClass,
   ),
 )

app/components/malio/input/InputText.vue

@@ -1,67 +1,69 @@
 <template>
-  <div
-    :class="mergedGroupClass"
-  >
-    <input
-      :id="inputId"
-      v-maska="mask"
-      :name="name"
-      :autocomplete="autocomplete"
-      :class="mergedInputClass"
-      :required="required"
-      :maxlength="maxLength"
-      :minlength="minLength"
-      :disabled="disabled"
-      :value="currentValue"
-      :readonly="readonly"
-      :aria-invalid="!!error"
-      :aria-describedby="describedBy"
-      v-bind="attrs"
-      placeholder="_"
-      type="text"
-      @input="onInput"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
+  <div>
+    <div
+      :class="mergedGroupClass"
     >
+      <input
+        :id="inputId"
+        v-maska="mask"
+        :name="name"
+        :autocomplete="autocomplete"
+        :class="mergedInputClass"
+        :required="required"
+        :maxlength="maxLength"
+        :minlength="minLength"
+        :disabled="disabled"
+        :value="currentValue"
+        :readonly="readonly"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
 
-    <label
-      v-if="label"
-      :for="inputId"
-      :class="mergedLabelClass"
-    >
-      {{ label }}
-    </label>
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
 
-    <IconifyIcon
-      v-if="iconName"
-      :icon="iconName"
-      :width="iconSize"
-      :height="iconSize"
-      data-test="icon"
-      :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success' : iconColor,
-      iconPositionClass,
-    ]"
-    />
-
-  </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${inputId}-describedby`"
-    :class="[
+      <IconifyIcon
+        v-if="iconName"
+        :icon="iconName"
+        :width="iconSize"
+        :height="iconSize"
+        data-test="icon"
+        :class="[
         hasError
           ? 'text-m-danger'
           : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'mt-1 text-xs ml-[2px] ',
+            ? 'text-m-success' : iconColor,
+        iconPositionClass,
       ]"
-  >
-    {{ hint || error || success }}
-  </p>
+      />
+
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          'mt-1 text-xs ml-[2px] ',
+        ]"
+    >
+      {{ hint || error || success }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -138,7 +140,7 @@ const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
 const mergedGroupClass = computed(() =>
   twMerge(
-    'relative mt-4 flex h-12 w-full items-center',
+    'relative flex h-12 w-full items-center',
     props.groupClass,
   ),
 )

app/components/malio/input/InputUpload.vue

@@ -1,70 +1,72 @@
 <template>
-  <div
-    :class="mergedGroupClass"
-  >
-    <input
-      ref="fileInputRef"
-      type="file"
-      :accept="accept"
-      class="hidden"
-      :disabled="disabled"
-      @change="onFileChange"
+  <div>
+    <div
+      :class="mergedGroupClass"
     >
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="accept"
+        class="hidden"
+        :disabled="disabled"
+        @change="onFileChange"
+      >
 
-    <input
-      :id="inputId"
-      :class="mergedInputClass"
-      :disabled="disabled"
-      :value="currentDisplayValue"
-      :readonly="true"
-      :aria-invalid="!!error"
-      :aria-describedby="describedBy"
-      v-bind="attrs"
-      placeholder="_"
-      type="text"
-      @click="openFilePicker"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    >
+      <input
+        :id="inputId"
+        :class="mergedInputClass"
+        :disabled="disabled"
+        :value="currentDisplayValue"
+        :readonly="true"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @click="openFilePicker"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      >
 
-    <label
-      v-if="label"
-      :for="inputId"
-      :class="mergedLabelClass"
-    >
-      {{ label }}
-    </label>
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
 
-    <IconifyIcon
-      v-if="displayIcon"
-      icon="mdi:cloud-arrow-up-outline"
-      :width="24"
-      :height="24"
-      data-test="icon"
-      :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success' : 'text-m-muted',
-      'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
-    ]"
-    />
-
-  </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${inputId}-describedby`"
-    :class="[
+      <IconifyIcon
+        v-if="displayIcon"
+        icon="mdi:cloud-arrow-up-outline"
+        :width="24"
+        :height="24"
+        data-test="icon"
+        :class="[
         hasError
           ? 'text-m-danger'
           : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'mt-1 text-xs ml-[2px] ',
+            ? 'text-m-success' : 'text-m-muted',
+        'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
       ]"
-  >
-    {{ hint || error || success }}
-  </p>
+      />
+
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          'mt-1 text-xs ml-[2px] ',
+        ]"
+    >
+      {{ hint || error || success }}
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -121,7 +123,7 @@ const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentDisplayValue.value.trim().length > 0)
 const mergedGroupClass = computed(() =>
   twMerge(
-    'relative mt-4 flex h-12 w-full items-center',
+    'relative flex h-12 w-full items-center',
     props.groupClass,
   ),
 )

app/components/malio/select/Select.vue

@@ -1,8 +1,9 @@
 <template>
-  <div
-    ref="root"
-    :class="mergedGroupClass"
-  >
+  <div>
+    <div
+      ref="root"
+      :class="mergedGroupClass"
+    >
     <button
       :id="buttonId"
       type="button"
@@ -133,21 +134,22 @@
         {{ opt.label || '\u00A0' }}
       </li>
     </ul>
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${buttonId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
   </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${buttonId}-describedby`"
-    :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success'
-          : 'text-m-muted',
-      'mt-1 ml-[2px] text-xs',
-    ]"
-  >
-    {{ error || success || hint }}
-  </p>
 </template>
 
 <script setup lang="ts">
@@ -211,7 +213,7 @@ const normalizedOptions = computed<Option[]>(() => [
   ...props.options,
 ])
 const mergedGroupClass = computed(() =>
-  twMerge('relative mt-4 w-full', props.minWidth, props.maxWidth, props.groupClass),
+  twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass),
 )
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)

app/components/malio/select/SelectCheckbox.vue

@@ -1,9 +1,10 @@
 <template>
-  <div
-    ref="root"
-    class="relative mt-4 w-full"
-    :class="[minWidth, maxWidth]"
-  >
+  <div>
+    <div
+      ref="root"
+      class="relative w-full"
+      :class="[minWidth, maxWidth]"
+    >
     <button
       :id="buttonId"
       type="button"
@@ -184,21 +185,22 @@
         />
       </li>
     </ul>
+    </div>
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${buttonId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-danger'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
   </div>
-  <p
-    v-if="hint || hasError || hasSuccess"
-    :id="`${buttonId}-describedby`"
-    :class="[
-      hasError
-        ? 'text-m-danger'
-        : hasSuccess
-          ? 'text-m-success'
-          : 'text-m-muted',
-      'mt-1 ml-[2px] text-xs',
-    ]"
-  >
-    {{ error || success || hint }}
-  </p>
 </template>
 
 <script setup lang="ts">