feat: Vue 3 Support (#1344)

BREAKING CHANGE: drop vue 2 support

tests/unit/Deselecting.spec.js

@@ -7,13 +7,13 @@ describe('Removing values', () => {
     await Select.vm.$nextTick()
 
     Select.find('.vs__deselect').trigger('click')
-    expect(Select.emitted().input).toEqual([[[]]])
+    expect(Select.emitted()['update:modelValue']).toEqual([[[]]])
     expect(Select.vm.selectedValue).toEqual([])
   })
 
   it('should not remove tag when close icon is clicked and component is disabled', () => {
     const Select = selectWithProps({
-      value: ['one'],
+      modelValue: ['one'],
       options: ['one', 'two', 'three'],
       multiple: true,
       disabled: true,
@@ -33,7 +33,7 @@ describe('Removing values', () => {
 
     Select.find('.vs__search').trigger('keydown.backspace')
 
-    expect(Select.emitted().input).toEqual([[['one']]])
+    expect(Select.emitted()['update:modelValue']).toEqual([[['one']]])
     expect(Select.vm.selectedValue).toEqual(['one'])
   })
 
@@ -48,21 +48,20 @@ describe('Removing values', () => {
     expect(Select.vm.selectedValue).toEqual([])
   })
 
-  it('will not emit input event if value has not changed with backspace', () => {
+  it('will not emit update:modelValue event if value has not changed with backspace', () => {
     const Select = mountDefault()
     Select.vm.$data._value = 'one'
+    Select.get('input').trigger('keydown.backspace')
+    expect(Select.emitted()['update:modelValue'].length).toBe(1)
 
-    Select.findComponent({ ref: 'search' }).trigger('keydown.backspace')
-    expect(Select.emitted().input.length).toBe(1)
-
-    Select.findComponent({ ref: 'search' }).trigger('keydown.backspace')
-    Select.findComponent({ ref: 'search' }).trigger('keydown.backspace')
-    expect(Select.emitted().input.length).toBe(1)
+    Select.get('input').trigger('keydown.backspace')
+    Select.get('input').trigger('keydown.backspace')
+    expect(Select.emitted()['update:modelValue'].length).toBe(1)
   })
 
   it('should deselect a selected option when clicked and deselectFromDropdown is true', async () => {
     const Select = selectWithProps({
-      value: 'one',
+      modelValue: 'one',
       options: ['one', 'two', 'three'],
       deselectFromDropdown: true,
     })
@@ -79,7 +78,7 @@ describe('Removing values', () => {
 
   it('should not deselect a selected option when clicked if clearable is false', async () => {
     const Select = selectWithProps({
-      value: 'one',
+      modelValue: 'one',
       options: ['one', 'two', 'three'],
       clearable: false,
       deselectFromDropdown: true,
@@ -97,7 +96,7 @@ describe('Removing values', () => {
 
   it('should not deselect a selected option when clicked if deselectFromDropdown is false', async () => {
     const Select = selectWithProps({
-      value: 'one',
+      modelValue: 'one',
       options: ['one', 'two', 'three'],
       deselectFromDropdown: false,
     })
@@ -116,7 +115,7 @@ describe('Removing values', () => {
     it('should be displayed on single select when value is selected', () => {
       const Select = selectWithProps({
         options: ['foo', 'bar'],
-        value: 'foo',
+        modelValue: 'foo',
       })
 
       expect(Select.vm.showClearButton).toEqual(true)
@@ -125,7 +124,7 @@ describe('Removing values', () => {
     it('should not be displayed on multiple select', () => {
       const Select = selectWithProps({
         options: ['foo', 'bar'],
-        value: 'foo',
+        modelValue: 'foo',
         multiple: true,
       })
 
@@ -141,20 +140,20 @@ describe('Removing values', () => {
       expect(Select.vm.selectedValue).toEqual(['foo'])
       Select.find('button.vs__clear').trigger('click')
 
-      expect(Select.emitted().input).toEqual([[null]])
+      expect(Select.emitted()['update:modelValue']).toEqual([[null]])
       expect(Select.vm.selectedValue).toEqual([])
     })
 
     it('should be disabled when component is disabled', () => {
       const Select = selectWithProps({
         options: ['foo', 'bar'],
-        value: 'foo',
+        modelValue: 'foo',
         disabled: true,
       })
 
-      expect(Select.find('button.vs__clear').attributes().disabled).toEqual(
-        'disabled'
-      )
+      expect(
+        Select.find('button.vs__clear').attributes().disabled
+      ).toBeDefined()
     })
   })
 })