Skip to content

Commit 5445b57

Browse files
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 5445b57

4 files changed

Lines changed: 896 additions & 79 deletions

File tree

0 commit comments

Comments
 (0)