inertiax-ui 0.0.1 → 0.0.2
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 +31 -16
- package/README.md +15 -2
- package/package.json +5 -1
package/Modal.svelte
CHANGED
|
@@ -3,49 +3,53 @@
|
|
|
3
3
|
import { Frame } from 'inertiax-svelte'
|
|
4
4
|
import Modal from './Modal.svelte';
|
|
5
5
|
import { cubicOut } from 'svelte/easing';
|
|
6
|
+
import { push } from './history'
|
|
6
7
|
|
|
7
8
|
export function modal(node) {
|
|
8
9
|
node.addEventListener('click', (e) => {
|
|
9
10
|
e.preventDefault()
|
|
10
11
|
const href = node.getAttribute('href')
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
push(function(traverseBack) {
|
|
13
|
+
const modal = mount(Modal, {
|
|
14
|
+
target: document.body,
|
|
15
|
+
props: {
|
|
16
|
+
src: href,
|
|
17
|
+
close: traverseBack
|
|
17
18
|
}
|
|
19
|
+
})
|
|
20
|
+
return function () {
|
|
21
|
+
unmount(modal, { outro: true })
|
|
18
22
|
}
|
|
19
23
|
})
|
|
20
24
|
})
|
|
21
25
|
}
|
|
22
26
|
|
|
23
27
|
|
|
24
|
-
function
|
|
28
|
+
function css(node, { delay = 0 }) {
|
|
25
29
|
// duration on desktop is 300, on mobile 400
|
|
26
30
|
const duration = window.innerWidth > 768 ? 300 : 400;
|
|
27
31
|
return {
|
|
28
32
|
delay,
|
|
29
33
|
duration,
|
|
30
34
|
easing: cubicOut,
|
|
31
|
-
tick: (t) => {
|
|
32
|
-
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
+
// tick: (t) => {
|
|
36
|
+
// node.style.setProperty("--progress", t);
|
|
37
|
+
// },
|
|
38
|
+
css: (t) => `--progress: ${t}`
|
|
35
39
|
};
|
|
36
40
|
}
|
|
37
41
|
</script>
|
|
38
42
|
|
|
39
43
|
<script>
|
|
40
|
-
import { fade,
|
|
44
|
+
import { fade,fly } from 'svelte/transition';
|
|
41
45
|
const { src, close } = $props()
|
|
42
46
|
</script>
|
|
43
47
|
|
|
44
48
|
<div class="modal_wrapper">
|
|
45
49
|
<!-- svelte-ignore a11y_click_events_have_key_events,a11y_no_static_element_interactions -->
|
|
46
50
|
<div class="modal_bg" onclick={close} transition:fade></div>
|
|
47
|
-
<div class="modal layout" aria-modal="true" role="dialog" transition:
|
|
48
|
-
<Frame {src} />
|
|
51
|
+
<div class="modal layout" aria-modal="true" role="dialog" transition:css>
|
|
52
|
+
<Frame {src} {close} />
|
|
49
53
|
<nav>
|
|
50
54
|
<button onclick={close} aria-label="Close modal">
|
|
51
55
|
<div class="i-material-symbols-light:close-rounded">Close</div>
|
|
@@ -56,11 +60,17 @@
|
|
|
56
60
|
|
|
57
61
|
<style>
|
|
58
62
|
.modal_wrapper {
|
|
59
|
-
|
|
63
|
+
display: grid;
|
|
64
|
+
place-items: center;
|
|
65
|
+
position: fixed;
|
|
66
|
+
top: 0;
|
|
67
|
+
left: 0;
|
|
68
|
+
width: 100%;
|
|
69
|
+
height: 100%;
|
|
60
70
|
}
|
|
61
71
|
.modal_bg {
|
|
62
|
-
background: rgba(0, 0, 0, 0.7);
|
|
63
72
|
position: absolute;
|
|
73
|
+
background: rgba(0, 0, 0, 0.7);
|
|
64
74
|
top: 0;
|
|
65
75
|
left: 0;
|
|
66
76
|
width: 100%;
|
|
@@ -85,11 +95,16 @@ nav {
|
|
|
85
95
|
border-top-left-radius: 2rem;
|
|
86
96
|
border-top-right-radius: 2rem;
|
|
87
97
|
backdrop-filter: blur(8px);
|
|
98
|
+
min-height: 70%;
|
|
88
99
|
}
|
|
89
100
|
|
|
90
101
|
@media (min-width: 640px) {
|
|
91
102
|
.modal {
|
|
92
103
|
max-width: 400px;
|
|
104
|
+
position: static;
|
|
105
|
+
transform: scale(calc(var(--progress) * 0.3 + 0.7));
|
|
106
|
+
opacity: var(--progress);
|
|
107
|
+
border-radius: 2rem;
|
|
93
108
|
}
|
|
94
109
|
}
|
|
95
110
|
</style>
|
package/README.md
CHANGED
|
@@ -4,7 +4,9 @@ A collection of Svelte components for [Inertia X](https://github.com/buhrmi/iner
|
|
|
4
4
|
|
|
5
5
|
## Modal
|
|
6
6
|
|
|
7
|
-
The Modal component displays an Inertia X Frame within a modal. It can be created via the `modal` action:
|
|
7
|
+
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:
|
|
8
|
+
|
|
9
|
+
### Opening a modal
|
|
8
10
|
|
|
9
11
|
```svelte
|
|
10
12
|
<script>
|
|
@@ -12,4 +14,15 @@ The Modal component displays an Inertia X Frame within a modal. It can be create
|
|
|
12
14
|
</script>
|
|
13
15
|
|
|
14
16
|
<a href="/profile/edit" use:modal>Edit profile</a>
|
|
15
|
-
```
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Closing a modal
|
|
20
|
+
|
|
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.
|
|
22
|
+
|
|
23
|
+
```svelte
|
|
24
|
+
<script>
|
|
25
|
+
const { close } = $props()
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<button onclick={close}>Close</button>
|
package/package.json
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "inertiax-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "UI component library for Inertia X",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "git+https://github.com/buhrmi/inertiax-ui.git"
|
|
8
|
+
},
|
|
5
9
|
"type": "module",
|
|
6
10
|
"svelte": "./Modal.svelte",
|
|
7
11
|
"main": "./index.js",
|