selective-ui 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An overlay for the HTML select element.",
   "author": "Huỳnh Công Xuân Mai",
   "license": "MIT",

package/src/js/components/selectbox.js

@@ -137,13 +137,7 @@ export class SelectBox {
                         tag: {
                             node: "div", 
                             classList: "selective-ui-view", 
-                            tabIndex: 0, 
-                            role: "combobox",
-                            ariaExpanded: "false",
-                            ariaLabelledby: options.SEID_HOLDER,
-                            ariaControls: options.SEID_LIST,
-                            ariaHaspopup: "true",
-                            ariaMultiselectable: options.multiple ? "true" : "false",
+                            tabIndex: 0,
                             onkeydown: (e) => {
                                 if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
                                     e.preventDefault();
@@ -463,10 +457,21 @@ export class SelectBox {
             },
             setValue(evtToken = null, value, trigger = true, force = false) {
                 !Array.isArray(value) && (value = [value]);
+                
+                value = value.filter(v => v !== "" && v != null);
+                
+                if (value.length === 0) {
+                    superThis.getModelOption().forEach(modelOption => {
+                        modelOption["selectedNonTrigger"] = false;
+                    });
+                    this.change(false, trigger);
+                    return;
+                }
 
                 if (bindedOptions.multiple && bindedOptions.maxSelected > 0) {
                     if (value.length > bindedOptions.maxSelected) {
-                        return
+                        console.warn(`Cannot select more than ${bindedOptions.maxSelected} items`);
+                        return;
                     }
                 }
 
@@ -474,12 +479,58 @@ export class SelectBox {
                     return;
                 }
 
+                if (container.searchController?.isAjax()) {
+                    const { existing, missing } = container.searchController.checkMissingValues(value);
+                    
+                    if (missing.length > 0) {
+                        console.log(`Loading ${missing.length} missing values from server...`);
+                        
+                        (async () => {
+                            if (bindedOptions.loadingfield) {
+                                container.popup?.showLoading();
+                            }
+                            
+                            try {
+                                const result = await container.searchController.loadByValues(missing);
+                                
+                                if (result.success && result.items.length > 0) {
+                                    result.items.forEach(item => {
+                                        if (missing.includes(item.value)) {
+                                            item.selected = true;
+                                        }
+                                    });
+                                    
+                                    container.searchController['#applyAjaxResult'](
+                                        result.items, 
+                                        true,
+                                        true
+                                    );
+                                    
+                                    setTimeout(() => {
+                                        superThis.getModelOption().forEach(modelOption => {
+                                            modelOption["selectedNonTrigger"] = value.some(v => v == modelOption["value"]);
+                                        });
+                                        this.change(false, false);
+                                    }, 100);
+                                } else if (missing.length > 0) {
+                                    console.warn(`Could not load ${missing.length} values:`, missing);
+                                }
+                            } catch (error) {
+                                console.error("Error loading missing values:", error);
+                            } finally {
+                                if (bindedOptions.loadingfield) {
+                                    container.popup?.hideLoading();
+                                }
+                            }
+                        })();
+                    }
+                }
+
                 if (trigger) {
                     const beforeChangeToken = iEvents.callEvent([this], ...bindedOptions.on.beforeChange);
                     if (beforeChangeToken.isCancel) {
                         return;
                     }
-
                     superThis.oldValue = this.value;
                 }
 
@@ -487,7 +538,7 @@ export class SelectBox {
                     modelOption["selectedNonTrigger"] = value.some(v => v == modelOption["value"]);
                 });
                 
-                if (!bindedOptions.multiple){
+                if (!bindedOptions.multiple && value.length > 0) {
                     container.targetElement.value = value[0];
                 }
                 
@@ -539,8 +590,14 @@ export class SelectBox {
                 
                 container.popup.open();
                 container.searchbox.show();
-
-                container.tags.ViewPanel.setAttribute("aria-expanded", "true");
+                const ViewPanel = /** @type {HTMLElement} */ (container.tags.ViewPanel);
+                ViewPanel.setAttribute("aria-expanded", "true");
+                ViewPanel.setAttribute("aria-controls", bindedOptions.SEID_LIST);
+                ViewPanel.setAttribute("aria-haspopup", "listbox");
+                ViewPanel.setAttribute("aria-labelledby", bindedOptions.SEID_HOLDER);
+                if (bindedOptions.multiple) { 
+                    ViewPanel.setAttribute("aria-multiselectable", "true");
+                }
                 
                 iEvents.callEvent([this], ...bindedOptions.on.show);
 

package/src/js/core/search-controller.js

@@ -46,6 +46,88 @@ export class SearchController {
         return !(!this.#ajaxConfig);
     }
 
+    /**
+     * Load specific options by their values from server
+     * @param {string|string[]} values - Values to load
+     * @returns {Promise<{success: boolean, items: Array, message?: string}>}
+     */
+    async loadByValues(values) {
+        if (!this.#ajaxConfig) {
+            return { success: false, items: [], message: "Ajax not configured" };
+        }
+
+        const valuesArray = Array.isArray(values) ? values : [values];
+        if (valuesArray.length === 0) {
+            return { success: true, items: [] };
+        }
+        
+        try {
+            const cfg = this.#ajaxConfig;
+            
+            let payload;
+            if (typeof cfg.dataByValues === "function") {
+                payload = cfg.dataByValues(valuesArray);
+            } else {
+                payload = {
+                    values: valuesArray.join(","),
+                    load_by_values: "1",
+                    ...(typeof cfg.data === "function" ? cfg.data("", 0) : (cfg.data || {}))
+                };
+            }
+
+            let response;
+            if (cfg.method === "POST") {
+                const formData = new URLSearchParams();
+                Object.keys(payload).forEach(key => {
+                    formData.append(key, payload[key]);
+                });
+
+                response = await fetch(cfg.url, {
+                    method: "POST",
+                    body: formData,
+                    headers: { "Content-Type": "application/x-www-form-urlencoded" }
+                });
+            } else {
+                const params = new URLSearchParams(payload).toString();
+                response = await fetch(`${cfg.url}?${params}`);
+            }
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            const result = this.#parseResponse(data);
+            
+            return {
+                success: true,
+                items: result.items
+            };
+        } catch (error) {
+            console.error("Load by values error:", error);
+            return { 
+                success: false, 
+                message: error.message,
+                items: []
+            };
+        }
+    }
+
+    /**
+     * Check if values exist in current options
+     * @param {string[]} values - Values to check
+     * @returns {{existing: string[], missing: string[]}}
+     */
+    checkMissingValues(values) {
+        const allOptions = Array.from(this.#select.options);
+        const existingValues = allOptions.map(opt => opt.value);
+        
+        const existing = values.filter(v => existingValues.includes(v));
+        const missing = values.filter(v => !existingValues.includes(v));
+        
+        return { existing, missing };
+    }
+
     /**
      * Configures AJAX settings used for remote searching and pagination.
      *

package/src/js/index.js

@@ -26,7 +26,7 @@ import { checkDuplicate, markLoaded } from "./utils/guard";
 import { Libs } from "./utils/libs";
 import { Effector } from "./services/effector";
 
-export const version = "1.0.3";
+export const version = "1.0.4";
 export const name = "SelectiveUI";
 
 const alreadyLoaded = checkDuplicate(name);