@fieldia/viewer 0.11.0 → 0.12.0

package/src/lib/tab-strip.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabStrip = tabStrip;
+const dom_1 = require("./dom");
+/** Room kept beside a tab brought into sight: the button over that edge and the fade beside it. */
+const EDGE = 64;
+/**
+ * A row of tabs too long for its room scrolls sideways: past an edge with more
+ * beyond it, the tabs fade out under a button that moves the strip a width
+ * along — to the left at the start of a right-to-left page. The buttons are
+ * for a pointer: the keyboard moves along the tabs, which come into sight.
+ */
+function tabStrip(list, el) {
+    const rtl = () => list.closest('[dir]')?.getAttribute('dir') === 'rtl';
+    const edge = (side) => el('button', { type: 'button', class: `fd-tabs-scroll fd-tabs-${side}`, tabindex: '-1', 'aria-hidden': 'true', hidden: '' });
+    const before = edge('before');
+    const after = edge('after');
+    const element = el('div', { class: 'fd-tabbar' }, before, list, after);
+    // A strip's width along, less a tab's room, toward the button's own edge.
+    const move = (toward) => list.scrollBy({ left: toward * (rtl() ? -1 : 1) * Math.max(list.clientWidth - 2 * EDGE, EDGE), behavior: 'smooth' });
+    before.addEventListener('click', () => move(-1));
+    after.addEventListener('click', () => move(1));
+    function measure() {
+        // How far along from the start: right to left, scrollLeft runs from 0 down.
+        const along = Math.abs(list.scrollLeft);
+        const start = along > 1;
+        const end = along + list.clientWidth < list.scrollWidth - 1;
+        (0, dom_1.setHidden)(before, !start);
+        (0, dom_1.setHidden)(after, !end);
+        const more = [start && 'start', end && 'end'].filter(Boolean).join(' ');
+        (0, dom_1.setAttr)(element, 'data-more', more || null);
+    }
+    function reveal(tab) {
+        if (!list.clientWidth || list.scrollWidth <= list.clientWidth)
+            return;
+        const room = list.getBoundingClientRect();
+        const at = tab.getBoundingClientRect();
+        // Either way round, a larger scrollLeft shows what is further right.
+        if (at.left < room.left + EDGE)
+            list.scrollLeft += at.left - room.left - EDGE;
+        else if (at.right > room.right - EDGE)
+            list.scrollLeft += at.right - room.right + EDGE;
+        measure();
+    }
+    list.addEventListener('scroll', measure, { passive: true });
+    const view = list.ownerDocument.defaultView;
+    const watcher = view && 'ResizeObserver' in view ? new view.ResizeObserver(() => measure()) : null;
+    watcher?.observe(list);
+    return { element, measure, reveal, destroy: () => watcher?.disconnect() };
+}
+//# sourceMappingURL=tab-strip.js.map

package/src/lib/tab-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-strip.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/tab-strip.ts"],"names":[],"mappings":"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"}

package/src/lib/tab-strip.mjs

@@ -0,0 +1,48 @@
+import { setAttr, setHidden } from './dom.mjs';
+/** Room kept beside a tab brought into sight: the button over that edge and the fade beside it. */
+const EDGE = 64;
+/**
+ * A row of tabs too long for its room scrolls sideways: past an edge with more
+ * beyond it, the tabs fade out under a button that moves the strip a width
+ * along — to the left at the start of a right-to-left page. The buttons are
+ * for a pointer: the keyboard moves along the tabs, which come into sight.
+ */
+export function tabStrip(list, el) {
+    const rtl = () => list.closest('[dir]')?.getAttribute('dir') === 'rtl';
+    const edge = (side) => el('button', { type: 'button', class: `fd-tabs-scroll fd-tabs-${side}`, tabindex: '-1', 'aria-hidden': 'true', hidden: '' });
+    const before = edge('before');
+    const after = edge('after');
+    const element = el('div', { class: 'fd-tabbar' }, before, list, after);
+    // A strip's width along, less a tab's room, toward the button's own edge.
+    const move = (toward) => list.scrollBy({ left: toward * (rtl() ? -1 : 1) * Math.max(list.clientWidth - 2 * EDGE, EDGE), behavior: 'smooth' });
+    before.addEventListener('click', () => move(-1));
+    after.addEventListener('click', () => move(1));
+    function measure() {
+        // How far along from the start: right to left, scrollLeft runs from 0 down.
+        const along = Math.abs(list.scrollLeft);
+        const start = along > 1;
+        const end = along + list.clientWidth < list.scrollWidth - 1;
+        setHidden(before, !start);
+        setHidden(after, !end);
+        const more = [start && 'start', end && 'end'].filter(Boolean).join(' ');
+        setAttr(element, 'data-more', more || null);
+    }
+    function reveal(tab) {
+        if (!list.clientWidth || list.scrollWidth <= list.clientWidth)
+            return;
+        const room = list.getBoundingClientRect();
+        const at = tab.getBoundingClientRect();
+        // Either way round, a larger scrollLeft shows what is further right.
+        if (at.left < room.left + EDGE)
+            list.scrollLeft += at.left - room.left - EDGE;
+        else if (at.right > room.right - EDGE)
+            list.scrollLeft += at.right - room.right + EDGE;
+        measure();
+    }
+    list.addEventListener('scroll', measure, { passive: true });
+    const view = list.ownerDocument.defaultView;
+    const watcher = view && 'ResizeObserver' in view ? new view.ResizeObserver(() => measure()) : null;
+    watcher?.observe(list);
+    return { element, measure, reveal, destroy: () => watcher?.disconnect() };
+}
+//# sourceMappingURL=tab-strip.mjs.map

package/src/lib/tab-strip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-strip.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/tab-strip.ts"],"names":[],"mappings":"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"}

package/src/lib/value-words.d.mts

@@ -0,0 +1,10 @@
+import { type Fields, type Locale, type Values } from '@fieldia/core';
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+export declare function valueWords(doc: Document, fields: Fields, text: string, locale: Locale): {
+    nodes: (Node | string)[];
+    update(values: Readonly<Values>): void;
+};

package/src/lib/value-words.d.ts

@@ -0,0 +1,10 @@
+import { type Fields, type Locale, type Values } from '@fieldia/core';
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+export declare function valueWords(doc: Document, fields: Fields, text: string, locale: Locale): {
+    nodes: (Node | string)[];
+    update(values: Readonly<Values>): void;
+};

package/src/lib/value-words.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.valueWords = valueWords;
+const core_1 = require("@fieldia/core");
+const widgets_1 = require("@fieldia/widgets");
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+function valueWords(doc, fields, text, locale) {
+    const parts = (0, core_1.splitValues)(text);
+    if (!parts.some((part) => part.field))
+        return { nodes: [text], update: () => undefined };
+    const values = [];
+    const nodes = parts.map((part) => {
+        if (!part.field)
+            return part.text;
+        // Set apart from the words round it, so a date or an amount keeps its own order on a page read right to left.
+        const span = doc.createElement('bdi');
+        span.className = 'fd-value';
+        span.dataset['field'] = part.field;
+        values.push({ field: part.field, span });
+        return span;
+    });
+    return {
+        nodes,
+        update(record) {
+            for (const { field, span } of values) {
+                const def = fields[field];
+                const words = def ? (0, widgets_1.displayValue)(def, record[field], record, locale) : '';
+                if (span.textContent !== words)
+                    span.textContent = words;
+            }
+        },
+    };
+}
+//# sourceMappingURL=value-words.js.map

package/src/lib/value-words.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-words.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/value-words.ts"],"names":[],"mappings":";;AAQA,gCAuBC;AA/BD,wCAA+G;AAC/G,8CAAgD;AAEhD;;;;GAIG;AACH,SAAgB,UAAU,CAAC,GAAa,EAAE,MAAc,EAAE,IAAY,EAAE,MAAc;IACpF,MAAM,KAAK,GAAG,IAAA,kBAAW,EAAC,IAAI,CAAC,CAAC;IAChC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;IACzF,MAAM,MAAM,GAA2C,EAAE,CAAC;IAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC/B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAClC,8GAA8G;QAC9G,MAAM,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACnC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IACH,OAAO;QACL,KAAK;QACL,MAAM,CAAC,MAAM;YACX,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,MAAM,EAAE,CAAC;gBACrC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC1B,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAA,sBAAY,EAAC,GAAgB,EAAE,MAAM,CAAC,KAAK,CAAsB,EAAE,MAA+B,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrI,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK;oBAAE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3D,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/lib/value-words.mjs

@@ -0,0 +1,35 @@
+import { splitValues } from '@fieldia/core';
+import { displayValue } from '@fieldia/widgets';
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+export function valueWords(doc, fields, text, locale) {
+    const parts = splitValues(text);
+    if (!parts.some((part) => part.field))
+        return { nodes: [text], update: () => undefined };
+    const values = [];
+    const nodes = parts.map((part) => {
+        if (!part.field)
+            return part.text;
+        // Set apart from the words round it, so a date or an amount keeps its own order on a page read right to left.
+        const span = doc.createElement('bdi');
+        span.className = 'fd-value';
+        span.dataset['field'] = part.field;
+        values.push({ field: part.field, span });
+        return span;
+    });
+    return {
+        nodes,
+        update(record) {
+            for (const { field, span } of values) {
+                const def = fields[field];
+                const words = def ? displayValue(def, record[field], record, locale) : '';
+                if (span.textContent !== words)
+                    span.textContent = words;
+            }
+        },
+    };
+}
+//# sourceMappingURL=value-words.mjs.map

package/src/lib/value-words.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-words.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/value-words.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAqE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,GAAa,EAAE,MAAc,EAAE,IAAY,EAAE,MAAc;IACpF,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;IACzF,MAAM,MAAM,GAA2C,EAAE,CAAC;IAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC/B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAClC,8GAA8G;QAC9G,MAAM,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACnC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IACH,OAAO;QACL,KAAK;QACL,MAAM,CAAC,MAAM;YACX,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,MAAM,EAAE,CAAC;gBACrC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC1B,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,GAAgB,EAAE,MAAM,CAAC,KAAK,CAAsB,EAAE,MAA+B,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrI,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK;oBAAE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3D,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/lib/viewer.d.mts

@@ -1,6 +1,8 @@
-import { type ActionHost, type ActionStep, type FormEvents, type Form, type FormOptions, type Page, type RecordId, type Locale, type OpenRequest, type OpenResult, type RunContext, type RunResult, type Values } from '@fieldia/core';
+import { type ActionHost, type ActionStep, type FormEvents, type Form, type FormOptions, type Page, type RecordId, type ResolvedFilter, type Locale, type OpenRequest, type OpenResult, type RunContext, type RunResult, type Values } from '@fieldia/core';
 import { type IconSet, type PreferenceStore, type WidgetFactory } from '@fieldia/widgets';
 import { type PageFinder } from './related.mjs';
+import { type Breadcrumb, type RecordPager } from './record-bar.mjs';
+export type { Breadcrumb, RecordPager } from './record-bar.mjs';
 export type Skin = 'underline' | 'outlined';
 import { type ViewerLabels } from './labels.mjs';
 export { VIEWER_LABELS, DEFAULT_LABELS, type ViewerLabels } from './labels.mjs';
@@ -79,6 +81,8 @@ export interface ViewerOptions extends Omit<FormOptions, 'page' | 'host'> {
     translate?: (text: string) => string;
     /** A list page: a row was opened, by a click or by Enter. The app shows the record. */
     onOpenRecord?: (id: RecordId) => void;
+    /** A list page: only the records these conditions let through, whatever is searched — the invoices of one order, opened from it. */
+    listFilter?: ResolvedFilter[];
     /**
      * What the page's steps ask of the screen, the viewer does itself: a page
      * opened (in a dialog, a side panel, or this form's place, with Back), words
@@ -91,6 +95,23 @@ export interface ViewerOptions extends Omit<FormOptions, 'page' | 'host'> {
      * your router, your own dialog — or with undefined to let the viewer open it.
      */
     onOpen?: (request: OpenRequest) => Promise<OpenResult> | undefined;
+    /**
+     * The records round this one, for the pager over a record — "3 / 42",
+     * Previous and Next — as the list it was opened from has them: their ids in
+     * order, or how many there are, where this one is, and the id at a place.
+     * Moving saves what changed first, as Flectra does; the form then shows
+     * the other record (its `open` event says which). A copy joins them after
+     * its record; a record deleted leaves them, the pager moving to the next.
+     * Never in a dialog.
+     */
+    records?: readonly RecordId[] | RecordPager;
+    /**
+     * The trail to this record, for the breadcrumbs over it: each page before
+     * it with its words and what a press does (back to it); the record itself
+     * comes last, by its name. A page a step opens in this one's place adds
+     * this one to the trail, as the way back. Never in a dialog.
+     */
+    breadcrumbs?: readonly Breadcrumb[];
 }
 export interface ViewerHandle {
     readonly form: Form;

package/src/lib/viewer.d.ts

@@ -1,6 +1,8 @@
-import { type ActionHost, type ActionStep, type FormEvents, type Form, type FormOptions, type Page, type RecordId, type Locale, type OpenRequest, type OpenResult, type RunContext, type RunResult, type Values } from '@fieldia/core';
+import { type ActionHost, type ActionStep, type FormEvents, type Form, type FormOptions, type Page, type RecordId, type ResolvedFilter, type Locale, type OpenRequest, type OpenResult, type RunContext, type RunResult, type Values } from '@fieldia/core';
 import { type IconSet, type PreferenceStore, type WidgetFactory } from '@fieldia/widgets';
 import { type PageFinder } from './related';
+import { type Breadcrumb, type RecordPager } from './record-bar';
+export type { Breadcrumb, RecordPager } from './record-bar';
 export type Skin = 'underline' | 'outlined';
 import { type ViewerLabels } from './labels';
 export { VIEWER_LABELS, DEFAULT_LABELS, type ViewerLabels } from './labels';
@@ -79,6 +81,8 @@ export interface ViewerOptions extends Omit<FormOptions, 'page' | 'host'> {
     translate?: (text: string) => string;
     /** A list page: a row was opened, by a click or by Enter. The app shows the record. */
     onOpenRecord?: (id: RecordId) => void;
+    /** A list page: only the records these conditions let through, whatever is searched — the invoices of one order, opened from it. */
+    listFilter?: ResolvedFilter[];
     /**
      * What the page's steps ask of the screen, the viewer does itself: a page
      * opened (in a dialog, a side panel, or this form's place, with Back), words
@@ -91,6 +95,23 @@ export interface ViewerOptions extends Omit<FormOptions, 'page' | 'host'> {
      * your router, your own dialog — or with undefined to let the viewer open it.
      */
     onOpen?: (request: OpenRequest) => Promise<OpenResult> | undefined;
+    /**
+     * The records round this one, for the pager over a record — "3 / 42",
+     * Previous and Next — as the list it was opened from has them: their ids in
+     * order, or how many there are, where this one is, and the id at a place.
+     * Moving saves what changed first, as Flectra does; the form then shows
+     * the other record (its `open` event says which). A copy joins them after
+     * its record; a record deleted leaves them, the pager moving to the next.
+     * Never in a dialog.
+     */
+    records?: readonly RecordId[] | RecordPager;
+    /**
+     * The trail to this record, for the breadcrumbs over it: each page before
+     * it with its words and what a press does (back to it); the record itself
+     * comes last, by its name. A page a step opens in this one's place adds
+     * this one to the trail, as the way back. Never in a dialog.
+     */
+    breadcrumbs?: readonly Breadcrumb[];
 }
 export interface ViewerHandle {
     readonly form: Form;