u2ui 1.6.0 → 1.7.5

package/attr/disableif/README.md

@@ -19,6 +19,26 @@ Disable form-elements (like inputs, buttons, fieldsets) based on a condition
 }
 ```
 
+## Conditions
+
+| condition | disabled while |
+|---|---|
+| `name` | a value of `name` is not empty |
+| `!name` | no value of `name` is not empty |
+| `name=v` | a value equals `v` |
+| `name!=v` | no value equals `v` |
+| `name>n`, `name<n` | a value is a number greater / less than `n` |
+
+A field's values are what the form would send under its name (`FormData`): none for an unchecked
+checkbox or a disabled field, several for same-named fields or a `select multiple`, a file by its name.
+So a field disabled by its own condition counts as empty for the conditions that depend on it, and
+chains settle in one go. Each check builds the `FormData`, which fires the form's `formdata` event.
+A field that is not in the form counts as empty, with a warning (a typo?).
+
+Typing applies at once; fields and conditions added, removed or changed in the form apply on the
+next microtask. A value set by script (`input.value = …`) is only seen with an `input` event.
+Removing the attribute leaves the element as it is.
+
 ## Install
 
 ```html
@@ -29,6 +49,7 @@ Disable form-elements (like inputs, buttons, fieldsets) based on a condition
 
 [test.html](http://gcdn.li/u2ui/u2@main/attr/disableif/tests/test.html)  
 [minimal.html](http://gcdn.li/u2ui/u2@main/attr/disableif/tests/minimal.html)  
+[disableif.test.html](http://gcdn.li/u2ui/u2@main/attr/disableif/tests/disableif.test.html) (tests)  
 
 ## About
 

package/attr/disableif/disableif.js

@@ -1,59 +1,86 @@
 import { SelectorObserver } from '../../js/SelectorObserver/SelectorObserver.js';
 
-function checkCondition(el) {
-    const condition = el.getAttribute('u2-disableif');
-
-    const match = condition.match(/^(!?)([^=!<>]*)(=|!=|>|<)?([^=!<>]*)$/);
-    if (match) {
-        let [_, not, field, operator, value] = match;
-        if (not) {
-            if (operator) console.warn(`u2-disableif: "!" operator is not supported with other operators`, { el, field, operator, value });
-            operator = '=';
-        }
-        const target = el.form.elements[field];
-        if (!target) {
-            console.warn(`u2-disableif: field "${field}" not found`, { el, field, operator, value });
-            return;
-        }
-        let stringTargetValue = target.value;
-        if (target.type === 'checkbox') stringTargetValue = target.checked ? target.value : '';
+/** Once per element and problem, not on every update. */
+const warned = new WeakMap();
+function warn(el, problem) {
+    if (warned.get(el) === problem) return;
+    warned.set(el, problem);
+    console.warn('u2-disableif: ' + problem, el);
+}
 
-        const numericTargetValue = parseFloat(stringTargetValue);
-        const numericConditionValue = parseFloat(value);
+/**
+ * Whether the element's condition holds. A field's values are what the form would send under its
+ * name (FormData): none for an unchecked box or a disabled field, several for same-named fields or
+ * a select multiple; a file counts by its name. undefined: no valid condition (yet).
+ */
+function holds(el, data) {
+    const match = el.getAttribute('u2-disableif').match(/^(!?)([^=!<>]*)(=|!=|>|<)?([^=!<>]*)$/);
+    if (!match) return;
+    const [, not, field, operator, value] = match;
+    const form = el.form;
+    // a custom element that is not defined yet is no form field yet: check again once it is
+    const pending = !form.elements[field] && form.querySelector(`:not(:defined)[name="${CSS.escape(field)}"]`);
+    if (pending) { customElements.whenDefined(pending.localName).then(() => schedule(form)); return; }
+    if (not && operator) { warn(el, `"!" cannot be combined with "${operator}"`); return; }
+    if (!form.elements[field]) warn(el, `field "${field}" not found, so it is empty`); // a typo?
+    const values = data.getAll(field).map(v => typeof v === 'string' ? v : v.name);
+    switch (operator) {
+        case '=': return values.includes(value);
+        case '!=': return !values.includes(value);
+        case '>': return values.some(v => parseFloat(v) > parseFloat(value));
+        case '<': return values.some(v => parseFloat(v) < parseFloat(value));
+    }
+    return values.some(Boolean) !== !!not;
+}
 
-        let conditionMet = false;
-        switch (operator) {
-            case undefined:
-                conditionMet = !!stringTargetValue;
-                break;
-            case '=':
-                conditionMet = stringTargetValue === value;
-                break;
-            case '!=':
-                conditionMet = stringTargetValue !== value;
-                break;
-            case '>':
-                conditionMet = numericTargetValue > numericConditionValue;
-                break;
-            case '<':
-                conditionMet = numericTargetValue < numericConditionValue;
-                break;
+/** Applies all conditions of the form, again until nothing changes: disabling a field empties it for
+ *  the conditions that depend on it. A cycle stops after as many passes as there are conditions. */
+function update(form) {
+    const els = [...form.elements].filter(el => el.hasAttribute('u2-disableif'));
+    for (let pass = 0; pass <= els.length; pass++) {
+        const data = new FormData(form); // fires "formdata", once per pass
+        let changed = false;
+        for (const el of els) {
+            const disabled = holds(el, data);
+            if (disabled === undefined || disabled === el.disabled) continue;
+            el.disabled = disabled;
+            changed = true;
         }
-        el.disabled = conditionMet;
+        if (!changed) return;
     }
 }
 
+/** One update per form and `wait` (microtask, frame), however many changes ask for it. */
+const scheduled = new Map();
+function schedule(form, wait = queueMicrotask) {
+    const forms = scheduled.get(wait) ?? scheduled.set(wait, new WeakSet()).get(wait);
+    if (!form || forms.has(form)) return;
+    forms.add(form);
+    wait(() => { forms.delete(form); update(form); });
+}
+
+/** Typing applies at once. Fields and conditions that are added, removed or changed in the form
+ *  apply on the next microtask; one that changes its form also updates the new one. */
+const ATTRIBUTES = ['u2-disableif', 'name', 'form', 'value', 'checked', 'selected', 'multiple', 'type'];
+const watched = new WeakSet();
+function watch(form) {
+    if (!form || watched.has(form)) return;
+    watched.add(form);
+    form.addEventListener('input', () => update(form));
+    form.addEventListener('reset', () => setTimeout(() => update(form))); // the values change after the event
+    new MutationObserver(records => {
+        schedule(form);
+        for (const { target } of records) if (target.form !== form) { watch(target.form); schedule(target.form); }
+    }).observe(form, { subtree: true, childList: true, attributes: true, attributeFilter: ATTRIBUTES });
+}
 
 new SelectorObserver({
     on: (el) => {
-        checkCondition(el);
+        watch(el.form);
+        schedule(el.form);
         // wait for custom-element-inputs
-        // queueMicrotask(()=>checkCondition(el));
-        requestAnimationFrame(()=>checkCondition(el));
-        //setTimeout(()=>checkCondition(el));
-        const form = el.form;
-        el.form.addEventListener('input', () => checkCondition(el));
+        // queueMicrotask(() => schedule(el.form));
+        schedule(el.form, requestAnimationFrame);
+        // setTimeout(() => schedule(el.form));
     },
-    off: (el) => {
-    }
 }).observe('[u2-disableif]');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.6.0",
+  "version": "1.7.5",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",