@xoong/ui 0.0.42 → 0.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xoong/ui",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "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.44",
+    "@xoong/data": "0.0.44",
+    "@xoong/forms": "0.0.44"
   },
   "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

@@ -1375,6 +1375,8 @@
   .xo-input-wrap button.xo-date-open { position: absolute; }
   xo-image {
     border-radius: var(--xo-radius);
+  }
+  xo-image[data-state="empty"], xo-image[data-state="error"] {
     background: var(--xo-color-subtle);
   }
   xo-image[data-state="loading"] {
@@ -1468,6 +1470,7 @@
   .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-menu:not(:defined) > :not([xo-menu-trigger]) { display: none; }
 
   /* ---- 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;
 });

package/src/xoong.css

@@ -112,7 +112,7 @@
   .xo-table .xo-actions > * + * { margin-inline-start: var(--xo-space-2); }
   .xo-bulk { display: flex; align-items: center; gap: var(--xo-space-2); padding: var(--xo-space-2); background: var(--xo-color-bg); border-bottom: 1px solid var(--xo-color-border); }
   .xo-filters { display: flex; flex-wrap: wrap; gap: var(--xo-space-2); padding: var(--xo-space-2); border-bottom: 1px solid var(--xo-color-border); }
-  .xo-toast { position: fixed; inset-block-end: var(--xo-space-4); inset-inline-end: var(--xo-space-4); max-width: 24rem; margin: 0; padding: var(--xo-space-2) var(--xo-space-3); color: var(--xo-color-danger); background: var(--xo-color-surface); border: 1px solid var(--xo-color-danger); border-radius: var(--xo-radius); }
+  .xo-toast { z-index: var(--xo-z-toast, 60); position: fixed; inset-block-end: var(--xo-space-4); inset-inline-end: var(--xo-space-4); max-width: 24rem; margin: 0; padding: var(--xo-space-2) var(--xo-space-3); color: var(--xo-color-danger); background: var(--xo-color-surface); border: 1px solid var(--xo-color-danger); border-radius: var(--xo-radius); }
   .xo-toast[hidden] { display: none; }
   .xo-pager { display: flex; gap: var(--xo-space-2); justify-content: flex-end; padding: var(--xo-space-2); }