inertiax-ui 0.0.4 → 0.0.6

package/Modal.svelte

@@ -9,18 +9,24 @@
     node.addEventListener('click', (e) => {
       e.preventDefault()
       const href = node.getAttribute('href')
-      push(function(traverseBack) {
-        const modal = mount(Modal, { 
-          target: document.body,
-          props: {
-            src: href,
-            close: traverseBack
+      createModal({ src: href })
+    })
+  }
+
+  export function createModal(props) {
+    push(function(traverseBack) {
+      const modal = mount(Modal, { 
+        target: document.body,
+        props: {
+          ...props,
+          close: function(traverse = true) {
+            traverse ? traverseBack() : unmount(modal, { outro: true })
           }
-        })
-        return function () {
-          unmount(modal, { outro: true })
         }
       })
+      return function() {
+        unmount(modal, { outro: true })
+      }
     })
   }
 
@@ -32,10 +38,10 @@
       delay,
       duration,
       easing: cubicOut,
-      // tick: (t) => {
-      //   node.style.setProperty("--progress", t);
-      // },
-      css: (t) => `--progress: ${t}`
+      tick: (t) => {
+        node.style.setProperty("--progress", t);
+      },
+      // css: (t) => `--progress: ${t}`
     };
   }
 </script>
@@ -49,7 +55,9 @@
   <!-- svelte-ignore a11y_click_events_have_key_events,a11y_no_static_element_interactions -->
   <div class="inx-modal_bg" onclick={close} transition:fade={{duration: 200}}></div>
   <div class="inx-modal" aria-modal="true" role="dialog" transition:css>
-    <Frame {src} {close} />
+    <Frame {src} {close}>
+      <div class="inx-spinner" ></div>
+    </Frame>
     <nav>
       <button onclick={close} aria-label="Close modal">
         <div class="i-material-symbols-light:close-rounded">Close</div>
@@ -57,4 +65,3 @@
     </nav>
   </div>
 </div>
-

package/README.md

@@ -4,9 +4,25 @@ A collection of Svelte components for [Inertia X](https://github.com/buhrmi/iner
 
 ## Modal
 
-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:
+The Modal component displays an [Inertia X Frame](https://github.com/buhrmi/inertiax#frame-component) within a modal.
 
-### Opening a modal
+![dark.css demo](./dark.css.webp)
+
+### Creating a modal
+
+You can programmatically create a Modal using the `createModal(props)` function. All passed props are handed down to the Frame component, in addition to a `close` function (see below). 
+
+```js
+import { createModal } from 'inertiax-ui'
+
+const modal = createModal({
+  src: '/profile/edit'
+})
+```
+
+#### `modal` action
+
+The easiest way to create a modal is to use the `modal` action. This will automatically mount a Modal component in the document root.
 
 ```svelte
 <script>
@@ -18,7 +34,7 @@ The Modal component displays an [Inertia X Frame](https://github.com/buhrmi/iner
 
 ### 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.
+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.
 
 ```svelte
 <script>
@@ -28,18 +44,27 @@ The Modal component passes a `close` function down to its page component as a pr
 <button onclick={close}>Close</button>
 ```
 
+Note that there is no `close` function on the modal instance itself as components aren't usually able to unmount themselves.
+
+## Installation
+
+To start using Inertia X UI, install the `inertiax-ui` package and import the CSS style you'd like to use.
+
 ### Styling
 
-Inertia X UI ships with a default dark style that displays the modal as a bottom sheet.
+Inertia X UI ships with a default [dark.css](./dark.css) style that displays the modal as a bottom sheet.
 
 ```js
 import 'inertiax-ui/dark.css'
 ```
 
-For full control, you can of course bring your own CSS styling. The key classes to target are:
+For full styling control, you can of course bring your own CSS. The key classes to target are:
 
 | Class | Element |
 |-------|---------|
 | `.inx-modal_wrapper` | Full-screen overlay container |
 | `.inx-modal_bg` | Clickable backdrop |
-| `.inx-modal` | The modal panel itself |
+| `.inx-modal` | The modal panel itself |
+| `.inx-spinner` | The loading animation spinner |
+
+Additionally, Svelte injects a `--progress` variable with the current progress of the modal in- and out-transition (0 to 1). You can use it to create your own in- and out-transitions.

package/dark.css

@@ -52,3 +52,21 @@
     border-radius: var(--inx-modal-radius, 2rem);
   }
 }
+
+.inx-spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid #fff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes spin {
+  to { transform:translate(-50%, -50%) rotate(360deg); }
+}

package/index.js

@@ -1 +1 @@
-export { default as Modal } from './Modal.svelte';
+export { default as Modal, modal, createModal } from './Modal.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inertiax-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "UI component library for Inertia X",
   "repository": {
     "type": "git",