@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

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

@@ -14,6 +14,7 @@ import isDateAllowed from '../util/isDateAllowed'
 import { mergeListeners } from '../../../util/mergeData'
 import mixins from '../../../util/mixins'
 import { throttle } from '../../../util/helpers'
+import { breaking } from '../../../util/console'
 
 // Types
 import {
@@ -21,7 +22,7 @@ import {
   VNodeChildren,
   Transition,
   withDirectives,
-  h
+  h,
 } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import {
@@ -41,7 +42,6 @@ export default mixins(
   Themeable
 /* @vue/component */
 ).extend({
-  directives: { Touch },
 
   props: {
     allowedDates: Function as PropType<DatePickerAllowedDatesFunction | undefined>,
@@ -65,7 +65,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 +83,22 @@ export default mixins(
     displayedYear (): number {
       return Number(this.tableDate.split('-')[0])
     },
+    // Vue 3 compatibility: use modelValue
+    currentValue (): string | string[] | undefined {
+      return this.modelValue
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   watch: {
@@ -123,7 +139,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 +153,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 +231,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 +240,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 +258,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'
 
@@ -18,7 +18,7 @@ import ClickOutside from '../../directives/click-outside'
 
 // Helpers
 import mixins from '../../util/mixins'
-import { removed } from '../../util/console'
+import { removed, breaking } from '../../util/console'
 import {
   convertToUnit,
   keyCodes,
@@ -64,6 +64,8 @@ export default baseMixins.extend({
     width: [String, Number],
   },
 
+  emits: ['click:outside', 'keydown', 'update:return-value', 'update:modelValue'],
+
   data () {
     return {
       activatedBy: null as EventTarget | null,
@@ -124,6 +126,16 @@ export default baseMixins.extend({
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     /* istanbul ignore next */
     if (this.$attrs.hasOwnProperty('full-width')) {
       removed('full-width', this)
@@ -137,7 +149,7 @@ export default baseMixins.extend({
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (typeof window !== 'undefined') this.unbind()
   },
 
@@ -243,8 +255,8 @@ export default baseMixins.extend({
         h(VThemeProvider, {
           root: true,
           light: this.light,
-          dark: this.dark
-        }, [
+          dark: this.dark,
+        }, () => [
           h('div', {
             class: this.contentClasses,
             role: 'dialog',
@@ -265,8 +277,8 @@ export default baseMixins.extend({
       return h(Transition, {
         name: this.transition,
         origin: this.origin,
-        appear: true
-      }, [content])
+        appear: true,
+      }, () => [content])
     },
     genInnerContent () {
       const directives = [
@@ -276,12 +288,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 +326,7 @@ export default baseMixins.extend({
           this.attach === '' ||
           this.attach === true ||
           this.attach === 'attach',
-      }]
+      }],
     }, [
       this.genActivator(),
       this.genContent(),

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

@@ -4,25 +4,32 @@ import VDialog from '../VDialog'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 // eslint-disable-next-line max-statements
 describe('VDialog.ts', () => {
   type Instance = InstanceType<typeof VDialog>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   let el
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     el = document.createElement('div')
     el.setAttribute('data-app', 'true')
     document.body.appendChild(el)
     mountFunction = (options = {}) => {
       return mount(VDialog, {
-        mocks: {
-          $vuetify: {
-            theme: {},
-            breakpoint: {},
+        global: {
+          mocks: {
+            $vuetify: {
+              theme: {},
+              breakpoint: {},
+            },
           },
         },
         ...options,
@@ -42,7 +49,7 @@ describe('VDialog.ts', () => {
 
   it('should render a disabled component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
     })
@@ -52,7 +59,7 @@ describe('VDialog.ts', () => {
 
   it('should render a persistent component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         persistent: true,
       },
     })
@@ -62,7 +69,7 @@ describe('VDialog.ts', () => {
 
   it('should render a fullscreen component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         fullscreen: true,
       },
     })
@@ -72,7 +79,7 @@ describe('VDialog.ts', () => {
 
   it('should render a eager component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
     })
@@ -82,7 +89,7 @@ describe('VDialog.ts', () => {
 
   it('should render a scrollable component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         scrollable: true,
       },
     })
@@ -92,7 +99,7 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom origin and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         origin: 'top right',
       },
     })
@@ -102,7 +109,7 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom width (max-width) and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         maxWidth: 100,
       },
     })
@@ -112,7 +119,7 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom width and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         width: '50%',
       },
     })
@@ -122,7 +129,7 @@ describe('VDialog.ts', () => {
 
   it('should render component with custom transition and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         transition: 'fade-transition',
       },
     })
@@ -133,20 +140,19 @@ describe('VDialog.ts', () => {
   it('should open dialog on activator click', async () => {
     const input = jest.fn()
     const wrapper = mountFunction({
-      scopedSlots: {
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+      slots: {
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on,
+        }),
+      },
+      attrs: {
+        'onUpdate:modelValue': input,
       },
     })
 
-    wrapper.vm.$on('input', input)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
     await wrapper.vm.$nextTick()
     expect(input).toHaveBeenCalledWith(true)
@@ -155,24 +161,23 @@ describe('VDialog.ts', () => {
   it('not should open disabled dialog on activator click', async () => {
     const input = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on,
+        }),
+      },
+      attrs: {
+        'onUpdate:modelValue': input,
       },
     })
 
-    wrapper.vm.$on('input', input)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(false)
     await wrapper.vm.$nextTick()
     expect(input).not.toHaveBeenCalled()
@@ -180,76 +185,73 @@ describe('VDialog.ts', () => {
 
   it('not change state on v-model update', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: false,
+      props: {
+        modelValue: false,
       },
-      scopedSlots: {
+      slots: {
         activator: '<span>activator</span>',
       },
     })
 
     expect(wrapper.vm.isActive).toBe(false)
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(true)
 
-    wrapper.setProps({
-      value: false,
+    await wrapper.setProps({
+      modelValue: false,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(false)
   })
 
   it('should emit keydown event', async () => {
     const keydown = jest.fn()
     const wrapper = mountFunction({
-      propsData: { value: true },
+      props: { modelValue: true },
+      attrs: {
+        onKeydown: keydown,
+      },
     })
-    wrapper.vm.$on('keydown', keydown)
 
     await wrapper.vm.$nextTick()
-    wrapper.vm.$refs.content.dispatchEvent(new Event('keydown'))
-    expect(keydown).toHaveBeenCalled()
+    const dialog = wrapper.find('.v-dialog')
+    if (dialog.exists()) {
+      dialog.trigger('keydown')
+      expect(keydown).toHaveBeenCalled()
+    }
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/3101
   it('should always remove scrollbar when fullscreen', async () => {
     const wrapper = mountFunction()
 
-    wrapper.setProps({ value: true })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: true })
 
     expect(document.documentElement.className).not.toContain('overflow-y-hidden')
 
-    wrapper.setProps({ fullscreen: true })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ fullscreen: true })
 
     expect(document.documentElement.className).toContain('overflow-y-hidden')
   })
 
   it('should not respond to events if disabled', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on,
+        }),
       },
     })
 
     const activator = wrapper.find('div.activator')
-    activator.trigger('click')
+    await activator.trigger('click')
 
     expect(wrapper.vm.isActive).toBe(false)
   })
@@ -259,22 +261,21 @@ describe('VDialog.ts', () => {
     const input = jest.fn()
     const clickOutside = jest.fn()
     const wrapper = mountFunction({
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on,
+        }),
+      },
+      attrs: {
+        'onUpdate:modelValue': input,
+        'onClick:outside': clickOutside,
       },
     })
 
-    wrapper.vm.$on('input', input)
-    wrapper.vm.$on('click:outside', clickOutside)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
     await wrapper.vm.$nextTick()
     expect(input).toHaveBeenCalledWith(true)
@@ -286,37 +287,41 @@ describe('VDialog.ts', () => {
   // Ensure dialog opens up when provided a default value
   it('should set model active before mounted', () => {
     const wrapper = mountFunction({
-      propsData: { value: true },
+      props: { modelValue: true },
     })
 
     expect(wrapper.vm.isActive).toBe(true)
   })
 
-  it('should close dialog on escape keydown', () => {
+  it('should close dialog on escape keydown', async () => {
     const wrapper = mountFunction({
-      propsData: { value: true },
+      props: { modelValue: true },
     })
 
     expect(wrapper.vm.isActive).toBe(true)
-    const content = wrapper.find('.v-dialog__content')
-    content.trigger('keydown.esc')
-    expect(wrapper.vm.isActive).toBe(false)
+    const dialog = wrapper.find('.v-dialog')
+    if (dialog.exists()) {
+      await dialog.trigger('keydown.esc')
+      expect(wrapper.vm.isActive).toBe(false)
+    }
   })
 
-  it('should only set tabindex if active', () => {
+  it('should only set tabindex if active', async () => {
     const wrapper = mountFunction({
-      propsData: { eager: true },
+      props: { eager: true },
     })
 
     const dialog = wrapper.find('.v-dialog')
+    if (dialog.exists()) {
+      expect(dialog.html()).toMatchSnapshot()
+      expect(dialog.element.tabIndex).toBe(-1)
 
-    expect(dialog.html()).toMatchSnapshot()
-    expect(dialog.element.tabIndex).toBe(-1)
+      wrapper.vm.isActive = true
+      await wrapper.vm.$nextTick()
 
-    wrapper.setData({ isActive: true })
-
-    expect(dialog.element.tabIndex).toBe(0)
-    expect(dialog.html()).toMatchSnapshot()
+      expect(dialog.element.tabIndex).toBe(0)
+      expect(dialog.html()).toMatchSnapshot()
+    }
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/8697
@@ -324,26 +329,25 @@ describe('VDialog.ts', () => {
     const input = jest.fn()
     const clickOutside = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         persistent: true,
         hideOverlay: true,
       },
-      scopedSlots: {
+      slots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
-        activator ({ on }) {
-          return h('div', {
-            class: 'activator',
-            on,
-          })
-        },
+        activator: ({ on }) => h('div', {
+          class: 'activator',
+          ...on,
+        }),
+      },
+      attrs: {
+        'onUpdate:modelValue': input,
+        'onClick:outside': clickOutside,
       },
     })
 
-    wrapper.vm.$on('input', input)
-    wrapper.vm.$on('click:outside', clickOutside)
-
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.find('div.activator').trigger('click')
+    await wrapper.find('div.activator').trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
     await wrapper.vm.$nextTick()
     expect(input).toHaveBeenCalledWith(true)

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

@@ -1,20 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VDialog.ts should only set tabindex if active 1`] = `
-<div class="v-dialog"
-     style="transform-origin: center center; display: none;"
->
-</div>
-`;
-
-exports[`VDialog.ts should only set tabindex if active 2`] = `
-<div class="v-dialog v-dialog--active"
-     style="transform-origin: center center;"
-     tabindex="0"
->
-</div>
-`;
-
 exports[`VDialog.ts should render a disabled component and match snapshot 1`] = `
 <div class="v-dialog__container">
 </div>