@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha28

package/src/components/VSwitch/__tests__/VSwitch.spec.ts

@@ -6,6 +6,7 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 import { touch } from '../../../../test'
 
@@ -16,6 +17,8 @@ describe('VSwitch.ts', () => {
   type Instance = ExtractVue<typeof VSwitch>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSwitch, options)
@@ -24,17 +27,15 @@ describe('VSwitch.ts', () => {
 
   it('should set ripple data attribute based on ripple prop state', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        inputValue: false,
+      props: {
+        modelValue: false,
         ripple: false,
       },
     })
 
-    expect(wrapper.findAll('.v-input--selection-controls__ripple').wrappers).toHaveLength(0)
-
-    wrapper.setProps({ ripple: true })
+    expect(wrapper.findAll('.v-input--selection-controls__ripple')).toHaveLength(0)
 
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ ripple: true })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
 
@@ -44,69 +45,61 @@ describe('VSwitch.ts', () => {
 
   it('should emit change event on swipe', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        inputValue: false,
+      props: {
+        modelValue: false,
       },
     })
 
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
     touch(wrapper.find('.v-input--selection-controls__ripple')).start(0, 0).end(20, 0)
-    expect(change).toHaveBeenCalledWith(true)
-    expect(change).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([true])
 
-    wrapper.setProps({ inputValue: true })
+    await wrapper.setProps({ modelValue: true })
     touch(wrapper.find('.v-input--selection-controls__ripple')).start(0, 0).end(-20, 0)
-    expect(change).toHaveBeenCalledWith(false)
-    expect(change).toHaveBeenCalledTimes(2)
+    expect(wrapper.emitted('update:modelValue')![1]).toEqual([false])
   })
 
   it('should emit change event on key events', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        inputValue: false,
+      props: {
+        modelValue: false,
       },
     })
 
-    const change = jest.fn()
     const input = wrapper.find('input')
-    wrapper.vm.$on('change', change)
 
-    input.trigger('keydown.left')
-    expect(change).not.toHaveBeenCalled()
+    await input.trigger('keydown.left')
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 
-    input.trigger('keydown.right')
-    expect(change).toHaveBeenCalledWith(true)
-    expect(change).toHaveBeenCalledTimes(1)
+    await input.trigger('keydown.right')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([true])
 
-    input.trigger('keydown.right')
-    expect(change).toHaveBeenCalledTimes(1)
+    await input.trigger('keydown.right')
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
 
-    input.trigger('keydown.left')
-    expect(change).toHaveBeenCalledWith(false)
-    expect(change).toHaveBeenCalledTimes(2)
+    await input.trigger('keydown.left')
+    expect(wrapper.emitted('update:modelValue')![1]).toEqual([false])
   })
 
   it('should not emit change event on swipe when not active', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        inputValue: false,
+      props: {
+        modelValue: false,
       },
     })
 
-    const change = jest.fn()
-    wrapper.vm.$on('change', change)
     touch(wrapper.find('.v-input--selection-controls__ripple')).start(0, 0).end(-20, 0)
-    expect(change).not.toHaveBeenCalled()
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 
-    wrapper.setProps({ inputValue: true })
+    await wrapper.setProps({ modelValue: true })
     touch(wrapper.find('.v-input--selection-controls__ripple')).start(0, 0).end(20, 0)
-    expect(change).not.toHaveBeenCalled()
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
   })
 
   it('should render element with loader and match the snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         loading: true,
       },
     })

package/src/components/VTabs/VTab.ts

@@ -33,6 +33,8 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-tab',
 
+  emits: ['change', 'click', 'keydown'],
+
   props: {
     ripple: {
       type: [Boolean, Object],

package/src/components/VTabs/VTabs.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VTabs.sass'
 
@@ -38,10 +38,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-tabs',
 
-  directives: {
-    Resize,
-  },
-
   props: {
     activeClass: {
       type: String,
@@ -139,9 +135,14 @@ export default baseMixins.extend({
     '$vuetify.application.left': 'onResize',
     '$vuetify.application.right': 'onResize',
     '$vuetify.rtl': 'onResize',
+    modelValue (val: any) {
+      this.validateModelValue(val)
+    },
   },
 
   mounted () {
+    this.validateModelValue(this.modelValue)
+
     if (typeof ResizeObserver !== 'undefined') {
       const obs = new ResizeObserver(() => {
         this.onResize()
@@ -158,6 +159,11 @@ export default baseMixins.extend({
   },
 
   methods: {
+    validateModelValue (val: any) {
+      if (typeof val === 'number' && val < 0) {
+        this.internalValue = 0
+      }
+    },
     callSlider () {
       if (
         this.hideSlider ||
@@ -233,7 +239,7 @@ export default baseMixins.extend({
         modelValue: this.internalValue,
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
-        }
+        },
       }, () => item)
     },
     genSlider (slider: VNode | null) {
@@ -241,7 +247,7 @@ export default baseMixins.extend({
 
       if (!slider) {
         slider = h(VTabsSlider, {
-          color: this.sliderColor
+          color: this.sliderColor,
         })
       }
 
@@ -297,7 +303,7 @@ export default baseMixins.extend({
     const { tab, slider, items, item } = this.parseNodes()
 
     return withDirectives(h('div', {
-      class: ['v-tabs', this.classes]
+      class: ['v-tabs', this.classes],
     }, [
       this.genBar(tab, slider),
       this.genItems(items, item),
@@ -306,8 +312,8 @@ export default baseMixins.extend({
         Resize,
         this.onResize,
         '',
-        { quiet: true }
-      ]
+        { quiet: true },
+      ],
     ])
   },
 })

package/src/components/VTabs/VTabsItems.ts

@@ -17,6 +17,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['change'],
+
   computed: {
     classes (): object {
       return {

package/src/components/VTabs/__tests__/VTabs.spec.ts

@@ -36,13 +36,6 @@ describe('VTabs.ts', () => {
           config: {
             warnHandler: () => {}, // Подавляем предупреждения Vue
           },
-          directives: {
-            Resize: {
-              mounted: () => {},
-              updated: () => {},
-              unmounted: () => {},
-            },
-          },
           mocks: {
             $vuetify: {
               application: { left: 0, right: 0 },

package/src/components/VTextField/VTextField.ts

@@ -53,11 +53,6 @@ const dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', '
 export default baseMixins.extend({
   name: 'v-text-field',
 
-  directives: {
-    resize,
-    ripple,
-  },
-
   props: {
     appendOuterIcon: String,
     autofocus: Boolean,
@@ -90,6 +85,8 @@ export default baseMixins.extend({
     },
   },
 
+  emits: ['update:modelValue', 'blur', 'focus', 'keydown'],
+
   data: () => ({
     badInput: false,
     labelWidth: 0,
@@ -211,15 +208,15 @@ export default baseMixins.extend({
   },
 
   created () {
-    /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('box')) {
-      breaking('box', 'filled', this)
-    }
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
 
     /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('browser-autocomplete')) {
-      breaking('browser-autocomplete', 'autocomplete', this)
-    }
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
 
     /* istanbul ignore if */
     if (this.shaped && !(this.filled || this.outlined || this.isSolo)) {