MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Autin
2026-05-29 15:19:41 +02:00
parent 526dcd1a84
commit dc33cf4135
28 changed files with 489 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/malio/input/InputAutocomplete.vue
+24 -24
View File
@@ -107,7 +107,7 @@
{{ minSearchText }}
</li>
<li
v-else-if="options.length === 0"
v-else-if="filteredOptions.length === 0"
class="px-3 py-2 text-m-muted"
data-test="no-results-text"
>
@@ -115,7 +115,7 @@
</li>
<template v-else>
<li
v-for="(opt, index) in options"
v-for="(opt, index) in filteredOptions"
:id="optionId(index)"
:key="String(opt.value)"
data-test="option"
@@ -136,11 +136,10 @@
</ul>
</div>
<p
v-if="hint || hasError || hasSuccess"
:id="`${inputId}-describedby`"
:class="[
hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
'mt-1 ml-[2px] text-xs',
'mt-1 ml-[2px] text-xs min-h-[1rem]',
]"
>
{{ hint || error || success }}
@@ -180,6 +179,7 @@ const props = withDefaults(
debounce?: number
minSearchLength?: number
allowCreate?: boolean
localFilter?: boolean
iconName?: string
iconPosition?: 'left' | 'right'
iconSize?: string | number
@@ -207,6 +207,7 @@ const props = withDefaults(
debounce: 300,
minSearchLength: 0,
allowCreate: false,
localFilter: false,
iconName: '',
iconPosition: 'left',
iconSize: 24,
@@ -253,9 +254,18 @@ const showMinSearch = computed(() =>
props.minSearchLength > 0 && inputValue.value.length < props.minSearchLength,
)
const filteredOptions = computed(() => {
if (!props.localFilter) return props.options
const query = inputValue.value.trim().toLowerCase()
if (query === '') return props.options
return props.options.filter(opt =>
opt.label.toLowerCase().includes(query),
)
})
const optionId = (index: number) => `${inputId.value}-option-${index}`
const activeOptionId = computed(() =>
activeIndex.value >= 0 && props.options[activeIndex.value]
activeIndex.value >= 0 && filteredOptions.value[activeIndex.value]
? optionId(activeIndex.value)
: undefined,
)
@@ -294,11 +304,6 @@ const iconInputPaddingClass = computed(() => {
return parts.join(' ')
})
const focusPaddingClass = computed(() => {
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
return 'focus:pl-[11px]'
})
const labelPositionClass = computed(() =>
props.iconName && props.iconPosition === 'left' ? 'left-11' : 'left-3',
)
@@ -315,10 +320,9 @@ const mergedInputClass = computed(() =>
: hasSuccess.value
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
: 'focus:border-m-primary',
isOpen.value ? '!rounded-b-none !border-b-0' : '',
isOpen.value ? '!rounded-b-none !border-b-transparent' : '',
props.inputClass,
iconInputPaddingClass.value,
focusPaddingClass.value,
),
)
@@ -326,13 +330,14 @@ const mergedLabelClass = computed(() =>
twMerge(
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
labelPositionClass.value,
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
props.disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
shouldFloatLabel.value ? '-translate-y-[1.25rem] scale-90' : '',
hasError.value
? 'text-m-danger'
: hasSuccess.value
? 'text-m-success'
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
: props.disabled
? 'text-m-muted'
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
props.labelClass,
),
)
@@ -432,8 +437,8 @@ const onKeydown = (event: KeyboardEvent) => {
if (event.key === 'Enter') {
event.preventDefault()
if (activeIndex.value >= 0 && props.options[activeIndex.value]) {
onSelect(props.options[activeIndex.value])
if (activeIndex.value >= 0 && filteredOptions.value[activeIndex.value]) {
onSelect(filteredOptions.value[activeIndex.value])
return
}
if (props.allowCreate && inputValue.value !== '') {
@@ -450,7 +455,7 @@ const onKeydown = (event: KeyboardEvent) => {
if (!isOpen.value) {
isOpen.value = true
}
activeIndex.value = Math.min(activeIndex.value + 1, props.options.length - 1)
activeIndex.value = Math.min(activeIndex.value + 1, filteredOptions.value.length - 1)
return
}
@@ -481,12 +486,7 @@ onBeforeUnmount(() => {
}
.grow-height {
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
}
.grow-height:focus {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
@media (prefers-reduced-motion: reduce) {