inertiax-ui 0.0.1 → 0.0.3

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.
Files changed (4) hide show
  1. package/Modal.svelte +20 -55
  2. package/README.md +32 -2
  3. package/dark.css +53 -0
  4. package/package.json +8 -2
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
- const modal = mount(Modal, {
12
- target: document.body,
13
- props: {
14
- src: href,
15
- close: () => {
16
- unmount(modal, {outro: true})
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 variable(node, { delay = 0 }) {
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
- node.style.setProperty("--progress", t);
33
- },
34
- // css: (t) => `--transition: ${t}`
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,scale } from 'svelte/transition';
44
+ import { fade,fly } from 'svelte/transition';
41
45
  const { src, close } = $props()
42
46
  </script>
43
47
 
44
- <div class="modal_wrapper">
48
+ <div class="inx-modal_wrapper">
45
49
  <!-- svelte-ignore a11y_click_events_have_key_events,a11y_no_static_element_interactions -->
46
- <div class="modal_bg" onclick={close} transition:fade></div>
47
- <div class="modal layout" aria-modal="true" role="dialog" transition:variable>
48
- <Frame {src} />
50
+ <div class="inx-modal_bg" onclick={close} transition:fade></div>
51
+ <div class="inx-modal" 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>
@@ -54,42 +58,3 @@
54
58
  </div>
55
59
  </div>
56
60
 
57
- <style>
58
- .modal_wrapper {
59
-
60
- }
61
- .modal_bg {
62
- background: rgba(0, 0, 0, 0.7);
63
- position: absolute;
64
- top: 0;
65
- left: 0;
66
- width: 100%;
67
- height: 100%;
68
- /* z-index: -1; */
69
- }
70
- nav {
71
- grid-area: header;
72
- display: flex;
73
- justify-content: flex-end;
74
- button {
75
- font-size: 1.5rem;
76
-
77
- }
78
- }
79
- .modal {
80
- position: fixed;
81
- bottom: 0;
82
- transform: translateY(calc((1 - var(--progress)) * 100%));
83
- background-color: #00000022;
84
- border: 1px solid #333;
85
- border-top-left-radius: 2rem;
86
- border-top-right-radius: 2rem;
87
- backdrop-filter: blur(8px);
88
- }
89
-
90
- @media (min-width: 640px) {
91
- .modal {
92
- max-width: 400px;
93
- }
94
- }
95
- </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,32 @@ 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>
29
+ ```
30
+
31
+ ### Styling
32
+
33
+ Inertia X UI ships with a default dark style that displays the modal as a bottom sheet.
34
+
35
+ ```js
36
+ import 'inertiax-ui/dark.css'
37
+ ```
38
+
39
+ For full control, you can of course bring your own CSS styling. The key classes to target are:
40
+
41
+ | Class | Element |
42
+ |-------|---------|
43
+ | `.inx-modal_wrapper` | Full-screen overlay container |
44
+ | `.inx-modal_bg` | Clickable backdrop |
45
+ | `.inx-modal` | The modal panel itself |
package/dark.css ADDED
@@ -0,0 +1,53 @@
1
+ /* InertiaX UI — Modal styles */
2
+ /* Import this file to get the default modal styling, or use it as a base to override. */
3
+
4
+ .inx-modal_wrapper {
5
+ display: grid;
6
+ place-items: center;
7
+ position: fixed;
8
+ top: 0;
9
+ left: 0;
10
+ width: 100%;
11
+ height: 100%;
12
+ }
13
+
14
+ .inx-modal_bg {
15
+ position: absolute;
16
+ background: var(--inx-modal-backdrop, rgba(0, 0, 0, 0.7));
17
+ top: 0;
18
+ left: 0;
19
+ width: 100%;
20
+ height: 100%;
21
+ }
22
+
23
+ .inx-modal nav {
24
+ grid-area: header;
25
+ display: flex;
26
+ justify-content: flex-end;
27
+ }
28
+
29
+ .inx-modal nav button {
30
+ font-size: 1.5rem;
31
+ }
32
+
33
+ .inx-modal {
34
+ position: fixed;
35
+ bottom: 0;
36
+ transform: translateY(calc((1 - var(--progress)) * 100%));
37
+ background-color: var(--inx-modal-bg, rgba(0, 0, 0, 0.13));
38
+ border: 1px solid var(--inx-modal-border, #333);
39
+ border-top-left-radius: var(--inx-modal-radius, 2rem);
40
+ border-top-right-radius: var(--inx-modal-radius, 2rem);
41
+ backdrop-filter: blur(var(--inx-modal-blur, 8px));
42
+ min-height: var(--inx-modal-min-height, 70%);
43
+ }
44
+
45
+ @media (min-width: 640px) {
46
+ .inx-modal {
47
+ max-width: var(--inx-modal-max-width, 400px);
48
+ position: static;
49
+ transform: scale(calc(var(--progress) * 0.3 + 0.7));
50
+ opacity: var(--progress);
51
+ border-radius: var(--inx-modal-radius, 2rem);
52
+ }
53
+ }
package/package.json CHANGED
@@ -1,7 +1,11 @@
1
1
  {
2
2
  "name": "inertiax-ui",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
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",
@@ -11,11 +15,13 @@
11
15
  "svelte": "./Modal.svelte",
12
16
  "default": "./index.js"
13
17
  },
14
- "./Modal.svelte": "./Modal.svelte"
18
+ "./Modal.svelte": "./Modal.svelte",
19
+ "./dark.css": "./dark.css"
15
20
  },
16
21
  "files": [
17
22
  "index.js",
18
23
  "Modal.svelte",
24
+ "dark.css",
19
25
  "index.d.ts"
20
26
  ],
21
27
  "peerDependencies": {