[3.x] Update vueselect dependency to v3

CHANGELOG.md

@@ -169,6 +169,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)
@@ -246,6 +247,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`.
 

frontend/js/components/VSelect.vue

@@ -12,13 +12,13 @@
             :searchable="searchable"
             :clearSearchOnSelect="clearSearchOnSelect"
             :label="optionsLabel"
-            :on-search="getOptions"
             :taggable="taggable"
             :pushTags="pushTags"
             :transition="transition"
             :requiredValue="required"
             :maxHeight="maxHeight"
             @input="updateValue"
+            @search="getOptions"
           >
             <span slot="no-options">{{ emptyText }}</span>
           </v-select>

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.
@@ -82,7 +77,7 @@
       }
     },
     mounted () {
-      if (this.taggable) this.onSearch(this.search, this.toggleLoading)
+      if (this.taggable) this.$emit('search', this.search, this.toggleLoading)
     }
   }
 </script>

package.json

@@ -26,7 +26,7 @@
     "tiptap-extensions": "1.28.4",
     "truncate-utf8-bytes": "1.0.2",
     "vue": "2.6.11",
-    "vue-select": "2.5.1",
+    "vue-select": "^3.10.3",
     "vue-timeago": "^3.4.4",
     "vuedraggable": "2.20.0",
     "vuetrend": "^0.3.2",