@fieldia/designer 0.19.1 → 0.21.0

package/src/lib/date-setting.mjs

@@ -0,0 +1,122 @@
+import { datePart, dateOrderOf, dateShape, guard, readDateText, refusalHint, restingText, typingText, WIDGET_LABELS } from '@fieldia/widgets';
+const pad = (n) => String(n).padStart(2, '0');
+/** A moment read (an instant) as a page's setting writes a day and time, as the browser's box did: its local day and time, to the minute. */
+const localMoment = (instant) => {
+    const d = new Date(instant);
+    return `${String(d.getFullYear()).padStart(4, '0')}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+export function settingDate(el, host, options) {
+    const locale = host.locale ?? 'en';
+    const w = host.words.inputs;
+    const labels = WIDGET_LABELS[locale] ?? WIDGET_LABELS.en;
+    const { kind } = options;
+    // Read as it is at each edit: the page's order, and the setting's name, may change while the box is drawn.
+    const reader = {
+        kind,
+        get order() {
+            return dateOrderOf({ page: host.getPage() });
+        },
+        locale,
+        get label() {
+            return options.label;
+        },
+        labels,
+    };
+    const input = el('input', { type: 'text', class: 'fd-input', autocomplete: 'off', spellcheck: 'false', 'aria-label': options.label, placeholder: dateShape(kind, reader.order, labels), ...options.attrs });
+    input.dataset['kind'] = kind;
+    const hint = refusalHint(input);
+    const focused = () => input.ownerDocument.activeElement === input;
+    const atRest = (value) => (value ? restingText(value, kind, locale) : '');
+    const typing = (value) => (value ? typingText(value, kind, reader.order, locale) : '');
+    // The box's input rules come with Fieldia's own date box, in the date part: at once where a date was drawn already.
+    let checks = null;
+    let gone = false;
+    const attach = (part) => {
+        if (gone || checks)
+            return;
+        checks = guard(input, part.dateRules(input, reader), hint);
+        if (focused())
+            checks.accept();
+    };
+    if (datePart.loaded)
+        attach(datePart.loaded);
+    else
+        datePart.load().then(attach, () => undefined);
+    /** The box showing `text`: what a refused edit goes back to. */
+    const shown = (text) => {
+        if (input.value !== text)
+            input.value = text;
+        checks?.accept();
+    };
+    /** The text the box was last left with, and what was said of it: change, then focusout, are one leaving. */
+    let left = null;
+    input.addEventListener('focus', () => {
+        left = null;
+        // Entered, the box shows what is saved as it is typed, all of it chosen, so typing replaces it.
+        const text = typing(options.saved());
+        if (input.value !== text) {
+            shown(text);
+            input.setSelectionRange(0, text.length);
+        }
+    });
+    /** The box back to what was saved, and why, said under it. */
+    const keep = (why) => {
+        const saved = options.saved();
+        shown(focused() ? typing(saved) : atRest(saved));
+        const stays = saved ? w.settingStays(atRest(saved)) : '';
+        const words = [why?.replace(/[.。]$/, ''), stays].filter(Boolean).join('. ') || stays;
+        if (words)
+            hint.show(words);
+        left = { text: input.value, said: words || null };
+    };
+    /** A value (or none) kept and shown; refused by the designer, what is saved comes back, with why under the box. */
+    const kept = (value) => {
+        const done = value === (options.saved() ?? null) || options.commit(value) !== false;
+        // Refused with no word of why from the designer: never in silence — that it was not taken, at least.
+        if (!done)
+            return keep(host.getState?.().issues[0] ?? w.settingDateRefused(options.label));
+        shown(focused() ? typing(value) : atRest(value));
+        hint.hide();
+        left = { text: input.value, said: null };
+    };
+    /** The box left, or Enter pressed: what it holds kept when it reads, else the setting as it was, and why. */
+    function leave() {
+        if (left && left.text === input.value) {
+            if (left.said)
+                hint.show(left.said);
+            return;
+        }
+        // Keys held after a refused one ("1x5/10/2026" where the box shows "1"): what was typed, read whole, is no date.
+        const held = checks?.held();
+        const read = readDateText(held?.text ?? input.value, reader);
+        if (held || !read.ok)
+            return keep(read.ok ? held?.words : read.words);
+        kept(read.value !== null && kind === 'datetime' ? localMoment(read.value) : read.value);
+    }
+    input.addEventListener('input', () => (left = null));
+    input.addEventListener('change', leave);
+    // After the guard's own blur, which takes its hint away: what was found is said last, the box at rest in words.
+    input.addEventListener('focusout', () => {
+        leave();
+        shown(atRest(options.saved()));
+        if (left)
+            left.text = input.value;
+    });
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' && !event.isComposing)
+            leave();
+    });
+    return {
+        input,
+        refresh: () => {
+            input.placeholder = dateShape(kind, reader.order, labels);
+            if (!focused())
+                shown(atRest(options.saved()));
+        },
+        destroy: () => {
+            gone = true;
+            checks?.destroy();
+        },
+    };
+}
+//# sourceMappingURL=date-setting.mjs.map

package/src/lib/date-setting.mjs.map

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

package/src/lib/designer.d.mts

@@ -1,4 +1,4 @@
-import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type MapFence, type MapLayer, type MapNode, type Page, type PageLook, type SetWhen } from '@fieldia/core';
+import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type JsonValue, type MapFence, type MapLayer, type MapNode, type Page, type PageLook, type SetWhen } from '@fieldia/core';
 import { type Condition, type ShownWhile } from './conditions.mjs';
 import { type HeaderCommands } from './header-commands.mjs';
 import { type ListCommands } from './list-commands.mjs';
@@ -17,6 +17,7 @@ import type { BlockPatch, LookPatch, PartLookPatch, SectionLook } from './layout
 import type { EachChange } from './layout-several.mjs';
 import { type PageJsonResult } from './page-json.mjs';
 import { type AnswerRulePatch } from './rules-commands.mjs';
+import { type HeadCommands } from './head-commands.mjs';
 import { type StepsCommands } from './steps-commands.mjs';
 import { type LookValues } from './look-presets.mjs';
 import { type Fold } from './group-fold.mjs';
@@ -134,7 +135,7 @@ export interface ModelField {
     name: string;
     field: Field;
 }
-export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands, InputCommands, StructureCommands, StepsCommands, TableCommands {
+export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands, InputCommands, StructureCommands, StepsCommands, TableCommands, HeadCommands {
     /** The designer's own words, in its language: English unless `locale` said another it speaks. */
     readonly words: DesignerWords;
     /**
@@ -238,7 +239,9 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     /** An "Other" choice after the options, with a box for an answer of one's own: for multiple choice and checkboxes. */
     setOther(id: string, on: boolean): boolean;
     /** How the field's widget shows it, such as the words at a scale's ends; `null` or nothing takes a setting away. */
-    setWidgetOptions(id: string, patch: Record<string, string | number | boolean | null>): boolean;
+    setWidgetOptions(id: string, patch: Record<string, JsonValue | null>): boolean;
+    /** The widget a field is drawn with, by name (`links` for a many2many's links box); null for its type's own. */
+    setFieldWidget(id: string, widget: string | null): boolean;
     /**
      * Which kinds of file a file upload takes (media types, such as image/*), and
      * the largest, in bytes; whether it, or an image, takes several files, and as
@@ -303,8 +306,17 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     setSeveral(id: string, on: boolean): boolean;
     undo(): void;
     redo(): void;
-    /** Publish the draft as the next version. Returns its number. */
+    /**
+     * Publish the draft as the next version. Returns its number. A setting still typed in its box is read first, as
+     * leaving the box reads it (`settling`): kept when it fits, else the box shows what the setting holds and says why —
+     * never a version published under text the person was still typing.
+     */
     publish(): Promise<number>;
+    /**
+     * How the editors read a setting typed and not yet left — a number, a date, a word — now, as leaving its box would:
+     * `publish` runs these first, whatever asked for it (a button's key, the app's own call). Returns what stops it.
+     */
+    settling(read: () => void): () => void;
     /** What people would trip over on the page as it is, what would stop them first. */
     checks(): PageCheck[];
     /** Do a check's fix: delete an empty page, drop a rule that can never hold, or pick what it is about. */

package/src/lib/designer.d.ts

@@ -1,4 +1,4 @@
-import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type MapFence, type MapLayer, type MapNode, type Page, type PageLook, type SetWhen } from '@fieldia/core';
+import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type JsonValue, type MapFence, type MapLayer, type MapNode, type Page, type PageLook, type SetWhen } from '@fieldia/core';
 import { type Condition, type ShownWhile } from './conditions';
 import { type HeaderCommands } from './header-commands';
 import { type ListCommands } from './list-commands';
@@ -17,6 +17,7 @@ import type { BlockPatch, LookPatch, PartLookPatch, SectionLook } from './layout
 import type { EachChange } from './layout-several';
 import { type PageJsonResult } from './page-json';
 import { type AnswerRulePatch } from './rules-commands';
+import { type HeadCommands } from './head-commands';
 import { type StepsCommands } from './steps-commands';
 import { type LookValues } from './look-presets';
 import { type Fold } from './group-fold';
@@ -134,7 +135,7 @@ export interface ModelField {
     name: string;
     field: Field;
 }
-export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands, InputCommands, StructureCommands, StepsCommands, TableCommands {
+export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands, InputCommands, StructureCommands, StepsCommands, TableCommands, HeadCommands {
     /** The designer's own words, in its language: English unless `locale` said another it speaks. */
     readonly words: DesignerWords;
     /**
@@ -238,7 +239,9 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     /** An "Other" choice after the options, with a box for an answer of one's own: for multiple choice and checkboxes. */
     setOther(id: string, on: boolean): boolean;
     /** How the field's widget shows it, such as the words at a scale's ends; `null` or nothing takes a setting away. */
-    setWidgetOptions(id: string, patch: Record<string, string | number | boolean | null>): boolean;
+    setWidgetOptions(id: string, patch: Record<string, JsonValue | null>): boolean;
+    /** The widget a field is drawn with, by name (`links` for a many2many's links box); null for its type's own. */
+    setFieldWidget(id: string, widget: string | null): boolean;
     /**
      * Which kinds of file a file upload takes (media types, such as image/*), and
      * the largest, in bytes; whether it, or an image, takes several files, and as
@@ -303,8 +306,17 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     setSeveral(id: string, on: boolean): boolean;
     undo(): void;
     redo(): void;
-    /** Publish the draft as the next version. Returns its number. */
+    /**
+     * Publish the draft as the next version. Returns its number. A setting still typed in its box is read first, as
+     * leaving the box reads it (`settling`): kept when it fits, else the box shows what the setting holds and says why —
+     * never a version published under text the person was still typing.
+     */
     publish(): Promise<number>;
+    /**
+     * How the editors read a setting typed and not yet left — a number, a date, a word — now, as leaving its box would:
+     * `publish` runs these first, whatever asked for it (a button's key, the app's own call). Returns what stops it.
+     */
+    settling(read: () => void): () => void;
     /** What people would trip over on the page as it is, what would stop them first. */
     checks(): PageCheck[];
     /** Do a check's fix: delete an empty page, drop a rule that can never hold, or pick what it is about. */

package/src/lib/designer.js

@@ -26,6 +26,7 @@ const refusal_1 = require("./refusal");
 const translations_1 = require("./translations");
 const page_json_1 = require("./page-json");
 const rules_commands_1 = require("./rules-commands");
+const head_commands_1 = require("./head-commands");
 const rules_reads_1 = require("./rules-reads");
 const steps_commands_1 = require("./steps-commands");
 const steps_places_1 = require("./steps-places");
@@ -38,6 +39,7 @@ const group_fold_1 = require("./group-fold");
 const validate_edit_1 = require("./validate-edit");
 const designer_words_1 = require("./designer-words");
 const saved_forms_1 = require("./saved-forms");
+const setting_refusals_1 = require("./setting-refusals");
 /**
  * The editing model behind the designer: no DOM, so it is tested in Node.
  *
@@ -173,6 +175,8 @@ function createMemoryPageStore() {
 const clone = (value) => JSON.parse(JSON.stringify(value));
 function createDesigner(options) {
     const store = options.store;
+    /** How each editor reads a setting typed and not yet left (`settling`): publish runs them first. */
+    const readers = new Set();
     const locale = (0, designer_words_1.designerLocale)(options.locale);
     const words = designer_words_1.DESIGNER_WORDS[locale ?? 'en'];
     const appKinds = (0, kinds_1.registerKinds)(options.kinds ?? []);
@@ -284,7 +288,8 @@ function createDesigner(options) {
         (0, steps_places_1.forgetGoneTargets)(draft);
         const checked = checkEdit(page, draft);
         if (!checked.ok) {
-            issues = checked.issues.map((issue) => words.refusals.invalid(issue.path, issue.message));
+            // A number setting the format refuses is said in its own words, in the designer's language: never a raw path.
+            issues = checked.issues.map((issue) => (0, setting_refusals_1.settingRefusal)(issue.path, words) ?? words.refusals.invalid(issue.path, issue.message));
             notify();
             return false;
         }
@@ -387,6 +392,10 @@ function createDesigner(options) {
         words,
         locale,
         getPage: () => page,
+        settling(read) {
+            readers.add(read);
+            return () => void readers.delete(read);
+        },
         modelFields() {
             const shown = (0, page_tree_1.shownFields)(page);
             return Object.keys(model)
@@ -1011,6 +1020,15 @@ function createDesigner(options) {
                     delete node.options;
             }, `widget:${id}:${Object.keys(patch).join(',')}`);
         },
+        setFieldWidget(id, widget) {
+            return apply((draft) => {
+                const node = fieldNode(draft, id);
+                if (widget)
+                    node.widget = widget;
+                else
+                    delete node.widget;
+            });
+        },
         setFileRules(id, rules) {
             return apply((draft) => {
                 const field = fieldOfType(draft, id, ['binary', 'image'], (w) => w.refusals.onlyFiles, (w, label) => w.refusals.filesFromModel(label));
@@ -1140,6 +1158,9 @@ function createDesigner(options) {
             saveDraft();
         },
         async publish() {
+            // A setting still typed is read first, as leaving its box reads it: what is published is what the boxes show.
+            for (const read of [...readers])
+                read();
             const checked = (0, core_1.validatePage)(page);
             if (!checked.ok)
                 throw new Error(words.refusals.cannotPublish);
@@ -1173,7 +1194,7 @@ function createDesigner(options) {
         // panel lane
         setEach: (ids, change) => apply((draft) => several.setEach(draft, ids, change, fromModel)),
         // json lane
-        ...(0, page_json_1.pageJsonCommands)({ getPage: () => page, apply }),
+        ...(0, page_json_1.pageJsonCommands)({ getPage: () => page, apply, words }),
         lists: () => clone(options.lists ?? []),
         setOptionsFrom(id, from) {
             const found = (0, page_tree_1.findNode)(page, id);
@@ -1226,6 +1247,8 @@ function createDesigner(options) {
         setWidths: (widths, options) => apply((draft) => settings.setWidths(draft, widths, options?.twelfths)),
         // rules lane
         ...(0, rules_commands_1.rulesCommands)({ apply, getPage: () => page, fromModel }),
+        // A record's head, and the parts it brought: a button's icon alone, toggle and menu; a tab's count; a field's access key.
+        ...(0, head_commands_1.headCommands)({ apply, select: (id) => designer.select(id), model, words }),
         // extend lane
         appKinds: () => [...appKinds],
         templates: () => (0, templates_1.templatesFor)(page, options.templates, locale ?? 'en'),