From c0dd80d1498aa3065dc4baaa43f0f5750d053ecd Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 3 Feb 2021 06:04:07 -0800
Subject: [PATCH] feat(toggle): dispatch toggle event

---
 COMPONENT_INDEX.md                   | 21 +++++++++++----------
 docs/src/COMPONENT_API.json          |  5 +++++
 docs/src/pages/components/Toggle.svx |  4 ++++
 src/Toggle/Toggle.svelte             | 10 ++++++++++
 tests/Toggle.test.svelte             |  8 +++++++-
 types/Toggle/Toggle.d.ts             |  1 +
 6 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index dcf27241..4c564958 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3958,16 +3958,17 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
-| change     | forwarded | --     |
-| keyup      | forwarded | --     |
-| focus      | forwarded | --     |
-| blur       | forwarded | --     |
+| Event name | Type       | Detail                             |
+| :--------- | :--------- | :--------------------------------- |
+| toggle     | dispatched | <code>{ toggled: boolean; }</code> |
+| click      | forwarded  | --                                 |
+| mouseover  | forwarded  | --                                 |
+| mouseenter | forwarded  | --                                 |
+| mouseleave | forwarded  | --                                 |
+| change     | forwarded  | --                                 |
+| keyup      | forwarded  | --                                 |
+| focus      | forwarded  | --                                 |
+| blur       | forwarded  | --                                 |
 
 ## `ToggleSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 3be502ac..67d35712 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9245,6 +9245,11 @@
       ],
       "slots": [],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "toggle",
+          "detail": "{ toggled: boolean; }"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx
index 727cc63c..b5ea1262 100644
--- a/docs/src/pages/components/Toggle.svx
+++ b/docs/src/pages/components/Toggle.svx
@@ -19,6 +19,10 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <FileSource src="/framed/Toggle/ToggleReactive" />
 
+### on:toggle event
+
+<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
+
 ### Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 97b3e3b6..81b966b2 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ toggled: boolean; }} toggle
+   */
+
   /**
    * Specify the toggle size
    * @type {"default" | "sm"}
@@ -28,6 +32,12 @@
    * @type {string}
    */
   export let name = undefined;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("toggle", { toggled });
 </script>
 
 <div
diff --git a/tests/Toggle.test.svelte b/tests/Toggle.test.svelte
index bff61a99..d5af2c9e 100644
--- a/tests/Toggle.test.svelte
+++ b/tests/Toggle.test.svelte
@@ -4,7 +4,13 @@
 
 <Toggle labelText="Push notifications" />
 
-<Toggle labelText="Push notifications" toggled />
+<Toggle
+  labelText="Push notifications"
+  toggled
+  on:toggle="{(e) => {
+    console.log(e.detail.toggled);
+  }}"
+/>
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 
diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts
index d2440b41..7f5e82b4 100644
--- a/types/Toggle/Toggle.d.ts
+++ b/types/Toggle/Toggle.d.ts
@@ -53,6 +53,7 @@ export default class Toggle {
   $$prop_def: ToggleProps;
   $$slot_def: {};
 
+  $on(eventname: "toggle", cb: (event: CustomEvent<{ toggled: boolean }>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;