@xoong/ui 0.0.42 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xoong/ui",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "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",
@@ -10,6 +10,7 @@
       "default": "./src/index.js"
     },
     "./table": "./src/table.js",
+    "./pager": "./src/pager.js",
     "./form": "./src/form.js",
     "./dialog": "./src/dialog.js",
     "./toast": "./src/toast.js",
@@ -20,9 +21,9 @@
   "sideEffects": true,
   "license": "MIT",
   "dependencies": {
-    "@xoong/core": "0.0.42",
-    "@xoong/data": "0.0.42",
-    "@xoong/forms": "0.0.42"
+    "@xoong/core": "0.0.43",
+    "@xoong/data": "0.0.43",
+    "@xoong/forms": "0.0.43"
   },
   "files": [
     "src"

package/src/index.js

@@ -1,6 +1,7 @@
 // Importing the package registers every element of the admin set.
 import '@xoong/forms'; // every <form xo-submit> (and <xo-form>) uses the schema-driven form model
 import './table.js';
+import './pager.js';
 import './form.js';
 import './dialog.js';
 import './toast.js';

package/src/mist.css

@@ -1468,6 +1468,30 @@
   .xo-file-list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--xo-color-border); border-radius: var(--xo-radius); background: var(--xo-color-surface); font-size: 14px; }
   .xo-file-list li img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
   .xo-file-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .xo-kpi { display: grid; gap: 6px; }
+  .xo-kpi__label { font-size: 13px; color: var(--xo-color-text-2); }
+  .xo-kpi__value { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--xo-color-text); font-variant-numeric: tabular-nums; }
+  .xo-kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--xo-color-success) 55%, var(--xo-color-text)); }
+  .xo-kpi__delta[data-good="false"], .xo-kpi__delta[data-trend="down"] { color: var(--xo-color-danger); }
+  .xo-kpi__delta .ic, .xo-kpi__delta .icon { --xo-icon: 14px; width: 14px; height: 14px; }
+  .xo-kpi__spark { display: block; width: 100%; height: 32px; margin-top: 4px; color: var(--xo-color-accent); }
+  .xo-kpi__spark path { fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+  .xo-spinner { display: inline-block; box-sizing: border-box; animation: xo-spinner .8s linear infinite; }
+  @media (prefers-reduced-motion: reduce) {
+    .xo-spinner { animation-duration: 2.4s; }
+  }
+  xo-progress[data-state="indeterminate"] .xo-progress > i, .xo-progress[data-state="indeterminate"] > i { animation: xo-progress-slide 1.4s ease-in-out infinite; }
+  @keyframes xo-progress-slide {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(250%); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    xo-progress[data-state="indeterminate"] .xo-progress > i, .xo-progress[data-state="indeterminate"] > i { animation: none; opacity: .45; }
+  }
+  .xo-inline-edit__text { min-width: 0; overflow-wrap: anywhere; }
+  .xo-inline-edit input { width: min(100%, 28ch); min-width: 12ch; height: 36px; min-height: 0; padding: 0 10px; font: inherit; color: var(--xo-color-text); background: var(--xo-color-surface); border: 1px solid var(--xo-color-accent); border-radius: var(--xo-radius); outline: var(--xo-focus); }
+  .xo-inline-edit .xo-inline-edit__text + button { opacity: .7; }
+  .xo-inline-edit:hover .xo-inline-edit__text + button, .xo-inline-edit .xo-inline-edit__text + button:focus-visible { opacity: 1; }
 
   /* ---- 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/pager.js

@@ -0,0 +1,34 @@
+// @ts-check
+/**
+ * <xo-pager page-size="12" page-sizes="12,24,48"></xo-pager>: Previous and Next for any list in the enclosing <xo-view> (a tile grid, a thread
+ * list), the same pager <xo-table page-size> draws under its table.
+ *
+ * - page-size: rows per page; sets `limit`, and the buttons change `offset`. The operation must declare `limit` and `offset`, and the response
+ *   needs a `total` field for the "1–12 of 48" text and for the end of the list.
+ * - page-sizes="12,24,48": a rows-per-page choice.
+ * - Draws `nav.xo-pager` (`span.xo-range`, `select.xo-page-size`, two buttons); Previous shows while `$hasPrev`, Next while `$hasNext`.
+ */
+import { defineTemplate } from '@xoong/data/view';
+
+const esc = (/** @type {string} */ s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c] ?? c);
+
+/** The pager markup (also used by <xo-table>). @param {{ pageSize: number, sizes?: string[] }} options */
+export function pagerMarkup({ pageSize, sizes = [] }) {
+  return `
+<nav class="xo-pager" aria-label="Pagination" xo-t="aria-label:xoong.table.pagination">
+  <span class="xo-range" xo-if="total" xo-t="xoong.table.range">{$from}–{$to} of {total}</span>${sizes.length ? `
+  <select class="xo-page-size" xo-param="limit" aria-label="Rows per page" xo-t="aria-label:xoong.table.rowsPerPage">${sizes.map((s) => `<option value="${esc(s)}">${esc(s)}</option>`).join('')}</select>` : ''}
+  <button type="button" xo-if="$hasPrev" xo-param="offset-=${pageSize}" xo-t="xoong.table.previous">Previous</button>
+  <button type="button" xo-if="$hasNext" xo-param="offset+=${pageSize}" xo-t="xoong.table.next">Next</button>
+</nav>`;
+}
+
+defineTemplate('xo-pager', (el, { host }) => {
+  const pageSize = Number(el.getAttribute('page-size')) || 25;
+  if (host.params.limit == null) host.params = { ...host.params, limit: pageSize }; // the view asks for one page
+  const sizes = (el.getAttribute('page-sizes') || '').split(',').map((s) => s.trim()).filter(Boolean);
+  const box = document.createElement('div');
+  box.style.display = 'contents'; // the pager sits where the element was, in the layout of its parent
+  box.innerHTML = pagerMarkup({ pageSize, sizes });
+  return box;
+});

package/src/table.js

@@ -23,6 +23,7 @@
  * The operation must declare those query parameters; `xoong check` reports it when it does not (XO250).
  */
 import { defineTemplate } from '@xoong/data/view';
+import { pagerMarkup } from './pager.js';
 
 const esc = (s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
 
@@ -68,12 +69,6 @@ defineTemplate('xo-table', (el, { host }) => {
   <thead><tr>${tickAll}${head}${actions ? '<th scope="col"><span class="xo-visually-hidden" xo-t="xoong.table.actions">Actions</span></th>' : ''}</tr></thead>
   <tbody><tr xo-each="${esc(of)}">${tickRow}${cells}${actions ?`<td class="xo-actions">${actions}</td>` : ''}</tr></tbody>
 </table>${empty ? `
-<div class="xo-empty" xo-if="!${esc(of)}"><div xo-if="!$loading"><div xo-if="!$error">${empty}</div></div></div>` : ''}${pageSize ? `
-<nav class="xo-pager" aria-label="Pagination" xo-t="aria-label:xoong.table.pagination">
-  <span class="xo-range" xo-if="total" xo-t="xoong.table.range">{$from}–{$to} of {total}</span>${sizes.length ? `
-  <select class="xo-page-size" xo-param="limit" aria-label="Rows per page" xo-t="aria-label:xoong.table.rowsPerPage">${sizes.map((s) => `<option value="${esc(s)}">${esc(s)}</option>`).join('')}</select>` : ''}
-  <button type="button" xo-if="$hasPrev" xo-param="offset-=${pageSize}" xo-t="xoong.table.previous">Previous</button>
-  <button type="button" xo-if="$hasNext" xo-param="offset+=${pageSize}" xo-t="xoong.table.next">Next</button>
-</nav>` : ''}`;
+<div class="xo-empty" xo-if="!${esc(of)}"><div xo-if="!$loading"><div xo-if="!$error">${empty}</div></div></div>` : ''}${pageSize ? pagerMarkup({ pageSize, sizes }) : ''}`;
   return box;
 });