@sincpro/web-framework 0.0.0-stage → 0.2.0

package/dist/web/list/search.js

@@ -0,0 +1,72 @@
+import { labelOf } from "@sincpro/criteria";
+/**
+ * The model, as web-ui's search bar and criteria builder read it.
+ *
+ * Context: web-ui keeps its OWN vocabulary of a model (`ModelDefinition`), written before the
+ * framework settled its wire, and the two drifted: `identifiedBy` against `identified_by`, one
+ * `translations` object against a `label` on each field. web-ui is right to own it — it is a
+ * design system and must not depend on one backend — so the translation lives here, the one
+ * place that knows both.
+ *
+ * Known gap: web-ui's field has `choices` but no word for each choice, so the bar offers an
+ * enum's raw values («paid») where a cell says «Pagada». Fixing it is web-ui's.
+ */
+export function modelOf(meta, locale) {
+    const names = Object.keys(meta.fields);
+    return {
+        aggregate: meta.aggregate,
+        identity: meta.identity,
+        fields: Object.fromEntries(Object.entries(meta.fields).map(([name, field]) => [
+            name,
+            {
+                type: field.type,
+                nullable: field.nullable,
+                sortable: field.sortable,
+                ops: field.ops,
+                kind: field.kind,
+                ...(field.many === undefined ? {} : { many: field.many }),
+                ...(field.relation === undefined ? {} : { relation: field.relation }),
+                ...(field.identified_by === undefined ? {} : { identifiedBy: field.identified_by }),
+                ...(field.choices && field.choices.length > 0 ? { choices: field.choices } : {}),
+            },
+        ])),
+        translations: {
+            name: {
+                default: meta.name?.[locale ?? ""] ?? meta.name?.["default"] ?? meta.aggregate,
+            },
+            labels: Object.fromEntries(names.map((name) => [name, { default: labelOf(meta, name, locale) }])),
+        },
+    };
+}
+/** The fields its search template looks in, as named in `meta.search`. */
+function searchedFields(meta) {
+    const found = [];
+    const walk = (node) => {
+        if (typeof node !== "object" || node === null)
+            return;
+        const record = node;
+        if (typeof record["field"] === "string")
+            found.push(record["field"]);
+        for (const value of Object.values(record)) {
+            if (Array.isArray(value))
+                value.forEach(walk);
+            else
+                walk(value);
+        }
+    };
+    walk(meta.search?.["where"]);
+    return found;
+}
+/**
+ * Where a typed text can be looked for: the fields the entity's own search template names
+ * first (what «search by name» means for THIS entity), then every other text field it can
+ * filter on.
+ */
+export function facetsOf(meta, locale) {
+    const first = searchedFields(meta);
+    const texts = Object.entries(meta.fields)
+        .filter(([, field]) => field.type === "text" && field.ops.includes("like") && !field.choices?.length)
+        .map(([name]) => name);
+    const order = [...new Set([...first, ...texts])];
+    return order.map((name) => ({ id: name, label: labelOf(meta, name, locale) }));
+}

package/dist/web/record/CommandButton.d.ts

@@ -0,0 +1,22 @@
+import type { AnyRecord } from "@sincpro/criteria";
+import type { Entity } from "../../core/entity.js";
+/**
+ * An entity's Command as a button.
+ *
+ * Context: two kinds of action, two gestures. One that can be undone runs on the click — asking
+ * «are you sure?» before every confirm teaches people to click «yes» without reading. One that
+ * destroys (`destructive`) asks the server FIRST what it would do — the Command's dry run — and
+ * shows THAT in the window: the confirmation is the consequence, in the server's words, not a
+ * question. A refusal is shown where it happened, with what to do.
+ */
+export declare function CommandButton<T extends AnyRecord, R = unknown>({ entity, command, id, body, label, destructive, role, onDone, }: {
+    entity: Entity<T>;
+    command: string;
+    id?: string;
+    body?: AnyRecord;
+    label: string;
+    /** Asks the server what it would do before doing it. */
+    destructive?: boolean;
+    role?: "primary" | "secondary" | "ghost";
+    onDone?: (answer: R) => void;
+}): import("react").JSX.Element;

package/dist/web/record/CommandButton.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { frameworkCopy } from "../../core/copy.js";
+import { useCommand } from "../../react/useCommand.js";
+import { Refused } from "../Refused.js";
+import { Button, Dialog } from "@sincpro/web-ui";
+import { useState } from "react";
+/**
+ * An entity's Command as a button.
+ *
+ * Context: two kinds of action, two gestures. One that can be undone runs on the click — asking
+ * «are you sure?» before every confirm teaches people to click «yes» without reading. One that
+ * destroys (`destructive`) asks the server FIRST what it would do — the Command's dry run — and
+ * shows THAT in the window: the confirmation is the consequence, in the server's words, not a
+ * question. A refusal is shown where it happened, with what to do.
+ */
+export function CommandButton({ entity, command, id, body, label, destructive = false, role = "secondary", onDone, }) {
+    const copy = frameworkCopy().command;
+    const action = useCommand(entity, command);
+    const [open, setOpen] = useState(false);
+    const run = async () => {
+        const answer = await action.run(id, body);
+        if (answer !== undefined) {
+            setOpen(false);
+            action.reset();
+            onDone?.(answer);
+        }
+        else
+            setOpen(true);
+    };
+    const ask = async () => {
+        setOpen(true);
+        await action.rehearse(id, body);
+    };
+    const close = () => {
+        setOpen(false);
+        action.reset();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", role: destructive ? "secondary" : role, disabled: action.busy, onClick: () => void (destructive ? ask() : run()), children: label }), open ? (_jsx(Dialog, { open: true, title: label, onClose: close, footer: destructive && action.error === null ? (_jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", role: "secondary", onClick: close, children: copy.cancel }), _jsx(Button, { size: "sm", role: "primary", disabled: action.busy || action.rehearsal === null, onClick: () => void run(), children: copy.confirm })] })) : undefined, children: action.error !== null ? (_jsx(Refused, { error: action.error })) : action.rehearsal === null ? (_jsx("p", { className: "text-meta text-muted", children: copy.rehearsing })) : (_jsx("p", { className: "text-ink", children: action.rehearsal.text })) })) : null] }));
+}

package/dist/web/record/EntityPicker.d.ts

@@ -0,0 +1,56 @@
+import type { AnyRecord, Criteria } from "@sincpro/criteria";
+import type { Entity } from "../../core/entity.js";
+import { type ListDefinition } from "../../core/list.js";
+import { type OpenTarget } from "@sincpro/web-ui";
+/**
+ * A many2one: pick ONE record of an entity — web-ui's `Picker` fed by `useLookup`, with a way
+ * into the whole set however big it is.
+ *
+ * Context: two ways to choose, for two sizes. The picker opens on the first ten in the entity's
+ * order, and what is typed is the entity's literal search, asked of the SERVER (`Picker
+ * onSearch`): the record 123 455 of 200 000 is found by its name. The chosen one keeps its name
+ * when it is not among the ten (`valueLabel`). For a question the ten cannot answer — two of the
+ * same name, a column to compare — «Buscar más…» opens a chooser: the entity's full list,
+ * searched, ordered and paged by the server, where clicking a row answers the field. An entity
+ * without a search template is filtered where it is.
+ *
+ * Inside a workspace, «open» and the chooser can be the composer's instead (`api.open`,
+ * `api.pick`): pass `onOpen` / `onBrowseAll` and they replace the defaults — `chooserIn(api,
+ * entity, onChange)` is that `onBrowseAll`.
+ *
+ * `criteria` narrows what may be chosen — the contacts of the chosen customer — in the picker
+ * and in its chooser alike; the server applies it, and a new one starts the choices over. A
+ * named list (`defineList`) does the same declared once: «active customers» brings its cut, its
+ * columns and its title to the chooser.
+ *
+ * The chooser is ALWAYS one click away (`browse`, on by default): web-ui's `Picker` offers
+ * «see all…» only while it holds rows it does not draw, so with a short first page there was no
+ * way to the server's literal search. The chooser is a table — the columns the list declares,
+ * or `columns` — searched by the entity's literal search on the server.
+ *
+ *     <EntityPicker entity={customers} value={id} onChange={set} />
+ *     <EntityPicker entity={activeCustomers} columns={["name", "tax_id", "city"]} … />
+ */
+export declare function EntityPicker<T extends AnyRecord>({ entity, value, onChange, onOpen, openTargets, onBrowseAll, criteria, columns, browse, placeholder, disabled, "aria-label": ariaLabel, }: {
+    /** What is chosen from: an entity, or a named list of it (its cut, columns and title). */
+    entity: Entity<T> | ListDefinition<T>;
+    /** The chooser's columns. Without it, the named list's, or every scalar field. */
+    columns?: readonly string[];
+    /** A button beside the field that opens the chooser: the server's literal search, as a table. */
+    browse?: boolean;
+    /** Which records may be chosen at all: applied by the server under what is typed. */
+    criteria?: Criteria<T>;
+    value?: string;
+    onChange: (id: string) => void;
+    /** Open the chosen record where the person asked — in composer,
+     *  `(id, to) => openIn(api, entity.ref(id), to)`. */
+    onOpen?: (id: string, to: OpenTarget) => void;
+    /** Where it may open, the default first (a modal; from inside a modal, beside). */
+    openTargets?: readonly OpenTarget[];
+    /** Replace the built-in chooser — in composer, `api.pick(entity.chooserRef(), …)`. It gets
+     *  what was typed, so the list opens on the same search. */
+    onBrowseAll?: (query: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+}): import("react").JSX.Element;

package/dist/web/record/EntityPicker.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { nameOf } from "@sincpro/criteria";
+import { frameworkCopy } from "../../core/copy.js";
+import { isList } from "../../core/list.js";
+import { useListing } from "../../react/useListing.js";
+import { useLookup } from "../../react/useLookup.js";
+import { EntityList } from "../list/EntityList.js";
+import { Dialog, IconButton, Picker } from "@sincpro/web-ui";
+import { TextSearch } from "lucide-react";
+import { useState } from "react";
+/**
+ * A many2one: pick ONE record of an entity — web-ui's `Picker` fed by `useLookup`, with a way
+ * into the whole set however big it is.
+ *
+ * Context: two ways to choose, for two sizes. The picker opens on the first ten in the entity's
+ * order, and what is typed is the entity's literal search, asked of the SERVER (`Picker
+ * onSearch`): the record 123 455 of 200 000 is found by its name. The chosen one keeps its name
+ * when it is not among the ten (`valueLabel`). For a question the ten cannot answer — two of the
+ * same name, a column to compare — «Buscar más…» opens a chooser: the entity's full list,
+ * searched, ordered and paged by the server, where clicking a row answers the field. An entity
+ * without a search template is filtered where it is.
+ *
+ * Inside a workspace, «open» and the chooser can be the composer's instead (`api.open`,
+ * `api.pick`): pass `onOpen` / `onBrowseAll` and they replace the defaults — `chooserIn(api,
+ * entity, onChange)` is that `onBrowseAll`.
+ *
+ * `criteria` narrows what may be chosen — the contacts of the chosen customer — in the picker
+ * and in its chooser alike; the server applies it, and a new one starts the choices over. A
+ * named list (`defineList`) does the same declared once: «active customers» brings its cut, its
+ * columns and its title to the chooser.
+ *
+ * The chooser is ALWAYS one click away (`browse`, on by default): web-ui's `Picker` offers
+ * «see all…» only while it holds rows it does not draw, so with a short first page there was no
+ * way to the server's literal search. The chooser is a table — the columns the list declares,
+ * or `columns` — searched by the entity's literal search on the server.
+ *
+ *     <EntityPicker entity={customers} value={id} onChange={set} />
+ *     <EntityPicker entity={activeCustomers} columns={["name", "tax_id", "city"]} … />
+ */
+export function EntityPicker({ entity, value, onChange, onOpen, openTargets, onBrowseAll, criteria, columns, browse = true, placeholder, disabled, "aria-label": ariaLabel, }) {
+    const lookup = useLookup(entity, {
+        ...(criteria === undefined ? {} : { criteria }),
+        ...(value === undefined ? {} : { value }),
+    });
+    const person = (isList(entity) ? entity.entity : entity).summary.person === true;
+    const [choosing, setChoosing] = useState(false);
+    const browseAll = onBrowseAll ?? (() => setChoosing(true));
+    const picker = (_jsx(Picker, { items: lookup.options.map((one) => ({
+            id: one.id,
+            name: one.label,
+            ...(one.detail === undefined ? {} : { meta: one.detail, haystack: one.detail }),
+            // A person or a company is chosen by their face: the photo, or their initials.
+            ...(person ? { avatar: one.image ?? true } : {}),
+        })), ...(value === undefined ? {} : { value }), ...(lookup.chosen === undefined ? {} : { valueLabel: lookup.chosen.label }), onChange: onChange, ...(lookup.searchable ? { onSearch: lookup.search } : {}), 
+        // «Loading» only before there is anything: refining keeps the ten on screen.
+        loading: lookup.loading && lookup.options.length === 0, ...(onOpen === undefined ? {} : { onOpen }), ...(openTargets === undefined ? {} : { openTargets }), onBrowseAll: browseAll, ...(placeholder === undefined ? {} : { placeholder }), ...(disabled === undefined ? {} : { disabled }), ...(ariaLabel === undefined ? {} : { "aria-label": ariaLabel }) }));
+    return (_jsxs(_Fragment, { children: [browse ? (_jsxs("span", { className: "flex min-w-0 items-start gap-1", children: [_jsx("span", { className: "min-w-0 flex-1", children: picker }), _jsx(IconButton, { icon: TextSearch, label: frameworkCopy().picker.browse, onClick: () => browseAll(lookup.text), ...(disabled === undefined ? {} : { disabled }) })] })) : (picker), choosing ? (_jsx(Chooser, { entity: entity, ...(columns === undefined ? {} : { columns }), ...(criteria === undefined ? {} : { criteria }), onChoose: (id) => {
+                    onChange(id);
+                    setChoosing(false);
+                }, onClose: () => setChoosing(false) })) : null] }));
+}
+/** The whole set in a window, as a table: literal search and pages on the server, a row
+ *  answers the field. */
+function Chooser({ entity, columns, criteria, onChoose, onClose, }) {
+    const listing = useListing(entity, {
+        pageSize: 20,
+        ...(criteria === undefined ? {} : { criteria }),
+    });
+    const key = listing.meta?.get_id || listing.meta?.identity || "id";
+    return (_jsx(Dialog, { open: true, width: "lg", title: (isList(entity) ? entity.title : nameOf(listing.meta, listing.locale)) ||
+            listing.entity.kind, onClose: onClose, children: _jsx(EntityList, { listing: listing, embedded: true, search: "box", ...(columns === undefined ? {} : { columns }), onOpen: (row) => onChoose(String(row[key])) }) }));
+}

package/dist/web/record/EntityTags.d.ts

@@ -0,0 +1,38 @@
+import type { AnyRecord, Criteria } from "@sincpro/criteria";
+import type { Entity } from "../../core/entity.js";
+import { type ListDefinition } from "../../core/list.js";
+import { type OpenTarget } from "@sincpro/web-ui";
+/**
+ * A many2many: put SEVERAL records of an entity on this one — the followers of an invoice,
+ * the products of a promotion — as web-ui's `TagsField` chips, fed by `useLookup`.
+ *
+ * Context: the same literal search as a many2one, for N. The field opens on the first ten in
+ * the entity's order, and what is typed is asked of the SERVER (`TagsField onSearch`): a
+ * product among three thousand is found by its code though no chip shows it. The chosen never
+ * come back as options, and they keep their names wherever they lie — remembered, or asked
+ * once by their keys. A person or a company (`entity(…, { summary: { person: true } })`) is
+ * chosen by their face.
+ *
+ * Opening a chip is the composer's (`onOpen` — a preview by default: a chip is a glance at one
+ * of many), and «Buscar más…» is the list that adds (`onBrowseAll`, `api.pick` with the list in
+ * its choosing mode). Without a workspace a chip is a value.
+ *
+ *     <EntityTags entity={people} value={followers} onChange={setFollowers} />
+ */
+export declare function EntityTags<T extends AnyRecord>({ entity, value, onChange, criteria, onOpen, openTarget, onBrowseAll, placeholder, disabled, "aria-label": ariaLabel, }: {
+    /** What is chosen from: an entity, or a named list of it. */
+    entity: Entity<T> | ListDefinition<T>;
+    /** The keys chosen, in the order they were added — what the backend stores. */
+    value: readonly string[];
+    onChange: (next: string[]) => void;
+    /** Which records may be put at all: applied by the server under what is typed. */
+    criteria?: Criteria<T>;
+    /** Open the record behind a chip — in composer, `(id, to) => openIn(api, entity.ref(id), to)`. */
+    onOpen?: (id: string, to: OpenTarget) => void;
+    openTarget?: OpenTarget;
+    /** «Buscar más…»: the list that adds several at once, opened on what was typed. */
+    onBrowseAll?: (query: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+}): import("react").JSX.Element;

package/dist/web/record/EntityTags.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isList } from "../../core/list.js";
+import { useLookup } from "../../react/useLookup.js";
+import { TagsField } from "@sincpro/web-ui";
+/**
+ * A many2many: put SEVERAL records of an entity on this one — the followers of an invoice,
+ * the products of a promotion — as web-ui's `TagsField` chips, fed by `useLookup`.
+ *
+ * Context: the same literal search as a many2one, for N. The field opens on the first ten in
+ * the entity's order, and what is typed is asked of the SERVER (`TagsField onSearch`): a
+ * product among three thousand is found by its code though no chip shows it. The chosen never
+ * come back as options, and they keep their names wherever they lie — remembered, or asked
+ * once by their keys. A person or a company (`entity(…, { summary: { person: true } })`) is
+ * chosen by their face.
+ *
+ * Opening a chip is the composer's (`onOpen` — a preview by default: a chip is a glance at one
+ * of many), and «Buscar más…» is the list that adds (`onBrowseAll`, `api.pick` with the list in
+ * its choosing mode). Without a workspace a chip is a value.
+ *
+ *     <EntityTags entity={people} value={followers} onChange={setFollowers} />
+ */
+export function EntityTags({ entity, value, onChange, criteria, onOpen, openTarget, onBrowseAll, placeholder, disabled, "aria-label": ariaLabel, }) {
+    const lookup = useLookup(entity, {
+        ...(criteria === undefined ? {} : { criteria }),
+        values: value,
+    });
+    const person = (isList(entity) ? entity.entity : entity).summary.person === true;
+    const asTag = (one) => ({
+        value: one.id,
+        label: one.label,
+        ...(person ? { avatar: one.image ?? true } : {}),
+    });
+    const offered = new Set(lookup.options.map((one) => one.id));
+    // The chosen ride along for their labels; the field never offers them again.
+    const options = [
+        ...lookup.options.map(asTag),
+        ...lookup.chosenAll.filter((one) => !offered.has(one.id)).map(asTag),
+    ];
+    return (_jsx(TagsField, { value: value, onChange: onChange, options: options, ...(lookup.searchable ? { onSearch: lookup.search } : {}), ...(onOpen === undefined ? {} : { onOpen }), ...(openTarget === undefined ? {} : { openTarget }), ...(onBrowseAll === undefined ? {} : { onBrowseAll }), ...(placeholder === undefined ? {} : { placeholder }), ...(disabled === undefined ? {} : { disabled }), ...(ariaLabel === undefined ? {} : { "aria-label": ariaLabel }) }));
+}

package/dist/web/record/RelatedList.d.ts

@@ -0,0 +1,19 @@
+import type { AnyRecord } from "@sincpro/criteria";
+import type { Entity } from "../../core/entity.js";
+import type { RecordReading } from "../../react/useRecord.js";
+import { type EntityListProps } from "../list/EntityList.js";
+/**
+ * A relation of a record as a list inside it — searched, ordered and paged by the server.
+ *
+ * Context: the same `EntityList` a screen uses, `embedded` so it reads as a field of the record
+ * (a one-line bar that does not stick), over `useRelated`. Its search box fills the RELATED
+ * entity's own search template: the lines of an order are searched by product, the invoices of
+ * a customer by number. The column that points back to this record is left out — it is the
+ * same on every row. Use `RecordLines` when the page the record brought is all there is.
+ */
+export declare function RelatedList<P extends AnyRecord, T extends AnyRecord>({ record, name, entity, pageSize, ...list }: {
+    record: RecordReading<P>;
+    name: string;
+    entity: Entity<T>;
+    pageSize?: number;
+} & Omit<EntityListProps<T>, "listing" | "embedded">): import("react").JSX.Element;

package/dist/web/record/RelatedList.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defaultFields } from "../../core/present.js";
+import { useRelated } from "../../react/useRelated.js";
+import { EntityList } from "../list/EntityList.js";
+import { useMemo } from "react";
+/**
+ * A relation of a record as a list inside it — searched, ordered and paged by the server.
+ *
+ * Context: the same `EntityList` a screen uses, `embedded` so it reads as a field of the record
+ * (a one-line bar that does not stick), over `useRelated`. Its search box fills the RELATED
+ * entity's own search template: the lines of an order are searched by product, the invoices of
+ * a customer by number. The column that points back to this record is left out — it is the
+ * same on every row. Use `RecordLines` when the page the record brought is all there is.
+ */
+export function RelatedList({ record, name, entity, pageSize, ...list }) {
+    const listing = useRelated(record, name, entity, pageSize === undefined ? {} : { pageSize });
+    // Every row points back to THIS record: the column that says so is the same on all of them.
+    const back = record.meta?.fields[name]?.identified_by;
+    const own = list.columns;
+    const columns = useMemo(() => own ??
+        (listing.meta === null || !back
+            ? undefined
+            : defaultFields(listing.meta).filter((field) => field !== back)), [own, listing.meta, back]);
+    return (_jsx(EntityList, { listing: listing, embedded: true, search: "box", ...list, ...(columns === undefined ? {} : { columns }) }));
+}

package/dist/web/record/edit.d.ts

@@ -0,0 +1,42 @@
+import type { RecordReading } from "../../react/useRecord.js";
+import { type DirtyState } from "@sincpro/web-ui";
+import type { ReactNode } from "react";
+/**
+ * One field of a record being edited, from the model: its word, whether it is required or
+ * read-only now (the hints, evaluated over what is on screen), the server's error for it, and a
+ * control chosen by its type.
+ *
+ * Context: forge's forms wrote `<Field label="Nombre" required><TextInput … /></Field>` once per
+ * field, with the label, the «required» and the value plumbing by hand, while the server already
+ * said all three. Here a field is a NAME. The control by type is a default, never the only way:
+ * `as` draws any control — a rich text, a domain widget — and still receives the value, the
+ * setter and the state.
+ *
+ * A many2one needs no `as`: the model says what it points at (`relation: "Cliente"`, the key
+ * `customer_id` it is written by), the application declared that entity
+ * (`SincproApp entities`), so the field is an `EntityPicker` of it — the server's literal
+ * search, the ten first, «Buscar más…» — and, read-only, the record's name as a link. Where it
+ * opens is the view's (`RecordOpening`: a modal in a workspace, nothing outside one).
+ *
+ *     <RecordField record={invoice} name="due_date" />
+ *     <RecordField record={invoice} name="customer_id" />
+ */
+export type FieldControl = {
+    value: unknown;
+    set: (value: unknown) => void;
+    readonly: boolean;
+    invalid: boolean;
+    label: string;
+};
+export declare function RecordField<T extends Record<string, unknown>>({ record, name, as, bare, }: {
+    record: RecordReading<T>;
+    name: string;
+    as?: (control: FieldControl) => ReactNode;
+    /** The control without its label — inside a page or a section that already names it. */
+    bare?: boolean;
+}): import("react").JSX.Element | null;
+/**
+ * The record's «save / discard», for `<Record dirty={…}>`: present only while something changed,
+ * off while saving, and off with the reason while a required field is empty.
+ */
+export declare function dirtyOf<T extends Record<string, unknown>>(record: RecordReading<T>): DirtyState | undefined;

package/dist/web/record/edit.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { choicesOf } from "@sincpro/criteria";
+import { frameworkCopy } from "../../core/copy.js";
+import { textOf, viewOf } from "../../core/present.js";
+import { relationFieldOf } from "../../core/relation.js";
+import { useEntityFor, useFramework } from "../../react/context.js";
+import { EntityPicker } from "./EntityPicker.js";
+import { useRecordOpening } from "./opening.js";
+import { RecordLines } from "./record.js";
+import { RelatedList } from "./RelatedList.js";
+import { Checkbox, DatePicker, Field, NumberInput, ReadValue, RelationValue, Select, TagsField, TextInput, } from "@sincpro/web-ui";
+export function RecordField({ record, name, as, bare = false, }) {
+    const { meta, locale, edit } = record;
+    const view = viewOf(meta, name, locale);
+    const state = edit.state(name);
+    const relation = relationFieldOf(meta, name);
+    const target = useEntityFor(relation?.target);
+    const opening = useRecordOpening();
+    const { metas } = useFramework();
+    if (!state.visible)
+        return null;
+    // A one2many of a declared entity is that entity's own list, filtered to this record by
+    // the server — never the page the record happened to bring — and a row opens its record.
+    // A one2many of no declared entity (the lines of an invoice): the page the record brought,
+    // with its real total.
+    if (as === undefined && relation?.field.type === "one2many" && target === undefined) {
+        const lines = (_jsx(RecordLines, { record: record.record ?? {}, meta: meta, name: name, locale: locale }));
+        return bare ? lines : _jsx(Field, { label: view.label, children: lines });
+    }
+    if (as === undefined && relation?.field.type === "one2many" && target !== undefined) {
+        const list = (_jsx(RelatedList, { record: record, name: name, entity: target, ...(opening === null
+                ? {}
+                : {
+                    onOpen: (row) => {
+                        const known = metas.get(target.key);
+                        const key = known?.get_id || known?.identity || "id";
+                        opening.open(target.ref(String(row[key])), opening.targets[0] ?? "page");
+                    },
+                }) }));
+        return bare ? list : _jsx(Field, { label: view.label, children: list });
+    }
+    const value = edit.values[name];
+    const error = edit.errors[name];
+    const control = {
+        value,
+        set: (next) => edit.set(name, next),
+        readonly: state.readonly,
+        invalid: error !== undefined,
+        label: view.label,
+    };
+    const field = meta?.fields[name];
+    /** A many2one of a declared entity: chosen by the server's literal search, opened where the
+     *  view says. Written by its key; read by the record it points at. */
+    function manyToOne() {
+        if (relation === undefined || target === undefined)
+            return null;
+        const key = edit.values[relation.key];
+        const id = key === null || key === undefined ? "" : String(key);
+        if (state.readonly)
+            return (_jsx(RelationValue, { name: textOf(meta, relation.relation, edit.values[relation.relation], locale) ?? id, ...(opening === null || id === ""
+                    ? {}
+                    : {
+                        onOpenIn: (to) => opening.open(target.ref(id), to),
+                        openTargets: opening.targets,
+                    }) }));
+        const answer = (next) => edit.set(relation.key, next);
+        return (_jsx(EntityPicker, { entity: target, value: id, onChange: answer, 
+            // «Buscar más…» is an option of the picker already: no second button beside it.
+            browse: false, "aria-label": view.label, ...(opening === null
+                ? {}
+                : {
+                    onOpen: (chosen, to) => opening.open(target.ref(chosen), to),
+                    openTargets: opening.targets,
+                    ...(opening.choose === undefined
+                        ? {}
+                        : {
+                            onBrowseAll: (query) => opening.choose?.(target, answer, query),
+                        }),
+                }) }));
+    }
+    if (view.type === "boolean" && as === undefined)
+        return (_jsx(Checkbox, { checked: value === true, onChange: control.set, label: view.label, disabled: state.readonly }));
+    return (_jsx(Field, { label: view.label, required: state.required && !state.readonly, ...(view.help === undefined ? {} : { hint: view.help }), ...(error === undefined ? {} : { error }), children: as !== undefined ? (as(control)) : relation !== undefined && !relation.many && target !== undefined ? (manyToOne()) : state.readonly ? (_jsx(ReadValue, { value: textOf(meta, name, value, locale) ?? "—" })) : (controlFor(control, view.type, field?.exact === true, choicesOf(meta, name, locale))) }));
+}
+function controlFor(control, type, exact, choices) {
+    const { value, set } = control;
+    if (choices.length > 0)
+        return (_jsx(Select, { value: value === null || value === undefined ? "" : String(value), options: choices.map((one) => ({ value: String(one.value), label: one.label })), onChange: set }));
+    switch (type) {
+        case "integer":
+        case "number":
+            return (_jsx(NumberInput, { value: value === null || value === undefined || value === "" ? "" : Number(value), 
+                // A decimal travels as text so no digit is lost; the server reads it that way back.
+                onChange: (next) => set(next === "" ? null : exact ? String(next) : next) }));
+        case "date":
+            return (_jsx(DatePicker, { value: typeof value === "string" && value !== "" ? value : null, onChange: set }));
+        case "text[]": {
+            // A list of words is chips: each word is its own key, and typing a new one adds it.
+            const words = Array.isArray(value) ? value.map(String) : [];
+            return (_jsx(TagsField, { value: words, options: words.map((word) => ({ value: word, label: word })), onChange: set, onCreate: (word) => word }));
+        }
+        default:
+            return (_jsx(TextInput, { value: value === null || value === undefined ? "" : String(value), onChange: set }));
+    }
+}
+/**
+ * The record's «save / discard», for `<Record dirty={…}>`: present only while something changed,
+ * off while saving, and off with the reason while a required field is empty.
+ */
+export function dirtyOf(record) {
+    const { edit, meta, locale } = record;
+    if (!edit.dirty)
+        return undefined;
+    const missing = edit.missing.map((name) => viewOf(meta, name, locale).label);
+    return {
+        onSave: () => void edit.save(),
+        onDiscard: edit.discard,
+        saving: edit.saving,
+        ...(missing.length === 0 ? {} : { blocked: frameworkCopy().record.missing(missing) }),
+    };
+}

package/dist/web/record/opening.d.ts

@@ -0,0 +1,26 @@
+import type { Entity, EntityRef } from "../../core/entity.js";
+import type { OpenTarget } from "@sincpro/web-ui";
+import { type ReactNode } from "react";
+/**
+ * How a record shown in a form opens from here — given by whoever holds the form, used by the
+ * fields inside it.
+ *
+ * Context: a form must work outside a workspace (`web/record/` imports no composer), yet a
+ * many2one inside one opens its record in a modal, with «Abrir en…» for the rest. So the form
+ * does not decide: the view that holds it says how to open (`entityView` fills it with the
+ * composer's `openIn` and the places allowed from where the view is), and a field asks. Without
+ * it a related record is a value, not a door.
+ */
+export type RecordOpening = {
+    open: (ref: EntityRef, to: OpenTarget) => void;
+    /** Where it may open from here, the default first. */
+    targets: readonly OpenTarget[];
+    /** «Buscar más…»: the entity's own list opened to choose (in composer, a modal that answers),
+     *  on what was typed. Without it the picker brings its own chooser. */
+    choose?: (entity: Entity, answer: (id: string) => void, query: string) => void;
+};
+export declare function RecordOpeningProvider({ value, children, }: {
+    value: RecordOpening;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useRecordOpening(): RecordOpening | null;

package/dist/web/record/opening.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const Opening = createContext(null);
+export function RecordOpeningProvider({ value, children, }) {
+    return _jsx(Opening.Provider, { value: value, children: children });
+}
+export function useRecordOpening() {
+    return useContext(Opening);
+}

package/dist/web/record/record.d.ts

@@ -0,0 +1,25 @@
+import { type AnyRecord, type Meta } from "@sincpro/criteria";
+import { type SheetField } from "@sincpro/web-ui";
+import type { ReactNode } from "react";
+export declare function factsOf<T extends AnyRecord>(record: T, meta: Meta | null | undefined, names: readonly string[], options?: {
+    locale?: string | undefined;
+    cells?: Readonly<Partial<Record<string, (record: T) => ReactNode>>>;
+}): SheetField[];
+/** How many records a relation of this record holds — the TOTAL, not the page it brought. */
+export declare function countOf(record: AnyRecord, name: string): number;
+/**
+ * A one2many / many2many of the record, as an embedded list.
+ *
+ * Its columns come from the relation's own definition when the server expanded it, and are
+ * read off the rows otherwise. When the record brought only one page of them, it says so —
+ * «se muestran 50 de 1000» — instead of drawing 50 as if they were all.
+ */
+export declare function RecordLines<T extends AnyRecord>({ record, meta, name, columns, cells, locale, onOpen, }: {
+    record: AnyRecord;
+    meta: Meta | null | undefined;
+    name: string;
+    columns?: readonly string[];
+    cells?: Readonly<Partial<Record<string, (row: T) => ReactNode>>>;
+    locale?: string | undefined;
+    onOpen?: (row: T) => void;
+}): import("react").JSX.Element;