feat: Vue 3 Support (#1344)

BREAKING CHANGE: drop vue 2 support

tests/unit/Dropdown.spec.js

@@ -1,5 +1,6 @@
 import { selectWithProps } from '../helpers'
 import OpenIndicator from '../../src/components/OpenIndicator'
+import VueSelect from '../../src/components/Select'
 
 const preventDefault = jest.fn()
 
@@ -8,6 +9,11 @@ function clickEvent(currentTarget) {
 }
 
 describe('Toggling Dropdown', () => {
+  let spy
+  afterEach(() => {
+    if (spy) spy.mockClear()
+  })
+
   it('should not open the dropdown when the el is clicked but the component is disabled', () => {
     const Select = selectWithProps({ disabled: true })
     Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search))
@@ -16,7 +22,7 @@ describe('Toggling Dropdown', () => {
 
   it('should open the dropdown when the el is clicked', () => {
     const Select = selectWithProps({
-      value: [{ label: 'one' }],
+      modelValue: [{ label: 'one' }],
       options: [{ label: 'one' }],
     })
 
@@ -26,7 +32,7 @@ describe('Toggling Dropdown', () => {
 
   it('should not close the dropdown when the el is clicked and enableMouseInputSearch is set to true', () => {
     const Select = selectWithProps({
-      value: [{ label: 'one' }],
+      modelValue: [{ label: 'one' }],
       options: [{ label: 'one' }],
       enableMouseSearchInput: true,
     })
@@ -39,7 +45,7 @@ describe('Toggling Dropdown', () => {
 
   it('should open the dropdown when the selected tag is clicked', () => {
     const Select = selectWithProps({
-      value: [{ label: 'one' }],
+      modelValue: [{ label: 'one' }],
       options: [{ label: 'one' }],
     })
 
@@ -61,7 +67,7 @@ describe('Toggling Dropdown', () => {
 
   it('closes the dropdown when an option is selected, multiple is true, and closeOnSelect option is true', () => {
     const Select = selectWithProps({
-      value: [],
+      modelValue: [],
       options: ['one', 'two', 'three'],
       multiple: true,
     })
@@ -74,7 +80,7 @@ describe('Toggling Dropdown', () => {
 
   it('does not close the dropdown when the el is clicked, multiple is true, and closeOnSelect option is false', () => {
     const Select = selectWithProps({
-      value: [],
+      modelValue: [],
       options: ['one', 'two', 'three'],
       multiple: true,
       closeOnSelect: false,
@@ -86,36 +92,36 @@ describe('Toggling Dropdown', () => {
     expect(Select.vm.open).toEqual(true)
   })
 
-  it('should close the dropdown on search blur', () => {
+  it('should close the dropdown on search blur', async () => {
     const Select = selectWithProps({
       options: [{ label: 'one' }],
     })
 
     Select.vm.open = true
-    Select.findComponent({ ref: 'search' }).trigger('blur')
+    await Select.get('input').trigger('blur')
 
     expect(Select.vm.open).toEqual(false)
   })
 
   it('will close the dropdown and emit the search:blur event from onSearchBlur', () => {
+    spy = jest.spyOn(VueSelect.methods, 'onSearchBlur')
     const Select = selectWithProps()
-    const spy = jest.spyOn(Select.vm, '$emit')
 
     Select.vm.open = true
     Select.vm.onSearchBlur()
 
     expect(Select.vm.open).toEqual(false)
-    expect(spy).toHaveBeenCalledWith('search:blur')
+    expect(spy).toHaveBeenCalled()
   })
 
   it('will open the dropdown and emit the search:focus event from onSearchFocus', () => {
+    spy = jest.spyOn(VueSelect.methods, 'onSearchFocus')
     const Select = selectWithProps()
-    const spy = jest.spyOn(Select.vm, '$emit')
 
     Select.vm.onSearchFocus()
 
     expect(Select.vm.open).toEqual(true)
-    expect(spy).toHaveBeenCalledWith('search:focus')
+    expect(spy).toHaveBeenCalled()
   })
 
   it('will close the dropdown on escape, if search is empty', () => {
@@ -130,7 +136,7 @@ describe('Toggling Dropdown', () => {
 
   it('should remove existing search text on escape keydown', () => {
     const Select = selectWithProps({
-      value: [{ label: 'one' }],
+      modelValue: [{ label: 'one' }],
       options: [{ label: 'one' }],
     })