granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix select typeahead highlighting

Browse source 
add label prop to items for open-state typeahead, use explicit global selector for data-highlighted
This commit is contained in:
Justin Edmund 2025-12-22 16:26:04 -08:00
parent b1c88ac483
commit 0fef8a69e4
2 changed files with 45 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/lib/components/ui/MultiSelect.svelte
View file

@ -93,17 +93,17 @@
{#each options as option}
<SelectPrimitive.Item
value={String(option.value)}
label={option.label}
disabled={option.disabled}
class="multi-item"
style={option.color ? `--option-color: ${option.color}` : ''}
>
{#snippet children({ selected })}
<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span>
{#if selected}
<span class="indicator">
<Icon name="check" size={14} />
</span>
{/if}
<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span
>
<span class="indicator">
<Icon name="check" size={12} class="check-icon {selected ? 'visible' : ''}" />
</span>
{/snippet}
</SelectPrimitive.Item>
{/each}
@ -149,7 +149,7 @@
}
&[data-placeholder='true'] .text {
color: var(--text-tertiary);
color: var(--text-secondary);
}
&.has-value {
@ -163,7 +163,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-tertiary);
color: var(--text-secondary);
}
:global(.chevron) {
@ -235,7 +235,7 @@
@include smooth-transition($duration-quick, background-color);
&:hover {
background-color: var(--option-bg-hover);
background-color: var(--select-contained-bg-hover);
}
&[data-disabled] {
@ -244,12 +244,29 @@
opacity: 0.5;
}
&[data-highlighted] {
background-color: var(--option-bg-hover);
&:first-child {
border-top-left-radius: $item-corner;
border-top-right-radius: $item-corner;
}
&:last-child {
border-bottom-left-radius: $item-corner;
border-bottom-right-radius: $item-corner;
}
:global(.check-icon) {
opacity: 0;
transition: opacity $duration-quick ease;
color: var(--text-tertiary);
}
:global(.check-icon.visible) {
opacity: 1;
}
.label {
flex: 1;
min-width: $unit-8x;
&.selected {
font-weight: $medium;
@ -259,11 +276,11 @@
&::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--option-color);
margin-right: $unit-half;
margin-right: $unit;
}
}
}
@ -273,4 +290,9 @@
color: var(--accent-color);
}
}
// Highlighted state (separate global selector for typeahead)
:global([data-select-item].multi-item[data-highlighted]) {
background-color: var(--option-bg-hover);
}
</style>

15
src/lib/components/ui/Select.svelte
View file

@ -164,7 +164,8 @@
{#each options as option}
<SelectPrimitive.Item
value={String(option.value)}
{...option.disabled !== undefined ? { disabled: option.disabled } : {}}
label={option.label}
disabled={option.disabled}
class="item"
>
{#snippet children({ selected })}
@ -219,7 +220,8 @@
{#each options as option}
<SelectPrimitive.Item
value={String(option.value)}
{...option.disabled !== undefined ? { disabled: option.disabled } : {}}
label={option.label}
disabled={option.disabled}
class="item"
>
{#snippet children({ selected })}
@ -456,10 +458,6 @@
opacity: 0.5;
}
&[data-highlighted] {
background-color: var(--option-bg-hover);
}
&[data-selected] {
font-weight: $medium;
}
@ -495,4 +493,9 @@
color: var(--accent-color);
}
}
// Highlighted state (separate global selector for typeahead)
:global([data-select-item].item[data-highlighted]) {
background-color: var(--option-bg-hover);
}
</style>