@danielgindi/selectbox 1.0.145 → 1.0.147

package/lib/DropList.js

@@ -701,7 +701,10 @@ class DropList {
 
         p.virtualListHelper.setCount(0);
 
-        return this.addItems(items);
+        this.addItems(items);
+        this.updateSublist();
+
+        return this;
     }
 
     updateItemByValue(value, newItem) {
@@ -1465,20 +1468,21 @@ class DropList {
             droplist: droplist,
         });
 
-        droplist.show( {
-            target: itemElement,
-            position: { x: 'start', y: 'top' },
-            anchor: { x: 'end', y: 'top' },
-            offset: { x: 0, y: 0 },
-            updateWidth: false,
-        });
-
         p.currentSubDropList = {
             item: item,
             itemElement: itemElement,
             droplist: droplist,
+            showOptions: {
+                target: itemElement,
+                position: { x: 'start', y: 'top' },
+                anchor: { x: 'end', y: 'top' },
+                offset: { x: 0, y: 0 },
+                updateWidth: false,
+            },
         };
 
+        droplist.show(p.currentSubDropList.showOptions);
+
         droplist.el.focus();
     }
 
@@ -1507,6 +1511,36 @@ class DropList {
         });
     }
 
+    /**
+     * Updates the current open sublist with new subitems if changed
+     */
+    updateSublist() {
+        const p = this._p;
+
+        if (!p.currentSubDropList)
+            return;
+
+        const originalItem = p.currentSubDropList.item;
+
+        const data = p.currentSubDropList;
+        const newItem = p.items.find(x => x === originalItem) ||
+            p.items.find(x => x.value === data.item.value);
+        if (newItem) {
+            p.currentSubDropList.item = newItem;
+            const itemElement = p.virtualListHelper.getItemElementAt(this._getItemIndex(newItem));
+            p.currentSubDropList.itemElement = itemElement;
+
+            if (newItem._subitems) {
+                p.currentSubDropList.droplist.setItems(newItem._subitems);
+
+                if (itemElement) {
+                    p.currentSubDropList.showOptions.target = itemElement;
+                    p.currentSubDropList.droplist.relayout(p.currentSubDropList.showOptions);
+                }
+            }
+        }
+    }
+
     setFocusedItem(item) {
         const p = this._p;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.145",
+  "version": "1.0.147",
   "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
   "main": "dist/lib.cjs.min.js",
   "module": "lib/index.js",

package/vue/DropList.vue

@@ -108,6 +108,10 @@ export default {
         positionOptions: {
             type: Object,
         },
+        autoRelayoutOnItemsChange: {
+            type: Boolean,
+            default: true,
+        },
     },
 
     emits: [
@@ -216,10 +220,10 @@ export default {
     watch: {
         items(value) {
             if (this.nonReactive.instance) {
-                this.nonReactive.instance.removeAllItems();
-
-                if (Array.isArray(value))
-                    this.nonReactive.instance.addItems(value);
+                const instance = this.nonReactive.instance;
+                instance.setItems(Array.isArray(value) ? value : []);
+                if (this.autoRelayoutOnItemsChange && instance.isVisible())
+                    instance.relayout(this.positionOptions);
             }
         },