svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

combobox: improve compact item spacing & spinner centering

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-15 18:44:27 -07:00
parent 652c5632da
commit 6825154f8f
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/Combobox.svelte
View File

@@ -401,7 +401,10 @@
aria-label={getLabel(item)} aria-label={getLabel(item)}
aria-disabled={item.disabled} aria-disabled={item.disabled}
class={[ class={[
'mb-0.5 flex min-h-10 flex-wrap items-center py-2.5 pr-1.5 pl-5', !compact
? 'mb-0.5 min-h-10 py-2.5 pr-1.5 pl-5'
: 'mb-0.25 min-h-8 py-1.5 pr-1.5 pl-2.5',
'flex flex-wrap items-center',
'rounded-sm text-sm capitalize outline-hidden select-none', 'rounded-sm text-sm capitalize outline-hidden select-none',
'hover:bg-sui-accent-500/30 dark:hover:bg-sui-accent-700/30', 'hover:bg-sui-accent-500/30 dark:hover:bg-sui-accent-700/30',
item.value === highlighted?.value && 'bg-sui-accent-500/80 dark:bg-sui-accent-700/80', item.value === highlighted?.value && 'bg-sui-accent-500/80 dark:bg-sui-accent-700/80',
@@ -496,7 +499,7 @@
transition:scale transition:scale
> >
{#if loading} {#if loading}
<Spinner class="stroke-sui-accent!" size="1em" /> <Spinner class="stroke-sui-accent! -mt-0.5" size="1em" />
{:else if useHighlighted && highlighted?.icon} {:else if useHighlighted && highlighted?.icon}
{@render highlighted.icon(highlighted)} {@render highlighted.icon(highlighted)}
{:else if value?.icon} {:else if value?.icon}

19
src/routes/+page.svelte
View File

@@ -32,6 +32,11 @@
import type { ComboboxOption, Option } from '$lib'; import type { ComboboxOption, Option } from '$lib';
import Tabs from '$lib/Tabs.svelte'; import Tabs from '$lib/Tabs.svelte';
const comboboxOptions = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3', disabled: true }
];
let lazyOptions: ComboboxOption[] = $state([]); let lazyOptions: ComboboxOption[] = $state([]);
let dateInputValue = $state<CalendarDate | undefined>(undefined); let dateInputValue = $state<CalendarDate | undefined>(undefined);
let checkboxValue = $state<CheckboxState>('indeterminate'); let checkboxValue = $state<CheckboxState>('indeterminate');
@@ -126,11 +131,7 @@
name="example-combobox" name="example-combobox"
label="Select an option" label="Select an option"
placeholder="Choose..." placeholder="Choose..."
options={[ options={comboboxOptions}
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3', disabled: true }
]}
onchange={(e) => console.log('Selected:', e.value)} onchange={(e) => console.log('Selected:', e.value)}
onvalidate={(e) => console.log('Validation:', e.detail)} onvalidate={(e) => console.log('Validation:', e.detail)}
/> />
@@ -164,7 +165,13 @@
}, 2500); }, 2500);
}} }}
/> />
<Combobox label="Compact combobox" placeholder="Choose..." options={[]} lazy compact /> <Combobox
label="Compact combobox"
placeholder="Choose..."
lazy
compact
options={comboboxOptions}
/>
</InputGroup> </InputGroup>
</div> </div>