@fieldia/widgets 0.11.0 → 0.13.0

package/src/lib/properties.mjs

@@ -1,15 +1,30 @@
+import { maker, wordsFor } from './kind-parts.mjs';
 import { createWidget } from './widgets.mjs';
 /**
  * A properties field, one row per property, each edited with the widget for
  * its type: text, numbers, yes/no, a choice, a date. The field's `definitions`
- * say which properties there are; without them, each property is worked out
- * from its value. The properties stay one value: an object by property name.
+ * say which properties there are; with `definitionsFrom` the app gives them,
+ * those the linked record keeps (Flectra's definition_record), loaded again as
+ * the link changes; without either, each property is worked out from its
+ * value. The properties stay one value: an object by property name.
+ *
+ * Options: `columns` (1 or 2), the properties side by side, as Flectra's
+ * columns="2"; `add`, with definitions from a linked record, "Add a property"
+ * under them — its name and kind, kept on that record through the app.
  */
 /** "lift_access" → "Lift access". */
 const humanize = (name) => {
     const words = name.replace(/_/g, ' ').trim();
     return words.charAt(0).toUpperCase() + words.slice(1);
 };
+/** A property's name from its label: "Locker number" → "locker_number". */
+const nameFrom = (label) => label
+    .normalize('NFKD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '')
+    .replace(/^(\d)/, 'p_$1') || 'property';
 /** A property's type, from what it holds. */
 function guess(name, value) {
     const label = humanize(name);
@@ -21,9 +36,14 @@ function guess(name, value) {
         return { name, label, type: 'date' };
     return { name, label, type: 'char' };
 }
+/** The kinds a property added in place may be, in the order their words name them. */
+const KINDS = ['char', 'text', 'integer', 'float', 'boolean', 'date'];
 export const propertiesWidget = (context) => {
-    const { form, name, field, node, id, document } = context;
+    const { form, name, field, node, id, document, labels, locale } = context;
+    const make = maker(document);
+    const words = wordsFor(labels, locale);
     const declared = field.type === 'properties' ? field.definitions : undefined;
+    const fromRecord = field.type === 'properties' && !!field.definitionsFrom;
     const current = () => {
         const value = form.getState().values[name];
         return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
@@ -35,9 +55,65 @@ export const propertiesWidget = (context) => {
         // Property values are plain JSON: text, numbers, yes/no, a choice, a date.
         setValue: (property, value) => form.setValue(name, { ...current(), [property]: value }),
     };
-    const element = document.createElement('div');
-    element.className = 'fd-properties';
-    element.setAttribute('role', 'group');
+    const list = make('div', { class: 'fd-properties-list' });
+    const element = make('div', { class: 'fd-properties', role: 'group' }, list);
+    const columns = node.options?.['columns'];
+    if (columns === 2)
+        element.dataset['columns'] = '2';
+    const status = make('div', { class: 'fd-help', role: 'status', hidden: '' });
+    element.append(status);
+    // Adding one in place: its name and its kind, then Add.
+    const adding = fromRecord && node.options?.['add'] === true;
+    const addButton = make('button', { type: 'button', class: 'fd-button fd-button-link fd-property-add', hidden: '' }, `+ ${words.addProperty}`);
+    const newName = make('input', { type: 'text', class: 'fd-input', 'aria-label': words.propertyName, placeholder: words.propertyName, autocomplete: 'off' });
+    const kindNames = words.propertyTypes.split('|');
+    const newKind = make('select', { class: 'fd-input fd-select', 'aria-label': words.propertyType }, ...KINDS.map((kind, i) => make('option', { value: kind }, kindNames[i] ?? kind)));
+    const confirm = make('button', { type: 'button', class: 'fd-button fd-button-primary' }, words.add);
+    const cancel = make('button', { type: 'button', class: 'fd-button' }, words.cancel);
+    const newRow = make('div', { class: 'fd-property-new', hidden: '' }, newName, newKind, confirm, cancel);
+    if (adding)
+        element.append(addButton, newRow);
+    let focusAfter = null;
+    const closeNew = () => {
+        newRow.hidden = true;
+        addButton.hidden = false;
+    };
+    addButton.addEventListener('click', () => {
+        newRow.hidden = false;
+        addButton.hidden = true;
+        newName.value = '';
+        newKind.value = 'char';
+        newName.focus();
+    });
+    cancel.addEventListener('click', () => {
+        closeNew();
+        addButton.focus();
+    });
+    const add = () => {
+        const label = newName.value.trim();
+        if (!label)
+            return newName.focus();
+        const taken = new Set(rows.map((row) => row.definition.name));
+        let made = nameFrom(label);
+        for (let n = 2; taken.has(made); n++)
+            made = `${nameFrom(label)}_${n}`;
+        focusAfter = made;
+        closeNew();
+        void form.addDefinition(name, { name: made, label, type: newKind.value });
+    };
+    confirm.addEventListener('click', add);
+    newRow.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' && event.target === newName) {
+            event.preventDefault();
+            add();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            closeNew();
+            addButton.focus();
+        }
+    });
     let rows = [];
     let drawn = '';
     function draw(definitions) {
@@ -50,7 +126,7 @@ export const propertiesWidget = (context) => {
             const widget = createWidget({ ...context, form: properties, name: definition.name, field: propertyField, node: propertyNode, id: rowId });
             return { definition, widget };
         });
-        element.replaceChildren(...rows.map(({ definition, widget }) => {
+        list.replaceChildren(...rows.map(({ definition, widget }) => {
             const row = document.createElement('div');
             row.className = 'fd-property';
             row.dataset['type'] = definition.type;
@@ -61,13 +137,17 @@ export const propertiesWidget = (context) => {
             return row;
         }));
     }
+    // Definitions from the linked record: asked for once shown, then again as the link changes.
+    if (fromRecord && !form.getState().definitions[name])
+        form.loadDefinitions(name);
     return {
         element,
-        focus: () => rows[0]?.widget.focus(),
+        focus: () => (rows[0]?.widget ?? { focus: () => addButton.focus() }).focus(),
         destroy: () => rows.forEach((row) => row.widget.destroy?.()),
         update(state) {
             const values = current();
-            const definitions = declared ?? Object.keys(values).map((key) => guess(key, values[key]));
+            const loaded = fromRecord ? form.getState().definitions[name] : undefined;
+            const definitions = fromRecord ? (loaded?.definitions ?? []) : (declared ?? Object.keys(values).map((key) => guess(key, values[key])));
             const key = JSON.stringify(definitions);
             if (key !== drawn) {
                 drawn = key;
@@ -76,6 +156,17 @@ export const propertiesWidget = (context) => {
             for (const { definition, widget } of rows) {
                 widget.update({ value: values[definition.name] ?? null, values, readonly: state.readonly, required: false, invalid: false });
             }
+            status.textContent = loaded?.loading && !loaded.definitions ? words.loading : (loaded?.error ?? '');
+            status.hidden = !status.textContent;
+            if (adding) {
+                if (state.readonly)
+                    closeNew();
+                addButton.hidden = state.readonly || !newRow.hidden;
+            }
+            if (focusAfter && rows.some((row) => row.definition.name === focusAfter)) {
+                rows.find((row) => row.definition.name === focusAfter)?.widget.focus();
+                focusAfter = null;
+            }
         },
     };
 };

package/src/lib/properties.mjs.map

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

package/src/lib/read-text.d.mts

@@ -0,0 +1,25 @@
+import type { Field, FieldNode, Locale, Value, Values } from '@fieldia/core';
+import { type WidgetLabels } from './labels.mjs';
+import type { WidgetDialogs } from './widgets.mjs';
+/**
+ * A read-only value drawn as its words, as Flectra draws one: a choice by its
+ * label without an arrow, an amount with its currency, a date as a person
+ * writes it, a link by its record's name (a link that opens it, where the
+ * app can show it), a mail, phone or web address as a link to it, and long
+ * words wrapped rather than cut at a box's edge. Empty, it is empty.
+ */
+/** Whether a field drawn this way is shown as words while it is read-only: kinds whose box holds a value, not a table, tags or a file. */
+export declare function readsAsText(field: Field, node: FieldNode): boolean;
+export interface ReadText {
+    element: HTMLElement;
+    update(value: Value | undefined, values: Readonly<Values>): void;
+}
+export declare function readText(context: {
+    document: Document;
+    field: Field;
+    node: FieldNode;
+    id: string;
+    locale?: Locale;
+    labels?: WidgetLabels;
+    dialogs?: WidgetDialogs;
+}): ReadText;

package/src/lib/read-text.d.ts

@@ -0,0 +1,25 @@
+import type { Field, FieldNode, Locale, Value, Values } from '@fieldia/core';
+import { type WidgetLabels } from './labels';
+import type { WidgetDialogs } from './widgets';
+/**
+ * A read-only value drawn as its words, as Flectra draws one: a choice by its
+ * label without an arrow, an amount with its currency, a date as a person
+ * writes it, a link by its record's name (a link that opens it, where the
+ * app can show it), a mail, phone or web address as a link to it, and long
+ * words wrapped rather than cut at a box's edge. Empty, it is empty.
+ */
+/** Whether a field drawn this way is shown as words while it is read-only: kinds whose box holds a value, not a table, tags or a file. */
+export declare function readsAsText(field: Field, node: FieldNode): boolean;
+export interface ReadText {
+    element: HTMLElement;
+    update(value: Value | undefined, values: Readonly<Values>): void;
+}
+export declare function readText(context: {
+    document: Document;
+    field: Field;
+    node: FieldNode;
+    id: string;
+    locale?: Locale;
+    labels?: WidgetLabels;
+    dialogs?: WidgetDialogs;
+}): ReadText;

package/src/lib/read-text.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readsAsText = readsAsText;
+exports.readText = readText;
+const display_1 = require("./display");
+const labels_1 = require("./labels");
+const relations_1 = require("./relations");
+/**
+ * A read-only value drawn as its words, as Flectra draws one: a choice by its
+ * label without an arrow, an amount with its currency, a date as a person
+ * writes it, a link by its record's name (a link that opens it, where the
+ * app can show it), a mail, phone or web address as a link to it, and long
+ * words wrapped rather than cut at a box's edge. Empty, it is empty.
+ */
+/** Whether a field drawn this way is shown as words while it is read-only: kinds whose box holds a value, not a table, tags or a file. */
+function readsAsText(field, node) {
+    const widget = node.widget;
+    switch (field.type) {
+        case 'char':
+            return !widget || widget === 'email' || widget === 'phone' || widget === 'url';
+        case 'selection':
+            return !widget && !field.multiple && !field.optionsFrom;
+        case 'text':
+        case 'integer':
+        case 'float':
+            // Hours and per cents read as their widgets write them: 06:30, 35%.
+            return !widget || widget === 'duration' || widget === 'percentage';
+        case 'monetary':
+        case 'date':
+        case 'datetime':
+        case 'many2one':
+        case 'reference':
+            return !widget;
+        default:
+            return false;
+    }
+}
+const ADDRESSES = {
+    email: [/^[^\s@]+@[^\s@]+$/, 'mailto:'],
+    phone: [/^\+?[\d\s().-]{3,}$/, 'tel:'],
+    url: [/^https?:\/\/\S+$/i, ''],
+};
+/** A number's unit around it, as its box shows it inside — "3.00 Days" — and nothing round an empty one. */
+function withUnit(words, field, node, value) {
+    if ((field.type !== 'integer' && field.type !== 'float') || node.widget || value === null || value === undefined || words === '')
+        return words;
+    const unit = (key) => (typeof node.options?.[key] === 'string' ? node.options[key].trim() : '');
+    return [unit('prefix'), words, unit('suffix')].filter(Boolean).join(' ');
+}
+function readText(context) {
+    const { document: doc, field, node, locale = 'en', labels = labels_1.WIDGET_LABELS.en, dialogs } = context;
+    const element = doc.createElement('div');
+    element.className = 'fd-read-text';
+    element.id = `${context.id}-text`;
+    const relation = field.type === 'many2one' ? field.relation : null;
+    const opens = relation !== null && node.options?.['open'] !== false && !!dialogs?.canOpen(relation);
+    let drawn = '';
+    return {
+        element,
+        update(value, values) {
+            const words = withUnit((0, display_1.cellText)(field, value, values, locale, undefined, { widget: node.widget, options: node.options }), field, node, value);
+            const key = JSON.stringify([words, value ?? null]);
+            if (key === drawn)
+                return;
+            drawn = key;
+            const address = node.widget ? ADDRESSES[node.widget] : undefined;
+            const record = relation !== null && value && typeof value === 'object' && 'id' in value ? value : null;
+            let main;
+            if (address && typeof value === 'string' && address[0].test(value.trim())) {
+                const link = doc.createElement('a');
+                link.href = `${address[1]}${value.trim()}`;
+                if (node.widget === 'url')
+                    Object.assign(link, { target: '_blank', rel: 'noopener noreferrer' });
+                link.textContent = words;
+                main = link;
+            }
+            else if (opens && record) {
+                // The linked record, opened where the app can show it, as Flectra's read-only link.
+                const link = doc.createElement('button');
+                link.type = 'button';
+                link.className = 'fd-read-link';
+                link.textContent = words;
+                link.setAttribute('aria-label', labels.openNamed.replace('{name}', record.label));
+                link.addEventListener('click', () => void dialogs?.openRecord(relation, { recordId: record.id, title: record.label }));
+                main = link;
+            }
+            else
+                main = doc.createTextNode(words);
+            // A link's picture before its name, and lines of it — an address — under it, when the page asks.
+            const picture = record && node.options?.['avatar'] === true ? [(0, relations_1.linkAvatar)(doc, record)] : [];
+            const lines = [];
+            if (record?.details?.trim() && node.options?.['details'] === true) {
+                const box = doc.createElement('div');
+                box.className = 'fd-link-details';
+                (0, relations_1.detailLines)(box, record.details.trim());
+                lines.push(box);
+            }
+            element.replaceChildren(...picture, main, ...lines);
+        },
+    };
+}
+//# sourceMappingURL=read-text.js.map

package/src/lib/read-text.js.map

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

package/src/lib/read-text.mjs

@@ -0,0 +1,98 @@
+import { cellText } from './display.mjs';
+import { WIDGET_LABELS } from './labels.mjs';
+import { detailLines, linkAvatar } from './relations.mjs';
+/**
+ * A read-only value drawn as its words, as Flectra draws one: a choice by its
+ * label without an arrow, an amount with its currency, a date as a person
+ * writes it, a link by its record's name (a link that opens it, where the
+ * app can show it), a mail, phone or web address as a link to it, and long
+ * words wrapped rather than cut at a box's edge. Empty, it is empty.
+ */
+/** Whether a field drawn this way is shown as words while it is read-only: kinds whose box holds a value, not a table, tags or a file. */
+export function readsAsText(field, node) {
+    const widget = node.widget;
+    switch (field.type) {
+        case 'char':
+            return !widget || widget === 'email' || widget === 'phone' || widget === 'url';
+        case 'selection':
+            return !widget && !field.multiple && !field.optionsFrom;
+        case 'text':
+        case 'integer':
+        case 'float':
+            // Hours and per cents read as their widgets write them: 06:30, 35%.
+            return !widget || widget === 'duration' || widget === 'percentage';
+        case 'monetary':
+        case 'date':
+        case 'datetime':
+        case 'many2one':
+        case 'reference':
+            return !widget;
+        default:
+            return false;
+    }
+}
+const ADDRESSES = {
+    email: [/^[^\s@]+@[^\s@]+$/, 'mailto:'],
+    phone: [/^\+?[\d\s().-]{3,}$/, 'tel:'],
+    url: [/^https?:\/\/\S+$/i, ''],
+};
+/** A number's unit around it, as its box shows it inside — "3.00 Days" — and nothing round an empty one. */
+function withUnit(words, field, node, value) {
+    if ((field.type !== 'integer' && field.type !== 'float') || node.widget || value === null || value === undefined || words === '')
+        return words;
+    const unit = (key) => (typeof node.options?.[key] === 'string' ? node.options[key].trim() : '');
+    return [unit('prefix'), words, unit('suffix')].filter(Boolean).join(' ');
+}
+export function readText(context) {
+    const { document: doc, field, node, locale = 'en', labels = WIDGET_LABELS.en, dialogs } = context;
+    const element = doc.createElement('div');
+    element.className = 'fd-read-text';
+    element.id = `${context.id}-text`;
+    const relation = field.type === 'many2one' ? field.relation : null;
+    const opens = relation !== null && node.options?.['open'] !== false && !!dialogs?.canOpen(relation);
+    let drawn = '';
+    return {
+        element,
+        update(value, values) {
+            const words = withUnit(cellText(field, value, values, locale, undefined, { widget: node.widget, options: node.options }), field, node, value);
+            const key = JSON.stringify([words, value ?? null]);
+            if (key === drawn)
+                return;
+            drawn = key;
+            const address = node.widget ? ADDRESSES[node.widget] : undefined;
+            const record = relation !== null && value && typeof value === 'object' && 'id' in value ? value : null;
+            let main;
+            if (address && typeof value === 'string' && address[0].test(value.trim())) {
+                const link = doc.createElement('a');
+                link.href = `${address[1]}${value.trim()}`;
+                if (node.widget === 'url')
+                    Object.assign(link, { target: '_blank', rel: 'noopener noreferrer' });
+                link.textContent = words;
+                main = link;
+            }
+            else if (opens && record) {
+                // The linked record, opened where the app can show it, as Flectra's read-only link.
+                const link = doc.createElement('button');
+                link.type = 'button';
+                link.className = 'fd-read-link';
+                link.textContent = words;
+                link.setAttribute('aria-label', labels.openNamed.replace('{name}', record.label));
+                link.addEventListener('click', () => void dialogs?.openRecord(relation, { recordId: record.id, title: record.label }));
+                main = link;
+            }
+            else
+                main = doc.createTextNode(words);
+            // A link's picture before its name, and lines of it — an address — under it, when the page asks.
+            const picture = record && node.options?.['avatar'] === true ? [linkAvatar(doc, record)] : [];
+            const lines = [];
+            if (record?.details?.trim() && node.options?.['details'] === true) {
+                const box = doc.createElement('div');
+                box.className = 'fd-link-details';
+                detailLines(box, record.details.trim());
+                lines.push(box);
+            }
+            element.replaceChildren(...picture, main, ...lines);
+        },
+    };
+}
+//# sourceMappingURL=read-text.mjs.map

package/src/lib/read-text.mjs.map

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

package/src/lib/relations.d.mts

@@ -1,4 +1,16 @@
+import type { RelatedRecord } from '@fieldia/core';
 import type { WidgetFactory } from './widgets.mjs';
+/**
+ * A linked record's picture, as Flectra's avatar widgets show one: its own,
+ * or the initials of its name in a circle when it has none.
+ */
+export declare function linkAvatar(doc: Document, record: RelatedRecord | null | undefined, into?: HTMLElement): HTMLElement;
+/**
+ * A linked record's lines under it — an address, a tax number — each a line
+ * of its own that reads its own way: an address in English stays in its order
+ * on a page read right to left, still lined up with the page.
+ */
+export declare function detailLines(box: HTMLElement, text: string): void;
 export declare const many2oneWidget: WidgetFactory;
 export declare const tagsWidget: WidgetFactory;
 /**

package/src/lib/relations.d.ts

@@ -1,4 +1,16 @@
+import type { RelatedRecord } from '@fieldia/core';
 import type { WidgetFactory } from './widgets';
+/**
+ * A linked record's picture, as Flectra's avatar widgets show one: its own,
+ * or the initials of its name in a circle when it has none.
+ */
+export declare function linkAvatar(doc: Document, record: RelatedRecord | null | undefined, into?: HTMLElement): HTMLElement;
+/**
+ * A linked record's lines under it — an address, a tax number — each a line
+ * of its own that reads its own way: an address in English stays in its order
+ * on a page read right to left, still lined up with the page.
+ */
+export declare function detailLines(box: HTMLElement, text: string): void;
 export declare const many2oneWidget: WidgetFactory;
 export declare const tagsWidget: WidgetFactory;
 /**