@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle2

package/src/components/VDataTable/__tests__/VVirtualTable.spec.ts

@@ -23,7 +23,7 @@ describe('VVirtualTable.ts', () => {
         items: ['a', 'b', 'c'],
       },
       scopedSlots: {
-        items: props => vm.$createElement('div', { class: 'test' }, [JSON.stringify(props)]),
+        items: props => vm.$createElement('div', { staticClass: 'test' }, [JSON.stringify(props)]),
       },
     })
 
@@ -37,7 +37,7 @@ describe('VVirtualTable.ts', () => {
       },
       scopedSlots: {
         items (props) {
-          return h('div', props.items.map(i => h('div', [i])))
+          return this.$createElement('div', props.items.map(i => this.$createElement('div', [i])))
         },
       },
     })

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

@@ -71,9 +71,9 @@ describe('VDataTable/header.ts', () => {
       },
       scopedSlots: {
         'data-table-select' (props) {
-          return h('div', {
+          return this.$createElement('div', {
             on: props.on,
-            class: 'test',
+            staticClass: 'test',
           }, [JSON.stringify(props)])
         },
       },

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

@@ -3,7 +3,7 @@ import VIcon from '../../VIcon'
 import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'
 import ripple from '../../../directives/ripple'
 
-import {defineComponent, h} from 'vue'
+import Vue from 'vue'
 import { PropValidator } from 'vue/types/options'
 import mixins from '../../../util/mixins'
 import { DataOptions, DataTableHeader } from 'vuetify/types'
@@ -53,25 +53,31 @@ export default mixins<options>().extend({
   methods: {
     genSelectAll () {
       const data = {
-        value: this.everyItem,
-        indeterminate: !this.everyItem && this.someItems,
-        color: this.checkboxColor ?? ''
-        onInput: (v: boolean) => this.$emit('toggle-select-all', v),
+        props: {
+          value: this.everyItem,
+          indeterminate: !this.everyItem && this.someItems,
+          color: this.checkboxColor ?? '',
+        },
+        on: {
+          input: (v: boolean) => this.$emit('toggle-select-all', v),
+        },
       }
 
-      if (this.$slots['data-table-select']) {
-        return this.$slots['data-table-select']!(data)
+      if (this.$scopedSlots['data-table-select']) {
+        return this.$scopedSlots['data-table-select']!(data)
       }
 
-      return h(VSimpleCheckbox, {
-        class: 'v-data-table__checkbox',
+      return this.$createElement(VSimpleCheckbox, {
+        staticClass: 'v-data-table__checkbox',
         ...data,
       })
     },
     genSortIcon () {
-      return h(VIcon, {
-        class: 'v-data-table-header__icon',
-        size: 18,
+      return this.$createElement(VIcon, {
+        staticClass: 'v-data-table-header__icon',
+        props: {
+          size: 18,
+        },
       }, [this.sortIcon])
     },
   },

package/src/components/VDatePicker/VDatePicker.ts

@@ -27,7 +27,7 @@ import {
   PropType,
   PropValidator,
 } from 'vue/types/options'
-import { VNode, h } from 'vue'
+import { VNode } from 'vue'
 import {
   DatePickerFormatter,
   DatePickerMultipleFormatter,
@@ -127,7 +127,7 @@ export default mixins(
       default: 'date',
       validator: (type: any) => ['date', 'month'].includes(type), // TODO: year
     } as PropValidator<DatePickerType>,
-    modelValue: [Array, String] as PropType<DatePickerValue>,
+    value: [Array, String] as PropType<DatePickerValue>,
     weekdayFormat: Function as PropType<DatePickerFormatter | undefined>,
     // Function formatting the year in table header and pickup title
     yearFormat: Function as PropType<DatePickerFormatter | undefined>,
@@ -149,7 +149,7 @@ export default mixins(
           return this.pickerDate
         }
 
-        const multipleValue = wrapInArray(this.modelValue)
+        const multipleValue = wrapInArray(this.value)
         const date = multipleValue[multipleValue.length - 1] ||
           (typeof this.showCurrent === 'string' ? this.showCurrent : `${now.getFullYear()}-${now.getMonth() + 1}`)
         return sanitizeDateString(date as string, this.type === 'date' ? 'month' : 'year')
@@ -159,21 +159,21 @@ export default mixins(
 
   computed: {
     multipleValue (): string[] {
-      return wrapInArray(this.modelValue)
+      return wrapInArray(this.value)
     },
     isMultiple (): boolean {
       return this.multiple || this.range
     },
     lastValue (): string | null {
-      return this.isMultiple ? this.multipleValue[this.multipleValue.length - 1] : (this.modelValue as string | null)
+      return this.isMultiple ? this.multipleValue[this.multipleValue.length - 1] : (this.value as string | null)
     },
     selectedMonths (): string | string[] | undefined {
-      if (!this.modelValue || this.type === 'month') {
-        return this.modelValue
+      if (!this.value || this.type === 'month') {
+        return this.value
       } else if (this.isMultiple) {
         return this.multipleValue.map(val => val.substr(0, 7))
       } else {
-        return (this.modelValue as string).substr(0, 7)
+        return (this.value as string).substr(0, 7)
       }
     },
     current (): string | null {
@@ -277,7 +277,7 @@ export default mixins(
       this.setInputDate()
 
       if (
-        (!this.isMultiple && this.modelValue && !this.pickerDate) ||
+        (!this.isMultiple && this.value && !this.pickerDate) ||
         (this.isMultiple && this.multipleValue.length && (!oldValue || !oldValue.length) && !this.pickerDate)
       ) {
         this.tableDate = sanitizeDateString(this.inputDate, this.type === 'month' ? 'year' : 'month')
@@ -286,7 +286,7 @@ export default mixins(
     type (type: DatePickerType) {
       this.internalActivePicker = type.toUpperCase()
 
-      if (this.modelValue && this.modelValue.length) {
+      if (this.value && this.value.length) {
         const output = this.multipleValue
           .map((val: string) => sanitizeDateString(val, type))
           .filter(this.isDateAllowed)
@@ -329,8 +329,8 @@ export default mixins(
       this.multiple || this.$emit('change', newInput)
     },
     checkMultipleProp () {
-      if (this.modelValue == null) return
-      const valueType = this.modelValue.constructor.name
+      if (this.value == null) return
+      const valueType = this.value.constructor.name
       const expected = this.isMultiple ? 'Array' : 'String'
       if (valueType !== expected) {
         consoleWarn(`Value must be ${this.isMultiple ? 'an' : 'a'} ${expected}, got ${valueType}`, this)
@@ -381,14 +381,16 @@ export default mixins(
       this.emitInput(this.inputDate)
     },
     genPickerTitle (): VNode {
-      return h(VDatePickerTitle, {
-        date: this.modelValue ? (this.formatters.titleDate as (value: any) => string)(this.isMultiple ? this.multipleValue : this.modelValue) : '',
-        disabled: this.disabled,
-        readonly: this.readonly,
-        selectingYear: this.internalActivePicker === 'YEAR',
-        year: this.formatters.year(this.multipleValue.length ? `${this.inputYear}` : this.tableDate),
-        yearIcon: this.yearIcon,
-        value: this.multipleValue[0],
+      return this.$createElement(VDatePickerTitle, {
+        props: {
+          date: this.value ? (this.formatters.titleDate as (value: any) => string)(this.isMultiple ? this.multipleValue : this.value) : '',
+          disabled: this.disabled,
+          readonly: this.readonly,
+          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(),
@@ -396,88 +398,102 @@ export default mixins(
       })
     },
     genTableHeader (): VNode {
-      return h(VDatePickerHeader, {
-        nextIcon: this.nextIcon,
-        color: this.color,
-        dark: this.dark,
-        disabled: this.disabled,
-        format: this.headerDateFormat,
-        light: this.light,
-        locale: this.locale,
-        min: this.internalActivePicker === 'DATE' ? this.minMonth : this.minYear,
-        max: this.internalActivePicker === 'DATE' ? this.maxMonth : this.maxYear,
-        nextAriaLabel: this.internalActivePicker === 'DATE' ? this.nextMonthAriaLabel : this.nextYearAriaLabel,
-        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)}`,
-        onToggle: () => this.internalActivePicker = (this.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR'),
-        onInput: (value: string) => this.tableDate = value,
+      return this.$createElement(VDatePickerHeader, {
+        props: {
+          nextIcon: this.nextIcon,
+          color: this.color,
+          dark: this.dark,
+          disabled: this.disabled,
+          format: this.headerDateFormat,
+          light: this.light,
+          locale: this.locale,
+          min: this.internalActivePicker === 'DATE' ? this.minMonth : this.minYear,
+          max: this.internalActivePicker === 'DATE' ? this.maxMonth : this.maxYear,
+          nextAriaLabel: this.internalActivePicker === 'DATE' ? this.nextMonthAriaLabel : this.nextYearAriaLabel,
+          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)}`,
+        },
+        on: {
+          toggle: () => this.internalActivePicker = (this.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR'),
+          input: (value: string) => this.tableDate = value,
+        },
       })
     },
     genDateTable (): VNode {
-      return h(VDatePickerDateTable, {
-        allowedDates: this.allowedDates,
-        color: this.color,
-        current: this.current,
-        dark: this.dark,
-        disabled: this.disabled,
-        events: this.events,
-        eventColor: this.eventColor,
-        firstDayOfWeek: this.firstDayOfWeek,
-        format: this.dayFormat,
-        light: this.light,
-        locale: this.locale,
-        localeFirstDayOfYear: this.localeFirstDayOfYear,
-        min: this.min,
-        max: this.max,
-        range: this.range,
-        readonly: this.readonly,
-        scrollable: this.scrollable,
-        showAdjacentMonths: this.showAdjacentMonths,
-        showWeek: this.showWeek,
-        tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
-        value: this.modelValue,
-        weekdayFormat: this.weekdayFormat,
+      return this.$createElement(VDatePickerDateTable, {
+        props: {
+          allowedDates: this.allowedDates,
+          color: this.color,
+          current: this.current,
+          dark: this.dark,
+          disabled: this.disabled,
+          events: this.events,
+          eventColor: this.eventColor,
+          firstDayOfWeek: this.firstDayOfWeek,
+          format: this.dayFormat,
+          light: this.light,
+          locale: this.locale,
+          localeFirstDayOfYear: this.localeFirstDayOfYear,
+          min: this.min,
+          max: this.max,
+          range: this.range,
+          readonly: this.readonly,
+          scrollable: this.scrollable,
+          showAdjacentMonths: this.showAdjacentMonths,
+          showWeek: this.showWeek,
+          tableDate: `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}`,
+          value: this.value,
+          weekdayFormat: this.weekdayFormat,
+        },
         ref: 'table',
-        onInput: this.dateClick,
-        'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':date')
+        on: {
+          input: this.dateClick,
+          'update:table-date': (value: string) => this.tableDate = value,
+          ...createItemTypeListeners(this, ':date'),
+        },
       })
     },
     genMonthTable (): VNode {
-      return h(VDatePickerMonthTable, {
-        allowedDates: this.type === 'month' ? this.allowedDates : null,
-        color: this.color,
-        current: this.current ? sanitizeDateString(this.current, 'month') : null,
-        dark: this.dark,
-        disabled: this.disabled,
-        events: this.type === 'month' ? this.events : null,
-        eventColor: this.type === 'month' ? this.eventColor : null,
-        format: this.monthFormat,
-        light: this.light,
-        locale: this.locale,
-        min: this.minMonth,
-        max: this.maxMonth,
-        range: this.range,
-        readonly: this.readonly && this.type === 'month',
-        scrollable: this.scrollable,
-        value: this.selectedMonths,
-        tableDate: `${pad(this.tableYear, 4)}`,
+      return this.$createElement(VDatePickerMonthTable, {
+        props: {
+          allowedDates: this.type === 'month' ? this.allowedDates : null,
+          color: this.color,
+          current: this.current ? sanitizeDateString(this.current, 'month') : null,
+          dark: this.dark,
+          disabled: this.disabled,
+          events: this.type === 'month' ? this.events : null,
+          eventColor: this.type === 'month' ? this.eventColor : null,
+          format: this.monthFormat,
+          light: this.light,
+          locale: this.locale,
+          min: this.minMonth,
+          max: this.maxMonth,
+          range: this.range,
+          readonly: this.readonly && this.type === 'month',
+          scrollable: this.scrollable,
+          value: this.selectedMonths,
+          tableDate: `${pad(this.tableYear, 4)}`,
+        },
         ref: 'table',
-        onInput: this.monthClick,
-        'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, ':month')
+        on: {
+          input: this.monthClick,
+          'update:table-date': (value: string) => this.tableDate = value,
+          ...createItemTypeListeners(this, ':month'),
+        },
       })
     },
     genYears (): VNode {
-      return h(VDatePickerYears, {
-        color: this.color,
-        format: this.yearFormat,
-        locale: this.locale,
-        min: this.minYear,
-        max: this.maxYear,
-        value: this.tableYear,
+      return this.$createElement(VDatePickerYears, {
+        props: {
+          color: this.color,
+          format: this.yearFormat,
+          locale: this.locale,
+          min: this.minYear,
+          max: this.maxYear,
+          value: this.tableYear,
+        },
         on: {
           input: this.yearClick,
           ...createItemTypeListeners(this, ':year'),
@@ -492,7 +508,7 @@ export default mixins(
         this.internalActivePicker === 'DATE' ? this.genDateTable() : this.genMonthTable(),
       ]
 
-      return h('div', {
+      return this.$createElement('div', {
         key: this.internalActivePicker,
       }, children)
     },

package/src/components/VDatePicker/VDatePickerDateTable.ts

@@ -8,7 +8,7 @@ import { createRange } from '../../util/helpers'
 import mixins from '../../util/mixins'
 
 // Types
-import { VNode, VNodeChildren, PropType, h } from 'vue'
+import { VNode, VNodeChildren, PropType } from 'vue'
 import { DatePickerFormatter } from 'vuetify/types'
 
 export default mixins(
@@ -52,12 +52,12 @@ export default mixins(
       return monthChange(this.tableDate, Math.sign(delta || 1))
     },
     genTHead () {
-      const days = this.weekDays.map(day => h('th', day))
+      const days = this.weekDays.map(day => this.$createElement('th', day))
       if (this.showWeek) {
-        days.unshift(h('th'))
+        days.unshift(this.$createElement('th'))
       }
 
-      return h('thead', this.genTR(days))
+      return this.$createElement('thead', this.genTR(days))
     },
     // Returns number of the days from the firstDayOfWeek to the first day of the current month
     weekDaysBeforeFirstDayOfTheMonth () {
@@ -76,9 +76,9 @@ export default mixins(
       )
     },
     genWeekNumber (weekNumber: number) {
-      return h('td', [
-        h('small', {
-          class: 'v-date-picker-table--date__week',
+      return this.$createElement('td', [
+        this.$createElement('small', {
+          staticClass: 'v-date-picker-table--date__week',
         }, String(weekNumber).padStart(2, '0')),
       ])
     },
@@ -101,7 +101,7 @@ export default mixins(
       while (day--) {
         const date = `${prevMonthYear}-${pad(prevMonth + 1)}-${pad(firstDayFromPreviousMonth - day)}`
 
-        rows.push(h('td', this.showAdjacentMonths ? [
+        rows.push(this.$createElement('td', this.showAdjacentMonths ? [
           this.genButton(date, true, 'date', this.formatter, true),
         ] : []))
       }
@@ -109,7 +109,7 @@ export default mixins(
       for (day = 1; day <= daysInMonth; day++) {
         const date = `${this.displayedYear}-${pad(this.displayedMonth + 1)}-${pad(day)}`
 
-        rows.push(h('td', [
+        rows.push(this.$createElement('td', [
           this.genButton(date, true, 'date', this.formatter),
         ]))
 
@@ -129,7 +129,7 @@ export default mixins(
       while (rows.length < cellsInRow) {
         const date = `${nextMonthYear}-${pad(nextMonth + 1)}-${pad(nextMonthDay++)}`
 
-        rows.push(h('td', this.showAdjacentMonths ? [
+        rows.push(this.$createElement('td', this.showAdjacentMonths ? [
           this.genButton(date, true, 'date', this.formatter, true),
         ] : []))
       }
@@ -138,10 +138,10 @@ export default mixins(
         children.push(this.genTR(rows))
       }
 
-      return h('tbody', children)
+      return this.$createElement('tbody', children)
     },
     genTR (children: VNodeChildren) {
-      return [h('tr', children)]
+      return [this.$createElement('tr', children)]
     },
   },
 

package/src/components/VDatePicker/VDatePickerHeader.ts

@@ -15,7 +15,7 @@ import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, PropType, Transition, h } from 'vue'
+import { VNode, PropType } from 'vue'
 import { DatePickerFormatter } from 'vuetify/types'
 
 export default mixins(
@@ -80,18 +80,22 @@ export default mixins(
         (change < 0 && this.min && this.calculateChange(change) < this.min) ||
         (change > 0 && this.max && this.calculateChange(change) > this.max)
 
-      return h(VBtn, {
-        'aria-label': ariaLabel,
-        dark: this.dark,
-        disabled,
-        icon: true,
-        light: this.light,
-        onClick: (e: Event) => {
-          e.stopPropagation()
-          this.$emit('input', this.calculateChange(change))
-        }
+      return this.$createElement(VBtn, {
+        attrs: { 'aria-label': ariaLabel },
+        props: {
+          dark: this.dark,
+          disabled,
+          icon: true,
+          light: this.light,
+        },
+        on: {
+          click: (e: Event) => {
+            e.stopPropagation()
+            this.$emit('input', this.calculateChange(change))
+          },
+        },
       }, [
-        h(VIcon, ((change < 0) === !this.$vuetify.rtl) ? this.prevIcon : this.nextIcon),
+        this.$createElement(VIcon, ((change < 0) === !this.$vuetify.rtl) ? this.prevIcon : this.nextIcon),
       ])
     },
     calculateChange (sign: number) {
@@ -105,31 +109,39 @@ export default mixins(
     },
     genHeader () {
       const color = !this.disabled && (this.color || 'accent')
-      const header = h('div', this.setTextColor(color, {
+      const header = this.$createElement('div', this.setTextColor(color, {
         key: String(this.value),
-      }), [h('button', {
-        type: 'button',
-        onClick: () => this.$emit('toggle'),
+      }), [this.$createElement('button', {
+        attrs: {
+          type: 'button',
+        },
+        on: {
+          click: () => this.$emit('toggle'),
+        },
       }, getSlot(this) || [this.formatter(String(this.value))])])
 
-      const transition = h(Transition, {
-        name: (this.isReversing === !this.$vuetify.rtl) ? 'tab-reverse-transition' : 'tab-transition',
+      const transition = this.$createElement('transition', {
+        props: {
+          name: (this.isReversing === !this.$vuetify.rtl) ? 'tab-reverse-transition' : 'tab-transition',
+        },
       }, [header])
 
-      return h('div', {
-        class: ['v-date-picker-header__value', {
+      return this.$createElement('div', {
+        staticClass: 'v-date-picker-header__value',
+        class: {
           'v-date-picker-header__value--disabled': this.disabled,
-        }]
+        },
       }, [transition])
     },
   },
 
   render (): VNode {
-    return h('div', {
-      class: ['v-date-picker-header', {
+    return this.$createElement('div', {
+      staticClass: 'v-date-picker-header',
+      class: {
         'v-date-picker-header--disabled': this.disabled,
         ...this.themeClasses,
-      }]
+      },
     }, [
       this.genBtn(-1),
       this.genHeader(),

package/src/components/VDatePicker/VDatePickerMonthTable.ts

@@ -34,19 +34,19 @@ export default mixins(
         const tds = cols.map((_, col) => {
           const month = row * cols.length + col
           const date = `${this.displayedYear}-${pad(month + 1)}`
-          return h('td', {
+          return this.$createElement('td', {
             key: month,
           }, [
             this.genButton(date, false, 'month', this.formatter),
           ])
         })
 
-        children.push(h('tr', {
+        children.push(this.$createElement('tr', {
           key: row,
         }, tds))
       }
 
-      return h('tbody', children)
+      return this.$createElement('tbody', children)
     },
   },
 

package/src/components/VDatePicker/VDatePickerTitle.ts

@@ -1,4 +1,3 @@
-import {h, Transition} from 'vue'
 import './VDatePickerTitle.sass'
 
 // Components
@@ -57,8 +56,10 @@ export default mixins(
 
   methods: {
     genYearIcon (): VNode {
-      return h(VIcon, {
-        dark: true,
+      return this.$createElement(VIcon, {
+        props: {
+          dark: true,
+        },
       }, this.yearIcon)
     },
     getYearBtn (): VNode {
@@ -68,12 +69,14 @@ export default mixins(
       ], false, 'v-date-picker-title__year')
     },
     genTitleText (): VNode {
-      return h(Transition, {
-        name: this.computedTransition,
+      return this.$createElement('transition', {
+        props: {
+          name: this.computedTransition,
+        },
       }, [
-        h('div', {
-          innerHTML: this.date || ' ',
-          key: this.value
+        this.$createElement('div', {
+          domProps: { innerHTML: this.date || ' ' },
+          key: this.value,
         }),
       ])
     },
@@ -82,11 +85,12 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-date-picker-title', {
+      staticClass: 'v-date-picker-title',
+      class: {
         'v-date-picker-title--disabled': this.disabled,
-      }]
+      },
     }, [
       this.getYearBtn(),
       this.genTitleDate(),

package/src/components/VDatePicker/VDatePickerYears.ts

@@ -75,7 +75,7 @@ export default mixins<options &
       const active = parseInt(this.value, 10) === year
       const color = active && (this.color || 'primary')
 
-      return h('li', this.setTextColor(color, {
+      return this.$createElement('li', this.setTextColor(color, {
         key: year,
         class: { active },
         on: mergeListeners({
@@ -99,8 +99,8 @@ export default mixins<options &
   },
 
   render (): VNode {
-    return h('ul', {
-      class: 'v-date-picker-years',
+    return this.$createElement('ul', {
+      staticClass: 'v-date-picker-years',
       ref: 'years',
     }, this.genYearItems())
   },