Replace open property on close event with separate close and `c…

…loseAttempt` events in Dialogs and Drawers (#468) * Replace `close` `open` property with `close` and `closeAttempt` events * Update docs * Format * Add changeset * Update docs * Update docs * Format * Fix ReponsiveMenu persistent Dialog and Drawer examples --------- Co-authored-by: Sean Lynch <techniq35@gmail.com>
techniq · Aug 16, 2024 · a843daf · a843daf
1 parent 1bbacb9
commit a843daf
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 32 deletions.
diff --git a/.changeset/dull-hornets-stare.md 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
@@ -15,7 +15,8 @@
   import { getComponentClasses } from './theme.js';
 
   const dispatch = createEventDispatcher<{
-    close: { open: boolean };
+    close: null;
+    closeAttempt: null;
     open: null;
   }>();
 
@@ -63,15 +64,15 @@
         open = false;
       } else {
         // attempted close of persistent dialog
-        dispatch('close', { open });
+        dispatch('closeAttempt');
       }
     }
   }
 
   $: if (open) {
     dispatch('open');
   } else {
-    dispatch('close', { open });
+    dispatch('close');
   }
 </script>
 

diff --git 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,15 +40,15 @@
         open = false;
       } else {
         // attempted close of persistent dialog
-        dispatch('close', { open });
+        dispatch('closeAttempt');
       }
     }
   }
 
   $: if (open) {
     dispatch('open');
   } else {
-    dispatch('close', { open });
+    dispatch('close');
   }
 </script>
 

diff --git 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."
+        );
       }}
     >
       <div class="p-5">

diff --git 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 @@
       <Drawer
         open={showDrawer}
         persistent={isChanged}
-        on:close={({ detail }) => {
-          if (detail.open) {
-            openConfirmation();
-          } else {
-            closeDrawer();
-          }
-        }}
+        on:close={closeDrawer}
+        on:closeAttempt={openConfirmation}
         class="w-[400px]"
       >
         <div class="p-4">

diff --git 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 @@
 
         <Toggle let:on={open} let:toggle={toggleDialog} on:toggleOff={closeMenu}>
           <MenuItem on:click={toggleDialog}>Open Persistent Dialog...</MenuItem>
-          <Dialog {open} on:close={toggleDialog} persistent>
+          <Dialog {open} on:close={toggleDialog} persistent let:close>
             <div slot="title">Are you sure you want to do that?</div>
             <div slot="actions">
-              <Button variant="fill" color="primary">Close</Button>
+              <Button variant="fill" color="primary" on:click={() => close({ force: true })}>
+                Close
+              </Button>
             </div>
           </Dialog>
         </Toggle>
@@ -88,9 +90,9 @@
 
         <Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
           <MenuItem on:click={toggleDrawer}>Open Persistent Drawer...</MenuItem>
-          <Drawer {open} on:close={toggleOff} class="w-[400px]" persistent>
+          <Drawer {open} on:close={toggleOff} class="w-[400px]" persistent let:close>
             <div slot="actions">
-              <Button on:click={toggleOff}>Close</Button>
+              <Button on:click={() => close({ force: true })}>Close</Button>
             </div>
           </Drawer>
         </Toggle>

diff --git 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 @@
           <MenuItem on:click={toggleDialog}>Open Persistent Dialog...</MenuItem>
           <Dialog {open} on:close={toggleDialog} persistent>
             <div slot="title">Are you sure you want to do that?</div>
-            <div slot="actions">
-              <Button variant="fill" color="primary">Close</Button>
+            <div slot="actions" let:close>
+              <Button variant="fill" color="primary" on:click={() => close({ force: true })}>
+                Close
+              </Button>
             </div>
           </Dialog>
         </Toggle>
@@ -100,8 +102,8 @@
         <Toggle let:on={open} let:toggle={toggleDrawer} let:toggleOff on:toggleOff={closeMenu}>
           <MenuItem on:click={toggleDrawer}>Open Persistent Drawer...</MenuItem>
           <Drawer {open} on:close={toggleOff} class="w-[400px]" persistent>
-            <div slot="actions">
-              <Button on:click={toggleOff}>Close</Button>
+            <div slot="actions" let:close>
+              <Button on:click={() => close({ force: true })}>Close</Button>
             </div>
           </Drawer>
         </Toggle>