bug fixes and new features

.eslintrc.json

@@ -20,6 +20,9 @@
 
   "rules": {
     "import/prefer-default-export": "off",
+    "quote-props": ["error", "consistent"],
+    "operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before" } }],
+    "radix": ["error", "as-needed"],
     "max-len": [
       "error",
       {
@@ -31,7 +34,6 @@
       {
         "ObjectPattern": { "multiline": true }
       }
-    ],
-    "operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before" } }]
+    ]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-select-plugin",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "A javascript plugin for dropdown with virtual scroll",
   "scripts": {
     "start": "webpack --mode development --watch",
@@ -41,6 +41,7 @@
     "stylelint": "^14.5.1",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "typescript": "^4.5.5",
+    "unminified-webpack-plugin": "^3.0.0",
     "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2"
   }

src/sass/partials/animations.scss

@@ -1,9 +1,3 @@
-@-webkit-keyframes vscomp-animation-spin {
-  to {
-    @include prefix(transform, rotateZ(360deg));
-  }
-}
-
 @keyframes vscomp-animation-spin {
   to {
     @include prefix(transform, rotateZ(360deg));

src/sass/partials/mixins.scss

@@ -4,19 +4,19 @@
 }
 
 @mixin checkbox-checked {
-  width: 50%;
-  border-color: $primaryColor;
+  @include prefix(transform, rotate(45deg) translate(1px, -4px));
+  border-color: $primary-color;
   border-left-color: transparent;
   border-top-color: transparent;
-  @include prefix(transform, rotate(45deg) translate(1px, -4px));
+  width: 50%;
 }
 
 @mixin checkbox-checked-rtl {
   @include prefix(transform, rotate(45deg) translate(-4px, 1px));
 }
 
 @mixin ellipse {
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }

src/sass/partials/rtl.scss

@@ -2,22 +2,22 @@
   direction: rtl;
 
   .vscomp-toggle-button {
-    padding: 7px 10px 7px $arrowWidth;
+    padding: 7px 10px 7px $arrow-width;
   }
 
   .vscomp-arrow {
-    right: auto;
     left: 0;
+    right: auto;
   }
 
   .vscomp-clear-button {
+    left: $arrow-width;
     right: auto !important;
-    left: $arrowWidth;
   }
 
   .checkbox-icon {
+    margin-left: $option-checkbox-margin;
     margin-right: 0;
-    margin-left: $optionCheckboxMargin;
 
     &.checked::after {
       @include checkbox-checked-rtl;
@@ -41,17 +41,17 @@
   }
 
   .vscomp-new-option-icon {
-    right: auto;
     left: 0;
+    right: auto;
 
     &::before {
-      border-left-color: $primaryColor;
+      border-left-color: $primary-color;
       border-right-color: transparent;
     }
 
     &::after {
-      right: auto;
       left: 1px;
+      right: auto;
     }
   }
 
@@ -65,13 +65,13 @@
 
   &.has-clear-button {
     .vscomp-toggle-button {
-      padding-left: #{$arrowWidth + $clearButtonWidth};
+      padding-left: #{$arrow-width + $clear-button-width};
     }
   }
 
   &.keep-always-open {
     .vscomp-toggle-button {
-      padding-left: $clearButtonWidth;
+      padding-left: $clear-button-width;
     }
 
     .vscomp-clear-button {

src/sass/partials/variable.scss

@@ -1,36 +1,35 @@
-$primaryColor: #512da8;
-$primaryBg: #fff;
-$fontColor: #333;
-$fontColorLight: #666;
-$errorColor: #b00020;
-$borderColor: #ddd;
-$focusColor: #ccc;
-$selectedColor: #eee;
-$arrowColor: #111;
-$checkboxColor: #888;
-$iconHoverColor: #333;
-$overlayBg: rgba(0, 0, 0, 0.5);
+$primary-color: #512da8;
+$primary-bg: #fff;
+$font-color: #333;
+$font-color-light: #666;
+$error-color: #b00020;
+$border-color: #ddd;
+$focus-color: #ccc;
+$selected-color: #eee;
+$arrow-color: #111;
+$checkbox-color: #888;
+$icon-hover-color: #333;
+$overlay-bg: rgba(0, 0, 0, 0.5);
 
-$fontFamily: sans-serif;
-$fontSize: 14px;
-$fontSizeSmall: 13px;
-$dropboxHeight: 250px;
-$searchHeight: 40px;
-$checkboxFullWidth: 25px;
-$newOptionIconWidth: 30px;
-$searchClearWidth: 30px;
-$valueTagClearWidth: 20px;
-$optionHeight: 40px;
-$arrowWidth: 30px;
-$arrowSize: 8px;
-$clearButtonWidth: 24px;
-$clearIconSize: 12px;
-$dropboxCloseButtonWidth: 40px;
-$dropboxCloseButtonOffset: 8px;
-$transitionDistance: 30px;
-$optionsLoaderSize: 40px;
-$optionCheckboxMargin: 10px;
+$font-family: sans-serif;
+$font-size: 14px;
+$font-size-small: 13px;
+$dropbox-height: 250px;
+$search-height: 40px;
+$checkbox-full-width: 25px;
+$new-option-icon-width: 30px;
+$search-clear-width: 30px;
+$value-tag-clear-width: 20px;
+$option-height: 40px;
+$arrow-width: 30px;
+$arrow-size: 8px;
+$clear-button-width: 24px;
+$clear-icon-size: 12px;
+$dropbox-close-button-width: 40px;
+$dropbox-close-button-offset: 8px;
+$options-loader-size: 40px;
+$option-checkbox-margin: 10px;
 
-$zIndex: 1;
+$z-index: 1;
 
-$boxShadow1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+$box-shadow1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);