@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-alpha21

package/src/components/VItemGroup/VItem.ts

@@ -7,10 +7,9 @@ import { factory as GroupableFactory } from '../../mixins/groupable'
 // Utilities
 import mixins from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
+import { defineComponent, mergeProps } from "vue"
 
-// Types
-import {defineComponent} from 'vue'
-import { VNode, ScopedSlotChildren } from 'vue/types/vnode'
+import type { VNode } from 'vue'
 
 /* @vue/component */
 export const BaseItem = defineComponent({
@@ -32,42 +31,45 @@ export const BaseItem = defineComponent({
     },
   },
 
-  render (): VNode {
+  render (): VNode | null {
     if (!this.$slots.default) {
       consoleWarn('v-item is missing a default scopedSlot', this)
-
-      return null as any
+      return null
     }
 
-    let element: VNode | ScopedSlotChildren
+    const slotContent = this.$slots.default({
+      active: this.isActive,
+      toggle: this.toggle,
+    })
 
-    /* istanbul ignore else */
-    if (this.$slots.default) {
-      element = this.$slots.default({
-        active: this.isActive,
-        toggle: this.toggle,
-      })
+    if (!slotContent || slotContent.length === 0) {
+      consoleWarn('v-item slot returned empty content', this)
+      return null
     }
 
-    if (Array.isArray(element) && element.length === 1) {
-      element = element[0]
-    }
+    let element = slotContent[0]
 
-    if (!element || Array.isArray(element) || !element.tag) {
-      consoleWarn('v-item should only contain a single element', this)
+    if (!element) {
+      consoleWarn('v-item should contain at least one element', this)
+      return null
+    }
 
-      return element as any
+    if (!element.type) {
+      consoleWarn('v-item should only contain valid VNode elements', this)
+      return element
     }
 
-    element.data = this._b(element.data || {}, element.tag!, {
+    element.props = mergeProps(element.props || {}, {
       class: {
         [this.activeClass]: this.isActive,
-        'v-item--disabled': this.disabled,
-      },
+        "v-item--disabled": this.disabled
+      }
     })
 
     if (this.disabled) {
-      element.data.attrs = { ...element.data.attrs, tabindex: -1 }
+      element.props = mergeProps(element.props || {}, {
+        tabindex: -1
+      })
     }
 
     return element

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/VList.ts

@@ -75,7 +75,7 @@ export default defineComponent({
       this.groups.push(content)
     },
     unregister (content: VListGroupInstance) {
-      const index = this.groups.findIndex(g => g._uid === content._uid)
+      const index = this.groups.findIndex(g => g.$.uid === content.$.uid)
 
       if (index > -1) this.groups.splice(index, 1)
     },

package/src/components/VList/VListGroup.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import {h, withDirectives, vShow} from 'vue'
 // Styles
 import './VListGroup.sass'
 
@@ -91,7 +91,7 @@ export default baseMixins.extend({
     isActive (val: boolean) {
       /* istanbul ignore else */
       if (!this.subGroup && val) {
-        this.list && this.list.listClick(this._uid)
+        this.list && this.list.listClick(this.$.uid)
       }
     },
     $route: 'onRouteChange',
@@ -102,13 +102,13 @@ export default baseMixins.extend({
 
     if (this.group &&
       this.$route &&
-      this.value == null
+      this.modelValue == null
     ) {
       this.isActive = this.matchRoute(this.$route.path)
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.list && this.list.unregister(this)
   },
 
@@ -157,14 +157,15 @@ export default baseMixins.extend({
       ])
     },
     genItems (): VNode[] {
+      const directives = [[
+        vShow,
+        this.isActive
+      ]]
+
       return this.showLazyContent(() => [
-        h('div', {
+        withDirectives(h('div', {
           class: 'v-list-group__items',
-          directives: [{
-            name: 'show',
-            value: this.isActive,
-          }],
-        }, getSlot(this)),
+        }, getSlot(this)), directives)
       ])
     },
     genPrependIcon (): VNode | null {
@@ -189,13 +190,13 @@ 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))
@@ -207,8 +208,7 @@ export default baseMixins.extend({
 
   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()),

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

@@ -6,14 +6,16 @@ import './VRadioGroup.sass'
 import VInput from '../VInput'
 import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 
-// Types
+// Utilities
+import { mergeProps, h } from 'vue'
 import mixins from '../../util/mixins'
-import { PropType } from 'vue'
-import {h} from 'vue'
+
+// Types
+import type { PropType } from 'vue'
 
 const baseMixins = mixins(
+  VInput,
   BaseItemGroup,
-  VInput
 )
 
 /* @vue/component */
@@ -40,7 +42,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: {
@@ -88,10 +90,7 @@ export default baseMixins.extend({
   render () {
     const vnode = VInput.render.call(this)
 
-    vnode.props = {
-      ...vnode.props,
-      ...this.attrs$
-    }
+    vnode.props = mergeProps(vnode.props, this.attrs$);
 
     return vnode
   },

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -100,7 +100,7 @@ export default defineComponent({
         input.data = input.data || {}
         input.data.attrs = input.data.attrs || {}
         input.data.attrs.value = this.internalValue[i]
-        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this._uid}`
+        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this.$.uid}`
 
         return input
       })

package/src/components/VSelect/VSelect.ts

@@ -494,15 +494,16 @@ export default baseMixins.extend({
       }
     },
     genListWithSlot (): VNode {
-      const slots = ['prepend-item', 'no-data', 'append-item']
+      const slots = Object.fromEntries(['prepend-item', 'no-data', 'append-item']
         .filter(slotName => this.$slots[slotName])
-        .map(slotName => h('template', {
-          slot: slotName,
-        }, this.$slots[slotName]))
+        .map(slotName => [
+          slotName,
+          this.$slots[slotName]
+          ]
+        ))
       // Requires destructuring due to Vue
       // modifying the `on` property when passed
       // as a referenced object
-
       return h(VSelectList, {
         ...this.listData,
       }, {...slots,item: this.$slots.item})

package/src/components/VSelect/VSelectList.ts

@@ -90,7 +90,7 @@ export default mixins(Colorable, Themeable).extend({
       return h(VListItemAction, [
         h(VSimpleCheckbox, {
           color: this.color,
-          value: inputValue,
+          modelValue: inputValue,
           ripple: false,
           onInput: () => this.$emit('select', item)
         }),
@@ -147,7 +147,7 @@ export default mixins(Colorable, Themeable).extend({
         // Default behavior in list does not
         // contain aria-selected by default
         'aria-selected': String(value),
-        id: `list-item-${this._uid}-${index}`,
+        id: `list-item-${this.$.uid}-${index}`,
         role: 'option',
         onMousedown: (e: Event) => {
           // Prevent onBlur from being called
@@ -226,11 +226,11 @@ export default mixins(Colorable, Themeable).extend({
       else children.push(this.genTile({ item, index }))
     }
 
-    children.length || children.push(this.$slots['no-data'] || this.staticNoDataTile)
+    children.length || children.push(this.$slots['no-data']?.() || this.staticNoDataTile)
 
-    this.$slots['prepend-item'] && children.unshift(this.$slots['prepend-item'])
+    this.$slots['prepend-item'] && children.unshift(this.$slots['prepend-item']())
 
-    this.$slots['append-item'] && children.push(this.$slots['append-item'])
+    this.$slots['append-item'] && children.push(this.$slots['append-item']())
 
     return h(VList, {
       class: ['v-select-list', this.themeClasses],

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/VSparkline/VSparkline.ts

@@ -284,7 +284,7 @@ export default mixins<options &
       return h('defs', [
         h('linearGradient', {
           attrs: {
-            id: this._uid,
+            id: this.$.uid,
             gradientUnits: 'userSpaceOnUse',
             x1: gradientDirection === 'left' ? '100%' : '0',
             y1: gradientDirection === 'top' ? '100%' : '0',
@@ -310,8 +310,8 @@ export default mixins<options &
       return h('path', {
         attrs: {
           d: genPath(points, this._radius, this.fill, this.parsedHeight),
-          fill: this.fill ? `url(#${this._uid})` : 'none',
-          stroke: this.fill ? 'none' : `url(#${this._uid})`,
+          fill: this.fill ? `url(#${this.$.uid})` : 'none',
+          stroke: this.fill ? 'none' : `url(#${this.$.uid})`,
         },
         ref: 'path',
       })
@@ -347,12 +347,12 @@ export default mixins<options &
         },
       }, [
         this.genGradient(),
-        this.genClipPath(bars, offsetX, this._lineWidth, 'sparkline-bar-' + this._uid),
+        this.genClipPath(bars, offsetX, this._lineWidth, 'sparkline-bar-' + this.$.uid),
         this.hasLabels ? this.genLabels(offsetX) : undefined as never,
         h('g', {
           attrs: {
-            'clip-path': `url(#sparkline-bar-${this._uid}-clip)`,
-            fill: `url(#${this._uid})`,
+            'clip-path': `url(#sparkline-bar-${this.$.uid}-clip)`,
+            fill: `url(#${this.$.uid})`,
           },
         }, [
           h('rect', {

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

@@ -204,7 +204,7 @@ export default baseMixins.extend({
         nextIcon: this.nextIcon,
         prevIcon: this.prevIcon,
         showArrows: this.showArrows,
-        value: this.internalValue,
+        modelValue: this.internalValue,
         'onCall:slider': this.callSlider,
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
@@ -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/VTabs/__tests__/VTab.spec.ts

@@ -5,15 +5,12 @@ import VTab from '../VTab'
 import {
   mount,
   RouterLinkStub,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
-// Types
-import { ExtractVue } from './../../../util/mixins'
-
 describe('VTab.ts', () => {
-  type Instance = ExtractVue<typeof VTab>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VTab>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -23,28 +20,33 @@ describe('VTab.ts', () => {
     }
   })
 
-  it('should have the correct value', () => {
+  it('should have the correct value', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         href: '#foo',
       },
-      mocks: {
-        $route: { path: '/' },
-        $router: {
-          resolve: to => {
-            let href
-            if (to.path) href = to.path
-
-            return { href }
+      global: {
+        mocks: {
+          $route: { path: '/' },
+          $router: {
+            resolve: (to: any) => {
+              let href
+              if (to.path) href = to.path
+
+              return { href }
+            },
           },
         },
+        stubs: {
+          'router-link': RouterLinkStub,
+        },
       },
     })
 
     expect(wrapper.vm.value).toBe('foo')
-    wrapper.setProps({ href: null, to: '/foo' })
+    await wrapper.setProps({ href: null, to: '/foo' })
     expect(wrapper.vm.value).toBe('/foo')
-    wrapper.setProps({ to: { path: 'bar' } })
+    await wrapper.setProps({ to: { path: 'bar' } })
     expect(wrapper.vm.value).toBe('bar')
   })
 
@@ -52,19 +54,23 @@ describe('VTab.ts', () => {
   it('should react to route change', async () => {
     const toggle = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         activeClass: 'bar',
         to: 'foo',
       },
-      methods: { toggle },
-      mocks: {
-        $route: { path: '/' },
-      },
-      stubs: {
-        RouterLink: RouterLinkStub,
+      global: {
+        mocks: {
+          $route: { path: '/' },
+        },
+        stubs: {
+          'router-link': RouterLinkStub,
+        },
       },
     })
 
+    // Mock the toggle method
+    wrapper.vm.toggle = toggle
+
     // Mock route change being called
     wrapper.vm.onRouteChange()
     await wrapper.vm.$nextTick()
@@ -73,15 +79,19 @@ describe('VTab.ts', () => {
 
     // explicitly mock class added
     // by vue router
-    ;(wrapper.vm.$refs.link as any)._vnode.data = {
-      class: { 'bar v-tab--active': true },
+    if (wrapper.vm.$refs.link) {
+      ;(wrapper.vm.$refs.link as any)._vnode = {
+        data: {
+          class: { 'bar v-tab--active': true },
+        }
+      }
     }
     ;(wrapper.vm as any).$route.path = '/foo'
 
     wrapper.vm.onRouteChange()
     await wrapper.vm.$nextTick()
 
-    wrapper.setProps({ to: undefined })
+    await wrapper.setProps({ to: undefined })
 
     wrapper.vm.onRouteChange()
     await wrapper.vm.$nextTick()
@@ -89,26 +99,27 @@ describe('VTab.ts', () => {
     expect(toggle).toHaveBeenCalledTimes(1)
   })
 
-  it('should respond to clicks and mousedown.enter', () => {
+  it('should respond to clicks and mousedown.enter', async () => {
     const event = { preventDefault: jest.fn() }
     const toggle = jest.fn()
-    const wrapper = mountFunction({
-      methods: { toggle },
-    })
+    const wrapper = mountFunction()
+
+    // Mock the toggle method
+    wrapper.vm.toggle = toggle
 
-    wrapper.trigger('click', event)
+    await wrapper.trigger('click', event)
 
     expect(event.preventDefault).not.toHaveBeenCalled()
     expect(toggle).toHaveBeenCalled()
 
-    wrapper.setProps({ href: '#foo' })
+    await wrapper.setProps({ href: '#foo' })
 
-    wrapper.trigger('click', event)
+    await wrapper.trigger('click', event)
 
     expect(event.preventDefault).toHaveBeenCalled()
 
-    wrapper.trigger('keydown.enter', event)
-    wrapper.trigger('keydown.space', event)
+    await wrapper.trigger('keydown.enter', event)
+    await wrapper.trigger('keydown.space', event)
 
     expect(event.preventDefault).toHaveBeenCalledTimes(2)
     expect(toggle).toHaveBeenCalledTimes(3)