@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-alpha11

package/lib/services/breakpoint/index.js

@@ -1,4 +1,5 @@
-// Extensions
+import { reactive } from 'vue'; // Extensions
+
 import { Service } from '../service';
 export class Breakpoint extends Service {
   constructor(preset) {
@@ -36,6 +37,7 @@ export class Breakpoint extends Service {
     this.mobileBreakpoint = mobileBreakpoint;
     this.scrollBarWidth = scrollBarWidth;
     this.thresholds = thresholds;
+    return reactive(this);
   }
 
   init() {

package/lib/services/breakpoint/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/services/breakpoint/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Extensions\nimport { Service } from '../service'\n\n// Types\nimport { VuetifyPreset } from 'vuetify/types/services/presets'\nimport { Breakpoint as IBreakpoint } from 'vuetify/types/services/breakpoint'\n\nexport class Breakpoint extends Service implements IBreakpoint {\n  public static property: 'breakpoint' = 'breakpoint'\n\n  // Public\n  public xs = false\n\n  public sm = false\n\n  public md = false\n\n  public lg = false\n\n  public xl = false\n\n  public xsOnly = false\n\n  public smOnly = false\n\n  public smAndDown = false\n\n  public smAndUp = false\n\n  public mdOnly = false\n\n  public mdAndDown = false\n\n  public mdAndUp = false\n\n  public lgOnly = false\n\n  public lgAndDown = false\n\n  public lgAndUp = false\n\n  public xlOnly = false\n\n  // Value is xs to match v2.x functionality\n  public name: IBreakpoint['name'] = 'xs'\n\n  public height = 0\n\n  public width = 0\n\n  // TODO: Add functionality to detect this dynamically in v3\n  // Value is true to match v2.x functionality\n  public mobile = true\n\n  public mobileBreakpoint: IBreakpoint['mobileBreakpoint']\n\n  public thresholds: IBreakpoint['thresholds']\n\n  public scrollBarWidth: IBreakpoint['scrollBarWidth']\n\n  private resizeTimeout = 0\n\n  constructor (preset: VuetifyPreset) {\n    super()\n\n    const {\n      mobileBreakpoint,\n      scrollBarWidth,\n      thresholds,\n    } = preset[Breakpoint.property]\n\n    this.mobileBreakpoint = mobileBreakpoint\n    this.scrollBarWidth = scrollBarWidth\n    this.thresholds = thresholds\n  }\n\n  public init () {\n    this.update()\n\n    /* istanbul ignore if */\n    if (typeof window === 'undefined') return\n\n    window.addEventListener(\n      'resize',\n      this.onResize.bind(this),\n      { passive: true }\n    )\n  }\n\n  /* eslint-disable-next-line max-statements */\n  public update (ssr = false) {\n    const height = ssr ? 0 : this.getClientHeight()\n    const width = ssr ? 0 : this.getClientWidth()\n\n    const xs = width < this.thresholds.xs\n    const sm = width < this.thresholds.sm && !xs\n    const md = width < (this.thresholds.md - this.scrollBarWidth) && !(sm || xs)\n    const lg = width < (this.thresholds.lg - this.scrollBarWidth) && !(md || sm || xs)\n    const xl = width >= (this.thresholds.lg - this.scrollBarWidth)\n\n    this.height = height\n    this.width = width\n\n    this.xs = xs\n    this.sm = sm\n    this.md = md\n    this.lg = lg\n    this.xl = xl\n\n    this.xsOnly = xs\n    this.smOnly = sm\n    this.smAndDown = (xs || sm) && !(md || lg || xl)\n    this.smAndUp = !xs && (sm || md || lg || xl)\n    this.mdOnly = md\n    this.mdAndDown = (xs || sm || md) && !(lg || xl)\n    this.mdAndUp = !(xs || sm) && (md || lg || xl)\n    this.lgOnly = lg\n    this.lgAndDown = (xs || sm || md || lg) && !xl\n    this.lgAndUp = !(xs || sm || md) && (lg || xl)\n    this.xlOnly = xl\n\n    switch (true) {\n      case (xs):\n        this.name = 'xs'\n        break\n      case (sm):\n        this.name = 'sm'\n        break\n      case (md):\n        this.name = 'md'\n        break\n      case (lg):\n        this.name = 'lg'\n        break\n      default:\n        this.name = 'xl'\n        break\n    }\n\n    if (typeof this.mobileBreakpoint === 'number') {\n      this.mobile = width < parseInt(this.mobileBreakpoint, 10)\n\n      return\n    }\n\n    const breakpoints = {\n      xs: 0,\n      sm: 1,\n      md: 2,\n      lg: 3,\n      xl: 4,\n    } as const\n\n    const current = breakpoints[this.name]\n    const max = breakpoints[this.mobileBreakpoint]\n\n    this.mobile = current <= max\n  }\n\n  private onResize () {\n    clearTimeout(this.resizeTimeout)\n\n    // Added debounce to match what\n    // v-resize used to do but was\n    // removed due to a memory leak\n    // https://github.com/vuetifyjs/vuetify/pull/2997\n    this.resizeTimeout = window.setTimeout(this.update.bind(this), 200)\n  }\n\n  // Cross-browser support as described in:\n  // https://stackoverflow.com/questions/1248081\n  private getClientWidth () {\n    /* istanbul ignore if */\n    if (typeof document === 'undefined') return 0 // SSR\n    return Math.max(\n      document.documentElement!.clientWidth,\n      window.innerWidth || 0\n    )\n  }\n\n  private getClientHeight () {\n    /* istanbul ignore if */\n    if (typeof document === 'undefined') return 0 // SSR\n    return Math.max(\n      document.documentElement!.clientHeight,\n      window.innerHeight || 0\n    )\n  }\n}\n"],"sourceRoot":"","file":"index.js"}
+{"version":3,"sources":["../../../src/services/breakpoint/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { reactive } from 'vue'\n\n\n// Extensions\nimport { Service } from '../service'\n\n// Types\nimport { VuetifyPreset } from 'vuetify/types/services/presets'\nimport { Breakpoint as IBreakpoint } from 'vuetify/types/services/breakpoint'\n\nexport class Breakpoint extends Service implements IBreakpoint {\n  public static property: 'breakpoint' = 'breakpoint'\n\n  // Public\n  public xs = false\n\n  public sm = false\n\n  public md = false\n\n  public lg = false\n\n  public xl = false\n\n  public xsOnly = false\n\n  public smOnly = false\n\n  public smAndDown = false\n\n  public smAndUp = false\n\n  public mdOnly = false\n\n  public mdAndDown = false\n\n  public mdAndUp = false\n\n  public lgOnly = false\n\n  public lgAndDown = false\n\n  public lgAndUp = false\n\n  public xlOnly = false\n\n  // Value is xs to match v2.x functionality\n  public name: IBreakpoint['name'] = 'xs'\n\n  public height = 0\n\n  public width = 0\n\n  // TODO: Add functionality to detect this dynamically in v3\n  // Value is true to match v2.x functionality\n  public mobile = true\n\n  public mobileBreakpoint: IBreakpoint['mobileBreakpoint']\n\n  public thresholds: IBreakpoint['thresholds']\n\n  public scrollBarWidth: IBreakpoint['scrollBarWidth']\n\n  private resizeTimeout = 0\n\n  constructor (preset: VuetifyPreset) {\n    super()\n\n    const {\n      mobileBreakpoint,\n      scrollBarWidth,\n      thresholds,\n    } = preset[Breakpoint.property]\n\n    this.mobileBreakpoint = mobileBreakpoint\n    this.scrollBarWidth = scrollBarWidth\n    this.thresholds = thresholds\n\n    return reactive(this)\n  }\n\n  public init () {\n    this.update()\n\n    /* istanbul ignore if */\n    if (typeof window === 'undefined') return\n\n    window.addEventListener(\n      'resize',\n      this.onResize.bind(this),\n      { passive: true }\n    )\n  }\n\n  /* eslint-disable-next-line max-statements */\n  public update (ssr = false) {\n    const height = ssr ? 0 : this.getClientHeight()\n    const width = ssr ? 0 : this.getClientWidth()\n\n    const xs = width < this.thresholds.xs\n    const sm = width < this.thresholds.sm && !xs\n    const md = width < (this.thresholds.md - this.scrollBarWidth) && !(sm || xs)\n    const lg = width < (this.thresholds.lg - this.scrollBarWidth) && !(md || sm || xs)\n    const xl = width >= (this.thresholds.lg - this.scrollBarWidth)\n\n    this.height = height\n    this.width = width\n\n    this.xs = xs\n    this.sm = sm\n    this.md = md\n    this.lg = lg\n    this.xl = xl\n\n    this.xsOnly = xs\n    this.smOnly = sm\n    this.smAndDown = (xs || sm) && !(md || lg || xl)\n    this.smAndUp = !xs && (sm || md || lg || xl)\n    this.mdOnly = md\n    this.mdAndDown = (xs || sm || md) && !(lg || xl)\n    this.mdAndUp = !(xs || sm) && (md || lg || xl)\n    this.lgOnly = lg\n    this.lgAndDown = (xs || sm || md || lg) && !xl\n    this.lgAndUp = !(xs || sm || md) && (lg || xl)\n    this.xlOnly = xl\n\n    switch (true) {\n      case (xs):\n        this.name = 'xs'\n        break\n      case (sm):\n        this.name = 'sm'\n        break\n      case (md):\n        this.name = 'md'\n        break\n      case (lg):\n        this.name = 'lg'\n        break\n      default:\n        this.name = 'xl'\n        break\n    }\n\n    if (typeof this.mobileBreakpoint === 'number') {\n      this.mobile = width < parseInt(this.mobileBreakpoint, 10)\n\n      return\n    }\n\n    const breakpoints = {\n      xs: 0,\n      sm: 1,\n      md: 2,\n      lg: 3,\n      xl: 4,\n    } as const\n\n    const current = breakpoints[this.name]\n    const max = breakpoints[this.mobileBreakpoint]\n\n    this.mobile = current <= max\n  }\n\n  private onResize () {\n    clearTimeout(this.resizeTimeout)\n\n    // Added debounce to match what\n    // v-resize used to do but was\n    // removed due to a memory leak\n    // https://github.com/vuetifyjs/vuetify/pull/2997\n    this.resizeTimeout = window.setTimeout(this.update.bind(this), 200)\n  }\n\n  // Cross-browser support as described in:\n  // https://stackoverflow.com/questions/1248081\n  private getClientWidth () {\n    /* istanbul ignore if */\n    if (typeof document === 'undefined') return 0 // SSR\n    return Math.max(\n      document.documentElement!.clientWidth,\n      window.innerWidth || 0\n    )\n  }\n\n  private getClientHeight () {\n    /* istanbul ignore if */\n    if (typeof document === 'undefined') return 0 // SSR\n    return Math.max(\n      document.documentElement!.clientHeight,\n      window.innerHeight || 0\n    )\n  }\n}\n"],"sourceRoot":"","file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dimailn/vuetify",
   "description": "Vue Material Component Framework",
-  "version": "2.7.2-alpha0",
+  "version": "2.7.2-alpha11",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

package/src/components/VAutocomplete/VAutocomplete.ts

@@ -204,7 +204,7 @@ export default defineComponent({
     this.setSearch()
   },
 
-  destroyed () {
+  unmounted () {
     document.removeEventListener('copy', this.onCopy)
   },
 

package/src/components/VBadge/VBadge.ts

@@ -11,7 +11,7 @@ import Themeable from '../../mixins/themeable'
 import Toggleable from '../../mixins/toggleable'
 import Transitionable from '../../mixins/transitionable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
-
+import mergeData from '../../util/mergeData'
 // Utilities
 import mixins from '../../util/mixins'
 import {
@@ -186,9 +186,9 @@ export default mixins(
     if (this.inline && this.left) children.unshift(badge)
     else children.push(badge)
 
-    return h('span', {
-      class: ['v-badge' this.classes],
-      ...attrs
-    }, children)
+    return h('span', mergeData({
+      class: ['v-badge', this.classes]
+    }, attrs)
+    , children)
   },
 })

package/src/components/VBottomSheet/VBottomSheet.sass

@@ -2,7 +2,7 @@
 
 // Transition
 .bottom-sheet-transition
-  &-enter
+  &-enter-from
     transform: translateY(100%)
 
   &-leave-to

package/src/components/VColorPicker/VColorPicker.ts

@@ -50,7 +50,7 @@ export default mixins(Elevatable, Themeable).extend({
       type: [Number, String],
       default: 150,
     },
-    value: {
+    modelValue: {
       type: [Object, String],
     },
     width: {
@@ -65,9 +65,9 @@ export default mixins(Elevatable, Themeable).extend({
 
   computed: {
     hideAlpha (): boolean {
-      if (!this.value) return false
+      if (!this.modelValue) return false
 
-      return !hasAlpha(this.value)
+      return !hasAlpha(this.modelValue)
     },
   },
 
@@ -83,10 +83,10 @@ export default mixins(Elevatable, Themeable).extend({
   methods: {
     updateColor (color: VColorPickerColor) {
       this.internalValue = color
-      const value = extractColor(this.internalValue, this.value)
+      const value = extractColor(this.internalValue, this.modelValue)
 
-      if (!deepEqual(value, this.value)) {
-        this.$emit('input', value)
+      if (!deepEqual(value, this.modelValue)) {
+        this.$emit('update:modelValue', value)
         this.$emit('update:color', this.internalValue)
       }
     },

package/src/components/VData/VData.ts

@@ -203,7 +203,15 @@ export default defineComponent({
         this.$emit('update:options', options)
       },
       deep: true,
-      immediate: true,
+      /*
+        In Vue 3 this watcher fires even before created hook and
+        if mounting fails and the consumer code relies on update:options event to fetch data
+        it causes infinite loop because each data update triggers an attempt to render a table,
+        but because mounting constantly fails(for example, due to error in slot) it never happens.
+        Previously, in Vue 2 slot errors didn't cause mounting failure, we had partially rendered component.
+        This immediate prop is compensated by firing event in mounted hook.
+      */
+      // immediate: true,
     },
     page (page: number) {
       this.updateOptions({ page })
@@ -378,4 +386,7 @@ export default defineComponent({
   render (): VNode {
     return this.$slots.default && this.$slots.default(this.scopedProps)[0] as any
   },
+  mounted() {
+    this.$emit('update:options', this.internalOptions)
+  },
 })

package/src/components/VDataIterator/VDataIterator.ts

@@ -88,7 +88,7 @@ export default mixins(
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (value: any[]) {
         this.selection = value.reduce((selection, item) => {
           selection[getObjectValueByPath(item, this.itemKey)] = item
@@ -100,7 +100,7 @@ export default mixins(
     selection (value: Record<string, boolean>, old: Record<string, boolean>) {
       if (deepEqual(Object.keys(value), Object.keys(old))) return
 
-      this.$emit('input', Object.values(value))
+      this.$emit('update:modelValue', Object.values(value))
     },
     expanded: {
       handler (value: any[]) {
@@ -154,7 +154,7 @@ export default mixins(
     window.addEventListener('keydown', this.onKeyDown)
     window.addEventListener('keyup', this.onKeyUp)
   },
-  beforeDestroy () {
+  beforeUnmount () {
     window.removeEventListener('keydown', this.onKeyDown)
     window.removeEventListener('keyup', this.onKeyUp)
   },

package/src/components/VDataTable/VDataTable.ts

@@ -241,7 +241,7 @@ export default mixins(
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.calculateWidths) {
       window.removeEventListener('resize', this.calcWidths)
     }

package/src/components/VDataTable/VVirtualTable.ts

@@ -98,7 +98,7 @@ export default baseMixins.extend({
     this.$refs.table.addEventListener('scroll', this.scrollDebounce, { passive: true })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.$refs.table.removeEventListener('scroll', this.scrollDebounce)
   },
 

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

@@ -55,8 +55,8 @@ export default mixins<options>().extend({
       const data = {
         value: this.everyItem,
         indeterminate: !this.everyItem && this.someItems,
-        color: this.checkboxColor ?? ''
-        onInput: (v: boolean) => this.$emit('toggle-select-all', v),
+        color: this.checkboxColor ?? '',
+        onInput: (v: boolean) => this.$emit('toggle-select-all', v)
       }
 
       if (this.$slots['data-table-select']) {

package/src/components/VDatePicker/VDatePicker.ts

@@ -290,7 +290,7 @@ 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])
       }
     },
   },
@@ -308,10 +308,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 +325,7 @@ export default mixins(
         )
         : newInput
 
-      this.$emit('input', output)
+      this.$emit('update:modelValue', output)
       this.multiple || this.$emit('change', newInput)
     },
     checkMultipleProp () {
@@ -348,7 +348,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 +365,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)

package/src/components/VDialog/VDialog.ts

@@ -137,7 +137,7 @@ export default baseMixins.extend({
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (typeof window !== 'undefined') this.unbind()
   },
 

package/src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -55,7 +55,7 @@ export default baseMixins.extend({
     this.expansionPanel.registerContent(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.expansionPanel.unregisterContent()
   },
 

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -72,7 +72,7 @@ export default baseMixins.extend({
     this.expansionPanel.registerHeader(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.expansionPanel.unregisterHeader()
   },
 

package/src/components/VForm/VForm.ts

@@ -127,7 +127,7 @@ export default mixins(
 
       this.watchers = this.watchers.filter(i => i._uid !== found._uid)
       this.inputs = this.inputs.filter(i => i._uid !== found._uid)
-      this.$delete(this.errorBag, found._uid)
+      delete this.errorBag[found._uid]
     },
   },
 

package/src/components/VGrid/VCol.ts

@@ -68,7 +68,7 @@ const cache = new Map<string, any[]>()
 
 export default defineComponent({
   name: 'v-col',
-  functional: true,
+  inheritAttrs: false,
   props: {
     cols: {
       type: [Boolean, String, Number],
@@ -134,6 +134,6 @@ export default defineComponent({
       cache.set(cacheKey, classList)
     }
 
-    return h(props.tag, mergeData(data, { class: classList }), children)
+    return h(props.tag, mergeData({ class: classList }, data), children)
   },
 })

package/src/components/VImg/VImg.ts

@@ -244,7 +244,7 @@ export default mixins(
       let content: VNode = VResponsive.methods.genContent.call(this)
 
       if (this.naturalWidth) {
-        content = h(content.type, mergeProps(content.data!, {
+        content = h(content.type, mergeProps(content.props, {
           style: { width: `${this.naturalWidth}px` },
         }), content.children)
       }

package/src/components/VInput/VInput.ts

@@ -134,7 +134,7 @@ export default baseMixins.extend({
   },
 
   watch: {
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },

package/src/components/VItemGroup/VItemGroup.ts

@@ -52,8 +52,8 @@ export const BaseItemGroup = mixins(
       // As long as a value is defined, show it
       // Otherwise, check if multiple
       // to determine which default to provide
-      internalLazyValue: this.value !== undefined
-        ? this.value
+      internalLazyValue: this.modelValue !== undefined
+        ? this.modelValue
         : this.multiple ? [] : undefined,
       items: [] as GroupableInstance[],
     }
@@ -102,7 +102,7 @@ export const BaseItemGroup = mixins(
 
   watch: {
     internalValue: 'updateItemsState',
-    items: 'updateItemsState',
+    items: 'updateItemsState'
   },
 
   created () {

package/src/components/VList/VListGroup.ts

@@ -108,7 +108,7 @@ export default baseMixins.extend({
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.list && this.list.unregister(this)
   },
 

package/src/components/VMenu/VMenu.sass

@@ -36,7 +36,7 @@
     max-width: none
 
   &-transition
-    &-enter
+    &-enter-from
       .v-list-item
         min-width: 0
         pointer-events: none
@@ -48,7 +48,7 @@
     &-leave-to
       pointer-events: none
 
-    &-enter,
+    &-enter-from,
     &-leave-to
       opacity: 0
 

package/src/components/VMenu/VMenu.ts

@@ -282,6 +282,7 @@ export default baseMixins.extend({
       return this.isActive &&
         !this._isDestroyed &&
         this.closeOnClick &&
+        this.$refs.content &&
         !this.$refs.content.contains(target)
     },
     genActivatorAttributes () {

package/src/components/VOverlay/VOverlay.ts

@@ -36,7 +36,7 @@ export default mixins(
       type: [Number, String],
       default: 0.46,
     },
-    value: {
+    modelValue: {
       default: true,
     },
     zIndex: {

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -12,8 +12,8 @@ import { PropType } from 'vue'
 import {h} from 'vue'
 
 const baseMixins = mixins(
+  VInput,
   BaseItemGroup,
-  VInput
 )
 
 /* @vue/component */
@@ -40,7 +40,7 @@ export default baseMixins.extend({
     // If no value set on VRadio
     // will match valueComparator
     // force default to null
-    value: null as unknown as PropType<any>,
+    modelValue: null as unknown as PropType<any>,
   },
 
   computed: {

package/src/components/VSelect/VSelect.ts

@@ -241,7 +241,7 @@ export default baseMixins.extend({
       return {
         ...defaultMenuProps,
         eager: this.eager,
-        value: this.menuCanShow && this.isMenuActive,
+        modelValue: this.menuCanShow && this.isMenuActive,
         nudgeBottom: normalisedProps.offsetY ? 1 : 0, // convert to int
         ...normalisedProps,
       }
@@ -287,8 +287,6 @@ export default baseMixins.extend({
   methods: {
     /** @public */
     blur (e?: Event) {
-      console.log("BLUUUUR")
-
       VTextField.methods.blur.call(this, e)
       this.isMenuActive = false
       this.isFocused = false
@@ -453,7 +451,6 @@ export default baseMixins.extend({
       delete input.props.name
 
       input.props = mergeData(input.props, {
-        value: null,
         readonly: true,
         type: 'text',
         'aria-readonly': String(this.isReadonly),
@@ -463,10 +460,9 @@ export default baseMixins.extend({
         onKeypress: this.onKeyPress,
       })
 
+      input.props = { ...input.props, value: null }
       input.props = normalizeAttrs(input.props)
 
-      // console.log(input)
-
       return input
     },
     genHiddenInput (): VNode {

package/src/components/VSheet/VSheet.ts

@@ -57,7 +57,7 @@ export default defineComponent({
     const data = {
       class: this.classes,
       style: this.styles,
-      on: this.listeners$,
+      ...this.listeners$,
     }
 
     return h(

package/src/components/VSnackbar/VSnackbar.sass

@@ -132,11 +132,11 @@
       margin-bottom: $snackbar-vertical-action-margin-bottom
 
 .v-snack-transition
-  &-enter
+  &-enter-from
     &.v-snack__wrapper
       transform: scale($snackbar-transition-wrapper-transform)
 
-  &-enter,
+  &-enter-from,
   &-leave-to
     &.v-snack__wrapper
       opacity: 0

package/src/components/VStepper/VStepperContent.ts

@@ -99,7 +99,7 @@ export default baseMixins.extend({
     this.stepper && this.stepper.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.$refs.wrapper.removeEventListener(
       'transitionend',
       this.onTransition,

package/src/components/VStepper/VStepperStep.ts

@@ -87,7 +87,7 @@ export default baseMixins.extend({
     this.stepper && this.stepper.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.stepper && this.stepper.unregister(this)
   },
 

package/src/components/VSubheader/VSubheader.ts

@@ -22,11 +22,11 @@ export default mixins(
 
   render (): VNode {
     return h('div', {
+      ...this.$attrs,
       class: ['v-subheader', {
         'v-subheader--inset': this.inset,
         ...this.themeClasses,
-      }],
-      ...this.$attrs,
+      }, this.$attrs.class],
       ...this.$listeners
     }, getSlot(this))
   },

package/src/components/VTabs/VTab.ts

@@ -115,7 +115,7 @@ export default baseMixins.extend({
     let { tag, data, directives } = this.generateRouteLink()
 
     data = {
-      ...data
+      ...data,
       'aria-selected': String(this.isActive),
       role: 'tab',
       tabindex: this.disabled ? -1 : 0,

package/src/components/VTabs/VTabs.ts

@@ -232,7 +232,6 @@ export default baseMixins.extend({
       return h(VTabsItems, {
         modelValue: this.internalValue,
         'onUpdate:modelValue': (val: any) => {
-          console.log(val)
           this.internalValue = val
         }
       }, item)

package/src/components/VTextField/VTextField.ts

@@ -205,7 +205,7 @@ export default baseMixins.extend({
       this.$nextTick(this.setPrefixWidth)
     },
     isFocused: 'updateValue',
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },

package/src/components/VTreeview/VTreeviewNode.ts

@@ -161,7 +161,7 @@ const VTreeviewNode = baseMixins.extend({
     this.treeview.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.treeview.unregister(this)
   },
 

package/src/components/transitions/createTransition.ts

@@ -88,7 +88,6 @@ export function createSimpleTransition (
           el.style.setProperty('display', 'none', 'important')
         })
       }
-
       return h(tag, mergeData(this.$attrs, data), this.$slots.default())
     },
   }
@@ -116,7 +115,7 @@ export function createJavascriptTransition (
         Transition,
         mergeData(this.$attrs, {
           name,
-          functions,
+          ...functions,
         }),
         this.$slots.default()
       )

package/src/components/transitions/expand-transition.ts

@@ -15,7 +15,7 @@ export default function (expandedParentClass = '', x = false) {
   const offsetProperty = `offset${upperFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth'
 
   return {
-    beforeEnter (el: HTMLExpandElement) {
+    onBeforeEnter (el: HTMLExpandElement) {
       el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null
       el._initialStyle = {
         transition: el.style.transition,
@@ -24,7 +24,7 @@ export default function (expandedParentClass = '', x = false) {
       }
     },
 
-    enter (el: HTMLExpandElement) {
+    onEnter (el: HTMLExpandElement) {
       const initialStyle = el._initialStyle!
 
       el.style.setProperty('transition', 'none', 'important')
@@ -47,10 +47,10 @@ export default function (expandedParentClass = '', x = false) {
       })
     },
 
-    afterEnter: resetStyles,
-    enterCancelled: resetStyles,
+    onAfterEnter: resetStyles,
+    onEnterCancelled: resetStyles,
 
-    leave (el: HTMLExpandElement) {
+    onLeave (el: HTMLExpandElement) {
       el._initialStyle = {
         transition: '',
         overflow: el.style.overflow,
@@ -64,8 +64,8 @@ export default function (expandedParentClass = '', x = false) {
       requestAnimationFrame(() => (el.style[sizeProperty] = '0'))
     },
 
-    afterLeave,
-    leaveCancelled: afterLeave,
+    onAfterLeave: afterLeave,
+    onLeaveCancelled: afterLeave,
   }
 
   function afterLeave (el: HTMLExpandElement) {