sync

lib/ui/dropdown.js

@@ -302,7 +302,14 @@ export class Dropdown {
         if (!Array.isArray(list)) {
             return;
         }
-        this._var.source = list;
+        const valuekey = this._var.options.valueKey;
+        function reduceItems(list, id, level = 0) {
+            if (!Array.isArray(list)) {
+                return [];
+            }
+            return list.reduce((array, item) => [...array, { __p: id, __level: level, ...item }, ...reduceItems(item.children, item[valuekey], level + 1)], []);
+        }
+        this._var.source = reduceItems(list);
         if (this._expanded) {
             setTimeout(() => this._dropdown(), 120);
         }
@@ -422,6 +429,7 @@ export class Dropdown {
                 const search = createElement('div', 'ui-drop-search');
                 const input = createElement('input');
                 input.type = 'text';
+                input.className = 'ui-input';
                 isPositive(options.tabIndex) && input.setAttribute('tabindex', options.tabIndex);
                 !nullOrEmpty(options.searchPlaceholder) && input.setAttribute('placeholder', options.searchPlaceholder);
                 input.addEventListener('input', e => {
@@ -579,7 +587,14 @@ export class Dropdown {
             }
             if (multiselect) {
                 const selected = selectedlist.some(s => String(getValue(s, valuekey, textkey)) === val);
-                item.__checked = allchecked || selected;
+                if (allchecked || selected) {
+                    item.__checked = 1;
+                } else {
+                    const indeterminate = selectedlist.some(s => this._contains(String(getValue(s, valuekey, textkey)), item, valuekey, textkey));
+                    if (indeterminate) {
+                        item.__checked = 2;
+                    }
+                }
             }
         });
         if (source.length > 20) {
@@ -592,6 +607,20 @@ export class Dropdown {
         }
     }
 
+    _contains(it, item, valuekey, textkey) {
+        if (item.children?.length > 0) {
+            for (let t of item.children) {
+                if (it === getValue(t, valuekey, textkey)) {
+                    return true;
+                }
+                if (this._contains(it, t, valuekey, textkey)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
     _dofilllist(content, array) {
         const multiselect = this.multiSelect;
         const valuekey = this._var.options.valueKey;
@@ -608,6 +637,18 @@ export class Dropdown {
             const li = createElement('li');
             li.dataset.value = val;
             li.title = item[textkey];
+            if (item.__level > 0) {
+                li.style.marginLeft = `${item.__level * 24}px`;
+            }
+            const wrapper = createElement('span', 'li-wrapper',
+                createElement('span', span => {
+                    // events
+                    span.className = 'ui-expandor';
+                },
+                    createIcon('fa-light', 'caret-down')
+                )
+            );
+            li.appendChild(wrapper);
             let label;
             let html;
             if (typeof template === 'function') {
@@ -628,20 +669,21 @@ export class Dropdown {
                 }
                 const box = createCheckbox({
                     label,
-                    checked: item.__checked,
+                    checked: item.__checked === 1,
+                    indeterminate: item.__checked === 2,
                     customAttributes: {
                         'class': 'dataitem',
                         'data-value': val
                     },
                     onchange: e => this._triggerselect(e.target, item)
                 });
-                li.appendChild(box);
+                wrapper.appendChild(box);
             } else {
                 if (label == null) {
-                    li.innerText = item[textkey];
-                } else {
-                    li.appendChild(label);
+                    label = createElement('span');
+                    label.innerHTML = item[textkey];
                 }
+                wrapper.appendChild(label);
                 if (selected != null && String(selected[valuekey]) === val) {
                     scrolled = DropdownItemHeight * i;
                     li.classList.add('selected');
@@ -664,7 +706,7 @@ export class Dropdown {
             boxes.forEach(box => box.checked = allchecked);
             list = [];
         } else {
-            item.__checked = checkbox.checked;
+            item.__checked = checkbox.indeterminate ? 2 : checkbox.checked ? 1 : 0;
             const all = this._var.container.querySelector('input[isall="1"]');
             if (checkbox.checked) {
                 const source = this.source;