@loadbare/app 0.23.0 → 0.25.0

package/dist/hub/lb-apply.js

@@ -38,7 +38,7 @@
  * landing reaches in there as it reaches everywhere else, so a branch that
  * returns is already current. Nothing but landing reaches in.
  */
-import { AGGREGATES, ATTR_COLUMN, ATTR_FILTER, ATTR_ORDER, CHOICES_QUERY, LB_RESERVED_PREFIX, ATTR_COLUMN_VALUE, ATTR_COUNT, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_MAX, ATTR_MIN, ATTR_QUERY, ATTR_QUERY_ORDER, ATTR_QUERY_ROW_COUNT, ATTR_QUERY_UNSORTED_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_ROW_UNSORTED, ATTR_SHOW, ATTR_SUM, ATTR_URL_PARM, KIND_ROW, LIVE_GROUP, LIVE_ROW, ORDER_DESCENDING, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, ATTR_SELECT, ATTR_ROW_SELECTED, } from "../core/lb-constants.js";
+import { AGGREGATES, ATTR_COLUMN, ATTR_FILTER, ATTR_ORDER, CHOICES_QUERY, LB_RESERVED_PREFIX, ATTR_COLUMN_VALUE, ATTR_COUNT, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_MAX, ATTR_MIN, ATTR_QUERY, ATTR_QUERY_ORDER, ATTR_QUERY_ROW_COUNT, ATTR_MANUAL, MANUAL_FILTER, MANUAL_ORDER, ATTR_QUERY_UNPLACED_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_ROW_UNPLACED, ATTR_SHOW, ATTR_SUM, ATTR_URL_PARM, KIND_ROW, LIVE_GROUP, LIVE_ROW, ORDER_DESCENDING, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, ATTR_SELECT, ATTR_ROW_SELECTED, } from "../core/lb-constants.js";
 import { compareRows, compareValues, isPatch, parseFilter, parseOrder, passes, readAs, } from "../core/lb-types.js";
 import { attachPlaced, detachRemoved, LEAVING, PARKED, placed, upgradeAbsent, } from "./lb-lifecycle.js";
 /** A DocumentFragment's nodeType. Tier 3 has no `Node` global to read it from. */
@@ -100,23 +100,58 @@ export function isFormAssociated(el) {
 export function isControl(el) {
     return (isNativeControl(el) || isCheckbox(el) || isRadio(el) || isFormAssociated(el));
 }
+/**
+ * A control that holds several values: a `<select multiple>`, or a checkbox
+ * carrying a `value`, one of a set naming one column. A checkbox with no
+ * `value` is a flag.
+ */
+function holdsSeveral(el) {
+    if (el.localName === "select")
+        return el.multiple;
+    return isCheckbox(el) && el.hasAttribute("value");
+}
+/** A landed value as the list of strings a control holding several shows. */
+function listOf(value) {
+    if (Array.isArray(value))
+        return value.map((v) => String(v));
+    if (value === null || value === undefined || value === "")
+        return [];
+    return [String(value)];
+}
 /**
  * What a control gathers: a checkbox `"true"` or `"false"`, so unchecked
- * still says so, and any other control its `value`.
+ * still says so, a `<select multiple>` the values of its selected options,
+ * and any other control its `value`, which a custom element may give as
+ * several.
  */
 function controlValue(el) {
-    return isCheckbox(el) ? String(el.checked) : el.value;
+    if (isCheckbox(el))
+        return String(el.checked);
+    if (el.localName === "select" && el.multiple) {
+        return [...el.selectedOptions].map((o) => o.value);
+    }
+    const value = el.value;
+    return Array.isArray(value) ? value.map((v) => String(v)) : el.value;
 }
 /**
  * Gather a control into `values` under its column. Of the radio buttons
  * naming one column, the one checked gives the value, and `""` stands when
- * none is.
+ * none is. Of the checkboxes in a set naming one column, the checked ones
+ * give their values, and none checked gives none.
  */
 export function gatherInto(values, column, el) {
     if (isRadio(el) && !el.checked) {
         values[column] ??= "";
         return;
     }
+    if (isCheckbox(el) && holdsSeveral(el)) {
+        const had = values[column];
+        const set = Array.isArray(had) ? had : [];
+        values[column] = set;
+        if (el.checked)
+            set.push(el.value);
+        return;
+    }
     values[column] = controlValue(el);
 }
 /**
@@ -126,6 +161,12 @@ export function gatherInto(values, column, el) {
  * text content is set. Every one carries the value as `lb-column-value`.
  */
 function land(el, value) {
+    if (holdsSeveral(el))
+        return landSeveral(el, value);
+    // A custom element control takes several values as they are. Anything
+    // else holds one, and shows the first, as a URL's parm reads.
+    if (Array.isArray(value) && !isFormAssociated(el))
+        value = value[0];
     // Untouched, whatever the server sent: the browser decides what a
     // non-string looks like. See Row in core/lb-types.ts.
     if (value === null || value === undefined) {
@@ -163,6 +204,26 @@ function land(el, value) {
     }
     setStamp(el, ATTR_COLUMN_VALUE, String(value));
 }
+/**
+ * Set a control that holds several values: a checkbox in a set is checked
+ * when its `value` is among them, and a `<select multiple>` selects each
+ * option whose `value` is.
+ */
+function landSeveral(el, value) {
+    const list = listOf(value);
+    if (isCheckbox(el)) {
+        el.checked = list.includes(el.value);
+    }
+    else {
+        for (const option of el.options) {
+            option.selected = list.includes(option.value);
+        }
+    }
+    if (list.length === 0)
+        el.removeAttribute(ATTR_COLUMN_VALUE);
+    else
+        setStamp(el, ATTR_COLUMN_VALUE, JSON.stringify(list));
+}
 /**
  * Set an element's text, unless it already holds exactly that text. Writing
  * the same text again replaces the text node, which is two mutations and a
@@ -632,6 +693,7 @@ function listFor(el, template) {
         levels,
         rowTemplate: at,
         byKey: new Map(),
+        unentered: [],
         root: {
             id: "",
             nodes: [],
@@ -660,7 +722,7 @@ function listFor(el, template) {
                 data: {},
                 placed: {},
                 hidden: false,
-                unsorted: false,
+                unplaced: false,
             };
             list.byKey.set(key, entry);
             list.root.rows.push(entry);
@@ -700,11 +762,79 @@ function create(list, doc, key) {
         data: {},
         placed: {},
         hidden: false,
-        unsorted: false,
+        unplaced: false,
     };
     list.byKey.set(key, entry);
     return entry;
 }
+/**
+ * Put the rows not yet entered after every row: immediately after the list's
+ * first template, which the rows and groups land in front of, so placing
+ * them never moves these.
+ */
+function standLast(list) {
+    let at = list.root.slot;
+    for (const row of list.unentered) {
+        if (at.nextElementSibling !== row)
+            at.after(row);
+        at = row;
+    }
+}
+/** Stamp a list's count: the rows it shows, and its rows not yet entered. */
+function recount(el, list) {
+    const showing = rowsUnder(list.root).filter((entry) => !entry.hidden);
+    setStamp(el, ATTR_QUERY_ROW_COUNT, String(showing.length + list.unentered.length));
+}
+/**
+ * Put a row not yet entered into a list: a live row copied from its row
+ * template, keyed by the empty key, its controls at their HTML defaults and
+ * its `lb-show` branches as for a row whose columns are all null. It sends
+ * nothing; the submit of the form around the list carries it. False when the
+ * element holds no row template.
+ */
+export function addUnentered(el) {
+    const template = lists.get(el)?.top ?? templateIn(el);
+    if (!template)
+        return false;
+    const list = listFor(el, template);
+    if (!list)
+        return false;
+    const doc = el.ownerDocument;
+    const source = list.rowTemplate.content.firstElementChild;
+    list.paths ??= compile(source);
+    // Imported rather than cloned, for the reason a live row is.
+    const row = doc.importNode(source, true);
+    upgradeAbsent(row, doc);
+    placed(row);
+    row.setAttribute(ATTR_ROW_LIVE, "");
+    row.setAttribute(ATTR_KEY_VALUE, "");
+    nameRadios(row, "");
+    for (const [show, els] of placesBy(row, list.paths).shows) {
+        for (const shown of els)
+            presentPlaced(shown, show.startsWith(SHOW_NOT));
+    }
+    list.unentered.push(row);
+    standLast(list);
+    recount(el, list);
+    attachPlaced();
+    return true;
+}
+/**
+ * Take a row not yet entered out of its list, as a row leaves. False when
+ * the row is not one `--lb-new` put in a list.
+ */
+export function discardUnentered(row) {
+    const el = row.parentElement?.closest(`[${ATTR_QUERY}]`);
+    const list = el ? lists.get(el) : undefined;
+    const at = list?.unentered.indexOf(row) ?? -1;
+    if (!el || !list || at < 0)
+        return false;
+    list.unentered.splice(at, 1);
+    leaving(row, ATTR_ROW_LIVE, ATTR_ROW_LEAVING);
+    depart([row]);
+    recount(el, list);
+    return true;
+}
 /**
  * Give each radio button of a new live row a group of its own. The browser
  * groups radio buttons by `name`, and a row template repeats one `name` in
@@ -1136,10 +1266,12 @@ function differs(before, after) {
  * the same rows again moves nothing. A row a filter the user chose does not
  * pass is `hidden`.
  *
- * A landing `held` for the user working in the list moves nothing already
- * showing, whole or a patch. A row it changed or created that the order
- * would put elsewhere, or that the filter would hide, stays and is stamped
- * unsorted until the rows are next placed by the order.
+ * A landing that answers a request leaves alone each side `lb-manual` names
+ * on the element, whole or a patch. Under `order`, nothing already showing
+ * moves, and a new row goes last in its group. Under `filter`, a row the
+ * answer changed or created stays showing. A row left where the order or
+ * the filter would not leave it is stamped unplaced until the rows are next
+ * placed.
  */
 export function applyRows(el, template, keyColumn, result, options = {}) {
     const list = listFor(el, template);
@@ -1224,39 +1356,39 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
             a.i - b.i)
             .map(({ entry }) => entry);
     const passing = filterFor(el, options.choices, options.types ?? {});
+    const manual = options.requested ? manualOf(el) : NO_MANUAL;
+    const touched = new Set([...changed, ...created]);
+    // A row left out of place stays touched until the rows are placed again.
+    for (const entry of shown)
+        if (entry.unplaced)
+            touched.add(entry);
     let order;
-    if (options.held) {
-        // The user is working in this list: what already shows stays where it
-        // stands, and what is new goes last in the group it belongs to.
+    let out = new Set();
+    if (manual.order) {
+        // What already shows stays where it stands, and what is new goes last
+        // in the group it belongs to.
         for (const entry of created)
             entry.placed = entry.data;
         order = heldOrder(stayed, created, groupTerms(list, terms));
-        const touched = new Set([...changed, ...created]);
-        for (const entry of order)
-            if (entry.unsorted)
-                touched.add(entry);
-        const out = movedRows(order, sort(order), touched);
-        for (const entry of order) {
-            const fails = !passing(entry.data);
-            // A row the user just changed does not vanish from under them.
-            const kept = touched.has(entry) && !entry.hidden;
-            filterRow(entry, fails && !kept);
-            // A row stands in the group it was placed in until it is placed again.
-            const moves = regrouped(entry, list, terms);
-            if (!moves)
-                entry.placed = entry.data;
-            entry.unsorted = out.has(entry) || (kept && fails) || moves;
-        }
+        out = movedRows(order, sort(order), touched);
     }
     else {
         order = sort(whole
             ? [...arriving.keys()].map((key) => list.byKey.get(key))
             : [...stayed, ...created]);
-        for (const entry of order) {
+    }
+    for (const entry of order) {
+        const fails = !passing(entry.data);
+        // A row the answer touched does not vanish from under the user.
+        const kept = manual.filter && touched.has(entry) && !entry.hidden && fails;
+        const hides = fails && !kept;
+        filterRow(entry, hides);
+        // A row stands in the group it was placed in until it is placed again.
+        const moves = manual.order && regrouped(entry, list, terms);
+        if (!moves)
             entry.placed = entry.data;
-            entry.unsorted = false;
-            filterRow(entry, !passing(entry.data));
-        }
+        // A row nobody sees stands nowhere the user would notice.
+        entry.unplaced = !hides && (out.has(entry) || kept || moves);
     }
     const moved = movedRows(stayed, order, changed);
     const retired = arrange(list, doc, order, terms);
@@ -1281,18 +1413,19 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         }
     }
     stamps.done(doc);
-    let unsorted = 0;
+    let unplaced = 0;
     for (const entry of order) {
-        if (entry.el.hasAttribute(ATTR_ROW_UNSORTED) !== entry.unsorted) {
-            entry.el.toggleAttribute(ATTR_ROW_UNSORTED, entry.unsorted);
+        if (entry.el.hasAttribute(ATTR_ROW_UNPLACED) !== entry.unplaced) {
+            entry.el.toggleAttribute(ATTR_ROW_UNPLACED, entry.unplaced);
         }
-        if (entry.unsorted)
-            unsorted++;
+        if (entry.unplaced)
+            unplaced++;
     }
     const rows = finish(list.root, options.types ?? {});
     // Counted from what the hub holds, which is what the rows show.
-    setStamp(el, ATTR_QUERY_ROW_COUNT, String(rows.length));
-    setStamp(el, ATTR_QUERY_UNSORTED_COUNT, String(unsorted));
+    setStamp(el, ATTR_QUERY_ROW_COUNT, String(rows.length + list.unentered.length));
+    standLast(list);
+    setStamp(el, ATTR_QUERY_UNPLACED_COUNT, String(unplaced));
     if (terms.length === 0)
         el.removeAttribute(ATTR_QUERY_ORDER);
     else
@@ -1304,6 +1437,14 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         depart(departing);
     host.lbRowsLanded?.();
 }
+const NO_MANUAL = { order: false, filter: false };
+function manualOf(el) {
+    const sides = (el.getAttribute(ATTR_MANUAL) ?? "").split(/\s+/);
+    return {
+        order: sides.includes(MANUAL_ORDER),
+        filter: sides.includes(MANUAL_FILTER),
+    };
+}
 /** The order's terms a list's groups break on, outermost first. */
 function groupTerms(list, terms) {
     return terms.slice(0, list.levels.length);
@@ -1533,13 +1674,6 @@ function fillArrivals(root, state) {
         }
     }
 }
-/**
- * Whether a request from `origin` was sent from inside `el`'s list: `el` is
- * the nearest element carrying `lb-query` around it.
- */
-function sentFrom(el, origin) {
-    return origin?.parentElement?.closest(`[${ATTR_QUERY}]`) === el;
-}
 /**
  * Land response items. Every answer arrives through here, and is kept for
  * `root`, so that what arrives after it is filled from it — see forget().
@@ -1563,7 +1697,6 @@ export function applyResponse(root, items, options = {}) {
             landItem(el, item, {
                 ...rowsOptions(state, item),
                 requested: options.requested,
-                held: sentFrom(el, options.origin),
             });
         }
         if (choices.size > 0)
@@ -1573,11 +1706,12 @@ export function applyResponse(root, items, options = {}) {
     attachPlaced();
 }
 /**
- * Place an element's rows by the order again, from the answer kept for its
- * query, with no round trip: what the user asks for once an edit has left
- * rows out of order. False when the element shows no rows the hub holds.
+ * Place an element's rows by the order and the filter again, from the answer
+ * kept for its query, with no round trip: what the user asks for once an
+ * answer has left rows out of place. False when the element shows no rows
+ * the hub holds.
  */
-export function resort(root, el) {
+export function placeAgain(root, el) {
     const state = kept.get(root);
     const item = state?.answers.get(el.getAttribute(ATTR_QUERY) ?? "");
     if (!state || !item || item.kind === KIND_ROW || !state.landed.has(el)) {