[SelectField] Support option icons. Closes #132

techniq · Jun 20, 2024 · 91b58c5 · 91b58c5
1 parent 7d9f09c
commit 91b58c5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/.changeset/tender-gorillas-invent.md b/.changeset/tender-gorillas-invent.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[SelectField] Support option icons
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -539,6 +539,7 @@
           <svelte:fragment slot="option" let:option let:index>
             <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
               <MenuItem
+                icon={option.icon}
                 class={cls(
                   index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                   option === selected && (classes.selected || 'font-semibold'),
@@ -599,6 +600,7 @@
         <svelte:fragment slot="option" let:option let:index>
           <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
             <MenuItem
+              icon={option.icon}
               class={cls(
                 index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                 option === selected && (classes.selected || 'font-semibold'),

diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -18,6 +18,13 @@
   import Preview from '$lib/components/Preview.svelte';
 
   let options: MenuOption[] = [
+    { label: 'One', value: 1 },
+    { label: 'Two', value: 2 },
+    { label: 'Three', value: 3 },
+    { label: 'Four', value: 4 },
+  ];
+
+  let optionsWithIcon: MenuOption[] = [
     { label: 'One', value: 1, icon: mdiMagnify },
     { label: 'Two', value: 2, icon: mdiPlus },
     { label: 'Three', value: 3, icon: mdiPencil },
@@ -117,6 +124,12 @@
   />
 </Preview>
 
+<h2>Options with icons</h2>
+
+<Preview>
+  <SelectField options={optionsWithIcon} />
+</Preview>
+
 <h2>Many options</h2>
 
 <Preview>