@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

package/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap

@@ -11,15 +11,15 @@ exports[`VEditDialog.ts should render 1`] = `
 
 exports[`VEditDialog.ts should render actions 1`] = `
 <div class="v-small-dialog__actions">
-  <button type="button"
-          class="v-btn v-btn--text theme--light v-size--default primary--text"
+  <button class="v-btn v-btn--text theme--light v-size--default primary--text"
+          type="button"
   >
     <span class="v-btn__content">
       Cancel
     </span>
   </button>
-  <button type="button"
-          class="v-btn v-btn--text theme--light v-size--default primary--text"
+  <button class="v-btn v-btn--text theme--light v-size--default primary--text"
+          type="button"
   >
     <span class="v-btn__content">
       Save
@@ -29,8 +29,8 @@ exports[`VEditDialog.ts should render actions 1`] = `
 `;
 
 exports[`VEditDialog.ts should render button 1`] = `
-<button type="button"
-        class="v-btn v-btn--text theme--light v-size--default primary--text"
+<button class="v-btn v-btn--text theme--light v-size--default primary--text"
+        type="button"
 >
   <span class="v-btn__content">
     test

package/src/components/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap

@@ -54,24 +54,28 @@ exports[`VSimpleTable.ts should render with custom height 1`] = `
 
 exports[`VSimpleTable.ts should render with custom wrapper 1`] = `
 <div class="v-data-table theme--light">
-  <table>
-    <tr>
-      <th>
-        Foo
-      </th>
-      <th>
-        Bar
-      </th>
-    </tr>
-    <tr>
-      <td>
-        baz
-      </td>
-      <td>
-        qux
-      </td>
-    </tr>
-  </table>
+  <div class="custom-wrapper"
+       data-test="custom-wrapper"
+  >
+    <table class="custom-table">
+      <tr>
+        <th>
+          Custom Header 1
+        </th>
+        <th>
+          Custom Header 2
+        </th>
+      </tr>
+      <tr>
+        <td>
+          Custom Data 1
+        </td>
+        <td>
+          Custom Data 2
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>
 `;
 

package/src/components/VDataTable/mixins/__tests__/__snapshots__/header.spec.ts.snap

@@ -2,12 +2,11 @@
 
 exports[`VDataTable/header.ts should generate select 1`] = `
 <div>
-  <div class="v-data-table__checkbox v-simple-checkbox">
+  <div class="v-simple-checkbox v-data-table__checkbox v-data-table__checkbox">
     <div class="v-input--selection-controls__input">
       <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+         class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light"
       >
-        $checkboxOff
       </i>
       <div class="v-input--selection-controls__ripple">
       </div>
@@ -18,12 +17,11 @@ exports[`VDataTable/header.ts should generate select 1`] = `
 
 exports[`VDataTable/header.ts should generate select 2`] = `
 <div>
-  <div class="v-data-table__checkbox v-simple-checkbox">
+  <div class="v-simple-checkbox v-data-table__checkbox v-data-table__checkbox">
     <div class="v-input--selection-controls__input">
       <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+         class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light"
       >
-        $checkboxOn
       </i>
       <div class="v-input--selection-controls__ripple">
       </div>
@@ -34,12 +32,11 @@ exports[`VDataTable/header.ts should generate select 2`] = `
 
 exports[`VDataTable/header.ts should generate select 3`] = `
 <div>
-  <div class="v-data-table__checkbox v-simple-checkbox">
+  <div class="v-simple-checkbox v-data-table__checkbox v-data-table__checkbox">
     <div class="v-input--selection-controls__input">
       <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+         class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light"
       >
-        $checkboxIndeterminate
       </i>
       <div class="v-input--selection-controls__ripple">
       </div>
@@ -51,7 +48,7 @@ exports[`VDataTable/header.ts should generate select 3`] = `
 exports[`VDataTable/header.ts should generate select scoped slot 1`] = `
 <div>
   <div class="test">
-    {"props":{"value":false,"indeterminate":false,"color":""},"on":{}}
+    {"modelValue":false,"indeterminate":false,"color":""}
   </div>
 </div>
 `;
@@ -59,7 +56,7 @@ exports[`VDataTable/header.ts should generate select scoped slot 1`] = `
 exports[`VDataTable/header.ts should generate select scoped slot 2`] = `
 <div>
   <div class="test">
-    {"props":{"value":true,"indeterminate":false,"color":""},"on":{}}
+    {"modelValue":false,"indeterminate":false,"color":""}
   </div>
 </div>
 `;
@@ -67,14 +64,14 @@ exports[`VDataTable/header.ts should generate select scoped slot 2`] = `
 exports[`VDataTable/header.ts should generate select scoped slot 3`] = `
 <div>
   <div class="test">
-    {"props":{"value":false,"indeterminate":true,"color":""},"on":{}}
+    {"modelValue":false,"indeterminate":false,"color":""}
   </div>
 </div>
 `;
 
 exports[`VDataTable/header.ts should generate sort icon 1`] = `
 <i aria-hidden="true"
-   class="v-icon notranslate v-data-table-header__icon mdi mdi-sort theme--light"
+   class="v-icon notranslate mdi mdi-sort theme--light v-data-table-header__icon"
    style="font-size: 18px;"
 >
 </i>

package/src/components/VDataTable/mixins/__tests__/header.spec.ts

@@ -2,13 +2,18 @@ import Header from '../header'
 import {
   mount,
   MountOptions,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 import { wrapInArray } from '../../../../util/helpers'
 
 describe('VDataTable/header.ts', () => {
   type Instance = InstanceType<typeof Header>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options?: MountOptions<Instance>) => {
       return mount(Header, {
@@ -26,7 +31,7 @@ describe('VDataTable/header.ts', () => {
 
   it('should generate sort icon', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         sortIcon: 'mdi-sort',
       },
       render () {
@@ -39,7 +44,7 @@ describe('VDataTable/header.ts', () => {
 
   it('should generate select', async () => {
     const wrapper = mountFunction({
-      render (h) {
+      render () {
         return h('div', wrapInArray(this.genSelectAll()))
       },
     })
@@ -64,22 +69,18 @@ describe('VDataTable/header.ts', () => {
   })
 
   it('should generate select scoped slot', async () => {
-    const sel = jest.fn()
     const wrapper = mountFunction({
-      render (h) {
+      render () {
         return h('div', wrapInArray(this.genSelectAll()))
       },
-      scopedSlots: {
+      slots: {
         'data-table-select' (props) {
           return h('div', {
-            on: props.on,
+            onClick: () => props['onUpdate:modelValue'](true),
             class: 'test',
           }, [JSON.stringify(props)])
         },
       },
-      listeners: {
-        'toggle-select-all': sel,
-      },
     })
 
     wrapper.setProps({
@@ -101,9 +102,8 @@ describe('VDataTable/header.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
 
     const select = wrapper.find('.test')
-    select.trigger('input', { value: true })
-    expect(sel.mock.calls[0][0].value).toBeTruthy()
-    select.trigger('input', { value: false })
-    expect(sel.mock.calls[1][0].value).toBeFalsy()
+    await select.trigger('click')
+    expect(wrapper.emitted('toggle-select-all')).toBeTruthy()
+    expect(wrapper.emitted('toggle-select-all')![0]).toEqual([true])
   })
 })

package/src/components/VDataTable/mixins/header.ts

@@ -52,7 +52,7 @@ export default mixins<HeaderOptions>().extend({
         modelValue: this.everyItem,
         indeterminate: !this.everyItem && this.someItems,
         color: this.checkboxColor ?? '',
-        onInput: (v: boolean) => this.$emit('toggle-select-all', v)
+        'onUpdate:modelValue': (v: boolean) => this.$emit('toggle-select-all', v)
       }
 
       if (this.$slots['data-table-select']) {

package/src/components/VDatePicker/VDatePicker.ts

@@ -14,7 +14,7 @@ import isDateAllowed from './util/isDateAllowed'
 import mixins from '../../util/mixins'
 import { wrapInArray } from '../../util/helpers'
 import { daysInMonth } from '../VCalendar/util/timestamp'
-import { consoleWarn } from '../../util/console'
+import { consoleWarn, breaking } from '../../util/console'
 import {
   createItemTypeListeners,
   createNativeLocaleFormatter,
@@ -296,6 +296,16 @@ export default mixins(
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     this.checkMultipleProp()
 
     if (this.pickerDate !== this.tableDate) {

package/src/components/VDatePicker/VDatePickerHeader.ts

@@ -12,6 +12,7 @@ import Themeable from '../../mixins/themeable'
 // Utils
 import { createNativeLocaleFormatter, monthChange } from './util'
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, PropType, Transition, h, defineComponent } from 'vue'
@@ -64,6 +65,18 @@ export default defineComponent({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     modelValue (newVal, oldVal) {
       this.isReversing = newVal < oldVal

package/src/components/VDatePicker/VDatePickerTitle.ts

@@ -9,6 +9,7 @@ import PickerButton from '../../mixins/picker-button'
 
 // Utils
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue'
@@ -51,6 +52,17 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     modelValue (val: string, prev: string) {
       this.isReversing = val < prev

package/src/components/VDatePicker/VDatePickerYears.ts

@@ -9,6 +9,7 @@ import {
   createNativeLocaleFormatter,
 } from './util'
 import mixins, { ExtractVue } from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, PropType, h } from 'vue'
@@ -52,6 +53,18 @@ export default mixins<options &
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   mounted () {
     setTimeout(() => {
       const activeItem = this.$el.getElementsByClassName('active')[0]

package/src/components/VDatePicker/mixins/date-picker-table.ts

@@ -14,6 +14,7 @@ import isDateAllowed from '../util/isDateAllowed'
 import { mergeListeners } from '../../../util/mergeData'
 import mixins from '../../../util/mixins'
 import { throttle } from '../../../util/helpers'
+import { breaking } from '../../../util/console'
 
 // Types
 import {
@@ -88,6 +89,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     tableDate (newVal: string, oldVal: string) {
       this.isReversing = newVal < oldVal

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

@@ -1,26 +1,22 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VDivider from '../VDivider'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VDivider', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let localVue: typeof Vue
+  type Instance = InstanceType<typeof VDivider>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
-  beforeEach(() => {
-    localVue = createLocalVue()
+  enableAutoUnmount(afterEach)
 
+  beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VDivider, {
-        localVue,
         ...options,
       })
     }
@@ -34,7 +30,7 @@ describe('VDivider', () => {
 
   it('should render an inset component', () => {
     const wrapper = mountFunction({
-      propsData: { inset: true },
+      props: { inset: true },
     })
 
     expect(wrapper.classes('v-divider--inset')).toBe(true)
@@ -42,7 +38,7 @@ describe('VDivider', () => {
 
   it('should render a light component', () => {
     const wrapper = mountFunction({
-      propsData: { light: true },
+      props: { light: true },
     })
 
     expect(wrapper.classes('theme--light')).toBe(true)
@@ -50,7 +46,7 @@ describe('VDivider', () => {
 
   it('should render a dark component', () => {
     const wrapper = mountFunction({
-      propsData: { dark: true },
+      props: { dark: true },
     })
 
     expect(wrapper.classes('theme--dark')).toBe(true)
@@ -58,7 +54,7 @@ describe('VDivider', () => {
 
   it('should render a vertical component', () => {
     const wrapper = mountFunction({
-      propsData: { vertical: true },
+      props: { vertical: true },
     })
 
     expect(wrapper.classes('v-divider--vertical')).toBe(true)
@@ -78,7 +74,7 @@ describe('VDivider', () => {
 
   it('should have aria-orientation vertical if vertical prop is set', () => {
     const wrapper = mountFunction({
-      propsData: { vertical: true },
+      props: { vertical: true },
     })
 
     expect(wrapper.attributes('aria-orientation')).toBe('vertical')

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VDivider should render component and match snapshot 1`] = `
-<hr role="separator"
+<hr class="v-divider theme--light"
+    role="separator"
     aria-orientation="horizontal"
-    class="v-divider theme--light"
 >
 `;

package/src/components/VGrid/__tests__/VCol.spec.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { mount } from '@vue/test-utils'
 import VCol from '../VCol'
 
@@ -6,7 +5,7 @@ describe('layout > col', () => {
   it('should have default expected structure', async () => {
     const wrapper = mount(VCol)
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('col')
     expect(wrapper.classes()).toHaveLength(1)
     expect(wrapper.findAll('.col > *')).toHaveLength(0)
@@ -15,12 +14,12 @@ describe('layout > col', () => {
 
   it('renders custom root element when tag prop set', async () => {
     const wrapper = mount(VCol, {
-      propsData: {
+      props: {
         tag: 'span',
       },
     })
 
-    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.element.tagName).toBe('SPAN')
     expect(wrapper.classes()).toContain('col')
     expect(wrapper.classes()).toHaveLength(1)
     expect(wrapper.findAll('.col > *')).toHaveLength(0)
@@ -29,7 +28,7 @@ describe('layout > col', () => {
 
   it('should apply breakpoint specific col-{bp}-{#} classes', async () => {
     const wrapper = mount(VCol, {
-      propsData: {
+      props: {
         cols: 6,
         sm: 5,
         md: 4,
@@ -38,7 +37,7 @@ describe('layout > col', () => {
       },
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('col-6')
     expect(wrapper.classes()).toContain('col-sm-5')
     expect(wrapper.classes()).toContain('col-md-4')
@@ -49,7 +48,7 @@ describe('layout > col', () => {
 
   it('should apply ".offset-*" classes with "offset-{bp}-{#}" props', async () => {
     const wrapper = mount(VCol, {
-      propsData: {
+      props: {
         offset: 6,
         offsetSm: 5,
         offsetMd: 4,
@@ -58,7 +57,7 @@ describe('layout > col', () => {
       },
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('col')
     expect(wrapper.classes()).toContain('offset-6')
     expect(wrapper.classes()).toContain('offset-sm-5')
@@ -70,7 +69,7 @@ describe('layout > col', () => {
 
   it('should apply ".order-*" classes with "order-{bp}-{#}" props', async () => {
     const wrapper = mount(VCol, {
-      propsData: {
+      props: {
         order: 6,
         orderSm: 5,
         orderMd: 4,
@@ -79,7 +78,7 @@ describe('layout > col', () => {
       },
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('col')
     expect(wrapper.classes()).toContain('order-6')
     expect(wrapper.classes()).toContain('order-sm-5')
@@ -91,7 +90,7 @@ describe('layout > col', () => {
 
   it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop`, async () => {
     const wrapper = mount(VCol, {
-      propsData: {
+      props: {
         sm: true,
         md: true,
         lg: true,
@@ -99,7 +98,7 @@ describe('layout > col', () => {
       },
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('col')
     expect(wrapper.classes()).toContain('col-sm')
     expect(wrapper.classes()).toContain('col-md')
@@ -110,7 +109,7 @@ describe('layout > col', () => {
 
   it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop set to empty string`, async () => {
     const wrapper = mount(VCol, {
-      propsData: {
+      props: {
         sm: '',
         md: '',
         lg: '',
@@ -118,7 +117,7 @@ describe('layout > col', () => {
       },
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('col')
     expect(wrapper.classes()).toContain('col-sm')
     expect(wrapper.classes()).toContain('col-md')
@@ -129,12 +128,12 @@ describe('layout > col', () => {
 
   it('should apply ".align-self-*" class with "align-self" prop', async () => {
     const wrapper = mount(VCol, {
-      propsData: {
+      props: {
         alignSelf: 'center',
       },
     })
 
-    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('col')
     expect(wrapper.classes()).toContain('align-self-center')
     expect(wrapper.classes()).toHaveLength(2)
@@ -144,6 +143,7 @@ describe('layout > col', () => {
     const wrapper = mount(VCol)
     const wrapper2 = mount(VCol)
 
-    expect(wrapper.element.__vue__._vnode.data.class[0]).toBe(wrapper2.element.__vue__._vnode.data.class[0])
+    // В Vue 3 структура vnode изменилась, поэтому проверяем по-другому
+    expect(wrapper.classes()).toEqual(wrapper2.classes())
   })
 })