feat(inputs): UX polish across input family + localFilter + focus scrollbar

Polish across the form input components, plus two new features and a few standalone fixes. Fixes ----- * Reserve hint/error/success paragraph space (min-h-[1rem]) in 15 components so a single error message no longer shifts neighboring grid cells: InputText, Email, Password, Phone, Amount, Number, Upload, Autocomplete, RichText, TextArea, Select, SelectCheckbox, Time, TimePicker, CalendarField, Checkbox. * InputPhone: the '+' add button now follows the icon-state cascade (muted / primary on focus / black when filled / danger / success) like the other field icons instead of being permanently primary. * Select and SelectCheckbox: chevron color follows the field state (muted by default, primary when open, black when an option is selected, danger / success on error / success) instead of always being text-current. * InputTextArea: single-root component (was multi-root). The message wrapper used to occupy its own grid cell, breaking row-span layouts. Now flex flex-col, with the textarea area filling the available height via flex-1 and the message inside the same root. * Disabled labels use text-m-muted (border-gray) instead of text-black/60 (dark) across InputText, Email, Password, Amount, Phone, Upload, Autocomplete, TextArea, RichText. Also removes an unreachable peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60 rule that twMerge was silently overriding with text-black. * InputAutocomplete: eliminates four sources of visual jitter when focusing / opening a field that already has a selected value. - Drop peer-focus:-translate-y-[1.55rem] extra label translate. - Drop the .grow-height:focus padding rule (no more height growth or downward text shift on focus). - Drop focus:pl-[11px] (no more 1px horizontal jump). - Replace !border-b-0 with !border-b-transparent so the bottom border still reserves its 1px while remaining invisible against the dropdown. * Select / SelectCheckbox: same anti-jitter treatment. - Drop .grow-height:focus padding rule (~12px height growth gone). - Replace !border-b-0 / !border-t-0 with !border-b-transparent / !border-t-transparent across danger / success / primary branches. * Button: default width 240px -> 200px to match the form button sizing used across the app. Test updated to match. Features -------- * InputTextArea: scrollbar turns primary blue on focus (scrollbar-color: rgb(var(--m-primary)) transparent), matching the Select listbox styling. * InputAutocomplete: new localFilter prop (default false). When enabled, filters the options prop client-side based on the input value (case-insensitive label.includes(query)), so static lists no longer need a @search listener. Async/API usage keeps the existing behavior. Playground "Simple statique" and "Avec icône à gauche" examples use local-filter. Playground ---------- * client.vue: tighter grid gap (gap-y-5) plus an example error on a SelectCheckbox to visually exercise the message-space fix. Tests ----- All component test files include regression coverage for the above. 720/720 tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-29 15:19:41 +02:00
parent 526dcd1a84
commit dc33cf4135
28 changed files with 489 additions and 174 deletions
@@ -1,79 +1,82 @@
 <template>
  <div :class="mergedGroupClass">
-    <textarea
-      :id="inputId"
-      :name="name"
+    <div class="relative w-full flex-1">
+      <textarea
+        :id="inputId"
+        :name="name"

-      :autocomplete="autocomplete"
-      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
-      :class="[
-      isFilled ? 'border-black' : 'border-m-muted',
-      disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
-      hasError
-        ? 'border-m-danger focus:border-m-danger'
-        : hasSuccess
-          ? 'border-m-success focus:border-m-success'
-          : 'focus:border-m-primary',
-      textInput,
-      showCounterComputed ? 'pb-6' : '',
-      rounded,
-    ]"
-      :required="required"
-      :maxlength="maxLength"
-      :rows="rowsCount"
-      :disabled="disabled"
-      :value="currentValue"
-      :readonly="readonly"
-      :aria-invalid="hasError"
-      :aria-describedby="describedBy"
-      :style="textareaStyle"
-      v-bind="attrs"
-      placeholder="_"
-      @input="onInput"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-    />
-    <label
-      v-if="label"
-      :for="inputId"
-      class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
-      :class="[
-    shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
-    disabled ? 'text-black/60' : '',
-    hasError
-      ? 'text-m-danger'
-      : hasSuccess
-        ? 'text-m-success'
-        : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
-      textLabel,
-      ]"
-    >
-      {{ label }}
-    </label>
-    <span
-      v-if="showCounterComputed"
-      class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
-    >
-      {{ currentLength }}/{{ maxLength }}
-    </span>
-  </div>
-  <div
-    v-if="hasError || hasSuccess || hint"
-    class="mt-1 flex items-center justify-between gap-2 text-xs"
-  >
-    <p
-      :id="`${inputId}-describedby`"
-      :class="[
+        :autocomplete="autocomplete"
+        class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
+        :class="[
+        isFilled ? 'border-black' : 'border-m-muted',
+        disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
        hasError
-          ? 'text-m-danger'
+          ? 'border-m-danger focus:border-m-danger'
          : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'ml-[2px]',
+            ? 'border-m-success focus:border-m-success'
+            : 'focus:border-m-primary',
+        isFocused ? 'textarea-scrollbar-primary' : '',
+        textInput,
+        showCounterComputed ? 'pb-6' : '',
+        rounded,
      ]"
+        :required="required"
+        :maxlength="maxLength"
+        :rows="rowsCount"
+        :disabled="disabled"
+        :value="currentValue"
+        :readonly="readonly"
+        :aria-invalid="hasError"
+        :aria-describedby="describedBy"
+        :style="textareaStyle"
+        v-bind="attrs"
+        placeholder="_"
+        @input="onInput"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      />
+      <label
+        v-if="label"
+        :for="inputId"
+        class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
+        :class="[
+      shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
+      hasError
+        ? 'text-m-danger'
+        : hasSuccess
+          ? 'text-m-success'
+          : disabled
+            ? 'text-m-muted'
+            : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
+        textLabel,
+        ]"
+      >
+        {{ label }}
+      </label>
+      <span
+        v-if="showCounterComputed"
+        class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
+      >
+        {{ currentLength }}/{{ maxLength }}
+      </span>
+    </div>
+    <div
+      class="mt-1 flex items-center justify-between gap-2 text-xs min-h-[1rem]"
    >
-      {{ error || success || hint }}
-    </p>
+      <p
+        :id="`${inputId}-describedby`"
+        :class="[
+          hasError
+            ? 'text-m-danger'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-m-muted',
+          'ml-[2px]',
+        ]"
+      >
+        {{ error || success || hint }}
+      </p>
+    </div>
  </div>
 </template>

@@ -138,7 +141,7 @@ const props = withDefaults(
 )

 const mergedGroupClass = computed(() =>
-  twMerge('relative w-full', props.groupClass),
+  twMerge('flex flex-col w-full', props.groupClass),
 )

 const attrs = useAttrs()
@@ -188,4 +191,8 @@ const onInput = (event: Event) => {
  background: white;
  padding: 0 0.25rem;
 }
+
+.textarea-scrollbar-primary {
+  scrollbar-color: rgb(var(--m-primary)) transparent;
+}
 </style>