@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle2

package/src/components/VList/VListItem.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VListItem.sass'
 
@@ -14,7 +13,6 @@ import Ripple from '../../directives/ripple'
 
 // Utilities
 import { getSlot, keyCodes } from './../../util/helpers'
-import mergeData from './../../util/mergeData'
 import { ExtractVue } from './../../util/mixins'
 import { removed } from '../../util/console'
 
@@ -40,7 +38,7 @@ interface options extends ExtractVue<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-list-item',
 
   directives: {
@@ -66,7 +64,12 @@ export default baseMixins.extend({
 
   props: {
     activeClass: {
-      type: String
+      type: String,
+      default (): string | undefined {
+        if (!this.listItemGroup) return ''
+
+        return this.listItemGroup.activeClass
+      },
     } as any as PropValidator<string>,
     dense: Boolean,
     inactive: Boolean,
@@ -88,16 +91,10 @@ export default baseMixins.extend({
   }),
 
   computed: {
-    $activeClass() {
-      if(this.activeClass) return this.activeClass
-      if (!this.listItemGroup) return ''
-
-      return this.listItemGroup.activeClass
-    },
     classes (): object {
       return {
         'v-list-item': true,
-        ...Routable.computed.classes.call(this),
+        ...Routable.options.computed.classes.call(this),
         'v-list-item--dense': this.dense,
         'v-list-item--disabled': this.disabled,
         'v-list-item--link': this.isClickable && !this.inactive,
@@ -109,7 +106,7 @@ export default baseMixins.extend({
     },
     isClickable (): boolean {
       return Boolean(
-        Routable.computed.isClickable.call(this) ||
+        Routable.options.computed.isClickable.call(this) ||
         this.listItemGroup
       )
     },
@@ -146,7 +143,7 @@ export default baseMixins.extend({
         attrs['aria-selected'] = String(this.isActive)
       } else if (this.isInMenu) {
         attrs.role = this.isClickable ? 'menuitem' : undefined
-        attrs.id = attrs.id || `list-item-${this.$.uid}`
+        attrs.id = attrs.id || `list-item-${this._uid}`
       } else if (this.isInList) {
         attrs.role = 'listitem'
       }
@@ -161,17 +158,16 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
-    let { tag, data, directives } = this.generateRouteLink()
-
-    data = mergeData(
-      data,
-      this.genAttrs()
-    )
+  render (h): VNode {
+    let { tag, data } = this.generateRouteLink()
 
-    data = {
-      ...data,
-      onKeydown: (e: KeyboardEvent) => {
+    data.attrs = {
+      ...data.attrs,
+      ...this.genAttrs(),
+    }
+    data[this.to ? 'nativeOn' : 'on'] = {
+      ...data[this.to ? 'nativeOn' : 'on'],
+      keydown: (e: KeyboardEvent) => {
         if (!this.disabled) {
           /* istanbul ignore else */
           if (e.keyCode === keyCodes.enter) this.click(e)
@@ -182,19 +178,16 @@ export default baseMixins.extend({
     }
 
     if (this.inactive) tag = 'div'
-    // if (this.inactive && this.to) {
-    //   data.on = data.nativeOn
-    //   delete data.nativeOn
-    // }
+    if (this.inactive && this.to) {
+      data.on = data.nativeOn
+      delete data.nativeOn
+    }
 
     const children = getSlot(this, 'default', {
       active: this.isActive,
       toggle: this.toggle,
     })
 
-    return withDirectives(
-      h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children),
-      directives
-    )
+    return h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children)
   },
 })

package/src/components/VList/VListItemAction.ts

@@ -1,21 +1,18 @@
 // Types
-import { defineComponent, VNode, h } from 'vue'
+import Vue, { VNode } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend({
   name: 'v-list-item-action',
 
   functional: true,
 
-  render (): VNode {
-    const data = this.$attrs
-    data.class = data.class ? `v-list-item__action ${data.class}` : 'v-list-item__action'
-    const children = this.$slots.default()
-
+  render (h, { data, children = [] }): VNode {
+    data.staticClass = data.staticClass ? `v-list-item__action ${data.staticClass}` : 'v-list-item__action'
     const filteredChild = children.filter(VNode => {
       return VNode.isComment === false && VNode.text !== ' '
     })
-    if (filteredChild.length > 1) data.class += ' v-list-item__action--stack'
+    if (filteredChild.length > 1) data.staticClass += ' v-list-item__action--stack'
 
     return h('div', data, children)
   },

package/src/components/VList/VListItemAvatar.ts

@@ -1,14 +1,12 @@
-import {h} from 'vue'
 // Components
 import VAvatar from '../VAvatar'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default VAvatar.extend({
   name: 'v-list-item-avatar',
-  extends: VAvatar,
 
   props: {
     horizontal: Boolean,
@@ -22,14 +20,18 @@ export default defineComponent({
     classes (): object {
       return {
         'v-list-item__avatar--horizontal': this.horizontal,
-        ...VAvatar.computed.classes.call(this),
+        ...VAvatar.options.computed.classes.call(this),
         'v-avatar--tile': this.tile || this.horizontal,
-        'v-list-item__avatar': true
       }
     },
   },
 
-  render (): VNode {
-    return VAvatar.render.call(this)
+  render (h): VNode {
+    const render = VAvatar.options.render.call(this, h)
+
+    render.data = render.data || {}
+    render.data.staticClass += ' v-list-item__avatar'
+
+    return render
   },
 })

package/src/components/VList/VListItemGroup.ts

@@ -26,7 +26,7 @@ export default mixins(
   computed: {
     classes (): object {
       return {
-        ...BaseItemGroup.computed.classes.call(this),
+        ...BaseItemGroup.options.computed.classes.call(this),
         'v-list-item-group': true,
       }
     },
@@ -35,7 +35,7 @@ export default mixins(
   methods: {
     genData (): object {
       return this.setTextColor(this.color, {
-        ...BaseItemGroup.methods.genData.call(this),
+        ...BaseItemGroup.options.methods.genData.call(this),
         attrs: {
           role: 'listbox',
         },

package/src/components/VList/VListItemIcon.ts

@@ -1,17 +1,15 @@
 // Types
-import { defineComponent, VNode, h } from 'vue'
+import Vue, { VNode } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend({
   name: 'v-list-item-icon',
 
   functional: true,
 
-  render (): VNode {
-    const data = { ...this.$attrs }
+  render (h, { data, children }): VNode {
+    data.staticClass = (`v-list-item__icon ${data.staticClass || ''}`).trim()
 
-    data.class = (`v-list-item__icon ${data.class || ''}`).trim()
-
-    return h('div', data, this.$slots.default())
+    return h('div', data, children)
   },
 })

package/src/components/VList/__tests__/VListItemAction.spec.ts

@@ -32,7 +32,7 @@ describe('VListItemAction.ts', () => {
 
   it('should render component with static class and match snapshot', () => {
     const wrapper = mountFunction(functionalContext({
-      class: 'static-class',
+      staticClass: 'static-class',
     }))
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VMain/VMain.ts

@@ -6,14 +6,12 @@ import SSRBootable from '../../mixins/ssr-bootable'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, defineComponent, h } from 'vue'
+import { VNode } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default SSRBootable.extend({
   name: 'v-main',
 
-  extends: SSRBootable,
-
   props: {
     tag: {
       type: String,
@@ -36,9 +34,9 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
-      class: 'v-main',
+      staticClass: 'v-main',
       style: this.styles,
       ref: 'main',
     }
@@ -46,7 +44,7 @@ export default defineComponent({
     return h(this.tag, data, [
       h(
         'div',
-        { class: 'v-main__wrap' },
+        { staticClass: 'v-main__wrap' },
         getSlot(this),
       ),
     ])

package/src/components/VMenu/VMenu.ts

@@ -1,4 +1,3 @@
-import {h, Transition, vShow, withDirectives} from 'vue'
 // Styles
 import './VMenu.sass'
 
@@ -43,6 +42,11 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-menu',
 
+  directives: {
+    ClickOutside,
+    Resize,
+  },
+
   provide (): object {
     return {
       isInMenu: true,
@@ -285,7 +289,7 @@ export default baseMixins.extend({
         !this.$refs.content.contains(target)
     },
     genActivatorAttributes () {
-      const attributes = Activatable.methods.genActivatorAttributes.call(this)
+      const attributes = Activatable.options.methods.genActivatorAttributes.call(this)
 
       if (this.activeTile && this.activeTile.id) {
         return {
@@ -297,7 +301,7 @@ export default baseMixins.extend({
       return attributes
     },
     genActivatorListeners () {
-      const listeners = Menuable.methods.genActivatorListeners.call(this)
+      const listeners = Menuable.options.methods.genActivatorListeners.call(this)
 
       if (!this.disableKeys) {
         listeners.keydown = this.onKeyDown
@@ -310,69 +314,78 @@ export default baseMixins.extend({
 
       if (!this.transition) return content
 
-      return h(Transition, {
-        name: this.transition
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition,
+        },
       }, [content])
     },
     genDirectives (): VNodeDirective[] {
-      const directives = [[
-        vShow,
-        this.isContentActive
-      ]]
+      const directives: VNodeDirective[] = [{
+        name: 'show',
+        value: this.isContentActive,
+      }]
 
       // Do not add click outside for hover menu
       if (!this.openOnHover && this.closeOnClick) {
-        directives.push([
-          ClickOutside,
-          {
+        directives.push({
+          name: 'click-outside',
+          value: {
             handler: () => { this.isActive = false },
             closeConditional: this.closeConditional,
             include: () => [this.$el, ...this.getOpenDependentElements()],
           },
-        ])
+        })
       }
 
       return directives
     },
     genContent (): VNode {
       const options = {
-        ...this.getScopeIdAttrs(),
-        ...this.contentProps,
-        role: 'role' in this.$attrs ? this.$attrs.role : 'menu',
-        class: ['v-menu__content', {
+        attrs: {
+          ...this.getScopeIdAttrs(),
+          ...this.contentProps,
+          role: 'role' in this.$attrs ? this.$attrs.role : 'menu',
+        },
+        staticClass: 'v-menu__content',
+        class: {
           ...this.rootThemeClasses,
           ...this.roundedClasses,
           'v-menu__content--auto': this.auto,
           'v-menu__content--fixed': this.activatorFixed,
           menuable__content__active: this.isActive,
           [this.contentClass.trim()]: true,
-        }],
+        },
         style: this.styles,
+        directives: this.genDirectives(),
         ref: 'content',
-        onClick: (e: Event) => {
-          const target = e.target as HTMLElement
+        on: {
+          click: (e: Event) => {
+            const target = e.target as HTMLElement
 
-          if (target.getAttribute('disabled')) return
-          if (this.closeOnContentClick) this.isActive = false
+            if (target.getAttribute('disabled')) return
+            if (this.closeOnContentClick) this.isActive = false
+          },
+          keydown: this.onKeyDown,
         },
-        onKeydown: this.onKeyDown,
       } as VNodeData
 
-      if (this.onScroll) {
-        options.onScroll = this.onScroll
+      if (this.$listeners.scroll) {
+        options.on = options.on || {}
+        options.on.scroll = this.$listeners.scroll
       }
 
       if (!this.disabled && this.openOnHover) {
-        options.onMouseenter = this.mouseEnterHandler
+        options.on = options.on || {}
+        options.on.mouseenter = this.mouseEnterHandler
       }
 
       if (this.openOnHover) {
-        options.onMouseleave = this.mouseLeaveHandler
+        options.on = options.on || {}
+        options.on.mouseleave = this.mouseLeaveHandler
       }
 
-      const directives = this.genDirectives()
-
-      return withDirectives(h('div', options, this.getContentSlot()), directives)
+      return this.$createElement('div', options, this.getContentSlot())
     },
     getTiles () {
       if (!this.$refs.content) return
@@ -482,33 +495,33 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
-      class: ['v-menu', {
+      staticClass: 'v-menu',
+      class: {
         'v-menu--attached':
           this.attach === '' ||
           this.attach === true ||
           this.attach === 'attach',
-      }]
+      },
+      directives: [{
+        arg: '500',
+        name: 'resize',
+        value: this.onResize,
+      }],
     }
 
-    const directives = [[
-      Resize,
-      this.onResize,
-      '500'
-    ]]
-
-    // console.log('vmenurender', this, this.activator, this.getActivator())
-
-    return withDirectives(h('div', data, [
+    return h('div', data, [
       !this.activator && this.genActivator(),
       this.showLazyContent(() => [
-        h(VThemeProvider, {
-          root: true,
-          light: this.light,
-          dark: this.dark,
+        this.$createElement(VThemeProvider, {
+          props: {
+            root: true,
+            light: this.light,
+            dark: this.dark,
+          },
         }, [this.genTransition()]),
       ]),
-    ]), directives)
+    ])
   },
 })

package/src/components/VMenu/__tests__/VMenu.spec.ts

@@ -174,11 +174,11 @@ describe('VMenu.ts', () => {
       propsData: { eager: true },
       scopedSlots: {
         default () {
-          return h('div', [
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem),
-            h(VListItem, { props: { link: true } }),
+          return this.$createElement('div', [
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem),
+            this.$createElement(VListItem, { props: { link: true } }),
           ])
         },
       },
@@ -230,11 +230,11 @@ describe('VMenu.ts', () => {
       propsData: { eager: true },
       scopedSlots: {
         default () {
-          return h('div', [
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
+          return this.$createElement('div', [
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
           ])
         },
       },
@@ -265,9 +265,9 @@ describe('VMenu.ts', () => {
       propsData: { eager: true },
       scopedSlots: {
         default () {
-          return h('div', [
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
+          return this.$createElement('div', [
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
           ])
         },
       },
@@ -296,11 +296,11 @@ describe('VMenu.ts', () => {
       propsData: { eager: true },
       scopedSlots: {
         default () {
-          return h('div', [
-            h(VListItem),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
+          return this.$createElement('div', [
+            this.$createElement(VListItem),
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
           ])
         },
       },
@@ -372,8 +372,8 @@ describe('VMenu.ts', () => {
       },
       scopedSlots: {
         default () {
-          return h('div', [
-            h(VListItem, { props: { link: true } }),
+          return this.$createElement('div', [
+            this.$createElement(VListItem, { props: { link: true } }),
           ])
         },
       },

package/src/components/VMessages/VMessages.ts

@@ -6,7 +6,7 @@ import Colorable from '../../mixins/colorable'
 import Themeable from '../../mixins/themeable'
 
 // Types
-import { TransitionGroup, VNode, h } from 'vue'
+import { VNode } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import mixins from '../../util/mixins'
 
@@ -26,23 +26,26 @@ export default mixins(Colorable, Themeable).extend({
 
   methods: {
     genChildren () {
-      return h(TransitionGroup, {
-        class: 'v-messages__wrapper',
-        name: 'message-transition',
-        tag: 'div',
+      return this.$createElement('transition-group', {
+        staticClass: 'v-messages__wrapper',
+        attrs: {
+          name: 'message-transition',
+          tag: 'div',
+        },
       }, this.value.map(this.genMessage))
     },
     genMessage (message: string, key: number) {
-      return h('div', {
-        class: 'v-messages__message',
+      return this.$createElement('div', {
+        staticClass: 'v-messages__message',
         key,
       }, getSlot(this, 'default', { message, key }) || [message])
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', this.setTextColor(this.color, {
-      class: ['v-messages', this.themeClasses],
+      staticClass: 'v-messages',
+      class: this.themeClasses,
     }), [this.genChildren()])
   },
 })

package/src/components/VMessages/__tests__/VMessages.spec.ts

@@ -68,7 +68,7 @@ describe('VMessages.ts', () => {
       propsData: { value: ['Foo'] },
       scopedSlots: {
         default (props) {
-          return h('div', props.message)
+          return this.$createElement('div', props.message)
         },
       },
     })