Dispatch apply event when applying from MultiSelect (#476)

techniq · Sep 5, 2024 · 8fb2985 · 8fb2985
1 parent 1c0a51c
commit 8fb2985
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/polite-rivers-roll.md b/.changeset/polite-rivers-roll.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Dispatch `apply` event when applying from MultiSelect
diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
@@ -57,10 +57,17 @@
       indeterminate: typeof $indeterminateStore;
       original: { selected: MenuOption<TValue>[]; unselected: MenuOption<TValue>[] };
     };
+    apply: {
+      value: typeof value;
+      selection: typeof $selection;
+      indeterminate: typeof $indeterminateStore;
+      original: { selected: MenuOption<TValue>[]; unselected: MenuOption<TValue>[] };
+    };
     cancel: null;
   }>();
 
   export let onApply = async (ctx: {
+    value: typeof value;
     selection: typeof $selection;
     indeterminate: typeof $indeterminateStore;
     original: { selected: MenuOption<TValue>[]; unselected: MenuOption<TValue>[] };
@@ -71,12 +78,13 @@
   async function applyChange() {
     applying = true;
     const changeContext = {
-      value: $selection.selected,
+      value: $selection.selected as TValue[],
       selection: $selection,
       indeterminate: $indeterminateStore,
       original: { selected: selectedOptions, unselected: unselectedOptions },
     };
     await onApply(changeContext);
+    dispatch('apply', changeContext);
     applying = false;
     onChange();
   }

diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -218,6 +218,7 @@
     bind:open
     on:change={onSelectChange}
     on:close={hide}
+    on:apply
     bind:menuOptionsEl
     {...menuProps}
   >

diff --git a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
@@ -78,6 +78,7 @@
     on:cancel
     on:change={() => mode !== 'immediate' && close()}
     on:change
+    on:apply
   >
     <slot name="beforeOptions" slot="beforeOptions" let:selection {selection} />
     <slot name="afterOptions" slot="afterOptions" let:selection {selection} />