@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha27

package/src/components/VCalendar/mixins/calendar-with-events.ts

@@ -2,7 +2,7 @@
 import './calendar-with-events.sass'
 
 // Types
-import { VNode, VNodeData, defineComponent } from 'vue'
+import { VNode, VNodeData, defineComponent, h, withDirectives } from 'vue'
 
 // Directives
 import ripple from '../../../directives/ripple'
@@ -75,11 +75,8 @@ const MINUTES_IN_DAY = 1440
 export default defineComponent({
   name: 'calendar-with-events',
 
-  extends: CalendarBase,
 
-  directives: {
-    ripple,
-  },
+  extends: CalendarBase,
 
   props: {
     ...props.events,
@@ -250,22 +247,18 @@ export default defineComponent({
       const scope = { eventParsed: event, day, start, end, timed: false }
 
       return this.genEvent(event, scope, false, {
-        class: 'v-event',
-        class: {
+        class: ['v-event', {
           'v-event-start': start,
           'v-event-end': end,
-        },
+        }],
         style: {
           height: `${eventHeight}px`,
           width: `${width}%`,
           'margin-bottom': `${eventMarginBottom}px`,
         },
-        attrs: {
-          'data-date': day.date,
-        },
+        'data-date': day.date,
         key: event.index,
         ref: 'events',
-        refInFor: true,
       })
     },
     genTimedEvent ({ event, left, width }: CalendarEventVisual, day: CalendarDayBodySlotScope): VNode | false {
@@ -336,20 +329,18 @@ export default defineComponent({
         eventSummary,
       }
 
-      return h('div',
+      return withDirectives(h('div',
         this.setTextColor(text,
           this.setBackgroundColor(background, {
-            on: this.getDefaultMouseEventHandlers(':event', nativeEvent => ({ ...scope, nativeEvent })),
-            directives: [{
-              name: 'ripple',
-              value: this.eventRipple ?? true,
-            }],
+            ...this.getDefaultMouseEventHandlers(':event', nativeEvent => ({ ...scope, nativeEvent })),
             ...data,
           })
         ), slot
           ? slot(scope)
           : [this.genName(eventSummary)]
-      )
+      ), [
+        [ripple, this.eventRipple ?? true],
+      ])
     },
     genName (eventSummary: () => string | VNode): VNode {
       return h('div', {
@@ -363,42 +354,32 @@ export default defineComponent({
         style: {
           height: `${height}px`,
         },
-        attrs: {
-          'data-date': day.date,
-        },
+        'data-date': day.date,
         ref: 'events',
-        refInFor: true,
       })
     },
     genMore (day: CalendarDaySlotScope): VNode {
       const eventHeight = this.eventHeight
       const eventMarginBottom = this.eventMarginBottom
 
-      return h('div', {
-        class: 'v-event-more pl-1',
-        class: {
+      return withDirectives(h('div', {
+        class: ['v-event-more pl-1', {
           'v-outside': day.outside,
-        },
-        attrs: {
-          'data-date': day.date,
-          'data-more': 1,
-        },
-        directives: [{
-          name: 'ripple',
-          value: this.eventRipple ?? true,
         }],
-        on: this.getDefaultMouseEventHandlers(':more', nativeEvent => {
+        'data-date': day.date,
+        'data-more': 1,
+        ...this.getDefaultMouseEventHandlers(':more', nativeEvent => {
           return { nativeEvent, ...day }
         }),
-
         style: {
           display: 'none',
           height: `${eventHeight}px`,
           'margin-bottom': `${eventMarginBottom}px`,
         },
         ref: 'events',
-        refInFor: true,
-      })
+      }), [
+        [ripple, this.eventRipple ?? true],
+      ])
     },
     getVisibleEvents (): CalendarEventParsed[] {
       const start = getDayIdentifier(this.days[0])

package/src/components/VCalendar/mixins/calendar-with-intervals.ts

@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue'
 
 // Mixins
 import CalendarBase from './calendar-base'
@@ -15,7 +16,6 @@ import {
   MINUTES_IN_DAY,
 } from '../util/timestamp'
 import { CalendarTimestamp, CalendarFormatter, CalendarDayBodySlotScope } from 'vuetify/types'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
 export default defineComponent({

package/src/components/VCalendar/mixins/times.ts

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
 
 import {
   validateTimestamp,

package/src/components/VCarousel/VCarousel.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VCarousel.sass'
 
@@ -19,12 +18,19 @@ import { convertToUnit } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
-import { VNode, PropType, defineComponent } from 'vue'
+import { h, VNode, PropType, defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'v-carousel',
   extends: VWindow,
 
+  // pass down the parent's theme
+  provide (): object {
+    return {
+      parentTheme: this.theme,
+    }
+  },
+
   props: {
     continuous: {
       type: Boolean,
@@ -62,12 +68,10 @@ export default defineComponent({
     },
   },
 
-  // pass down the parent's theme
-  provide (): object {
-    return {
-      parentTheme: this.theme,
-    }
-  },
+  emits: [
+    'update:modelValue',
+    'change',
+  ],
 
   data () {
     return {
@@ -158,7 +162,7 @@ export default defineComponent({
       }
 
       return h(ButtonGroup, {
-        value: this.internalValue,
+        modelValue: this.internalValue,
         mandatory: this.mandatory,
         onChange: (val: unknown) => {
           this.internalValue = val

package/src/components/VCheckbox/VCheckbox.ts

@@ -8,6 +8,10 @@ import VInput from '../VInput'
 
 // Mixins
 import Selectable from '../../mixins/selectable'
+
+// Utilities
+import { breaking } from '../../util/console'
+
 import { defineComponent, h } from 'vue'
 
 /* @vue/component */
@@ -31,6 +35,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['click', 'focus', 'blur', 'update:indeterminate'],
+
   data () {
     return {
       inputIndeterminate: this.indeterminate,
@@ -81,6 +87,18 @@ export default defineComponent({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['inputValue', 'model-value'],
+      ['input-value', 'model-value'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genCheckbox () {
       const { title, ...checkboxAttrs } = this.attrs$
@@ -90,7 +108,7 @@ export default defineComponent({
         h(VIcon, this.setTextColor(this.validationState, {
           dense: this.dense,
           dark: this.dark,
-          light: this.light
+          light: this.light,
         }), () => this.computedIcon),
         this.genInput('checkbox', {
           ...checkboxAttrs,

package/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -17,9 +17,6 @@ import { wrapInArray } from '../../util/helpers'
 export default defineComponent({
   name: 'v-simple-checkbox',
 
-  directives: {
-    Ripple,
-  },
 
   props: {
     ...Colorable.props,

package/src/components/VChip/VChip.ts

@@ -1,9 +1,6 @@
-import {h, vShow, withDirectives} from 'vue'
+import { h, vShow, withDirectives, VNode } from 'vue'
 // Styles
 import './VChip.sass'
-
-// Types
-import { VNode } from 'vue'
 import mixins from '../../util/mixins'
 
 // Components
@@ -32,10 +29,12 @@ export default mixins(
   Routable,
   Themeable,
   GroupableFactory('chipGroup'),
-  ToggleableFactory('inputValue')
+  ToggleableFactory()
 ).extend({
   name: 'v-chip',
 
+  emits: ['update:modelValue', 'click:close', 'click', 'change'],
+
   props: {
     active: {
       type: Boolean,
@@ -69,7 +68,7 @@ export default mixins(
       default: 'span',
     },
     textColor: String,
-    value: null as any as PropType<any>,
+    modelValue: null as any as PropType<any>,
   },
 
   data: () => ({
@@ -77,9 +76,10 @@ export default mixins(
   }),
 
   computed: {
-    $activeClass() {
-      if(this.activeClass)
+    $activeClass () {
+      if (this.activeClass) {
         return this.activeClass
+      }
       if (!this.chipGroup) return ''
 
       return this.chipGroup.activeClass
@@ -117,8 +117,8 @@ export default mixins(
     const breakingProps = [
       ['outline', 'outlined'],
       ['selected', 'input-value'],
-      ['value', 'active'],
-      ['@input', '@active.sync'],
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
     ]
 
     /* istanbul ignore next */
@@ -131,7 +131,10 @@ export default mixins(
     click (e: MouseEvent): void {
       this.$emit('click', e)
 
-      this.chipGroup && this.toggle()
+      if (this.chipGroup) {
+        this.toggle()
+        this.$emit('update:modelValue', this.isActive)
+      }
     },
     genFilter (): VNode {
       const children = []
@@ -158,8 +161,8 @@ export default mixins(
           e.preventDefault()
 
           this.$emit('click:close')
-          this.$emit('update:active', false)
-        }
+          this.$emit('update:modelValue', false)
+        },
       }, this.closeIcon)
     },
     genContent (): VNode {

package/src/components/VData/VData.ts

@@ -78,6 +78,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['update:options', 'update:page', 'update:items-per-page', 'update:sort-by', 'update:sort-desc', 'update:group-by', 'update:group-desc', 'update:multi-sort', 'update:must-sort', 'page-count', 'current-items', 'pagination'],
+
   data () {
     let internalOptions: DataOptions = {
       page: this.page,

package/src/components/VDataIterator/VDataFooter.ts

@@ -61,6 +61,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['update:options'],
+
   computed: {
     disableNextPageIcon (): boolean {
       return this.options.itemsPerPage <= 0 ||

package/src/components/VDataIterator/VDataIterator.ts

@@ -64,6 +64,8 @@ export default mixins(
     },
   },
 
+  emits: ['update:modelValue', 'update:expanded', 'toggle-select-all', 'item-selected', 'item-expanded', 'update:options', 'update:page', 'update:items-per-page', 'update:sort-by', 'update:sort-desc', 'update:group-by', 'update:group-desc', 'pagination', 'current-items', 'page-count'],
+
   data: () => ({
     selection: {} as Record<string, any>,
     expansion: {} as Record<string, boolean>,

package/src/components/VDataTable/VDataTable.ts

@@ -99,10 +99,8 @@ export default mixins(
 ).extend({
   name: 'v-data-table',
 
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
+  emits: ['click:row', 'update:options', 'update:page', 'update:items-per-page', 'update:sort-by', 'update:sort-desc', 'update:group-by', 'update:group-desc', 'pagination', 'current-items', 'page-count', 'click', 'mousedown', 'mouseup', 'touchstart', 'touchend'],
+
 
   props: {
     headers: {

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -8,6 +8,11 @@ import { DataTableHeader } from 'vuetify/types'
 export default mixins(header).extend({
   name: 'v-data-table-header-desktop',
 
+  emits: [
+    'group',
+    'sort',
+  ],
+
   methods: {
     genGroupByToggle (header: DataTableHeader) {
       return h('span', {

package/src/components/VDataTable/VDataTableHeaderMobile.ts

@@ -16,6 +16,8 @@ export default mixins(header).extend({
     },
   },
 
+  emits: ['sort'],
+
   methods: {
     genSortChip (props: any) {
       const children: VNodeChildrenArrayContents = [props.item.text]

package/src/components/VDataTable/VEditDialog.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VEditDialog.sass'
 
@@ -37,6 +37,8 @@ export default mixins(Returnable, Themeable).extend({
     },
   },
 
+  emits: ['update:return-value', 'open', 'close', 'cancel', 'save'],
+
   data () {
     return {
       isActive: false,
@@ -92,7 +94,7 @@ export default mixins(Returnable, Themeable).extend({
             this.$emit('save')
           }
         },
-        ref: 'content'
+        ref: 'content',
       }, getSlot(this, 'input'))
     },
   },
@@ -111,21 +113,21 @@ export default mixins(Returnable, Themeable).extend({
       light: this.light,
       dark: this.dark,
       onInput: (val: boolean) => (this.isActive = val),
-      scopedSlots: {
-        activator: ({ on }) => {
-          return h('div', {
-            class: 'v-small-dialog__activator',
-            on,
-          }, [
-            h('span', {
-              class: 'v-small-dialog__activator__content',
-            }, getSlot(this)),
-          ])
-        },
+    }, {
+      activator: ({ on }: { on: any }) => {
+        return h('div', {
+          class: 'v-small-dialog__activator',
+          ...on,
+        }, [
+          h('span', {
+            class: 'v-small-dialog__activator__content',
+          }, getSlot(this)),
+        ])
       },
-    }, () => [
-      this.genContent(),
-      this.large ? this.genActions() : null,
-    ])
+      default: () => [
+        this.genContent(),
+        this.large ? this.genActions() : null,
+      ],
+    })
   },
 })

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

@@ -15,10 +15,6 @@ interface HeaderOptions {
 }
 
 export default mixins<HeaderOptions>().extend({
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
 
   props: {
     headers: {

package/src/components/VDatePicker/VDatePicker.ts

@@ -388,11 +388,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 +407,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 +434,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 +459,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 +474,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 {