@optionfactory/fml 9.0.0-rc6 → 9.0.0-rc8

package/dist/fml.iife.js

@@ -9088,6 +9088,14 @@ var fml = (function (exports) {
                 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;
@@ -10223,8 +10231,13 @@ var fml = (function (exports) {
             //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');
@@ -10242,6 +10255,10 @@ var fml = (function (exports) {
                     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,
@@ -10388,6 +10405,20 @@ var fml = (function (exports) {
             //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) {
@@ -10400,7 +10431,9 @@ var fml = (function (exports) {
                     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);
@@ -10418,6 +10451,7 @@ var fml = (function (exports) {
                     return li;
                 }),
             );
+            this.#mark();
         }
         #sync() {
             const pinned = this.pinned;
@@ -11099,8 +11133,15 @@ var fml = (function (exports) {
      * `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">
@@ -11108,6 +11149,8 @@ var fml = (function (exports) {
                 <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>
@@ -11117,8 +11160,15 @@ var fml = (function (exports) {
     `;
         #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()
@@ -11126,13 +11176,12 @@ var fml = (function (exports) {
                 .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;
@@ -11140,11 +11189,26 @@ var fml = (function (exports) {
                     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
@@ -11154,39 +11218,96 @@ var fml = (function (exports) {
             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);
@@ -11194,6 +11315,25 @@ var fml = (function (exports) {
         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');
+        }
     }
 
     /**
@@ -11206,7 +11346,7 @@ var fml = (function (exports) {
      * 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">
@@ -11227,6 +11367,10 @@ var fml = (function (exports) {
         #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') ?? '' })
@@ -11242,8 +11386,25 @@ var fml = (function (exports) {
             }
             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();
         }
@@ -11316,6 +11477,9 @@ var fml = (function (exports) {
             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;
         }