Update all <Toggle> usage to use on:close={toggleOff} instaed of …

…`on:close={toggle}` since can be called more than once (especially on Svelte 5)
techniq · Jun 19, 2024 · 09d5c99 · 09d5c99
1 parent 3b87321
commit 09d5c99
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 59 deletions.
diff --git a/packages/svelte-ux/src/lib/components/Pagination.svelte b/packages/svelte-ux/src/lib/components/Pagination.svelte
@@ -111,7 +111,7 @@
       {#if component === 'perPage'}
         <div class={cls('text-sm text-center', settingsClasses.perPage, classes.perPage)}>
           Per page:
-          <Toggle let:on={open} let:toggle>
+          <Toggle let:on={open} let:toggle let:toggleOff>
             <span>
               <Button on:click={toggle}>
                 {$pagination.perPage}
@@ -120,7 +120,7 @@
 
               <Menu
                 {open}
-                on:close={toggle}
+                on:close={toggleOff}
                 autoPlacement
                 offset={12}
                 classes={{ menu: 'group p-1' }}

diff --git a/packages/svelte-ux/src/routes/docs/components/ButtonGroup/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ButtonGroup/+page.svelte
@@ -241,10 +241,10 @@
   <div class="grid gap-2">
     <ButtonGroup>
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -256,10 +256,10 @@
 
     <ButtonGroup variant="outline">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -271,10 +271,10 @@
 
     <ButtonGroup variant="fill" color="primary">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -286,10 +286,10 @@
 
     <ButtonGroup variant="fill-light" color="primary">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
@@ -301,10 +301,10 @@
 
     <ButtonGroup variant="fill-outline" color="primary">
       <Button>Click me</Button>
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <span>
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>
             <MenuItem>Hello</MenuItem>

diff --git a/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte
@@ -26,9 +26,9 @@
 <h2>Basic (with Toggle)</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Close</Button>
@@ -96,9 +96,9 @@
 <h2>Confirmation dialog</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button icon={mdiTrashCan} on:click={toggle} color="danger">Delete</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">Are you sure?</div>
       <div class="px-6 py-3">This will permanently delete the item and can not be undone.</div>
       <div slot="actions">
@@ -169,9 +169,9 @@
 <h2>Loading</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle} loading>
+    <Dialog {open} on:close={toggleOff} loading>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Close</Button>
@@ -183,9 +183,9 @@
 <h2>Persistent</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle} persistent>
+    <Dialog {open} on:close={toggleOff} persistent>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Yes</Button>
@@ -198,9 +198,9 @@
 <h2>With autofocus TextField</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">How old are you?</div>
       <div class="p-2">
         <TextField label="Age" autofocus />
@@ -216,9 +216,9 @@
 <h2>Disabled action</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>Show Dialog</Button>
-    <Dialog {open} on:close={toggle}>
+    <Dialog {open} on:close={toggleOff}>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary" disabled>Don't touch</Button>

diff --git a/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte
@@ -98,9 +98,9 @@
   <Toggle let:on={open} let:toggle let:toggleOff>
     <Drawer {open} on:close={toggleOff} class="w-[400px]">
       <div class="p-2">
-        <Toggle let:on={open} let:toggle>
+        <Toggle let:on={open} let:toggle let:toggleOff>
           <Button on:click={toggle}>Show Dialog</Button>
-          <Dialog {open} on:close={toggle}>
+          <Dialog {open} on:close={toggleOff}>
             <div slot="title">Are you sure you want to do that?</div>
             <div slot="actions">
               <Button variant="fill" color="primary">Close</Button>

diff --git a/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte
@@ -10,10 +10,10 @@
 <h2>Basic</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle}>
+      <Menu {open} on:close={toggleOff}>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -27,10 +27,10 @@
 <h2>Explicit close</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} explicitClose let:close>
+      <Menu {open} on:close={toggleOff} explicitClose let:close>
         <div class="p-2">
           <TextField
             icon={mdiMagnify}
@@ -97,10 +97,10 @@
         <Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
           <MenuItem on:click={toggleDrawer}>Open Drawer with another Menu...</MenuItem>
           <Drawer {open} on:close={toggleOff} class="w-[400px]">
-            <Toggle let:on={open} let:toggle>
+            <Toggle let:on={open} let:toggle let:toggleOff>
               <span>
                 <Button on:click={toggle}>Click me</Button>
-                <Menu {open} on:close={toggle}>
+                <Menu {open} on:close={toggleOff}>
                   <MenuItem>Refresh</MenuItem>
                   <MenuItem>Settings</MenuItem>
                   <MenuItem>Help</MenuItem>
@@ -121,10 +121,10 @@
 <h2>matchWidth</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} matchWidth>
+      <Menu {open} on:close={toggleOff} matchWidth>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -137,10 +137,10 @@
 <h2>autoPlacement</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} autoPlacement>
+      <Menu {open} on:close={toggleOff} autoPlacement>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -153,10 +153,10 @@
 <h2>explicit placement</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} placement="right-start">
+      <Menu {open} on:close={toggleOff} placement="right-start">
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -171,10 +171,10 @@
 <h3>Useful when menu will exceed window and need repositioned.</h3>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} disableTransition>
+      <Menu {open} on:close={toggleOff} disableTransition>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>
@@ -187,10 +187,10 @@
 <h2>transition params</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
-      <Menu {open} on:close={toggle} transitionParams={{ duration: 2000 }}>
+      <Menu {open} on:close={toggleOff} transitionParams={{ duration: 2000 }}>
         <MenuItem>Refresh</MenuItem>
         <MenuItem>Settings</MenuItem>
         <MenuItem>Help</MenuItem>

diff --git a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte
@@ -108,10 +108,10 @@
         <Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
           <MenuItem on:click={toggleDrawer}>Open Drawer with another Menu...</MenuItem>
           <Drawer {open} on:close={toggleOff} class="w-[400px]">
-            <Toggle let:on={open} let:toggle>
+            <Toggle let:on={open} let:toggle let:toggleOff>
               <span>
                 <Button on:click={toggle}>Click me</Button>
-                <ResponsiveMenu {open} on:close={toggle}>
+                <ResponsiveMenu {open} on:close={toggleOff}>
                   <MenuItem>Refresh</MenuItem>
                   <MenuItem>Settings</MenuItem>
                   <MenuItem>Help</MenuItem>
@@ -132,12 +132,12 @@
 <h2>menuProps</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
       <ResponsiveMenu
         {open}
-        on:close={toggle}
+        on:close={toggleOff}
         menuProps={{ autoPlacement: true, matchWidth: true }}
       >
         <MenuItem>Refresh</MenuItem>
@@ -152,12 +152,12 @@
 <h2>drawerProps</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button on:click={toggle}>
       Click me
       <ResponsiveMenu
         {open}
-        on:close={toggle}
+        on:close={toggleOff}
         drawerProps={{ class: 'rounded-t-lg pb-[env(safe-area-inset-bottom)]' }}
       >
         <MenuItem>Refresh</MenuItem>

diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -284,7 +284,7 @@
 <h2>`append` slot (field actions)</h2>
 
 <Preview>
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <SelectField {options}>
       <span slot="append" on:click|stopPropagation>
         <Button icon={mdiPlus} class="text-surface-content/50 p-2" on:click={toggle} />
@@ -299,7 +299,7 @@
       let:commit
       let:revert
     >
-      <Dialog {open} on:close={toggle}>
+      <Dialog {open} on:close={toggleOff}>
         <div slot="title">Create new option</div>
         <div class="px-6 py-3 w-96 grid gap-2">
           <TextField

diff --git a/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte
@@ -15,10 +15,10 @@
       MenuItem: { classes: 'font-bold' },
     }}
   >
-    <Toggle let:on={open} let:toggle>
+    <Toggle let:on={open} let:toggle let:toggleOff>
       <Button on:click={toggle} variant="outline" color="primary">
         Click me
-        <Menu {open} on:close={toggle}>
+        <Menu {open} on:close={toggleOff}>
           <MenuItem>Refresh</MenuItem>
           <MenuItem>Settings</MenuItem>
           <MenuItem>Help</MenuItem>

diff --git a/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
@@ -462,9 +462,9 @@
 
             <td use:tableCell={{ column, rowData, rowIndex, tableData: data }}>
               {#if column.name === 'actions'}
-                <Toggle let:on={open} let:toggle>
+                <Toggle let:on={open} let:toggle let:toggleOff>
                   <Button icon={mdiDotsVertical} iconOnly size="sm" on:click={toggle}>
-                    <Menu {open} on:close={toggle} placement="bottom-end">
+                    <Menu {open} on:close={toggleOff} placement="bottom-end">
                       <MenuItem>Edit</MenuItem>
                       <MenuItem class="text-danger">Delete</MenuItem>
                     </Menu>

diff --git a/packages/svelte-ux/src/routes/docs/components/Toggle/+page.md b/packages/svelte-ux/src/routes/docs/components/Toggle/+page.md
@@ -5,10 +5,10 @@
 <h1>Examples</h1>
 
 ```svelte
-<Toggle let:on={open} let:toggle>
+<Toggle let:on={open} let:toggle let:toggleOff>
   <Button on:click={toggle}>Show dialog</Button>
 
-  <Dialog {open} on:close={toggle}>
+  <Dialog {open} on:close={toggleOff}>
     <!-- render contents -->
   </Dialog>
 </Toggle>

diff --git a/packages/svelte-ux/src/routes/docs/components/ToggleButton/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ToggleButton/+page.svelte
@@ -13,7 +13,7 @@
 <Preview>
   <ToggleButton let:on={open}>
     Open Dialog
-    <Dialog slot="toggle" {open} on:close={toggle} let:toggle>
+    <Dialog slot="toggle" {open} on:close={toggleOff} let:toggle let:toggleOff>
       <div slot="title">Are you sure you want to do that?</div>
       <div slot="actions">
         <Button variant="fill" color="primary">Close</Button>

diff --git a/packages/svelte-ux/src/routes/theme/+page.svelte b/packages/svelte-ux/src/routes/theme/+page.svelte
@@ -256,10 +256,10 @@
         <CopyButton value={JSON.stringify(currentThemeSettings, null, 2)} />
       </Tooltip>
 
-      <Toggle let:on={open} let:toggle>
+      <Toggle let:on={open} let:toggle let:toggleOff>
         <div class="grid">
           <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
-          <Menu {open} on:close={toggle} placement="bottom-start">
+          <Menu {open} on:close={toggleOff} placement="bottom-start">
             <MenuItem
               on:click={() => {
                 const value = JSON.stringify(