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