@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VLazy/VLazy.ts

@@ -1,4 +1,4 @@
-import { Transition, h, withDirectives, defineComponent } from 'vue'
+import { Transition, h, withDirectives, defineComponent, PropType } from 'vue'
 // Mixins
 import Measurable from '../../mixins/measurable'
 import Toggleable from '../../mixins/toggleable'
@@ -12,7 +12,6 @@ import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
-import { PropValidator } from 'vue/types/options'
 
 export default mixins(
   Measurable,
@@ -22,7 +21,6 @@ export default mixins(
 
   emits: ['update:modelValue'],
 
-
   props: {
     options: {
       type: Object,
@@ -31,25 +29,25 @@ export default mixins(
       default: () => ({
         root: undefined,
         rootMargin: undefined,
-        threshold: undefined,
-      }),
-    } as PropValidator<IntersectionObserverInit>,
+        threshold: undefined
+      })
+    } as unknown as PropType<IntersectionObserverInit>,
     tag: {
       type: String,
-      default: 'div',
+      default: 'div'
     },
     transition: {
       type: String,
-      default: 'fade-transition',
-    },
+      default: 'fade-transition'
+    }
   },
 
   computed: {
     styles (): object {
       return {
-        ...this.measurableStyles,
+        ...this.measurableStyles
       }
-    },
+    }
   },
 
   methods: {
@@ -58,31 +56,34 @@ export default mixins(
 
       return this.transition
         ? h(Transition, {
-          name: this.transition,
-        }, children)
+          name: this.transition
+        }, () => {
+          if (!children) return []
+          return Array.isArray(children) ? children : [children]
+        })
         : children
     },
     onObserve (
       entries: IntersectionObserverEntry[],
       observer: IntersectionObserver,
-      isIntersecting: boolean,
+      isIntersecting: boolean
     ) {
       if (this.isActive) return
 
       this.isActive = isIntersecting
-    },
+    }
   },
 
   render (): VNode {
     return withDirectives(h(getTagValue(this.tag), {
       class: 'v-lazy',
       ...this.$attrs,
-      style: this.styles,
+      style: this.styles
     }, [this.genContent()]), [
       [intersect, {
         handler: this.onObserve,
-        options: this.options,
+        options: this.options
       }]
     ])
-  },
+  }
 })

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

@@ -2,11 +2,12 @@
 import VLazy from '../VLazy'
 
 // Utilities
+import { h } from 'vue'
 import {
   mount,
   MountOptions,
   Wrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('VLazy.ts', () => {
@@ -18,7 +19,7 @@ describe('VLazy.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VLazy, {
-        ...options,
+        ...options
       })
     }
   })
@@ -26,8 +27,8 @@ describe('VLazy.ts', () => {
   it('should conditionally render content', async () => {
     const wrapper = mountFunction({
       slots: {
-        default: '<div>foobar</div>',
-      },
+        default: () => h('div', 'foobar')
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -40,8 +41,8 @@ describe('VLazy.ts', () => {
   it('should set a minimum height', () => {
     const wrapper = mountFunction({
       props: {
-        minHeight: 200,
-      },
+        minHeight: 200
+      }
     })
 
     expect(wrapper.element.style.minHeight).toBe('200px')

package/src/components/VLazy/__tests__/__snapshots__/VLazy.spec.ts.snap

@@ -2,7 +2,6 @@
 
 exports[`VLazy.ts should conditionally render content 1`] = `
 <div class="v-lazy">
-  false
 </div>
 `;
 

package/src/components/VList/VList.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VList.sass'
 import VListGroup from './VListGroup'
@@ -25,17 +25,17 @@ export default defineComponent({
   provide (): object {
     return {
       isInList: true,
-      list: this,
+      list: this
     }
   },
 
   inject: {
     isInMenu: {
-      default: false,
+      default: false
     },
     isInNav: {
-      default: false,
-    },
+      default: false
+    }
   },
 
   props: {
@@ -47,11 +47,11 @@ export default defineComponent({
     rounded: Boolean,
     subheader: Boolean,
     threeLine: Boolean,
-    twoLine: Boolean,
+    twoLine: Boolean
   },
 
   data: () => ({
-    groups: [] as VListGroupInstance[],
+    groups: [] as VListGroupInstance[]
   }),
 
   computed: {
@@ -65,9 +65,9 @@ export default defineComponent({
         'v-list--rounded': this.rounded,
         'v-list--subheader': this.subheader,
         'v-list--two-line': this.twoLine,
-        'v-list--three-line': this.threeLine,
+        'v-list--three-line': this.threeLine
       }
-    },
+    }
   },
 
   methods: {
@@ -85,7 +85,7 @@ export default defineComponent({
       for (const group of this.groups) {
         group.toggle(uid)
       }
-    },
+    }
   },
 
   render (): VNode {
@@ -94,9 +94,9 @@ export default defineComponent({
       style: this.styles,
       role: this.isInNav || this.isInMenu ? undefined : 'list',
       // ...this.attrs$,
-      ...this.listeners$,
+      ...this.listeners$
     }
 
     return h(getTagValue(this.tag), this.setBackgroundColor(this.color, data), getSlot(this))
-  },
+  }
 })

package/src/components/VList/VListGroup.ts

@@ -27,7 +27,9 @@ import { getSlot } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
-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,19 +52,18 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-group',
 
-
   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],
@@ -70,9 +71,9 @@ export default baseMixins.extend({
     prependIcon: String,
     ripple: {
       type: [Boolean, Object],
-      default: true,
+      default: true
     },
-    subGroup: Boolean,
+    subGroup: Boolean
   },
 
   computed: {
@@ -81,16 +82,16 @@ 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,
+        'v-list-group--sub-group': this.subGroup
       }
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
       ['inputValue', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -115,7 +116,7 @@ export default baseMixins.extend({
         this.list && this.list.listClick(this.$.uid)
       }
     },
-    $route: 'onRouteChange',
+    $route: 'onRouteChange'
   },
 
   beforeUnmount () {
@@ -141,9 +142,9 @@ export default baseMixins.extend({
       if (!icon && !slot) return null
 
       return h(VListItemIcon, {
-        class: 'v-list-group__header__append-icon',
+        class: 'v-list-group__header__append-icon'
       }, () => [
-        slot || this.genIcon(icon),
+        slot || this.genIcon(icon)
       ])
     },
     genHeader (): VNode {
@@ -152,7 +153,7 @@ export default baseMixins.extend({
         role: 'button',
         class: {
           'v-list-group__header': true,
-          [this.activeClass]: this.isActive,
+          [this.activeClass]: this.isActive
         },
         link: true,
         modelValue: this.isActive,
@@ -161,22 +162,22 @@ export default baseMixins.extend({
       }, () => [
         this.genPrependIcon(),
         getSlot(this, 'activator'),
-        this.genAppendIcon(),
+        this.genAppendIcon()
       ]),
       [
-        [Ripple, this.ripple],
+        [Ripple, this.ripple]
       ])
     },
     genItems (): VNode[] {
       const directives = [[
         vShow,
-        this.isActive,
+        this.isActive
       ]]
 
       return this.showLazyContent(() => [
         withDirectives(h('div', {
-          class: 'v-list-group__items',
-        }, getSlot(this)), directives),
+          class: 'v-list-group__items'
+        }, getSlot(this)), directives as any)
       ])
     },
     genPrependIcon (): VNode | null {
@@ -188,9 +189,9 @@ export default baseMixins.extend({
       if (!icon && !slot) return null
 
       return h(VListItemIcon, {
-        class: 'v-list-group__header__prepend-icon',
+        class: 'v-list-group__header__prepend-icon'
       }, () => [
-        slot || this.genIcon(icon),
+        slot || this.genIcon(icon)
       ])
     },
     onRouteChange (to: Route) {
@@ -214,15 +215,15 @@ export default baseMixins.extend({
     },
     matchRoute (to: string) {
       return to.match(this.group) !== null
-    },
+    }
   },
 
   render (): VNode {
     return h('div', this.setTextColor(this.isActive && this.color, {
-      class: ['v-list-group', 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, VNode, PropType, PropValidator } from 'vue'
+import type { VNode } from '../../types/vue-internal'
+import { h, withDirectives, PropType } from 'vue'
 // Styles
 import './VListItem.sass'
 
@@ -29,7 +30,7 @@ const baseMixins = mixins(
   ToggleableFactory('modelValue')
 )
 
-interface options extends ExtractVue<typeof baseMixins> {
+type options = ExtractVue<typeof baseMixins> & {
   $el: HTMLElement
   isInGroup: boolean
   isInList: boolean
@@ -43,50 +44,50 @@ export default baseMixins.extend({
 
   inject: {
     isInGroup: {
-      default: false,
+      default: false
     },
     isInList: {
-      default: false,
+      default: false
     },
     isInMenu: {
-      default: false,
+      default: false
     },
     isInNav: {
-      default: false,
-    },
+      default: false
+    }
   },
 
   inheritAttrs: false,
 
   props: {
     activeClass: {
-      type: String,
-    } as any as PropValidator<string>,
+      type: 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,
-    modelValue: null as any as PropType<any>,
+    modelValue: null as any as PropType<any>
   },
 
   emits: [
     'click',
     'keydown',
     'change',
-    'update:modelValue',
+    'update:modelValue'
   ],
 
   data: () => ({
-    proxyClass: 'v-list-item--active',
+    proxyClass: 'v-list-item--active'
   }),
 
   computed: {
@@ -106,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 {
@@ -114,12 +115,12 @@ export default baseMixins.extend({
         Routable.computed.isClickable.call(this) ||
         this.listItemGroup
       )
-    },
+    }
   },
 
   created () {
     const breakingProps = [
-      ['value', 'modelValue'],
+      ['value', 'modelValue']
     ]
 
     /* istanbul ignore next */
@@ -146,7 +147,7 @@ export default baseMixins.extend({
       const attrs: Record<string, any> = {
         ...otherAttrs,
         'aria-disabled': this.disabled ? true : undefined,
-        tabindex: this.isClickable && !this.disabled ? 0 : -1,
+        tabindex: this.isClickable && !this.disabled ? 0 : -1
       }
 
       if (this.$attrs.hasOwnProperty('role')) {
@@ -171,7 +172,7 @@ export default baseMixins.extend({
       }
       this.$emit('change')
       this.$emitLegacy('change')
-    },
+    }
   },
 
   render (): VNode {
@@ -194,7 +195,7 @@ export default baseMixins.extend({
         }
       },
       // Ensure our attrs take precedence over routable
-      ...attrs,
+      ...attrs
     }
 
     if (this.inactive) tag = 'div'
@@ -205,13 +206,13 @@ export default baseMixins.extend({
 
     const slotProps = {
       active: this.isActive,
-      toggle: this.toggle,
+      toggle: this.toggle
     }
 
     const children = [
       getSlot(this, 'prepend', slotProps),
       getSlot(this, 'default', slotProps),
-      getSlot(this, 'append', slotProps),
+      getSlot(this, 'append', slotProps)
     ].filter(Boolean)
 
     const nodeData = this.isActive ? this.setTextColor(this.color, data) : data
@@ -224,9 +225,9 @@ export default baseMixins.extend({
     }
 
     const node = typeof tag === 'string'
-      ? h(getTagValue(tag), nodeData, children)
-      : h(tag, nodeData, () => children)
+      ? h(getTagValue(tag), nodeData, children as any)
+      : h(tag, nodeData, { default: () => children })
 
     return withDirectives(node, directives)
-  },
+  }
 })

package/src/components/VList/VListItemAction.ts

@@ -19,5 +19,5 @@ export default defineComponent({
       ...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

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

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

@@ -11,7 +11,7 @@ describe('VList.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VList, {
-        ...options,
+        ...options
       })
     }
   })
@@ -25,8 +25,8 @@ describe('VList.ts', () => {
   it('should render a dense component and match snapshot', () => {
     const wrapper = mountFunction({
       props: {
-        dense: true,
-      },
+        dense: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -35,8 +35,8 @@ describe('VList.ts', () => {
   it('should render a subheader component and match snapshot', () => {
     const wrapper = mountFunction({
       props: {
-        subheader: true,
-      },
+        subheader: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -45,8 +45,8 @@ describe('VList.ts', () => {
   it('should render a threeLine component and match snapshot', () => {
     const wrapper = mountFunction({
       props: {
-        threeLine: true,
-      },
+        threeLine: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -55,8 +55,8 @@ describe('VList.ts', () => {
   it('should render a twoLine component and match snapshot', () => {
     const wrapper = mountFunction({
       props: {
-        twoLine: true,
-      },
+        twoLine: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -65,16 +65,16 @@ describe('VList.ts', () => {
   it('should have an inferred role from injections', () => {
     const wrapper = mountFunction({
       global: {
-        provide: { isInMenu: true },
-      },
+        provide: { isInMenu: true }
+      }
     })
 
     expect(wrapper.element.getAttribute('role')).toBeNull()
 
     const wrapper2 = mountFunction({
       global: {
-        provide: { isInNav: true },
-      },
+        provide: { isInNav: true }
+      }
     })
 
     expect(wrapper2.element.getAttribute('role')).toBeNull()