diff --git a/.changeset/dull-hornets-stare.md b/.changeset/dull-hornets-stare.md new file mode 100644 index 000000000..4f7939315 --- /dev/null +++ b/.changeset/dull-hornets-stare.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Replace `open` property on `close` event with separate `close` and `closeAttempt` events in Dialogs and Drawers diff --git a/packages/svelte-ux/src/lib/components/Dialog.svelte b/packages/svelte-ux/src/lib/components/Dialog.svelte index 7c066ce79..da1a39c7f 100644 --- a/packages/svelte-ux/src/lib/components/Dialog.svelte +++ b/packages/svelte-ux/src/lib/components/Dialog.svelte @@ -15,7 +15,8 @@ import { getComponentClasses } from './theme.js'; const dispatch = createEventDispatcher<{ - close: { open: boolean }; + close: null; + closeAttempt: null; open: null; }>(); @@ -63,7 +64,7 @@ open = false; } else { // attempted close of persistent dialog - dispatch('close', { open }); + dispatch('closeAttempt'); } } } @@ -71,7 +72,7 @@ $: if (open) { dispatch('open'); } else { - dispatch('close', { open }); + dispatch('close'); } diff --git a/packages/svelte-ux/src/lib/components/Drawer.svelte b/packages/svelte-ux/src/lib/components/Drawer.svelte index ba53c8d4e..2cd6c072c 100644 --- a/packages/svelte-ux/src/lib/components/Drawer.svelte +++ b/packages/svelte-ux/src/lib/components/Drawer.svelte @@ -13,7 +13,8 @@ const dispatch = createEventDispatcher<{ change: { open: boolean }; - close: { open: boolean }; + close: null; + closeAttempt: null; open: null; }>(); @@ -39,7 +40,7 @@ open = false; } else { // attempted close of persistent dialog - dispatch('close', { open }); + dispatch('closeAttempt'); } } } @@ -47,7 +48,7 @@ $: if (open) { dispatch('open'); } else { - dispatch('close', { open }); + dispatch('close'); } diff --git a/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte index e0ffbc640..269704cf5 100644 --- a/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Dialog/+page.svelte @@ -204,17 +204,14 @@ {open} persistent let:close - on:close={({ detail }) => { - if (detail.open) { - alert( - "Attempted to close persistent Dialog without using 'force'\n\nUse 'close({ force: true })' instead of Use 'close()' to close.\n\nDialog will remain open." - ); - } else { - alert( - "Persistent Dialog forced close via 'close({ force: true })'.\n\nDialog will close." - ); - toggleOff(); - } + on:close={() => { + alert("Persistent Dialog forced close via 'close({ force: true })'.\n\nDialog will close."); + toggleOff(); + }} + on:closeAttempt={() => { + alert( + "Attempted to close persistent Dialog without using 'force'\n\nUse 'close({ force: true })' instead of Use 'close()' to close.\n\nDialog will remain open." + ); }} >
diff --git a/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte index 5f463f90b..9c67a6581 100644 --- a/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Drawer/+page.svelte @@ -150,13 +150,8 @@ { - if (detail.open) { - openConfirmation(); - } else { - closeDrawer(); - } - }} + on:close={closeDrawer} + on:closeAttempt={openConfirmation} class="w-[400px]" >
diff --git a/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte index 536e1002e..e15513be6 100644 --- a/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Menu/+page.svelte @@ -69,10 +69,12 @@ Open Persistent Dialog... - +
Are you sure you want to do that?
- +
@@ -88,9 +90,9 @@ Open Persistent Drawer... - +
- +
diff --git a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte index 822756cfe..ee1c2f654 100644 --- a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte @@ -82,8 +82,10 @@ Open Persistent Dialog...
Are you sure you want to do that?
-
- +
+
@@ -100,8 +102,8 @@ Open Persistent Drawer... -
- +
+