feat(common): upgrade multiple-select-vanilla to v2 (#1401)

* feat(common): upgrade `multiple-select-vanilla` to v2
ghiscoding · Feb 22, 2024 · d6bb1d7 · d6bb1d7
1 parent fe2dbc3
commit d6bb1d7
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 8 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json
@@ -29,7 +29,7 @@
     "fetch-jsonp": "^1.3.0",
     "flatpickr": "^4.6.13",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^1.2.5",
+    "multiple-select-vanilla": "^2.0.1",
     "rxjs": "^7.8.1",
     "whatwg-fetch": "^3.6.20"
   },

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -83,7 +83,7 @@
     "excel-builder-vanilla": "3.0.1",
     "flatpickr": "^4.6.13",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^1.2.5",
+    "multiple-select-vanilla": "^2.0.1",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12"
   },

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -754,6 +754,7 @@ $slick-multiselect-icon-radio-width:                        $slick-multiselect-i
 $slick-multiselect-icon-search-margin-right:                8px !default;
 $slick-multiselect-item-height:                             26px !default;
 $slick-multiselect-item-border:                             1px solid transparent !default;
+$slick-multiselect-item-hover-bg-color:                     transparent !default;
 $slick-multiselect-item-hover-border:                       1px solid #d5d5d5 !default;
 $slick-multiselect-item-line-height:                        calc(#{$slick-multiselect-icon-font-size} + 2px) !default;
 $slick-multiselect-item-padding:                            2px 4px !default;
@@ -772,6 +773,8 @@ $slick-multiselect-ok-button-text-hover-color:              darken($slick-primar
 $slick-multiselect-ok-button-height:                        26px !default;
 $slick-multiselect-ok-button-width:                         100% !default;
 $slick-multiselect-ok-button-text-align:                    center !default;
+$slick-multiselect-option-highlight-bg-color:               rgba(#3a3a3a, 0.01) !default;
+$slick-multiselect-option-highlight-border:                 1px solid #c9c9c9 !default;
 $slick-multiselect-select-all-border-bottom:                1px solid #ddd !default;
 $slick-multiselect-select-all-label-border:                 $slick-multiselect-item-border !default;
 $slick-multiselect-select-all-label-hover-border:           $slick-multiselect-item-hover-border !default;
@@ -788,12 +791,14 @@ $ms-drop-list-padding:                                      $slick-multiselect-d
 $ms-drop-list-item-align-items:                             center;
 $ms-drop-list-item-display:                                 flex;
 $ms-drop-list-item-padding:                                 $slick-multiselect-item-padding;
+$ms-drop-hide-radio-hover-bgcolor:                          $slick-multiselect-item-hover-bg-color;
 $ms-drop-hide-radio-selected-color:                         unset;
 $ms-drop-hide-radio-selected-bgcolor:                       unset;
 $ms-label-padding:                                          $slick-multiselect-item-padding;
 $ms-ok-button-bg-hover-color:                               $slick-multiselect-ok-button-bg-hover-color;
 $ms-ok-button-text-color:                                   $slick-multiselect-ok-button-text-color;
 $ms-ok-button-text-hover-color:                             $slick-multiselect-ok-button-text-hover-color;
+$ms-option-highlight-bg-color:                                       $slick-multiselect-option-highlight-bg-color;
 $ms-select-all-label-hover-border:                          $slick-multiselect-select-all-label-hover-border;
 $ms-select-all-label-padding:                               $slick-multiselect-select-all-padding;
 $ms-select-all-label-span-padding:                          $slick-multiselect-select-all-label-padding;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -708,6 +708,10 @@ li.hidden {
       border: var(--slick-multiselect-item-hover-border, $slick-multiselect-item-hover-border);
       background-color: var(--slick-multiselect-checkbox-hover-bg-color, $slick-multiselect-checkbox-hover-bg-color);
     }
+    &.highlighted {
+      border: var(--slick-multiselect-option-highlight-border, $slick-multiselect-option-highlight-border);
+      background-color: var(--slick-multiselect-option-highlight-bg-color, $slick-multiselect-option-highlight-bg-color);
+    }
   }
 
   label {
@@ -728,6 +732,10 @@ li.hidden {
     &:hover {
       background-color: var(--slick-multiselect-select-all-text-hover-color, $slick-multiselect-select-all-text-hover-color);
     }
+    &.highlighted label {
+      border: var(--slick-multiselect-option-highlight-border, $slick-multiselect-option-highlight-border);
+      background-color: var(--slick-multiselect-option-highlight-bg-color, $slick-multiselect-option-highlight-bg-color);
+    }
 
     label {
       display: inline-flex;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/jest-global-mocks.ts b/test/jest-global-mocks.ts
@@ -8,6 +8,8 @@ const mock = () => {
   };
 };
 
+window.HTMLElement.prototype.scrollIntoView = () => { };
+
 Object.defineProperty(window, 'localStorage', { value: mock() });
 Object.defineProperty(window, 'sessionStorage', { value: mock() });
 Object.defineProperty(window, 'getComputedStyle', {