christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Lib: Allow icons in dropdown component list

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-15 22:44:15 +01:00
parent 2989e8a2ed
commit 6d93ca7dab
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/lib/components/Dropdown.svelte
View File

@ -90,7 +90,8 @@
{#if action} {#if action}
<input <input
use:popup={popup_settings} use:popup={popup_settings}
type="text" type="button"
style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
use:obtain_input use:obtain_input
use:action use:action
onkeypress={(event: Event) => event.preventDefault()} onkeypress={(event: Event) => event.preventDefault()}
@ -100,7 +101,8 @@
{:else} {:else}
<input <input
use:popup={popup_settings} use:popup={popup_settings}
type="text" type="button"
style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
use:obtain_input use:obtain_input
onkeypress={(event: Event) => event.preventDefault()} onkeypress={(event: Event) => event.preventDefault()}
value={get_label(input_variable) ?? placeholder} value={get_label(input_variable) ?? placeholder}
@ -109,13 +111,26 @@
{/if} {/if}
</div> </div>
<div data-popup={popup_id} class="card z-10 w-auto p-2 shadow"> <div
data-popup={popup_id}
class="card z-10 w-auto overflow-y-scroll p-2 shadow"
style="max-height: 350px;"
>
<ListBox> <ListBox>
{#each options as option} {#each options as option}
<ListBoxItem bind:group={input_variable} {name} value={option.value} <ListBoxItem bind:group={input_variable} {name} value={option.value}>
>{option.label}</ListBoxItem <div class="flex flex-nowrap">
> {#if option.icon_url}
<img
src={option.icon_url}
alt=""
class="mr-2 rounded"
style="height: 24px; max-width: 64px;"
/>
{/if}
{option.label}
</div>
</ListBoxItem>
{/each} {/each}
</ListBox> </ListBox>
<div class="bg-surface-100-800-token arrow"></div>
</div> </div>