inertiax-ui 0.0.14 → 0.0.16

package/Modal.svelte

@@ -15,27 +15,32 @@
 
   export function createModal(props) {
     const onclose = props.onclose || (() => {})
-    push(function(traverseBack) {
-      let modal = null
-      function close() {
+    let modal = null
+    let traverseBack = null
+    function close(traverse = true) {
+      if (traverse && traverseBack) {
+        traverseBack()
+      } else {
         unmount(modal, { outro: true })
         onclose()
       }
+    }
+    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 {

package/README.md

@@ -22,6 +22,18 @@ const modal = createModal({
 })
 ```
 
+`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 closeModal = createModal({ src: '/profile/edit' })
+
+// Navigate back, then unmount
+closeModal()
+
+// Or just unmount, skip history
+closeModal(false)
+```
+
 #### `modal` action
 
 Inertia X UI also ships with a `modal` action. This is a small wrapper for `createModal` and passes the `href` attribute as the `src` prop.
@@ -57,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
@@ -76,6 +88,38 @@ createModal({
 
 Common use cases: reloading the parent page after an edit, resetting form state, or cleaning up side effects.
 
+### Communicating with the parent
+
+All props passed to `createModal` (except `src`) are forwarded to the page component rendered inside the modal. This lets you pass callbacks that the modal page can call to communicate back to the parent.
+
+```js
+// In your parent component
+import { createModal } from 'inertiax-ui'
+
+createModal({
+  src: '/profile/edit',
+  onSave: (data) => {
+    console.log('Saved:', data)
+  }
+})
+```
+
+```svelte
+<!-- Inside the modal page (e.g. /profile/edit) -->
+<script>
+  const { onSave, close } = $props()
+
+  let name = $state('')
+</script>
+
+<button onclick={() => { onSave({ name }); close() }}>Save</button>
+```
+
+```js
+// Also works with the modal action
+<a href="/profile/edit" use:modal={{ onSave: (data) => handleSave(data) }}>Edit</a>
+```
+
 ## Installation
 
 To start using Inertia X UI, install the `inertiax-ui` package and import the CSS style you'd like to use.

package/package.json

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