@optionfactory/fml 9.0.0-rc11 → 9.0.0-rc13

package/dist/ful.mjs

@@ -1412,15 +1412,22 @@ const INPUT_MODES = { numeric: 'numeric', decimal: 'decimal' };
 
 const signed = (v, digits) => (v.startsWith('-') ? '-' : '') + digits(v);
 
-const NUMERIC_FILTERS = {
-    numeric: (v) => signed(v, (t) => t.replace(/\D/g, '')),
+const NUMERIC_DIGITS = {
+    numeric: (t) => t.replace(/\D/g, ''),
     //one separator, the first: the rest are a slip while typing, not a value
-    decimal: (v) =>
-        signed(v, (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, '');
-        }),
+    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();
@@ -1442,7 +1449,7 @@ const filterOf = (el) => {
         const re = compiled('reject', reject);
         return re && ((v) => v.replace(re, ''));
     }
-    return NUMERIC_FILTERS[el._type()] ?? null;
+    return numericFilter(el._type(), el.declared('unsigned'));
 };
 
 /** A labelled text input over any native type or textarea; the temporal inputs are its subclasses. */
@@ -1457,6 +1464,7 @@ class Input extends Field {
         'reject',
         'uppercase:presence',
         'trim:presence',
+        'unsigned:presence',
         'autocomplete',
     ];
     static slots = true;
@@ -2294,7 +2302,18 @@ class Anchors {
         if (invoke) {
             //popovertarget needs a target that can be named
             popover.id = popover.id || uid;
-            invoker.setAttribute('popovertarget', popover.id);
+            if (invoker.localName === 'button' || invoker.localName === 'input') {
+                invoker.setAttribute('popovertarget', popover.id);
+            } else {
+                invoker.addEventListener('click', () => popover.togglePopover());
+                invoker.addEventListener('keydown', (/** @type any */ evt) => {
+                    if (evt.key !== 'Enter' && evt.key !== ' ') {
+                        return;
+                    }
+                    evt.preventDefault();
+                    popover.togglePopover();
+                });
+            }
         }
         const anchor = `--${uid}`;
         invoker.style.anchorName = anchor;
@@ -2906,7 +2925,7 @@ class Select extends Field {
             //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');
+            const elsewhere = e.target.closest('button, [role="button"], a[href], input, select, textarea');
             if (elsewhere && elsewhere !== this.#input) {
                 return;
             }
@@ -4836,27 +4855,38 @@ class BooleanFilter extends Field {
  * operator, differing only in what the server converts them to.
  */
 class InFilter extends Select {
-    async upgrade() {
-        //the snapshot is taken inside super.upgrade(), so an attribute this
-        //element does not let an author turn off has to be written before it
-        this.toggleAttribute('multiple', true);
-        await super.upgrade();
+    static attributes = ['operator'];
+    #keys() {
+        const chosen = super.value;
+        if (this.multiple) {
+            return chosen;
+        }
+        return chosen === null || chosen === undefined ? [] : [chosen];
     }
     get value() {
-        const keys = super.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
-        return keys.length === 0 ? null : keys;
+        if (keys.length === 0) {
+            return null;
+        }
+        const operator = this.declared('operator');
+        return operator ? [operator, ...keys] : keys;
     }
     set value(v) {
-        super.value = v ?? [];
+        const operator = this.declared('operator');
+        let keys = v === null || v === undefined ? [] : Array.isArray(v) ? v : [v];
+        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),
-            null,
-            (super.entry ?? []).map((e) => e.label),
+            this.declared('operator'),
+            [super.entry].flat().filter((e) => e).map((e) => e.label),
         );
     }
 }
@@ -4992,7 +5022,7 @@ class Tooltip extends ParsedElement {
         icon: 'info-circle-fill',
     };
     static template = `
-        <button type="button" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></button>
+        <span role="button" tabindex="0" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></span>
         <ful-note popover data-ref="content">{{{{ slots.default }}}}</ful-note>
     `;
     render({ slots }) {
@@ -5101,10 +5131,18 @@ class Dialog extends ParsedElement {
             this.dispatchEvent(new CustomEvent('close', { detail: outcome }));
             this.#settle(outcome);
         });
+        let pressedOutside = false;
+        this.#dialog.addEventListener('mousedown', (/** @type any */ e) => {
+            pressedOutside = e.target === this.#dialog;
+        });
         this.#dialog.addEventListener('click', (/** @type any */ e) => {
             const result = e.target.closest('button[data-result]')?.dataset.result;
             if (result !== undefined) {
                 this.#dialog.close(result);
+                return;
+            }
+            if (!requiresAnswer && pressedOutside && e.target === this.#dialog) {
+                this.#dialog.close('');
             }
         });
         //dismissal, not an answer: the waiters are settled with a dismissal, as
@@ -5306,6 +5344,15 @@ class Drawer extends ParsedElement {
             this.#dialog.setAttribute('placement', placement);
         }
         fragment.querySelector('[data-ref=close]').addEventListener('click', () => this.close());
+        let pressedOutside = false;
+        this.#dialog.addEventListener('mousedown', (e) => {
+            pressedOutside = e.target === this.#dialog;
+        });
+        this.#dialog.addEventListener('click', (e) => {
+            if (pressedOutside && e.target === this.#dialog) {
+                this.close();
+            }
+        });
         this.#dialog.addEventListener('close', () => {
             this.dispatchEvent(
                 new CustomEvent('close', { detail: this.#answer ?? { dismissed: true, response: null } }),