@fieldia/widgets 0.0.0-stage → 0.1.0

package/src/lib/files.mjs

@@ -0,0 +1,112 @@
+import { formatBytes } from '@fieldia/core';
+import { WIDGET_LABELS } from './labels.mjs';
+/**
+ * File and image fields. A chosen or dropped file is read into the value as
+ * base64, the way a backend's binary fields carry it; a stored one may carry
+ * a `url` instead. Size and type limits are checked by the field's validation.
+ */
+function read(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const url = String(reader.result ?? '');
+            resolve({ name: file.name, type: file.type, size: file.size, data: url.slice(url.indexOf(',') + 1) });
+        };
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(file);
+    });
+}
+function fileWidget(kind) {
+    return ({ form, name, field, id, document, labels = WIDGET_LABELS.en }) => {
+        const element = document.createElement('div');
+        element.className = `fd-file fd-file-${kind}`;
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.id = id;
+        input.className = 'fd-sr-only';
+        const accept = field.type === 'binary' ? field.accept : kind === 'image' ? ['image/*'] : undefined;
+        if (accept)
+            input.accept = accept.join(',');
+        const preview = document.createElement('img');
+        preview.className = 'fd-image-preview';
+        preview.alt = field.label;
+        preview.hidden = true;
+        const pick = document.createElement('label');
+        pick.className = kind === 'image' ? 'fd-file-pick fd-image-pick' : 'fd-file-pick';
+        pick.htmlFor = id;
+        const pickText = document.createElement('span');
+        pickText.className = 'fd-button';
+        pickText.textContent = kind === 'image' ? labels.uploadImage : labels.upload;
+        const hint = document.createElement('span');
+        hint.className = 'fd-help';
+        hint.textContent = labels.dropHere;
+        pick.append(pickText, hint);
+        const chosen = document.createElement('div');
+        chosen.className = 'fd-file-chosen';
+        const fileName = document.createElement('span');
+        fileName.className = 'fd-file-name';
+        const replace = document.createElement('button');
+        replace.type = 'button';
+        replace.className = 'fd-button fd-button-link';
+        replace.textContent = labels.replace;
+        replace.addEventListener('click', () => input.click());
+        const remove = document.createElement('button');
+        remove.type = 'button';
+        remove.className = 'fd-button fd-button-link';
+        remove.textContent = labels.removeFile;
+        remove.addEventListener('click', () => form.setValue(name, null));
+        chosen.append(fileName, replace, remove);
+        element.append(input, ...(kind === 'image' ? [preview] : []), pick, chosen);
+        let readonly = false;
+        const take = async (file) => {
+            if (!file || readonly)
+                return;
+            form.setValue(name, await read(file));
+        };
+        input.addEventListener('change', () => {
+            void take(input.files?.[0]);
+            input.value = '';
+        });
+        element.addEventListener('dragover', (event) => {
+            if (readonly)
+                return;
+            event.preventDefault();
+            element.classList.add('fd-dragging');
+        });
+        element.addEventListener('dragleave', () => element.classList.remove('fd-dragging'));
+        element.addEventListener('drop', (event) => {
+            event.preventDefault();
+            element.classList.remove('fd-dragging');
+            void take(event.dataTransfer?.files?.[0]);
+        });
+        return {
+            element,
+            focus: () => (pick.hidden ? replace : input).focus(),
+            update(state) {
+                readonly = state.readonly;
+                const file = state.value;
+                pick.hidden = !!file || readonly;
+                chosen.hidden = !file;
+                replace.hidden = remove.hidden = readonly;
+                input.disabled = readonly;
+                input.setAttribute('aria-invalid', String(state.invalid));
+                if (state.describedBy)
+                    input.setAttribute('aria-describedby', state.describedBy);
+                fileName.textContent = file ? `${file.name} · ${formatBytes(file.size)}` : '';
+                if (kind === 'image') {
+                    const src = file ? (file.data ? `data:${file.type};base64,${file.data}` : file.url ?? '') : '';
+                    preview.hidden = !src;
+                    if (preview.getAttribute('src') !== src) {
+                        if (src)
+                            preview.src = src;
+                        else
+                            preview.removeAttribute('src');
+                    }
+                }
+            },
+        };
+    };
+}
+export const binaryWidget = fileWidget('binary');
+export const imageWidget = fileWidget('image');
+//# sourceMappingURL=files.mjs.map

package/src/lib/files.mjs.map

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

package/src/lib/labels.d.mts

@@ -0,0 +1,17 @@
+import type { Locale } from '@fieldia/core';
+/** Every word a widget shows on its own. `{label}` and `{name}` are filled in. */
+export interface WidgetLabels {
+    search: string;
+    noResults: string;
+    remove: string;
+    clear: string;
+    addLine: string;
+    deleteLine: string;
+    upload: string;
+    uploadImage: string;
+    replace: string;
+    removeFile: string;
+    dropHere: string;
+    invalidJson: string;
+}
+export declare const WIDGET_LABELS: Record<Locale, WidgetLabels>;

package/src/lib/labels.d.ts

@@ -0,0 +1,17 @@
+import type { Locale } from '@fieldia/core';
+/** Every word a widget shows on its own. `{label}` and `{name}` are filled in. */
+export interface WidgetLabels {
+    search: string;
+    noResults: string;
+    remove: string;
+    clear: string;
+    addLine: string;
+    deleteLine: string;
+    upload: string;
+    uploadImage: string;
+    replace: string;
+    removeFile: string;
+    dropHere: string;
+    invalidJson: string;
+}
+export declare const WIDGET_LABELS: Record<Locale, WidgetLabels>;

package/src/lib/labels.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WIDGET_LABELS = void 0;
+exports.WIDGET_LABELS = {
+    en: {
+        search: 'Search…',
+        noResults: 'No results',
+        remove: 'Remove {name}',
+        clear: 'Clear {label}',
+        addLine: 'Add a line',
+        deleteLine: 'Delete line',
+        upload: 'Upload a file',
+        uploadImage: 'Add a photo',
+        replace: 'Replace',
+        removeFile: 'Remove',
+        dropHere: 'or drop it here',
+        invalidJson: 'Not valid JSON',
+    },
+    ar: {
+        search: 'بحث…',
+        noResults: 'لا توجد نتائج',
+        remove: 'إزالة {name}',
+        clear: 'مسح {label}',
+        addLine: 'إضافة سطر',
+        deleteLine: 'حذف السطر',
+        upload: 'رفع ملف',
+        uploadImage: 'إضافة صورة',
+        replace: 'استبدال',
+        removeFile: 'إزالة',
+        dropHere: 'أو أفلته هنا',
+        invalidJson: 'ليس JSON صالحًا',
+    },
+    de: {
+        search: 'Suchen…',
+        noResults: 'Keine Ergebnisse',
+        remove: '{name} entfernen',
+        clear: '{label} leeren',
+        addLine: 'Zeile hinzufügen',
+        deleteLine: 'Zeile löschen',
+        upload: 'Datei hochladen',
+        uploadImage: 'Foto hinzufügen',
+        replace: 'Ersetzen',
+        removeFile: 'Entfernen',
+        dropHere: 'oder hier ablegen',
+        invalidJson: 'Kein gültiges JSON',
+    },
+    fr: {
+        search: 'Rechercher…',
+        noResults: 'Aucun résultat',
+        remove: 'Retirer {name}',
+        clear: 'Effacer {label}',
+        addLine: 'Ajouter une ligne',
+        deleteLine: 'Supprimer la ligne',
+        upload: 'Téléverser un fichier',
+        uploadImage: 'Ajouter une photo',
+        replace: 'Remplacer',
+        removeFile: 'Retirer',
+        dropHere: 'ou déposez-le ici',
+        invalidJson: 'JSON invalide',
+    },
+};
+//# sourceMappingURL=labels.js.map

package/src/lib/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/labels.ts"],"names":[],"mappings":";;;AAkBa,QAAA,aAAa,GAAiC;IACzD,EAAE,EAAE;QACF,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;QACtB,OAAO,EAAE,YAAY;QACrB,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,iBAAiB;QAC3B,WAAW,EAAE,gBAAgB;KAC9B;IACD,EAAE,EAAE;QACF,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,eAAe;QAC1B,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,YAAY;QACzB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,cAAc;QACxB,WAAW,EAAE,iBAAiB;KAC/B;IACD,EAAE,EAAE;QACF,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,kBAAkB;QAC7B,MAAM,EAAE,kBAAkB;QAC1B,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,kBAAkB;QAC3B,UAAU,EAAE,eAAe;QAC3B,MAAM,EAAE,iBAAiB;QACzB,WAAW,EAAE,iBAAiB;QAC9B,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,WAAW;QACvB,QAAQ,EAAE,mBAAmB;QAC7B,WAAW,EAAE,oBAAoB;KAClC;IACD,EAAE,EAAE;QACF,MAAM,EAAE,aAAa;QACrB,SAAS,EAAE,gBAAgB;QAC3B,MAAM,EAAE,gBAAgB;QACxB,KAAK,EAAE,iBAAiB;QACxB,OAAO,EAAE,mBAAmB;QAC5B,UAAU,EAAE,oBAAoB;QAChC,MAAM,EAAE,uBAAuB;QAC/B,WAAW,EAAE,mBAAmB;QAChC,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,mBAAmB;QAC7B,WAAW,EAAE,eAAe;KAC7B;CACF,CAAC"}

package/src/lib/labels.mjs

@@ -0,0 +1,59 @@
+export const WIDGET_LABELS = {
+    en: {
+        search: 'Search…',
+        noResults: 'No results',
+        remove: 'Remove {name}',
+        clear: 'Clear {label}',
+        addLine: 'Add a line',
+        deleteLine: 'Delete line',
+        upload: 'Upload a file',
+        uploadImage: 'Add a photo',
+        replace: 'Replace',
+        removeFile: 'Remove',
+        dropHere: 'or drop it here',
+        invalidJson: 'Not valid JSON',
+    },
+    ar: {
+        search: 'بحث…',
+        noResults: 'لا توجد نتائج',
+        remove: 'إزالة {name}',
+        clear: 'مسح {label}',
+        addLine: 'إضافة سطر',
+        deleteLine: 'حذف السطر',
+        upload: 'رفع ملف',
+        uploadImage: 'إضافة صورة',
+        replace: 'استبدال',
+        removeFile: 'إزالة',
+        dropHere: 'أو أفلته هنا',
+        invalidJson: 'ليس JSON صالحًا',
+    },
+    de: {
+        search: 'Suchen…',
+        noResults: 'Keine Ergebnisse',
+        remove: '{name} entfernen',
+        clear: '{label} leeren',
+        addLine: 'Zeile hinzufügen',
+        deleteLine: 'Zeile löschen',
+        upload: 'Datei hochladen',
+        uploadImage: 'Foto hinzufügen',
+        replace: 'Ersetzen',
+        removeFile: 'Entfernen',
+        dropHere: 'oder hier ablegen',
+        invalidJson: 'Kein gültiges JSON',
+    },
+    fr: {
+        search: 'Rechercher…',
+        noResults: 'Aucun résultat',
+        remove: 'Retirer {name}',
+        clear: 'Effacer {label}',
+        addLine: 'Ajouter une ligne',
+        deleteLine: 'Supprimer la ligne',
+        upload: 'Téléverser un fichier',
+        uploadImage: 'Ajouter une photo',
+        replace: 'Remplacer',
+        removeFile: 'Retirer',
+        dropHere: 'ou déposez-le ici',
+        invalidJson: 'JSON invalide',
+    },
+};
+//# sourceMappingURL=labels.mjs.map

package/src/lib/labels.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/labels.ts"],"names":[],"mappings":"AAkBA,MAAM,CAAC,MAAM,aAAa,GAAiC;IACzD,EAAE,EAAE;QACF,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;QACtB,OAAO,EAAE,YAAY;QACrB,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,iBAAiB;QAC3B,WAAW,EAAE,gBAAgB;KAC9B;IACD,EAAE,EAAE;QACF,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,eAAe;QAC1B,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,YAAY;QACzB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,cAAc;QACxB,WAAW,EAAE,iBAAiB;KAC/B;IACD,EAAE,EAAE;QACF,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,kBAAkB;QAC7B,MAAM,EAAE,kBAAkB;QAC1B,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,kBAAkB;QAC3B,UAAU,EAAE,eAAe;QAC3B,MAAM,EAAE,iBAAiB;QACzB,WAAW,EAAE,iBAAiB;QAC9B,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,WAAW;QACvB,QAAQ,EAAE,mBAAmB;QAC7B,WAAW,EAAE,oBAAoB;KAClC;IACD,EAAE,EAAE;QACF,MAAM,EAAE,aAAa;QACrB,SAAS,EAAE,gBAAgB;QAC3B,MAAM,EAAE,gBAAgB;QACxB,KAAK,EAAE,iBAAiB;QACxB,OAAO,EAAE,mBAAmB;QAC5B,UAAU,EAAE,oBAAoB;QAChC,MAAM,EAAE,uBAAuB;QAC/B,WAAW,EAAE,mBAAmB;QAChC,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,mBAAmB;QAC7B,WAAW,EAAE,eAAe;KAC7B;CACF,CAAC"}

package/src/lib/lines.d.mts

@@ -0,0 +1,2 @@
+import { type WidgetFactory } from './widgets.mjs';
+export declare const linesWidget: WidgetFactory;

package/src/lib/lines.d.ts

@@ -0,0 +1,2 @@
+import { type WidgetFactory } from './widgets';
+export declare const linesWidget: WidgetFactory;

package/src/lib/lines.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linesWidget = void 0;
+const labels_1 = require("./labels");
+const widgets_1 = require("./widgets");
+/** The form a cell sees: the line's values, written back into the line. */
+function lineForm(form, field, key) {
+    const values = () => ((form.getState().values[field] ?? []).find((l) => l.key === key)?.values ?? {});
+    return {
+        ...form,
+        getState: () => ({ ...form.getState(), values: values() }),
+        setValue: (name, value) => form.updateLine(field, key, name, value),
+        search: (name, query, limit) => form.searchLine(field, key, name, query, limit),
+    };
+}
+const linesWidget = ({ form, name, field, node, id, document, labels = labels_1.WIDGET_LABELS.en }) => {
+    const def = field;
+    const columns = (node.columns ?? Object.keys(def.fields)).filter((column) => def.fields[column]);
+    const element = document.createElement('div');
+    element.className = 'fd-lines';
+    element.id = id;
+    element.setAttribute('role', 'group');
+    const scroller = document.createElement('div');
+    scroller.className = 'fd-lines-scroll';
+    const table = document.createElement('table');
+    table.className = 'fd-lines-table';
+    const head = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    for (const column of columns) {
+        const th = document.createElement('th');
+        th.scope = 'col';
+        th.textContent = def.fields[column].label;
+        headRow.append(th);
+    }
+    const lastTh = document.createElement('th');
+    lastTh.className = 'fd-lines-tools';
+    headRow.append(lastTh);
+    head.append(headRow);
+    const body = document.createElement('tbody');
+    table.append(head, body);
+    scroller.append(table);
+    const add = document.createElement('button');
+    add.type = 'button';
+    add.className = 'fd-button fd-button-link fd-lines-add';
+    add.textContent = `+ ${labels.addLine}`;
+    element.append(scroller, add);
+    const rows = new Map();
+    let focusNew = null;
+    let readonly = false;
+    add.addEventListener('click', () => {
+        focusNew = form.addLine(name);
+        const row = rows.get(focusNew);
+        if (row) {
+            row.cells[0]?.widget.focus();
+            focusNew = null;
+        }
+    });
+    function makeRow(line) {
+        const tr = document.createElement('tr');
+        tr.dataset['line'] = line.key;
+        const adapter = lineForm(form, name, line.key);
+        const cells = columns.map((column) => {
+            const sub = def.fields[column];
+            const cellId = `${id}-${line.key}-${column}`;
+            const subNode = { type: 'field', id: `${node.id}.${line.key}.${column}`, field: column };
+            const widget = (0, widgets_1.createWidget)({ form: adapter, name: column, field: sub, node: subNode, id: cellId, document, labels });
+            const td = document.createElement('td');
+            const label = document.createElement('label');
+            label.className = 'fd-sr-only';
+            label.htmlFor = cellId;
+            label.textContent = sub.label;
+            const error = document.createElement('div');
+            error.className = 'fd-cell-error';
+            error.hidden = true;
+            td.append(label, widget.element, error);
+            tr.append(td);
+            return { name: column, def: sub, widget, error };
+        });
+        const tools = document.createElement('td');
+        tools.className = 'fd-lines-tools';
+        const remove = document.createElement('button');
+        remove.type = 'button';
+        remove.className = 'fd-line-delete';
+        remove.textContent = '×';
+        remove.setAttribute('aria-label', labels.deleteLine);
+        remove.addEventListener('click', () => form.removeLine(name, line.key));
+        tools.append(remove);
+        tr.append(tools);
+        return { element: tr, cells, remove };
+    }
+    return {
+        element,
+        focus: () => (body.querySelector('input, select, textarea') ?? add).focus(),
+        update(state) {
+            readonly = state.readonly;
+            add.hidden = readonly;
+            const current = state.value ?? [];
+            const errors = form.getState().errors;
+            const keep = new Set(current.map((line) => line.key));
+            for (const [key, row] of rows) {
+                if (!keep.has(key)) {
+                    row.element.remove();
+                    rows.delete(key);
+                }
+            }
+            current.forEach((line, index) => {
+                let row = rows.get(line.key);
+                if (!row) {
+                    row = makeRow(line);
+                    rows.set(line.key, row);
+                }
+                if (body.children[index] !== row.element)
+                    body.insertBefore(row.element, body.children[index] ?? null);
+                row.remove.hidden = readonly;
+                if (readonly)
+                    row.remove.remove();
+                else if (!row.remove.isConnected)
+                    row.element.lastElementChild?.append(row.remove);
+                for (const cell of row.cells) {
+                    const message = errors[`${name}.${line.key}.${cell.name}`];
+                    cell.error.hidden = !message;
+                    cell.error.textContent = message ?? '';
+                    cell.widget.update({
+                        value: line.values[cell.name],
+                        values: line.values,
+                        readonly: readonly || cell.def.readonly === true,
+                        required: cell.def.required === true,
+                        invalid: !!message,
+                    });
+                }
+            });
+            if (focusNew && rows.has(focusNew)) {
+                rows.get(focusNew)?.cells[0]?.widget.focus();
+                focusNew = null;
+            }
+        },
+    };
+};
+exports.linesWidget = linesWidget;
+//# sourceMappingURL=lines.js.map

package/src/lib/lines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lines.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/lines.ts"],"names":[],"mappings":";;;AACA,qCAAyC;AACzC,uCAA0E;AAe1E,2EAA2E;AAC3E,SAAS,QAAQ,CAAC,IAAU,EAAE,KAAa,EAAE,GAAW;IACtD,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,CAAC,CAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,KAAK,CAAmB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC;IACzH,OAAO;QACL,GAAG,IAAI;QACP,QAAQ,EAAE,GAAc,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;QACrE,QAAQ,EAAE,CAAC,IAAY,EAAE,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClF,MAAM,EAAE,CAAC,IAAY,EAAE,KAAa,EAAE,KAAc,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC;KACzG,CAAC;AACJ,CAAC;AAEM,MAAM,WAAW,GAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,sBAAa,CAAC,EAAE,EAAE,EAAE,EAAE;IACjH,MAAM,GAAG,GAAG,KAA6C,CAAC;IAC1D,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IACjG,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG,UAAU,CAAC;IAC/B,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,QAAQ,CAAC,SAAS,GAAG,iBAAiB,CAAC;IACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC;IACnC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7C,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;QACjB,EAAE,CAAC,WAAW,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;QAC1C,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC;IACD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,GAAG,gBAAgB,CAAC;IACpC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACvB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACzB,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC7C,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC;IACpB,GAAG,CAAC,SAAS,GAAG,uCAAuC,CAAC;IACxD,GAAG,CAAC,WAAW,GAAG,KAAK,MAAM,CAAC,OAAO,EAAE,CAAC;IACxC,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE9B,MAAM,IAAI,GAAG,IAAI,GAAG,EAAe,CAAC;IACpC,IAAI,QAAQ,GAAkB,IAAI,CAAC;IACnC,IAAI,QAAQ,GAAG,KAAK,CAAC;IAErB,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACjC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC/B,IAAI,GAAG,EAAE,CAAC;YACR,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;YAC7B,QAAQ,GAAG,IAAI,CAAC;QAClB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,OAAO,CAAC,IAAU;QACzB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;QAC9B,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACnC,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC/B,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,EAAE,CAAC;YAC7C,MAAM,OAAO,GAAc,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;YACpG,MAAM,MAAM,GAAG,IAAA,sBAAY,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAY,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;YAC/H,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC9C,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;YAC/B,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YACvB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC,KAAK,CAAC;YAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5C,KAAK,CAAC,SAAS,GAAG,eAAe,CAAC;YAClC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;YACpB,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACxC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACd,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QACnD,CAAC,CAAC,CAAC;QACH,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3C,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC;QACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;QACvB,MAAM,CAAC,SAAS,GAAG,gBAAgB,CAAC;QACpC,MAAM,CAAC,WAAW,GAAG,GAAG,CAAC;QACzB,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;QACrD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACxE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACrB,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjB,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IACxC,CAAC;IAED,OAAO;QACL,OAAO;QACP,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,CAAc,yBAAyB,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE;QACxF,MAAM,CAAC,KAAK;YACV,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;YAC1B,GAAG,CAAC,MAAM,GAAG,QAAQ,CAAC;YACtB,MAAM,OAAO,GAAI,KAAK,CAAC,KAAuB,IAAI,EAAE,CAAC;YACrD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC;YACtC,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACtD,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;gBAC9B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBACnB,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;oBACrB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACnB,CAAC;YACH,CAAC;YACD,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC9B,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC7B,IAAI,CAAC,GAAG,EAAE,CAAC;oBACT,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;oBACpB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;gBAC1B,CAAC;gBACD,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO;oBAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;gBACvG,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC;gBAC7B,IAAI,QAAQ;oBAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;qBAC7B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW;oBAAE,GAAG,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBACnF,KAAK,MAAM,IAAI,IAAI,GAAG,CAAC,KAAK,EAAE,CAAC;oBAC7B,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;oBAC3D,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC;oBAC7B,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,OAAO,IAAI,EAAE,CAAC;oBACvC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;wBACjB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;wBAC7B,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,KAAK,IAAI;wBAChD,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,KAAK,IAAI;wBACpC,OAAO,EAAE,CAAC,CAAC,OAAO;qBACnB,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;YACH,IAAI,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACnC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;gBAC7C,QAAQ,GAAG,IAAI,CAAC;YAClB,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AA3HW,QAAA,WAAW,eA2HtB"}

package/src/lib/lines.mjs

@@ -0,0 +1,136 @@
+import { WIDGET_LABELS } from './labels.mjs';
+import { createWidget } from './widgets.mjs';
+/** The form a cell sees: the line's values, written back into the line. */
+function lineForm(form, field, key) {
+    const values = () => ((form.getState().values[field] ?? []).find((l) => l.key === key)?.values ?? {});
+    return {
+        ...form,
+        getState: () => ({ ...form.getState(), values: values() }),
+        setValue: (name, value) => form.updateLine(field, key, name, value),
+        search: (name, query, limit) => form.searchLine(field, key, name, query, limit),
+    };
+}
+export const linesWidget = ({ form, name, field, node, id, document, labels = WIDGET_LABELS.en }) => {
+    const def = field;
+    const columns = (node.columns ?? Object.keys(def.fields)).filter((column) => def.fields[column]);
+    const element = document.createElement('div');
+    element.className = 'fd-lines';
+    element.id = id;
+    element.setAttribute('role', 'group');
+    const scroller = document.createElement('div');
+    scroller.className = 'fd-lines-scroll';
+    const table = document.createElement('table');
+    table.className = 'fd-lines-table';
+    const head = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    for (const column of columns) {
+        const th = document.createElement('th');
+        th.scope = 'col';
+        th.textContent = def.fields[column].label;
+        headRow.append(th);
+    }
+    const lastTh = document.createElement('th');
+    lastTh.className = 'fd-lines-tools';
+    headRow.append(lastTh);
+    head.append(headRow);
+    const body = document.createElement('tbody');
+    table.append(head, body);
+    scroller.append(table);
+    const add = document.createElement('button');
+    add.type = 'button';
+    add.className = 'fd-button fd-button-link fd-lines-add';
+    add.textContent = `+ ${labels.addLine}`;
+    element.append(scroller, add);
+    const rows = new Map();
+    let focusNew = null;
+    let readonly = false;
+    add.addEventListener('click', () => {
+        focusNew = form.addLine(name);
+        const row = rows.get(focusNew);
+        if (row) {
+            row.cells[0]?.widget.focus();
+            focusNew = null;
+        }
+    });
+    function makeRow(line) {
+        const tr = document.createElement('tr');
+        tr.dataset['line'] = line.key;
+        const adapter = lineForm(form, name, line.key);
+        const cells = columns.map((column) => {
+            const sub = def.fields[column];
+            const cellId = `${id}-${line.key}-${column}`;
+            const subNode = { type: 'field', id: `${node.id}.${line.key}.${column}`, field: column };
+            const widget = createWidget({ form: adapter, name: column, field: sub, node: subNode, id: cellId, document, labels });
+            const td = document.createElement('td');
+            const label = document.createElement('label');
+            label.className = 'fd-sr-only';
+            label.htmlFor = cellId;
+            label.textContent = sub.label;
+            const error = document.createElement('div');
+            error.className = 'fd-cell-error';
+            error.hidden = true;
+            td.append(label, widget.element, error);
+            tr.append(td);
+            return { name: column, def: sub, widget, error };
+        });
+        const tools = document.createElement('td');
+        tools.className = 'fd-lines-tools';
+        const remove = document.createElement('button');
+        remove.type = 'button';
+        remove.className = 'fd-line-delete';
+        remove.textContent = '×';
+        remove.setAttribute('aria-label', labels.deleteLine);
+        remove.addEventListener('click', () => form.removeLine(name, line.key));
+        tools.append(remove);
+        tr.append(tools);
+        return { element: tr, cells, remove };
+    }
+    return {
+        element,
+        focus: () => (body.querySelector('input, select, textarea') ?? add).focus(),
+        update(state) {
+            readonly = state.readonly;
+            add.hidden = readonly;
+            const current = state.value ?? [];
+            const errors = form.getState().errors;
+            const keep = new Set(current.map((line) => line.key));
+            for (const [key, row] of rows) {
+                if (!keep.has(key)) {
+                    row.element.remove();
+                    rows.delete(key);
+                }
+            }
+            current.forEach((line, index) => {
+                let row = rows.get(line.key);
+                if (!row) {
+                    row = makeRow(line);
+                    rows.set(line.key, row);
+                }
+                if (body.children[index] !== row.element)
+                    body.insertBefore(row.element, body.children[index] ?? null);
+                row.remove.hidden = readonly;
+                if (readonly)
+                    row.remove.remove();
+                else if (!row.remove.isConnected)
+                    row.element.lastElementChild?.append(row.remove);
+                for (const cell of row.cells) {
+                    const message = errors[`${name}.${line.key}.${cell.name}`];
+                    cell.error.hidden = !message;
+                    cell.error.textContent = message ?? '';
+                    cell.widget.update({
+                        value: line.values[cell.name],
+                        values: line.values,
+                        readonly: readonly || cell.def.readonly === true,
+                        required: cell.def.required === true,
+                        invalid: !!message,
+                    });
+                }
+            });
+            if (focusNew && rows.has(focusNew)) {
+                rows.get(focusNew)?.cells[0]?.widget.focus();
+                focusNew = null;
+            }
+        },
+    };
+};
+//# sourceMappingURL=lines.mjs.map

package/src/lib/lines.mjs.map

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

package/src/lib/relations.d.mts

@@ -0,0 +1,6 @@
+import type { WidgetFactory } from './widgets.mjs';
+export declare const many2oneWidget: WidgetFactory;
+export declare const tagsWidget: WidgetFactory;
+/** Every record as a checkbox. For short lists: it loads up to 50. */
+export declare const linkCheckboxesWidget: WidgetFactory;
+export declare const referenceWidget: WidgetFactory;

package/src/lib/relations.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetFactory } from './widgets';
+export declare const many2oneWidget: WidgetFactory;
+export declare const tagsWidget: WidgetFactory;
+/** Every record as a checkbox. For short lists: it loads up to 50. */
+export declare const linkCheckboxesWidget: WidgetFactory;
+export declare const referenceWidget: WidgetFactory;