u2ui 1.6.0 → 1.8.0

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/el/alert/README.md

@@ -3,7 +3,7 @@ Prominent hints, alerts and facts. `<u2-alert open variant=info>...</u2-alert>`
 
 ## Features
 
-- Various variants for Success, Warn, Error, and Info alerts.
+- Various variants for Success, Warning, Error, and Info alerts.
 - Dismissable alerts allow user to close them.
 - Support for icons within alerts.
 - Customizable actions through buttons in the alert.
@@ -34,7 +34,7 @@ u2-alert::part(icon) {
 ### Attributes
 
 - `variant`  
-  Determines the alert type (`success`, `warn`, `error`, `info`); sets default icon and ARIA role.
+  Determines the alert type (`success`, `warning`, `error`, `info`); sets default icon and ARIA role. `warn` still works, but is deprecated.
 
 - `dismissable`  
   Shows a close button. Without this attribute the close button is hidden.

package/el/alert/alert.css

@@ -17,7 +17,7 @@ u2-alert:not([open]) {
 }
 
 u2-alert[variant=success] { --color: var(--color-green); }
-u2-alert[variant=warn] { --color: var(--color-yellow); }
+u2-alert:is([variant=warning], [variant=warn]) { --color: var(--color-yellow); } /* warn: deprecated */
 u2-alert[variant=error] { --color: var(--color-red); }
 u2-alert[variant=info] { --color: var(--color-blue); }
 

package/el/alert/alert.js

@@ -106,11 +106,11 @@ export default class U2Alert extends U2Element {
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue) return;
         if (name==='variant') {
-            const variant = this.getAttribute('variant');
+            const variant = variantOf(this);
             this.shadowRoot.getElementById('container').role = variantData[variant]?.role || 'status'; // better to set role to host?
         }
         if (name==='variant' || name==='icon') {
-            const variant = this.getAttribute('variant');
+            const variant = variantOf(this);
             const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
             this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
         }
@@ -150,7 +150,7 @@ const variantData = {
         icon: 'check',
         role: 'status',
     },
-    warn: {
+    warning: {
         icon: 'warning',
         role: 'alert',
     },
@@ -160,6 +160,16 @@ const variantData = {
     }
 };
 
+/** The variant; "warn" is read as "warning" (deprecated, warned about once). */
+let warned = false;
+function variantOf(el) {
+    const variant = el.getAttribute('variant');
+    if (variant !== 'warn') return variant;
+    if (!warned) console.warn('u2-alert: variant "warn" is deprecated, use "warning"', el);
+    warned = true;
+    return 'warning';
+}
+
 customElements.get('u2-alert') || customElements.define('u2-alert', U2Alert);
 
 function alert(message, variant, options={}) {
@@ -173,7 +183,7 @@ function alert(message, variant, options={}) {
 }
 export const info = (message, options) => alert(message, 'info', options);
 export const success = (message, options) => alert(message, 'success', options);
-export const warn = (message, options) => alert(message, 'warn', options);
+export const warn = (message, options) => alert(message, 'warning', options);
 export const error = (message, options) => alert(message, 'error', options);
 
 

package/package.json

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