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." + ); }} >