@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha27

package/src/components/VDatePicker/VDatePickerHeader.ts

@@ -11,21 +11,17 @@ import Themeable from '../../mixins/themeable'
 
 // Utils
 import { createNativeLocaleFormatter, monthChange } from './util'
-import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
 
 // 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 +38,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 +56,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 })
@@ -67,7 +65,7 @@ export default mixins(
   },
 
   watch: {
-    value (newVal, oldVal) {
+    modelValue (newVal, oldVal) {
       this.isReversing = newVal < oldVal
     },
   },
@@ -88,39 +86,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 +139,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
@@ -27,7 +27,7 @@ export default mixins(
     disabled: Boolean,
     readonly: Boolean,
     selectingYear: Boolean,
-    value: {
+    modelValue: {
       type: String,
     },
     year: {
@@ -39,6 +39,8 @@ export default mixins(
     },
   },
 
+  emits: ['update:selecting-year'],
+
   data: () => ({
     isReversing: false,
   }),
@@ -50,7 +52,7 @@ export default mixins(
   },
 
   watch: {
-    value (val: string, prev: string) {
+    modelValue (val: string, prev: string) {
       this.isReversing = val < prev
     },
   },
@@ -73,7 +75,7 @@ export default mixins(
       }, () => [
         h('div', {
           innerHTML: this.date || '&nbsp;',
-          key: this.value
+          key: this.modelValue,
         }),
       ])
     },
@@ -86,7 +88,7 @@ export default mixins(
     return h('div', {
       class: ['v-date-picker-title', {
         'v-date-picker-title--disabled': this.disabled,
-      }]
+      }],
     }, [
       this.getYearBtn(),
       this.genTitleDate(),

package/src/components/VDatePicker/VDatePickerYears.ts

@@ -6,17 +6,15 @@ import Localable from '../../mixins/localable'
 
 // Utils
 import {
-  createItemTypeNativeListeners,
   createNativeLocaleFormatter,
 } from './util'
-import { mergeListeners } from '../../util/mergeData'
 import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
-import Vue, { VNode, PropType } from 'vue'
+import { VNode, PropType, h } from 'vue'
 import { DatePickerFormatter } from 'vuetify/types'
 
-interface options extends Vue {
+interface options {
   $el: HTMLElement
 }
 
@@ -39,7 +37,7 @@ export default mixins<options &
     min: [Number, String],
     max: [Number, String],
     readonly: Boolean,
-    value: [Number, String],
+    modelValue: [Number, String],
   },
 
   data () {
@@ -72,21 +70,19 @@ export default mixins<options &
   methods: {
     genYearItem (year: number): VNode {
       const formatted = this.formatter(`${year}`)
-      const active = parseInt(this.value, 10) === year
+      const active = parseInt(this.modelValue, 10) === year
       const color = active && (this.color || 'primary')
 
       return h('li', this.setTextColor(color, {
         key: year,
         class: { active },
-        on: mergeListeners({
-          click: () => this.$emit('input', year),
-        }, createItemTypeNativeListeners(this, ':year', year)),
+        onClick: () => this.$emit('update:modelValue', year),
       }), formatted)
     },
 
     genYearItems (): VNode[] {
       const children = []
-      const selectedYear = this.value ? parseInt(this.value, 10) : new Date().getFullYear()
+      const selectedYear = this.modelValue ? parseInt(this.modelValue, 10) : new Date().getFullYear()
       const maxYear = this.max ? parseInt(this.max, 10) : (selectedYear + 100)
       const minYear = Math.min(maxYear, this.min ? parseInt(this.min, 10) : (selectedYear - 100))