@danielgindi/selectbox 1.0.28 → 1.0.32

package/lib/SelectBox.js

@@ -100,7 +100,9 @@ const inputBackbufferCssProps = [
  * @property {string} [multiItemLabelProp='short_label']
  * @property {number} [maxMultiItems] maximum number of multi items. The rest will get a single item to represent.
  * @property {function(count: number, items: DropList.ItemBase[]):string} [multiItemsRestLabelProvider] label for the item representing the rest of the items.
- * @property {DropList.ItemBase[]|null} [items]
+ * @property {DropList.ItemBase[]|null} [items] initial items
+ * @property {*[]|null} [selectedValues] initial selected values
+ * @property {*|*[]|null} [value] initial selected value
  * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderSingleItem]
  * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderSingleItem]
  * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderMultiItem]
@@ -112,6 +114,7 @@ const inputBackbufferCssProps = [
  * @property {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} [filterFn]
  * @property {function(name: string, ...args)} [on]
  * @property {string|string[]} [additionalClasses]
+ * @property {boolean} [isLoadingMode]
  * */
 const defaultOptions = {
     el: null,
@@ -140,6 +143,9 @@ const defaultOptions = {
     maxMultiItems: null,
     multiItemsRestLabelProvider: null,
     items: [],
+    selectedValues: undefined,
+    value: undefined,
+    isLoadingMode: false,
 };
 
 /**
@@ -237,12 +243,12 @@ class SelectBox {
             renderNoResultsItem: o.renderNoResultsItem,
             unrenderNoResultsItem: o.unrenderNoResultsItem,
             filterFn: o.filterFn,
-            on: o.on,
+            on: null,
             additionalClasses: o.additionalClasses,
 
-            isLoadingMode: false,
+            isLoadingMode: !!o.isLoadingMode,
 
-            items: o.items || [],
+            items: [],
             filteredItems: null,
             itemsChanged: true,
 
@@ -336,7 +342,16 @@ class SelectBox {
         p.sink.add(window, 'resize', () => this._resizeInput());
         p.sink.add(window, 'orientationchange', () => this._resizeInput());
 
-        this.setItems(p.items);
+        this.setItems(o.items);
+
+        if (o.multi && Array.isArray(o.selectedValues)) {
+            this.setSelectedValues(o.selectedValues);
+        } else if (o.value != null) {
+            this.setValue(o.value);
+        }
+
+        // Start firing events
+        p.on = o.on || null;
 
         this._scheduleSync();
 
@@ -1304,13 +1319,22 @@ class SelectBox {
      * @returns {SelectBox}
      */
     toggleLoading(on) {
+        return this.setIsLoadingMode(on === undefined ? !this.getIsLoadingMode() : !!on);
+    }
+
+    /**
+     * @param {boolean} isLoadingMode
+     * @returns {SelectBox}
+     */
+    setIsLoadingMode(isLoadingMode) {
         const p = this._p;
-        let loading = on === undefined ? !this._p.isLoadingMode : !!on;
 
-        if (p.isLoadingMode === loading)
+        isLoadingMode = isLoadingMode === undefined ? true : !!isLoadingMode;
+
+        if (p.isLoadingMode === isLoadingMode)
             return this;
 
-        p.isLoadingMode = loading;
+        p.isLoadingMode = isLoadingMode;
 
         if (p.isLoadingMode && p.items.length === 0 && this.isListOpen()) {
             this.closeList();
@@ -1324,6 +1348,12 @@ class SelectBox {
         return this;
     }
 
+    /**
+     * @returns {boolean}
+     */
+    getIsLoadingMode() {
+        return this._p.isLoadingMode;
+    }
 
     /**
      * Can be called in case that the selectbox was attached to the dom late and has a weird size.
@@ -2960,7 +2990,7 @@ class SelectBox {
                 return 0;
             });
 
-        let group = [];
+        let group = [], stickyGroup = null;
         let groups = [group];
         const selectedValuesSet = new Set(p.selectedValues);
         let item, i, len;
@@ -2980,12 +3010,27 @@ class SelectBox {
             groups.length = 0;
         }
 
+        // Non-grouped sticky should be first
+        if (stickyValues && items.length > 0 && !items[0]._group) {
+            stickyGroup = groups[0].filter(x => stickyValues.has(x[valueProp]));
+            if (stickyGroup.length > 0) {
+                groups[0] = groups[0].filter(x => !stickyValues.has(x[valueProp]));
+            }
+        }
+
         if (sort) {
             // Sort the groups
             groups.sort((a, b) => {
                 a = a[0];
                 b = b[0];
 
+                if (stickyValues !== null) {
+                    let sa = stickyValues.has(a[valueProp]);
+                    let sb = stickyValues.has(b[valueProp]);
+                    if (sa && !sb) return -1;
+                    if (!sa && sb) return 1;
+                }
+
                 // A "group" without a group item will come first
                 if (!a._group && b._group) return -1;
                 if (a._group && !b._group) return 1;
@@ -2994,6 +3039,10 @@ class SelectBox {
             });
         }
 
+        if (stickyGroup && stickyGroup.length > 0) {
+            groups.unshift(stickyGroup);
+        }
+
         // Now we have an array of groups, possibly sorted.
         // Each group is an array that begins with the group item (group name/id).
         // A group could possible start with a normal item, if it's a "default group", which had no group item.
@@ -3007,7 +3056,7 @@ class SelectBox {
             // Sort each group
             group.sort((a, b) => {
 
-                // Grouped items come first
+                // Grouping items come first
                 if (a._group && !b._group) return -1;
                 if (!a._group && b._group) return 1;
 
@@ -3037,6 +3086,15 @@ class SelectBox {
             for (let g = 0, glen = groups.length; g < glen; g++) {
                 group = groups[g];
 
+                if (group === stickyGroup) {
+                    checkedGroups.push(stickyGroup);
+                    let sgi = uncheckedGroups.indexOf(stickyGroup);
+                    if (sgi !== -1) {
+                        uncheckedGroups.splice(sgi, 1);
+                    }
+                    continue;
+                }
+
                 virtualGroup = null;
 
                 for (let gi = 0, gilen = group.length; gi < gilen; gi++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.28",
+  "version": "1.0.32",
   "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",
@@ -31,21 +31,21 @@
   "homepage": "https://github.com/danielgindi/selectbox#readme",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.14.9",
-    "@babel/runtime": "^7.14.8",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/runtime": "^7.15.4",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
-    "core-js": "^3.16.0",
+    "core-js": "^3.17.3",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.15.1",
+    "eslint-plugin-vue": "^7.17.0",
     "fs-extra": "^10.0.0",
-    "husky": "^7.0.1",
+    "husky": "^7.0.2",
     "pinst": "^2.1.6",
-    "rollup": "^2.55.1",
+    "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.37.2"
+    "sass": "^1.39.2"
   },
   "dependencies": {
     "@danielgindi/dom-utils": "^1.0.3",

package/vue/SelectBox.vue

@@ -226,6 +226,10 @@
                 type: Boolean,
                 default: false,
             },
+            isLoadingMode: {
+                type: Boolean,
+                default: false,
+            },
         },
 
         data() {
@@ -481,6 +485,11 @@
                 if (this._box)
                     this._box.setAdditionalClasses(this.additionalClassesList);
             },
+
+            isLoadingMode() {
+                if (this._box)
+                    this._box.setIsLoadingMode(!!this.isLoadingMode);
+            },
         },
 
         mounted() {
@@ -652,6 +661,7 @@
                     filterFn: this.filterFn,
                     on: this._handleBoxEvents.bind(this),
                     additionalClasses: this.additionalClassesList,
+                    isLoadingMode: this.isLoadingMode,
                 });
 
                 box.setValue(this.value === null ? undefined : this.value);