inertiax-ui 0.0.13 → 0.0.15

package/Modal.svelte

@@ -5,30 +5,34 @@
   import { cubicOut } from 'svelte/easing';
   import { push } from './history'
 
-  export function modal(node) {
+  export function modal(node, props) {
     node.addEventListener('click', (e) => {
       e.preventDefault()
       const href = node.getAttribute('href')
-      createModal({ src: href })
+      createModal({ src: href, ...props })
     })
   }
 
   export function createModal(props) {
+    const onclose = props.onclose || (() => {})
+    let modal = null
+    function close() {
+      unmount(modal, { outro: true })
+      onclose()
+    }
     push(function(traverseBack) {
-      console.log("mounting with state:", history.state)
-      const modal = mount(Modal, { 
+      modal = mount(Modal, { 
         target: document.body,
         props: {
           ...props,
           close: function(traverse = true) {
-            traverse ? traverseBack() : unmount(modal, { outro: true })
+            traverse ? traverseBack() : close()
           }
         }
       })
-      return function() {
-        unmount(modal, { outro: true })
-      }
+      return close
     })
+    return close
   }
 
 

package/README.md

@@ -22,6 +22,15 @@ const modal = createModal({
 })
 ```
 
+`createModal` returns a `close` function you can call to close the modal programmatically:
+
+```js
+const modal = createModal({ src: '/profile/edit' })
+
+// Later, close the modal
+modal()
+```
+
 #### `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.
@@ -34,6 +43,17 @@ Inertia X UI also ships with a `modal` action. This is a small wrapper for `crea
 <a href="/profile/edit" use:modal>Edit profile</a>
 ```
 
+You can also pass options like `onclose`:
+
+```svelte
+<script>
+  import { modal } from 'inertiax-ui'
+  import { router } from 'inertiax-svelte'
+</script>
+
+<a href="/profile/edit" use:modal={{ onclose: () => router.reload() }}>Edit profile</a>
+```
+
 ### Closing a modal
 
 The Modal component passes a `close` function down to its page component as a prop. You can call this function to close it. Behind the scenes, calling `close` will use the browsers Navigation API to traverse the history back to before the modal was opened, which in turn triggers callbacks that unmount the modal. Alternatively, you can call `close(false)` to close the modal without going back in history. This will prevent forward-navigation from re-opening the modal.
@@ -48,6 +68,55 @@ The Modal component passes a `close` function down to its page component as a pr
 
 Note that there is no `close` function on the modal instance itself as components aren't usually able to unmount themselves.
 
+
+### `onclose` callback
+
+Pass an `onclose` callback to run custom logic when the modal closes. This fires regardless of how the modal was closed — via the close button, backdrop click, or browser back button.
+
+```js
+import { createModal } from 'inertiax-ui'
+import { router } from 'inertiax-svelte'
+
+createModal({
+  src: '/profile/edit',
+  onclose: () => router.reload()
+})
+```
+
+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.13",
+  "version": "0.0.15",
   "description": "UI component library for Inertia X",
   "repository": {
     "type": "git",