@cube-nl/dmp-sdk 1.1.0-rc.2 → 1.1.0-rc.3

package/dist/cube-ui.manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest": 1,
   "package": "@cube-nl/dmp-sdk",
-  "version": "1.1.0-rc.2",
+  "version": "1.1.0-rc.3",
   "file": "cube-sdk.js",
   "blocks": {
     "cube-state": {
@@ -788,7 +788,7 @@
     "cube-board": {
       "kind": "block",
       "since": "1.1.0",
-      "summary": "The rows of a resource as cards in a column per value of a status field, like a kanban board. Columns come from cube-column children, else from the enum of the status field (preview only: live, write cube-columns). A card moves by drag and drop or by a button per other column, named \"Verplaats naar …\": at once on screen, then saved; a refusal puts it back with an alert. Read-only without update or with a readonly status field: update is optional, a view-only board needs only list. Columns stack on a narrow screen.",
+      "summary": "The rows of a resource as cards in a column per value of a status field, like a kanban board. Columns come from cube-column children, else from the enum of the status field (preview only: live, write cube-columns). A card moves by drag and drop or by a button per other column, named \"Verplaats naar …\": at once on screen, then saved; a refusal puts it back with an alert. Read-only without update or with a readonly status field: update is optional, a view-only board needs only list. Choosing a card (click, Enter or Space) emits cube-select and can fill a cube-detail. Columns stack on a narrow screen.",
       "actions": [
         "list",
         "update"
@@ -839,6 +839,12 @@
           "required": false,
           "summary": "Cards shown per column, at most 200; a column with more says \"en nog N\".",
           "default": "50"
+        },
+        "detail": {
+          "type": "selector",
+          "required": false,
+          "summary": "CSS selector of a cube-detail whose record-id is set to the id of the chosen card.",
+          "example": "#taak"
         }
       },
       "children": [
@@ -846,7 +852,8 @@
         "cube-field"
       ],
       "events": {
-        "cube-move": "A move was saved; detail is { resource, id, from, to } with the old and new status values. cube-data-change follows, so tables of the same resource reload."
+        "cube-move": "A move was saved; detail is { resource, id, from, to } with the old and new status values. cube-data-change follows, so tables of the same resource reload.",
+        "cube-select": "The user chose a card (click, Enter or Space; not a move); detail is { resource, id, row } with the row as listed."
       },
       "example": "<cube-board resource=\"tasks\" status-field=\"status\" title-field=\"title\" fields=\"owner\"><cube-column value=\"todo\" label=\"Te doen\"></cube-column><cube-column value=\"doing\" label=\"Bezig\"></cube-column><cube-column value=\"done\" label=\"Klaar\"></cube-column></cube-board>"
     },

package/dist/size.json

@@ -1,6 +1,6 @@
 {
   "core_gzip": 18169,
-  "total_gzip": 46472,
-  "ui_gzip": 28303,
+  "total_gzip": 46959,
+  "ui_gzip": 28790,
   "budget_gzip": 40960
 }

package/dist/ui/attributes.js

@@ -66,7 +66,7 @@ export const BLOCK_ATTRIBUTES = {
     'cube-calc': ['label'],
     'cube-input': ['name', 'label', 'type', 'value', 'min', 'max', 'step', 'options'],
     'cube-result': ['name', 'label', 'format', 'currency', 'emphasis'],
-    'cube-board': ['resource', 'status-field', 'title-field', 'fields', 'sort', 'filter', 'page-size'],
+    'cube-board': ['resource', 'status-field', 'title-field', 'fields', 'sort', 'filter', 'page-size', 'detail'],
     'cube-column': ['value', 'label'],
     'cube-gap-list': ['scherm'],
 };

package/dist/ui/blocks/board.d.ts

@@ -3,6 +3,6 @@ import type { BlockScope } from '../define.js';
 /**
  * `<cube-board>`: the rows of a resource as cards in a column per value of a status field. A card moves by drag
  * and drop or by a button per other column ("Verplaats naar …"): at once on screen, then saved; a refusal puts it
- * back.
+ * back. A click on a card, or Enter or Space on it, chooses it: cube-select, and `detail` shows it.
  */
 export declare function boardBlock(Base: BlockClass, scope: BlockScope): BlockClass;

package/dist/ui/blocks/board.js

@@ -1,5 +1,6 @@
 import { isDmpError } from '../../errors.js';
 import { CARD_CSS, requiredAttr, wholeAttr } from '../aggregate-block.js';
+import { AuthorError } from '../author-error.js';
 import { BlockStateError, stateFor } from '../block.js';
 import { clear, h } from '../dom.js';
 import { columnsFor, fieldList, readFieldConfigs } from '../fields.js';
@@ -14,8 +15,11 @@ position:relative;overflow-x:auto}
 section{min-width:0}
 h3{margin:0 0 .5rem;font-size:1rem}
 article{margin-top:.5rem;padding:.75rem;border:1px solid var(--cube-color-border);
-border-radius:var(--cube-radius-small);background:var(--cube-color-bg);overflow-wrap:anywhere}
+border-radius:var(--cube-radius-small);background:var(--cube-color-bg);overflow-wrap:anywhere;
+cursor:pointer}
 article[draggable=true]{cursor:grab}
+article.chosen{border-color:var(--cube-color-primary);background:var(--cube-color-primary-subtle);
+box-shadow:inset 4px 0 0 var(--cube-color-primary)}
 .title{margin:0;font-weight:600}
 dl{display:grid;grid-template-columns:auto 1fr;gap:0 .5rem;margin:.25rem 0 0;font-size:.875rem}
 dd{margin:0;min-width:0}
@@ -54,6 +58,10 @@ function sortOrder(order, a, b) {
     }
     return 0;
 }
+/** A column value as the status field holds it: a number for a numeric field. */
+function statusValue(loaded, value) {
+    return loaded.numeric && Number.isFinite(Number(value)) ? Number(value) : value;
+}
 /** Why a move was refused, in words for the person; never the server's or the browser's own text. */
 function reason(error) {
     if (isDmpError(error) && (error.status === 409 || error.status === 412))
@@ -64,7 +72,7 @@ function reason(error) {
 /**
  * `<cube-board>`: the rows of a resource as cards in a column per value of a status field. A card moves by drag
  * and drop or by a button per other column ("Verplaats naar …"): at once on screen, then saved; a refusal puts it
- * back.
+ * back. A click on a card, or Enter or Space on it, chooses it: cube-select, and `detail` shows it.
  */
 export function boardBlock(Base, scope) {
     const doc = scope.document;
@@ -84,6 +92,9 @@ export function boardBlock(Base, scope) {
         focusKey = null;
         attempt = null;
         ids = 0;
+        /** The resource the choice belongs to, and the id of the chosen card. */
+        shownResource = null;
+        chosen = null;
         constructor() {
             super();
             this.shadowRoot?.insertBefore(this.alert, this.body);
@@ -110,6 +121,11 @@ export function boardBlock(Base, scope) {
             const resource = requiredAttr(this, 'resource');
             const status = requiredAttr(this, 'status-field');
             const title = requiredAttr(this, 'title-field');
+            if (resource !== this.shownResource) {
+                this.chosen = null;
+                this.shownResource = resource;
+            }
+            this.detailTarget();
             const filter = blockFilter(this);
             const size = Math.min(wholeAttr(this, 'page-size', 1, 50), 200);
             const sort = this.attr('sort')?.trim() ?? '';
@@ -206,11 +222,28 @@ export function boardBlock(Base, scope) {
         card(loaded, column, row, cards) {
             const key = keyOf(row);
             const title = `b${++this.ids}`;
+            const chosen = row.id != null && key === this.chosen;
             const card = h(doc, 'article', {
                 tabindex: '0',
                 draggable: loaded.canMove ? 'true' : 'false',
                 'data-id': key,
                 'aria-labelledby': title,
+                class: chosen ? 'chosen' : null,
+                'aria-current': chosen ? 'true' : null,
+                // A move button is not a choice.
+                onclick: (event) => {
+                    if (event.target.closest('button') === null)
+                        this.select(loaded, row);
+                },
+                onkeydown: ((event) => {
+                    if (event.target !== card || event.altKey || event.ctrlKey || event.metaKey)
+                        return;
+                    if (event.key !== 'Enter' && event.key !== ' ')
+                        return;
+                    // Space would scroll the page.
+                    event.preventDefault();
+                    this.select(loaded, row);
+                }),
                 ondragstart: (event) => {
                     this.dragged = key;
                     event.dataTransfer?.setData('text/plain', key);
@@ -237,6 +270,43 @@ export function boardBlock(Base, scope) {
             cards.set(key, card);
             return card;
         }
+        /** The element `detail` names, or null without one; an invalid selector is the author's error. */
+        detailTarget() {
+            const selector = this.attr('detail')?.trim() ?? '';
+            if (selector === '')
+                return null;
+            try {
+                return doc.querySelector(selector);
+            }
+            catch {
+                throw new AuthorError(NL.invalid.selector(this.localName, 'detail', selector));
+            }
+        }
+        select(loaded, row) {
+            const id = row.id ?? null;
+            this.chosen = id === null ? null : String(id);
+            for (const card of Array.from(this.body.querySelectorAll('article'))) {
+                const chosen = card.getAttribute('data-id') === this.chosen;
+                card.classList.toggle('chosen', chosen);
+                if (chosen)
+                    card.setAttribute('aria-current', 'true');
+                else
+                    card.removeAttribute('aria-current');
+            }
+            this.emit('cube-select', { resource: loaded.resource, id, row });
+            if (id === null)
+                return;
+            let target = null;
+            try {
+                target = this.detailTarget();
+            }
+            catch (error) {
+                // Checked on load; an attribute changed since is reported the same way.
+                this.showState(stateFor(error));
+                return;
+            }
+            target?.setAttribute('record-id', String(id));
+        }
         /**
          * Takes the card out of its column and puts it in `to`: at its place by `sort`, else on top; null when it is
          * not on the board.
@@ -250,6 +320,8 @@ export function boardBlock(Base, scope) {
                     continue;
                 column.rows.splice(index, 1);
                 column.total--;
+                // The board does not reload after its own move: the row as listed must say where it is now.
+                row[loaded.status] = statusValue(loaded, to);
                 if (loaded.order.length === 0) {
                     target.rows.unshift(row);
                 }
@@ -290,7 +362,7 @@ export function boardBlock(Base, scope) {
         }
         async send(loaded, track, row, from, to) {
             const key = keyOf(row);
-            const body = { [loaded.status]: loaded.numeric && Number.isFinite(Number(to)) ? Number(to) : to };
+            const body = { [loaded.status]: statusValue(loaded, to) };
             const attempt = attemptFor(this.attempt, JSON.stringify([loaded.resource, key, body]));
             this.attempt = attempt;
             try {

package/dist/ui/manifest.js

@@ -761,6 +761,7 @@ export const BLOCK_SPECS = {
             + 'live, write cube-columns). A card moves by drag and drop or by a button per other column, named '
             + '"Verplaats naar …": at once on screen, then saved; a refusal puts it back with an alert. Read-only '
             + 'without update or with a readonly status field: update is optional, a view-only board needs only list. '
+            + 'Choosing a card (click, Enter or Space) emits cube-select and can fill a cube-detail. '
             + 'Columns stack on a narrow screen.',
         actions: ['list', 'update'],
         attributes: {
@@ -809,11 +810,19 @@ export const BLOCK_SPECS = {
                 summary: 'Cards shown per column, at most 200; a column with more says "en nog N".',
                 default: '50',
             },
+            detail: {
+                type: 'selector',
+                required: false,
+                summary: 'CSS selector of a cube-detail whose record-id is set to the id of the chosen card.',
+                example: '#taak',
+            },
         },
         children: ['cube-column', 'cube-field'],
         events: {
             'cube-move': 'A move was saved; detail is { resource, id, from, to } with the old and new status values. '
                 + 'cube-data-change follows, so tables of the same resource reload.',
+            'cube-select': 'The user chose a card (click, Enter or Space; not a move); detail is { resource, id, row } with the '
+                + 'row as listed.',
         },
         example: '<cube-board resource="tasks" status-field="status" title-field="title" fields="owner">'
             + '<cube-column value="todo" label="Te doen"></cube-column>'

package/dist/ui/trial-banner.d.ts

@@ -15,6 +15,8 @@ export interface TrialScope {
 /** Spec section 7: every 5 s while the page is visible, every 60 s while it is hidden. */
 export declare const POLL_VISIBLE_MS = 5000;
 export declare const POLL_HIDDEN_MS = 60000;
+/** A 429's numeric Retry-After is honoured up to this long, and never past the expiry. */
+export declare const RETRY_AFTER_CAP_MS = 60000;
 /** A status request that hangs this long is given up as a network error, so the polling goes on. */
 export declare const STATUS_TIMEOUT_MS = 10000;
 /**

package/dist/ui/trial-banner.js

@@ -4,6 +4,8 @@ import { NL } from './texts.js';
 /** Spec section 7: every 5 s while the page is visible, every 60 s while it is hidden. */
 export const POLL_VISIBLE_MS = 5000;
 export const POLL_HIDDEN_MS = 60000;
+/** A 429's numeric Retry-After is honoured up to this long, and never past the expiry. */
+export const RETRY_AFTER_CAP_MS = 60000;
 /** A status request that hangs this long is given up as a network error, so the polling goes on. */
 export const STATUS_TIMEOUT_MS = 10000;
 const CSS = `
@@ -24,7 +26,7 @@ export function showTrialBanner(scope, config) {
     const expiresAt = Date.parse(config.expiresAt);
     const known = Number.isFinite(expiresAt);
     const time = known
-        ? new Intl.DateTimeFormat('nl-NL', { hour: '2-digit', minute: '2-digit' }).format(new Date(expiresAt))
+        ? new Intl.DateTimeFormat('nl-NL', { hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }).format(new Date(expiresAt))
         : null;
     const host = doc.createElement('cube-trial-banner');
     const root = host.attachShadow({ mode: 'open' });
@@ -39,6 +41,8 @@ export function showTrialBanner(scope, config) {
     let ended = false;
     let inFlight = false;
     let abort = null;
+    /** Until when a 429 asked to wait; 0 when no back-off holds. */
+    let backOffUntil = 0;
     root.adoptedStyleSheets = sheets;
     root.appendChild(region);
     const insert = () => {
@@ -65,13 +69,14 @@ export function showTrialBanner(scope, config) {
             region.appendChild(h(doc, 'button', { type: 'button', onclick: action[1] }, action[0]));
         }
     };
-    const schedule = () => {
+    const schedule = (beat = visible() ? POLL_VISIBLE_MS : POLL_HIDDEN_MS) => {
         if (ended)
             return;
         if (timer !== null)
             scope.clearTimeout(timer);
-        const interval = visible() ? POLL_VISIBLE_MS : POLL_HIDDEN_MS;
-        timer = scope.setTimeout(tick, known ? Math.max(0, Math.min(interval, expiresAt - now())) : interval);
+        // Capped again: a wall clock that jumps back must not stretch the back-off.
+        const wait = Math.max(beat, Math.min(RETRY_AFTER_CAP_MS, backOffUntil - now()));
+        timer = scope.setTimeout(tick, known ? Math.max(0, Math.min(wait, expiresAt - now())) : wait);
     };
     const tick = async () => {
         timer = null;
@@ -82,6 +87,8 @@ export function showTrialBanner(scope, config) {
             end('expired');
             return;
         }
+        // A back-off governs only the request it delays; the answer to this one sets the next.
+        backOffUntil = 0;
         inFlight = true;
         const controller = scope.AbortController === undefined ? null : new scope.AbortController();
         abort = controller;
@@ -108,6 +115,13 @@ export function showTrialBanner(scope, config) {
     const answer = async (response) => {
         if (ended)
             return;
+        if (response.ok)
+            backOffUntil = 0;
+        if (response.status === 429) {
+            const seconds = (response.headers.get('Retry-After') ?? '').trim();
+            if (/^\d+$/.test(seconds))
+                backOffUntil = now() + Math.min(RETRY_AFTER_CAP_MS, Number(seconds) * 1000);
+        }
         if (response.ok || response.status === 429 || response.status >= 500) {
             schedule();
             return;
@@ -151,6 +165,11 @@ export function showTrialBanner(scope, config) {
             schedule();
             return;
         }
+        // Back in view during a back-off: wait out its rest.
+        if (backOffUntil > now()) {
+            schedule(0);
+            return;
+        }
         // Back in view: ask right away instead of waiting out the hidden interval.
         if (timer !== null)
             scope.clearTimeout(timer);

package/dist/version.d.ts

@@ -1,4 +1,4 @@
 /** This package's version. A test holds it equal to package.json's. */
-export declare const VERSION = "1.1.0-rc.2";
+export declare const VERSION = "1.1.0-rc.3";
 /** The `"sdk"` value a `cube-app.json` manifest names for the API `CubeApp` offers here. */
 export declare const MANIFEST_SDK = "1";

package/dist/version.js

@@ -1,4 +1,4 @@
 /** This package's version. A test holds it equal to package.json's. */
-export const VERSION = '1.1.0-rc.2';
+export const VERSION = '1.1.0-rc.3';
 /** The `"sdk"` value a `cube-app.json` manifest names for the API `CubeApp` offers here. */
 export const MANIFEST_SDK = '1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-nl/dmp-sdk",
-  "version": "1.1.0-rc.2",
+  "version": "1.1.0-rc.3",
   "description": "Dependency-free TypeScript client for the Cube DMP REST API (cube/api), with OAuth 2.1 + PKCE, and CubeApp for no-build apps (preview on mock data, live on the DMP).",
   "license": "MIT",
   "type": "module",