[MenuButton] Support hiding menuIcon and dispatch change event

techniq · Jan 11, 2024 · f71b2ee · f71b2ee
1 parent 9f65185
commit f71b2ee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/.changeset/healthy-files-search.md b/.changeset/healthy-files-search.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[MenuButton] Support hiding `menuIcon` and dispatch `change` event
diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import type { ComponentProps } from '$lib/types';
   import { mdiMenuDown } from '@mdi/js';
 
@@ -10,10 +11,12 @@
   import MenuItem from './MenuItem.svelte';
   import { getComponentClasses } from './theme';
 
+  const dispatch = createEventDispatcher<{ change: { value: any } }>();
+
   export let options: Array<{ label: string; value: any; icon?: string }>;
   export let value: any = null;
   export let menuProps: ComponentProps<Menu> = { placement: 'bottom-start' };
-  export let menuIcon = mdiMenuDown;
+  export let menuIcon: string | null = mdiMenuDown;
   $: selected = options?.find((x) => x.value === value);
 
   export let classes: {
@@ -37,15 +40,17 @@
     </span>
   </slot>
 
-  <Icon
-    path={menuIcon}
-    class={cls(
-      'opacity-50 transform transition-all -mr-2 duration-300',
-      open && '-rotate-180',
-      settingsClasses.icon,
-      classes.icon
-    )}
-  />
+  {#if menuIcon}
+    <Icon
+      path={menuIcon}
+      class={cls(
+        'opacity-50 transform transition-all -mr-2 duration-300',
+        open && '-rotate-180',
+        settingsClasses.icon,
+        classes.icon
+      )}
+    />
+  {/if}
 
   <Menu
     {open}
@@ -60,7 +65,10 @@
           <MenuItem
             icon={option.icon}
             selected={option.value === value}
-            on:click={() => (value = option.value)}
+            on:click={() => {
+              value = option.value;
+              dispatch('change', { value });
+            }}
           >
             {option.label}
           </MenuItem>