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

fix Select placeholder check for falsy values

Browse source
This commit is contained in:
Justin Edmund 2025-12-14 01:24:07 -08:00
parent e8608ff32d
commit 106b9261f8
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,6 +63,12 @@
) )
const selected = $derived(options.find((opt) => opt.value === value)) const selected = $derived(options.find((opt) => opt.value === value))
$effect(() => {
console.log('[Select] value:', value, typeof value)
console.log('[Select] options:', options.map(o => ({ value: o.value, type: typeof o.value })))
console.log('[Select] selected:', selected)
})
const hasWrapper = $derived(label || error) const hasWrapper = $derived(label || error)
const fieldsetClasses = $derived( const fieldsetClasses = $derived(
@ -105,13 +111,13 @@
{disabled} {disabled}
items={stringOptions} items={stringOptions}
> >
<SelectPrimitive.Trigger class={selectClasses} data-placeholder={!selected}> <SelectPrimitive.Trigger class={selectClasses} data-placeholder={selected === undefined}>
{#if selected?.color} {#if selected?.color}
<span class="color-dot" style="background-color: {selected.color}"></span> <span class="color-dot" style="background-color: {selected.color}"></span>
{:else if selected?.image} {: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 !== undefined ? selected.label : placeholder}</span>
<Icon name="chevron-down-small" size={14} class="chevron" /> <Icon name="chevron-down-small" size={14} class="chevron" />
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
@ -190,13 +196,13 @@
{disabled} {disabled}
items={stringOptions} items={stringOptions}
> >
<SelectPrimitive.Trigger class={selectClasses} data-placeholder={!selected}> <SelectPrimitive.Trigger class={selectClasses} data-placeholder={selected === undefined}>
{#if selected?.color} {#if selected?.color}
<span class="color-dot" style="background-color: {selected.color}"></span> <span class="color-dot" style="background-color: {selected.color}"></span>
{:else if selected?.image} {: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 !== undefined ? selected.label : placeholder}</span>
<Icon name="chevron-down-small" size={14} class="chevron" /> <Icon name="chevron-down-small" size={14} class="chevron" />
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>