@danielgindi/selectbox 1.0.58 → 1.0.61

package/lib/DropList.js

@@ -144,7 +144,7 @@ class DropList {
      * @param {DropList.Options} options
      */
     constructor(options) {
-        const o = {...defaultOptions};
+        const o = { ...defaultOptions };
 
         for (let [key, value] of Object.entries(/**@type Object*/options))
             if (value !== undefined)
@@ -295,8 +295,8 @@ class DropList {
                 try {
                     fn(el[ItemSymbol][ItemSymbol], el);
                 } catch (err) {
-                    console.error(err);
-                } // eslint-disable-line no-console
+                    console.error(err); // eslint-disable-line no-console
+                }
                 delete el[ItemSymbol];
 
                 if (p.focusItemEl === el)
@@ -416,8 +416,8 @@ class DropList {
                 try {
                     fn(el[ItemSymbol][ItemSymbol], el);
                 } catch (err) {
-                    console.error(err);
-                } // eslint-disable-line no-console
+                    console.error(err); // eslint-disable-line no-console
+                }
                 delete el[ItemSymbol];
 
                 if (p.focusItemEl === el)
@@ -481,7 +481,7 @@ class DropList {
         if (!item)
             return;
 
-        this._trigger('itemblur', {value: item.value, item: item[ItemSymbol] ?? item});
+        this._trigger('itemblur', { value: item.value, item: item[ItemSymbol] ?? item });
     }
 
     nextPage(event) {
@@ -1796,7 +1796,7 @@ class DropList {
         p.focusItemIndex = itemIndex;
 
         const item = p.items[itemIndex];
-        this._trigger('itemfocus', {value: item.value, item: item[ItemSymbol] ?? item, event: event, el: focusItemEl});
+        this._trigger('itemfocus', { value: item.value, item: item[ItemSymbol] ?? item, event: event, el: focusItemEl });
     }
 
     _delayBlurItemOnBlur() {
@@ -2002,7 +2002,7 @@ class DropList {
                 this._trigger('groupcheck', {
                     value: item.value,
                     item: item[ItemSymbol] ?? item,
-                    affectedItems: affectedItems
+                    affectedItems: affectedItems,
                 });
             } else if (p.groupCount > 0) {
                 items = p.items;
@@ -2160,7 +2160,7 @@ class DropList {
             if (p.multi) {
                 if (!item._nocheck) {
                     itemEl.insertBefore(
-                        createElement('span', {class: 'checkbox'}),
+                        createElement('span', { class: 'checkbox' }),
                         itemEl.firstChild,
                     );
                 }

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.58",
+  "version": "1.0.61",
   "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

@@ -235,7 +235,10 @@ export default {
             if (event === 'select' ||
                 event === 'check' && !event.isCheckingGroup ||
                 event === 'groupcheck') {
-                this.$emit('input', event === 'select' ? data.value : this._list.getCheckedValues(false));
+                this.$emit('input',
+                    (event === 'select' && !this.multi)
+                        ? data.value
+                        : this._list.getCheckedValues(false));
             }
 
             if (event === 'hide') {