@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

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

@@ -4,12 +4,17 @@ import VSubheader from '../VSubheader'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VSubheader.ts', () => {
   type Instance = InstanceType<typeof VSubheader>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -20,8 +25,8 @@ describe('VSubheader.ts', () => {
   })
 
   it('should have custom class', () => {
-    const wrapper = mount({
-      render: h => h(VSubheader, { class: 'foo' }),
+    const wrapper = mount(VSubheader, {
+      props: { class: 'foo' },
     })
 
     expect(wrapper.element.classList.contains('foo')).toBe(true)
@@ -30,7 +35,7 @@ describe('VSubheader.ts', () => {
 
   it('should be light', () => {
     const wrapper = mountFunction({
-      propsData: { light: true },
+      props: { light: true },
     })
 
     expect(wrapper.element.classList.contains('theme--light')).toBe(true)
@@ -39,7 +44,7 @@ describe('VSubheader.ts', () => {
 
   it('should be dark', () => {
     const wrapper = mountFunction({
-      propsData: { dark: true },
+      props: { dark: true },
     })
 
     expect(wrapper.element.classList.contains('theme--dark')).toBe(true)
@@ -48,7 +53,7 @@ describe('VSubheader.ts', () => {
 
   it('should be inset', () => {
     const wrapper = mountFunction({
-      propsData: { inset: true },
+      props: { inset: true },
     })
 
     expect(wrapper.element.classList.contains('v-subheader--inset')).toBe(true)

package/src/components/VSubheader/__tests__/__snapshots__/VSubheader.spec.ts.snap

@@ -16,6 +16,6 @@ exports[`VSubheader.ts should be light 1`] = `
 `;
 
 exports[`VSubheader.ts should have custom class 1`] = `
-<div class="v-subheader foo theme--light">
+<div class="v-subheader theme--light foo">
 </div>
 `;

package/src/components/VSwitch/VSwitch.ts

@@ -24,7 +24,6 @@ import mergeData from '../../util/mergeData'
 export default defineComponent({
   name: 'v-switch',
 
-  directives: { Touch },
 
   extends: Selectable,
 
@@ -40,6 +39,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['click', 'focus', 'blur'],
+
   computed: {
     classes (): object {
       return {
@@ -99,18 +100,16 @@ export default defineComponent({
           ]],
         })),
 
-        h('div', mergeData({
-          class: 'v-input--switch__track' },
+        h('div', mergeData({ class: 'v-input--switch__track' },
           this.switchData,
         )),
-        h('div', mergeData({
-          class: 'v-input--switch__thumb'},
+        h('div', mergeData({ class: 'v-input--switch__thumb' },
           this.switchData,
         ), [this.genProgress()]),
       ])
     },
     genProgress (): VNode {
-      return h(VFabTransition, {}, [
+      return h(VFabTransition, {}, () => [
         this.loading === false
           ? null
           : getSlot(this, 'progress') || h(VProgressCircular, {

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/VSystemBar/__tests__/VSystemBar.spec.ts

@@ -1,28 +1,30 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VSystemBar from '../VSystemBar'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VSystemBar.ts', () => {
   type Instance = InstanceType<typeof VSystemBar>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSystemBar, {
-        mocks: {
-          $vuetify: {
-            application: {
-              register: () => {},
-              unregister: () => {},
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                register: () => {},
+                unregister: () => {},
+              },
             },
           },
         },
@@ -31,26 +33,96 @@ describe('VSystemBar.ts', () => {
     }
   })
 
-  it('should return the correct height', () => {
+  it('should return the correct height for numeric height', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         app: true,
         height: 56,
       },
     })
 
     expect(wrapper.vm.computedHeight).toBe(56)
+  })
+
+  it('should return the correct height for string height', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: '48',
+      },
+    })
 
-    wrapper.setProps({ height: '48' })
     expect(wrapper.vm.computedHeight).toBe(48)
+  })
+
+  it('should return the correct height for auto height', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: 'auto',
+      },
+    })
 
-    wrapper.setProps({ height: 'auto' })
     expect(wrapper.vm.computedHeight).toBe('auto')
+  })
+
+  it('should return default height when height is undefined', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: undefined,
+      },
+    })
 
-    wrapper.setProps({ height: undefined })
     expect(wrapper.vm.computedHeight).toBe(24)
+  })
+
+  it('should return window height when window is true', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        window: true,
+      },
+    })
 
-    wrapper.setProps({ window: true })
     expect(wrapper.vm.computedHeight).toBe(32)
   })
+
+  it('should render with correct classes', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        lightsOut: true,
+        window: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('v-system-bar--lights-out')
+    expect(wrapper.classes()).toContain('v-system-bar--fixed')
+    expect(wrapper.classes()).toContain('v-system-bar--window')
+  })
+
+  it('should render with correct styles', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+        height: 48,
+      },
+    })
+
+    expect(wrapper.attributes('style')).toContain('height: 48px')
+  })
+
+  it('should render with slot content', () => {
+    const wrapper = mountFunction({
+      props: {
+        app: true,
+      },
+      slots: {
+        default: 'System Bar Content',
+      },
+    })
+
+    expect(wrapper.text()).toBe('System Bar Content')
+  })
 })

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'
 
@@ -19,6 +19,7 @@ import Resize from '../../directives/resize'
 import { convertToUnit, getSlot } from '../../util/helpers'
 import { ExtractVue } from './../../util/mixins'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue/types'
@@ -38,10 +39,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-tabs',
 
-  directives: {
-    Resize,
-  },
-
   props: {
     activeClass: {
       type: String,
@@ -126,6 +123,19 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     alignWithTitle: 'callSlider',
     centered: 'callSlider',
@@ -139,9 +149,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 +173,11 @@ export default baseMixins.extend({
   },
 
   methods: {
+    validateModelValue (val: any) {
+      if (typeof val === 'number' && val < 0) {
+        this.internalValue = 0
+      }
+    },
     callSlider () {
       if (
         this.hideSlider ||
@@ -204,7 +224,7 @@ export default baseMixins.extend({
         nextIcon: this.nextIcon,
         prevIcon: this.prevIcon,
         showArrows: this.showArrows,
-        value: this.internalValue,
+        modelValue: this.internalValue,
         'onCall:slider': this.callSlider,
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
@@ -215,7 +235,7 @@ export default baseMixins.extend({
       this.setTextColor(this.computedColor, data)
       this.setBackgroundColor(this.backgroundColor, data)
 
-      return h(VTabsBar, data, [
+      return h(VTabsBar, data, () => [
         this.genSlider(slider),
         items,
       ])
@@ -233,15 +253,15 @@ export default baseMixins.extend({
         modelValue: this.internalValue,
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
-        }
-      }, item)
+        },
+      }, () => item)
     },
     genSlider (slider: VNode | null) {
       if (this.hideSlider) return null
 
       if (!slider) {
         slider = h(VTabsSlider, {
-          color: this.sliderColor
+          color: this.sliderColor,
         })
       }
 
@@ -297,7 +317,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 +326,8 @@ export default baseMixins.extend({
         Resize,
         this.onResize,
         '',
-        { quiet: true }
-      ]
+        { quiet: true },
+      ],
     ])
   },
 })

package/src/components/VTabs/VTabsBar.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h, VNode } from 'vue'
 // Extensions
 import { BaseSlideGroup } from '../VSlideGroup/VSlideGroup'
 
@@ -13,8 +13,7 @@ import SSRBootable from '../../mixins/ssr-bootable'
 import mixins from '../../util/mixins'
 
 // Types
-import { Route } from 'vue-router'
-import { VNode } from 'vue'
+import { RouteLocationNormalized } from 'vue-router'
 
 type VTabInstance = InstanceType<typeof VTab>
 
@@ -64,11 +63,14 @@ export default mixins(
 
       return render
     },
-    onRouteChange (val: Route, oldVal: Route) {
+    onRouteChange (
+      val: RouteLocationNormalized,
+      oldVal: RouteLocationNormalized
+    ) {
       /* istanbul ignore next */
       if (this.mandatory) return
 
-      const items = this.items as unknown as VTabInstance[]
+      const items = (this.items as unknown) as VTabInstance[]
       const newPath = val.path
       const oldPath = oldVal.path
 

package/src/components/VTabs/VTabsItems.ts

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