u2ui 1.5.18 → 1.5.20

package/el/fields/fields.js

@@ -1,3 +1,5 @@
+// todo: shadowrootreferencetarget
+
 import U2Element from '../../u2/Element.js';
 export default class U2Fields extends U2Element {
     constructor() {

package/el/tree/README.md

@@ -8,6 +8,7 @@ Treeview component `<u2-tree>Folder <u2-tree>File</u2-tree> </u2-tree>`
 - Expand/collapse events
 - Lazy loading of children
 - Drag and drop (opt-in, loaded on demand via the `draggable` attribute)
+- Checkbox tree (opt-in, loaded on demand via the `tristate` attribute)
 
 ## Usage
 
@@ -67,6 +68,17 @@ This is either not expandable or like aria-expanded="false" if it has children.
 This indicates, that the node has to be loaded.  
 The `u2-tree-collapse` event will get a property `event.load(asyncFn)` to load their children.
 
+#### tristate
+`<u2-tree tristate>` — an item's checkbox (the first in its content) stands for everything below it:
+checking it checks every checkbox below, and it follows its child items' — checked when all are,
+indeterminate when some are. A checkbox checked in the markup checks all below it on load, and so
+do items added later under a checked item (e.g. loaded on expand).
+```html
+<u2-tree tristate aria-expanded=true><label><input type=checkbox name=a value=cms> cms</label>
+    <u2-tree><label><input type=checkbox name=a value=cms/node> node</label></u2-tree>
+</u2-tree>
+```
+
 ### Events
 
 #### expand / collapse
@@ -117,6 +129,7 @@ treeElement.addEventListener('u2-tree-drop', (e) => {
 [dnd-shadow.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/dnd-shadow.html)  
 [custom.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/custom.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/test.html)  
+[tristate.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/tristate.html)  
 [animated.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/animated.html)  
 [minimal.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/minimal.html)  
 [dnd.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/dnd.html)  

package/el/tree/ext/tristate.js

@@ -0,0 +1,63 @@
+// u2-tree tristate — an item's checkbox stands for everything below it.
+// Its checkbox is the first one in its content (not in a child item). Checking it checks every checkbox
+// below; it follows its child items': checked when all are, indeterminate when some are. Items added
+// later (e.g. loaded on expand) are checked under a checked item; else, as when items are removed,
+// the items above follow.
+// Loaded on demand via the `tristate` attribute.
+
+const BOX = 'input[type=checkbox]';
+
+/** The item's own checkbox, if it has one: searched in its content only, not below. */
+function box(item) {
+    for (const el of item.children) {
+        if (el.localName === item.localName) continue;
+        const found = el.matches(BOX) ? el : el.querySelector(BOX);
+        if (found) return found;
+    }
+}
+
+/** Set every checkbox below the item like its own. */
+function cascade(item, checked) {
+    for (const b of item.querySelectorAll(BOX)) {
+        b.checked = checked;
+        b.indeterminate = false;
+    }
+}
+
+/** The item's checkbox follows its child items'. */
+function follow(item) {
+    const own = box(item), boxes = [...item.children].filter(c => c.localName === item.localName).map(box).filter(Boolean);
+    if (!own || !boxes.length) return;
+    const checked = boxes.filter(b => b.checked).length;
+    own.checked = checked === boxes.length;
+    own.indeterminate = !own.checked && (checked > 0 || boxes.some(b => b.indeterminate));
+}
+
+export function tristate(tree) {
+    const init = () => {
+        const items = [tree, ...tree.querySelectorAll(tree.localName)];
+        for (const item of items) { // a checked item: all below it, once (one above did it already)
+            if (box(item)?.checked && (item === tree || !box(item.parentNode)?.checked)) cascade(item, true);
+        }
+        for (const item of items.reverse()) follow(item); // then bottom-up
+    };
+    document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init, { once: true }) : init();
+
+    /** The items from `item` up to the tree follow their children. */
+    const up = item => { for (; item !== tree.parentNode; item = item.parentNode) follow(item); };
+
+    tree.addEventListener('input', e => {
+        const item = e.target.closest(tree.localName);
+        if (!item || e.target !== box(item)) return;
+        cascade(item, e.target.checked);
+        if (item !== tree) up(item.parentNode);
+    });
+
+    new MutationObserver(records => {
+        for (const { target, addedNodes, removedNodes } of records) {
+            const items = nodes => [...nodes].some(n => n.localName === tree.localName);
+            if (items(addedNodes) && box(target)?.checked) cascade(target, true);
+            else if (items(addedNodes) || items(removedNodes)) up(target);
+        }
+    }).observe(tree, { childList: true, subtree: true });
+}

package/el/tree/manifest.json

@@ -25,7 +25,10 @@
                 "name": "u2-tree-drop",
                 "type": { "text": "Event" }
             }],
-            "attributes": [],
+            "attributes": [{
+                "name": "tristate",
+                "description": "An item's checkbox stands for everything below it: checks all below, follows its children (indeterminate when some are checked)"
+            }],
             "cssProperties": [{
                 "name": "--indent",
                 "syntax": "<length>",

package/el/tree/tree.js

@@ -40,8 +40,11 @@ styleSheet.replaceSync(css);
 
 export default class U2Tree extends HTMLElement {
 
-    static observedAttributes = ['draggable'];
-    attributeChangedCallback() { U2Tree.dnd ??= import('./ext/dnd.js'); }  // load DnD lazily once draggable appears
+    static observedAttributes = ['draggable', 'tristate'];
+    attributeChangedCallback(name) {
+        if (name === 'draggable') U2Tree.dnd ??= import('./ext/dnd.js');  // load DnD lazily once draggable appears
+        if (name === 'tristate' && this.hasAttribute(name)) this._tristate ??= import('./ext/tristate.js').then(({tristate}) => tristate(this));
+    }
 
     constructor() {
         super();

package/js/contextmenu/contextmenu.js

@@ -1,4 +1,3 @@
-
 class Menu {
     constructor(menuItem) {
         this.menuItem = menuItem;
@@ -323,6 +322,9 @@ document.documentElement.addEventListener('contextmenu', e=>{
     e.preventDefault();
     
     rootEl.showPopover();
+    // pointerup still pending (not on Windows): capture it, so it does not light-dismiss the popover
+    if (e.buttons) rootEl.setPointerCapture(e.pointerId);
+
     rootEl.querySelector('button').focus();
 
     let top  = e.clientY + 2;

package/js/rte/src/client/README.md

@@ -402,8 +402,8 @@ its replacement, as a promise or directly. `surface` comes along rather than a
 digest of it: `surface.config` says what the field allows — with `null` where
 nothing is restricted — because an answer using anything else is cleaned away on
 the way back in, and `surface.element` is where an application reads whatever
-else its own fields carry; a rejection is shown in the answer
-pane and leaves the field untouched. `prompts` fills a datalist beside the
+else its own fields carry; a rejection is shown as an alert
+(`js/dialog`) and leaves the panes and the field untouched. `prompts` fills a datalist beside the
 input. Without `diff` the dialog shows two panes — comparing two HTML strings is
 a library question, not an editor one, so none is pulled in. Answers that arrive
 after the next prompt, or after the dialog closed, are dropped.

package/js/rte/src/client/ai.js

@@ -148,7 +148,11 @@ async function ask(state) {
         parts.apply.disabled = false;
         await update(state, pending, run);
     } catch (error) {
-        if (state.pending === pending && pending.run === run) parts.answer.textContent = String(error?.message ?? error);
+        // A failure is no answer: it comes as an alert, and the panes keep what they had.
+        if (state.pending === pending && pending.run === run) {
+            const {alert} = await import('../../../dialog/dialog.js');
+            alert(String(error?.message ?? error), {root: state.dialog.parentNode});
+        }
     } finally {
         if (state.pending === pending && pending.run === run) parts.busy.disabled = false;
     }

package/package.json

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