@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

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

@@ -3,22 +3,18 @@ import VIcon from '../../VIcon'
 import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'
 import ripple from '../../../directives/ripple'
 
-import {defineComponent, h} from 'vue'
+import { defineComponent, h } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import mixins from '../../../util/mixins'
 import { DataOptions, DataTableHeader } from 'vuetify/types'
 
 type VDataTableInstance = InstanceType<typeof VDataTable>
 
-interface options extends Vue {
+interface HeaderOptions {
   dataTable: VDataTableInstance
 }
 
-export default mixins<options>().extend({
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
+export default mixins<HeaderOptions>().extend({
 
   props: {
     headers: {
@@ -53,10 +49,10 @@ export default mixins<options>().extend({
   methods: {
     genSelectAll () {
       const data = {
-        value: this.everyItem,
+        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']) {
@@ -72,7 +68,7 @@ export default mixins<options>().extend({
       return h(VIcon, {
         class: 'v-data-table-header__icon',
         size: 18,
-      }, [this.sortIcon])
+      }, () => [this.sortIcon])
     },
   },
 })

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,
@@ -290,12 +290,22 @@ export default mixins(
         const output = this.multipleValue
           .map((val: string) => sanitizeDateString(val, type))
           .filter(this.isDateAllowed)
-        this.$emit('input', this.isMultiple ? output : output[0])
+        this.$emit('update:modelValue', this.isMultiple ? output : output[0])
       }
     },
   },
 
   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) {
@@ -308,10 +318,10 @@ export default mixins(
     emitInput (newInput: string) {
       if (this.range) {
         if (this.multipleValue.length !== 1) {
-          this.$emit('input', [newInput])
+          this.$emit('update:modelValue', [newInput])
         } else {
           const output = [this.multipleValue[0], newInput]
-          this.$emit('input', output)
+          this.$emit('update:modelValue', output)
           this.$emit('change', output)
         }
         return
@@ -325,7 +335,7 @@ export default mixins(
         )
         : newInput
 
-      this.$emit('input', output)
+      this.$emit('update:modelValue', output)
       this.multiple || this.$emit('change', newInput)
     },
     checkMultipleProp () {
@@ -348,7 +358,7 @@ export default mixins(
       }
       this.internalActivePicker = 'MONTH'
       if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
-        this.$emit('input', this.inputDate)
+        this.$emit('update:modelValue', this.inputDate)
       }
     },
     monthClick (value: string) {
@@ -365,7 +375,7 @@ export default mixins(
         this.tableDate = value
         this.internalActivePicker = 'DATE'
         if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
-          this.$emit('input', this.inputDate)
+          this.$emit('update:modelValue', this.inputDate)
         }
       } else {
         this.emitInput(this.inputDate)
@@ -388,11 +398,8 @@ export default mixins(
         selectingYear: this.internalActivePicker === 'YEAR',
         year: this.formatters.year(this.multipleValue.length ? `${this.inputYear}` : this.tableDate),
         yearIcon: this.yearIcon,
-        value: this.multipleValue[0],
-        slot: 'title',
-        on: {
-          'update:selecting-year': (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
-        },
+        modelValue: this.multipleValue[0],
+        onUpdateSelectingYear: (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
       })
     },
     genTableHeader (): VNode {
@@ -410,9 +417,9 @@ export default mixins(
         prevAriaLabel: this.internalActivePicker === 'DATE' ? this.prevMonthAriaLabel : this.prevYearAriaLabel,
         prevIcon: this.prevIcon,
         readonly: this.readonly,
-        value: this.internalActivePicker === 'DATE' ? `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}` : `${pad(this.tableYear, 4)}`,
+        modelValue: this.internalActivePicker === 'DATE' ? `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}` : `${pad(this.tableYear, 4)}`,
         onToggle: () => this.internalActivePicker = (this.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR'),
-        onInput: (value: string) => this.tableDate = value,
+        'onUpdate:modelValue': (value: string) => this.tableDate = value,
       })
     },
     genDateTable (): VNode {
@@ -437,12 +444,12 @@ export default mixins(
         showAdjacentMonths: this.showAdjacentMonths,
         showWeek: this.showWeek,
         tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
-        value: this.modelValue,
+        modelValue: this.modelValue,
         weekdayFormat: this.weekdayFormat,
         ref: 'table',
-        onInput: this.dateClick,
+        'onUpdate:modelValue': this.dateClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':date')
+        ...createItemTypeListeners(this, ':date'),
       })
     },
     genMonthTable (): VNode {
@@ -462,12 +469,12 @@ export default mixins(
         range: this.range,
         readonly: this.readonly && this.type === 'month',
         scrollable: this.scrollable,
-        value: this.selectedMonths,
+        modelValue: this.selectedMonths,
         tableDate: `${pad(this.tableYear, 4)}`,
         ref: 'table',
-        onInput: this.monthClick,
+        'onUpdate:modelValue': this.monthClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':month')
+        ...createItemTypeListeners(this, ':month'),
       })
     },
     genYears (): VNode {
@@ -477,11 +484,9 @@ export default mixins(
         locale: this.locale,
         min: this.minYear,
         max: this.maxYear,
-        value: this.tableYear,
-        on: {
-          input: this.yearClick,
-          ...createItemTypeListeners(this, ':year'),
-        },
+        modelValue: this.tableYear,
+        'onUpdate:modelValue': this.yearClick,
+        ...createItemTypeListeners(this, ':year'),
       })
     },
     genPickerBody (): VNode {

package/src/components/VDatePicker/VDatePickerHeader.ts

@@ -11,21 +11,18 @@ import Themeable from '../../mixins/themeable'
 
 // Utils
 import { createNativeLocaleFormatter, monthChange } from './util'
-import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
-import { VNode, PropType, Transition, h } from 'vue'
+import { VNode, PropType, Transition, h, defineComponent } from 'vue'
 import { DatePickerFormatter } from 'vuetify/types'
 
-export default mixins(
-  Colorable,
-  Localable,
-  Themeable
-/* @vue/component */
-).extend({
+export default defineComponent({
   name: 'v-date-picker-header',
 
+  mixins: [Colorable, Localable, Themeable],
+
   props: {
     disabled: Boolean,
     format: Function as PropType<DatePickerFormatter | undefined>,
@@ -42,12 +39,14 @@ export default mixins(
       default: '$prev',
     },
     readonly: Boolean,
-    value: {
+    modelValue: {
       type: [Number, String],
       required: true,
     },
   },
 
+  emits: ['update:modelValue', 'toggle'],
+
   data () {
     return {
       isReversing: false,
@@ -58,7 +57,7 @@ export default mixins(
     formatter (): DatePickerFormatter {
       if (this.format) {
         return this.format
-      } else if (String(this.value).split('-')[1]) {
+      } else if (String(this.modelValue).split('-')[1]) {
         return createNativeLocaleFormatter(this.currentLocale, { month: 'long', year: 'numeric', timeZone: 'UTC' }, { length: 7 })
       } else {
         return createNativeLocaleFormatter(this.currentLocale, { year: 'numeric', timeZone: 'UTC' }, { length: 4 })
@@ -66,8 +65,20 @@ 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: {
-    value (newVal, oldVal) {
+    modelValue (newVal, oldVal) {
       this.isReversing = newVal < oldVal
     },
   },
@@ -88,39 +99,51 @@ export default mixins(
         light: this.light,
         onClick: (e: Event) => {
           e.stopPropagation()
-          this.$emit('input', this.calculateChange(change))
-        }
-      }, [
-        h(VIcon, ((change < 0) === !this.$vuetify.rtl) ? this.prevIcon : this.nextIcon),
-      ])
+          this.$emit('update:modelValue', this.calculateChange(change))
+        },
+      }, {
+        default: () => [
+          h(VIcon, {}, {
+            default: () => (((change < 0) === !this.$vuetify.rtl) ? this.prevIcon : this.nextIcon),
+          }),
+        ],
+      })
     },
     calculateChange (sign: number) {
-      const [year, month] = String(this.value).split('-').map(Number)
+      const [year, month] = String(this.modelValue).split('-').map(Number)
 
       if (month == null) {
         return `${year + sign}`
       } else {
-        return monthChange(String(this.value), sign)
+        return monthChange(String(this.modelValue), sign)
       }
     },
     genHeader () {
       const color = !this.disabled && (this.color || 'accent')
       const header = h('div', this.setTextColor(color, {
-        key: String(this.value),
-      }), [h('button', {
-        type: 'button',
-        onClick: () => this.$emit('toggle'),
-      }, getSlot(this) || [this.formatter(String(this.value))])])
+        key: String(this.modelValue),
+      }), {
+        default: () => [h('button', {
+          type: 'button',
+          onClick: () => this.$emit('toggle'),
+        }, {
+          default: () => getSlot(this) || [this.formatter(String(this.modelValue))],
+        })],
+      })
 
       const transition = h(Transition, {
         name: (this.isReversing === !this.$vuetify.rtl) ? 'tab-reverse-transition' : 'tab-transition',
-      }, [header])
+      }, {
+        default: () => [header],
+      })
 
       return h('div', {
         class: ['v-date-picker-header__value', {
           'v-date-picker-header__value--disabled': this.disabled,
-        }]
-      }, [transition])
+        }],
+      }, {
+        default: () => [transition],
+      })
     },
   },
 
@@ -129,11 +152,13 @@ export default mixins(
       class: ['v-date-picker-header', {
         'v-date-picker-header--disabled': this.disabled,
         ...this.themeClasses,
-      }]
-    }, [
-      this.genBtn(-1),
-      this.genHeader(),
-      this.genBtn(+1),
-    ])
+      }],
+    }, {
+      default: () => [
+        this.genBtn(-1),
+        this.genHeader(),
+        this.genBtn(+1),
+      ],
+    })
   },
 })

package/src/components/VDatePicker/VDatePickerMonthTable.ts

@@ -6,7 +6,7 @@ import { pad, createNativeLocaleFormatter } from './util'
 import mixins from '../../util/mixins'
 
 // Types
-import { VNode } from 'vue'
+import { VNode, h } from 'vue'
 import { DatePickerFormatter } from 'vuetify/types'
 
 export default mixins(

package/src/components/VDatePicker/VDatePickerTitle.ts

@@ -1,4 +1,4 @@
-import {h, Transition} from 'vue'
+import { h, Transition } from 'vue'
 import './VDatePickerTitle.sass'
 
 // Components
@@ -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'
@@ -27,7 +28,7 @@ export default mixins(
     disabled: Boolean,
     readonly: Boolean,
     selectingYear: Boolean,
-    value: {
+    modelValue: {
       type: String,
     },
     year: {
@@ -39,6 +40,8 @@ export default mixins(
     },
   },
 
+  emits: ['update:selecting-year'],
+
   data: () => ({
     isReversing: false,
   }),
@@ -49,8 +52,19 @@ 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: {
-    value (val: string, prev: string) {
+    modelValue (val: string, prev: string) {
       this.isReversing = val < prev
     },
   },
@@ -59,7 +73,7 @@ export default mixins(
     genYearIcon (): VNode {
       return h(VIcon, {
         dark: true,
-      }, this.yearIcon)
+      }, () => this.yearIcon)
     },
     getYearBtn (): VNode {
       return this.genPickerButton('selectingYear', true, [
@@ -70,10 +84,10 @@ export default mixins(
     genTitleText (): VNode {
       return h(Transition, {
         name: this.computedTransition,
-      }, [
+      }, () => [
         h('div', {
           innerHTML: this.date || '&nbsp;',
-          key: this.value
+          key: this.modelValue,
         }),
       ])
     },
@@ -86,7 +100,7 @@ export default mixins(
     return h('div', {
       class: ['v-date-picker-title', {
         'v-date-picker-title--disabled': this.disabled,
-      }]
+      }],
     }, [
       this.getYearBtn(),
       this.genTitleDate(),