@getaster/elements 0.0.0-stage → 0.1.0-preview.1

package/dist/picker/tree-picker.js

@@ -0,0 +1,282 @@
+import { signal } from "@preact/signals-core";
+import { keyFromText, keyText } from "@getaster/data";
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { define } from "../base/element.js";
+import { BoundField } from "../field/bound-field.js";
+import { anchorStyle, openWhen, placeStyle } from "../overlay/anchor.js";
+import { TreeChoices } from "./tree-choices.js";
+const SEARCH_DELAY = 200;
+/**
+ * A combobox whose popup is a tree (APG editable combobox, `aria-haspopup`
+ * tree): for choosing one node of a hierarchy where names repeat across
+ * branches. The closed control shows the chosen node's name with its path
+ * under it. Opening reveals the chosen node; typing filters the tree to the
+ * matches and the folders leading to them.
+ *
+ * Keyboard: ↓/↑ open and move, Home/End go to the first and last row, → opens
+ * a folder or moves into it, ← closes it or moves to its parent, Enter
+ * chooses (or opens a folder that can't be chosen), Escape closes and
+ * restores the text. ←/→ move the caret instead until ↓/↑ have moved in the
+ * tree since the last typing. Focus stays in the input; the active row is
+ * its `aria-activedescendant`.
+ */
+export class TreePicker extends BoundField {
+    #options = this.prop(undefined);
+    #placeholder = this.prop("");
+    #open = this.prop(false);
+    #query = this.prop(undefined);
+    #active = this.prop(undefined);
+    /** The typed text the tree's filter follows, after a pause. */
+    #search = signal("");
+    #tree = this.prop(undefined);
+    #treeFor;
+    #navigating = false;
+    #searchTimer;
+    get options() {
+        return this.#options.value;
+    }
+    set options(v) {
+        this.#options.value = v;
+    }
+    get placeholder() {
+        return this.#placeholder.value;
+    }
+    set placeholder(v) {
+        this.#placeholder.value = v;
+    }
+    focus(options) {
+        this.querySelector("input")?.focus(options);
+    }
+    disconnectedCallback() {
+        this.#close();
+        this.#tree.peek()?.dispose();
+        this.#tree.value = undefined;
+        this.#treeFor = undefined;
+        super.disconnectedCallback();
+    }
+    describe(_meta, value) {
+        const source = this.#options.peek();
+        const record = source?.record(value ?? null)?.value;
+        if (!source || !record)
+            return value === null || value === undefined ? "" : String(value);
+        const trail = source.trail(record);
+        return trail.length ? `${source.text(record)} in ${trail.join(", ")}` : source.text(record);
+    }
+    control(c) {
+        const source = this.#options.value;
+        const open = this.#open.value && !c.state.readOnly;
+        const query = this.#query.value;
+        const current = source?.record(c.value ?? null)?.value;
+        const label = current && source ? source.text(current) : c.value === null || c.value === undefined ? "" : String(c.value);
+        const trail = current && source ? source.trail(current) : [];
+        const tree = open ? this.#tree.value : undefined;
+        const rows = tree?.rows.value ?? [];
+        const activeKey = this.#active.value;
+        const typed = query?.trim() ?? "";
+        // Until a row is made active, the first match that can be chosen is.
+        const first = (r) => {
+            const e = r.key === undefined ? undefined : tree?.entity(r.key);
+            return e !== undefined && source.canChoose(e) && (!typed || source.matches(e, typed));
+        };
+        const active = activeKey === undefined ? rows.findIndex(first) : rows.findIndex((r) => r.key === activeKey);
+        const treeId = `${c.id}-tree`;
+        const rowId = (key) => `${c.id}-node-${encodeURIComponent(key)}`;
+        const trailId = `${c.id}-trail`;
+        const describedBy = [c.describedBy, trail.length ? trailId : ""].filter(Boolean).join(" ") || undefined;
+        const activeRow = active < 0 ? undefined : rows[active];
+        const moveTo = (i) => {
+            const row = rows[Math.max(0, Math.min(rows.length - 1, i))];
+            if (!row?.key)
+                return;
+            this.#active.value = row.key;
+            this.#navigating = true;
+            requestAnimationFrame(() => this.querySelector(`#${CSS.escape(rowId(row.key))}`)?.scrollIntoView({ block: "nearest" }));
+        };
+        const choose = (row) => {
+            if (!row?.key || !source || !tree)
+                return;
+            const entity = tree.entity(row.key);
+            if (!entity)
+                return;
+            if (!source.canChoose(entity)) {
+                if (row.folder !== false)
+                    void tree.toggle(row.key);
+                return;
+            }
+            this.write(keyFromText(row.key)[0] ?? null);
+            this.#close();
+        };
+        const status = !tree
+            ? ""
+            : tree.tooBroad.value
+                ? "Too many matches; type more."
+                : tree.searching.value || this.#search.value.trim() !== typed
+                    ? "Searching…"
+                    : typed && rows.length === 0
+                        ? `Nothing matches “${typed}”.`
+                        : "";
+        return html `<div class="aster-picker aster-tree-picker">
+      <label class="aster-field" data-ring-owner style=${anchorStyle(c.id)}>
+        <input id=${c.id} role="combobox" .value=${live(query ?? label)}
+          aria-label=${this.labelled ? nothing : c.label}
+          placeholder=${this.#placeholder.value || (c.meta?.nullable ? "None" : "Choose…")}
+          aria-haspopup="tree" aria-expanded=${open ? "true" : "false"} aria-controls=${treeId} aria-autocomplete="list"
+          aria-activedescendant=${open && activeRow?.key ? rowId(activeRow.key) : nothing}
+          aria-required=${c.state.required ? "true" : nothing}
+          aria-invalid=${c.invalid ? "true" : nothing}
+          aria-describedby=${describedBy ?? nothing}
+          ?readonly=${c.state.readOnly}
+          autocomplete="off" spellcheck="false"
+          @input=${(e) => this.#type(e.target.value)}
+          @click=${(e) => {
+            if (this.#open.peek())
+                return this.#close();
+            this.#show();
+            e.target.select();
+        }}
+          @focus=${(e) => e.target.select()}
+          @blur=${(e) => {
+            if (this.contains(e.relatedTarget))
+                return;
+            this.#close();
+        }}
+          @keydown=${(e) => {
+            if (c.state.readOnly)
+                return;
+            const isOpen = this.#open.peek();
+            switch (e.key) {
+                case "ArrowDown":
+                case "ArrowUp":
+                    e.preventDefault();
+                    if (!isOpen)
+                        return this.#show();
+                    return moveTo(active < 0 ? 0 : active + (e.key === "ArrowDown" ? 1 : -1));
+                case "Home":
+                case "End":
+                    if (!isOpen || !this.#navigating)
+                        return;
+                    e.preventDefault();
+                    return moveTo(e.key === "Home" ? 0 : rows.length - 1);
+                case "ArrowRight":
+                    if (!isOpen || !this.#navigating || !activeRow?.key || !tree || !activeRow.folder)
+                        return;
+                    e.preventDefault();
+                    if (!activeRow.open)
+                        return void tree.expand(activeRow.key);
+                    return moveTo(active + 1);
+                case "ArrowLeft": {
+                    if (!isOpen || !this.#navigating || !activeRow?.key || !tree)
+                        return;
+                    e.preventDefault();
+                    if (activeRow.open)
+                        return tree.collapse(activeRow.key);
+                    const parent = rows.findIndex((r) => r.key === activeRow.parent);
+                    return parent >= 0 ? moveTo(parent) : undefined;
+                }
+                case "Enter":
+                    if (!isOpen)
+                        return;
+                    e.preventDefault();
+                    return choose(activeRow);
+                case "Escape":
+                    if (!isOpen)
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return this.#close();
+            }
+        }}>
+        <svg class="aster-picker-chevron" viewBox="0 0 10 10" aria-hidden="true"><path d="M2 3.8 5 6.8l3-3"/></svg>
+      </label>
+      ${trail.length
+            ? html `<p class="aster-tree-picker-trail" id=${trailId}><span class="aster-sr-only">In </span>${trail.map((name, i) => html `${i ? html `<span aria-hidden="true"> › </span><span class="aster-sr-only">, </span>` : nothing}${name}`)}</p>`
+            : nothing}
+      <div class="aster-picker-list aster-popover aster-tree-picker-list" popover="manual" ${openWhen(open)} style=${placeStyle(c.id)}
+        id=${treeId} role="tree" aria-label=${c.label} aria-busy=${status === "Searching…" ? "true" : nothing}>
+        ${rows.map((row, i) => this.#row(row, i === active, c.value, typed, rowId, choose))}
+        ${status || (tree && rows.length === 0) ? html `<div class="aster-picker-empty" role="none">${status || "No choices."}</div>` : nothing}
+      </div>
+      <div class="aster-sr-only" role="status">${open && status !== "Searching…" ? status : ""}</div>
+    </div>`;
+    }
+    #row(row, active, chosen, typed, rowId, choose) {
+        const source = this.#options.peek();
+        const tree = this.#tree.peek();
+        const indent = `--level: ${row.level}`;
+        if (!row.key) {
+            // A row not loaded yet: ask for its page.
+            queueMicrotask(() => void row.collection.ensure(row.index, row.index + row.collection.pageSize).catch(() => { }));
+            return html `<div class="aster-tree-option" role="none" style=${indent}><span class="aster-tree-option-twisty"></span>Loading…</div>`;
+        }
+        const key = row.key;
+        const entity = tree.entity(key);
+        const can = entity ? source.canChoose(entity) : false;
+        const selected = chosen !== null && chosen !== undefined && keyText([chosen]) === key;
+        const toggle = (e) => {
+            e.stopPropagation();
+            void tree.toggle(key);
+        };
+        return html `<div class="aster-tree-option" role="treeitem" id=${rowId(key)} style=${indent}
+      aria-level=${row.level} aria-posinset=${row.position} aria-setsize=${row.siblings}
+      aria-expanded=${row.folder === false || (row.folder === undefined && can) ? nothing : row.open ? "true" : "false"}
+      aria-selected=${selected ? "true" : "false"}
+      ?data-active=${active} ?data-group=${!can} ?data-context=${typed !== "" && entity !== undefined && !source.matches(entity, typed)}
+      @pointerdown=${(e) => e.preventDefault()}
+      @click=${() => {
+            this.#active.value = key;
+            choose(row);
+        }}>
+      <span class="aster-tree-option-twisty" @click=${row.folder === false ? nothing : toggle}>
+        ${row.folder === false || (row.folder === undefined && can) ? nothing : html `<svg viewBox="0 0 10 10" aria-hidden="true"><path d="M3.8 2 6.8 5l-3 3"/></svg>`}
+      </span>${entity ? source.text(entity) : ""}
+    </div>`;
+    }
+    #ensureTree() {
+        const source = this.#options.peek();
+        if (!source)
+            return undefined;
+        if (this.#treeFor !== source) {
+            this.#tree.peek()?.dispose();
+            this.#tree.value = source.tree(this.#search);
+            this.#treeFor = source;
+        }
+        return this.#tree.peek();
+    }
+    #show() {
+        if (this.#open.peek())
+            return;
+        const tree = this.#ensureTree();
+        if (!tree)
+            return;
+        this.#open.value = true;
+        this.#navigating = false;
+        const value = this.model?.values.peek()[this.field];
+        if (value === null || value === undefined) {
+            this.#active.value = undefined;
+            return;
+        }
+        const key = keyText([value]);
+        this.#active.value = key;
+        void tree.reveal(key).then(() => {
+            if (this.#active.peek() === key)
+                this.querySelector(`[aria-selected="true"]`)?.scrollIntoView({ block: "nearest" });
+        });
+    }
+    #type(text) {
+        this.#query.value = text;
+        this.#active.value = undefined;
+        this.#navigating = false;
+        this.#show();
+        clearTimeout(this.#searchTimer);
+        this.#searchTimer = setTimeout(() => (this.#search.value = text.trim()), SEARCH_DELAY);
+    }
+    #close() {
+        clearTimeout(this.#searchTimer);
+        this.#open.value = false;
+        this.#query.value = undefined;
+        this.#search.value = "";
+        this.#navigating = false;
+    }
+}
+define("aster-tree-picker", TreePicker);

package/dist/progress/policy.d.ts

@@ -0,0 +1,5 @@
+import { type ProgressPolicy } from "@getaster/data";
+/** Configure application/region defaults; mounted descendants follow changes. */
+export declare function provideProgressPolicy(root: Element, options: ProgressPolicy): void;
+/** Merge application/region providers, including shadow hosts, from outer to inner. */
+export declare function progressPolicyOf(element: Element): Readonly<Required<ProgressPolicy>>;

package/dist/progress/policy.js

@@ -0,0 +1,28 @@
+import { batch, signal } from "@preact/signals-core";
+import { DEFAULT_PROGRESS_POLICY, progressPolicy } from "@getaster/data";
+const policies = new WeakMap();
+const revision = signal(0);
+/** Configure application/region defaults; mounted descendants follow changes. */
+export function provideProgressPolicy(root, options) {
+    progressPolicy(options);
+    const snapshot = Object.freeze({ ...options });
+    batch(() => {
+        const existing = policies.get(root);
+        if (existing)
+            existing.value = snapshot;
+        else
+            policies.set(root, signal(snapshot));
+        revision.value++;
+    });
+}
+/** Merge application/region providers, including shadow hosts, from outer to inner. */
+export function progressPolicyOf(element) {
+    revision.value;
+    const chain = [];
+    for (let node = element; node; node = node.parentNode ?? (node instanceof ShadowRoot ? node.host : null)) {
+        const policy = node instanceof Element ? policies.get(node)?.value : undefined;
+        if (policy)
+            chain.push(policy);
+    }
+    return Object.freeze(Object.assign({}, DEFAULT_PROGRESS_POLICY, ...chain.reverse()));
+}

package/dist/progress/status.d.ts

@@ -0,0 +1,20 @@
+import { type ProgressPolicy } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+/** A reserved live-status line; request state and action availability are never delayed. */
+export declare class ProgressStatus extends AsterElement {
+    #private;
+    get busy(): boolean;
+    set busy(value: boolean);
+    get error(): string | undefined;
+    set error(value: string | undefined);
+    get progressPolicy(): ProgressPolicy;
+    set progressPolicy(value: ProgressPolicy);
+    get pendingText(): string;
+    set pendingText(value: string);
+    get completeText(): string;
+    set completeText(value: string);
+    get reserveSpace(): boolean;
+    set reserveSpace(value: boolean);
+    connectedCallback(): void;
+    protected render(): View;
+}

package/dist/progress/status.js

@@ -0,0 +1,38 @@
+import { ProgressState, progressPolicy } from "@getaster/data";
+import { html, nothing } from "lit-html";
+import { AsterElement, define } from "../base/element.js";
+import { progressPolicyOf } from "./policy.js";
+/** A reserved live-status line; request state and action availability are never delayed. */
+export class ProgressStatus extends AsterElement {
+    #busy = this.prop(false);
+    #error = this.prop(undefined);
+    #policy = this.prop({});
+    #pending = this.prop("Working…");
+    #complete = this.prop("Updated");
+    #reserve = this.prop(true);
+    #state;
+    get busy() { return this.#busy.value; }
+    set busy(value) { this.#busy.value = value; }
+    get error() { return this.#error.value; }
+    set error(value) { this.#error.value = value; }
+    get progressPolicy() { return this.#policy.value; }
+    set progressPolicy(value) { progressPolicy(value); this.#policy.value = Object.freeze({ ...value }); }
+    get pendingText() { return this.#pending.value; }
+    set pendingText(value) { this.#pending.value = value; }
+    get completeText() { return this.#complete.value; }
+    set completeText(value) { this.#complete.value = value; }
+    get reserveSpace() { return this.#reserve.value; }
+    set reserveSpace(value) { this.#reserve.value = value; }
+    connectedCallback() {
+        this.#state = new ProgressState(() => ({ busy: this.#busy.value, error: this.#error.value }), () => ({ ...progressPolicyOf(this), ...this.#policy.value }));
+        this.onDisconnect(() => { this.#state?.dispose(); this.#state = undefined; });
+        super.connectedCallback();
+    }
+    render() {
+        const phase = this.#state?.phase.value ?? "idle";
+        const text = phase === "working" ? this.#pending.value : phase === "complete" ? this.#complete.value : phase === "error" ? this.#error.value || "Could not complete." : "";
+        return html `<span class="aster-progress-status" role="status" aria-atomic="true"
+      ?data-reserve=${this.#reserve.value} data-phase=${phase}>${text ?? nothing}</span>`;
+    }
+}
+define("aster-progress-status", ProgressStatus);

package/dist/rule/operators.d.ts

@@ -0,0 +1,8 @@
+import type { Value } from "@getaster/data";
+/** Metadata labels used by persisted rule clauses. */
+export declare function opLabel(allowed: readonly {
+    readonly value: Value;
+    readonly label?: string;
+}[] | undefined, op: Value | undefined): string;
+/** Human labels shared by general query condition controls. */
+export declare function filterOperatorLabel(op: string): string;

package/dist/rule/operators.js

@@ -0,0 +1,9 @@
+/** Metadata labels used by persisted rule clauses. */
+export function opLabel(allowed, op) {
+    return allowed?.find((a) => a.value === op)?.label ?? String(op ?? "");
+}
+/** Human labels shared by general query condition controls. */
+export function filterOperatorLabel(op) {
+    const labels = { eq: "equals", ne: "does not equal", gt: "greater than", ge: "at least", lt: "less than", le: "at most", in: "is one of", isnull: "is null", notnull: "is not null", contains: "contains", startswith: "starts with", endswith: "ends with", and: "All", or: "Any", not: "Not all", any: "Any related record", all: "Every related record", via: "Related record" };
+    return labels[op] ?? op;
+}

package/dist/rule/rule-editor.d.ts

@@ -0,0 +1,57 @@
+import type { ListEdit, Value } from "@getaster/data";
+import type { ReadonlySignal } from "@preact/signals-core";
+import { AsterElement, type View } from "../base/element.ts";
+import type { PickerOptions } from "../picker/options.ts";
+import { TreeChoices } from "../picker/tree-choices.ts";
+import "../picker/tree-picker.ts";
+import type { Option } from "../select/choice.ts";
+import "../select/select.ts";
+/** What a condition can test about the field it names. */
+export interface RuleField {
+    /** The operators that suit the field, from the clause's operator values. */
+    readonly operators: readonly string[];
+    /** The value's control: typed text, a date, or one of `options`. */
+    readonly input: "text" | "number" | "date";
+    /** Values to choose from; with `in`, several. */
+    readonly options?: readonly Option[];
+}
+/**
+ * Edits a rule as a tree of clauses: groups (all of, any of, none of)
+ * holding conditions (a field, an operator, a value) and further groups.
+ * The clauses are rows of a list edit, so every input shows pending, a
+ * changed row offers Revert, a removed one is struck through with Undo, and
+ * the whole rule saves with its record.
+ *
+ * Rows have `op`, `parentClauseId`, `position`, `category`, `fieldRef`,
+ * `value` and, on a message's top group, `message`. A value for `in` is a
+ * JSON array. With `messages`, each top-level group is a message shown when
+ * its conditions hold; otherwise there's at most one, and none means
+ * "always".
+ */
+export declare class RuleEditor extends AsterElement {
+    #private;
+    get list(): ListEdit | undefined;
+    set list(v: ListEdit | undefined);
+    /** The rows' `category`: this editor shows and adds only these. */
+    get category(): string;
+    set category(v: string);
+    get label(): string;
+    set label(v: string);
+    /** Each top-level group is a message with its own conditions. */
+    get messages(): boolean;
+    set messages(v: boolean);
+    /** The fields a condition can name: a list, or a tree where names repeat across groups. */
+    get fields(): PickerOptions | TreeChoices | undefined;
+    set fields(v: PickerOptions | TreeChoices | undefined);
+    /** What a named field allows: its operators and values. */
+    get describe(): ((fieldRef: Value | undefined) => ReadonlySignal<RuleField | undefined>) | undefined;
+    set describe(v: ((fieldRef: Value | undefined) => ReadonlySignal<RuleField | undefined>) | undefined);
+    /** Why the rule can't be edited now; set, it makes the editor read-only. */
+    get readOnlyReason(): string | undefined;
+    set readOnlyReason(v: string | undefined);
+    /** Said when there's no rule. */
+    get empty(): string;
+    set empty(v: string);
+    protected render(): View;
+    protected updated(): void;
+}