@optionfactory/fml 9.0.0-rc6 → 9.0.0-rc8

package/dist/ful.mjs

@@ -2859,6 +2859,14 @@ class Select extends Field {
             if (!this._interactive()) {
                 return;
             }
+            //a click on another control inside the select is that control's, not
+            //the select's: a tooltip marker slotted into `info`, a button a page
+            //put in an affix. Without this, reading the note beside a select
+            //also stole the focus and dropped the dropdown over the note
+            const elsewhere = e.target.closest('button, a[href], input, select, textarea');
+            if (elsewhere && elsewhere !== this.#input) {
+                return;
+            }
             if (this.#ddmenu.shown) {
                 this.#close();
                 return;
@@ -3994,8 +4002,13 @@ class Table extends ParsedElement {
         //started is stale, and neither renders nor updates the request a later
         //reload replays, whichever order the responses arrive in
         const claim = this.#loads.take();
-        this.#body.replaceChildren();
-        this.#loading.removeAttribute('hidden');
+        //the rows stay while the table revalidates. Emptying the body and raising
+        //the spinner row in its place collapsed the table to one tall row and
+        //expanded it again on every sort, page and reload: two layout jumps for
+        //what is the same table with newer rows in it. The spinner is for the load
+        //with nothing to show yet, the first one and the one after a failure; the
+        //rest announce themselves through aria-busy, which the stylesheet reads
+        this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
         this.#feedback.setAttribute('hidden', '');
         this.#noAutoload.setAttribute('hidden', '');
         this.setAttribute('aria-busy', 'true');
@@ -4013,6 +4026,10 @@ class Table extends ParsedElement {
                 return;
             }
             this.#loading.setAttribute('hidden', '');
+            //the rows the failed load was replacing go with it: what the table
+            //holds is no longer what the request asked for, and leaving them
+            //under the error would say the opposite
+            this.#body.replaceChildren();
             this.#feedback.removeAttribute('hidden');
             this.#feedback.querySelector('[data-ref=feedback-error]').textContent = Failure.problemsText(
                 error,
@@ -4159,6 +4176,20 @@ class ChoiceButton {
         //menu is where the localized words live
         this.#button.textContent = this.#display(choice);
         Attributes.set(this.#button, 'aria-label', this.#labelFor(choice));
+        this.#mark();
+    }
+    /**
+     * Marks the item the button currently holds, which is what a menu of one
+     * choice among several owes the reader: the glyph on the button says which
+     * one it is only to somebody who already knows the glyphs. The items are
+     * `menuitemradio`, so the state is `aria-checked` rather than the
+     * `aria-selected` a listbox would use, and the stylesheet draws it off that.
+     */
+    #mark() {
+        const current = this.value;
+        for (const item of this.#items()) {
+            item.setAttribute('aria-checked', String(item.getAttribute('value') === current));
+        }
     }
     /** The host's disabled claim, composed with the pin: lifting one cannot lift the other. */
     set claimed(claimed) {
@@ -4171,7 +4202,9 @@ class ChoiceButton {
                 const li = document.createElement('li');
                 li.setAttribute('role', 'none');
                 const a = document.createElement('a');
-                a.setAttribute('role', 'menuitem');
+                //one choice among several, which is what a radio item is: the
+                //state belongs on the item, not on the button alone
+                a.setAttribute('role', 'menuitemradio');
                 a.setAttribute('tabindex', '-1');
                 a.setAttribute('value', choice);
                 const word = this.#labelFor(choice);
@@ -4189,6 +4222,7 @@ class ChoiceButton {
                 return li;
             }),
         );
+        this.#mark();
     }
     #sync() {
         const pinned = this.pinned;
@@ -4870,8 +4904,15 @@ class Tooltip extends ParsedElement {
  * `ful-dialog-body` and `ful-dialog-footer` match at any depth, which is what a
  * dialog whose content is wrapped in a form needs.
  */
+/**
+ * How a dialog ended: `dismissed` tells a cancel from an answer, `result` carries
+ * the `data-result` of the button that closed it and `response` what a submit
+ * answered with, the one that did not happen being null.
+ * @typedef {{ dismissed: boolean, result: string|null, response: any }} DialogOutcome
+ */
+
 class Dialog extends ParsedElement {
-    static attributes = ['header', 'requires-answer:presence'];
+    static attributes = ['header', 'requires-answer:presence', 'close-on-submit:presence'];
     static slots = true;
     static template = `
         <dialog data-ref="dialog" class="ful-dialog">
@@ -4879,6 +4920,8 @@ class Dialog extends ParsedElement {
                 <h2 data-tpl-if="header">{{ header }}</h2>
                 <button data-tpl-if="!requiresAnswer" type="button" data-ref="close" data-tpl-aria-label="#l10n:t('dialog.close')"><ful-icon name="x-lg" aria-hidden="true"></ful-icon></button>
             </header>
+            <section data-ref="loading" hidden><ful-spinner class="centered" role="status"><span class="ful-sr-only">{{ #l10n:t('spinner.loading') }}</span></ful-spinner></section>
+            <section data-ref="error" role="alert" hidden></section>
             <div data-ref="body" class="ful-dialog-body">{{{{ slots.default }}}}</div>
             <footer class="ful-dialog-footer">
                 <button type="button" data-ref="acknowledge" data-result="acknowledged" data-tpl-if="!slots.buttons" data-tpl-aria-label="#l10n:t('dialog.acknowledge')">{{ #l10n:t('dialog.acknowledge') }}</button>
@@ -4888,8 +4931,15 @@ class Dialog extends ParsedElement {
     `;
     #dialog;
     #body;
+    #loading;
+    #error;
     #requests = new SectionRequests();
+    #updates = new Claims();
     #resolvers = [];
+    //the answer a submit closed the dialog with, which the return value cannot
+    //carry: it is a string, and a response is whatever the server sent
+    /** @type {DialogOutcome|null} */
+    #answer = null;
     render({ slots }) {
         const requiresAnswer = this.declared('requires-answer');
         const fragment = this.template()
@@ -4897,13 +4947,12 @@ class Dialog extends ParsedElement {
             .render();
         this.#dialog = fragment.querySelector('[data-ref=dialog]');
         this.#body = fragment.querySelector('[data-ref=body]');
+        this.#loading = fragment.querySelector('[data-ref=loading]');
+        this.#error = fragment.querySelector('[data-ref=error]');
         this.#dialog.addEventListener('close', () => {
-            this.dispatchEvent(
-                new CustomEvent('close', {
-                    detail: { result: this.#dialog.returnValue === '' ? null : this.#dialog.returnValue },
-                }),
-            );
-            this.#settle();
+            const outcome = this.#outcome();
+            this.dispatchEvent(new CustomEvent('close', { detail: outcome }));
+            this.#settle(outcome);
         });
         this.#dialog.addEventListener('click', (/** @type any */ e) => {
             const result = e.target.closest('button[data-result]')?.dataset.result;
@@ -4911,11 +4960,26 @@ class Dialog extends ParsedElement {
                 this.#dialog.close(result);
             }
         });
-        //dismissal, not an answer: the waiters are settled with null, as Escape does.
-        //Optional because a subclass overriding the template owns what it renders
+        //dismissal, not an answer: the waiters are settled with a dismissal, as
+        //Escape does. Optional because a subclass overriding the template owns
+        //what it renders
         fragment
             .querySelector('[data-ref=close]')
             ?.addEventListener('click', () => this.#dialog.close(''));
+        if (this.declared('close-on-submit')) {
+            //delegated on the body rather than bound to the form, so a body
+            //delivered later by update() is covered by the same listener. The
+            //form must be the body's own: a ful-table wraps its filters in a
+            //ful-form of its own, and a search in a table the dialog holds is
+            //not the dialog being answered
+            this.#body.addEventListener('submit:success', (/** @type any */ e) => {
+                if (e.target !== Nodes.queryChildren(this.#body, 'ful-form')) {
+                    return;
+                }
+                this.#answer = { dismissed: false, result: null, response: e.detail.response };
+                this.#dialog.close('submitted');
+            });
+        }
         if (requiresAnswer) {
             //the platform's own dismissal, refused where the dialog must be
             //answered: cancel fires for Escape and for a close request the
@@ -4925,39 +4989,96 @@ class Dialog extends ParsedElement {
         this.replaceChildren(fragment);
         wireTargets();
     }
-    //answers every waiter with the dialog's own answer: null while still open
-    //or closed without a result, which is also the unanswered answer a dialog
-    //leaving the document owes its waiters instead of hanging them
-    #settle() {
+    /**
+     * How the dialog ended, in one shape for every way it can end: `dismissed`
+     * alone tells a cancel from an answer, so a submit answering with no body at
+     * all (a 204) is still an answer, where a bare `null` could not say which it
+     * was. `result` carries the `data-result` of the button that closed it and
+     * `response` what a submit answered with; the one that did not happen is null.
+     */
+    #outcome() {
+        if (this.#answer) {
+            return this.#answer;
+        }
+        const result = this.#dialog.returnValue;
+        return result === ''
+            ? { dismissed: true, result: null, response: null }
+            : { dismissed: false, result, response: null };
+    }
+    //answers every waiter with the dialog's own answer: a dismissal while still
+    //open or closed without a result, which is also the unanswered answer a
+    //dialog leaving the document owes its waiters instead of hanging them
+    #settle(outcome) {
         const resolvers = this.#resolvers;
         this.#resolvers = [];
         for (const resolve of resolvers) {
-            resolve(this.#dialog.returnValue === '' ? null : this.#dialog.returnValue);
+            resolve(outcome);
         }
     }
     disconnectedCallback() {
-        this.#settle();
+        this.#settle(this.#outcome());
     }
     open() {
         return this.ask();
     }
     ask() {
-        if (!this.#dialog.open) {
-            this.#dialog.returnValue = '';
-            this.#dialog.showModal();
+        if (this.#show()) {
+            this.#restChrome();
             this.#request();
         }
         return new Promise((resolve) => {
             this.#resolvers.push(resolve);
         });
     }
+    /**
+     * Opens the dialog and waits for the callback, as `ful-drawer`'s does: a
+     * resolved value paints the body (which is returned), a rejection paints the
+     * problems and travels to the caller, and an update superseded by a newer one
+     * paints nothing. The title is the `header` attribute, configuration like the
+     * rest of the dialog's chrome, so what update() owns is the body alone.
+     */
+    async update(cb) {
+        //the claim detaches any update still in flight: its outcome belongs to
+        //an abandoned opening and must neither be painted nor own the dialog
+        const claim = this.#updates.take();
+        this.#body.replaceChildren();
+        this.#restChrome();
+        this.#loading?.removeAttribute('hidden');
+        this.#body.setAttribute('hidden', '');
+        //update owns its own open-answer-deliver cycle, so it shows the dialog
+        //without going through ask(): a user reopen during the wait is a real
+        //open and goes through ask()
+        this.#show();
+        try {
+            const delivered = await cb();
+            if (claim.stale) {
+                return this.#body;
+            }
+            this.#body.replaceChildren(delivered);
+            this.#loading?.setAttribute('hidden', '');
+            this.#body.removeAttribute('hidden');
+            return this.#body;
+        } catch (/** @type any */ e) {
+            if (!claim.stale) {
+                //revealed before it is filled, so the live region announces the
+                //change rather than being revealed already holding it
+                this.#error?.removeAttribute('hidden');
+                if (this.#error) {
+                    this.#error.textContent = Failure.problemsText(e);
+                }
+                this.#loading?.setAttribute('hidden', '');
+                this.#body.setAttribute('hidden', '');
+            }
+            throw e;
+        }
+    }
     #request() {
         this.#requests.request(this, this.#body, null, null)?.catch(() => undefined);
     }
     /**
      * Re-fires section:requested on the body, open or closed: the explicit
      * request for a body that wants refreshing. A failed refresh paints its
-     * problems, nothing rejects: there is no caller to reject towards.
+     * problems, nothing rejects: update() stays the rejecting call.
      */
     refresh() {
         return this.#requests.request(this, this.#body, null, null)?.then(undefined, () => undefined);
@@ -4965,6 +5086,25 @@ class Dialog extends ParsedElement {
     close(result) {
         this.#dialog.close(result ?? '');
     }
+    /** Shows the modal, answering whether this call is the one that opened it. */
+    #show() {
+        if (this.#dialog.open) {
+            return false;
+        }
+        //an opening owes nothing to the one before it: the platform keeps
+        //returnValue across a close with no result, and the answer a submit
+        //left is just as stale
+        this.#dialog.returnValue = '';
+        this.#answer = null;
+        this.#dialog.showModal();
+        return true;
+    }
+    #restChrome() {
+        this.#error?.replaceChildren();
+        this.#error?.setAttribute('hidden', '');
+        this.#loading?.setAttribute('hidden', '');
+        this.#body?.removeAttribute('hidden');
+    }
 }
 
 /**
@@ -4977,7 +5117,7 @@ class Dialog extends ParsedElement {
  * it.
  */
 class Drawer extends ParsedElement {
-    static attributes = ['title', 'placement'];
+    static attributes = ['title', 'placement', 'close-on-submit:presence'];
     static slots = true;
     static template = `
         <dialog data-ref="dialog" class="ful-drawer">
@@ -4998,6 +5138,10 @@ class Drawer extends ParsedElement {
     #content;
     #requests = new SectionRequests();
     #updates = new Claims();
+    //what a submit closed the drawer with, told from a close of any other kind:
+    //a save answering with no body at all is still a save
+    /** @type {{ dismissed: boolean, response: any }|null} */
+    #answer = null;
     render({ slots }) {
         const fragment = this.template()
             .withOverlay({ slots, title: this.declared('title') ?? '' })
@@ -5013,8 +5157,25 @@ class Drawer extends ParsedElement {
         }
         fragment.querySelector('[data-ref=close]').addEventListener('click', () => this.close());
         this.#dialog.addEventListener('close', () => {
-            this.dispatchEvent(new CustomEvent('close'));
+            this.dispatchEvent(
+                new CustomEvent('close', { detail: this.#answer ?? { dismissed: true, response: null } }),
+            );
         });
+        if (this.declared('close-on-submit')) {
+            //delegated on the content section rather than bound to the form: a
+            //drawer's form usually arrives with an update() rather than with the
+            //page, and the section outlives every delivery. The form must be the
+            //content's own, a ful-table wrapping its filters in a ful-form of its
+            //own and a search in a table the drawer holds not being the drawer
+            //finishing
+            this.#content.addEventListener('submit:success', (/** @type any */ e) => {
+                if (e.target !== Nodes.queryChildren(this.#content, 'ful-form')) {
+                    return;
+                }
+                this.#answer = { dismissed: false, response: e.detail.response };
+                this.close();
+            });
+        }
         this.replaceChildren(fragment);
         wireTargets();
     }
@@ -5087,6 +5248,9 @@ class Drawer extends ParsedElement {
         if (this.#dialog.open) {
             return false;
         }
+        //an opening owes nothing to the one before it: the answer a submit left
+        //belongs to the drawer that closed on it
+        this.#answer = null;
         this.#dialog.showModal();
         return true;
     }