@dimailn/vuetify 2.7.2-alpha28 → 2.7.2-alpha29

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

@@ -1,12 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VEditDialog.ts should render 1`] = `
-<div class="v-menu v-small-dialog theme--light"
-     value="false"
->
-  <div class="v-small-dialog__activator"
-       keydown="function () { [native code] }"
-  >
+<div class="v-menu v-small-dialog theme--light">
+  <div class="v-small-dialog__activator">
     <span class="v-small-dialog__activator__content">
     </span>
   </div>
@@ -43,12 +39,8 @@ exports[`VEditDialog.ts should render button 1`] = `
 `;
 
 exports[`VEditDialog.ts should render custom button texts 1`] = `
-<div class="v-menu v-small-dialog theme--light"
-     value="false"
->
-  <div class="v-small-dialog__activator"
-       keydown="function () { [native code] }"
-  >
+<div class="v-menu v-small-dialog theme--light">
+  <div class="v-small-dialog__activator">
     <span class="v-small-dialog__activator__content">
     </span>
   </div>

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,7 +64,7 @@ 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>
 `;

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/VInput/VInput.ts

@@ -18,6 +18,7 @@ import {
   normalizeClasses,
 } from '../../util/helpers'
 import mergeData from '../../util/mergeData'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, VNodeData, PropType, h, getCurrentInstance } from 'vue'
@@ -59,7 +60,7 @@ export default baseMixins.extend({
     modelValue: null as any as PropType<any>,
   },
 
-  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend'],
+  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'update:error'],
 
   data () {
     return {
@@ -111,7 +112,7 @@ export default baseMixins.extend({
         this.lazyValue = val
         this.$emit(this.$_modelEvent, val)
 
-        if('$_emitChangeEvent' in this) {
+        if ('$_emitChangeEvent' in this) {
           this.$emit('change', val)
         }
       },
@@ -146,6 +147,18 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   beforeCreate () {
     // v-radio-group needs to emit a different event
     // https://github.com/vuetifyjs/vuetify/issues/4752
@@ -236,7 +249,7 @@ export default baseMixins.extend({
     },
     genInputSlot () {
       return h('div', this.setBackgroundColor(this.backgroundColor, {
-        class: {'v-input__slot': true},
+        class: { 'v-input__slot': true },
         style: { height: convertToUnit(this.height) },
         onClick: this.onClick,
         onMousedown: this.onMouseDown,
@@ -263,9 +276,9 @@ export default baseMixins.extend({
         color: this.hasHint ? '' : this.validationState,
         dark: this.dark,
         light: this.light,
-        value: this.messagesToDisplay,
+        modelValue: this.messagesToDisplay,
         role: this.hasMessages ? 'alert' : null,
-      }, {default: getSlot(this, 'message') })
+      }, { default: getSlot(this, 'message') })
     },
     genSlot (
       type: string,

package/src/components/VList/VListGroup.ts

@@ -24,6 +24,7 @@ import { VExpandTransition } from '../transitions'
 // Utils
 import mixins, { ExtractVue } from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import { Route } from 'vue-router'
@@ -85,17 +86,18 @@ export default baseMixins.extend({
     },
   },
 
-  watch: {
-    isActive (val: boolean) {
-      /* istanbul ignore else */
-      if (!this.subGroup && val) {
-        this.list && this.list.listClick(this.$.uid)
-      }
-    },
-    $route: 'onRouteChange',
-  },
-
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['inputValue', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     this.list && this.list.register(this)
 
     if (this.group &&
@@ -106,6 +108,16 @@ export default baseMixins.extend({
     }
   },
 
+  watch: {
+    isActive (val: boolean) {
+      /* istanbul ignore else */
+      if (!this.subGroup && val) {
+        this.list && this.list.listClick(this.$.uid)
+      }
+    },
+    $route: 'onRouteChange',
+  },
+
   beforeUnmount () {
     this.list && this.list.unregister(this)
   },

package/src/components/VList/VListItem.ts

@@ -16,7 +16,7 @@ import Ripple from '../../directives/ripple'
 import { getSlot, keyCodes } from './../../util/helpers'
 import mergeData, { mergeClasses } from './../../util/mergeData'
 import { ExtractVue } from './../../util/mixins'
-import { removed } from '../../util/console'
+import { removed, breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
@@ -118,6 +118,15 @@ export default baseMixins.extend({
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('avatar')) {
       removed('avatar', this)

package/src/components/VMenu/VMenu.ts

@@ -20,7 +20,7 @@ import Resize from '../../directives/resize'
 
 // Utilities
 import mixins from '../../util/mixins'
-import { removed } from '../../util/console'
+import { removed, breaking } from '../../util/console'
 import {
   convertToUnit,
   keyCodes,
@@ -82,9 +82,17 @@ export default baseMixins.extend({
       type: Object as PropType<Record<string, any>>,
       default: () => ({}),
     },
+    onScroll: {
+      type: Function as PropType<(event: Event) => void>,
+      default: undefined,
+    },
   },
 
-  emits: ['keydown'],
+  emits: [
+    'keydown',
+    'update:modelValue',
+    'update:return-value',
+  ],
 
   data () {
     return {
@@ -111,7 +119,7 @@ export default baseMixins.extend({
     },
     calculatedMaxHeight (): string {
       const height = this.auto
-        ? '200px'
+        ? '220px'
         : convertToUnit(this.maxHeight)
 
       return height || '0'
@@ -198,6 +206,16 @@ export default baseMixins.extend({
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('full-width')) {
       removed('full-width', this)