feat: dropdown tree selection.

lib/ui/dropdown.js

@@ -721,31 +721,91 @@ export class Dropdown {
             source.forEach(it => it.__checked = allchecked ? 1 : 0);
             list = [];
         } else {
-            item.__checked = checkbox.indeterminate ? 2 : checkbox.checked ? 1 : 0;
             const all = this._var.container.querySelector('input[isall="1"]');
+            const val = checkbox.dataset.value;
+            const getSelectedList = () => {
+                const list = [];
+                const cache = {};
+                source.filter(it => it.__p == null).forEach(it => {
+                    if (it.__checked === 1) {
+                        list.push(it);
+                        cache[getValue(it, valuekey, textkey)] = true;
+                    }
+                });
+                source.filter(it => it.__p != null).forEach(it => {
+                    if (cache[it.__p]) {
+                        return;
+                    }
+                    if (it.__checked === 1) {
+                        list.push(it);
+                    }
+                });
+                return list;
+            };
             if (checkbox.checked) {
-                if (source.some(it => it.__checked) == null) {
+                item.__checked = 1;
+                if (item.__p != null) {
+                    // parent
+                    if (!source.filter(it => it.__p === item.__p).some(it => it.__checked !== 1)) {
+                        const parent = source.filter(it => String(getValue(it, valuekey, textkey)) === item.__p)[0];
+                        if (parent != null) {
+                            parent.__checked = 1;
+                        }
+                    }
+                }
+                if (item.children?.length > 0) {
+                    // children
+                    source.filter(it => it.__p === val).forEach(it => it.__checked = 1);
+                }
+                if (!source.some(it => it.__checked !== 1)) {
                     this._var.allChecked = true;
                     if (all != null) {
                         all.checked = true;
                     }
                     list = [];
                 } else {
-                    list = source.filter(it => it.__checked);
+                    list = getSelectedList();
                 }
             } else {
-                const val = checkbox.dataset.value;
+                if (item.children?.length > 0) {
+                    if (item.__checked === 2) {
+                        item.__checked = 0;
+                        // children
+                        source.filter(it => it.__p === val).forEach(it => it.__checked = 0);
+                    } else {
+                        item.__checked = 2;
+                    }
+                } else {
+                    item.__checked = 0;
+                }
+                if (item.__p != null) {
+                    // parent
+                    const parent = source.filter(it => String(getValue(it, valuekey, textkey)) === item.__p)[0];
+                    if (parent != null) {
+                        const some = source.filter(it => it.__p === item.__p).some(it => it.__checked === 1 || it.__checked === 2);
+                        parent.__checked = some ? 2 : 0;
+                    }
+                }
                 if (this._var.allChecked) {
                     this._var.allChecked = false;
                     if (all != null) {
                         all.checked = false;
                     }
-                    list = source.filter(it => String(getValue(it, valuekey, textkey)) !== val);
-                } else {
-                    list = this.selectedList.filter(it => String(getValue(it, valuekey, textkey)) !== val);
                 }
+                list = getSelectedList();
             }
         }
+        // refresh selection
+        const checkboxes = this._var.container.querySelectorAll('input.dataitem');
+        checkboxes.forEach(c => {
+            const val = c.dataset.value;
+            const it = source.filter(it => String(getValue(it, valuekey, textkey)) === val)[0];
+            if (it != null) {
+                c.checked = it.__checked === 1 || it.__checked === 2;
+                c.indeterminate = it.__checked === 2;
+            }
+        });
+
         if (this._var.allChecked) {
             this._var.label.innerText = r('allItem', '( All )');
         } else {