@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VList/VListGroup.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives, vShow, VNode } from 'vue'
 // Styles
 import './VListGroup.sass'
 
@@ -24,10 +24,12 @@ import { VExpandTransition } from '../transitions'
 // Utils
 import mixins, { ExtractVue } from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
-import { VNode } from 'vue'
-import { Route } from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+type Route = RouteLocationNormalizedLoaded
 
 const baseMixins = mixins(
   BindsAttrs,
@@ -39,7 +41,7 @@ const baseMixins = mixins(
 
 type VListInstance = InstanceType<typeof VList>
 
-interface options extends ExtractVue<typeof baseMixins> {
+type options = ExtractVue<typeof baseMixins> & {
   list: VListInstance
   $refs: {
     group: HTMLElement
@@ -50,20 +52,18 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-group',
 
-  directives: { ripple },
-
   props: {
     activeClass: {
       type: String,
-      default: '',
+      default: ''
     },
     appendIcon: {
       type: String,
-      default: '$expand',
+      default: '$expand'
     },
     color: {
       type: String,
-      default: 'primary',
+      default: 'primary'
     },
     disabled: Boolean,
     group: [String, RegExp],
@@ -71,9 +71,9 @@ export default baseMixins.extend({
     prependIcon: String,
     ripple: {
       type: [Boolean, Object],
-      default: true,
+      default: true
     },
-    subGroup: Boolean,
+    subGroup: Boolean
   },
 
   computed: {
@@ -82,33 +82,44 @@ export default baseMixins.extend({
         'v-list-group--active': this.isActive,
         'v-list-group--disabled': this.disabled,
         'v-list-group--no-action': this.noAction,
-        'v-list-group--sub-group': this.subGroup,
-      }
-    },
-  },
-
-  watch: {
-    isActive (val: boolean) {
-      /* istanbul ignore else */
-      if (!this.subGroup && val) {
-        this.list && this.list.listClick(this._uid)
+        'v-list-group--sub-group': this.subGroup
       }
-    },
-    $route: 'onRouteChange',
+    }
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['inputValue', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     this.list && this.list.register(this)
 
     if (this.group &&
       this.$route &&
-      this.value == null
+      this.modelValue == null
     ) {
       this.isActive = this.matchRoute(this.$route.path)
     }
   },
 
-  beforeDestroy () {
+  watch: {
+    isActive (val: boolean) {
+      /* istanbul ignore else */
+      if (!this.subGroup && val) {
+        this.list && this.list.listClick(this.$.uid)
+      }
+    },
+    $route: 'onRouteChange'
+  },
+
+  beforeUnmount () {
     this.list && this.list.unregister(this)
   },
 
@@ -122,7 +133,7 @@ export default baseMixins.extend({
       this.$nextTick(() => (this.isActive = !this.isActive))
     },
     genIcon (icon: string | false): VNode {
-      return h(VIcon, icon)
+      return h(VIcon, {}, () => icon)
     },
     genAppendIcon (): VNode | null {
       const icon = !this.subGroup ? this.appendIcon : false
@@ -131,9 +142,9 @@ export default baseMixins.extend({
       if (!icon && !slot) return null
 
       return h(VListItemIcon, {
-        class: 'v-list-group__header__append-icon',
-      }, [
-        slot || this.genIcon(icon),
+        class: 'v-list-group__header__append-icon'
+      }, () => [
+        slot || this.genIcon(icon)
       ])
     },
     genHeader (): VNode {
@@ -142,29 +153,31 @@ export default baseMixins.extend({
         role: 'button',
         class: {
           'v-list-group__header': true,
-          [this.activeClass]: this.isActive,
+          [this.activeClass]: this.isActive
         },
-        inputValue: this.isActive,
+        link: true,
+        modelValue: this.isActive,
         ...this.listeners$,
         onClick: this.click
-      }, [
+      }, () => [
         this.genPrependIcon(),
         getSlot(this, 'activator'),
-        this.genAppendIcon(),
+        this.genAppendIcon()
       ]),
       [
         [Ripple, this.ripple]
       ])
     },
     genItems (): VNode[] {
+      const directives = [[
+        vShow,
+        this.isActive
+      ]]
+
       return this.showLazyContent(() => [
-        h('div', {
-          class: 'v-list-group__items',
-          directives: [{
-            name: 'show',
-            value: this.isActive,
-          }],
-        }, getSlot(this)),
+        withDirectives(h('div', {
+          class: 'v-list-group__items'
+        }, getSlot(this)), directives as any)
       ])
     },
     genPrependIcon (): VNode | null {
@@ -176,9 +189,9 @@ export default baseMixins.extend({
       if (!icon && !slot) return null
 
       return h(VListItemIcon, {
-        class: 'v-list-group__header__prepend-icon',
-      }, [
-        slot || this.genIcon(icon),
+        class: 'v-list-group__header__prepend-icon'
+      }, () => [
+        slot || this.genIcon(icon)
       ])
     },
     onRouteChange (to: Route) {
@@ -189,29 +202,28 @@ export default baseMixins.extend({
 
       /* istanbul ignore else */
       if (isActive && this.isActive !== isActive) {
-        this.list && this.list.listClick(this._uid)
+        this.list && this.list.listClick(this.$.uid)
       }
 
       this.isActive = isActive
     },
     toggle (uid: number) {
-      const isActive = this._uid === uid
+      const isActive = this.$.uid === uid
 
       if (isActive) this.isBooted = true
       this.$nextTick(() => (this.isActive = isActive))
     },
     matchRoute (to: string) {
       return to.match(this.group) !== null
-    },
+    }
   },
 
   render (): VNode {
     return h('div', this.setTextColor(this.isActive && this.color, {
-      class: 'v-list-group',
-      class: this.classes,
+      class: ['v-list-group', this.classes]
     }), [
       this.genHeader(),
-      h(VExpandTransition, this.genItems()),
+      h(VExpandTransition, {}, () => this.genItems())
     ])
-  },
+  }
 })

package/src/components/VList/VListItem.ts

@@ -1,4 +1,5 @@
-import {h, withDirectives} from 'vue'
+import type { VNode } from '../../types/vue-internal'
+import { h, withDirectives, PropType } from 'vue'
 // Styles
 import './VListItem.sass'
 
@@ -13,25 +14,23 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import Ripple from '../../directives/ripple'
 
 // Utilities
-import { getSlot, keyCodes } from './../../util/helpers'
-import mergeData from './../../util/mergeData'
+import { getSlot, keyCodes, getTagValue } from './../../util/helpers'
+import mergeData, { mergeClasses } from './../../util/mergeData'
 import { ExtractVue } from './../../util/mixins'
-import { removed } from '../../util/console'
+import { removed, breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode } from 'vue'
-import { PropType, PropValidator } from 'vue/types/options'
 
 const baseMixins = mixins(
   Colorable,
   Routable,
   Themeable,
   GroupableFactory('listItemGroup'),
-  ToggleableFactory('inputValue')
+  ToggleableFactory('modelValue')
 )
 
-interface options extends ExtractVue<typeof baseMixins> {
+type options = ExtractVue<typeof baseMixins> & {
   $el: HTMLElement
   isInGroup: boolean
   isInList: boolean
@@ -43,23 +42,19 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-item',
 
-  directives: {
-    Ripple,
-  },
-
   inject: {
     isInGroup: {
-      default: false,
+      default: false
     },
     isInList: {
-      default: false,
+      default: false
     },
     isInMenu: {
-      default: false,
+      default: false
     },
     isInNav: {
-      default: false,
-    },
+      default: false
+    }
   },
 
   inheritAttrs: false,
@@ -67,29 +62,37 @@ export default baseMixins.extend({
   props: {
     activeClass: {
       type: String
-    } as any as PropValidator<string>,
+    } as any as PropType<string>,
     dense: Boolean,
     inactive: Boolean,
+    onClick: Function as PropType<(e: MouseEvent) => void>,
     link: Boolean,
     selectable: {
-      type: Boolean,
+      type: Boolean
     },
     tag: {
       type: String,
-      default: 'div',
+      default: 'div'
     },
     threeLine: Boolean,
     twoLine: Boolean,
-    value: null as any as PropType<any>,
+    modelValue: null as any as PropType<any>
   },
 
+  emits: [
+    'click',
+    'keydown',
+    'change',
+    'update:modelValue'
+  ],
+
   data: () => ({
-    proxyClass: 'v-list-item--active',
+    proxyClass: 'v-list-item--active'
   }),
 
   computed: {
-    $activeClass() {
-      if(this.activeClass) return this.activeClass
+    $activeClass () {
+      if (this.activeClass) return this.activeClass
       if (!this.listItemGroup) return ''
 
       return this.listItemGroup.activeClass
@@ -104,7 +107,7 @@ export default baseMixins.extend({
         'v-list-item--selectable': this.selectable,
         'v-list-item--three-line': this.threeLine,
         'v-list-item--two-line': this.twoLine,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
     isClickable (): boolean {
@@ -112,10 +115,19 @@ export default baseMixins.extend({
         Routable.computed.isClickable.call(this) ||
         this.listItemGroup
       )
-    },
+    }
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('avatar')) {
       removed('avatar', this)
@@ -131,10 +143,11 @@ export default baseMixins.extend({
       this.to || this.toggle()
     },
     genAttrs () {
+      const { class: _, ...otherAttrs } = this.$attrs
       const attrs: Record<string, any> = {
+        ...otherAttrs,
         'aria-disabled': this.disabled ? true : undefined,
-        tabindex: this.isClickable && !this.disabled ? 0 : -1,
-        ...this.$attrs,
+        tabindex: this.isClickable && !this.disabled ? 0 : -1
       }
 
       if (this.$attrs.hasOwnProperty('role')) {
@@ -154,19 +167,21 @@ export default baseMixins.extend({
       return attrs
     },
     toggle () {
-      if (this.to && this.inputValue === undefined) {
+      if (this.to && this.modelValue === undefined) {
         this.isActive = !this.isActive
       }
       this.$emit('change')
-    },
+      this.$emitLegacy('change')
+    }
   },
 
   render (): VNode {
     let { tag, data, directives } = this.generateRouteLink()
+    const attrs = this.genAttrs()
 
     data = mergeData(
       data,
-      this.genAttrs()
+      attrs
     )
 
     data = {
@@ -179,6 +194,8 @@ export default baseMixins.extend({
           this.$emit('keydown', e)
         }
       },
+      // Ensure our attrs take precedence over routable
+      ...attrs
     }
 
     if (this.inactive) tag = 'div'
@@ -187,14 +204,30 @@ export default baseMixins.extend({
     //   delete data.nativeOn
     // }
 
-    const children = getSlot(this, 'default', {
+    const slotProps = {
       active: this.isActive,
-      toggle: this.toggle,
-    })
+      toggle: this.toggle
+    }
 
-    return withDirectives(
-      h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children),
-      directives
-    )
-  },
+    const children = [
+      getSlot(this, 'prepend', slotProps),
+      getSlot(this, 'default', slotProps),
+      getSlot(this, 'append', slotProps)
+    ].filter(Boolean)
+
+    const nodeData = this.isActive ? this.setTextColor(this.color, data) : data
+
+    const attrsClasses = this.$attrs.class
+    if (attrsClasses) {
+      nodeData.class = [this.classes, attrsClasses]
+    } else {
+      nodeData.class = this.classes
+    }
+
+    const node = typeof tag === 'string'
+      ? h(getTagValue(tag), nodeData, children as any)
+      : h(tag, nodeData, { default: () => children })
+
+    return withDirectives(node, directives)
+  }
 })

package/src/components/VList/VListItemAction.ts

@@ -1,22 +1,23 @@
 // Types
-import { defineComponent, VNode, h } from 'vue'
+import { defineComponent, VNode, h, Comment } from 'vue'
 
 /* @vue/component */
 export default defineComponent({
   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()
+    const { class: attrClass, ...otherAttrs } = this.$attrs
+    let className = attrClass ? `v-list-item__action ${attrClass}` : 'v-list-item__action'
+    const children = this.$slots.default?.() || []
 
-    const filteredChild = children.filter(VNode => {
-      return VNode.isComment === false && VNode.text !== ' '
+    const filteredChild = children.filter((vnode: any) => {
+      return vnode?.type !== Comment && vnode?.children !== ' '
     })
-    if (filteredChild.length > 1) data.class += ' v-list-item__action--stack'
+    if (filteredChild.length > 1) className += ' v-list-item__action--stack'
 
-    return h('div', data, children)
-  },
+    return h('div', {
+      ...otherAttrs,
+      class: className
+    }, children)
+  }
 })

package/src/components/VList/VListItemAvatar.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Components
 import VAvatar from '../VAvatar'
 
@@ -14,8 +14,8 @@ export default defineComponent({
     horizontal: Boolean,
     size: {
       type: [Number, String],
-      default: 40,
-    },
+      default: 40
+    }
   },
 
   computed: {
@@ -26,10 +26,10 @@ export default defineComponent({
         'v-avatar--tile': this.tile || this.horizontal,
         'v-list-item__avatar': true
       }
-    },
+    }
   },
 
   render (): VNode {
     return VAvatar.render.call(this)
-  },
+  }
 })

package/src/components/VList/VListItemGroup.ts

@@ -19,7 +19,7 @@ export default mixins(
   provide () {
     return {
       isInGroup: true,
-      listItemGroup: this,
+      listItemGroup: this
     }
   },
 
@@ -27,9 +27,9 @@ export default mixins(
     classes (): object {
       return {
         ...BaseItemGroup.computed.classes.call(this),
-        'v-list-item-group': true,
+        'v-list-item-group': true
       }
-    },
+    }
   },
 
   methods: {
@@ -37,9 +37,9 @@ export default mixins(
       return this.setTextColor(this.color, {
         ...BaseItemGroup.methods.genData.call(this),
         attrs: {
-          role: 'listbox',
-        },
+          role: 'listbox'
+        }
       })
-    },
-  },
+    }
+  }
 })

package/src/components/VList/VListItemIcon.ts

@@ -12,6 +12,6 @@ export default defineComponent({
 
     data.class = (`v-list-item__icon ${data.class || ''}`).trim()
 
-    return h('div', data, this.$slots.default())
-  },
+    return h('div', data, this.$slots.default?.())
+  }
 })

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

@@ -2,19 +2,16 @@
 import VList from '../VList'
 
 // Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount, VueWrapper } from '@vue/test-utils'
 
 describe('VList.ts', () => {
-  type Instance = InstanceType<typeof VList>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VList>;
+  let mountFunction: (options?: any) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VList, {
-        ...options,
+        ...options
       })
     }
   })
@@ -27,9 +24,9 @@ describe('VList.ts', () => {
 
   it('should render a dense component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        dense: true,
-      },
+      props: {
+        dense: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -37,9 +34,9 @@ describe('VList.ts', () => {
 
   it('should render a subheader component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        subheader: true,
-      },
+      props: {
+        subheader: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -47,9 +44,9 @@ describe('VList.ts', () => {
 
   it('should render a threeLine component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        threeLine: true,
-      },
+      props: {
+        threeLine: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -57,9 +54,9 @@ describe('VList.ts', () => {
 
   it('should render a twoLine component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
-        twoLine: true,
-      },
+      props: {
+        twoLine: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -67,13 +64,17 @@ describe('VList.ts', () => {
 
   it('should have an inferred role from injections', () => {
     const wrapper = mountFunction({
-      provide: { isInMenu: true },
+      global: {
+        provide: { isInMenu: true }
+      }
     })
 
     expect(wrapper.element.getAttribute('role')).toBeNull()
 
     const wrapper2 = mountFunction({
-      provide: { isInNav: true },
+      global: {
+        provide: { isInNav: true }
+      }
     })
 
     expect(wrapper2.element.getAttribute('role')).toBeNull()