fix dropdown issue, add autoprefix for scss

lib/ui/dropdown.js

@@ -29,7 +29,7 @@ if (dropdownGlobal == null) {
                 return;
             }
             const dropdown = this[dropId];
-            if (dropdown != null && dropdown.multiselect && typeof dropdown.oncollapsed === 'function') {
+            if (dropdown?.multiselect && typeof dropdown.oncollapsed === 'function') {
                 dropdown.oncollapsed();
             }
         }
@@ -49,6 +49,19 @@ if (dropdownGlobal == null) {
     });
 }
 
+function selectItems(label, itemlist, htmlkey, textkey) {
+    const htmls = itemlist.map(it => it[htmlkey]);
+    if (htmls.some(it => it instanceof HTMLElement)) {
+        label.replaceChildren(...htmls.filter(it => it != null).map(it => it.cloneNode(true)));
+    } else {
+        let text = itemlist.map(it => it[textkey]).join(', ');
+        if (nullOrEmpty(text)) {
+            text = r('noneItem', '( None )');
+        }
+        label.innerText = text;
+    }
+}
+
 class Dropdown {
     #options;
 
@@ -211,6 +224,7 @@ class Dropdown {
         this.#lastSelected = selected;
         const valuekey = this.#options.valuekey;
         const textkey = this.#options.textkey;
+        const htmlkey = this.#options.htmlkey;
         let item = this.source.find(it => it[valuekey] === selected);
         if (this.#options.input) {
             if (item == null) {
@@ -224,11 +238,16 @@ class Dropdown {
                 this.#label.innerText = ' ';
                 return false;
             }
-            let text = item[textkey];
-            if (nullOrEmpty(text)) {
-                text = ' ';
+            const html = item[htmlkey];
+            if (html instanceof HTMLElement) {
+                this.#label.replaceChildren(html.cloneNode(true));
+            } else {
+                let text = item[textkey];
+                if (nullOrEmpty(text)) {
+                    text = ' ';
+                }
+                this.#label.innerText = text;
             }
-            this.#label.innerText = text;
         }
         this.#selected = item;
         if (!init && typeof this.onselected === 'function') {
@@ -240,6 +259,7 @@ class Dropdown {
         const source = this.source;
         const valuekey = this.#options.valuekey;
         const textkey = this.#options.textkey;
+        const htmlkey = this.#options.htmlkey;
         const itemlist = selectedlist.map(v => {
             let item = source.find(it => it[valuekey] === v);
             if (item == null) {
@@ -249,24 +269,19 @@ class Dropdown {
             }
             return item;
         });
-        const none = r('noneItem', '( None )');
         if (itemlist.length === 0) {
             this.#selectedList = null;
             this.#label.innerText = none;
             return false;
         }
-        const text = itemlist.map(it => it[textkey]).join(', ');
-        if (nullOrEmpty(text)) {
-            text = none;
-        }
+        selectItems(this.#label, itemlist, htmlkey, textkey);
         this.#selectedList = itemlist;
-        this.#label.innerText = text;
         if (!init && typeof this.onselectedlist === 'function') {
             this.onselectedlist(itemlist);
         }
     }
 
-    get #expanded() { return this.#container != null && this.#container.style.visibility === 'visible' }
+    get #expanded() { return this.#container?.style.visibility === 'visible' }
 
     #dropdown(flag) {
         flag ??= true;
@@ -277,7 +292,7 @@ class Dropdown {
             panel = document.createElement('div');
             panel.className = 'dropdown-panel';
             // search box
-            if (options.search) {
+            if (!options.input && options.search) {
                 let searchkeys = options.searchkeys;
                 if (!Array.isArray(searchkeys) || searchkeys.length === 0) {
                     searchkeys = [textkey];
@@ -328,7 +343,6 @@ class Dropdown {
             panel.appendChild(list);
             this.#container = panel;
             this.#wrapper.appendChild(panel);
-            this.#filllist(this.source);
         }
         if (flag) {
             if (!options.slidefixed) {
@@ -349,6 +363,18 @@ class Dropdown {
             //     const event = new InputEvent('type');
             //     inputSearch.dispatchEvent(event);
             // }
+            if (options.input) {
+                this.#label.dispatchEvent(new InputEvent('type'));
+            } else if (options.search) {
+                const search = panel.querySelector('.dropdown-search > input');
+                if (!nullOrEmpty(search?.value)) {
+                    search.dispatchEvent(new InputEvent('type'));
+                } else {
+                    this.#filllist(this.source);
+                }
+            } else {
+                this.#filllist(this.source);
+            }
         } else {
             panel.classList.remove('active');
         }
@@ -425,6 +451,7 @@ class Dropdown {
         let list;
         const valuekey = this.#options.valuekey;
         const textkey = this.#options.textkey;
+        const htmlkey = this.#options.htmlkey;
         if (checkbox.getAttribute('isall') === '1') {
             const allchecked = this.#allChecked = checkbox.checked;
             const boxes = this.#container.querySelectorAll('input.dataitem');
@@ -451,16 +478,36 @@ class Dropdown {
                 list = this.selectedlist.filter(it => it[valuekey] !== val);
             }
         }
-        let text = this.#allChecked ? r('allItem', '( All )') : list.map(it => it[textkey]).join(', ');
-        if (nullOrEmpty(text)) {
-            text = r('noneItem', '( None )');
+        if (this.#allChecked) {
+            this.#label.innerText = r('allItem', '( All )');
+        } else {
+            selectItems(this.#label, list, htmlkey, textkey);
         }
         this.#selectedList = list;
-        this.#label.innerText = text;
         if (typeof this.onselectedlist === 'function') {
             this.onselectedlist(itemlist);
         }
     }
+
+    static resolve(dom) {
+        dom ??= document.body;
+        const selects = dom.querySelectorAll('select');
+        for (let sel of selects) {
+            let selected;
+            const source = [...sel.children].map(it => {
+                if (it.selected) {
+                    selected = it.value;
+                }
+                return { value: it.value, text: it.innerText }
+            });
+            const drop = new Dropdown({
+                selected
+            });
+            drop.source = source;
+            sel.parentElement.replaceChild(drop.create(), sel);
+        }
+        return dom;
+        }
 }
 
 export default Dropdown;