inertiax-ui 0.0.14 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Modal.svelte +6 -5
- package/README.md +41 -0
- package/package.json +1 -1
package/Modal.svelte
CHANGED
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
|
|
16
16
|
export function createModal(props) {
|
|
17
17
|
const onclose = props.onclose || (() => {})
|
|
18
|
+
let modal = null
|
|
19
|
+
function close() {
|
|
20
|
+
unmount(modal, { outro: true })
|
|
21
|
+
onclose()
|
|
22
|
+
}
|
|
18
23
|
push(function(traverseBack) {
|
|
19
|
-
let modal = null
|
|
20
|
-
function close() {
|
|
21
|
-
unmount(modal, { outro: true })
|
|
22
|
-
onclose()
|
|
23
|
-
}
|
|
24
24
|
modal = mount(Modal, {
|
|
25
25
|
target: document.body,
|
|
26
26
|
props: {
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
})
|
|
33
33
|
return close
|
|
34
34
|
})
|
|
35
|
+
return close
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
|
package/README.md
CHANGED
|
@@ -22,6 +22,15 @@ const modal = createModal({
|
|
|
22
22
|
})
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
`createModal` returns a `close` function you can call to close the modal programmatically:
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
const modal = createModal({ src: '/profile/edit' })
|
|
29
|
+
|
|
30
|
+
// Later, close the modal
|
|
31
|
+
modal()
|
|
32
|
+
```
|
|
33
|
+
|
|
25
34
|
#### `modal` action
|
|
26
35
|
|
|
27
36
|
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.
|
|
@@ -76,6 +85,38 @@ createModal({
|
|
|
76
85
|
|
|
77
86
|
Common use cases: reloading the parent page after an edit, resetting form state, or cleaning up side effects.
|
|
78
87
|
|
|
88
|
+
### Communicating with the parent
|
|
89
|
+
|
|
90
|
+
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.
|
|
91
|
+
|
|
92
|
+
```js
|
|
93
|
+
// In your parent component
|
|
94
|
+
import { createModal } from 'inertiax-ui'
|
|
95
|
+
|
|
96
|
+
createModal({
|
|
97
|
+
src: '/profile/edit',
|
|
98
|
+
onSave: (data) => {
|
|
99
|
+
console.log('Saved:', data)
|
|
100
|
+
}
|
|
101
|
+
})
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
```svelte
|
|
105
|
+
<!-- Inside the modal page (e.g. /profile/edit) -->
|
|
106
|
+
<script>
|
|
107
|
+
const { onSave, close } = $props()
|
|
108
|
+
|
|
109
|
+
let name = $state('')
|
|
110
|
+
</script>
|
|
111
|
+
|
|
112
|
+
<button onclick={() => { onSave({ name }); close() }}>Save</button>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
// Also works with the modal action
|
|
117
|
+
<a href="/profile/edit" use:modal={{ onSave: (data) => handleSave(data) }}>Edit</a>
|
|
118
|
+
```
|
|
119
|
+
|
|
79
120
|
## Installation
|
|
80
121
|
|
|
81
122
|
To start using Inertia X UI, install the `inertiax-ui` package and import the CSS style you'd like to use.
|