inertiax-ui 0.0.5 → 0.0.7

package/Modal.svelte

@@ -9,20 +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: function(traverse = true) {
-              traverse ? traverseBack() : unmount(modal, { outro: true })
-            }
+      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 })
+      }
     })
   }
 

package/README.md

@@ -4,12 +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. Here you can see the included default style (dark.css), which renders as a bottom sheet on mobile, and centered on the page on desktop.
 
 ![dark.css demo](./dark.css.webp)
 
-### Opening a modal
+### 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
+
+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.
 
 ```svelte
 <script>
@@ -31,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. Inertia X UI ships with a default dark style that displays the modal as a bottom sheet.
+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.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/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.5",
+  "version": "0.0.7",
   "description": "UI component library for Inertia X",
   "repository": {
     "type": "git",