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

add color dot support to Select component

Browse source
This commit is contained in:
Justin Edmund 2025-12-03 17:14:19 -08:00
parent e595196172
commit ed32b7e924
1 changed files with 28 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,8 @@
label: string
disabled?: boolean
image?: string
/** CSS color for a colored dot indicator */
color?: string
}
interface Props {
@ -94,7 +96,9 @@
items={stringOptions}
>
<SelectPrimitive.Trigger class={selectClasses} data-placeholder={!selected}>
{#if selected?.image}
{#if selected?.color}
<span class="color-dot" style="background-color: {selected.color}"></span>
{:else if selected?.image}
<img src={selected.image} alt={selected.label} class="image" />
{/if}
<span class="text">{selected?.label || placeholder}</span>
@ -110,7 +114,9 @@
class="item"
>
{#snippet children({ selected })}
{#if option.image}
{#if option.color}
<span class="color-dot" style="background-color: {option.color}"></span>
{:else if option.image}
<img src={option.image} alt={option.label} class="image" />
{/if}
<span class="text">{option.label}</span>
@ -139,7 +145,9 @@
items={stringOptions}
>
<SelectPrimitive.Trigger class={selectClasses} data-placeholder={!selected}>
{#if selected?.image}
{#if selected?.color}
<span class="color-dot" style="background-color: {selected.color}"></span>
{:else if selected?.image}
<img src={selected.image} alt={selected.label} class="image" />
{/if}
<span class="text">{selected?.label || placeholder}</span>
@ -155,7 +163,9 @@
class="item"
>
{#snippet children({ selected })}
{#if option.image}
{#if option.color}
<span class="color-dot" style="background-color: {option.color}"></span>
{:else if option.image}
<img src={option.image} alt={option.label} class="image" />
{/if}
<span class="text">{option.label}</span>
@ -258,6 +268,13 @@
flex-shrink: 0;
}
.color-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
:global(.chevron) {
flex-shrink: 0;
color: var(--text-tertiary);
@ -364,6 +381,13 @@
flex-shrink: 0;
}
.color-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
:global(.indicator) {
margin-left: auto;
color: var(--accent-blue);