features updated

sa-si-dev · Aug 15, 2021 · 2ed6fd8 · 2ed6fd8
1 parent e214f93
commit 2ed6fd8
Show file tree

Hide file tree

Showing 8 changed files with 406 additions and 309 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "virtual-select-plugin",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "A javascript plugin for dropdown with virtual scroll",
   "scripts": {
     "start": "webpack --mode development --watch",
@@ -29,6 +29,7 @@
     "filemanager-webpack-plugin": "^3.1.1",
     "mini-css-extract-plugin": "^0.11.3",
     "node-sass": "^4.14.1",
+    "popover-plugin": "1.0.x",
     "sass-loader": "^10.1.1",
     "webpack": "^5.36.2",
     "webpack-cli": "^4.6.0"

diff --git a/src/sass/partials/variable.scss b/src/sass/partials/variable.scss
@@ -14,7 +14,6 @@ $fontFamily: sans-serif;
 $fontSize: 14px;
 $fontSizeSmall: 13px;
 $dropboxHeight: 250px;
-$dropboxMargin: 4px;
 $searchHeight: 40px;
 $checkboxFullWidth: 25px;
 $newOptionIconWidth: 30px;
@@ -27,11 +26,9 @@ $clearButtonWidth: 24px;
 $clearIconSize: 12px;
 $dropboxCloseButtonWidth: 40px;
 $dropboxCloseButtonOffset: 8px;
-$transitionDuration: 250ms;
 $transitionDistance: 30px;
 $optionsLoaderSize: 40px;
 
 $zIndex: 1;
 
-$boxShadow1: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-$boxShadow2: 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);
+$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);
diff --git a/src/sass/partials/virtual-select.scss b/src/sass/partials/virtual-select.scss
@@ -29,6 +29,12 @@ body.vscomp-popup-active {
   }
 }
 
+.vscomp-dropbox-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .vscomp-toggle-button {
   display: flex;
   position: relative;
@@ -149,19 +155,13 @@ body.vscomp-popup-active {
 }
 
 .vscomp-dropbox-container {
-  position: absolute;
-  top: calc(100% + #{$dropboxMargin});
-  left: 0;
   width: 100%;
   z-index: $zIndex + 1;
 }
 
 .vscomp-dropbox {
-  opacity: 0;
-  box-shadow: $boxShadow1;
+  width: 100%;
   background-color: $primaryBg;
-  @include prefix(transition-duration, $transitionDuration);
-  @include prefix(transform, translate3d(0, -$transitionDistance, 0));
 }
 
 .vscomp-options-container {
@@ -314,6 +314,18 @@ body.vscomp-popup-active {
   }
 }
 
+.vscomp-ele {
+  &[disabled] {
+    cursor: not-allowed;
+    user-select: none;
+
+    .vscomp-wrapper {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+  }
+}
+
 .vscomp-wrapper {
   .checkbox-icon {
     display: inline-flex;
@@ -336,24 +348,6 @@ body.vscomp-popup-active {
     }
   }
 
-  &.position-top {
-    .vscomp-dropbox-container {
-      top: auto;
-      bottom: calc(100% + #{$dropboxMargin});
-    }
-
-    .vscomp-dropbox {
-      @include prefix(transform, translate3d(0, $transitionDistance, 0));
-    }
-  }
-
-  &.position-left {
-    .vscomp-dropbox-container {
-      right: 0;
-      left: auto;
-    }
-  }
-
   &.show-as-popup {
     .vscomp-dropbox-container {
       display: flex;
@@ -365,6 +359,7 @@ body.vscomp-popup-active {
       width: 100vw;
       height: 100vh;
       overflow: auto;
+      opacity: 1;
       background-color: $overlayBg;
     }
 
@@ -427,19 +422,13 @@ body.vscomp-popup-active {
   &.focused,
   &:focus {
     .vscomp-toggle-button {
-      box-shadow: $boxShadow2;
-    }
-  }
-
-  &.opened {
-    .vscomp-dropbox {
-      opacity: 1;
-      @include prefix(transform, translate3d(0, 0, 0));
+      box-shadow: $boxShadow1;
     }
   }
 
   &.closed {
-    .vscomp-dropbox-container {
+    .vscomp-dropbox-container,
+    &.vscomp-dropbox-wrapper {
       display: none;
     }
   }
@@ -519,7 +508,7 @@ body.vscomp-popup-active {
     &.focused,
     &:focus,
     &:hover {
-      box-shadow: $boxShadow2;
+      box-shadow: $boxShadow1;
     }
   }
 
@@ -535,8 +524,7 @@ body.vscomp-popup-active {
 
   &.show-value-as-tags {
     .vscomp-toggle-button {
-      padding-top: 4px;
-      padding-bottom: 0;
+      padding: 4px 22px 0 10px;
     }
 
     .vscomp-value {
@@ -556,10 +544,14 @@ body.vscomp-popup-active {
       max-width: 100%;
       border: 1px solid #ddd;
       margin: 0 4px 4px 0;
-      padding: 3px 3px 3px 8px;
+      padding: 2px 3px 2px 8px;
       font-size: 12px;
       line-height: 16px;
       border-radius: 20px;
+
+      &.more-value-count {
+        padding-right: 8px;
+      }
     }
 
     .vscomp-value-tag-content {
@@ -589,10 +581,24 @@ body.vscomp-popup-active {
       top: 5px;
     }
 
+    &.has-value {
+      .vscomp-arrow {
+        display: none;
+      }
+
+      .vscomp-clear-button {
+        right: 2px;
+      }
+    }
+
     &:not(.has-value) {
+      .vscomp-toggle-button {
+        padding-bottom: 2px;
+      }
+
       .vscomp-value {
         align-items: center;
-        padding-bottom: 4px;
+        padding-bottom: 3px;
       }
     }
   }

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -1,3 +1,5 @@
+@import '../../node_modules/popover-plugin/dist/popover.min.css';
+
 @import './partials/variable.scss';
 @import './partials/mixins.scss';
 @import './partials/animations.scss';

diff --git a/src/utils/dom-utils.js b/src/utils/dom-utils.js
@@ -59,27 +59,6 @@ export class DomUtils {
     return $ele.scrollWidth > $ele.offsetWidth;
   }
 
-  static getMoreVisibleSides($ele) {
-    if (!$ele) {
-      return {};
-    }
-
-    let box = $ele.getBoundingClientRect();
-    let availableWidth = window.innerWidth;
-    let availableHeight = window.innerHeight;
-    let leftArea = box.left;
-    let topArea = box.top;
-    let rightArea = availableWidth - leftArea - box.width;
-    let bottomArea = availableHeight - topArea - box.height;
-    let horizontal = leftArea > rightArea ? 'left' : 'right';
-    let vertical = topArea > bottomArea ? 'top' : 'bottom';
-
-    return {
-      horizontal,
-      vertical,
-    };
-  }
-
   static getData($ele, name, type) {
     if (!$ele) {
       return;
@@ -108,6 +87,14 @@ export class DomUtils {
     $ele.dataset[name] = value;
   }
 
+  static setAttr($ele, name, value) {
+    if (!$ele) {
+      return;
+    }
+
+    $ele.setAttribute(name, value);
+  }
+
   static setStyle($ele, name, value) {
     if (!$ele) {
       return;