From 8e890b2e80e7732a77d72cb5cc4963221907ba16 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Sun, 19 Dec 2021 00:28:09 -0800
Subject: [PATCH] Standardize event names to be consistent with
 @headlessui-react

Was previously using Vue names since Vue was the primary reference while porting, but as the public API is closer to the React one it makes sense to use that.

Fixes #8
---
 src/lib/components/listbox/Listbox.svelte            | 2 +-
 src/lib/components/radio-group/RadioGroup.svelte     | 2 +-
 src/lib/components/switch/Switch.svelte              | 2 +-
 src/lib/components/tabs/TabGroup.svelte              | 2 +-
 src/routes/listbox/_PeopleList.svelte                | 6 +++---
 src/routes/listbox/listbox-with-pure-tailwind.svelte | 6 ++----
 src/routes/radio-group/radio-group.svelte            | 7 ++-----
 src/routes/switch/switch-with-pure-tailwind.svelte   | 2 +-
 src/routes/tabs/tabs-with-pure-tailwind.svelte       | 2 +-
 9 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/listbox/Listbox.svelte b/src/lib/components/listbox/Listbox.svelte
index c7f9790..9bda937 100644
--- a/src/lib/components/listbox/Listbox.svelte
+++ b/src/lib/components/listbox/Listbox.svelte
@@ -164,7 +164,7 @@
     },
     select(value: unknown) {
       if (disabled) return;
-      dispatch("updateValue", { value });
+      dispatch("change", value);
     },
   });
   setContext(LISTBOX_CONTEXT_NAME, api);
diff --git a/src/lib/components/radio-group/RadioGroup.svelte b/src/lib/components/radio-group/RadioGroup.svelte
index cd8992f..38b5422 100644
--- a/src/lib/components/radio-group/RadioGroup.svelte
+++ b/src/lib/components/radio-group/RadioGroup.svelte
@@ -70,7 +70,7 @@
         (option) => option.propsRef.value === nextValue
       )?.propsRef;
       if (nextOption?.disabled) return false;
-      dispatch("updateValue", nextValue);
+      dispatch("change", nextValue);
       return true;
     },
     registerOption(action: Option) {
diff --git a/src/lib/components/switch/Switch.svelte b/src/lib/components/switch/Switch.svelte
index c3ef102..2094dfb 100644
--- a/src/lib/components/switch/Switch.svelte
+++ b/src/lib/components/switch/Switch.svelte
@@ -18,7 +18,7 @@
   $: switchStore = $api?.switchStore;
 
   function toggle() {
-    dispatch("updateValue", !checked);
+    dispatch("change", !checked);
   }
 
   function handleClick(event: MouseEvent) {
diff --git a/src/lib/components/tabs/TabGroup.svelte b/src/lib/components/tabs/TabGroup.svelte
index f79707a..b83cf9b 100644
--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -61,7 +61,7 @@
     setSelectedIndex(index: number) {
       if (selectedIndex === index) return;
       selectedIndex = index;
-      dispatch("updateValue", index);
+      dispatch("change", index);
     },
     registerTab(tab: typeof tabs[number]) {
       if (!tabs.includes(tab)) tabs = [...tabs, tab];
diff --git a/src/routes/listbox/_PeopleList.svelte b/src/routes/listbox/_PeopleList.svelte
index 5a0cb1d..4f0edea 100644
--- a/src/routes/listbox/_PeopleList.svelte
+++ b/src/routes/listbox/_PeopleList.svelte
@@ -36,9 +36,9 @@
   <div class="space-y-1">
     <Listbox
       value={active}
-      on:updateValue={(event) => {
-        console.log("value:", event.detail.value);
-        active = event.detail.value;
+      on:change={(event) => {
+        console.log("value:", event.detail);
+        active = event.detail;
       }}
     >
       <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">
diff --git a/src/routes/listbox/listbox-with-pure-tailwind.svelte b/src/routes/listbox/listbox-with-pure-tailwind.svelte
index 615afeb..60b68f2 100644
--- a/src/routes/listbox/listbox-with-pure-tailwind.svelte
+++ b/src/routes/listbox/listbox-with-pure-tailwind.svelte
@@ -7,8 +7,6 @@
     ListboxOptions,
   } from "$lib";
 
-  import { onMount } from "svelte";
-
   function classNames(
     ...classes: (false | null | undefined | string)[]
   ): string {
@@ -36,8 +34,8 @@
     <div class="space-y-1">
       <Listbox
         value={active}
-        on:updateValue={(event) => {
-          active = event.detail.value;
+        on:change={(event) => {
+          active = event.detail;
         }}
       >
         <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">
diff --git a/src/routes/radio-group/radio-group.svelte b/src/routes/radio-group/radio-group.svelte
index 400c292..7ab9146 100644
--- a/src/routes/radio-group/radio-group.svelte
+++ b/src/routes/radio-group/radio-group.svelte
@@ -20,15 +20,12 @@
       description: "You are the only one able to access this project",
     },
   ];
-  let active;
+  let active: typeof access[number];
 </script>
 
 <div class="p-12 max-w-xl">
   <a href="/">Link before</a>
-  <RadioGroup
-    value={active}
-    on:updateValue={(event) => (active = event.detail)}
-  >
+  <RadioGroup value={active} on:change={(event) => (active = event.detail)}>
     <fieldset class="space-y-4">
       <legend>
         <h2 class="text-xl">Privacy setting</h2>
diff --git a/src/routes/switch/switch-with-pure-tailwind.svelte b/src/routes/switch/switch-with-pure-tailwind.svelte
index 6f85671..3513655 100644
--- a/src/routes/switch/switch-with-pure-tailwind.svelte
+++ b/src/routes/switch/switch-with-pure-tailwind.svelte
@@ -15,7 +15,7 @@
     <Switch
       as="button"
       checked={state}
-      on:updateValue={(event) => (state = event.detail)}
+      on:change={(event) => (state = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",
diff --git a/src/routes/tabs/tabs-with-pure-tailwind.svelte b/src/routes/tabs/tabs-with-pure-tailwind.svelte
index a21e063..c15a753 100644
--- a/src/routes/tabs/tabs-with-pure-tailwind.svelte
+++ b/src/routes/tabs/tabs-with-pure-tailwind.svelte
@@ -33,7 +33,7 @@
     <Switch
       as="button"
       checked={manual}
-      on:updateValue={(event) => (manual = event.detail)}
+      on:change={(event) => (manual = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",