@gemboss/ui 0.12.0 → 0.13.0

package/src/kit-plain.css

@@ -88,7 +88,23 @@
 .ui-link:focus-visible,
 .ui-prose :where(a:not([class])):focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 2px; border-radius: 2px; }
 
-.ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+.ui-card--media { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+/* 0.13.0 (README "Collections", card grid): the title is the card's link and its overlay covers the card
+   (`a.ui-card__link`; the picture link is aria-hidden, out of the tab order); `.ui-card__menu` (a ⋯ ui-menu) sits in the
+   picture's corner above it, and the card stops clipping so the open menu is not cut off; `data-ratio="4/3"` for a theme
+   or a page. */
+.ui-card__link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--ui-text); font-size: var(--ui-fs-body); line-height: 20px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
+.ui-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
+.ui-card__link:focus-visible { outline: none; }
+.ui-card--media:has(.ui-card__link) { cursor: pointer; }
+.ui-card--media:has(.ui-card__link:hover) { border-color: var(--ui-text-muted); }
+.ui-card--media:has(.ui-card__link:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
+.ui-card--media :is(.ui-card__foot button, .ui-card__foot a, .ui-card__body a:not(.ui-card__link), .ui-card__body button, select, input, summary) { position: relative; z-index: 1; }
+.ui-card__menu { position: absolute; top: 8px; right: 8px; z-index: 2; }
+.ui-card--media:has(> .ui-card__menu) { overflow: visible; }
+.ui-card--media:has(> .ui-card__menu) > .ui-card__media { border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+.ui-card__meta { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); line-height: 16px; }
+.ui-card--media[data-ratio="4/3"] > .ui-card__media { aspect-ratio: 4 / 3; }
 .ui-card__media {
   display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0; padding: 0; border: 0;
   border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-2); overflow: hidden; color: inherit;
@@ -475,7 +491,7 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
 }
 .ui-chip:hover { border-style: solid; background: var(--ui-surface-2); }
 .ui-chip:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
-.ui-chip:is([aria-pressed="true"], [aria-current="page"]) { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
+.ui-chip:is([aria-pressed="true"], [aria-current="page"], [aria-current="true"]) { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 @media (pointer: coarse), (max-width: 47.9975em) { .ui-chip { height: auto; min-height: 44px; min-width: 44px; } }
 /* Card stack: `<div class="ui-stack"><div class="ui-card">…</div><div class="ui-card">…</div></div>`. 16px between blocks,
    Polaris BlockStack gap 400, the admin's spacing between cards on a page. `--tight` is 8 (inside a card). */

package/src/kit-plain.js

@@ -17,6 +17,8 @@
      initPasswordFields();              // .gb-auth-pw-toggle reveal; resetPasswordFields() on sign-out
      initSearch();                      // TopbarSearch: ⌘K / Ctrl+K and "/" focus the box, Escape leaves it
      // initNav() runs by itself (0.10.0): a followed rail link shows a spinner, a rested-on link is prefetched
+     // initCollections() runs by itself (0.13.0): rows with data-href open on a click, .ui-index selection + bulk bar,
+     // client sort; gembossUI.selection(root) → the selected ids (README "Collections")
 */
 (function (g) {
   "use strict";
@@ -434,7 +436,140 @@
   }
   initNav();
 
+  /* Collections (0.13.0), for the markup in README "Collections" (collections.css). Runs by itself when the script loads,
+     delegated on the document, so rows rendered later are covered; `initCollections()` is idempotent.
+     - Row links: a row with `data-href` (an index-table `tr`, or any element) opens on a click anywhere that is not a
+       control of its own (ROW_CONTROLS: a link, button, checkbox, select, menu, `data-row-ignore`) and does not end a
+       text selection. It follows the row's own link to that href (so a client router, `target` and the nav spinner all
+       apply); Cmd / Ctrl / Shift / middle click opens a new tab. No such link: location.assign. A React IndexTable
+       handles its own rows (`.is-linked`, no data-href), so the two never both fire.
+     - Selection: in a `.ui-index`, `input[data-gb-select]` (value = the row's id) and `input[data-gb-select-all]` (the
+       header's and the bulk bar's). The row gets `is-selected` + aria-selected, select-all goes indeterminate, the
+       `.ui-bulkbar` shows with `[data-gb-count]` filled from its own template ("{n} selected"), Shift+click selects a
+       range, Escape clears. The page reads `gembossUI.selection(root)` (ids) or listens for `gb:selection`.
+     - Sort, only in a table with `data-gb-sort` (a React table owns its own buttons): `="client"` sorts its rows when a
+       `button.ui-table__sort` is pressed (by each cell's `data-sort-value`, else its text; numbers as numbers) and sets
+       aria-sort; `="event"` fires `gb:sort` ({ key: th.dataset.key, direction }) for the page. A server sort is a link
+       (`a.ui-table__sort`) and needs nothing. */
+  var ROW_CONTROLS = 'a[href], button, input, select, textarea, label, summary, details, dialog, [role="dialog"], [role="menu"], [role="button"], [role="menuitem"], [role="checkbox"], [contenteditable="true"], [contenteditable=""], [data-row-ignore], .ui-table__check';
+  var ESCAPE_OWNERS = 'details[open], dialog, [role="dialog"], [role="menu"]';
+  var collOn = false, lastBox = null;
+  function rowLink(row) {
+    var href = row.getAttribute("data-href"), links = row.querySelectorAll("a[href]");
+    for (var i = 0; i < links.length; i++) if (links[i].getAttribute("href") === href) return links[i];
+    return null;
+  }
+  function onRowClick(e) {
+    if (e.defaultPrevented || e.button > 1 || !e.target.closest) return;
+    var row = e.target.closest("[data-href]");
+    if (!row) return;
+    var hit = e.target.closest(ROW_CONTROLS);
+    if (hit && row.contains(hit)) return;
+    var sel = g.getSelection ? g.getSelection() : null;
+    if (sel && !sel.isCollapsed && sel.anchorNode && row.contains(sel.anchorNode)) return;
+    var a = rowLink(row), href = a ? a.href : new URL(row.getAttribute("data-href"), location.href).href;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) { g.open(href, "_blank", "noopener"); return; }
+    if (a) a.click(); else location.assign(href);
+  }
+  function selectionIn(root) {
+    var out = [];
+    root.querySelectorAll("input[data-gb-select]").forEach(function (b) { if (b.checked) out.push(b.value); });
+    return out;
+  }
+  function syncSelection(root) {
+    var boxes = root.querySelectorAll("input[data-gb-select]"), n = 0;
+    boxes.forEach(function (b) {
+      var row = b.closest("tr, .ui-list__item, [data-href]");
+      if (b.checked) n++;
+      if (row) { row.classList.toggle("is-selected", b.checked); row.setAttribute("aria-selected", b.checked ? "true" : "false"); }
+    });
+    root.querySelectorAll("input[data-gb-select-all]").forEach(function (b) { b.checked = n > 0 && n === boxes.length; b.indeterminate = n > 0 && n < boxes.length; });
+    var bar = root.querySelector(".ui-bulkbar");
+    if (bar) bar.hidden = n === 0;
+    var c = root.querySelector("[data-gb-count]");
+    if (c) c.textContent = (c.getAttribute("data-gb-count") || "{n} selected").replace("{n}", n);
+    root.dispatchEvent(new CustomEvent("gb:selection", { bubbles: true, detail: { ids: selectionIn(root), total: boxes.length } }));
+  }
+  function clearSelection(root) {
+    root.querySelectorAll("input[data-gb-select]").forEach(function (b) { b.checked = false; });
+    syncSelection(root);
+  }
+  function sortValue(td) {
+    if (!td) return "";
+    var v = td.getAttribute("data-sort-value");
+    return v != null ? v : td.textContent.trim();
+  }
+  function onSortClick(btn) {
+    var th = btn.closest("th"), table = btn.closest("table");
+    if (!th || !table) return;
+    var dir = th.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending";
+    table.querySelectorAll("thead th[aria-sort]").forEach(function (x) { if (x !== th) x.setAttribute("aria-sort", "none"); });
+    th.setAttribute("aria-sort", dir);
+    if (table.getAttribute("data-gb-sort") !== "client") {
+      table.dispatchEvent(new CustomEvent("gb:sort", { bubbles: true, detail: { key: th.getAttribute("data-key"), direction: dir } }));
+      return;
+    }
+    var col = Array.prototype.indexOf.call(th.parentElement.children, th), body = table.tBodies[0];
+    if (!body) return;
+    var rows = Array.prototype.slice.call(body.rows), sign = dir === "ascending" ? 1 : -1;
+    var num = function (s) { var x = String(s).replace(/[\s,%$€£¥]/g, ""); return x !== "" && !isNaN(+x) ? +x : null; };
+    rows.sort(function (r1, r2) {
+      var a = sortValue(r1.cells[col]), b = sortValue(r2.cells[col]), na = num(a), nb = num(b);
+      return sign * (na != null && nb != null ? na - nb : String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" }));
+    });
+    rows.forEach(function (r) { body.appendChild(r); });
+  }
+  function initCollections() {
+    if (collOn || typeof document === "undefined") return;
+    collOn = true;
+    document.addEventListener("click", function (e) {
+      var t = e.target;
+      if (!t || !t.closest) return;
+      // Only a table that asked for it (data-gb-sort): a React DataTable / IndexTable owns its own sort buttons.
+      var sb = t.closest("table[data-gb-sort] button.ui-table__sort");
+      if (sb) { onSortClick(sb); return; }
+      // A click in the checkbox cell around the box (40px cell, 24px box) selects, it does not open the row.
+      var cc = t.closest("td.ui-table__check, th.ui-table__check");
+      // Only the plain contract's boxes: a React IndexTable toggles its own cell (both would undo each other).
+      if (cc && t === cc) { var ib = cc.querySelector("input[data-gb-select], input[data-gb-select-all]"); if (ib) { ib.click(); return; } }
+      // Shift+click on a row box: remember it for the range (the change event carries no shiftKey).
+      var box = t.closest("input[data-gb-select]");
+      if (box) {
+        var root = box.closest(".ui-index");
+        if (root && e.shiftKey && lastBox && lastBox !== box && root.contains(lastBox)) {
+          var all = Array.prototype.slice.call(root.querySelectorAll("input[data-gb-select]"));
+          var i = all.indexOf(lastBox), j = all.indexOf(box), on = box.checked;
+          for (var k = Math.min(i, j); k <= Math.max(i, j); k++) all[k].checked = on;
+          syncSelection(root);
+        }
+        lastBox = box;
+        return;
+      }
+      onRowClick(e);
+    });
+    document.addEventListener("auxclick", function (e) { if (e.button === 1) onRowClick(e); });
+    document.addEventListener("change", function (e) {
+      var t = e.target;
+      if (!t || !t.matches) return;
+      var root = t.closest(".ui-index");
+      if (!root) return;
+      if (t.matches("input[data-gb-select-all]")) {
+        root.querySelectorAll("input[data-gb-select]").forEach(function (b) { b.checked = t.checked; });
+        syncSelection(root);
+      } else if (t.matches("input[data-gb-select]")) syncSelection(root);
+    });
+    document.addEventListener("keydown", function (e) {
+      if (e.key !== "Escape" || e.defaultPrevented || MODALS.length) return;
+      var root = document.activeElement && document.activeElement.closest ? document.activeElement.closest(".ui-index") : null;
+      // An open ⋯ menu or a dialog in the table takes this Escape (initMenus closes it), not the selection.
+      if (root && (document.activeElement.closest(ESCAPE_OWNERS) || root.querySelector(ESCAPE_OWNERS))) return;
+      if (root && root.querySelector("input[data-gb-select]:checked")) clearSelection(root);
+    });
+  }
+  initCollections();
+
   g.gembossUI = { openModal: openModal, toast: toast, confirm: confirm, initMenus: initMenus, closeMenus: closeMenus,
     initSearch: initSearch, initShell: initShell, initPasswordFields: initPasswordFields, resetPasswordFields: resetPasswordFields,
-    initNav: initNav, openModals: function () { return MODALS.length; } };
+    initNav: initNav, openModals: function () { return MODALS.length; },
+    initCollections: initCollections, selection: selectionIn, clearSelection: clearSelection, syncSelection: syncSelection };
 })(globalThis);