@loadbare/app 0.4.0

package/widgets/lb-options.ts

@@ -0,0 +1,88 @@
+/// <reference lib="dom" />
+
+import {
+  ATTR_ACTION,
+  ATTR_GROUP,
+  ATTR_KEY,
+  LB_EVENT_NAME,
+} from "../core/lb-constants";
+import type {
+  Projection,
+  HubRequest,
+  HubRowHost,
+} from "../core/lb-types";
+import { applyRows, type Place } from "../hub/lb-rows";
+
+/**
+ * A `<select>` whose choices come from a query, and the case that shows why
+ * placement belongs to the widget rather than to the framework.
+ *
+ * The rows arrive flat and keyed. Nothing on the wire knows about
+ * `<optgroup>`, and nothing needs to: a group is a column like any other, and
+ * turning a repeated column value into an element is exactly the local
+ * knowledge a widget has and the hub does not. A table wanting section
+ * headings would read the same `lb-group` and build something else.
+ *
+ * The identity of a row is the value of the option, so `lb-key` supplies
+ * both and the page declares it once.
+ *
+ * Exported because `lb-picker` is this widget with its row template
+ * supplied by the definition instead of by the page. Nothing about the
+ * behavior changes, so nothing about the behavior is written twice.
+ */
+export class LbOptions extends HTMLElement implements HubRowHost {
+  acceptRows(result: Projection) {
+    applyRows(this, result, this.place);
+    // The identity of the row is the value of the option, so nothing on the
+    // page has to say so twice.
+    for (const option of this.querySelectorAll(`option[${ATTR_KEY}]`)) {
+      option.setAttribute("value", option.getAttribute(ATTR_KEY)!);
+    }
+    // A group is derived, so it goes when its last row does.
+    for (const group of this.querySelectorAll("optgroup")) {
+      if (!group.querySelector("option")) group.remove();
+    }
+  }
+
+  private place: Place = (row, tuple, template) => {
+    const select = this.querySelector("select")!;
+    const groupCell = template.getAttribute(ATTR_GROUP);
+    if (!groupCell) {
+      select.insertBefore(row, template);
+      return;
+    }
+    this.groupFor(select, template, tuple[groupCell] ?? "").append(row);
+  };
+
+  /** The group with this label, or a new one in front of the template. */
+  private groupFor(select: Element, template: Element, label: string): Element {
+    for (const group of select.querySelectorAll("optgroup")) {
+      if (group.label === label) return group;
+    }
+    const group = document.createElement("optgroup");
+    group.label = label;
+    select.insertBefore(group, template);
+    return group;
+  }
+
+  connectedCallback() {
+    this.addEventListener("change", () => {
+      const select = this.querySelector("select");
+      if (!select) {
+        console.error(`lb-options: change with no <select>, ignoring`);
+        return;
+      }
+      const name = this.getAttribute(ATTR_ACTION);
+      if (!name) {
+        console.error(`lb-options: no ${ATTR_ACTION}, nothing to send`);
+        return;
+      }
+      const detail: HubRequest = { op: "action", name, value: select.value };
+      this.dispatchEvent(
+        new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),
+      );
+    });
+  }
+}
+
+customElements.define("lb-options", LbOptions);

package/widgets/lb-picker.html

@@ -0,0 +1,7 @@
+<label
+  >{{label}}
+  <select>
+    <template lb-key="{{key}}" lb-group="{{group}}">
+      <option lb-cell="{{cell}}"></option>
+    </template></select
+></label>

package/widgets/lb-picker.ts

@@ -0,0 +1,27 @@
+/// <reference lib="dom" />
+
+import { LbOptions } from "./lb-options";
+
+/**
+ * The same `<select>` as `lb-options`, with the row template supplied by
+ * the definition instead of by the page.
+ *
+ * A row template is markup, so writing it is the page author's job — until
+ * every row is one option and the only thing that varies is which columns it
+ * reads. Those are words, and words are parameters: `exp-key`, `exp-cell` and
+ * `exp-group` fill the placeholders in the template the definition already
+ * has, at build time, and the page writes one tag with no children.
+ *
+ * It is the same trade as anywhere else in expansion. A page author who wants
+ * a second element in the row, or an option built from two columns, writes
+ * `lb-options` and the template themselves. This one is for when they do
+ * not.
+ *
+ * The behavior is inherited whole, because it is the same behavior: rows land
+ * in groups, the key becomes the value, and a change sends the declared
+ * action. A distinct class exists only because `customElements.define`
+ * requires one constructor per name.
+ */
+class LbPicker extends LbOptions {}
+
+customElements.define("lb-picker", LbPicker);

package/widgets/lb-select.html

@@ -0,0 +1,4 @@
+<label
+  >{{label}}
+  <select lb-slot></select
+></label>

package/widgets/lb-select.ts

@@ -0,0 +1,55 @@
+/// <reference lib="dom" />
+
+import {
+  ATTR_ACTION,
+  ATTR_VALUE,
+  LB_EVENT_NAME,
+} from "../core/lb-constants";
+import type { HubRequest } from "../core/lb-types";
+
+/**
+ * A leaf cell wrapping a <select>. It receives its value like any other cell,
+ * and on change it sends the action the page declared for it — the request
+ * vocabulary and the addressing vocabulary running in both directions on one
+ * widget.
+ *
+ * The choice is the interaction, so this is the case where an action carries
+ * a value. The server still decides what that choice means.
+ */
+class LbSelect extends HTMLElement {
+  static observedAttributes = [ATTR_VALUE];
+
+  attributeChangedCallback(_name: string, _old: string, value: string) {
+    const select = this.querySelector("select");
+    if (!select) {
+      console.error(`lb-select: no <select> to receive the value`);
+      return;
+    }
+    select.value = value;
+  }
+
+  connectedCallback() {
+    this.addEventListener("change", () => {
+      const select = this.querySelector("select");
+      if (!select) {
+        console.error(`lb-select: change with no <select>, ignoring`);
+        return;
+      }
+      const name = this.getAttribute(ATTR_ACTION);
+      if (!name) {
+        console.error(`lb-select: no ${ATTR_ACTION}, nothing to send`);
+        return;
+      }
+      const detail: HubRequest = {
+        op: "action",
+        name,
+        value: select.value,
+      };
+      this.dispatchEvent(
+        new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),
+      );
+    });
+  }
+}
+
+customElements.define("lb-select", LbSelect);

package/widgets/lb-table.html

@@ -0,0 +1,8 @@
+<table>
+  <caption>
+    {{caption}}
+  </caption>
+  <thead lb-template="head"></thead>
+  <tbody lb-slot></tbody>
+  <tfoot lb-template="foot"></tfoot>
+</table>

package/widgets/lb-table.ts

@@ -0,0 +1,126 @@
+/// <reference lib="dom" />
+
+import {
+  ATTR_CELL,
+  ATTR_GROUP,
+  ATTR_KEY,
+  ATTR_SORT,
+} from "../core/lb-constants";
+import type { Projection, HubRowHost } from "../core/lb-types";
+import { applyRows, type Place } from "../hub/lb-rows";
+
+/**
+ * A table that owns its own scaffolding, and the case that shows what a list
+ * widget is for once the repeater exists.
+ *
+ * `lb-list` goes around a table the page author wrote. This one supplies
+ * the table, and the page writes what only the page knows: the heading row
+ * and the row template. That division is forced rather than chosen — a
+ * `<thead>` written inside a custom element is not inside a table, so the
+ * parser drops the tag and keeps the text. A `<template>` survives anywhere,
+ * so the heading row arrives wrapped and expansion unwraps it into the
+ * `lb-template` destination beside the slot.
+ *
+ * What it adds at run time is placement, and only placement. `lb-sort` names
+ * the column rows are ordered by; `lb-group` names the column they are
+ * sectioned by, and is the same attribute a grouped `<select>` reads, because
+ * a table with section headings and an `<optgroup>` are asking the same thing
+ * of the same data.
+ *
+ * The `foot` destination is the head's argument a second time and needs no
+ * code here. A `<tfoot>` is a place on the page, not a row the hub delivers,
+ * so what lands in it is an ordinary scope carrying its own `lb-query` — a
+ * grand total is a second projection of the same table, and the hub resolves
+ * it by name like any other. See demo/pages/ledger.html.
+ */
+
+/**
+ * The heading row of a section, carrying the value it stands for.
+ *
+ * The widget's own scaffolding, so it is HTML's namespace rather than
+ * Loadbare App's: it is derived from rows the hub knows and is invisible to the hub
+ * itself, exactly as the `<optgroup>` in `lb-options` is. Nothing
+ * addresses it, so it carries no `lb-key` and no name from the vocabulary.
+ */
+const GROUP_ROW = "data-group";
+
+class LbTable extends HTMLElement implements HubRowHost {
+  acceptRows(result: Projection) {
+    applyRows(this, result, this.place);
+    // A section is derived, so it goes when its last row does.
+    for (const heading of this.querySelectorAll(`tr[${GROUP_ROW}]`)) {
+      if (this.section(heading).rows.length === 0) heading.remove();
+    }
+  }
+
+  /**
+   * Group first, then sort within the group.
+   *
+   * Inserting a row before the first one that sorts after it keeps the
+   * section ordered, whatever else is in it — which is what lets a whole set
+   * and a single patched row take the same path.
+   */
+  private place: Place = (row, tuple, template) => {
+    const groupCell = template.getAttribute(ATTR_GROUP);
+    const sortCell = template.getAttribute(ATTR_SORT);
+    const heading = groupCell
+      ? this.headingFor(template, tuple[groupCell] ?? "")
+      : null;
+    const { rows, end } = this.section(heading);
+
+    const value = sortCell ? (tuple[sortCell] ?? "") : "";
+    const after = sortCell
+      ? rows.find((other) => other !== row && cellOf(other, sortCell) > value)
+      : undefined;
+    template.parentElement!.insertBefore(row, after ?? end);
+  };
+
+  /**
+   * The rows of one section, and the node it ends at.
+   *
+   * A section runs from its heading to the next heading, or to the template
+   * if there is none after it. Without grouping there is one section and it
+   * is the whole body — the heading row the page wrote is skipped along the
+   * way, because it carries no key and is therefore not a row.
+   */
+  private section(heading: Element | null): { rows: Element[]; end: Element } {
+    const template = this.querySelector("template")!;
+    const rows: Element[] = [];
+    let node = heading
+      ? heading.nextElementSibling
+      : template.parentElement!.firstElementChild;
+    while (node && node !== template && !node.hasAttribute(GROUP_ROW)) {
+      if (node.hasAttribute(ATTR_KEY)) rows.push(node);
+      node = node.nextElementSibling;
+    }
+    return { rows, end: node ?? template };
+  }
+
+  /** The section with this label, or a new one in front of the template. */
+  private headingFor(template: HTMLTemplateElement, label: string): Element {
+    const body = template.parentElement!;
+    for (const heading of body.querySelectorAll(`tr[${GROUP_ROW}]`)) {
+      if (heading.getAttribute(GROUP_ROW) === label) return heading;
+    }
+    const heading = document.createElement("tr");
+    heading.setAttribute(GROUP_ROW, label);
+    const cell = document.createElement("th");
+    cell.setAttribute("scope", "rowgroup");
+    // How wide the table is, from the row the page author wrote. Nothing
+    // else knows, and nothing had to be told twice.
+    cell.colSpan = template.content.firstElementChild?.childElementCount ?? 1;
+    cell.textContent = label;
+    heading.append(cell);
+    body.insertBefore(heading, template);
+    return heading;
+  }
+}
+
+/** What a live row is showing in one column. */
+function cellOf(row: Element, cell: string): string {
+  const selector = `[${ATTR_CELL}="${cell}"]`;
+  const el = row.matches(selector) ? row : row.querySelector(selector);
+  return el?.textContent ?? "";
+}
+
+customElements.define("lb-table", LbTable);