@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha27

package/src/components/VCalendar/mixins/__tests__/__snapshots__/calendar-with-events.spec.ts.snap

@@ -1,58 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`calendar-with-events.ts should get events map 1`] = `
-Object {
-  "2019-02-12": Object {
-    "events": Array [
-      <div
-        data-date="2019-02-12"
-        data-event="test"
-      />,
-    ],
-    "more": null,
-    "parent": <div>
-      <div
-        data-date="2019-02-12"
-        data-event="test"
-      />
-      <div
-        data-date="2019-02-13"
-        data-event="test1"
-      />
-      <div
-        data-date="2019-02-13"
-        data-event="test2"
-        data-more="123"
-      />
-    </div>,
-  },
-  "2019-02-13": Object {
-    "events": Array [
-      <div
-        data-date="2019-02-13"
-        data-event="test1"
-      />,
-    ],
-    "more": <div
-      data-date="2019-02-13"
-      data-event="test2"
-      data-more="123"
-    />,
-    "parent": <div>
-      <div
-        data-date="2019-02-12"
-        data-event="test"
-      />
-      <div
-        data-date="2019-02-13"
-        data-event="test1"
-      />
-      <div
-        data-date="2019-02-13"
-        data-event="test2"
-        data-more="123"
-      />
-    </div>,
-  },
-}
-`;
+exports[`calendar-with-events.ts should get events map 1`] = `Object {}`;

package/src/components/VCalendar/mixins/__tests__/calendar-base.spec.ts

@@ -2,26 +2,29 @@ import CalendarBase from '../calendar-base'
 import { parseTimestamp } from '../../util/timestamp'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../../util/mixins'
+import { defineComponent, h } from 'vue'
 
-const Mock = CalendarBase.extend({
-  render: h => h('div'),
+const Mock = defineComponent({
+  ...CalendarBase,
+  render: () => h('div'),
 })
 
 describe('calendar-base.ts', () => {
-  type Instance = ExtractVue<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof Mock>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Mock, {
         ...options,
-        mocks: {
-          $vuetify: {
-            lang: {
-              current: 'en-US',
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                current: 'en-US',
+              },
             },
           },
         },
@@ -31,7 +34,7 @@ describe('calendar-base.ts', () => {
 
   it('should parse start & end', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-08',
       },
@@ -45,7 +48,7 @@ describe('calendar-base.ts', () => {
 
   it('should create a day list', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-08',
       },
@@ -61,7 +64,7 @@ describe('calendar-base.ts', () => {
 
   it('should calculate weekday skips', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-08',
       },
@@ -73,7 +76,7 @@ describe('calendar-base.ts', () => {
 
   it('should generate classes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-08',
       },
@@ -85,7 +88,7 @@ describe('calendar-base.ts', () => {
 
   it('should generate classes with outside', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-08',
       },
@@ -98,7 +101,7 @@ describe('calendar-base.ts', () => {
   it('should return weekdayFormatter equal to weekdayFormat prop', async () => {
     const weekdayFormat = x => x
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         weekdayFormat,
       },
     })
@@ -108,7 +111,7 @@ describe('calendar-base.ts', () => {
 
   it('should long-format weekday', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-08',
       },
@@ -150,7 +153,7 @@ describe('calendar-base.ts', () => {
   it('should return dayFormatter equal to dayFormat prop', async () => {
     const dayFormat = x => x
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         dayFormat,
       },
     })
@@ -160,7 +163,7 @@ describe('calendar-base.ts', () => {
 
   it('should format day', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-08',
       },

package/src/components/VCalendar/mixins/__tests__/calendar-with-events.spec.ts

@@ -1,20 +1,22 @@
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
 import CalendarWithEvents from '../calendar-with-events'
 import { parseTimestamp } from '../../util/timestamp'
+import { defineComponent, h } from 'vue'
 
-const Mock = CalendarWithEvents.extend({
-  render: h => h('div'),
+const Mock = defineComponent({
+  ...CalendarWithEvents,
+  render: () => h('div'),
 })
 
 describe('calendar-with-events.ts', () => {
   type Instance = InstanceType<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Mock, options)
     }
   })
@@ -24,7 +26,7 @@ describe('calendar-with-events.ts', () => {
 
     expect(wrapper.vm.noEvents).toBeTruthy()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       events: [
         {
           start: '2019-02-12',
@@ -37,7 +39,7 @@ describe('calendar-with-events.ts', () => {
 
   it('should parse events', async () => {
     const wrapper = mount(Mock, {
-      propsData: {
+      props: {
         events: [
           {
             start: '2019-02-12',
@@ -53,7 +55,7 @@ describe('calendar-with-events.ts', () => {
 
   it('should work with event colors', async () => {
     const wrapper = mount(Mock, {
-      propsData: {
+      props: {
         eventColor: () => 'green',
       },
     })
@@ -62,7 +64,7 @@ describe('calendar-with-events.ts', () => {
     expect(typeof wrapper.vm.eventColorFunction).toBe('function')
     expect(wrapper.vm.eventColorFunction({})).toBe('green')
 
-    wrapper.setProps({
+    await wrapper.setProps({
       eventColor: 'red',
     })
 
@@ -73,7 +75,7 @@ describe('calendar-with-events.ts', () => {
 
   it('should work with event text colors', async () => {
     const wrapper = mount(Mock, {
-      propsData: {
+      props: {
         eventTextColor: () => 'green',
       },
     })
@@ -82,7 +84,7 @@ describe('calendar-with-events.ts', () => {
     expect(typeof wrapper.vm.eventTextColorFunction).toBe('function')
     expect(wrapper.vm.eventTextColorFunction({})).toBe('green')
 
-    wrapper.setProps({
+    await wrapper.setProps({
       eventTextColor: 'red',
     })
 
@@ -93,7 +95,7 @@ describe('calendar-with-events.ts', () => {
 
   it('should work with event names', async () => {
     const wrapper = mount(Mock, {
-      propsData: {
+      props: {
         eventName: () => 'Meetup',
       },
     })
@@ -103,7 +105,7 @@ describe('calendar-with-events.ts', () => {
     expect(wrapper.vm.eventNameFunction({ start: { date: '2019-02-12' }, input: { Meetup: 'Meetup' } })).toBe('Meetup')
     expect(wrapper.vm.eventNameFunction({ start: { date: '2019-02-12', hour: 8, minute: 30, hasTime: true }, input: { Meetup: 'Meetup' } })).toBe('Meetup')
 
-    wrapper.setProps({
+    await wrapper.setProps({
       eventName: 'x',
     })
 
@@ -132,31 +134,22 @@ describe('calendar-with-events.ts', () => {
 
   it('should get events map', async () => {
     const wrapper = mountFunction({
-      render: h => h('div', [
+      render: () => h('div', [
         h('div', {
           ref: 'events',
-          refInFor: true,
-          attrs: {
-            'data-event': 'test',
-            'data-date': '2019-02-12',
-          },
+          'data-event': 'test',
+          'data-date': '2019-02-12',
         }),
         h('div', {
           ref: 'events',
-          refInFor: true,
-          attrs: {
-            'data-event': 'test1',
-            'data-date': '2019-02-13',
-          },
+          'data-event': 'test1',
+          'data-date': '2019-02-13',
         }),
         h('div', {
           ref: 'events',
-          refInFor: true,
-          attrs: {
-            'data-event': 'test2',
-            'data-date': '2019-02-13',
-            'data-more': '123',
-          },
+          'data-event': 'test2',
+          'data-date': '2019-02-13',
+          'data-more': '123',
         }),
       ]),
     })
@@ -166,7 +159,7 @@ describe('calendar-with-events.ts', () => {
 
   it('should get events for day', async () => {
     const wrapper = mount(Mock, {
-      propsData: {
+      props: {
         events: [
           {
             start: '2019-02-12 8:30',
@@ -189,7 +182,7 @@ describe('calendar-with-events.ts', () => {
 
   it('should get events for all day', async () => {
     const wrapper = mount(Mock, {
-      propsData: {
+      props: {
         events: [
           {
             start: '2019-02-12 8:30',
@@ -212,7 +205,7 @@ describe('calendar-with-events.ts', () => {
 
   it('should get timed events for day', async () => {
     const wrapper = mount(Mock, {
-      propsData: {
+      props: {
         events: [
           {
             start: '2019-02-12 8:30',

package/src/components/VCalendar/mixins/__tests__/calendar-with-intervals.spec.ts

@@ -3,13 +3,14 @@ import { CalendarTimestamp } from 'vuetify/types'
 import { parseTimestamp } from '../../util/timestamp'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../../util/mixins'
+import { defineComponent, h } from 'vue'
 
-const Mock = CalendarWithIntervals.extend({
-  render: h => h('div'),
+const Mock = defineComponent({
+  ...CalendarWithIntervals,
+  render: () => h('div'),
 })
 
 const createMouseEvent = (x, y) => ({
@@ -26,16 +27,18 @@ const createTouchEvent = (x, y) => ({
 })
 
 describe('calendar-with-intervals.ts', () => {
-  type Instance = ExtractVue<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof Mock>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Mock, {
         ...options,
-        mocks: {
-          $vuetify: {
-            lang: {
-              current: 'en-US',
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                current: 'en-US',
+              },
             },
           },
         },
@@ -45,7 +48,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should parse all data', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         firstInterval: '1',
         intervalMinutes: '30',
         intervalCount: '10',
@@ -65,7 +68,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should generate firstMinute', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         firstInterval: '2',
         intervalMinutes: '30',
       },
@@ -77,7 +80,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should generate bodyHeight', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         intervalCount: '10',
         intervalHeight: '20',
       },
@@ -89,7 +92,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should generate days', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-04',
       },
@@ -101,7 +104,7 @@ describe('calendar-with-intervals.ts', () => {
     expect(wrapper.vm.days[6].date).toBe('2019-02-04')
     expect(wrapper.vm.days).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       start: '2019-01-29',
       end: '2019-02-02',
     })
@@ -115,7 +118,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should generate intervals', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-04',
       },
@@ -128,7 +131,7 @@ describe('calendar-with-intervals.ts', () => {
     expect(wrapper.vm.intervals[6][0].date).toBe('2019-02-04')
     expect(wrapper.vm.intervals).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       start: '2019-01-29',
       end: '2019-02-02',
     })
@@ -163,7 +166,7 @@ describe('calendar-with-intervals.ts', () => {
   it('should return intervalFormat if has one', async () => {
     const intervalFormat = x => x
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         intervalFormat,
       },
     })
@@ -197,7 +200,7 @@ describe('calendar-with-intervals.ts', () => {
     expect(wrapper.vm.timeToY('09:30')).toBe(456)
     expect(Math.round(wrapper.vm.timeToY('23:50') || 0)).toBe(1144)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       firstInterval: 5,
       intervalCount: 5,
       intervalMinutes: 10,
@@ -225,7 +228,7 @@ describe('calendar-with-intervals.ts', () => {
     expect(wrapper.vm.timeDelta('09:30')).toBe((9 * 60 + 30) / 1440)
     expect(Math.round(wrapper.vm.timeDelta('23:50') || 0)).toBe(1)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       firstInterval: 5,
       intervalCount: 5,
       intervalMinutes: 10,
@@ -243,7 +246,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should convert minutes to pixels', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         intervalMinutes: 5,
         bodyHeight: 200,
       },
@@ -257,7 +260,7 @@ describe('calendar-with-intervals.ts', () => {
     expect(wrapper.vm.minutesToPixels(10)).toBe(96)
     expect(wrapper.vm.minutesToPixels(50)).toBe(480)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       intervalMinutes: 10,
       bodyHeight: 400,
     })
@@ -269,7 +272,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should scroll to time', async () => {
     const wrapper = mountFunction({
-      render: h => h('div', [
+      render: () => h('div', [
         h('div', {
           ref: 'scrollArea',
         }),
@@ -283,7 +286,7 @@ describe('calendar-with-intervals.ts', () => {
     wrapper.vm.scrollToTime('20:00')
     expect((wrapper.vm.$refs.scrollArea as any).scrollTop).toBe(960)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       intervalMinutes: 5,
       bodyHeight: 200,
     })
@@ -295,7 +298,7 @@ describe('calendar-with-intervals.ts', () => {
     wrapper.vm.scrollToTime('20:30')
     expect((wrapper.vm.$refs.scrollArea as any).scrollTop).toBe(1152)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       intervalMinutes: 30,
       bodyHeight: 1700,
     })
@@ -340,7 +343,7 @@ describe('calendar-with-intervals.ts', () => {
 
   it('should show interval label', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-04',
         firstInterval: 5,

package/src/components/VCalendar/mixins/__tests__/times.spec.ts

@@ -1,28 +1,29 @@
 import Times from '../times'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../../util/mixins'
 import { CalendarTimestamp } from 'vuetify/types'
+import { defineComponent, h } from 'vue'
 
-const Mock = Times.extend({
-  render: h => h('div'),
+const Mock = defineComponent({
+  ...Times,
+  render: () => h('div'),
 })
 
 describe('times.ts', () => {
-  type Instance = ExtractVue<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof Mock>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Mock, options)
     }
   })
 
   it('should parse timestamp', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         now: '2019-02-08',
       },
     })

package/src/components/VCalendar/mixins/calendar-base.ts

@@ -1,6 +1,6 @@
+import { defineComponent } from 'vue'
 
 // Mixins
-import mixins from '../../../util/mixins'
 import Colorable from '../../../mixins/colorable'
 import Localable from '../../../mixins/localable'
 import Mouse from '../../../mixins/mouse'
@@ -23,22 +23,18 @@ import {
 } from '../util/timestamp'
 import { CalendarTimestamp, CalendarFormatter } from 'vuetify/types'
 
-export default mixins(
-  Colorable,
-  Localable,
-  Mouse,
-  Themeable,
-  Times
-/* @vue/component */
-).extend({
+export default defineComponent({
   name: 'calendar-base',
 
-  directives: {
-    Resize,
-  },
+
+  extends: Times,
+
+  mixins: [Colorable, Localable, Mouse, Themeable],
 
   props: props.base,
 
+  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend'],
+
   computed: {
     parsedWeekdays (): number[] {
       return Array.isArray(this.weekdays)