feat(Selection): Add change event. Resolves #520

Author: techniq

.changeset/brave-chefs-crash.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+feat(Selection): Add `change` event. Resolves #520

packages/svelte-ux/src/lib/components/Selection.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import selectionStore from '../stores/selectionStore.js';
 
   type T = $$Generic;
@@ -10,6 +11,10 @@
 
   const selection = selectionStore({ initial, all, single, max });
   $: $selection.all.set(all);
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch('change', { value: $selection.selected });
 </script>
 
 <!-- TODO: `<slot {...$selection} />` does not play well with sveld -->

packages/svelte-ux/src/routes/docs/components/Selection/+page.svelte

@@ -127,3 +127,23 @@
     selected: {JSON.stringify(selected)}
   </Selection>
 </Preview>
+
+<h2>change event</h2>
+
+<Preview>
+  <Selection
+    let:selected
+    let:isSelected
+    let:toggleSelected
+    on:change={(e) => console.log(e.detail)}
+  >
+    {#each data as d}
+      <div>
+        <Checkbox checked={isSelected(d.id)} on:change={() => toggleSelected(d.id)}>
+          {d.id}
+        </Checkbox>
+      </div>
+    {/each}
+    selected: {JSON.stringify(selected)}
+  </Selection>
+</Preview>