@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VDataTable/index.ts

@@ -17,6 +17,6 @@ export default {
     VEditDialog,
     VTableOverflow,
     VSimpleTable,
-    VVirtualTable,
-  },
+    VVirtualTable
+  }
 }

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

@@ -3,7 +3,7 @@ import {
   mount,
   MountingOptions,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { h } from 'vue'
 import { wrapInArray } from '../../../../util/helpers'
@@ -19,12 +19,12 @@ describe('VDataTable/header.ts', () => {
       return mount(Header, {
         props: {
           headers: [],
-          ...options.props,
+          ...options.props
         },
         render (h) {
           return h('div')
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -32,11 +32,11 @@ describe('VDataTable/header.ts', () => {
   it('should generate sort icon', async () => {
     const wrapper = mountFunction({
       props: {
-        sortIcon: 'mdi-sort',
+        sortIcon: 'mdi-sort'
       },
       render () {
         return this.genSortIcon()
-      },
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -46,24 +46,24 @@ describe('VDataTable/header.ts', () => {
     const wrapper = mountFunction({
       render () {
         return h('div', wrapInArray(this.genSelectAll()))
-      },
+      }
     })
 
     wrapper.setProps({
       everyItem: false,
-      someItems: false,
+      someItems: false
     })
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({
       everyItem: true,
-      someItems: false,
+      someItems: false
     })
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({
       everyItem: false,
-      someItems: true,
+      someItems: true
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -77,27 +77,27 @@ describe('VDataTable/header.ts', () => {
         'data-table-select' (props) {
           return h('div', {
             onClick: () => props['onUpdate:modelValue'](true),
-            class: 'test',
+            class: 'test'
           }, [JSON.stringify(props)])
-        },
-      },
+        }
+      }
     })
 
     wrapper.setProps({
       everyItem: false,
-      someItems: false,
+      someItems: false
     })
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({
       everyItem: true,
-      someItems: false,
+      someItems: false
     })
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.setProps({
       everyItem: false,
-      someItems: true,
+      someItems: true
     })
     expect(wrapper.html()).toMatchSnapshot()
 

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

@@ -3,8 +3,7 @@ import VIcon from '../../VIcon'
 import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'
 import ripple from '../../../directives/ripple'
 
-import { defineComponent, h } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import { defineComponent, h, PropType } from 'vue'
 import mixins from '../../../util/mixins'
 import { DataOptions, DataTableHeader } from 'vuetify/types'
 
@@ -14,13 +13,13 @@ interface HeaderOptions {
   dataTable: VDataTableInstance
 }
 
-export default mixins<HeaderOptions>().extend({
+export default mixins().extend({
 
   props: {
     headers: {
       type: Array,
-      default: () => ([]),
-    } as PropValidator<DataTableHeader[]>,
+      default: () => ([])
+    } as unknown as PropType<DataTableHeader[]>,
     options: {
       type: Object,
       default: () => ({
@@ -31,19 +30,19 @@ export default mixins<HeaderOptions>().extend({
         groupBy: [],
         groupDesc: [],
         multiSort: false,
-        mustSort: false,
-      }),
-    } as PropValidator<DataOptions>,
+        mustSort: false
+      })
+    } as unknown as PropType<DataOptions>,
     checkboxColor: String,
     sortIcon: {
       type: String,
-      default: '$sort',
+      default: '$sort'
     },
     everyItem: Boolean,
     someItems: Boolean,
     showGroupBy: Boolean,
     singleSelect: Boolean,
-    disableSort: Boolean,
+    disableSort: Boolean
   },
 
   methods: {
@@ -61,14 +60,14 @@ export default mixins<HeaderOptions>().extend({
 
       return h(VSimpleCheckbox, {
         class: 'v-data-table__checkbox',
-        ...data,
+        ...data
       })
     },
     genSortIcon () {
       return h(VIcon, {
         class: 'v-data-table-header__icon',
-        size: 18,
+        size: 18
       }, () => [this.sortIcon])
-    },
-  },
+    }
+  }
 })

package/src/components/VDatePicker/VDatePicker.ts

@@ -19,22 +19,19 @@ import {
   createItemTypeListeners,
   createNativeLocaleFormatter,
   pad,
-  sanitizeDateString,
+  sanitizeDateString
 } from './util'
 
 // Types
-import {
-  PropType,
-  PropValidator,
-} from 'vue/types/options'
-import { VNode, h } from 'vue'
+import type { PropType, VNode } from 'vue'
+import { h } from 'vue'
 import {
   DatePickerFormatter,
   DatePickerMultipleFormatter,
   DatePickerAllowedDatesFunction,
   DatePickerEventColors,
   DatePickerEvents,
-  DatePickerType,
+  DatePickerType
 } from 'vuetify/types'
 
 type DatePickerValue = string | string[] | undefined
@@ -47,7 +44,7 @@ type ActivePicker = 'DATE' | 'MONTH' | 'YEAR';
 
 export default mixins(
   Localable,
-  Picker,
+  Picker
 /* @vue/component */
 ).extend({
   name: 'v-date-picker',
@@ -60,21 +57,21 @@ export default mixins(
     disabled: Boolean,
     events: {
       type: [Array, Function, Object],
-      default: () => null,
-    } as PropValidator<DatePickerEvents | null>,
+      default: () => null
+    } as unknown as PropType<DatePickerEvents | null>,
     eventColor: {
       type: [Array, Function, Object, String],
-      default: () => 'warning',
-    } as PropValidator<DatePickerEventColors>,
+      default: () => 'warning'
+    } as unknown as PropType<DatePickerEventColors>,
     firstDayOfWeek: {
       type: [String, Number],
-      default: 0,
+      default: 0
     },
     // Function formatting the tableDate in the day/month table header
     headerDateFormat: Function as PropType<DatePickerFormatter | undefined>,
     localeFirstDayOfYear: {
       type: [String, Number],
-      default: 0,
+      default: 0
     },
     max: String,
     min: String,
@@ -83,28 +80,28 @@ export default mixins(
     multiple: Boolean,
     nextIcon: {
       type: String,
-      default: '$next',
+      default: '$next'
     },
     nextMonthAriaLabel: {
       type: String,
-      default: '$vuetify.datePicker.nextMonthAriaLabel',
+      default: '$vuetify.datePicker.nextMonthAriaLabel'
     },
     nextYearAriaLabel: {
       type: String,
-      default: '$vuetify.datePicker.nextYearAriaLabel',
+      default: '$vuetify.datePicker.nextYearAriaLabel'
     },
     pickerDate: String,
     prevIcon: {
       type: String,
-      default: '$prev',
+      default: '$prev'
     },
     prevMonthAriaLabel: {
       type: String,
-      default: '$vuetify.datePicker.prevMonthAriaLabel',
+      default: '$vuetify.datePicker.prevMonthAriaLabel'
     },
     prevYearAriaLabel: {
       type: String,
-      default: '$vuetify.datePicker.prevYearAriaLabel',
+      default: '$vuetify.datePicker.prevYearAriaLabel'
     },
     range: Boolean,
     reactive: Boolean,
@@ -112,11 +109,11 @@ export default mixins(
     scrollable: Boolean,
     showCurrent: {
       type: [Boolean, String],
-      default: true,
+      default: true
     },
     selectedItemsText: {
       type: String,
-      default: '$vuetify.datePicker.itemsSelected',
+      default: '$vuetify.datePicker.itemsSelected'
     },
     showAdjacentMonths: Boolean,
     showWeek: Boolean,
@@ -125,20 +122,20 @@ export default mixins(
     type: {
       type: String,
       default: 'date',
-      validator: (type: any) => ['date', 'month'].includes(type), // TODO: year
-    } as PropValidator<DatePickerType>,
+      validator: (type: any) => ['date', 'month'].includes(type) // TODO: year
+    } as unknown as PropType<DatePickerType>,
     modelValue: [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>,
-    yearIcon: String,
+    yearIcon: String
   },
 
   emits: [
     'update:modelValue',
     'change',
     'update:active-picker',
-    'update:picker-date',
+    'update:picker-date'
   ],
 
   data () {
@@ -160,7 +157,7 @@ export default mixins(
         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')
-      })(),
+      })()
     }
   },
 
@@ -217,7 +214,7 @@ export default mixins(
       return {
         year: this.yearFormat || createNativeLocaleFormatter(this.currentLocale, { year: 'numeric', timeZone: 'UTC' }, { length: 4 }),
         titleDate: this.titleDateFormat ||
-          (this.isMultiple ? this.defaultTitleMultipleDateFormatter : this.defaultTitleDateFormatter),
+          (this.isMultiple ? this.defaultTitleMultipleDateFormatter : this.defaultTitleDateFormatter)
       }
     },
     defaultTitleMultipleDateFormatter (): DatePickerMultipleFormatter {
@@ -237,12 +234,12 @@ export default mixins(
       const titleFormats = {
         year: { year: 'numeric', timeZone: 'UTC' },
         month: { month: 'long', timeZone: 'UTC' },
-        date: { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' },
+        date: { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }
       } as const
 
       const titleDateFormatter = createNativeLocaleFormatter(this.currentLocale, titleFormats[this.type], {
         start: 0,
-        length: { date: 10, month: 7, year: 4 }[this.type],
+        length: { date: 10, month: 7, year: 4 }[this.type]
       })
 
       const landscapeFormatter = (date: string) => titleDateFormatter(date)
@@ -250,7 +247,7 @@ export default mixins(
         .replace(', ', ',<br>')
 
       return this.landscape ? landscapeFormatter : titleDateFormatter
-    },
+    }
   },
 
   watch: {
@@ -258,7 +255,7 @@ export default mixins(
       immediate: true,
       handler (val: ActivePicker) {
         this.$emit('update:active-picker', val)
-      },
+      }
     },
     activePicker (val: ActivePicker) {
       this.internalActivePicker = val
@@ -299,13 +296,13 @@ export default mixins(
           .filter(this.isDateAllowed)
         this.$emit('update:modelValue', this.isMultiple ? output : output[0])
       }
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -344,10 +341,10 @@ export default mixins(
 
       const output = this.multiple
         ? (
-          this.multipleValue.indexOf(newInput) === -1
-            ? this.multipleValue.concat([newInput])
-            : this.multipleValue.filter(x => x !== newInput)
-        )
+            this.multipleValue.indexOf(newInput) === -1
+              ? this.multipleValue.concat([newInput])
+              : this.multipleValue.filter(x => x !== newInput)
+          )
         : newInput
 
       this.$emit('update:modelValue', output)
@@ -415,7 +412,7 @@ export default mixins(
         year: this.formatters.year(this.multipleValue.length ? `${this.inputYear}` : this.tableDate),
         yearIcon: this.yearIcon,
         modelValue: this.multipleValue.length ? this.multipleValue[0] : undefined,
-        'onUpdate:selecting-year': (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase(),
+        'onUpdate:selecting-year': (value: boolean) => this.internalActivePicker = value ? 'YEAR' : this.type.toUpperCase()
       })
     },
     genTableHeader (): VNode {
@@ -435,7 +432,7 @@ export default mixins(
         readonly: this.readonly,
         modelValue: this.internalActivePicker === 'DATE' ? `${pad(this.tableYear, 4)}-${pad(this.tableMonth + 1)}` : `${pad(this.tableYear, 4)}`,
         onToggle: () => this.internalActivePicker = (this.internalActivePicker === 'DATE' ? 'MONTH' : 'YEAR'),
-        'onUpdate:modelValue': (value: string) => this.tableDate = value,
+        'onUpdate:modelValue': (value: string) => this.tableDate = value
       })
     },
     genDateTable (): VNode {
@@ -465,7 +462,7 @@ export default mixins(
         ref: 'table',
         'onUpdate:modelValue': this.dateClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, 'Date'),
+        ...createItemTypeListeners(this, 'Date')
       })
     },
     genMonthTable (): VNode {
@@ -490,7 +487,7 @@ export default mixins(
         ref: 'table',
         'onUpdate:modelValue': this.monthClick,
         'onUpdate:table-date': (value: string) => this.tableDate = value,
-        ...createItemTypeListeners(this, 'Month'),
+        ...createItemTypeListeners(this, 'Month')
       })
     },
     genYears (): VNode {
@@ -502,19 +499,21 @@ export default mixins(
         max: this.maxYear,
         modelValue: this.tableYear,
         'onUpdate:modelValue': this.yearClick,
-        ...createItemTypeListeners(this, 'Year'),
+        ...createItemTypeListeners(this, 'Year')
       })
     },
     genPickerBody (): VNode {
-      const children = this.internalActivePicker === 'YEAR' ? [
-        this.genYears(),
-      ] : [
-        this.genTableHeader(),
-        this.internalActivePicker === 'DATE' ? this.genDateTable() : this.genMonthTable(),
-      ]
+      const children = this.internalActivePicker === 'YEAR'
+        ? [
+            this.genYears()
+          ]
+        : [
+            this.genTableHeader(),
+            this.internalActivePicker === 'DATE' ? this.genDateTable() : this.genMonthTable()
+          ]
 
       return h('div', {
-        key: this.internalActivePicker,
+        key: this.internalActivePicker
       }, children)
     },
     setInputDate () {
@@ -530,10 +529,10 @@ export default mixins(
         this.inputMonth = this.inputMonth == null ? this.inputMonth : this.now.getMonth()
         this.inputDay = this.inputDay || this.now.getDate()
       }
-    },
+    }
   },
 
   render (): VNode {
     return this.genPicker('v-picker--date')
-  },
+  }
 })

package/src/components/VDatePicker/VDatePickerDateTable.ts

@@ -8,7 +8,8 @@ import { createRange } from '../../util/helpers'
 import mixins from '../../util/mixins'
 
 // Types
-import { VNode, VNodeChildren, PropType, h } from 'vue'
+import { VNode, PropType, h } from 'vue'
+import type { VNodeChildren } from '../../types/vue-internal'
 import { DatePickerFormatter } from 'vuetify/types'
 
 export default mixins(
@@ -20,15 +21,15 @@ export default mixins(
   props: {
     firstDayOfWeek: {
       type: [String, Number],
-      default: 0,
+      default: 0
     },
     localeFirstDayOfYear: {
       type: [String, Number],
-      default: 0,
+      default: 0
     },
     showAdjacentMonths: Boolean,
     showWeek: Boolean,
-    weekdayFormat: Function as PropType<DatePickerFormatter | undefined>,
+    weekdayFormat: Function as PropType<DatePickerFormatter | undefined>
   },
 
   computed: {
@@ -44,7 +45,7 @@ export default mixins(
       return this.weekdayFormatter
         ? createRange(7).map(i => this.weekdayFormatter!(`2017-01-${first + i + 15}`)) // 2017-01-15 is Sunday
         : createRange(7).map(i => ['S', 'M', 'T', 'W', 'T', 'F', 'S'][(i + first) % 7])
-    },
+    }
   },
 
   methods: {
@@ -57,7 +58,7 @@ export default mixins(
         days.unshift(h('th'))
       }
 
-      return h('thead', this.genTR(days))
+      return h('thead', [this.genTR(days)])
     },
     // Returns number of the days from the firstDayOfWeek to the first day of the current month
     weekDaysBeforeFirstDayOfTheMonth () {
@@ -78,8 +79,8 @@ export default mixins(
     genWeekNumber (weekNumber: number) {
       return h('td', [
         h('small', {
-          class: 'v-date-picker-table--date__week',
-        }, String(weekNumber).padStart(2, '0')),
+          class: 'v-date-picker-table--date__week'
+        }, String(weekNumber).padStart(2, '0'))
       ])
     },
     // eslint-disable-next-line max-statements
@@ -101,16 +102,18 @@ export default mixins(
       while (day--) {
         const date = `${prevMonthYear}-${pad(prevMonth + 1)}-${pad(firstDayFromPreviousMonth - day)}`
 
-        rows.push(h('td', this.showAdjacentMonths ? [
-          this.genButton(date, true, 'date', this.formatter, true),
-        ] : []))
+        rows.push(h('td', this.showAdjacentMonths
+          ? [
+              this.genButton(date, true, 'date', this.formatter, true)
+            ]
+          : []))
       }
 
       for (day = 1; day <= daysInMonth; day++) {
         const date = `${this.displayedYear}-${pad(this.displayedMonth + 1)}-${pad(day)}`
 
         rows.push(h('td', [
-          this.genButton(date, true, 'date', this.formatter),
+          this.genButton(date, true, 'date', this.formatter)
         ]))
 
         if (rows.length % cellsInRow === 0) {
@@ -129,9 +132,11 @@ export default mixins(
       while (rows.length < cellsInRow) {
         const date = `${nextMonthYear}-${pad(nextMonth + 1)}-${pad(nextMonthDay++)}`
 
-        rows.push(h('td', this.showAdjacentMonths ? [
-          this.genButton(date, true, 'date', this.formatter, true),
-        ] : []))
+        rows.push(h('td', this.showAdjacentMonths
+          ? [
+              this.genButton(date, true, 'date', this.formatter, true)
+            ]
+          : []))
       }
 
       if (rows.length) {
@@ -140,15 +145,15 @@ export default mixins(
 
       return h('tbody', children)
     },
-    genTR (children: VNodeChildren) {
-      return [h('tr', children)]
-    },
+    genTR (children: VNodeChildren): VNode {
+      return h('tr', children as any)
+    }
   },
 
   render (): VNode {
     return this.genTable('v-date-picker-table v-date-picker-table--date', [
       this.genTHead(),
-      this.genTBody(),
+      this.genTBody()
     ], this.calculateTableDate)
-  },
+  }
 })