Merge pull request #674 from mazeeblanke/Update-vueselect-dependency-…

…to-v3 [3.x] Update vueselect dependency to v3
area17 · Apr 5, 2022 · 4b9fdaf · 4b9fdaf
2 parents 8c3dc56 + 02c1660
commit 4b9fdaf
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -736,6 +736,7 @@ It is now possible to automatically save and retrieve multiple form fields in a
 [`5564e488`](https://github.com/area17/twill/commit/5564e48801d97e28c350c2250b0b3f36efa54444)/[`#452`](https://github.com/area17/twill/pull/452)/[`657e83cf`](https://github.com/area17/twill/commit/657e83cf7191f44a81a6051c04ff9a9c62cac8e1)/[`#501`](https://github.com/area17/twill/pull/501)/[`b48793af`](https://github.com/area17/twill/commit/b48793af5ea9ef8e3e54761f58402786a54881ba)/[`#541`](https://github.com/area17/twill/pull/541)/[`74926425`](https://github.com/area17/twill/commit/7492642564e65e84646e3d9f930227bdc2400540)/[`6437a073`](https://github.com/area17/twill/commit/6437a0732ff1983196ab716395d18677cab3bc45)/[`84176e44`](https://github.com/area17/twill/commit/84176e448e47d63339bf2ffa3ac9224f3ca5dc42)
 
 #### Azure uploads
+
 A new `endpoint_type` to support Azure storage of all uploads, exactly like when working with S3.
 
 [`#424`](https://github.com/area17/twill/pull/424)/[`2129c084`](https://github.com/area17/twill/commit/2129c084bd5cdf14a0617006d0332090f8f9af9c)/[`#443`](https://github.com/area17/twill/pull/443)/[`d81a5b94`](https://github.com/area17/twill/commit/d81a5b9439661a1c9449f3d25a6bc1946706788a)/[`b7a89f38`](https://github.com/area17/twill/commit/b7a89f3830a25e682a996e25176d10f6ac23059d)/[`4bf2e133`](https://github.com/area17/twill/commit/4bf2e133e9841b12f92f955ab0440fed0769f202)
@@ -813,6 +814,7 @@ You can also provide a custom  `block_single_layout`  per subdomain by creating
 >
 
 #### Tiptap WYSIWYG
+
 ![tiptap](https://twill.io/docs/changelogs_media/tables.png)
 In order to provide HTML tables support in the WYSIWYG form field, we've integrated the [Tiptap editor](https://tiptap.scrumpy.io/) with Twill. You can use it by using the new `type` option of the `wysiwyg` form field, with the `tiptap` value. You can then enable the `table` button in your `toolbarOptions`.
 

diff --git a/frontend/js/components/VSelect.vue b/frontend/js/components/VSelect.vue
@@ -13,14 +13,14 @@
               :searchable="searchable"
               :clearSearchOnSelect="clearSearchOnSelect"
               :label="optionsLabel"
-              :on-search="getOptions"
               :taggable="taggable"
               :pushTags="pushTags"
               :transition="transition"
               :requiredValue="required"
               :maxHeight="maxHeight"
               :disabled="disabled"
               @input="updateValue"
+              @search="getOptions"
           >
             <span slot="no-options">{{ emptyText }}</span>
           </v-select>

diff --git a/frontend/js/components/VSelect/ExtendedVSelect.vue b/frontend/js/components/VSelect/ExtendedVSelect.vue
@@ -1,6 +1,7 @@
 <script>
 // ExtendedVSelect.vue
   import vSelect from 'vue-select'
+  import 'vue-select/dist/vue-select.css'
 
   export default {
     extends: vSelect,
@@ -41,12 +42,6 @@
         return false
       }
     },
-    watch: {
-      search () {
-        this.onSearch(this.search, this.toggleLoading)
-        this.$emit('search', this.search, this.toggleLoading)
-      }
-    },
     methods: {
       /**
        * Toggle the visibility of the dropdown menu.
@@ -96,7 +91,7 @@
       }
     },
     mounted () {
-      if (this.taggable) this.onSearch(this.search, this.toggleLoading)
+      if (this.taggable) this.$emit('search', this.search, this.toggleLoading)
     }
   }
 </script>
diff --git a/frontend/scss/vendor/_vselect.scss b/frontend/scss/vendor/_vselect.scss
@@ -24,24 +24,33 @@ $multiSelectHeight: 45px;
       border-left: 2px solid rgba($color__icons,.8);
     }
 
-    .dropdown-menu {
+    .vs__dropdown-menu {
       border:0 none;
       padding:15px 0;
       border-top:1px solid $color__border--light;
       box-shadow:0 0px 8px rgba(0,0,0,0.3);
       border-radius: 2px;
 
-      li.no-options {
+      li.vs__no-options {
         color:$color__text--light;
         text-align:left;
         padding:0 15px;
       }
 
-      li {
-        > a {
-          padding:0 15px;
-          background:$color__background;
-          color:$color__text--light;
+      .vs__dropdown-option {
+        padding:0 15px;
+        background:$color__background;
+        color:$color__text--light;
+
+        &:hover,
+        &:focus {
+          color:$color__text;
+          background:$color__light;
+        }
+
+        &--highlight {
+          color:$color__text;
+          background:$color__light;
 
           &:hover,
           &:focus {
@@ -50,36 +59,21 @@ $multiSelectHeight: 45px;
           }
         }
 
-        &.highlight {
-          > a {
-            color:$color__text;
-            background:$color__light;
-
-            &:hover,
-            &:focus {
-              color:$color__text;
-              background:$color__light;
-            }
-          }
-        }
+        &--selected {
+          color:$color__text;
+          background:$color__background;
 
-        &.active {
-          > a {
+          &:hover,
+          &:focus {
             color:$color__text;
-            background:$color__background;
-
-            &:hover,
-            &:focus {
-              color:$color__text;
-              background:$color__light;
-            }
+            background:$color__light;
           }
         }
       }
     }
   }
 
-  .v-select .dropdown-menu li > a {
+  .v-select .vs__dropdown-menu .vs__dropdown-option {
     height:$singleSelectHeight;
     line-height:$singleSelectHeight;
   }
@@ -95,7 +89,7 @@ $multiSelectHeight: 45px;
 
   /* Display an arrow in single mode */
   .vselect--single {
-    .dropdown-toggle {
+    .vs__dropdown-toggle {
       &::after {
         visibility: visible;
         content: "";
@@ -114,24 +108,24 @@ $multiSelectHeight: 45px;
       }
     }
 
-    .selected-tag {
+    .vs__selected {
       cursor:pointer;
     }
   }
 
-  .loading .vselect--single .dropdown-toggle::after {
+  .loading .vselect--single .vs__dropdown-toggle::after {
     opacity:0;
   }
 
   .vselect__field {
-    .dropdown-toggle {
+    .vs__dropdown-toggle {
       border-radius:2px;
       background:$color__background;
       overflow: hidden;
       cursor:pointer;
     }
 
-    .selected-tag {
+    .vs__selected {
       border:0 none;
       background:transparent;
       border-radius:0;
@@ -140,33 +134,33 @@ $multiSelectHeight: 45px;
       color:$color__f--text;
     }
 
-    .dropdown {
+    .v-select {
       &.open,
       &:hover {
-        .dropdown-toggle {
+        .vs__dropdown-toggle {
           @include hoverState;
           border-bottom-left-radius: 2px;
           border-bottom-right-radius: 2px;
         }
 
-        .selected-tag {
+        .vs__selected {
           color:$color__text;
           opacity:1;
         }
       }
     }
 
-    .open-indicator {
+    .vs__open-indicator {
       display:none;
     }
   }
 
   .vselect__field {
-    .dropdown-toggle {
+    .vs__dropdown-toggle {
       height:$singleSelectHeight - 2px;
     }
 
-    .selected-tag {
+    .vs__selected {
       height:$singleSelectHeight - 2px;
       line-height:$singleSelectHeight - 2px;
       @include font-regular;
@@ -178,11 +172,11 @@ $multiSelectHeight: 45px;
   This is the style that should be used in Regular Forms
   */
   .vselect--large .vselect__field {
-    .dropdown-toggle {
+    .vs__dropdown-toggle {
       height:$singleLargeSelectHeight;
     }
 
-    .selected-tag {
+    .vs__selected {
       height:$singleLargeSelectHeight;
       line-height:$singleLargeSelectHeight;
     }
@@ -195,7 +189,7 @@ $multiSelectHeight: 45px;
   }
 
   .vselect--single {
-    .selected-tag {
+    .vs__selected {
       pointer-events:none;
     }
   }
@@ -216,24 +210,24 @@ $multiSelectHeight: 45px;
       margin: 0;
     }
 
-    .v-select.unsearchable > .dropdown-toggle > .selected-tag + input[type="search"] {
+    .v-select.unsearchable > .vs__dropdown-toggle > .vs__selected + input[type="search"] {
       width: 1px;
       margin: 0;
     }
   }
 
   /* Fix width UI : https://github.com/sagalbot/vue-select/issues/225 */
   .v-select {
-    .dropdown {
-      .dropdown-menu {
+    .vs__dropdown {
+      .vs__dropdown-menu {
         min-width: initial;
       }
     }
-    .dropdown-toggle {
+    .vs__dropdown-toggle {
       display: flex;
       flex-wrap: no-wrap;
 
-      .selected-tag {
+      .vs__selected {
         position: relative !important;
       }
 
@@ -249,7 +243,7 @@ $multiSelectHeight: 45px;
   Variant : multiple mode ON
   */
   .vselect--multiple {
-    .dropdown-toggle {
+    .vs__dropdown-toggle {
       min-height:$multiSelectHeight;
       height:auto;
       padding-bottom:7px;
@@ -261,7 +255,7 @@ $multiSelectHeight: 45px;
       }
     }
 
-    .open .dropdown-toggle {
+    .open .vs__dropdown-toggle {
       @include hoverState;
     }
 
@@ -271,7 +265,7 @@ $multiSelectHeight: 45px;
       margin-top:7px;
     }
 
-    .selected-tag {
+    .vs__selected {
       border-radius:15px;
       background:$color__border;
       padding:0 #{5px + 18px + 10px} 0 15px;
@@ -341,12 +335,12 @@ $multiSelectHeight: 45px;
       margin-right: 1px;
     }
 
-    .dropdown-menu li.no-options {
+    .vs__dropdown-menu li.vs__no-options {
       font-size: 13px;
     }
 
     &.vselect--multiple {
-      .selected-tag {
+      .vs__selected {
         height: 21px;
         line-height: 21px;
         font-size: 15px;
@@ -374,15 +368,15 @@ $multiSelectHeight: 45px;
         margin-top:7px;
       }
 
-      .dropdown-toggle {
+      .vs__dropdown-toggle {
         min-height:$singleSelectHeight;
       }
     }
   }
 
   /* Error states */
   .input--error {
-    .v-select .dropdown-toggle {
+    .v-select .vs__dropdown-toggle {
       border-color:$color__error;
 
       &:hover,

diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "tiptap-extensions": "^1.29.1",
     "truncate-utf8-bytes": "1.0.2",
     "vue": "^2.6.12",
-    "vue-select": "2.5.1",
+    "vue-select": "^3.10.3",
     "vue-timeago": "^5.1.2",
     "vuedraggable": "2.20.0",
     "vuetrend": "^0.3.2",