@danielgindi/selectbox 1.0.49 → 1.0.52

package/lib/DropList.js

@@ -68,14 +68,14 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 /**
  * @typedef {Object} DropList.PositionOptions
- * @property {Element} [target] Target element to act as anchor
- * @property {{left: number, top: number}} [targetOffset=undefined] Override the offset of target. Automatically calculated if unspecified.
- * @property {number} [targetHeight=undefined] Override height of the target
- * @property {number} [targetWidth=undefined] Override width of the target
- * @property {DropList.PositionAnchor} [position=undefined]
- * @property {DropList.PositionAnchor} [anchor=undefined]
- * @property {boolean} [updateWidth=false] Should update the width of the menu according to target
- * @property {string} [targetRtl=undefined] Override for rtl mode of the target
+ * @property {Element?} [target] Target element to act as anchor
+ * @property {{left: number, top: number}?} [targetOffset] Override the offset of target. Automatically calculated if unspecified.
+ * @property {number?} [targetHeight] Override height of the target
+ * @property {number?} [targetWidth] Override width of the target
+ * @property {DropList.PositionAnchor?} [position]
+ * @property {DropList.PositionAnchor?} [anchor]
+ * @property {boolean|number?} [updateWidth=false] `true` to set width of the menu according to `target`'s width, or specify an arbitrary number.
+ * @property {string?} [targetRtl] Override for rtl mode of the target
  * @property {{x: number, y: number}} [offset=undefined] Extra rtl-aware offset to the target
  * */
 /** */
@@ -796,7 +796,7 @@ class DropList {
         }
 
         // Now set the width of the dropdown
-        if (positionOptions.updateWidth) {
+        if (positionOptions.updateWidth || typeof positionOptions.updateWidth === 'number') {
             this._updateWidth(positionOptions);
         }
 
@@ -2154,9 +2154,14 @@ class DropList {
         let targetWidth = 0;
 
         if (positionOptions) {
-            // Measure target
-            targetWidth = positionOptions.targetWidth;
-            if (targetWidth == null) {
+            if (typeof positionOptions.updateWidth === 'number') {
+                // Set from width specified
+                targetWidth = positionOptions.updateWidth;
+            } else if (positionOptions.targetWidth != null) {
+                // Set from simulated target width
+                targetWidth = positionOptions.updateWidth;
+            } else {
+                // Measure target
                 targetWidth = getElementWidth(positionOptions.target, true, true);
             }
         }

package/lib/SelectBox.js

@@ -1124,27 +1124,11 @@ class SelectBox {
      * @returns {SelectBox}
      */
     clear() {
-        const p = this._p;
-
-        let clearEvt = { cancel: false };
-        this._trigger('clear:before', clearEvt);
-        if (clearEvt.cancel)
+        if (!this._performClearWithEvent(true))
             return this;
 
-        p.selectedItems = [];
-        p.selectedValues = [];
-        p.selectionChanged = true;
-        p.resortBySelectionNeeded = true;
-
-        this._trigger('clear');
-
         if (this[DestroyedSymbol]) return this; // destroyed by event handler
 
-        this._updateListItems();
-
-        this._setInputText('');
-        this._scheduleSync('full');
-
         return this;
     }
 
@@ -1808,19 +1792,11 @@ class SelectBox {
                         const item = event.item;
                         const value = event.value;
 
-                        let selectEvt = { value: value, item: item, cancel: false };
-                        this._trigger('select:before', selectEvt);
-
-                        if (selectEvt.cancel)
+                        if (!this._performSelectWithEvent(item, value))
                             return;
 
                         if (this[DestroyedSymbol]) return; // destroyed by event handler
 
-                        this._setSelectedItems([item]);
-                        this._trigger('select', { value: value, item: item });
-
-                        if (this[DestroyedSymbol]) return; // destroyed by event handler
-
                         this.closeList();
 
                         if (p.blurOnSingleSelection === 'touch' && hasTouchCapability ||
@@ -2086,6 +2062,40 @@ class SelectBox {
             });
     }
 
+    _performSelectWithEvent(item, value) {
+        let cancellable = { value: value, item: item, cancel: false };
+        this._trigger('select:before', cancellable);
+
+        if (cancellable.cancel)
+            return false;
+
+        if (this[DestroyedSymbol]) return false; // destroyed by event handler
+
+        this._setSelectedItems([item]);
+        this._trigger('select', { value: value, item: item });
+
+        return true;
+    }
+
+    _performClearWithEvent(clearInput = false) {
+        let cancellable = { cancel: false };
+        this._trigger('clear:before', cancellable);
+
+        if (cancellable.cancel)
+            return false;
+
+        if (this[DestroyedSymbol]) return false; // destroyed by event handler
+
+        this._setSelectedItems([]);
+
+        if (clearInput)
+            this._setInputText('');
+
+        this._trigger('clear');
+
+        return true;
+    }
+
     _movePrev() {
         const p = this._p;
 
@@ -2099,7 +2109,13 @@ class SelectBox {
             let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) - 1 : (items.length - 1);
             if (nextIndex === -1 && !p.clearable)
                 nextIndex = items.length - 1;
-            this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
+
+            let item = nextIndex === -1 ? null : items[nextIndex];
+            if (item) {
+                this._performSelectWithEvent(item, item[p.valueProp]);
+            } else {
+                this._performClearWithEvent();
+            }
         }
     }
 
@@ -2116,7 +2132,13 @@ class SelectBox {
             let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) + 1 : 0;
             if (nextIndex === items.length)
                 nextIndex = p.clearable ? -1 : 0;
-            this.setSelectedItems(nextIndex === -1 ? [] : [items[nextIndex]]);
+
+            let item = nextIndex === -1 ? null : items[nextIndex];
+            if (item) {
+                this._performSelectWithEvent(item, item[p.valueProp]);
+            } else {
+                this._performClearWithEvent();
+            }
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.49",
+  "version": "1.0.52",
   "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,25 +31,25 @@
   "homepage": "https://github.com/danielgindi/selectbox#readme",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/runtime": "^7.16.7",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/runtime": "^7.17.2",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "core-js": "^3.20.3",
-    "eslint": "^8.7.0",
+    "core-js": "^3.21.1",
+    "eslint": "^8.10.0",
     "eslint-formatter-codeframe": "^7.32.1",
-    "eslint-plugin-vue": "^8.3.0",
-    "fs-extra": "^10.0.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "fs-extra": "^10.0.1",
     "husky": "^7.0.4",
-    "pinst": "^2.1.6",
-    "rollup": "^2.64.0",
+    "pinst": "^3.0.0",
+    "rollup": "^2.69.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.48.0"
+    "sass": "^1.49.9"
   },
   "dependencies": {
-    "@danielgindi/dom-utils": "^1.0.6",
+    "@danielgindi/dom-utils": "^1.0.7",
     "@danielgindi/virtual-list-helper": "^1.0.3",
     "fast-deep-equal": "^3.1.3",
     "keycode-js": "^3.1.0",

package/vue/SelectBox.vue

@@ -541,6 +541,11 @@
                     this._box.setListOptions(this.computedListOptions);
             },
 
+            filterFn() {
+                if (this._box)
+                    this._box.setFilterFn(this.filterFn);
+            },
+
             $scopedSlots() {
                 if (this._box)
                     this._box.setListOptions(this.computedListOptions);