@xoong/ui 0.0.36 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xoong/ui",
-  "version": "0.0.36",
+  "version": "0.0.39",
   "description": "xoong admin set: xoong.css tokens, <xo-table>, <xo-form>, <xo-dialog>, toast, confirm and a declarative History-API router. Depends on @xoong/core, @xoong/data and @xoong/forms.",
   "type": "module",
   "main": "src/index.js",
@@ -20,9 +20,9 @@
   "sideEffects": true,
   "license": "MIT",
   "dependencies": {
-    "@xoong/core": "0.0.36",
-    "@xoong/data": "0.0.36",
-    "@xoong/forms": "0.0.36"
+    "@xoong/core": "0.0.39",
+    "@xoong/data": "0.0.39",
+    "@xoong/forms": "0.0.39"
   },
   "files": [
     "src"

package/src/mist.css

@@ -1329,6 +1329,40 @@
   xo-copy .xo-copyfield input { background: var(--xo-color-subtle); }
   .xo-input-wrap button.xo-input-end, xo-password button.xo-input-end { position: absolute; right: 4px; top: 50%; translate: 0 -50%; }
   .xo-input-wrap button.xo-date-open { position: absolute; }
+  xo-image {
+    border-radius: var(--xo-radius);
+    background: var(--xo-color-subtle);
+  }
+  xo-image[data-state="loading"] {
+    background: linear-gradient(100deg, var(--xo-color-subtle) 30%, var(--xo-color-border) 50%, var(--xo-color-subtle) 70%) 0 0 / 300% 100%;
+    animation: xo-image-shimmer 1.4s linear infinite;
+  }
+  @keyframes xo-image-shimmer { to { background-position: -150% 0; } }
+  @media (prefers-reduced-motion: reduce) {
+    xo-image[data-state="loading"] { animation: none; background: var(--xo-color-subtle); }
+  }
+  xo-image[data-state="empty"]::before, xo-image .xo-image-note::before {
+    content: "";
+    inline-size: 24px;
+    block-size: 24px;
+    background: currentcolor;
+    mask: var(--ic-image) center / contain no-repeat;
+    -webkit-mask: var(--ic-image) center / contain no-repeat;
+  }
+  xo-image[data-state="empty"] {
+    display: grid;
+    place-items: center;
+    color: var(--xo-color-text-2);
+  }
+  xo-image .xo-image-note {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--xo-color-text-2);
+  }
 
   /* ---- skin ---- */
   :root { --shadow-sm: 0 1px 2px color-mix(in srgb, var(--xo-color-text) 6%, transparent); --shadow-float: 0 12px 32px color-mix(in srgb, var(--xo-color-text) 14%, transparent), 0 2px 6px color-mix(in srgb, var(--xo-color-text) 8%, transparent); --xo-shadow-pop: var(--shadow-float); --xo-shadow-raised: none; --xo-focus: 2px solid var(--xo-color-accent); --xo-focus-thin: 2px solid var(--xo-color-accent); }

package/src/router.js

@@ -60,6 +60,11 @@ class XoRouter extends XoElement {
   #scrolls = new Map();
   /** Forms with unsaved changes (they announce it with `xo-dirty`); leaving the page asks first, unless the form says `xo-guard="off"`. */
   #dirtyForms = new Set();
+  // xo-then on a button or form: the data layer asks the page to go on to another path
+  #onGo = (/** @type {Event} */ e) => {
+    e.preventDefault();
+    this.navigate(/** @type {CustomEvent} */ (e).detail.path).catch?.((err) => this.#report(err));
+  };
   #onDirty = (/** @type {Event} */ e) => {
     const form = /** @type {Element} */ (e.target);
     if (/** @type {any} */ (e).detail?.dirty && form.getAttribute('xo-guard') !== 'off') this.#dirtyForms.add(form); else this.#dirtyForms.delete(form);
@@ -82,6 +87,7 @@ class XoRouter extends XoElement {
   disconnected() {
     document.removeEventListener('click', this.#onClick);
     document.removeEventListener('xo-dirty', this.#onDirty);
+    this.removeEventListener('xo-go', this.#onGo);
     window.removeEventListener('popstate', this.#onPop);
     window.removeEventListener('beforeunload', this.#onUnload);
     setUrlSync(null);
@@ -128,6 +134,7 @@ class XoRouter extends XoElement {
     this.#pos = window.history.state?.xoPos ?? 0;
     document.addEventListener('click', this.#onClick);
     document.addEventListener('xo-dirty', this.#onDirty);
+    this.addEventListener('xo-go', this.#onGo);
     window.addEventListener('popstate', this.#onPop);
     window.addEventListener('beforeunload', this.#onUnload);
     this.#vetoes.push(async () => { // a dirty form asks before the page is left (links, Back, navigate)