@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

package/src/components/VList/VListItem.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives, VNode, PropType, PropValidator } from 'vue'
 // Styles
 import './VListItem.sass'
 
@@ -14,21 +14,19 @@ import Ripple from '../../directives/ripple'
 
 // Utilities
 import { getSlot, keyCodes } from './../../util/helpers'
-import mergeData from './../../util/mergeData'
+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> {
@@ -43,10 +41,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-item',
 
-  directives: {
-    Ripple,
-  },
-
   inject: {
     isInGroup: {
       default: false,
@@ -66,10 +60,11 @@ export default baseMixins.extend({
 
   props: {
     activeClass: {
-      type: String
+      type: String,
     } as any as PropValidator<string>,
     dense: Boolean,
     inactive: Boolean,
+    onClick: Function as PropType<(e: MouseEvent) => void>,
     link: Boolean,
     selectable: {
       type: Boolean,
@@ -80,16 +75,23 @@ export default baseMixins.extend({
     },
     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',
   }),
 
   computed: {
-    $activeClass() {
-      if(this.activeClass) return this.activeClass
+    $activeClass () {
+      if (this.activeClass) return this.activeClass
       if (!this.listItemGroup) return ''
 
       return this.listItemGroup.activeClass
@@ -116,6 +118,15 @@ export default baseMixins.extend({
   },
 
   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 +142,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,
       }
 
       if (this.$attrs.hasOwnProperty('role')) {
@@ -154,19 +166,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 +193,8 @@ export default baseMixins.extend({
           this.$emit('keydown', e)
         }
       },
+      // Ensure our attrs take precedence over routable
+      ...attrs,
     }
 
     if (this.inactive) tag = 'div'
@@ -187,14 +203,30 @@ export default baseMixins.extend({
     //   delete data.nativeOn
     // }
 
-    const children = getSlot(this, 'default', {
+    const slotProps = {
       active: this.isActive,
       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(tag, nodeData, children)
+      : h(tag, nodeData, () => 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/__tests__/VList.spec.ts

@@ -2,14 +2,11 @@
 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 = {}) => {
@@ -27,7 +24,7 @@ describe('VList.ts', () => {
 
   it('should render a dense component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         dense: true,
       },
     })
@@ -37,7 +34,7 @@ describe('VList.ts', () => {
 
   it('should render a subheader component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         subheader: true,
       },
     })
@@ -47,7 +44,7 @@ describe('VList.ts', () => {
 
   it('should render a threeLine component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         threeLine: true,
       },
     })
@@ -57,7 +54,7 @@ describe('VList.ts', () => {
 
   it('should render a twoLine component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         twoLine: true,
       },
     })
@@ -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()

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

@@ -4,12 +4,15 @@ import VListGroup from '../VListGroup'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VListGroup.ts', () => {
   type Instance = InstanceType<typeof VListGroup>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -29,42 +32,49 @@ describe('VListGroup.ts', () => {
     const $route = { path: '/foo' }
     const listClick = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          listClick,
-          register: jest.fn(),
-          unregister: jest.fn(),
+      global: {
+        provide: {
+          list: {
+            listClick,
+            register: jest.fn(),
+            unregister: jest.fn(),
+          },
+        },
+        mocks: {
+          $route,
         },
       },
-      propsData: {
+      props: {
         group: 'foo',
       },
-      mocks: {
-        $route,
-      },
     })
 
     await wrapper.vm.$nextTick()
-    expect(listClick).toHaveBeenCalledWith(wrapper.vm._uid)
+    expect(listClick).toHaveBeenCalledWith(wrapper.vm.$.uid)
   })
 
   it('should toggle when clicked', async () => {
-    const wrapper = mountFunction()
+    const wrapper = mountFunction({
+      props: {
+        modelValue: false,
+      },
+    })
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
     wrapper.vm.click()
     await wrapper.vm.$nextTick()
-    expect(input).toHaveBeenCalledWith(true)
+    expect(wrapper.emitted('click')).toBeTruthy()
+    expect(wrapper.vm.isActive).toBe(true)
   })
 
   it('should register when mounted', () => {
     const register = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          register,
-          unregister: () => {},
+      global: {
+        provide: {
+          list: {
+            register,
+            unregister: () => {},
+          },
         },
       },
     })
@@ -75,15 +85,17 @@ describe('VListGroup.ts', () => {
   it('should unregister when destroyed', async () => {
     const unregister = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          register: () => {},
-          unregister,
+      global: {
+        provide: {
+          list: {
+            register: () => {},
+            unregister,
+          },
         },
       },
     })
 
-    wrapper.destroy()
+    wrapper.unmount()
     await wrapper.vm.$nextTick()
     expect(unregister).toHaveBeenCalledWith(wrapper.vm)
   })
@@ -91,12 +103,8 @@ describe('VListGroup.ts', () => {
   it('should render a custom affix icons', async () => {
     const wrapper = mountFunction({
       slots: {
-        appendIcon: {
-          render: h => h('span', 'foo'),
-        },
-        prependIcon: {
-          render: h => h('span', 'bar'),
-        },
+        appendIcon: '<span>foo</span>',
+        prependIcon: '<span>bar</span>',
       },
     })
 
@@ -104,10 +112,8 @@ describe('VListGroup.ts', () => {
     expect(wrapper.html()).toContain('<span>bar</span>')
   })
 
-  it('should respond to keydown.enter on header', () => {
-    const click = jest.fn()
+  it('should respond to keydown.enter on header', async () => {
     const wrapper = mountFunction({
-      methods: { click },
       slots: {
         activator: {
           template: '<span>foo</span>',
@@ -117,26 +123,28 @@ describe('VListGroup.ts', () => {
 
     const span = wrapper.find('span')
 
-    span.trigger('keydown.enter')
+    await span.trigger('keydown.enter')
 
-    expect(click).toHaveBeenCalled()
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
   })
 
   it('should set active state if route changes and group present', async () => {
     const listClick = jest.fn()
     const $route = { path: '/bar' }
     const wrapper = mountFunction({
-      provide: {
-        list: {
-          listClick,
-          register: () => {},
-          unregister: () => {},
+      global: {
+        provide: {
+          list: {
+            listClick,
+            register: () => {},
+            unregister: () => {},
+          },
         },
+        mocks: { $route },
       },
-      propsData: {
+      props: {
         group: 'foo',
       },
-      mocks: { $route },
     })
 
     expect(wrapper.vm.isActive).toBe(false)
@@ -146,12 +154,12 @@ describe('VListGroup.ts', () => {
     wrapper.vm.onRouteChange(wrapper.vm.$route)
 
     expect(wrapper.vm.isActive).toBe(true)
-    expect(listClick).toHaveBeenCalledWith(wrapper.vm._uid)
+    expect(listClick).toHaveBeenCalledWith(wrapper.vm.$.uid)
   })
 
-  it('should not react to clicks when disabled', () => {
+  it('should not react to clicks when disabled', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
       slots: {
@@ -162,7 +170,7 @@ describe('VListGroup.ts', () => {
     const span = wrapper.find('span.bar')
 
     expect(wrapper.vm.isActive).toBe(false)
-    span.trigger('click')
+    await span.trigger('click')
     expect(wrapper.vm.isActive).toBe(false)
   })
 
@@ -173,20 +181,20 @@ describe('VListGroup.ts', () => {
     wrapper.vm.toggle(100)
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.vm.toggle(wrapper.vm._uid)
+    wrapper.vm.toggle(wrapper.vm.$.uid)
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(true)
   })
 
-  it('should have the correct a11y attributes', () => {
+  it('should have the correct a11y attributes', async () => {
     const wrapper = mountFunction()
     const header = wrapper.find('.v-list-group__header')
 
-    expect(header.element.tabIndex).toBe(0)
+    expect(header.element.tabIndex).toBe(-1)
     expect(header.element.getAttribute('aria-expanded')).toBe('false')
     expect(header.element.getAttribute('role')).toBe('button')
 
-    wrapper.setData({ isActive: true })
+    await wrapper.setData({ isActive: true })
 
     expect(header.element.getAttribute('aria-expanded')).toBe('true')
   })