@dimailn/vuetify 2.7.2-alpha25 → 2.7.2-alpha27

package/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerTitle.spec.ts.snap

@@ -55,10 +55,9 @@ exports[`VDatePickerTitle.ts should render readonly component and match snapshot
 exports[`VDatePickerTitle.ts should render year icon 1`] = `
 <div class="v-picker__title__btn v-date-picker-title__year">
   1234
-  <i aria-hidden="true"
-     class="v-icon notranslate material-icons theme--dark"
+  <span class="v-icon notranslate theme--dark"
+        aria-hidden="true"
   >
-    year
-  </i>
+  </span>
 </div>
 `;

package/src/components/VDatePicker/mixins/date-picker-table.ts

@@ -21,7 +21,7 @@ import {
   VNodeChildren,
   Transition,
   withDirectives,
-  h
+  h,
 } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import {
@@ -41,7 +41,6 @@ export default mixins(
   Themeable
 /* @vue/component */
 ).extend({
-  directives: { Touch },
 
   props: {
     allowedDates: Function as PropType<DatePickerAllowedDatesFunction | undefined>,
@@ -65,7 +64,7 @@ export default mixins(
       type: String,
       required: true,
     },
-    value: [String, Array] as PropType<string | string[]>,
+    modelValue: [String, Array] as PropType<string | string[]>,
   },
 
   data: () => ({
@@ -83,6 +82,10 @@ export default mixins(
     displayedYear (): number {
       return Number(this.tableDate.split('-')[0])
     },
+    // Vue 3 compatibility: use modelValue
+    currentValue (): string | string[] | undefined {
+      return this.modelValue
+    },
   },
 
   watch: {
@@ -123,7 +126,9 @@ export default mixins(
 
       return mergeListeners({
         onClick: () => {
-          if (isAllowed && !this.readonly) this.$emit('input', value)
+          if (isAllowed && !this.readonly) {
+            this.$emit('update:modelValue', value)
+          }
         },
       }, createItemTypeNativeListeners(this, `:${mouseEventType}`, value))
     },
@@ -135,9 +140,9 @@ export default mixins(
       const color = (isSelected || isCurrent) && (this.color || 'accent')
       let isFirst = false
       let isLast = false
-      if (this.range && !!this.value && Array.isArray(this.value)) {
-        isFirst = value === this.value[0]
-        isLast = value === this.value[this.value.length - 1]
+      if (this.range && !!this.currentValue && Array.isArray(this.currentValue)) {
+        isFirst = value === this.currentValue[0]
+        isLast = value === this.currentValue[this.currentValue.length - 1]
       }
 
       return h('button', setColor(color, {
@@ -213,7 +218,7 @@ export default mixins(
     genTable (staticClass: string, children: VNodeChildren, calculateTableDate: CalculateTableDateFunction) {
       const transition = h(Transition, {
         name: this.computedTransition,
-      }, [h('table', { key: this.tableDate }, children)])
+      }, () => [h('table', { key: this.tableDate }, children)])
 
       const touchDirective = [
         Touch,
@@ -222,7 +227,7 @@ export default mixins(
             (this.isValidScroll(1, calculateTableDate) && this.touch(1, calculateTableDate)),
           right: (e: TouchWrapper) => (e.offsetX > 15) &&
             (this.isValidScroll(-1, calculateTableDate) && this.touch(-1, calculateTableDate)),
-        }
+        },
       ]
 
       return withDirectives(h('div', {
@@ -240,16 +245,16 @@ export default mixins(
       }, [transition]), [touchDirective])
     },
     isSelected (value: string): boolean {
-      if (Array.isArray(this.value)) {
-        if (this.range && this.value.length === 2) {
-          const [from, to] = [...this.value].sort()
+      if (Array.isArray(this.currentValue)) {
+        if (this.range && this.currentValue.length === 2) {
+          const [from, to] = [...this.currentValue].sort()
           return from <= value && value <= to
         } else {
-          return this.value.indexOf(value) !== -1
+          return this.currentValue.indexOf(value) !== -1
         }
       }
 
-      return value === this.value
+      return value === this.currentValue
     },
   },
 })

package/src/components/VDatePicker/util/__tests__/createNativeLocaleFormatter.spec.ts

@@ -24,4 +24,11 @@ describe('VDatePicker/util/createNativeLocaleFormatter.ts', () => {
     expect(nullFormatter).toBeUndefined()
     global.Intl = oldIntl
   })
+
+  it('should handle invalid date strings', () => {
+    const formatter = createNativeLocaleFormatter(undefined, { year: 'numeric', timeZone: 'UTC' })
+    expect(formatter('undefined')).toBe('1970')
+    expect(formatter('null')).toBe('1970')
+    expect(formatter('')).toBe('1970')
+  })
 })

package/src/components/VDatePicker/util/createNativeLocaleFormatter.ts

@@ -23,6 +23,9 @@ function createNativeLocaleFormatter (
   substrOptions: SubstrOptions = { start: 0, length: 0 }
 ): DatePickerFormatter | undefined {
   const makeIsoString = (dateString: string) => {
+    if (!dateString || dateString === 'undefined' || dateString === 'null') {
+      return '1970-01-01' // fallback date
+    }
     const [year, month, date] = dateString.trim().split(' ')[0].split('-')
     return [pad(year, 4), pad(month || 1), pad(date || 1)].join('-')
   }

package/src/components/VDialog/VDialog.ts

@@ -1,4 +1,4 @@
-import {Transition, h, vShow, withDirectives} from 'vue'
+import { Transition, h, vShow, withDirectives } from 'vue'
 // Styles
 import './VDialog.sass'
 
@@ -64,6 +64,8 @@ export default baseMixins.extend({
     width: [String, Number],
   },
 
+  emits: ['click:outside', 'keydown'],
+
   data () {
     return {
       activatedBy: null as EventTarget | null,
@@ -244,7 +246,7 @@ export default baseMixins.extend({
           root: true,
           light: this.light,
           dark: this.dark
-        }, [
+        }, () => [
           h('div', {
             class: this.contentClasses,
             role: 'dialog',
@@ -266,7 +268,7 @@ export default baseMixins.extend({
         name: this.transition,
         origin: this.origin,
         appear: true
-      }, [content])
+      }, () => [content])
     },
     genInnerContent () {
       const directives = [
@@ -276,12 +278,12 @@ export default baseMixins.extend({
             handler: this.onClickOutside,
             closeConditional: this.closeConditional,
             include: this.getOpenDependentElements,
-          }
+          },
         ],
         [
           vShow,
-          this.isActive
-        ]
+          this.isActive,
+        ],
       ]
       const data: VNodeData = {
         class: this.classes,
@@ -314,7 +316,7 @@ export default baseMixins.extend({
           this.attach === '' ||
           this.attach === true ||
           this.attach === 'attach',
-      }]
+      }],
     }, [
       this.genActivator(),
       this.genContent(),

package/src/components/VExpansionPanel/VExpansionPanel.ts

@@ -25,6 +25,11 @@ export default mixins(
 ).extend({
   name: 'v-expansion-panel',
 
+  emits: [
+    'click',
+    'change',
+  ],
+
   props: {
     disabled: Boolean,
     readonly: Boolean,

package/src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -60,7 +60,7 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
-    return h(VExpandTransition, this.showLazyContent(() => [
+    return h(VExpandTransition, {}, () => this.showLazyContent(() => [
       withDirectives(h('div', this.setBackgroundColor(this.color, {
         class: 'v-expansion-panel-content'
       }), [

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -31,7 +31,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-expansion-panel-header',
 
-  directives: { ripple },
 
   props: {
     disableIconRotate: Boolean,
@@ -83,9 +82,9 @@ export default baseMixins.extend({
     },
     genIcon () {
       const icon = getSlot(this, 'actions', { open: this.isActive }) ||
-        [h(VIcon, this.expandIcon)]
+        [h(VIcon, {}, () => this.expandIcon)]
 
-      return h(VFadeTransition, [
+      return h(VFadeTransition, {}, () => [
         withDirectives(h('div', {
           class: ['v-expansion-panel-header__icon', {
             'v-expansion-panel-header__icon--disable-rotate': this.disableIconRotate,

package/src/components/VFileInput/VFileInput.ts

@@ -77,6 +77,8 @@ export default defineComponent({
     } as PropValidator<File | File[]>,
   },
 
+  emits: ['change', 'keydown'],
+
   computed: {
     classes (): object {
       return {

package/src/components/VForm/VForm.ts

@@ -50,6 +50,8 @@ export default mixins(
     value: Boolean,
   },
 
+  emits: ['input', 'update:modelValue', 'submit'],
+
   data: () => ({
     inputs: [] as VInputInstance[],
     watchers: [] as Watchers[],

package/src/components/VHover/VHover.ts

@@ -27,6 +27,8 @@ export default mixins(
     },
   },
 
+  emits: ['update:modelValue'],
+
   methods: {
     onMouseEnter () {
       this.runDelay('open')

package/src/components/VImg/VImg.ts

@@ -39,7 +39,6 @@ export default mixins(
 ).extend({
   name: 'v-img',
 
-  directives: { intersect },
 
   props: {
     alt: String,
@@ -73,6 +72,8 @@ export default mixins(
     },
   },
 
+  emits: ['load', 'error', 'loadstart'],
+
   data () {
     return {
       currentSrc: '', // Set from srcset
@@ -131,7 +132,7 @@ export default mixins(
       return h(Transition, {
         name: this.transition,
         mode: 'in-out',
-      }, [image])
+      }, () => [image])
     },
   },
 
@@ -265,7 +266,7 @@ export default mixins(
         return h(Transition, {
           appear: true,
           name: this.transition,
-        }, placeholder)
+        }, () => placeholder)
       }
     },
   },

package/src/components/VInput/VInput.ts

@@ -59,6 +59,8 @@ export default baseMixins.extend({
     modelValue: null as any as PropType<any>,
   },
 
+  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend'],
+
   data () {
     return {
       lazyValue: this.modelValue,
@@ -228,7 +230,7 @@ export default baseMixins.extend({
         h(
           VIcon,
           data,
-          icon
+          () => icon
         ),
       ])
     },
@@ -252,7 +254,7 @@ export default baseMixins.extend({
         focused: this.hasState,
         for: this.computedId,
         light: this.light,
-      }, getSlot(this, 'label') || this.label)
+      }, () => getSlot(this, 'label') || this.label)
     },
     genMessages () {
       if (!this.showDetails) return null

package/src/components/VItemGroup/VItem.ts

@@ -81,4 +81,8 @@ export default mixins(
   GroupableFactory('itemGroup', 'v-item', 'v-item-group')
 ).extend({
   name: 'v-item',
+
+  emits: [
+    'change',
+  ],
 })

package/src/components/VItemGroup/VItemGroup.ts

@@ -30,6 +30,8 @@ export const BaseItemGroup = mixins(
 ).extend({
   name: 'base-item-group',
 
+  emits: ['update:modelValue'],
+
   props: {
     activeClass: {
       type: String,
@@ -258,7 +260,11 @@ export const BaseItemGroup = mixins(
   },
 
   render (): VNode {
-    return h(this.tag, this.genData(), getSlot(this))
+    const data = this.genData()
+    return h(this.tag, {
+      class: data.class,
+      ...data.attrs,
+    }, getSlot(this))
   },
 })
 

package/src/components/VLazy/VLazy.ts

@@ -1,4 +1,4 @@
-import {Transition, h} from 'vue'
+import { Transition, h, withDirectives, defineComponent } from 'vue'
 // Mixins
 import Measurable from '../../mixins/measurable'
 import Toggleable from '../../mixins/toggleable'
@@ -20,7 +20,8 @@ export default mixins(
 ).extend({
   name: 'VLazy',
 
-  directives: { intersect },
+  emits: ['update:modelValue'],
+
 
   props: {
     options: {
@@ -73,18 +74,15 @@ export default mixins(
   },
 
   render (): VNode {
-    return h(this.tag, {
+    return withDirectives(h(this.tag, {
       class: 'v-lazy',
-      attrs: this.$attrs,
-      directives: [{
-        name: 'intersect',
-        value: {
-          handler: this.onObserve,
-          options: this.options,
-        },
-      }],
-      on: this.$listeners,
+      ...this.$attrs,
       style: this.styles,
-    }, [this.genContent()])
+    }, [this.genContent()]), [
+      [intersect, {
+        handler: this.onObserve,
+        options: this.options,
+      }]
+    ])
   },
 })

package/src/components/VList/VListGroup.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives, vShow} from 'vue'
+import { h, withDirectives, vShow, VNode } from 'vue'
 // Styles
 import './VListGroup.sass'
 
@@ -26,7 +26,6 @@ import mixins, { ExtractVue } from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode } from 'vue'
 import { Route } from 'vue-router'
 
 const baseMixins = mixins(
@@ -50,7 +49,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-group',
 
-  directives: { ripple },
 
   props: {
     activeClass: {
@@ -122,7 +120,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
@@ -132,7 +130,7 @@ export default baseMixins.extend({
 
       return h(VListItemIcon, {
         class: 'v-list-group__header__append-icon',
-      }, [
+      }, () => [
         slot || this.genIcon(icon),
       ])
     },
@@ -144,28 +142,29 @@ export default baseMixins.extend({
           'v-list-group__header': true,
           [this.activeClass]: this.isActive,
         },
-        inputValue: this.isActive,
+        link: true,
+        modelValue: this.isActive,
         ...this.listeners$,
         onClick: this.click
-      }, [
+      }, () => [
         this.genPrependIcon(),
         getSlot(this, 'activator'),
         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)
+        }, getSlot(this)), directives),
       ])
     },
     genPrependIcon (): VNode | null {
@@ -178,7 +177,7 @@ export default baseMixins.extend({
 
       return h(VListItemIcon, {
         class: 'v-list-group__header__prepend-icon',
-      }, [
+      }, () => [
         slot || this.genIcon(icon),
       ])
     },
@@ -208,10 +207,10 @@ export default baseMixins.extend({
 
   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,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'
 
 // 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,9 +41,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-item',
 
-  directives: {
-    Ripple,
-  },
 
   inject: {
     isInGroup: {
@@ -66,7 +61,7 @@ export default baseMixins.extend({
 
   props: {
     activeClass: {
-      type: String
+      type: String,
     } as any as PropValidator<string>,
     dense: Boolean,
     inactive: 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
@@ -131,10 +133,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 +157,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 +184,8 @@ export default baseMixins.extend({
           this.$emit('keydown', e)
         }
       },
+      // Ensure our attrs take precedence over routable
+      ...attrs,
     }
 
     if (this.inactive) tag = 'div'
@@ -192,9 +199,19 @@ export default baseMixins.extend({
       toggle: this.toggle,
     })
 
-    return withDirectives(
-      h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children),
-      directives
-    )
+    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)
   },
 })