inertiax-ui 0.0.15 → 0.0.17

package/Modal.svelte

@@ -16,27 +16,31 @@
   export function createModal(props) {
     const onclose = props.onclose || (() => {})
     let modal = null
-    function close() {
-      unmount(modal, { outro: true })
-      onclose()
+    let traverseBack = null
+    function close(traverse = true) {
+      if (traverse && traverseBack) {
+        traverseBack()
+      } else {
+        unmount(modal, { outro: true })
+        onclose()
+      }
     }
-    push(function(traverseBack) {
+    push(function(tb) {
+      traverseBack = tb
       modal = mount(Modal, { 
         target: document.body,
         props: {
           ...props,
-          close: function(traverse = true) {
-            traverse ? traverseBack() : close()
-          }
+          close
         }
       })
-      return close
+      return () => close(false)
     })
     return close
   }
 
 
- function css(node, { delay = 0 }) {
+  function css(node, { delay = 0 }) {
     // duration on desktop is 300, on mobile 400
     const duration = window.innerWidth > 768 ? 300 : 400;
     return {
@@ -53,14 +57,14 @@
 
 <script>
   import { fade } from 'svelte/transition';
-  const { src, close } = $props()
+  const { src, close, ...rest } = $props()
 </script>
 
 <div class="inx-modal_wrapper">
   <!-- svelte-ignore a11y_click_events_have_key_events,a11y_no_static_element_interactions -->
   <div class="inx-modal_bg" onclick={close} transition:fade={{duration: 200}}></div>
   <div class="inx-modal" aria-modal="true" scroll-region role="dialog" transition:css>
-    <Frame {src} {close} visitOptions={{ replace: false }} skipHistoryRestore>
+    <Frame {...rest} {src} {close} visitOptions={{ replace: false }} skipHistoryRestore>
       <div class="inx-spinner" ></div>
     </Frame>
     <nav>

package/README.md

@@ -22,13 +22,16 @@ const modal = createModal({
 })
 ```
 
-`createModal` returns a `close` function you can call to close the modal programmatically:
+`createModal` returns a `close` function you can call to close the modal programmatically. Call `close()` or `close(true)` to navigate back in history then unmount. Call `close(false)` to unmount without touching history:
 
 ```js
-const modal = createModal({ src: '/profile/edit' })
+const closeModal = createModal({ src: '/profile/edit' })
 
-// Later, close the modal
-modal()
+// Navigate back, then unmount
+closeModal()
+
+// Or just unmount, skip history
+closeModal(false)
 ```
 
 #### `modal` action
@@ -66,7 +69,7 @@ The Modal component passes a `close` function down to its page component as a pr
 <button onclick={close}>Close</button>
 ```
 
-Note that there is no `close` function on the modal instance itself as components aren't usually able to unmount themselves.
+Note that `createModal` also returns a `close` function you can call to close the modal programmatically from the parent.
 
 
 ### `onclose` callback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inertiax-ui",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "UI component library for Inertia X",
   "repository": {
     "type": "git",