Merge pull request #237 from appwrite/feat-add-leading-html-to-select

Feat add leading html to select
appwrite · Nov 14, 2024 · 341f598 · 341f598
2 parents e26f8e6 + cfb0880
commit 341f598
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/v2/pink-sb/src/lib/input/Select.svelte b/v2/pink-sb/src/lib/input/Select.svelte
@@ -16,6 +16,7 @@
             badge?: string;
             leadingIcon?: ComponentType;
             trailingIcon?: ComponentType;
+            leadingHtml?: string;
         }>;
     } & Partial<{
             value: string | boolean | number | null;
@@ -35,6 +36,7 @@
     export let readonly: $$Props['readonly'] = false;
 
     const dispatch = createEventDispatcher();
+    let selectedLeadingHtml: undefined | string = undefined;
 
     const {
         elements: { trigger, menu, option },
@@ -55,6 +57,7 @@
         portal: null,
         onSelectedChange(event) {
             value = event.next?.value;
+            selectedLeadingHtml = options.find((option) => option.value === value)?.leadingHtml;
             dispatch('change', value);
             return event.next;
         }
@@ -76,14 +79,24 @@
         disabled={disabled || readonly}
     >
         <span>
-            {$selectedLabel || placeholder}
+            {#if $selectedLabel}
+                {#if selectedLeadingHtml}
+                    {@html selectedLeadingHtml}
+                {/if}
+                {$selectedLabel}
+            {:else}
+                {placeholder}
+            {/if}
         </span>
         <Icon size="m" icon={$open ? IconChevronUp : IconChevronDown} />
     </button>
     {#if $open}
         <ul {...$menu} use:menu>
-            {#each options as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon }}
+            {#each options as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon, leadingHtml }}
                 <li {...$option({ value, label, disabled })} use:option>
+                    {#if leadingHtml}
+                        {@html leadingHtml}
+                    {/if}
                     {#if leadingIcon}
                         <Icon size="s" icon={leadingIcon} />
                     {/if}
@@ -104,6 +117,11 @@
     @use './input';
     @use '../../scss/mixins/transitions';
 
+    button span {
+        display: flex;
+        gap: var(--space-3);
+    }
+
     .input {
         @include transitions.common;
         @include input.wrapper;

diff --git a/v2/pink-sb/src/stories/input/Select.stories.svelte b/v2/pink-sb/src/stories/input/Select.stories.svelte
@@ -22,7 +22,9 @@
                 },
                 {
                     label: 'Option 3',
-                    value: 'option3'
+                    value: 'option3',
+                    leadingHtml:
+                        "<img src='https://cloud.appwrite.io/v1/avatars/flags/de?width=22&height=15' alt='Flag of Germany'/>"
                 },
                 {
                     label: 'Option 4',