@danielgindi/selectbox 1.0.57 → 1.0.60

package/lib/DropList.js

@@ -40,7 +40,8 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * @property {Element} [el] An element to attach to, instead of creating a new one
  * @property {string} [baseClassName='droplist'] class name for the menu root element
  * @property {string|string[]} [additionalClasses]
- * @property {number} [itemBlurDelay=300] How long to wait before deciding to blur the focused item?
+ * @property {boolean} [autoItemBlur=true] Should we automatically blur the focused item when the droplist loses focus?
+ * @property {number} [autoItemBlurDelay=300] How long to wait before deciding to blur the focused item (when the droplist loses focus)?
  * @property {boolean} [capturesFocus=true] Should this DropList be added to the TAB-key stack?
  * @property {boolean} [multi=false] Does this DropList show checkboxes for multiple item selection?
  * @property {function} [keyDownHandler=null] An alternative "keydown" event handler. Return true to prevent default behaviour.
@@ -100,7 +101,8 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 let defaultOptions = {
     baseClassName: 'droplist',
 
-    itemBlurDelay: 300,
+    autoItemBlur: true,
+    autoItemBlurDelay: 300,
     capturesFocus: true,
     multi: false,
     keyDownHandler: null,
@@ -123,9 +125,9 @@ let defaultOptions = {
 Emits the following events:
 ---------------------------
 
-'itemfocus' {value, item, event}: item gained focus.
+'itemfocus' {value, item, event?, el}: item gained focus.
 'itemblur' {value, item}: item lost focus.
-'select' {value, item}: item was selected (in single mode).
+'select' {value, item, event?, el}: item was selected (in single mode).
 'show:before': the drop list will show.
 'show': the drop list has been shown.
 'hide:before': the drop list will hide.
@@ -154,7 +156,8 @@ class DropList {
 
             baseClassName: o.baseClassName,
             additionalClasses: o.additionalClasses,
-            itemBlurDelay: o.itemBlurDelay,
+            autoItemBlur: o.autoItemBlur,
+            autoItemBlurDelay: o.autoItemBlurDelay,
             capturesFocus: o.capturesFocus,
             multi: o.multi,
             keyDownHandler: o.keyDownHandler,
@@ -291,7 +294,9 @@ class DropList {
             p.virtualListHelper.setOnItemUnrender(el => {
                 try {
                     fn(el[ItemSymbol][ItemSymbol], el);
-                } catch (err) { console.error(err); } // eslint-disable-line no-console
+                } catch (err) {
+                    console.error(err); // eslint-disable-line no-console
+                }
                 delete el[ItemSymbol];
 
                 if (p.focusItemEl === el)
@@ -410,7 +415,9 @@ class DropList {
             p.virtualListHelper.setOnItemUnrender(el => {
                 try {
                     fn(el[ItemSymbol][ItemSymbol], el);
-                } catch (err) { console.error(err); } // eslint-disable-line no-console
+                } catch (err) {
+                    console.error(err); // eslint-disable-line no-console
+                }
                 delete el[ItemSymbol];
 
                 if (p.focusItemEl === el)
@@ -531,6 +538,7 @@ class DropList {
             value: item ? item.value : undefined,
             item: item[ItemSymbol] ?? item,
             event: event,
+            el: p.focusItemEl,
         });
 
         return true;
@@ -940,8 +948,8 @@ class DropList {
 
         if (p.autoFlipDirection) {
             if ((position.specX === 'right' &&
-                viewCss.left < minX &&
-                (Math.max(viewCss.left, minX) + viewSize.width - targetBox.left) / targetBox.width > 0.5) ||
+                    viewCss.left < minX &&
+                    (Math.max(viewCss.left, minX) + viewSize.width - targetBox.left) / targetBox.width > 0.5) ||
                 (position.specX === 'left' &&
                     viewCss.left > maxX &&
                     (Math.min(viewCss.left, maxX) - targetBox.left) / targetBox.width < 0.5)) {
@@ -1125,7 +1133,7 @@ class DropList {
                 // Detect mouse tap outside of the droplist, to blur the focused item
                 p.sink.add(document, 'mousedown', p.onDocumentMouseDown = (event) => {
                     if (!p.el.contains(event.target))
-                        this._delayBlur();
+                        this._delayBlurItemOnBlur();
                 });
             }
         });
@@ -1274,7 +1282,12 @@ class DropList {
                 itemElement.classList.add(`${p.baseClassName}__item_focus`);
                 p.focusItemEl = itemElement;
 
-                this._trigger('itemfocus', { value: itemElement.value, item: itemElement[ItemSymbol], event: null });
+                this._trigger('itemfocus', {
+                    value: itemElement.value,
+                    item: itemElement[ItemSymbol],
+                    event: null,
+                    el: itemElement,
+                });
             }
         }
 
@@ -1549,7 +1562,9 @@ class DropList {
 
             // Track scrolling
             let didScroll = false;
-            let onScroll = () => { didScroll = true; };
+            let onScroll = () => {
+                didScroll = true;
+            };
             let onTouchCancel = () => {
                 currentTouchId = null;
                 p.sink.remove(null, '.dropdown_touchextra');
@@ -1598,7 +1613,7 @@ class DropList {
                     if (this[DestroyedSymbol]) return;
 
                     if (!p.el.contains(document.activeElement)) {
-                        this._delayBlur();
+                        this._delayBlurItemOnBlur();
                     }
                 });
             });
@@ -1781,21 +1796,24 @@ class DropList {
         p.focusItemIndex = itemIndex;
 
         const item = p.items[itemIndex];
-        this._trigger('itemfocus', { value: item.value, item: item[ItemSymbol] ?? item, event: event });
+        this._trigger('itemfocus', { value: item.value, item: item[ItemSymbol] ?? item, event: event, el: focusItemEl });
     }
 
-    _delayBlur() {
+    _delayBlurItemOnBlur() {
         if (this[DestroyedSymbol])
             return;
 
         const p = this._p;
 
+        if (!p.autoItemBlur)
+            return;
+
         clearTimeout(p.blurTimer);
 
         p.blurTimer = setTimeout(() => {
             if (this[DestroyedSymbol]) return;
             this.blurFocusedItem();
-        }, p.itemBlurDelay);
+        }, p.autoItemBlurDelay);
     }
 
     _move(direction, event) {
@@ -1981,7 +1999,11 @@ class DropList {
                 }
 
                 // Fire event
-                this._trigger('groupcheck', { value: item.value, item: item[ItemSymbol] ?? item, affectedItems: affectedItems });
+                this._trigger('groupcheck', {
+                    value: item.value,
+                    item: item[ItemSymbol] ?? item,
+                    affectedItems: affectedItems,
+                });
             } else if (p.groupCount > 0) {
                 items = p.items;
                 itemIndex = items.indexOf(item);

package/lib/SelectBox.js

@@ -2402,7 +2402,9 @@ class SelectBox {
         if (p.unrenderSingleItem && p.singleWrapper.childNodes.length > 0) {
             try {
                 p.unrenderSingleItem(p.singleWrapper[ItemSymbol], p.singleWrapper);
-            } catch (err) { console.error(err); } // eslint-disable-line no-console
+            } catch (err) {
+                console.error(err); // eslint-disable-line no-console
+            }
         }
 
         delete p.singleWrapper[ItemSymbol];
@@ -2427,7 +2429,9 @@ class SelectBox {
             if (unrender && itemEl.childNodes.length > 0) {
                 try {
                     unrender(item, itemEl);
-                } catch (err) { console.error(err); } // eslint-disable-line no-console
+                } catch (err) {
+                    console.error(err); // eslint-disable-line no-console
+                }
             }
             remove(itemEl);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "1.0.57",
+  "version": "1.0.60",
   "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/scss/selectbox.scss

@@ -176,6 +176,8 @@ $spinner-transition-duration: .15s;
 .selectbox__open_indicator {
     position: absolute;
     right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
     z-index: 2;
     font-size: 1em;
     width: 1em;
@@ -188,11 +190,11 @@ $spinner-transition-duration: .15s;
     &::before {
         border-style: solid;
         border-color: #9d9d9d;
-        border-width: 0.25em 0.25em 0 0;
+        border-width: 0.2em 0.2em 0 0;
         content: '';
         display: inline-block;
         height: 0.45em;
-        left: 0.15em;
+        left: 0.2em;
         position: relative;
         top: -0.18em;
         transform: rotate(135deg);
@@ -213,19 +215,13 @@ $spinner-transition-duration: .15s;
         right: auto;
         left: 4px;
     }
-
-    .selectbox__multi & {
-        top: 11px;
-    }
-
-    .selectbox__single & {
-        top: 8px;
-    }
 }
 
 .selectbox__clear {
     position: absolute;
     right: 2px;
+    top: 50%;
+    transform: translateY(-50%);
     z-index: 2;
 
     > button {
@@ -257,14 +253,6 @@ $spinner-transition-duration: .15s;
         left: 2px;
     }
 
-    .selectbox__multi & {
-        top: 5px;
-    }
-
-    .selectbox__single & {
-        top: 4px;
-    }
-
     .selectbox__has_open_indicator.selectbox__has_clear & {
         right: 14px;
 
@@ -278,34 +266,33 @@ $spinner-transition-duration: .15s;
 .selectbox__spinner {
     position: absolute;
     right: 2px;
+    top: 50%;
+    transform: translateY(-50%);
     z-index: 2;
-    font-size: 1em;
-    width: 1em;
-    height: 1em;
-    text-indent: -9999em;
-    overflow: hidden;
-    border-top: 0.3em solid rgba(100, 100, 100, 0.1);
-    border-right: 0.3em solid rgba(100, 100, 100, 0.1);
-    border-bottom: 0.3em solid rgba(100, 100, 100, 0.1);
-    border-left: 0.3em solid rgba(60, 60, 60, 0.45);
-    border-radius: 50%;
-    transform: translateZ(0);
-    animation: selectbox__spinner_anim 1.1s infinite linear;
-    transition: opacity .1s;
+
+    &::before {
+        content: '';
+        display: block;
+        font-size: 1em;
+        width: 1em;
+        height: 1em;
+        text-indent: -9999em;
+        overflow: hidden;
+        border-top: 0.3em solid rgba(100, 100, 100, 0.1);
+        border-right: 0.3em solid rgba(100, 100, 100, 0.1);
+        border-bottom: 0.3em solid rgba(100, 100, 100, 0.1);
+        border-left: 0.3em solid rgba(60, 60, 60, 0.45);
+        border-radius: 50%;
+        transform: translateZ(0);
+        animation: selectbox__spinner_anim 1.1s infinite linear;
+        transition: opacity .1s;
+    }
 
     [dir=rtl] & {
         right: auto;
         left: 2px;
     }
 
-    .selectbox__multi & {
-        top: 4px;
-    }
-
-    .selectbox__single & {
-        top: 3px;
-    }
-
     .selectbox__has_spinner.selectbox__has_open_indicator & {
         right: 22px;
 

package/vue/DropList.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-show="false" />
+    <span v-show="false" />
 </template>
 
 <script>
@@ -7,6 +7,8 @@ import DropList from '../lib/DropList';
 import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
 import { createSlotBasedRenderFunc, createSlotBasedUnrenderFunc } from './utils/slots.js';
 
+const AllListEvents = ['itemfocus', 'itemblur', 'select', 'show:before', 'show', 'hide:before', 'hide', 'hide:after', 'check', 'groupcheck'];
+
 export default {
     props: {
         baseClassName: {
@@ -19,6 +21,14 @@ export default {
             type: Boolean,
             default: true,
         },
+        autoItemBlur: {
+            type: Boolean,
+            default: true,
+        },
+        autoItemBlurDelay: {
+            type: Number,
+            default: 300,
+        },
         capturesFocus: {
             type: Boolean,
             default: true,
@@ -105,7 +115,7 @@ export default {
                 opts.additionalClasses = this.additionalClassesList;
             }
 
-            for (let key of ['capturesFocus', 'multi',
+            for (let key of ['autoItemBlur', 'capturesFocus', 'multi',
                 'autoCheckGroupChildren', 'useExactTargetWidth', 'constrainToWindow',
                 'autoFlipDirection', 'estimateWidth']) {
                 if (typeof this[key] === 'boolean') {
@@ -113,7 +123,7 @@ export default {
                 }
             }
 
-            for (let key of ['estimatedItemHeight', 'virtualMinItems']) {
+            for (let key of ['autoItemBlurDelay', 'estimatedItemHeight', 'virtualMinItems']) {
                 if (typeof this[key] === 'number') {
                     opts[key] = this[key];
                 }
@@ -214,6 +224,8 @@ export default {
 
             if (this._list?.el) {
                 for (let [key, fn] of Object.entries(this.$listeners)) {
+                    if (AllListEvents.includes(key))
+                        continue;
                     this.sink.add(this._list.el, key + '.vue', fn);
                 }
             }
@@ -261,6 +273,7 @@ export default {
 
             let list = new DropList(this.computedOptions);
             this.el = list.el;
+            this._list = list;
             this._rebindVueListeners();
 
             if (Array.isArray(this.items))
@@ -272,8 +285,6 @@ export default {
                 list.setSingleSelectedItemByValue(this.value === null ? undefined : this.value);
             }
 
-            this._list = list;
-
             list.show(this.positionOptions);
 
             this._setupAutoRelayout();