feat: Vue 3 Support (#1344)

BREAKING CHANGE: drop vue 2 support

src/components/Select.vue

@@ -154,15 +154,33 @@ export default {
 
   mixins: [pointerScroll, typeAheadPointer, ajax],
 
+  emits: [
+    'open',
+    'close',
+    'update:modelValue',
+    'search',
+    'search:compositionstart',
+    'search:compositionend',
+    'search:keydown',
+    'search:blur',
+    'search:focus',
+    'search:input',
+    'option:created',
+    'option:selecting',
+    'option:selected',
+    'option:deselecting',
+    'option:deselected',
+  ],
+
   props: {
     /**
      * Contains the currently selected value. Very similar to a
      * `value` attribute on an <input>. You can listen for changes
      * with the 'input' event.
-     * @type {Object||String||null}
+     * @type {Object|String|Array|null}
      */
     // eslint-disable-next-line vue/require-default-prop,vue/require-prop-types
-    value: {},
+    modelValue: {},
 
     /**
      * An object with any custom components that you'd like to overwrite
@@ -679,16 +697,17 @@ export default {
   },
 
   computed: {
+    isReducingValues() {
+      return this.$props.reduce !== this.$options.props.reduce.default
+    },
+
     /**
      * Determine if the component needs to
      * track the state of values internally.
      * @return {boolean}
      */
     isTrackingValues() {
-      return (
-        typeof this.value === 'undefined' ||
-        this.$options.propsData.hasOwnProperty('reduce')
-      )
+      return typeof this.modelValue === 'undefined' || this.isReducingValues
     },
 
     /**
@@ -696,7 +715,7 @@ export default {
      * @return {Array}
      */
     selectedValue() {
-      let value = this.value
+      let value = this.modelValue
       if (this.isTrackingValues) {
         // Vue select has to manage value internally
         value = this.$data._value
@@ -725,7 +744,7 @@ export default {
      * @returns {HTMLInputElement}
      */
     searchEl() {
-      return !!this.$scopedSlots['search']
+      return !!this.$slots['search']
         ? this.$refs.selectedOptions.querySelector(
             this.searchInputQuerySelector
           )
@@ -733,7 +752,7 @@ export default {
     },
 
     /**
-     * The object to be bound to the $slots.search scoped slot.
+     * The object to be bound to the $slots.search slot.
      * @returns {Object}
      */
     scope() {
@@ -923,8 +942,8 @@ export default {
         this.clearSelection()
       }
 
-      if (this.value && this.isTrackingValues) {
-        this.setInternalValueFromOptions(this.value)
+      if (this.modelValue && this.isTrackingValues) {
+        this.setInternalValueFromOptions(this.modelValue)
       }
     },
 
@@ -932,7 +951,7 @@ export default {
      * Make sure to update internal
      * value if prop changes outside
      */
-    value: {
+    modelValue: {
       immediate: true,
       handler(val) {
         if (this.isTrackingValues) {
@@ -957,8 +976,6 @@ export default {
 
   created() {
     this.mutableLoading = this.loading
-
-    this.$on('option:created', this.pushTag)
   },
 
   methods: {
@@ -988,7 +1005,9 @@ export default {
       this.$emit('option:selecting', option)
       if (!this.isOptionSelected(option)) {
         if (this.taggable && !this.optionExists(option)) {
+          /* @TODO: could we use v-model instead of push-tags? */
           this.$emit('option:created', option)
+          this.pushTag(option)
         }
         if (this.multiple) {
           option = this.selectedValue.concat(option)
@@ -1052,7 +1071,7 @@ export default {
      * @param value
      */
     updateValue(value) {
-      if (typeof this.value === 'undefined') {
+      if (typeof this.modelValue === 'undefined') {
         // Vue select has to manage value
         this.$data._value = value
       }
@@ -1065,7 +1084,7 @@ export default {
         }
       }
 
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
     },
 
     /**

src/directives/appendToBody.js

@@ -1,17 +1,15 @@
 export default {
-  inserted(el, bindings, { context }) {
-    if (context.appendToBody) {
+  mounted(el, { instance }) {
+    if (instance.appendToBody) {
       const {
         height,
         top,
         left,
         width,
-      } = context.$refs.toggle.getBoundingClientRect()
-
+      } = instance.$refs.toggle.getBoundingClientRect()
       let scrollX = window.scrollX || window.pageXOffset
       let scrollY = window.scrollY || window.pageYOffset
-
-      el.unbindPosition = context.calculatePosition(el, context, {
+      el.unbindPosition = instance.calculatePosition(el, instance, {
         width: width + 'px',
         left: scrollX + left + 'px',
         top: scrollY + top + height + 'px',
@@ -21,8 +19,8 @@ export default {
     }
   },
 
-  unbind(el, bindings, { context }) {
-    if (context.appendToBody) {
+  unmounted(el, { instance }) {
+    if (instance.appendToBody) {
       if (el.unbindPosition && typeof el.unbindPosition === 'function') {
         el.unbindPosition()
       }