@loadbare/widgets 0.6.0 → 0.7.0

package/README.md

@@ -16,6 +16,7 @@ Inventory:
 | [`lb-form`](docs/lb-form.md) | a form over one row, which saves per control once the row is on record |
 | [`lb-insert-dialog`](docs/lb-insert-dialog.md) | a row entered in a modal dialog, chosen in the picker that opened it |
 | [`lb-master`](docs/lb-master.md) | a set, one of its rows, and the buttons that act on the set |
+| [`lb-checkbox`](docs/lb-checkbox.md) | a checkbox and its label, as markup to style |
 
 ## Installing
 

package/dist/control.d.ts

@@ -46,6 +46,17 @@ export declare abstract class WrappedControl extends HTMLElement {
      * form its value once the control has been reset.
      */
     formResetCallback(): void;
+    /**
+     * A message the hub sets when a handler refuses this control's column. It
+     * goes on the native control inside, which is what the form checks before
+     * it submits, what the browser shows the message beside, and what takes
+     * focus when it is reported.
+     */
+    setCustomValidity(message: string): void;
+    /** Show the native control's message, and focus it. */
+    reportValidity(): boolean;
+    /** The native control's message, empty when it has none. */
+    get validationMessage(): string;
     /** The inner control changed, before the widget fires its own `change`. */
     protected changed(): void;
     /** Tell the form owner the value, where the implementation allows it. */

package/dist/control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,8BAAsB,cAAe,SAAQ,WAAW;IACtD,MAAM,CAAC,cAAc,UAAQ;IAE7B,uDAAuD;IACvD,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,OAAO,CAAC,SAAS,CAAqB;IAEtC,6CAA6C;IAC7C,OAAO,CAAC,SAAS,CAAS;;IAY1B;;;;;;;;;OASG;IACH,iBAAiB,IAAI,IAAI;IASzB,8DAA8D;IAC9D,SAAS,KAAK,OAAO,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,IAAI,CAEnE;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAUtB;IAED;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAIzB,2EAA2E;IAC3E,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,yEAAyE;IACzE,SAAS,CAAC,SAAS,IAAI,IAAI;CAG5B"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,8BAAsB,cAAe,SAAQ,WAAW;IACtD,MAAM,CAAC,cAAc,UAAQ;IAE7B,uDAAuD;IACvD,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,OAAO,CAAC,SAAS,CAAqB;IAEtC,6CAA6C;IAC7C,OAAO,CAAC,SAAS,CAAS;;IAY1B;;;;;;;;;OASG;IACH,iBAAiB,IAAI,IAAI;IASzB,8DAA8D;IAC9D,SAAS,KAAK,OAAO,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,IAAI,CAEnE;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAUtB;IAED;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;;;;OAKG;IACH,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,uDAAuD;IACvD,cAAc,IAAI,OAAO;IAIzB,4DAA4D;IAC5D,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,2EAA2E;IAC3E,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,yEAAyE;IACzE,SAAS,CAAC,SAAS,IAAI,IAAI;CAG5B"}

package/dist/control.js

@@ -79,6 +79,23 @@ export class WrappedControl extends HTMLElement {
     formResetCallback() {
         queueMicrotask(() => this.formValue());
     }
+    /**
+     * A message the hub sets when a handler refuses this control's column. It
+     * goes on the native control inside, which is what the form checks before
+     * it submits, what the browser shows the message beside, and what takes
+     * focus when it is reported.
+     */
+    setCustomValidity(message) {
+        this.control?.setCustomValidity(message);
+    }
+    /** Show the native control's message, and focus it. */
+    reportValidity() {
+        return this.control?.reportValidity() ?? true;
+    }
+    /** The native control's message, empty when it has none. */
+    get validationMessage() {
+        return this.control?.validationMessage ?? "";
+    }
     /** The inner control changed, before the widget fires its own `change`. */
     changed() {
         this.formValue();

package/dist/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAgB,cAAe,SAAQ,WAAW;IACtD,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;IAK7B;;;;OAIG;IACK,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAEtC,6CAA6C;IACrC,SAAS,GAAG,KAAK,CAAC;IAE1B;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACpC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;;;;;;OASG;IACH,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,IAAI,KAAK,IAAI;YAAE,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC5D,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACrD,IAAI,OAAO,KAAK,IAAI;YAAE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;IAC7C,CAAC;IAED,8DAA8D;IAC9D,IAAc,OAAO;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CACX,GAAG,IAAI,CAAC,SAAS,SAAS,IAAI,CAAC,KAAK,wBAAwB,CAC7D,CAAC;YACF,OAAO;QACT,CAAC;QACD,OAAO,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IACzC,CAAC;IAED,2EAA2E;IACjE,OAAO;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,yEAAyE;IAC/D,SAAS;QACjB,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;;AAGH,SAAS,WAAW,CAAC,EAAe;IAClC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC;QACvC,OAAO,OAAO,SAAS,CAAC,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IACzE,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/**\n * A form-associated custom element wrapping one native control, which makes\n * the widget itself the control: the hub sets its `value` when a column\n * lands, reads it back when a request gathers, and commits it on `change`\n * when it carries `lb-request`. Nothing about a request is the widget's.\n *\n * The native control inside is an implementation detail. Its `change` is\n * stopped and fired again on the widget, so a listener sees one control and\n * one event per edit.\n *\n * Not a widget itself, so the file carries no `.browser` and no `lb-` name:\n * a consumer's builder passes it over, and each widget that extends it\n * brings it along.\n */\nexport abstract class WrappedControl extends HTMLElement {\n  static formAssociated = true;\n\n  /** The tag of the native control this widget wraps. */\n  protected abstract inner: string;\n\n  /**\n   * Null where the DOM implementation offers no form value, which includes\n   * jsdom: the widget still works as a control, and a native form submission\n   * leaves it out.\n   */\n  private internals = internalsOf(this);\n\n  /** Whether the widget has connected once. */\n  private connected = false;\n\n  constructor() {\n    super();\n    this.addEventListener(\"change\", (e) => {\n      if (e.target === this || e.target !== this.control) return;\n      e.stopPropagation();\n      this.changed();\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    });\n  }\n\n  /**\n   * A value that landed before this widget's definition did is only a\n   * stamp, since the hub sets `value` on a control and the element was not\n   * one yet. It is taken up the first time the widget connects, and never\n   * again: after that the hub sets `value` itself, and a later move must not\n   * undo an edit.\n   *\n   * The native control follows the widget's `form` attribute, so a form\n   * this widget joins by id resets the control inside it too.\n   */\n  connectedCallback(): void {\n    const form = this.getAttribute(\"form\");\n    if (form !== null) this.control?.setAttribute(\"form\", form);\n    if (this.connected) return;\n    this.connected = true;\n    const stamped = this.getAttribute(ATTR_COLUMN_VALUE);\n    if (stamped !== null) this.value = stamped;\n  }\n\n  /** The native control this widget wraps, once it is there. */\n  protected get control(): HTMLInputElement | HTMLSelectElement | null {\n    return this.querySelector(this.inner);\n  }\n\n  get value(): string {\n    return this.control?.value ?? \"\";\n  }\n\n  set value(value: string) {\n    const control = this.control;\n    if (!control) {\n      console.error(\n        `${this.localName}: no <${this.inner}> to receive the value`,\n      );\n      return;\n    }\n    control.value = value ?? \"\";\n    this.formValue();\n  }\n\n  /**\n   * The native control is the form's too, and the form resets it by HTML's\n   * own algorithm. This widget comes first in tree order, so it tells the\n   * form its value once the control has been reset.\n   */\n  formResetCallback(): void {\n    queueMicrotask(() => this.formValue());\n  }\n\n  /** The inner control changed, before the widget fires its own `change`. */\n  protected changed(): void {\n    this.formValue();\n  }\n\n  /** Tell the form owner the value, where the implementation allows it. */\n  protected formValue(): void {\n    this.internals?.setFormValue(this.value);\n  }\n}\n\nfunction internalsOf(el: HTMLElement): ElementInternals | null {\n  try {\n    const internals = el.attachInternals();\n    return typeof internals.setFormValue === \"function\" ? internals : null;\n  } catch {\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"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","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/**\n * A form-associated custom element wrapping one native control, which makes\n * the widget itself the control: the hub sets its `value` when a column\n * lands, reads it back when a request gathers, and commits it on `change`\n * when it carries `lb-request`. Nothing about a request is the widget's.\n *\n * The native control inside is an implementation detail. Its `change` is\n * stopped and fired again on the widget, so a listener sees one control and\n * one event per edit.\n *\n * Not a widget itself, so the file carries no `.browser` and no `lb-` name:\n * a consumer's builder passes it over, and each widget that extends it\n * brings it along.\n */\nexport abstract class WrappedControl extends HTMLElement {\n  static formAssociated = true;\n\n  /** The tag of the native control this widget wraps. */\n  protected abstract inner: string;\n\n  /**\n   * Null where the DOM implementation offers no form value, which includes\n   * jsdom: the widget still works as a control, and a native form submission\n   * leaves it out.\n   */\n  private internals = internalsOf(this);\n\n  /** Whether the widget has connected once. */\n  private connected = false;\n\n  constructor() {\n    super();\n    this.addEventListener(\"change\", (e) => {\n      if (e.target === this || e.target !== this.control) return;\n      e.stopPropagation();\n      this.changed();\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    });\n  }\n\n  /**\n   * A value that landed before this widget's definition did is only a\n   * stamp, since the hub sets `value` on a control and the element was not\n   * one yet. It is taken up the first time the widget connects, and never\n   * again: after that the hub sets `value` itself, and a later move must not\n   * undo an edit.\n   *\n   * The native control follows the widget's `form` attribute, so a form\n   * this widget joins by id resets the control inside it too.\n   */\n  connectedCallback(): void {\n    const form = this.getAttribute(\"form\");\n    if (form !== null) this.control?.setAttribute(\"form\", form);\n    if (this.connected) return;\n    this.connected = true;\n    const stamped = this.getAttribute(ATTR_COLUMN_VALUE);\n    if (stamped !== null) this.value = stamped;\n  }\n\n  /** The native control this widget wraps, once it is there. */\n  protected get control(): HTMLInputElement | HTMLSelectElement | null {\n    return this.querySelector(this.inner);\n  }\n\n  get value(): string {\n    return this.control?.value ?? \"\";\n  }\n\n  set value(value: string) {\n    const control = this.control;\n    if (!control) {\n      console.error(\n        `${this.localName}: no <${this.inner}> to receive the value`,\n      );\n      return;\n    }\n    control.value = value ?? \"\";\n    this.formValue();\n  }\n\n  /**\n   * The native control is the form's too, and the form resets it by HTML's\n   * own algorithm. This widget comes first in tree order, so it tells the\n   * form its value once the control has been reset.\n   */\n  formResetCallback(): void {\n    queueMicrotask(() => this.formValue());\n  }\n\n  /**\n   * A message the hub sets when a handler refuses this control's column. It\n   * goes on the native control inside, which is what the form checks before\n   * it submits, what the browser shows the message beside, and what takes\n   * focus when it is reported.\n   */\n  setCustomValidity(message: string): void {\n    this.control?.setCustomValidity(message);\n  }\n\n  /** Show the native control's message, and focus it. */\n  reportValidity(): boolean {\n    return this.control?.reportValidity() ?? true;\n  }\n\n  /** The native control's message, empty when it has none. */\n  get validationMessage(): string {\n    return this.control?.validationMessage ?? \"\";\n  }\n\n  /** The inner control changed, before the widget fires its own `change`. */\n  protected changed(): void {\n    this.formValue();\n  }\n\n  /** Tell the form owner the value, where the implementation allows it. */\n  protected formValue(): void {\n    this.internals?.setFormValue(this.value);\n  }\n}\n\nfunction internalsOf(el: HTMLElement): ElementInternals | null {\n  try {\n    const internals = el.attachInternals();\n    return typeof internals.setFormValue === \"function\" ? internals : null;\n  } catch {\n    return null;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -4,6 +4,5 @@ import "./lb-options.browser.js";
 import "./lb-table.browser.js";
 import "./lb-picker.browser.js";
 import "./lb-confirm.browser.js";
-import "./lb-form.browser.js";
 import "./lb-insert-dialog.browser.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC"}

package/dist/index.js

@@ -4,6 +4,5 @@ import "./lb-options.browser.js";
 import "./lb-table.browser.js";
 import "./lb-picker.browser.js";
 import "./lb-confirm.browser.js";
-import "./lb-form.browser.js";
 import "./lb-insert-dialog.browser.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,+BAA+B,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\nimport \"./lb-confirm.browser.js\";\nimport \"./lb-form.browser.js\";\nimport \"./lb-insert-dialog.browser.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\nimport \"./lb-confirm.browser.js\";\nimport \"./lb-insert-dialog.browser.js\";\n"]}

package/dist/lb-checkbox.html

@@ -0,0 +1,13 @@
+<!--
+  A checkbox with its label, as markup alone. The hub treats a native
+  checkbox as a control, so there is nothing for script to do: the widget
+  gives the box and its text one element an application styles.
+
+  The column and request go on the checkbox inside, since that is the
+  control, so they arrive as exp-column and exp-request rather than as
+  lb-column and lb-request on the tag.
+-->
+<label>
+  <input type="checkbox" lb-column="{{column}}" lb-request="{{request}}" />
+  <span>{{label}}</span>
+</label>

package/dist/lb-master.html

@@ -9,8 +9,10 @@
   belongs to.
 
   The standard bar is [New] [Copy] [Delete] [Save new] [Cancel].
-  - New is not here: a button cannot write a query parm, only a control's
-    change can. Choosing the picker's blank does the same today.
+  - New is a request the page declares, `new`. Which row shows is a query
+    parm, and a button writes none, so the page's handler returns url()
+    emptying the parm, and the row query answers a row not yet entered.
+    It pushes a history entry, so Back returns to the row on record.
   - Copy is a request the page declares, `copy`. It goes to the server by
     design rather than filling the form for Save new: a copy is a new row in
     the set, and only the server can bring its children along. What comes
@@ -25,6 +27,9 @@
   <div class="lb-master-row" lb-query="{{row}}">
     <lb-form exp-id="{{form-id|master-form}}" lb-exp-slot></lb-form>
     <div class="lb-master-buttons">
+      <button type="button" lb-request="new" lb-url-push data-mode="on-record">
+        New
+      </button>
       <button type="button" lb-request="copy" data-mode="on-record">Copy</button>
       <lb-confirm
         exp-label="Delete"

package/docs/lb-checkbox.md

@@ -0,0 +1,63 @@
+# `lb-checkbox`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A checkbox and its label as one element, for an application to style.  A
+definition only, with no script: the hub treats a native checkbox as a
+control, so the widget adds nothing but the markup.
+
+Requires `exp-column` and `exp-label`.
+
+```html
+<div lb-query="people">
+  <template>
+    <div>
+      <lb-checkbox exp-column="active" exp-label="Active" exp-request="lb-row-update"></lb-checkbox>
+    </div>
+  </template>
+</div>
+```
+
+## Expansion Attributes
+
+| Parameter     | Fills                                           |
+| ------------- | ----------------------------------------------- |
+| `exp-column`  | the checkbox's `lb-column`                      |
+| `exp-label`   | the label's text                                |
+| `exp-request` | the checkbox's `lb-request`, none when absent   |
+
+The column and request go on the checkbox inside, since it is the control,
+so they are expansion attributes here rather than `lb-column` and
+`lb-request` on the tag.
+
+## Why it is not like `lb-input`
+
+`lb-input` has a script that makes the tag itself the control, so the page
+writes `lb-column` on the tag.  `lb-checkbox` cannot do the same.  A value
+that lands before a widget's script has loaded reaches it only as the
+`lb-column-value` stamp, a string, and a checkbox's state is a boolean.  A
+script `lb-checkbox` would read the stamp `"false"` as checked, since no
+string is read.  The native checkbox has no such gap: the hub sets `checked`
+on it directly.
+
+`lb-input` could equally be markup alone; its script is a convention, kept
+for now.
+
+## The control
+
+The checkbox is checked when its column is anything but `false` or null, and
+sends `"true"` or `"false"`.  See
+[checkboxes](../../app/docs/reference/data-binding.md#checkboxes).
+
+## Styling
+
+The definition is a `<label>` holding the `<input type="checkbox">` and a
+`<span>` with the text:
+
+```css
+lb-checkbox label {
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: center;
+}
+```

package/docs/lb-form.md

@@ -25,9 +25,11 @@ Requires `exp-id`.
 
 A row with a key is on record, and each control saves its own column on
 `change` with `lb-request="lb-row-update"`.  A row whose key is empty is a new
-one not yet entered: there is nothing to update, so the widget stops an
-`lb-row-update` that carries an empty key, and the controls only hold what a
-submit will gather.
+one not yet entered: the hub sends no update for it, so the controls only
+hold what a submit will gather.  See
+[a row not yet entered](../../app/docs/reference/data-binding.md#a-row-not-yet-entered).
+
+A definition only, with no script of its own.
 
 A button that acts on the row as a whole, such as one adding it to the set,
 belongs to whatever holds the set, and reaches the form by `form="<id>"`.

package/docs/lb-master.md

@@ -39,15 +39,27 @@ Requires `exp-row`.
 
 | Button   | Shows             | Does                                          |
 | -------- | ----------------- | --------------------------------------------- |
+| New      | A row on record   | Sends `new`, a request the page declares, and pushes a history entry |
 | Copy     | A row on record   | Sends `copy`, a request the page declares     |
 | Delete   | A row on record   | Asks, then sends `lb-row-delete`              |
 | Save new | A new row         | Submits the form as `lb-row-insert`, and pushes a history entry |
 | Cancel   | A new row         | Resets the form                               |
 
 Each carries `data-mode`, `on-record` or `new`, and the stylesheet shows each
-only in its mode.  A new row is one whose key is empty.  New is not a button:
-a button cannot write a query parm, so choosing the picker's blank starts a
-new row.
+only in its mode.  A new row is one whose key is empty, a
+[row not yet entered](../../app/docs/reference/data-binding.md#a-row-not-yet-entered).
+
+Which row shows is a query parm, and only the page knows its name, so New is
+a request the page declares.  Its handler empties the parm, and the row
+query answers a row with an empty key:
+
+```ts
+handlers: {
+  new: { run: async () => url({ acct: "" }), refresh: [] },
+},
+```
+
+Choosing the picker's blank does the same.
 
 Copy goes to the server rather than filling the form, because a copy is a new
 row in the set, and only the server can bring its children along.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loadbare/widgets",
-  "description": "The basic widget set for @loadbare/app: input, select, options, picker, table, unknown-page, confirm, form, insert-dialog, master",
-  "version": "0.6.0",
+  "description": "The basic widget set for @loadbare/app: input, select, options, picker, table, unknown-page, confirm, form, insert-dialog, master, checkbox",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "dist",

package/dist/lb-form.browser.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=lb-form.browser.d.ts.map

package/dist/lb-form.browser.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-form.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-form.browser.ts"],"names":[],"mappings":""}

package/dist/lb-form.browser.js

@@ -1,28 +0,0 @@
-/// <reference lib="dom" />
-import { LB_EVENT_NAME, REQUEST_ROW_UPDATE } from "@loadbare/app/constants";
-/**
- * A form over one row, in one of two modes that the row decides.
- *
- * A row with a key is on record, and each control saves its own column on
- * `change`: the page writes `lb-request="lb-row-update"` on every control.
- * A row with an empty key is a new one not yet entered, and a change saves
- * nothing, because there is nothing to update; the controls only hold what
- * will be gathered when something submits the form.
- *
- * So the form stops an update whose key came back empty. The hub completes a
- * request on the way down, before any ancestor sees it, so the key is already
- * in `detail` when the event bubbles through here.
- */
-class LbForm extends HTMLElement {
-    constructor() {
-        super();
-        this.addEventListener(LB_EVENT_NAME, (e) => {
-            const request = e.detail;
-            if (request.name === REQUEST_ROW_UPDATE && request.key === "") {
-                e.stopPropagation();
-            }
-        });
-    }
-}
-customElements.define("lb-form", LbForm);
-//# sourceMappingURL=lb-form.browser.js.map

package/dist/lb-form.browser.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-form.browser.js","sourceRoot":"","sources":["../widgets/lb-form.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG5E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAO,SAAQ,WAAW;IAC9B;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;YACzC,MAAM,OAAO,GAAI,CAA6B,CAAC,MAAM,CAAC;YACtD,IAAI,OAAO,CAAC,IAAI,KAAK,kBAAkB,IAAI,OAAO,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC;gBAC9D,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { LB_EVENT_NAME, REQUEST_ROW_UPDATE } from \"@loadbare/app/constants\";\nimport type { HubRequest } from \"@loadbare/app/types\";\n\n/**\n * A form over one row, in one of two modes that the row decides.\n *\n * A row with a key is on record, and each control saves its own column on\n * `change`: the page writes `lb-request=\"lb-row-update\"` on every control.\n * A row with an empty key is a new one not yet entered, and a change saves\n * nothing, because there is nothing to update; the controls only hold what\n * will be gathered when something submits the form.\n *\n * So the form stops an update whose key came back empty. The hub completes a\n * request on the way down, before any ancestor sees it, so the key is already\n * in `detail` when the event bubbles through here.\n */\nclass LbForm extends HTMLElement {\n  constructor() {\n    super();\n    this.addEventListener(LB_EVENT_NAME, (e) => {\n      const request = (e as CustomEvent<HubRequest>).detail;\n      if (request.name === REQUEST_ROW_UPDATE && request.key === \"\") {\n        e.stopPropagation();\n      }\n    });\n  }\n}\n\ncustomElements.define(\"lb-form\", LbForm);\n"]}