Skip to content

Commit 09d5c99

Browse files
techniqtechniq
committed
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)
1 parent 3b87321 commit 09d5c99

File tree

12 files changed

+59
-59
lines changed

12 files changed

+59
-59
lines changed

‎packages/svelte-ux/src/lib/components/Pagination.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
{#if component === 'perPage'}
112112
<div class={cls('text-sm text-center', settingsClasses.perPage, classes.perPage)}>
113113
Per page:
114-
<Toggle let:on={open} let:toggle>
114+
<Toggle let:on={open} let:toggle let:toggleOff>
115115
<span>
116116
<Button on:click={toggle}>
117117
{$pagination.perPage}
@@ -120,7 +120,7 @@
120120

121121
<Menu
122122
{open}
123-
on:close={toggle}
123+
on:close={toggleOff}
124124
autoPlacement
125125
offset={12}
126126
classes={{ menu: 'group p-1' }}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -241,10 +241,10 @@
241241
<div class="grid gap-2">
242242
<ButtonGroup>
243243
<Button>Click me</Button>
244-
<Toggle let:on={open} let:toggle>
244+
<Toggle let:on={open} let:toggle let:toggleOff>
245245
<span>
246246
<Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
247-
<Menu {open} on:close={toggle} placement="bottom-start">
247+
<Menu {open} on:close={toggleOff} placement="bottom-start">
248248
<MenuItem>Hello</MenuItem>
249249
<MenuItem>Hello</MenuItem>
250250
<MenuItem>Hello</MenuItem>
@@ -256,10 +256,10 @@
256256

257257
<ButtonGroup variant="outline">
258258
<Button>Click me</Button>
259-
<Toggle let:on={open} let:toggle>
259+
<Toggle let:on={open} let:toggle let:toggleOff>
260260
<span>
261261
<Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
262-
<Menu {open} on:close={toggle} placement="bottom-start">
262+
<Menu {open} on:close={toggleOff} placement="bottom-start">
263263
<MenuItem>Hello</MenuItem>
264264
<MenuItem>Hello</MenuItem>
265265
<MenuItem>Hello</MenuItem>
@@ -271,10 +271,10 @@
271271

272272
<ButtonGroup variant="fill" color="primary">
273273
<Button>Click me</Button>
274-
<Toggle let:on={open} let:toggle>
274+
<Toggle let:on={open} let:toggle let:toggleOff>
275275
<span>
276276
<Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
277-
<Menu {open} on:close={toggle} placement="bottom-start">
277+
<Menu {open} on:close={toggleOff} placement="bottom-start">
278278
<MenuItem>Hello</MenuItem>
279279
<MenuItem>Hello</MenuItem>
280280
<MenuItem>Hello</MenuItem>
@@ -286,10 +286,10 @@
286286

287287
<ButtonGroup variant="fill-light" color="primary">
288288
<Button>Click me</Button>
289-
<Toggle let:on={open} let:toggle>
289+
<Toggle let:on={open} let:toggle let:toggleOff>
290290
<span>
291291
<Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
292-
<Menu {open} on:close={toggle} placement="bottom-start">
292+
<Menu {open} on:close={toggleOff} placement="bottom-start">
293293
<MenuItem>Hello</MenuItem>
294294
<MenuItem>Hello</MenuItem>
295295
<MenuItem>Hello</MenuItem>
@@ -301,10 +301,10 @@
301301

302302
<ButtonGroup variant="fill-outline" color="primary">
303303
<Button>Click me</Button>
304-
<Toggle let:on={open} let:toggle>
304+
<Toggle let:on={open} let:toggle let:toggleOff>
305305
<span>
306306
<Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
307-
<Menu {open} on:close={toggle} placement="bottom-start">
307+
<Menu {open} on:close={toggleOff} placement="bottom-start">
308308
<MenuItem>Hello</MenuItem>
309309
<MenuItem>Hello</MenuItem>
310310
<MenuItem>Hello</MenuItem>

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
<h2>Basic (with Toggle)</h2>
2727

2828
<Preview>
29-
<Toggle let:on={open} let:toggle>
29+
<Toggle let:on={open} let:toggle let:toggleOff>
3030
<Button on:click={toggle}>Show Dialog</Button>
31-
<Dialog {open} on:close={toggle}>
31+
<Dialog {open} on:close={toggleOff}>
3232
<div slot="title">Are you sure you want to do that?</div>
3333
<div slot="actions">
3434
<Button variant="fill" color="primary">Close</Button>
@@ -96,9 +96,9 @@
9696
<h2>Confirmation dialog</h2>
9797

9898
<Preview>
99-
<Toggle let:on={open} let:toggle>
99+
<Toggle let:on={open} let:toggle let:toggleOff>
100100
<Button icon={mdiTrashCan} on:click={toggle} color="danger">Delete</Button>
101-
<Dialog {open} on:close={toggle}>
101+
<Dialog {open} on:close={toggleOff}>
102102
<div slot="title">Are you sure?</div>
103103
<div class="px-6 py-3">This will permanently delete the item and can not be undone.</div>
104104
<div slot="actions">
@@ -169,9 +169,9 @@
169169
<h2>Loading</h2>
170170

171171
<Preview>
172-
<Toggle let:on={open} let:toggle>
172+
<Toggle let:on={open} let:toggle let:toggleOff>
173173
<Button on:click={toggle}>Show Dialog</Button>
174-
<Dialog {open} on:close={toggle} loading>
174+
<Dialog {open} on:close={toggleOff} loading>
175175
<div slot="title">Are you sure you want to do that?</div>
176176
<div slot="actions">
177177
<Button variant="fill" color="primary">Close</Button>
@@ -183,9 +183,9 @@
183183
<h2>Persistent</h2>
184184

185185
<Preview>
186-
<Toggle let:on={open} let:toggle>
186+
<Toggle let:on={open} let:toggle let:toggleOff>
187187
<Button on:click={toggle}>Show Dialog</Button>
188-
<Dialog {open} on:close={toggle} persistent>
188+
<Dialog {open} on:close={toggleOff} persistent>
189189
<div slot="title">Are you sure you want to do that?</div>
190190
<div slot="actions">
191191
<Button variant="fill" color="primary">Yes</Button>
@@ -198,9 +198,9 @@
198198
<h2>With autofocus TextField</h2>
199199

200200
<Preview>
201-
<Toggle let:on={open} let:toggle>
201+
<Toggle let:on={open} let:toggle let:toggleOff>
202202
<Button on:click={toggle}>Show Dialog</Button>
203-
<Dialog {open} on:close={toggle}>
203+
<Dialog {open} on:close={toggleOff}>
204204
<div slot="title">How old are you?</div>
205205
<div class="p-2">
206206
<TextField label="Age" autofocus />
@@ -216,9 +216,9 @@
216216
<h2>Disabled action</h2>
217217

218218
<Preview>
219-
<Toggle let:on={open} let:toggle>
219+
<Toggle let:on={open} let:toggle let:toggleOff>
220220
<Button on:click={toggle}>Show Dialog</Button>
221-
<Dialog {open} on:close={toggle}>
221+
<Dialog {open} on:close={toggleOff}>
222222
<div slot="title">Are you sure you want to do that?</div>
223223
<div slot="actions">
224224
<Button variant="fill" color="primary" disabled>Don't touch</Button>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,9 @@
9898
<Toggle let:on={open} let:toggle let:toggleOff>
9999
<Drawer {open} on:close={toggleOff} class="w-[400px]">
100100
<div class="p-2">
101-
<Toggle let:on={open} let:toggle>
101+
<Toggle let:on={open} let:toggle let:toggleOff>
102102
<Button on:click={toggle}>Show Dialog</Button>
103-
<Dialog {open} on:close={toggle}>
103+
<Dialog {open} on:close={toggleOff}>
104104
<div slot="title">Are you sure you want to do that?</div>
105105
<div slot="actions">
106106
<Button variant="fill" color="primary">Close</Button>

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
<h2>Basic</h2>
1111

1212
<Preview>
13-
<Toggle let:on={open} let:toggle>
13+
<Toggle let:on={open} let:toggle let:toggleOff>
1414
<Button on:click={toggle}>
1515
Click me
16-
<Menu {open} on:close={toggle}>
16+
<Menu {open} on:close={toggleOff}>
1717
<MenuItem>Refresh</MenuItem>
1818
<MenuItem>Settings</MenuItem>
1919
<MenuItem>Help</MenuItem>
@@ -27,10 +27,10 @@
2727
<h2>Explicit close</h2>
2828

2929
<Preview>
30-
<Toggle let:on={open} let:toggle>
30+
<Toggle let:on={open} let:toggle let:toggleOff>
3131
<Button on:click={toggle}>
3232
Click me
33-
<Menu {open} on:close={toggle} explicitClose let:close>
33+
<Menu {open} on:close={toggleOff} explicitClose let:close>
3434
<div class="p-2">
3535
<TextField
3636
icon={mdiMagnify}
@@ -97,10 +97,10 @@
9797
<Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
9898
<MenuItem on:click={toggleDrawer}>Open Drawer with another Menu...</MenuItem>
9999
<Drawer {open} on:close={toggleOff} class="w-[400px]">
100-
<Toggle let:on={open} let:toggle>
100+
<Toggle let:on={open} let:toggle let:toggleOff>
101101
<span>
102102
<Button on:click={toggle}>Click me</Button>
103-
<Menu {open} on:close={toggle}>
103+
<Menu {open} on:close={toggleOff}>
104104
<MenuItem>Refresh</MenuItem>
105105
<MenuItem>Settings</MenuItem>
106106
<MenuItem>Help</MenuItem>
@@ -121,10 +121,10 @@
121121
<h2>matchWidth</h2>
122122

123123
<Preview>
124-
<Toggle let:on={open} let:toggle>
124+
<Toggle let:on={open} let:toggle let:toggleOff>
125125
<Button on:click={toggle}>
126126
Click me
127-
<Menu {open} on:close={toggle} matchWidth>
127+
<Menu {open} on:close={toggleOff} matchWidth>
128128
<MenuItem>Refresh</MenuItem>
129129
<MenuItem>Settings</MenuItem>
130130
<MenuItem>Help</MenuItem>
@@ -137,10 +137,10 @@
137137
<h2>autoPlacement</h2>
138138

139139
<Preview>
140-
<Toggle let:on={open} let:toggle>
140+
<Toggle let:on={open} let:toggle let:toggleOff>
141141
<Button on:click={toggle}>
142142
Click me
143-
<Menu {open} on:close={toggle} autoPlacement>
143+
<Menu {open} on:close={toggleOff} autoPlacement>
144144
<MenuItem>Refresh</MenuItem>
145145
<MenuItem>Settings</MenuItem>
146146
<MenuItem>Help</MenuItem>
@@ -153,10 +153,10 @@
153153
<h2>explicit placement</h2>
154154

155155
<Preview>
156-
<Toggle let:on={open} let:toggle>
156+
<Toggle let:on={open} let:toggle let:toggleOff>
157157
<Button on:click={toggle}>
158158
Click me
159-
<Menu {open} on:close={toggle} placement="right-start">
159+
<Menu {open} on:close={toggleOff} placement="right-start">
160160
<MenuItem>Refresh</MenuItem>
161161
<MenuItem>Settings</MenuItem>
162162
<MenuItem>Help</MenuItem>
@@ -171,10 +171,10 @@
171171
<h3>Useful when menu will exceed window and need repositioned.</h3>
172172

173173
<Preview>
174-
<Toggle let:on={open} let:toggle>
174+
<Toggle let:on={open} let:toggle let:toggleOff>
175175
<Button on:click={toggle}>
176176
Click me
177-
<Menu {open} on:close={toggle} disableTransition>
177+
<Menu {open} on:close={toggleOff} disableTransition>
178178
<MenuItem>Refresh</MenuItem>
179179
<MenuItem>Settings</MenuItem>
180180
<MenuItem>Help</MenuItem>
@@ -187,10 +187,10 @@
187187
<h2>transition params</h2>
188188

189189
<Preview>
190-
<Toggle let:on={open} let:toggle>
190+
<Toggle let:on={open} let:toggle let:toggleOff>
191191
<Button on:click={toggle}>
192192
Click me
193-
<Menu {open} on:close={toggle} transitionParams={{ duration: 2000 }}>
193+
<Menu {open} on:close={toggleOff} transitionParams={{ duration: 2000 }}>
194194
<MenuItem>Refresh</MenuItem>
195195
<MenuItem>Settings</MenuItem>
196196
<MenuItem>Help</MenuItem>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,10 @@
108108
<Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
109109
<MenuItem on:click={toggleDrawer}>Open Drawer with another Menu...</MenuItem>
110110
<Drawer {open} on:close={toggleOff} class="w-[400px]">
111-
<Toggle let:on={open} let:toggle>
111+
<Toggle let:on={open} let:toggle let:toggleOff>
112112
<span>
113113
<Button on:click={toggle}>Click me</Button>
114-
<ResponsiveMenu {open} on:close={toggle}>
114+
<ResponsiveMenu {open} on:close={toggleOff}>
115115
<MenuItem>Refresh</MenuItem>
116116
<MenuItem>Settings</MenuItem>
117117
<MenuItem>Help</MenuItem>
@@ -132,12 +132,12 @@
132132
<h2>menuProps</h2>
133133

134134
<Preview>
135-
<Toggle let:on={open} let:toggle>
135+
<Toggle let:on={open} let:toggle let:toggleOff>
136136
<Button on:click={toggle}>
137137
Click me
138138
<ResponsiveMenu
139139
{open}
140-
on:close={toggle}
140+
on:close={toggleOff}
141141
menuProps={{ autoPlacement: true, matchWidth: true }}
142142
>
143143
<MenuItem>Refresh</MenuItem>
@@ -152,12 +152,12 @@
152152
<h2>drawerProps</h2>
153153

154154
<Preview>
155-
<Toggle let:on={open} let:toggle>
155+
<Toggle let:on={open} let:toggle let:toggleOff>
156156
<Button on:click={toggle}>
157157
Click me
158158
<ResponsiveMenu
159159
{open}
160-
on:close={toggle}
160+
on:close={toggleOff}
161161
drawerProps={{ class: 'rounded-t-lg pb-[env(safe-area-inset-bottom)]' }}
162162
>
163163
<MenuItem>Refresh</MenuItem>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@
284284
<h2>`append` slot (field actions)</h2>
285285

286286
<Preview>
287-
<Toggle let:on={open} let:toggle>
287+
<Toggle let:on={open} let:toggle let:toggleOff>
288288
<SelectField {options}>
289289
<span slot="append" on:click|stopPropagation>
290290
<Button icon={mdiPlus} class="text-surface-content/50 p-2" on:click={toggle} />
@@ -299,7 +299,7 @@
299299
let:commit
300300
let:revert
301301
>
302-
<Dialog {open} on:close={toggle}>
302+
<Dialog {open} on:close={toggleOff}>
303303
<div slot="title">Create new option</div>
304304
<div class="px-6 py-3 w-96 grid gap-2">
305305
<TextField

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
MenuItem: { classes: 'font-bold' },
1616
}}
1717
>
18-
<Toggle let:on={open} let:toggle>
18+
<Toggle let:on={open} let:toggle let:toggleOff>
1919
<Button on:click={toggle} variant="outline" color="primary">
2020
Click me
21-
<Menu {open} on:close={toggle}>
21+
<Menu {open} on:close={toggleOff}>
2222
<MenuItem>Refresh</MenuItem>
2323
<MenuItem>Settings</MenuItem>
2424
<MenuItem>Help</MenuItem>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -462,9 +462,9 @@
462462

463463
<td use:tableCell={{ column, rowData, rowIndex, tableData: data }}>
464464
{#if column.name === 'actions'}
465-
<Toggle let:on={open} let:toggle>
465+
<Toggle let:on={open} let:toggle let:toggleOff>
466466
<Button icon={mdiDotsVertical} iconOnly size="sm" on:click={toggle}>
467-
<Menu {open} on:close={toggle} placement="bottom-end">
467+
<Menu {open} on:close={toggleOff} placement="bottom-end">
468468
<MenuItem>Edit</MenuItem>
469469
<MenuItem class="text-danger">Delete</MenuItem>
470470
</Menu>

‎packages/svelte-ux/src/routes/docs/components/Toggle/+page.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<h1>Examples</h1>
66

77
```svelte
8-
<Toggle let:on={open} let:toggle>
8+
<Toggle let:on={open} let:toggle let:toggleOff>
99
<Button on:click={toggle}>Show dialog</Button>
1010
11-
<Dialog {open} on:close={toggle}>
11+
<Dialog {open} on:close={toggleOff}>
1212
<!-- render contents -->
1313
</Dialog>
1414
</Toggle>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<Preview>
1414
<ToggleButton let:on={open}>
1515
Open Dialog
16-
<Dialog slot="toggle" {open} on:close={toggle} let:toggle>
16+
<Dialog slot="toggle" {open} on:close={toggleOff} let:toggle let:toggleOff>
1717
<div slot="title">Are you sure you want to do that?</div>
1818
<div slot="actions">
1919
<Button variant="fill" color="primary">Close</Button>

‎packages/svelte-ux/src/routes/theme/+page.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -256,10 +256,10 @@
256256
<CopyButton value={JSON.stringify(currentThemeSettings, null, 2)} />
257257
</Tooltip>
258258

259-
<Toggle let:on={open} let:toggle>
259+
<Toggle let:on={open} let:toggle let:toggleOff>
260260
<div class="grid">
261261
<Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
262-
<Menu {open} on:close={toggle} placement="bottom-start">
262+
<Menu {open} on:close={toggleOff} placement="bottom-start">
263263
<MenuItem
264264
on:click={() => {
265265
const value = JSON.stringify(

0 commit comments

Comments
 (0)