@danielgindi/selectbox 1.0.29 → 1.0.33

package/lib/DropList.js

@@ -13,10 +13,10 @@ import {
     getElementWidth,
     setElementHeight,
     setElementWidth, getElementOffset, anchoredPosition,
+    parseTransition,
 } from '@danielgindi/dom-utils/lib/Css';
 import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
 import VirtualListHelper from '@danielgindi/virtual-list-helper';
-import parseCssTransition from 'parse-css-transition';
 import {
     VALUE_DOWN,
     VALUE_END,
@@ -27,6 +27,7 @@ import {
     VALUE_SPACE,
     VALUE_UP,
 } from 'keycode-js';
+import mitt from 'mitt';
 
 const ItemSymbol = Symbol('item');
 const DestroyedSymbol = Symbol('destroyed');
@@ -122,7 +123,7 @@ let defaultOptions = {
 Emits the following events:
 ---------------------------
 
-'itemfocus' {value, item}: item gained focus.
+'itemfocus' {value, item, event}: item gained focus.
 'itemblur' {value, item}: item lost focus.
 'select' {value, item}: item was selected (in single mode).
 'show:before': the drop list will show.
@@ -167,7 +168,9 @@ class DropList {
             valueProp: o.valueProp,
             renderItem: o.renderItem,
             unrenderItem: o.unrenderItem,
-            on: o.on,
+            on: o.on || null,
+            silenceEvents: true,
+            mitt: mitt(),
 
             focusItemIndex: -1,
             focusItemEl: null,
@@ -306,6 +309,8 @@ class DropList {
         this._hookTouchEvents();
         this._hookFocusEvents();
         this._hookKeyEvents();
+
+        this.silenceEvents = false;
     }
 
     destroy() {
@@ -1130,7 +1135,7 @@ class DropList {
                 el.classList.add(`${p.baseClassName}__is-hiding`);
 
                 // support for hide transition in css
-                const maxTransitionDuration = parseCssTransition(getComputedStyle(p.el).transition)
+                const maxTransitionDuration = parseTransition(getComputedStyle(p.el).transition)
                     .reduce((p, v) => Math.max(p, v.delay + v.duration), 0);
 
                 if (maxTransitionDuration > 0) {
@@ -1212,7 +1217,7 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
-                this._trigger('itemfocus', { value: itemElement[p.valueProp], item: itemElement[ItemSymbol] });
+                this._trigger('itemfocus', { value: itemElement[p.valueProp], item: itemElement[ItemSymbol], event: null });
             }
         }
 
@@ -1316,6 +1321,58 @@ class DropList {
         return this;
     }
 
+    /**
+     * Register an event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {DropList}
+     */
+    on(/**string|'*'*/event, /**Function?*/handler) {
+        this._p.mitt.on(event, handler);
+        return this;
+    }
+
+    /**
+     * Register a one time event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {DropList}
+     */
+    once(/**string|'*'*/event, /**Function?*/handler) {
+        let wrapped = (value) => {
+            this._p.mitt.off(event, wrapped);
+            handler(value);
+        };
+        this._p.mitt.on(event, wrapped);
+        return this;
+    }
+
+    /**
+     * Remove an `handler` for `event`, all events for `event`, or all events completely.
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {DropList}
+     */
+    off(/**(string|'*')?*/event, /**Function?*/handler) {
+        if (!event && !event) {
+            this._p.mitt.all.clear();
+        } else {
+            this._p.mitt.off(event, handler);
+        }
+        return this;
+    }
+
+    /**
+     * Emit an event
+     * @param {string} event
+     * @param {any} value
+     * @returns {DropList}
+     */
+    emit(/**string|'*'*/event, /**any?*/value) {
+        this._p.mitt.emit(event, value);
+        return this;
+    }
+
     _getItemIndex(item) {
         const p = this._p, labelProp = p.labelProp, valueProp = p.valueProp;
 
@@ -1358,6 +1415,7 @@ class DropList {
         const p = this._p;
         if (p.on)
             p.on(event, ...(data === undefined ? [] : [data]));
+        p.mitt.emit(event, data);
     }
 
     _itemUpAction(event, itemEl) {
@@ -1661,7 +1719,7 @@ class DropList {
                 p.focusItemIndex = itemIndex;
 
                 const item = p.items[itemIndex];
-                this._trigger('itemfocus', { value: item[p.valueProp], item: item });
+                this._trigger('itemfocus', { value: item[p.valueProp], item: item, event: event });
             }
         } else {
             // This could happen if trying to focus a grouped item

package/lib/SelectBox.js

@@ -34,6 +34,7 @@ import {
     VALUE_TAB,
     VALUE_UP,
 } from 'keycode-js';
+import mitt from 'mitt';
 
 const ItemSymbol = Symbol('item');
 const DestroyedSymbol = Symbol('destroyed');
@@ -100,7 +101,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 +115,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 +144,9 @@ const defaultOptions = {
     maxMultiItems: null,
     multiItemsRestLabelProvider: null,
     items: [],
+    selectedValues: undefined,
+    value: undefined,
+    isLoadingMode: false,
 };
 
 /**
@@ -237,12 +244,14 @@ class SelectBox {
             renderNoResultsItem: o.renderNoResultsItem,
             unrenderNoResultsItem: o.unrenderNoResultsItem,
             filterFn: o.filterFn,
-            on: o.on,
+            on: o.on || null,
+            silenceEvents: true,
+            mitt: mitt(),
             additionalClasses: o.additionalClasses,
 
-            isLoadingMode: false,
+            isLoadingMode: !!o.isLoadingMode,
 
-            items: o.items || [],
+            items: [],
             filteredItems: null,
             itemsChanged: true,
 
@@ -336,10 +345,18 @@ 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);
+        }
 
         this._scheduleSync();
 
+        this.silenceEvents = false;
+
         return this;
     }
 
@@ -1304,13 +1321,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 +1350,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.
@@ -1334,6 +1366,58 @@ class SelectBox {
 		return this;
 	}
 
+    /**
+     * Register an event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {SelectBox}
+     */
+    on(/**string|'*'*/event, /**Function?*/handler) {
+        this._p.mitt.on(event, handler);
+        return this;
+    }
+
+    /**
+     * Register a one time event handler
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {SelectBox}
+     */
+    once(/**string|'*'*/event, /**Function?*/handler) {
+        let wrapped = (value) => {
+            this._p.mitt.off(event, wrapped);
+            handler(value);
+        };
+        this._p.mitt.on(event, wrapped);
+        return this;
+    }
+
+    /**
+     * Remove an `handler` for `event`, all events for `event`, or all events completely.
+     * @param {(string|'*')?} event
+     * @param {function(any)} handler
+     * @returns {SelectBox}
+     */
+    off(/**(string|'*')?*/event, /**Function?*/handler) {
+        if (!event && !event) {
+            this._p.mitt.all.clear();
+        } else {
+            this._p.mitt.off(event, handler);
+        }
+        return this;
+    }
+
+    /**
+     * Emit an event
+     * @param {string} event
+     * @param {any} value
+     * @returns {SelectBox}
+     */
+    emit(/**string|'*'*/event, /**any?*/value) {
+        this._p.mitt.emit(event, value);
+        return this;
+    }
+
     /** @private */
     _renderBase() {
         const p = this._p;
@@ -2508,6 +2592,7 @@ class SelectBox {
         const p = this._p;
         if (p.on)
             p.on(event, ...(data === undefined ? [] : [data]));
+        p.mitt.emit(event, data);
     }
 
     /**
@@ -3058,6 +3143,10 @@ class SelectBox {
 
                 if (group === stickyGroup) {
                     checkedGroups.push(stickyGroup);
+                    let sgi = uncheckedGroups.indexOf(stickyGroup);
+                    if (sgi !== -1) {
+                        uncheckedGroups.splice(sgi, 1);
+                    }
                     continue;
                 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.29",
+  "version": "1.0.33",
   "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,26 +31,26 @@
   "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.8",
+    "@babel/preset-env": "^7.15.8",
+    "@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",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "core-js": "^3.18.2",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.15.1",
+    "eslint-plugin-vue": "^7.19.1",
     "fs-extra": "^10.0.0",
-    "husky": "^7.0.1",
+    "husky": "^7.0.2",
     "pinst": "^2.1.6",
-    "rollup": "^2.55.1",
+    "rollup": "^2.58.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.37.2"
+    "sass": "^1.42.1"
   },
   "dependencies": {
-    "@danielgindi/dom-utils": "^1.0.3",
+    "@danielgindi/dom-utils": "^1.0.4",
     "@danielgindi/virtual-list-helper": "^1.0.3",
     "keycode-js": "^3.1.0",
-    "parse-css-transition": "^0.1.2"
+    "mitt": "^3.0.0"
   }
 }

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);