@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VResponsive/VResponsive.ts

@@ -1,4 +1,4 @@
-import {h, mergeProps} from 'vue'
+import { h, mergeProps } from 'vue'
 import './VResponsive.sass'
 
 // Mixins
@@ -17,7 +17,7 @@ export default mixins(Measurable).extend({
 
   props: {
     aspectRatio: [String, Number] as NumberOrNumberString,
-    contentClass: String,
+    contentClass: String
   },
 
   computed: {
@@ -34,27 +34,27 @@ export default mixins(Measurable).extend({
 
       return h('div', {
         style: this.aspectStyle,
-        class: 'v-responsive__sizer',
+        class: 'v-responsive__sizer'
       })
-    },
+    }
   },
 
   methods: {
     genContent (): VNode {
       return h('div', {
-        class: ['v-responsive__content', this.contentClass],
+        class: ['v-responsive__content', this.contentClass]
       }, getSlot(this))
-    },
+    }
   },
 
   render (): VNode {
     return h('div', mergeProps({
       class: 'v-responsive',
-      style: this.measurableStyles,
+      style: this.measurableStyles
     }, this.$attrs)
     , [
       this.__cachedSizer,
-      this.genContent(),
+      this.genContent()
     ])
-  },
+  }
 })

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

@@ -6,7 +6,7 @@ import {
   mount,
   VueWrapper,
   MountingOptions,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { h } from 'vue'
 
@@ -19,14 +19,14 @@ describe('VResponsive.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VResponsive, {
-        ...options,
+        ...options
       })
     }
   })
 
   it('should force aspect ratio', () => {
     const wrapper = mountFunction({
-      props: { aspectRatio: 16 / 9 },
+      props: { aspectRatio: 16 / 9 }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -35,8 +35,8 @@ describe('VResponsive.ts', () => {
   it('should render content', () => {
     const wrapper = mountFunction({
       slots: {
-        default: () => h('div', ['content']),
-      },
+        default: () => h('div', ['content'])
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -44,7 +44,7 @@ describe('VResponsive.ts', () => {
 
   it('should set height', () => {
     const wrapper = mountFunction({
-      props: { height: 100, maxHeight: 200 },
+      props: { height: 100, maxHeight: 200 }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VSelect/VSelect.ts

@@ -26,8 +26,9 @@ import { consoleError, breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode, VNodeDirective, PropType, VNodeData, withDirectives, h } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import type { PropType, VNode } from 'vue'
+import { withDirectives, h } from 'vue'
+import type { VNodeData } from '../../types/vue-internal'
 import { SelectItemKey } from 'vuetify/types'
 
 export const defaultMenuProps = {
@@ -35,7 +36,7 @@ export const defaultMenuProps = {
   closeOnContentClick: false,
   disableKeys: true,
   openOnClick: false,
-  maxHeight: 304,
+  maxHeight: 304
 }
 
 // Types
@@ -46,7 +47,7 @@ const baseMixins = mixins(
   Filterable
 )
 
-interface options extends InstanceType<typeof baseMixins> {
+type options = {
   $refs: {
     menu: InstanceType<typeof VMenu>
     content: HTMLElement
@@ -69,11 +70,11 @@ export default baseMixins.extend({
   props: {
     appendIcon: {
       type: String,
-      default: '$dropdown',
+      default: '$dropdown'
     },
     attach: {
       type: null as unknown as PropType<string | boolean | Element | VNode>,
-      default: false,
+      default: false
     },
     auto: Boolean,
     cacheItems: Boolean,
@@ -85,33 +86,33 @@ export default baseMixins.extend({
     hideSelected: Boolean,
     items: {
       type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
+      default: () => []
+    } as unknown as PropType<any[]>,
     itemColor: {
       type: String,
-      default: 'primary',
+      default: 'primary'
     },
     itemDisabled: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'disabled',
+      default: 'disabled'
     },
     itemText: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'text',
+      default: 'text'
     },
     itemValue: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'value',
+      default: 'value'
     },
     menuProps: {
       type: [String, Array, Object],
-      default: () => defaultMenuProps,
+      default: () => defaultMenuProps
     },
     minWidth: [String, Number],
     multiple: Boolean,
     openOnClear: Boolean,
     returnObject: Boolean,
-    smallChips: Boolean,
+    smallChips: Boolean
   },
 
   emits: ['update:modelValue', 'change', 'focus', 'blur', 'keydown', 'click', 'update:list-index', 'click:clear'],
@@ -132,7 +133,7 @@ export default baseMixins.extend({
       selectedItems: [] as any[],
       keyboardLookupPrefix: '',
       keyboardLookupLastTime: 0,
-      detectedScopeId: null as string | null,
+      detectedScopeId: null as string | null
     }
   },
 
@@ -148,7 +149,7 @@ export default baseMixins.extend({
         'v-select--chips': this.hasChips,
         'v-select--chips--small': this.smallChips,
         'v-select--is-menu-active': this.isMenuActive,
-        'v-select--is-multi': this.multiple,
+        'v-select--is-multi': this.multiple
       }
     },
     /* Used by other components to overwrite */
@@ -169,16 +170,16 @@ export default baseMixins.extend({
 
       return value.length
     },
-    directives (): VNodeDirective[] | undefined {
+    directives (): any[] | undefined {
       return [
         [
           ClickOutside,
           {
             handler: () => this.isFocused && this.blur(),
             closeConditional: this.closeConditional,
-            include: () => this.getOpenDependentElements(),
-          },
-        ],
+            include: () => this.getOpenDependentElements()
+          }
+        ]
       ]
     },
     dynamicHeight () {
@@ -206,7 +207,7 @@ export default baseMixins.extend({
         itemValue: this.itemValue,
         noDataText: this.$vuetify.lang.t(this.noDataText),
         selectedItems: this.selectedItems,
-        onSelect: this.selectItem,
+        onSelect: this.selectItem
       }
     },
     listAttrs (): object {
@@ -228,9 +229,9 @@ export default baseMixins.extend({
 
       return h(VSelectList, {
         ...this.listData,
-        ...this.listAttrs,
+        ...this.listAttrs
       }, {
-        item: this.$slots.item,
+        item: this.$slots.item
       })
     },
     virtualizedItems (): object[] {
@@ -258,9 +259,9 @@ export default baseMixins.extend({
         nudgeBottom: normalisedProps.offsetY ? 1 : 0, // convert to int
         auto: this.auto,
         minWidth: this.minWidth,
-        ...normalisedProps,
+        ...normalisedProps
       }
-    },
+    }
   },
 
   watch: {
@@ -280,7 +281,7 @@ export default baseMixins.extend({
           })
         }
       },
-      deep: true,
+      deep: true
     },
     isMenuActive (val) {
       window.setTimeout(() => this.onMenuActiveChange(val))
@@ -298,14 +299,14 @@ export default baseMixins.extend({
         }
 
         this.setSelectedItems()
-      },
-    },
+      }
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -425,7 +426,7 @@ export default baseMixins.extend({
           this.selectedIndex = index
         },
         'onClick:close': () => this.onChipInput(item),
-        key: JSON.stringify(this.getValue(item)),
+        key: JSON.stringify(this.getValue(item))
       }, () => this.getText(item))
     },
     genCommaSelection (item: object, index: number, last: boolean) {
@@ -437,9 +438,9 @@ export default baseMixins.extend({
 
       return h('div', this.setTextColor(color, {
         class: ['v-select__selection v-select__selection--comma', {
-          'v-select__selection--disabled': isDisabled,
+          'v-select__selection--disabled': isDisabled
         }],
-        key: JSON.stringify(this.getValue(item)),
+        key: JSON.stringify(this.getValue(item))
       }), `${this.getText(item)}${last ? '' : ', '}`)
     },
     genDefaultSlot (): (VNode | VNode[] | null)[] {
@@ -459,7 +460,7 @@ export default baseMixins.extend({
       return [
         this.genFieldset(),
         withDirectives(h('div', {
-          class: 'v-select__slot',
+          class: 'v-select__slot'
         }, [
           this.genLabel(),
           this.prefix ? this.genAffix('prefix') : null,
@@ -467,10 +468,10 @@ export default baseMixins.extend({
           this.suffix ? this.genAffix('suffix') : null,
           this.genClearIcon(),
           this.genIconSlot(),
-          this.genHiddenInput(),
+          this.genHiddenInput()
         ]), this.directives),
         this.genMenu(),
-        this.genProgress(),
+        this.genProgress()
       ]
     },
     genIcon (
@@ -487,7 +488,7 @@ export default baseMixins.extend({
         iconChild.props = mergeData(iconChild.props || {}, {
           tabindex: hasListeners ? '-1' : undefined,
           'aria-hidden': 'true',
-          'aria-label': undefined,
+          'aria-label': undefined
         })
       }
 
@@ -505,7 +506,7 @@ export default baseMixins.extend({
         'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
         autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
         placeholder: (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
-        onKeypress: this.onKeyPress,
+        onKeypress: this.onKeyPress
       })
 
       input.props = { ...input.props, value: null }
@@ -530,7 +531,7 @@ export default baseMixins.extend({
       return h('input', {
         value,
         type: 'hidden',
-        name: this.$attrs.name,
+        name: this.$attrs.name
       })
     },
     genInputSlot (): VNode {
@@ -541,7 +542,7 @@ export default baseMixins.extend({
         'aria-haspopup': 'listbox',
         'aria-expanded': String(this.isMenuActive),
         'aria-owns': this.computedOwns,
-        ...render.props,
+        ...render.props
       }
 
       return render
@@ -559,7 +560,7 @@ export default baseMixins.extend({
         .filter(slotName => this.$slots[slotName])
         .map(slotName => [
           slotName,
-          this.$slots[slotName],
+          this.$slots[slotName]
         ]
         ))
       // Requires destructuring due to Vue
@@ -567,7 +568,7 @@ export default baseMixins.extend({
       // as a referenced object
       return h(VSelectList, {
         ...this.listData,
-        ...this.listAttrs,
+        ...this.listAttrs
       }, { ...slots, item: this.$slots.item })
     },
     genMenu (): VNode {
@@ -596,7 +597,7 @@ export default baseMixins.extend({
           this.isFocused = val
         },
         onScroll: this.onScroll,
-        ref: 'menu',
+        ref: 'menu'
       }, () => [this.genList()])
     },
     genSelections (): VNode {
@@ -622,7 +623,7 @@ export default baseMixins.extend({
       }
 
       return h('div', {
-        class: 'v-select__selections',
+        class: 'v-select__selections'
       }, children)
     },
     genSlotSelection (item: object, index: number): VNode[] | undefined {
@@ -636,7 +637,7 @@ export default baseMixins.extend({
           this.selectedIndex = index
         },
         selected: index === this.selectedIndex,
-        disabled: !this.isInteractive,
+        disabled: !this.isInteractive
       })
     },
     getMenuIndex () {
@@ -729,7 +730,9 @@ export default baseMixins.extend({
 
       // If menu is active, allow default
       // listIndex change from menu
-      if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(keyCode)) {
+      if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(
+        keyCode as typeof keyCodes.up | typeof keyCodes.down | typeof keyCodes.home | typeof keyCodes.end | typeof keyCodes.enter
+      )) {
         this.$nextTick(() => {
           menu.changeListIndex(e)
           this.$emit('update:list-index', menu.listIndex)
@@ -739,8 +742,8 @@ export default baseMixins.extend({
       // If enter, space, open menu
       if ([
         keyCodes.enter,
-        keyCodes.space,
-      ].includes(keyCode)) this.activateMenu()
+        keyCodes.space
+      ].includes(keyCode as typeof keyCodes.enter | typeof keyCodes.space)) this.activateMenu()
 
       // If menu is not active, up/down/home/end can do
       // one of 2 things. If multiple, opens the
@@ -748,7 +751,9 @@ export default baseMixins.extend({
       // available options
       if (
         !this.isMenuActive &&
-        [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(keyCode)
+        [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(
+          keyCode as typeof keyCodes.up | typeof keyCodes.down | typeof keyCodes.home | typeof keyCodes.end
+        )
       ) return this.onUpDown(e)
 
       // If escape deactivate the menu
@@ -946,6 +951,6 @@ export default baseMixins.extend({
       const appendInner = this.$refs['append-inner']
 
       return appendInner && (appendInner === target || appendInner.contains(target))
-    },
-  },
+    }
+  }
 })

package/src/components/VSelect/VSelectList.ts

@@ -7,7 +7,7 @@ import {
   VListItem,
   VListItemAction,
   VListItemContent,
-  VListItemTitle,
+  VListItemTitle
 } from '../VList'
 
 // Directives
@@ -23,8 +23,9 @@ import { breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode, PropType, VNodeChildren, h } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import type { PropType, VNode } from 'vue'
+import { h } from 'vue'
+import type { VNodeChildren } from '../../types/vue-internal'
 import { SelectItemKey } from 'vuetify/types'
 
 type ListTile = { item: any, disabled?: null | boolean, value?: boolean, index: number };
@@ -39,27 +40,27 @@ export default mixins(Colorable, Themeable).extend({
     hideSelected: Boolean,
     items: {
       type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
+      default: () => []
+    } as unknown as PropType<any[]>,
     itemDisabled: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'disabled',
+      default: 'disabled'
     },
     itemText: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'text',
+      default: 'text'
     },
     itemValue: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'value',
+      default: 'value'
     },
     noDataText: String,
     noFilter: Boolean,
     searchInput: null as unknown as PropType<any>,
     selectedItems: {
       type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
+      default: () => []
+    } as unknown as PropType<any[]>
   },
 
   computed: {
@@ -72,19 +73,19 @@ export default mixins(Colorable, Themeable).extend({
     staticNoDataTile (): VNode {
       const tile = {
         role: undefined,
-        onMousedown: (e: Event) => e.preventDefault(), // Prevent onBlur from being called
+        onMousedown: (e: Event) => e.preventDefault() // Prevent onBlur from being called
       }
 
-      return h(VListItem, tile, [
-        this.genTileContent(this.noDataText),
+      return h(VListItem, tile, () => [
+        this.genTileContent(this.noDataText)
       ])
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -100,8 +101,8 @@ export default mixins(Colorable, Themeable).extend({
           color: this.color,
           modelValue: inputValue,
           ripple: false,
-          'onUpdate:modelValue': () => this.$emit('select', item),
-        }),
+          'onUpdate:modelValue': () => this.$emit('select', item)
+        })
       ])
     },
     genDivider (props: { [key: string]: any }) {
@@ -117,7 +118,12 @@ export default mixins(Colorable, Themeable).extend({
       return [start, this.genHighlight(middle), end]
     },
     genHeader (props: { [key: string]: any }): VNode {
-      return h(VSubheader, props, props.header)
+      const c = props.header
+      return h(VSubheader, props, () => {
+        if (c == null) return []
+        if (typeof c === 'object') return c as VNode | VNode[]
+        return String(c)
+      })
     },
     genHighlight (text: string) {
       return h('span', { class: 'v-list-item__mask' }, text)
@@ -141,7 +147,7 @@ export default mixins(Colorable, Themeable).extend({
       item,
       index,
       disabled = null,
-      value = false,
+      value = false
     }: ListTile): VNode | VNode[] | undefined {
       if (!value) value = this.hasItem(item)
 
@@ -172,15 +178,15 @@ export default mixins(Colorable, Themeable).extend({
             acc[key] = this.$attrs[key]
           }
           return acc
-        }, {} as Record<string, any>),
+        }, {} as Record<string, any>)
       }
 
       if (!this.$slots.item) {
-        return h(VListItem, tile, [
+        return h(VListItem, tile, () => [
           this.action && !this.hideSelected && this.items.length > 0
             ? this.genAction(item, value)
             : null,
-          this.genTileContent(item, index),
+          this.genTileContent(item, index)
         ])
       }
 
@@ -193,19 +199,19 @@ export default mixins(Colorable, Themeable).extend({
         attrs: tile,
         on: {
           onMousedown,
-          onClick,
-        },
+          onClick
+        }
       })
 
       return this.needsTile(scopedSlot)
-        ? h(VListItem, tile, scopedSlot)
+        ? h(VListItem, tile, () => scopedSlot)
         : scopedSlot
     },
     genTileContent (item: any, index = 0): VNode {
       return h(VListItemContent, {}, () => [
         h(VListItemTitle, {}, () => [
-          this.genFilteredText(this.getText(item)),
-        ]),
+          this.genFilteredText(this.getText(item))
+        ])
       ])
     },
     hasItem (item: object) {
@@ -243,7 +249,7 @@ export default mixins(Colorable, Themeable).extend({
     },
     getValue (item: object) {
       return getPropertyFromItem(item, this.itemValue, this.getText(item))
-    },
+    }
   },
 
   render (): VNode {
@@ -276,7 +282,7 @@ export default mixins(Colorable, Themeable).extend({
       onMousedown: (e: Event) => {
         e.preventDefault()
       },
-      dense: this.dense,
-    }, children)
-  },
+      dense: this.dense
+    }, () => children)
+  }
 })