@optionfactory/fml 9.0.0-rc10 → 9.0.0-rc12

package/dist/ful.mjs

@@ -1407,6 +1407,29 @@ const compiled = (attr, pattern) =>
  */
 const inheritedAutocomplete = (el) => el.closest('form')?.getAttribute('autocomplete') ?? null;
 
+/** Rendering a text input is what costs these the native min/max/step enforcement. */
+const INPUT_MODES = { numeric: 'numeric', decimal: 'decimal' };
+
+const signed = (v, digits) => (v.startsWith('-') ? '-' : '') + digits(v);
+
+const NUMERIC_DIGITS = {
+    numeric: (t) => t.replace(/\D/g, ''),
+    //one separator, the first: the rest are a slip while typing, not a value
+    decimal: (t) => {
+        const kept = t.replace(/[^\d.,]/g, '');
+        const at = kept.search(/[.,]/);
+        return at === -1 ? kept : kept.slice(0, at + 1) + kept.slice(at + 1).replace(/[.,]/g, '');
+    },
+};
+
+const numericFilter = (type, unsigned) => {
+    const digits = NUMERIC_DIGITS[type];
+    if (!digits) {
+        return null;
+    }
+    return unsigned ? digits : (v) => signed(v, digits);
+};
+
 const warnedBoth = new WeakSet();
 const filterOf = (el) => {
     const keep = el.declared('keep');
@@ -1426,7 +1449,7 @@ const filterOf = (el) => {
         const re = compiled('reject', reject);
         return re && ((v) => v.replace(re, ''));
     }
-    return null;
+    return numericFilter(el._type(), el.declared('unsigned'));
 };
 
 /** A labelled text input over any native type or textarea; the temporal inputs are its subclasses. */
@@ -1441,6 +1464,7 @@ class Input extends Field {
         'reject',
         'uppercase:presence',
         'trim:presence',
+        'unsigned:presence',
         'autocomplete',
     ];
     static slots = true;
@@ -1462,9 +1486,17 @@ class Input extends Field {
         return this.declared('type') ?? (this.declared('v-type') === 'number' ? 'number' : 'text');
     }
     _build({ slots }) {
-        const type = this._type();
+        const declared = this._type();
+        const mode = INPUT_MODES[declared];
+        //a numeric widget is a text input: the type names the keyboard, not the
+        //control, so the rendered markup stays valid html
+        const type = mode ? 'text' : declared;
         const fragment = this.template().withOverlay({ type, slots }).render();
         this._input = fragment.querySelector('input,textarea');
+        if (mode) {
+            //before the passthrough, which stays the last word
+            Attributes.set(this._input, 'inputmode', mode);
+        }
 
         //the browser reads autocomplete off the control it is classifying, so the
         //field's own token, or the form's where it declares none, is put there.
@@ -1516,13 +1548,15 @@ class Input extends Field {
         if (trimmed === '') {
             return null;
         }
+        //the wire carries a dot wherever the comma is what the keyboard shows
+        const normalized = this._type() === 'decimal' ? trimmed.replaceAll(',', '.') : trimmed;
         if (this.declared('v-type') === 'number') {
             //typed values are an explicit opt in, as the select's k-type: blank
             //stays null, and a value that does not decode is kept as it is
-            const n = Number(trimmed);
-            return Number.isNaN(n) ? trimmed : n;
+            const n = Number(normalized);
+            return Number.isNaN(n) ? normalized : n;
         }
-        return trimmed;
+        return normalized;
     }
     set value(value) {
         this._input.value = value === '' || value === undefined ? null : value;
@@ -2514,10 +2548,27 @@ class SelectLoader {
             method: el.declared('method') ?? 'POST',
             mode: el.declared('mode'),
             prefetch: el.declared('preload'),
-            revision: el.declared('revision'),
+            revision: SelectLoader.#revisionFrom(el),
             responseMapper: SelectLoader.#responseMapperFrom(el),
         });
     }
+    static #revisionFrom(el) {
+        const declared = el.declared('revision');
+        if (declared !== '') {
+            return declared;
+        }
+        const configured = el.component('revision');
+        if (configured === undefined || configured === null) {
+            //not caching while the markup says to cache is the quiet failure
+            //this branch exists to make loud
+            console.warn(
+                "a valueless revision asks the registry for one, and no 'revision' component is defined: the vocabulary will not be cached",
+                el,
+            );
+            return null;
+        }
+        return typeof configured === 'function' ? configured() : configured;
+    }
     static #responseMapperFrom(el) {
         if (el.declared('k-expr') && el.declared('l-expr')) {
             return (response) => {
@@ -2550,7 +2601,7 @@ class Dropdown extends ParsedElement {
     static slots = true;
     static template = `
         <ful-spinner class="centered" role="status" hidden><span class="ful-sr-only">{{ #l10n:t('spinner.loading') }}</span></ful-spinner>
-        <p data-ref="empty" aria-live="polite" hidden>{{ #l10n:t('dropdown.empty') }}</p>
+        <ful-empty data-ref="empty" aria-live="polite" hidden>{{ #l10n:t('dropdown.empty') }}</ful-empty>
         <menu tabindex="-1" role="listbox" hidden></menu>
     `;
     static templates = {
@@ -2572,7 +2623,7 @@ class Dropdown extends ParsedElement {
             ? this.template('options')
             : Templates.fromFragment(slots.default);
         this.#spinner = fragment.querySelector('ful-spinner');
-        this.#empty = fragment.querySelector('p[data-ref=empty]');
+        this.#empty = fragment.querySelector('[data-ref=empty]');
         this.#menu = fragment.querySelector('menu');
         //the listbox is named so a combobox can point aria-controls and
         //aria-activedescendant at it: a reference to an unnamed element resolves
@@ -2932,7 +2983,7 @@ class Select extends Field {
                 return;
             }
             this.#abortdload();
-            this.#close();
+            this.#close(true);
         });
         this.#input.addEventListener('keydown', (e) => {
             if (!this._interactive()) {
@@ -2965,7 +3016,6 @@ class Select extends Field {
             this.#editing = false;
             this.#values.set(this.#coerceKey(e.detail.entry.key), e.detail.entry);
             this.#changed();
-            this.#syncBadges();
             this.#input.focus();
             this.#ddmenu.hide();
             if (!this.#multiple) {
@@ -3022,7 +3072,6 @@ class Select extends Field {
         }
         this.#values.delete(key);
         this.#changed();
-        this.#syncBadges();
     }
     #chipKeydown(e, badge) {
         switch (e.code) {
@@ -3118,7 +3167,7 @@ class Select extends Field {
             }
             case 'Tab': {
                 this.#abortdload();
-                this.#close();
+                this.#close(true);
                 break;
             }
         }
@@ -3134,12 +3183,25 @@ class Select extends Field {
             }
             return;
         }
-        this.#browse();
-        this.#ddmenu.moveOrShow(forward, () => this.#loader.load(this.#input.value), [...this.#values.keys()]);
+        this.#ddmenu.moveOrShow(forward, () => this.#loader.load(this.#query()), [...this.#values.keys()]);
     }
-    #close() {
+    /**
+     * @param commit whether the user is leaving the field, which only a blur or
+     * a Tab is: Escape cancels, and closing the list or a claim landing leaves
+     * the edit in progress
+     */
+    #close(commit = false) {
         this.#ddmenu.hide();
+        //emptying the box and leaving is a clear: redisplaying the label would
+        //discard the edit without a word. A multiple select keeps its box empty
+        //by design, so only a single one can mean it
+        const cleared =
+            commit && this.#editing && !this.#multiple && this.#input.value === '' && this.#values.size !== 0;
         this.#editing = false;
+        if (cleared) {
+            this.#values.clear();
+            this.#changed();
+        }
         this.#display();
     }
     /**
@@ -3148,14 +3210,15 @@ class Select extends Field {
      * highlighted.
      */
     #open() {
-        this.#browse();
-        return this.#ddmenu.show(() => this.#loader.load(this.#input.value), [...this.#values.keys()]);
+        return this.#ddmenu.show(() => this.#loader.load(this.#query()), [...this.#values.keys()]);
     }
-    #browse() {
-        if (this.#editing) {
-            return;
-        }
-        this.#input.value = '';
+    /**
+     * Browsing is the whole vocabulary, not the label already chosen, and the
+     * label stays on screen while it happens: a select showing nothing reads as
+     * an empty one.
+     */
+    #query() {
+        return this.#editing ? this.#input.value : '';
     }
     #display() {
         const entry = this.#values.values().next().value;
@@ -3166,6 +3229,9 @@ class Select extends Field {
         return [...this.#values.values()];
     }
     #changed() {
+        //settled before the event: a listener reading the control during it has to
+        //see the selection that caused it
+        this.#syncBadges();
         //the detail carries the keys the value property answers with, as every
         //other field's does, and the labeled selection beside them
         this._notifyChange({ entry: this.entry });
@@ -3812,6 +3878,7 @@ class Table extends ParsedElement {
     static slots = true;
     static config = {
         searchIcon: 'search',
+        emptyIcon: 'inbox',
     };
     static template = `
         <ful-form data-tpl-if="slots.filters">
@@ -3825,10 +3892,21 @@ class Table extends ParsedElement {
                 <tbody data-ref="initial">
                     <tr>
                         <td data-tpl-colspan="schema.length">
-                            <div>
-                                <p data-tpl-if="config.searchIcon"><ful-icon data-tpl-name="config.searchIcon" aria-hidden="true"></ful-icon></p>
+                            <ful-empty>
+                                <ful-icon data-tpl-if="config.searchIcon" data-tpl-name="config.searchIcon" aria-hidden="true"></ful-icon>
                                 {{ #l10n:t('table.initial') }}
-                            </div>
+                            </ful-empty>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="empty" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length">
+                            <ful-empty data-tpl-if="slots.empty">{{{{ slots.empty }}}}</ful-empty>
+                            <ful-empty data-tpl-if="!slots.empty">
+                                <ful-icon data-tpl-if="config.emptyIcon" data-tpl-name="config.emptyIcon" aria-hidden="true"></ful-icon>
+                                {{ #l10n:t('table.no-data') }}
+                            </ful-empty>
                         </td>
                     </tr>
                 </tbody>
@@ -3858,11 +3936,6 @@ class Table extends ParsedElement {
     `;
     static templates = {
         row: `
-            <tr data-tpl-if="pageResponse.data.length == 0">
-                <td data-tpl-colspan="schema.length">
-                    {{ #l10n:t('table.no-data') }}
-                </td>
-            </tr>
             {{{{ schema.rowsTemplate.withOverlay({'rows': pageResponse.data}).render() }}}}
         `,
     };
@@ -3871,6 +3944,7 @@ class Table extends ParsedElement {
     #body;
     #loading;
     #noAutoload;
+    #empty;
     #feedback;
     #paginator;
     #sorters;
@@ -3921,6 +3995,7 @@ class Table extends ParsedElement {
         this.#body = table.querySelector(':scope > tbody');
         this.#loading = table.querySelector(':scope > tbody[data-ref=loading]');
         this.#noAutoload = table.querySelector(':scope > tbody[data-ref=initial]');
+        this.#empty = table.querySelector(':scope > tbody[data-ref=empty]');
         this.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
         this.#paginator = Nodes.queryChildren(fragment, 'ful-pagination');
         this.replaceChildren(fragment);
@@ -4011,6 +4086,7 @@ class Table extends ParsedElement {
         this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
         this.#feedback.setAttribute('hidden', '');
         this.#noAutoload.setAttribute('hidden', '');
+        this.#empty.setAttribute('hidden', '');
         this.setAttribute('aria-busy', 'true');
         try {
             const pageResponse = await this.#loader.load(pageRequest, sortRequest, filterRequest);
@@ -4019,6 +4095,16 @@ class Table extends ParsedElement {
             }
             this.#latestRequest = { pageRequest, sortRequest, filterRequest };
             this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
+            //settled before the event: a listener counting what loaded has to
+            //see the table as it now is
+            this.removeAttribute('aria-busy');
+            this.dispatchEvent(
+                new CustomEvent('load:success', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: { pageRequest, sortRequest, filterRequest, response: pageResponse },
+                }),
+            );
         } catch (/** @type any */ error) {
             if (claim.stale) {
                 //the newer load owns the table and its outcome: a superseded
@@ -4035,12 +4121,15 @@ class Table extends ParsedElement {
                 error,
                 `${error}`,
             );
+            this.removeAttribute('aria-busy');
+            this.dispatchEvent(
+                new CustomEvent('load:failure', {
+                    bubbles: true,
+                    cancelable: false,
+                    detail: { pageRequest, sortRequest, filterRequest, exception: error },
+                }),
+            );
             throw error;
-        } finally {
-            //a superseded load owns nothing, the newer one's busy state included
-            if (!claim.stale) {
-                this.removeAttribute('aria-busy');
-            }
         }
     }
     /** Hands the loader to the callback, for runtime reconfigurations. */
@@ -4077,6 +4166,7 @@ class Table extends ParsedElement {
                 })
                 .render(),
         );
+        this.#empty.toggleAttribute('hidden', pageResponse.data.length !== 0);
         //one move, one repaint: the page and the count are the same state
         this.#paginator.update({ current: pageRequest.page, total: pages });
     }
@@ -4330,6 +4420,19 @@ const operatorLabel = (op) => t(`filters.op.${op}`);
 const sensitivityLabel = (sensitivity) => t(`filters.sensitivity.${sensitivity}`);
 const booleanValueLabel = (token) => t(token === '' ? 'filters.boolean.any' : `filters.boolean.${token}`);
 
+/**
+ * The operands are the words the reader chose, not the keys the wire carries.
+ * @typedef {{ label: string|null, operator: string|null, operands: string[] }} FilterCriterion
+ */
+
+const labelTextOf = (filter) => filter.querySelector(':scope > label')?.textContent.trim() || null;
+
+/** @returns {FilterCriterion|null} */
+const asCriterion = (label, operator, operands) => {
+    const shown = operands.filter((o) => o !== null && o !== undefined && `${o}` !== '');
+    return shown.length === 0 ? null : { label, operator, operands: shown.map((o) => `${o}`) };
+};
+
 /**
  * The shared shape of every operator-and-operands filter: an operator menu, one
  * or two operands of the type the subclass declares, and a tuple that mirrors
@@ -4469,6 +4572,18 @@ class CompareFilter extends Input {
     _syncBetween() {
         this._value2.toggleAttribute('hidden', this._operator.value !== 'BETWEEN');
     }
+    /**
+     * The operands as shown rather than as serialized: a date filter describes
+     * what is in its control, not the iso string it sends.
+     * @returns {FilterCriterion|null}
+     */
+    get criterion() {
+        const operands =
+            this._operator.value === 'BETWEEN'
+                ? [this._value1.value, this._value2.value]
+                : [this._value1.value];
+        return asCriterion(labelTextOf(this), this._operator.value, operands);
+    }
     get disabled() {
         return super.disabled;
     }
@@ -4704,6 +4819,13 @@ class BooleanFilter extends Field {
         this._operator.value = this._operator.pinned ? this._operator.allowed[0] : v[0];
         this._value.value = v[1] ?? '';
     }
+    /** @returns {FilterCriterion|null} */
+    get criterion() {
+        const token = this._value.value;
+        return asCriterion(labelTextOf(this), this._operator.value, [
+            token === '' ? '' : booleanValueLabel(token),
+        ]);
+    }
     get disabled() {
         return super.disabled;
     }
@@ -4716,6 +4838,51 @@ class BooleanFilter extends Field {
     }
 }
 
+/**
+ * Set membership over a select's vocabulary, answering for both of data-jpa's
+ * set annotations: InEnum and InList take the same bare array of values and no
+ * operator, differing only in what the server converts them to.
+ */
+class InFilter extends Select {
+    static attributes = ['operator'];
+    /** the selection as the array the wire takes, whether one key was chosen or many */
+    #keys() {
+        const chosen = super.value;
+        if (this.multiple) {
+            return chosen;
+        }
+        return chosen === null || chosen === undefined ? [] : [chosen];
+    }
+    get value() {
+        const keys = this.#keys();
+        //an empty set is no filter: the table drops a falsy value, where an
+        //empty array would travel and match nothing
+        if (keys.length === 0) {
+            return null;
+        }
+        const operator = this.declared('operator');
+        return operator ? [operator, ...keys] : keys;
+    }
+    set value(v) {
+        const operator = this.declared('operator');
+        let keys = v === null || v === undefined ? [] : Array.isArray(v) ? v : [v];
+        //what the getter answers has to be assignable back, and it carries the
+        //operator in front of the keys
+        if (operator && keys[0] === operator) {
+            keys = keys.slice(1);
+        }
+        super.value = this.multiple ? keys : (keys[0] ?? null);
+    }
+    /** @returns {FilterCriterion|null} */
+    get criterion() {
+        return asCriterion(
+            labelTextOf(this),
+            this.declared('operator'),
+            [super.entry].flat().filter((e) => e).map((e) => e.label),
+        );
+    }
+}
+
 /**
  * The async section machinery shared by ful-tabs, ful-wizard, ful-dialog and
  * ful-drawer: every activation of a section fires the section:requested family
@@ -5879,6 +6046,7 @@ class Plugin {
             .defineElement('ful-filter-number', NumberFilter)
             .defineElement('ful-filter-boolean', BooleanFilter)
             .defineElement('ful-filter-text', TextFilter)
+            .defineElement('ful-filter-in', InFilter)
             .defineElement('ful-select', Select)
             .defineElement('ful-dropdown', Dropdown)
             .defineComponent('loaders:select', SelectLoader)
@@ -5895,5 +6063,5 @@ class Plugin {
     }
 }
 
-export { Accordion, Anchors, AsyncEvents, Bindings, BooleanFilter, Checkbox, Claims, CompareFilter, Dialog, Drawer, Dropdown, Field, Form, FormLoader, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, LocalDate, LocalDateFilter, LocalStorage, NumberFilter, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Table, TableLoader, TableSchemaParser, Tabs, TextFilter, Timing, Toasts, Tooltip, VersionedLocalStorage, VersionedSessionStorage, Wizard, describable };
+export { Accordion, Anchors, AsyncEvents, Bindings, BooleanFilter, Checkbox, Claims, CompareFilter, Dialog, Drawer, Dropdown, Field, Form, FormLoader, InFilter, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, LocalDate, LocalDateFilter, LocalStorage, NumberFilter, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Table, TableLoader, TableSchemaParser, Tabs, TextFilter, Timing, Toasts, Tooltip, VersionedLocalStorage, VersionedSessionStorage, Wizard, describable };
 //# sourceMappingURL=ful.mjs.map