fix : style des inputs + hint/success/error

Merge branch 'main' into develop
# Conflicts: # COMPONENTS.md
2026-04-07 10:02:11 +02:00 · 2026-03-26 08:57:02 +01:00 · 2026-03-26 08:54:49 +01:00 · 2026-03-26 08:39:11 +01:00 · 2026-03-26 07:33:20 +00:00 · 2026-03-25 08:38:36 +01:00
10 changed files with 374 additions and 333 deletions
--- a/.playground/pages/composant/select/select.vue
+++ b/.playground/pages/composant/select/select.vue
@@ -82,6 +82,16 @@
      />
    </div>

+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Peu d'elements (2)</h2>
+      <MalioSelect
+        v-model="shortListValue"
+        :options="shortOptions"
+        label="Civilite"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
    <div class="rounded-lg border p-4 md:col-span-2">
      <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
      <MalioSelect
@@ -121,6 +131,11 @@ const options = [
  {label: 'Portugal', value: 'pt'},
 ]

+const shortOptions = [
+  {label: 'Monsieur', value: 'M'},
+  {label: 'Madame', value: 'Mme'},
+]
+
 const longOptions = [
  ...options,
  {label: 'Pays-Bas', value: 'nl'},
@@ -144,6 +159,7 @@ const errorValue = ref<string | number | null>(null)
 const successValue = ref<string | number | null>('be')
 const disabledValue = ref<string | number | null>('ca')
 const emptyValue = ref<string | number | null>(null)
+const shortListValue = ref<string | number | null>(null)
 const longListValue = ref<string | number | null>(null)
 const bottomValue = ref<string | number | null>(null)
 </script>
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -163,8 +163,17 @@ Liste déroulante.
 | `options` | `{ value: string \| number, text: string }[]` | `[]` | Options disponibles |
 | `emptyOptionLabel` | `string` | `''` | Placeholder option vide |
 | `label` | `string` | `''` | Label |
-| `disabled` | `boolean` | `false` | Désactivé |
+| `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
+| `minWidth` | `string` | `'w-96'` | Classe largeur minimum |
+| `maxWidth` | `string` | `''` | Classe largeur maximum |
+| `rounded` | `string` | `'rounded-md'` | Classe border-radius |
+| `textField` | `string` | `'text-lg'` | Classe taille texte bouton |
+| `textValue` | `string` | `'text-lg'` | Classe taille texte valeur |
+| `textLabel` | `string` | `'text-sm'` | Classe taille texte label |

 **Events :** `update:modelValue(value: string | number | null)`
 **Slots :** `icon` (icône dropdown custom)
@@ -172,6 +181,7 @@ Liste déroulante.
 ```vue
 <MalioSelect v-model="pays" label="Pays" :options="[{ value: 'FR', text: 'France' }, { value: 'BE', text: 'Belgique' }]" />
 <MalioSelect v-model="ville" label="Ville" :options="villes" empty-option-label="Choisir..." />
+<MalioSelect v-model="civilite" label="Civilité" :options="civilites" group-class="mt-0" />
 ```

 ---
--- a/app/components/malio/input/InputAmount.vue
+++ b/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,
  ),
 )
--- a/app/components/malio/input/InputNumber.vue
+++ b/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,
  ),
 )
--- a/app/components/malio/input/InputPassword.vue
+++ b/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,
  ),
 )
--- a/app/components/malio/input/InputText.vue
+++ b/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,
  ),
 )
--- a/app/components/malio/input/InputUpload.vue
+++ b/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,
  ),
 )
--- a/app/components/malio/select/Select.vue
+++ b/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)
--- a/app/components/malio/select/SelectCheckbox.vue
+++ b/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">
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
  "files": [
    "app/**",
    "nuxt.config.ts",
-    "README.md"
+    "README.md",
+    "COMPONENTS.md"
  ],
  "scripts": {
    "dev": "nuxi dev .playground",
Author	SHA1	Message	Date
tristan	0ad344bab9	fix : style des inputs + hint/success/error	2026-04-07 10:02:11 +02:00
tristan	96719be78d	Merge branch 'main' into develop # Conflicts: # COMPONENTS.md	2026-03-26 08:57:02 +01:00
tristan	b90baec571	fix : livraison + COMPONENTS.md	2026-03-26 08:54:49 +01:00
tristan	384f86a3b3	Merge remote-tracking branch 'origin/main' into develop # Conflicts: # CHANGELOG.md	2026-03-26 08:39:11 +01:00
tristan	e8ddf4e083	[#MUI-24] Fix composant Select (#22 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #22 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-26 07:33:20 +00:00
tristan	7ee64289a8	fix : drawer animation	2026-03-25 08:38:36 +01:00
tristan	f09f8a91ac	[#MUI-15] Création d'un composant drawer (#21 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #21 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 10:49:27 +00:00
tristan	bcadd46ce2	[#MUI-2] Faire un MCP pour la librairie de composant (#20 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #20 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 10:31:20 +00:00
tristan	e76337502a	[#MUI-10] Création d'un composant bouton (#19 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #19 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 10:12:28 +00:00
tristan	968b7087b5	[#MUI-23] Revoir la config couleur tailwind (#18 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #18 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-24 09:05:23 +00:00
tristan	3deba3f369	[#MUI-20] Développer le composant Menu (#17 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #17 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-23 16:36:16 +00:00
tristan	cf46ab0c85	[#MUI-11] Création d'un composant navigation par onglets (#16 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #16 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-23 07:48:55 +00:00
tristan	09cc3edf6f	feat : reorganisation de la structure projet	2026-03-20 14:22:40 +01:00
tristan	c95a3657c0	[#MUI-14] Création d'un composant bouton icône (#15 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #15 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-20 11:00:38 +00:00
tristan	9843f4d032	feat : ajout de state dans les histoires des composants	2026-03-19 17:45:03 +01:00
tristan	9d9b9c9dc4	feat : ajout d'un sélecteur "Tout cocher" dans le composant SelectCheckbox	2026-03-19 17:30:52 +01:00
tristan	187ef52865	[#MUI-9] Ajout composant upload (#14 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #14 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-19 09:51:37 +00:00
tristan	9925f1ced4	[#MUI-8] Ajout composant mot de passe (#13 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #13 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-19 09:43:55 +00:00
tristan	ded414ba1a	[#MUI12] Correction composant Nombre et Taux horaire (#12 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #12 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-03-19 08:22:37 +00:00
kevin	11d60e687b	[#366 ] Création d'un composant de type Select checkbox (#11 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #366 \| Création d'un composant de type Select checkbox \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #11 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-17 12:28:57 +00:00
kevin	d3038994c3	[#407 ] Création d'un composant de type time (#10 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #407 \| Création d'un composant de type time \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #10 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-17 12:28:33 +00:00
Kevin Boudet	0d350e12c6	Merge pull request '[#365 ] Création d'un composant de type Number' (#9 ) from feat/365-creation-composant-number into develop Reviewed-on: #9	2026-03-11 15:16:18 +00:00
tristan	c6acaace27	Merge remote-tracking branch 'origin/develop' into develop	2026-03-08 20:10:32 +01:00
tristan	927c7c3c70	Merge remote-tracking branch 'origin/main' into develop	2026-03-08 20:10:02 +01:00
kevin	bf0aa92497	[#363 ] Création d'un composant de type checkbox (#5 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #363 \| Création d'un composant de type checkbox \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: tristan <tristan@yuno.malio.fr> Reviewed-on: #5 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-08 19:07:53 +00:00
kevin	88dd76a0e4	[#364 ] Création d'un composant de type radio (#6 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #364 \| Création d'un composant de type radio \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #6 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-08 18:59:50 +00:00
kevin	cc04114f89	feat : ajout du composant input number	2026-03-05 09:38:56 +01:00
kevin	f456ea4ddf	feat : ajout du composant input number	2026-03-04 13:15:43 +01:00
kevin	77364daa67	[#362 ] Création d'un composant de type Montant (#4 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #362 \| Création d'un composant de type Montant \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #4 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-03 10:42:39 +00:00
kevin	1ab7b2427a	[#337 ] Création d'un composant Select (#3 ) \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| #337 \| Création d'un composant Select \| ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: tristan <tristan@yuno.malio.fr> Reviewed-on: #3 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>	2026-03-02 13:24:58 +00:00
tristan	82ecc9cfe2	feat : ajout config vitest/make/pre-commit/commit-msg + un exemple de test vitest	2026-02-23 11:29:16 +01:00
tristan	65d9060e26	feat : ajout du template de MR + CHANGELOG.md	2026-02-23 11:11:31 +01:00
tristan	ec4c157226	fix: readme.md	2026-02-19 11:18:36 +01:00