@optionfactory/fml 9.0.0-rc16 → 9.0.0-rc19

package/dist/ful.mjs

@@ -1578,6 +1578,8 @@ const inheritedAutocomplete = (el) => el.closest('form')?.getAttribute('autocomp
 
 const INPUT_MODES = { numeric: 'numeric', decimal: 'decimal' };
 
+const SEGMENTED = new Set(['date', 'time', 'datetime-local', 'month', 'week']);
+
 const signed = (v, digits) => (v.startsWith('-') ? '-' : '') + digits(v);
 
 const NUMERIC_DIGITS = {
@@ -1639,14 +1641,18 @@ const filterOf = (el) => {
  *   `autocomplete` attribute of the nearest enclosing `<form>`, which the
  *   platform does not pass on because the control carries `form=""`.
  * - `uppercase`, `trim` and `v-type` shape the value as it is read; see `value`.
- *
- * The control's native `change` is stopped and republished as the field's own.
+ * - The control's native `change` is stopped and the field dispatches its own
+ *   once the user commits a new value, as a text input does. A date, time,
+ *   datetime-local, month or week control fires its native `change` while its
+ *   segments are typed, as soon as they make a valid value; for those the field
+ *   reports when the control is left or Enter is pressed, at once for a value
+ *   picked from the browser's picker, and never a half-typed value.
  *
  * A subclass template may render more than one control, as the compare filters
  * render the two bounds of a range: the first is `_input`, the one the field is
- * named by and whose `change` it republishes, and every one of them gets the
- * inputmode, `autocomplete`, the `input-` passthrough, the keystroke filter and
- * the placeholder. The passthrough leaves `input-id` to the first alone, so no
+ * named by, and every one of them gets the inputmode, `autocomplete`, the
+ * `input-` passthrough, the keystroke filter, the placeholder and the `change`
+ * reporting. The passthrough leaves `input-id` to the first alone, so no
  * two controls share an id.
  */
 class Input extends Field {
@@ -1713,10 +1719,6 @@ class Input extends Field {
         for (const control of this.#controls) {
             this.#configure(control, mode, autocomplete, strip);
         }
-        this._input.addEventListener('change', (evt) => {
-            evt.stopPropagation();
-            this._notifyChange();
-        });
         return {
             fragment,
             control: this._input,
@@ -1740,6 +1742,7 @@ class Input extends Field {
         if (control !== this._input) {
             Attributes.set(control, 'id', id || null);
         }
+        this.#reportChanges(control);
         control.addEventListener('input', () => {
             if (!strip) {
                 return;
@@ -1758,13 +1761,53 @@ class Input extends Field {
             control.setSelectionRange(caret, caret);
         });
     }
+    /** @param {HTMLInputElement|HTMLTextAreaElement} control */
+    #reportChanges(control) {
+        if (!SEGMENTED.has(control.type)) {
+            control.addEventListener('change', (evt) => {
+                evt.stopPropagation();
+                this._notifyChange();
+            });
+            return;
+        }
+        /** @type {string|null} */
+        let committed = null;
+        let typed = false;
+        const commit = () => {
+            typed = false;
+            const now = JSON.stringify(this.value);
+            if (now === committed) {
+                return;
+            }
+            committed = now;
+            this._notifyChange();
+        };
+        control.addEventListener('focus', () => {
+            committed = JSON.stringify(this.value);
+        });
+        control.addEventListener('keydown', (/** @type any */ evt) => {
+            if (evt.key === 'Enter' && !evt.isComposing) {
+                commit();
+                return;
+            }
+            typed = true;
+        });
+        control.addEventListener('blur', commit);
+        control.addEventListener('change', (evt) => {
+            evt.stopPropagation();
+            if (!typed) {
+                commit();
+            }
+        });
+    }
     /**
      * The control's text, shaped in this order: upper cased under `uppercase`,
      * trimmed under `trim`, `null` when that leaves it empty, every `,` read as
      * `.` for `type="decimal"`, and decoded to a number under
      * `v-type="number"`, where text that does not decode is answered as it is.
      * Writing `null`, `undefined` or `''` empties the control; anything else is
-     * written as its string. Answers a `string`, a `number` or `null`; typed
+     * written as its string, replacing whatever was being typed, as a native
+     * control's value does. Answers a `string`, a `number` or `null`; typed
      * `any` because subclasses answer other values.
      * @type {any}
      */
@@ -1785,7 +1828,7 @@ class Input extends Field {
         return normalized;
     }
     set value(value) {
-        this._input.value = value === '' || value === undefined ? null : value;
+        this._input.value = value === '' || value === undefined || value === null ? '' : `${value}`;
     }
     /**
      * The control's placeholder, `null` when there is none. The control always
@@ -2054,7 +2097,7 @@ class InputInstant extends Input {
     }
     /** @param {string|null|undefined} v an ISO instant; a falsy value empties the input */
     set value(v) {
-        this._input.value = v ? Instant.isoToLocal(v) : '';
+        super.value = v ? Instant.isoToLocal(v) : '';
     }
     /**
      * The lower bound as a UTC ISO instant.
@@ -2087,7 +2130,6 @@ class InputInstant extends Input {
     }
     /** @param {string|null} v */
     set step(v) {
-
         this._input.step = v ?? '';
     }
 }
@@ -3964,6 +4006,15 @@ class Select extends Field {
     #query() {
         return this.#editing ? this.#input.value : '';
     }
+    /**
+     * The text typed to search the vocabulary: what the dropdown was last
+     * asked to match. `''` while the field is not being searched, its control
+     * then showing the selection's label rather than a query.
+     * @returns {string}
+     */
+    get query() {
+        return this.#query();
+    }
     #display() {
         const entry = this.#values.values().next().value;
         this.#input.value = this.#multiple ? '' : (entry?.label ?? '');
@@ -5640,10 +5691,6 @@ class CompareFilter extends Input {
             },
         });
         this.operators = this.declared('operators');
-        this._value2.addEventListener('change', (evt) => {
-            evt.stopPropagation();
-            this._notifyChange();
-        });
         if (this._operator.value === null) {
             this._showDefaultOperator();
         }
@@ -6121,9 +6168,7 @@ class BooleanFilter extends Field {
      */
     get criterion() {
         const token = this._value.value;
-        return asCriterion(labelTextOf(this), this._operator.value, [
-            token === '' ? '' : booleanValueLabel(token),
-        ]);
+        return asCriterion(labelTextOf(this), this._operator.value, [token === '' ? '' : booleanValueLabel(token)]);
     }
     /**
      * The field's own disabled claim. Setting it disables the value button and
@@ -6412,6 +6457,18 @@ class DialogSections {
     get section() {
         return this.#section;
     }
+    /**
+     * Dispatches the dismissal on the host and calls `close` unless a listener
+     * prevented it. A dismissal that is not cancelable announces a close the
+     * platform makes whatever the page does, so `close` is not called for it.
+     * @param {CustomEvent} asked
+     * @param {() => void} close
+     */
+    dismiss(asked, close) {
+        if (this.#host.dispatchEvent(asked) && asked.cancelable) {
+            close();
+        }
+    }
     /**
      * Calls `dismiss` when a press and its release both land on the backdrop,
      * so a selection dragged out of the panel and released outside does not.
@@ -6550,6 +6607,18 @@ const wireTargets = () => {
  * and a press and release both on the backdrop close the dialog, each as a
  * dismissal, as Escape does.
  *
+ * Before any of those three gestures closes it, the element dispatches a
+ * cancelable, non-bubbling `dialog:dismiss` with `detail: { reason }`, the
+ * reason being `button`, `backdrop` or `escape`; a listener calling
+ * `preventDefault()` keeps it open, to guard unsaved edits. A `data-result`
+ * button, `close-on-submit` and `close()` answer rather than dismiss, and
+ * dispatch none.
+ *
+ * The platform lets a page refuse Escape once per user interaction: a second
+ * Escape with no click or keystroke in between closes the dialog whatever the
+ * page does, `requires-answer` included. That close is still announced by a
+ * `dialog:dismiss`, which is then not cancelable.
+ *
  * `requires-answer` withholds the close button and refuses Escape and the
  * backdrop, so the dialog is closed only by a button carrying `data-result`
  * or from code through `close()`.
@@ -6622,21 +6691,32 @@ class Dialog extends ParsedElement {
                 this.#dialog.close(result);
             }
         });
+        const dismiss = (/** @type {'button'|'backdrop'|'escape'} */ reason, platformCloses = false) =>
+            this.#sections.dismiss(
+                new CustomEvent('dialog:dismiss', { cancelable: !platformCloses, detail: { reason } }),
+                () => this.#dialog.close(''),
+            );
         if (!requiresAnswer) {
-            this.#sections.onBackdrop(() => this.#dialog.close(''));
+            this.#sections.onBackdrop(() => dismiss('backdrop'));
         }
-        fragment
-            .querySelector('[data-ref=close]')
-            ?.addEventListener('click', () => this.#dialog.close(''));
+        fragment.querySelector('[data-ref=close]')?.addEventListener('click', () => dismiss('button'));
         if (closeOnSubmit) {
             this.#sections.onSubmitted((response) => {
                 this.#answer = { dismissed: false, result: null, response };
                 this.#dialog.close('submitted');
             });
         }
-        if (requiresAnswer) {
-            this.#dialog.addEventListener('cancel', (/** @type any */ e) => e.preventDefault());
-        }
+        this.#dialog.addEventListener('cancel', (/** @type any */ e) => {
+            if (!e.cancelable) {
+                this.#dialog.returnValue = '';
+                dismiss('escape', true);
+                return;
+            }
+            e.preventDefault();
+            if (!requiresAnswer) {
+                dismiss('escape');
+            }
+        });
         this.replaceChildren(fragment);
         wireTargets();
     }
@@ -6837,7 +6917,14 @@ class Dialog extends ParsedElement {
  * default, when absent) or `start`, following the writing direction.
  *
  * The close button, Escape, and a press and release both on the backdrop all
- * go through `close()`. Every close dispatches a non-bubbling `close` event on
+ * go through `close()`, once a cancelable, non-bubbling `drawer:dismiss` with
+ * `detail: { reason }` (`button`, `backdrop` or `escape`) has been dispatched
+ * on the element and no listener prevented it: `preventDefault()` keeps the
+ * drawer open, to guard unsaved edits. `close()` and `close-on-submit`
+ * dispatch none. The platform lets a page refuse Escape once per user
+ * interaction: a second Escape with no click or keystroke in between closes
+ * the drawer at once, without the slide, and its `drawer:dismiss` is then not
+ * cancelable. Every close dispatches a non-bubbling `close` event on
  * the element with `detail: { dismissed, response }`: `{ dismissed: false,
  * response }` when a form closed it under `close-on-submit`, and
  * `{ dismissed: true, response: null }` for any other close.
@@ -6893,13 +6980,23 @@ class Drawer extends ParsedElement {
         if (placement) {
             this.#dialog.setAttribute('placement', placement);
         }
+        const dismiss = (/** @type {'button'|'backdrop'|'escape'} */ reason, platformCloses = false) =>
+            this.#sections.dismiss(
+                new CustomEvent('drawer:dismiss', { cancelable: !platformCloses, detail: { reason } }),
+                () => this.close(),
+            );
         /** @type {HTMLElement} */ (fragment.querySelector('[data-ref=close]')).addEventListener('click', () =>
-            this.close(),
+            dismiss('button'),
         );
-        this.#sections.onBackdrop(() => this.close());
+        this.#sections.onBackdrop(() => dismiss('backdrop'));
         this.#dialog.addEventListener('cancel', (e) => {
+            if (!e.cancelable) {
+                this.#stopSlidingOut();
+                dismiss('escape', true);
+                return;
+            }
             e.preventDefault();
-            this.close();
+            dismiss('escape');
         });
         this.#dialog.addEventListener('close', () => {
             this.dispatchEvent(
@@ -7582,11 +7679,9 @@ class Wizard extends ParsedElement {
     }
     /**
      * Moves to the section carrying `data-step="<ref>"`. A move makes that step
-     * and section current, moves the focus to the section, dispatches `change`
-     * on the host (not bubbling) with detail `{ index, step }`, then fires the
-     * section requests for it. A native `change` of a control inside a section
-     * bubbles through the host under the same name, so a listener tells the
-     * two apart by `e.target`.
+     * and section current, moves the focus to the section, dispatches
+     * `wizard:change` on the host (not bubbling) with detail `{ index, step }`,
+     * then fires the section requests for it.
      * @param {string} ref the section's `data-step`
      * @returns {Promise<any[] | undefined> | undefined} a promise resolving to
      * the answers once they are delivered, or to undefined when nobody
@@ -7643,7 +7738,7 @@ class Wizard extends ParsedElement {
         this.#apply(clamped);
         this.#sections[this.#index].focus();
         if (this.rendered) {
-            this.dispatchEvent(new CustomEvent('change', { detail: { index: this.#index, step: this.step } }));
+            this.dispatchEvent(new CustomEvent('wizard:change', { detail: { index: this.#index, step: this.step } }));
         }
         return this.#enter(clamped);
     }