sl-tree to support unchecking child nodes without unchecking the parent node

[coderberry]

What issue are you having?

We are needing the sl-tree to allow unchecking child nodes without unchecking the parent node. Our use case is that we need to allow our customers to select parent "modules" that may have content, but not include the sub-"modules". In this case, we are providing access to an online course, and we may not want to allow deeply nested course modules.

Currently with the sl-tree component, we are unable to deselect all the child nodes without deselecting the parent node as well.

Our goal:

├── Root Module ✅
│   ├── Module 1 ✅
│   │   ├── Module 1.1 ✅
│   │   ├── Module 1.2 ✅
│   │   ├── Module 1.3 ✅
│   ├── Module 2 ✅
│   │   ├── Module 2.1 (not checked)
│   ├── Module 3 ✅
│   │   ├── Module 3.1 ✅
│   │   |   ├── Module 3.1.1 (not checked)

(see discussion)

Describe the solution you'd like

I have created a fork/branch that adds an additional option to the selection property called any. This PR provides a way to allow what we are hoping to achieve.

Here's a demo of the functionality added:

Here's the core change (and a full diff):

  function syncParentItem(treeItem: SlTreeItem) {
    const children = treeItem.getChildrenItems({ includeDisabled: false });

    if (children.length) {
      const allChecked = children.every(item => item.selected);
      const allUnchecked = children.every(item => !item.selected && !item.indeterminate);

-     treeItem.selected = allChecked;
-     treeItem.indeterminate = !allChecked && !allUnchecked;
+     const tree = treeItem.closest('sl-tree')!;
+     if (tree.selection === 'any') {
+       treeItem.selected ||= allChecked || !allUnchecked;
+     } else {
+       treeItem.selected = allChecked;
+       treeItem.indeterminate = !allChecked && !allUnchecked;
+     }
    }
  }

Describe alternatives you've considered

We have attempted to write this outside of shoelace, but we love shoelace and prefer to use it for as much as we can.

[claviska]

@coderberry Please see this discussion: #1214 (reply in thread)

If we could support that in <sl-tree>, would it also solve your issue?

[claviska]

Also related: #1345

[claviska]

I'd like to track all work related to the tree's selection modes here. It sounds like #1214 and #1345 might be closely related, so perhaps we can tackle all of them in one place.

[devmwall]

@claviska Are there any plans to support 'any'?