@loadbare/app 0.22.0 → 0.24.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) {
@@ -141,9 +182,11 @@ function land(el, value) {
         return;
     }
     if (isCheckbox(el)) {
-        // Checked by the rule `lb-show` is on by: only null and false are off,
-        // and no string is read.
-        el.checked = value !== false;
+        // Off for false, and for what an unchecked checkbox gathers or an absent
+        // query parm lands as, so a checkbox lands what it gathered even from a
+        // query whose values are strings, such as lb-url.
+        el.checked =
+            value !== false && value !== "false" && value !== "";
     }
     else if (isRadio(el)) {
         el.checked =
@@ -161,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
@@ -658,7 +721,7 @@ function listFor(el, template) {
                 data: {},
                 placed: {},
                 hidden: false,
-                unsorted: false,
+                unplaced: false,
             };
             list.byKey.set(key, entry);
             list.root.rows.push(entry);
@@ -698,7 +761,7 @@ function create(list, doc, key) {
         data: {},
         placed: {},
         hidden: false,
-        unsorted: false,
+        unplaced: false,
     };
     list.byKey.set(key, entry);
     return entry;
@@ -1014,7 +1077,8 @@ function hide(el, hidden) {
 }
 /**
  * Finish a group and everything under it, from the rows it shows: each
- * heading filled from the first, as it was when last placed by the order,
+ * heading filled and linked from the first, as it was when last placed by
+ * the order,
  * each aggregate set from all of them, and a group hidden when a filter hides
  * every row in it. The rows it shows are returned.
  */
@@ -1032,9 +1096,12 @@ function finish(group, types) {
             }
         }
     }
-    if (shown[0])
-        for (const head of group.heads)
+    if (shown[0]) {
+        for (const head of group.heads) {
             fill(head, shown[0].placed);
+            link(head, shown[0].placed);
+        }
+    }
     aggregate(group.aggregates, rows, types);
     return shown;
 }
@@ -1130,10 +1197,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);
@@ -1218,39 +1287,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);
@@ -1275,18 +1344,18 @@ 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_UNPLACED_COUNT, String(unplaced));
     if (terms.length === 0)
         el.removeAttribute(ATTR_QUERY_ORDER);
     else
@@ -1298,6 +1367,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);
@@ -1527,13 +1604,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().
@@ -1557,7 +1627,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)
@@ -1567,11 +1636,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)) {