Commit e9d00bd
committed
fix(NcSelect): use NcTextField for floating label design
Replace the plain `<input>` in NcSelect's search slot with NcTextField
to get consistent floating label, border, and focus styling across all
form fields.
Single mode:
- NcTextField owns the border and floating label
- Selected value overlays the input (position: absolute, z-index: 2)
- Label floats on focus or when value selected via :has(.vs__selected)
Multi mode:
- Border on .vs__dropdown-toggle (contains tags + search input)
- Floating label via #header slot, centered when empty, floats on
border when tags present or dropdown open
- Search input inline with tags (flex-grow, no layout jump on open)
- Tags hidden behind actions prevented via padding-inline-end
Drop-up:
- Border/radius inverted (transparent top, rounded bottom)
- Label moves to bottom border
Other fixes:
- Forward vue-select events (keydown, blur, focus, IME) via
filterEvents() to reach the native <input>
- Scope CSS variables to .v-select.select (not body)
- Dropdown menu variables set directly (teleported to body by
floating-ui, can't inherit from .v-select.select)
- Inline inputLikeBorder mixin to fix @media doubled-selector bug
- Dark/light theme border overrides with correct selectors
- No-wrap overflow clips before actions area
Signed-off-by: skjnldsv <skjnldsv@users.noreply.github.com>
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>1 parent 6178599 commit e9d00bd
4 files changed
Lines changed: 723 additions & 79 deletions
File tree
- src/components/NcSelect
- tests
- component/components/NcSelect
- unit/components/NcSelect
0 commit comments