u2ui 1.5.19 → 1.5.20

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.19",
+  "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",