inertiax-ui 0.0.4 → 0.0.5
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 +11 -8
- package/README.md +7 -4
- package/dark.css +18 -0
- package/package.json +1 -1
package/Modal.svelte
CHANGED
|
@@ -14,10 +14,12 @@
|
|
|
14
14
|
target: document.body,
|
|
15
15
|
props: {
|
|
16
16
|
src: href,
|
|
17
|
-
close:
|
|
17
|
+
close: function(traverse = true) {
|
|
18
|
+
traverse ? traverseBack() : unmount(modal, { outro: true })
|
|
19
|
+
}
|
|
18
20
|
}
|
|
19
21
|
})
|
|
20
|
-
return function
|
|
22
|
+
return function() {
|
|
21
23
|
unmount(modal, { outro: true })
|
|
22
24
|
}
|
|
23
25
|
})
|
|
@@ -32,10 +34,10 @@
|
|
|
32
34
|
delay,
|
|
33
35
|
duration,
|
|
34
36
|
easing: cubicOut,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
css: (t) => `--progress: ${t}`
|
|
37
|
+
tick: (t) => {
|
|
38
|
+
node.style.setProperty("--progress", t);
|
|
39
|
+
},
|
|
40
|
+
// css: (t) => `--progress: ${t}`
|
|
39
41
|
};
|
|
40
42
|
}
|
|
41
43
|
</script>
|
|
@@ -49,7 +51,9 @@
|
|
|
49
51
|
<!-- svelte-ignore a11y_click_events_have_key_events,a11y_no_static_element_interactions -->
|
|
50
52
|
<div class="inx-modal_bg" onclick={close} transition:fade={{duration: 200}}></div>
|
|
51
53
|
<div class="inx-modal" aria-modal="true" role="dialog" transition:css>
|
|
52
|
-
<Frame {src} {close}
|
|
54
|
+
<Frame {src} {close}>
|
|
55
|
+
<div class="inx-spinner" ></div>
|
|
56
|
+
</Frame>
|
|
53
57
|
<nav>
|
|
54
58
|
<button onclick={close} aria-label="Close modal">
|
|
55
59
|
<div class="i-material-symbols-light:close-rounded">Close</div>
|
|
@@ -57,4 +61,3 @@
|
|
|
57
61
|
</nav>
|
|
58
62
|
</div>
|
|
59
63
|
</div>
|
|
60
|
-
|
package/README.md
CHANGED
|
@@ -4,7 +4,10 @@ A collection of Svelte components for [Inertia X](https://github.com/buhrmi/iner
|
|
|
4
4
|
|
|
5
5
|
## Modal
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
The Modal component displays an [Inertia X Frame](https://github.com/buhrmi/inertiax#frame-component) within a modal. It can be created via the `modal` action.
|
|
9
|
+
|
|
10
|
+
|
|
8
11
|
|
|
9
12
|
### Opening a modal
|
|
10
13
|
|
|
@@ -18,7 +21,7 @@ The Modal component displays an [Inertia X Frame](https://github.com/buhrmi/iner
|
|
|
18
21
|
|
|
19
22
|
### Closing a modal
|
|
20
23
|
|
|
21
|
-
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.
|
|
24
|
+
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.
|
|
22
25
|
|
|
23
26
|
```svelte
|
|
24
27
|
<script>
|
|
@@ -28,9 +31,9 @@ The Modal component passes a `close` function down to its page component as a pr
|
|
|
28
31
|
<button onclick={close}>Close</button>
|
|
29
32
|
```
|
|
30
33
|
|
|
31
|
-
|
|
34
|
+
## Installation
|
|
32
35
|
|
|
33
|
-
Inertia X UI ships with a default dark style that displays the modal as a bottom sheet.
|
|
36
|
+
To start using Inertia X UI, install the `inertiax-ui` package and import the CSS style you'd like to use. Inertia X UI ships with a default dark style that displays the modal as a bottom sheet.
|
|
34
37
|
|
|
35
38
|
```js
|
|
36
39
|
import 'inertiax-ui/dark.css'
|
package/dark.css
CHANGED
|
@@ -52,3 +52,21 @@
|
|
|
52
52
|
border-radius: var(--inx-modal-radius, 2rem);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
+
|
|
56
|
+
.inx-spinner {
|
|
57
|
+
width: 32px;
|
|
58
|
+
height: 32px;
|
|
59
|
+
border: 2px solid #fff;
|
|
60
|
+
border-top-color: transparent;
|
|
61
|
+
border-radius: 50%;
|
|
62
|
+
animation: spin 1s linear infinite;
|
|
63
|
+
margin: auto;
|
|
64
|
+
position: absolute;
|
|
65
|
+
top: 50%;
|
|
66
|
+
left: 50%;
|
|
67
|
+
transform: translate(-50%, -50%);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes spin {
|
|
71
|
+
to { transform:translate(-50%, -50%) rotate(360deg); }
|
|
72
|
+
}
|