@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha27

package/src/components/VCalendar/VCalendar.ts

@@ -1,9 +1,9 @@
-import {h} from 'vue'
+import { h, defineComponent, VNode, Component, withDirectives } from 'vue'
 // Styles
 // import '../../stylus/components/_calendar-daily.styl'
 
-// Types
-import { VNode, Component, defineComponent } from 'vue'
+// Directives
+import Resize from '../../directives/resize'
 
 // Mixins
 import CalendarWithEvents from './mixins/calendar-with-events'
@@ -51,6 +51,8 @@ interface VCalendarRenderProps {
 /* @vue/component */
 export default defineComponent({
   name: 'v-calendar',
+
+
   extends: CalendarWithEvents,
 
   props: {
@@ -60,6 +62,8 @@ export default defineComponent({
     ...props.category,
   },
 
+  emits: ['change', 'update:modelValue', 'moved', 'click:date'],
+
   data: () => ({
     lastStart: null as CalendarTimestamp | null,
     lastEnd: null as CalendarTimestamp | null,
@@ -236,11 +240,11 @@ export default defineComponent({
       updateRelative(moved, this.times.now)
 
       if (this.value instanceof Date) {
-        this.$emit('input', timestampToDate(moved))
+        this.$emit('update:modelValue', timestampToDate(moved))
       } else if (typeof this.value === 'number') {
-        this.$emit('input', timestampToDate(moved).getTime())
+        this.$emit('update:modelValue', timestampToDate(moved).getTime())
       } else {
-        this.$emit('input', moved.date)
+        this.$emit('update:modelValue', moved.date)
       }
 
       this.$emit('moved', moved)
@@ -252,7 +256,7 @@ export default defineComponent({
       this.move(-amount)
     },
     timeToY (time: VTime, clamp = true): number | false {
-      const c = this.$children[0] as any
+      const c = this.$refs.calendarChild as any
 
       if (c && c.timeToY) {
         return c.timeToY(time, clamp)
@@ -261,7 +265,7 @@ export default defineComponent({
       }
     },
     timeDelta (time: VTime): number | false {
-      const c = this.$children[0] as any
+      const c = this.$refs.calendarChild as any
 
       if (c && c.timeDelta) {
         return c.timeDelta(time)
@@ -270,7 +274,7 @@ export default defineComponent({
       }
     },
     minutesToPixels (minutes: number): number {
-      const c = this.$children[0] as any
+      const c = this.$refs.calendarChild as any
 
       if (c && c.minutesToPixels) {
         return c.minutesToPixels(minutes)
@@ -279,7 +283,7 @@ export default defineComponent({
       }
     },
     scrollToTime (time: VTime): boolean {
-      const c = this.$children[0] as any
+      const c = this.$refs.calendarChild as any
 
       if (c && c.scrollToTime) {
         return c.scrollToTime(time)
@@ -350,32 +354,30 @@ export default defineComponent({
   render (): VNode {
     const { start, end, maxDays, component, weekdays, categories } = this.renderProps
 
-    return h(component, {
+    // Only pass categories prop to VCalendarCategory component
+    const props: any = {
+      ref: 'calendarChild',
       class: ['v-calendar', {
         'v-calendar-events': !this.noEvents,
       }],
-      ...this.$props,
       start: start.date,
       end: end.date,
       maxDays,
       weekdays,
-      categories,
       role: 'grid',
-      directives: [{
-        modifiers: { quiet: true },
-        name: 'resize',
-        value: this.updateEventVisibility,
-      }],
-      ...this.$listeners,
       'onClick:date': (day: CalendarTimestamp, e?: MouseEvent) => {
-        if (this.$listeners.input) {
-          this.$emit('input', day.date)
-        }
-        if (this.$listeners['click:date']) {
-          this.$emit('click:date', day, e)
-        }
+        this.$emit('update:modelValue', day.date)
+        this.$emit('click:date', day, e)
       },
-      scopedSlots: this.getScopedSlots(),
-    })
+    }
+
+    // Only add categories prop for VCalendarCategory component
+    if (component.name === 'v-calendar-category') {
+      props.categories = categories
+    }
+
+    return withDirectives(h(component, props, this.getScopedSlots()), [
+      [Resize, this.updateEventVisibility, '', { quiet: true }],
+    ])
   },
 })

package/src/components/VCalendar/VCalendarCategory.ts

@@ -1,8 +1,10 @@
+import { h, defineComponent } from 'vue'
+
 // Styles
 import './VCalendarCategory.sass'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 // Mixins
 import VCalendarDaily from './VCalendarDaily'
@@ -59,7 +61,7 @@ export default defineComponent({
       const headerTitle = typeof scope.category === 'object' ? scope.category.categoryName : scope.category
       return h('div', {
         class: 'v-calendar-category__column-header',
-        on: this.getDefaultMouseEventHandlers(':day-category', e => {
+        ...this.getDefaultMouseEventHandlers(':day-category', e => {
           return this.getCategoryScope(this.getSlotScope(day), scope.category)
         }),
       }, [
@@ -85,9 +87,8 @@ export default defineComponent({
       const category = this.parsedCategories[categoryIndex]
       return h('div', {
         key: day.date + '-' + categoryIndex,
-        class: 'v-calendar-daily__day',
-        class: this.getRelativeClasses(day),
-        on: this.getDefaultMouseEventHandlers(':time', e => {
+        class: ['v-calendar-daily__day', this.getRelativeClasses(day)],
+        ...this.getDefaultMouseEventHandlers(':time', e => {
           return this.getSlotScope(this.getTimestampAtEvent(e, day))
         }),
       }, [
@@ -111,7 +112,7 @@ export default defineComponent({
         },
       }
 
-      const children = getSlot(this, 'interval', () =>
+      const children = getSlot(this, 'interval',
         this.getCategoryScope(this.getSlotScope(interval), category)
       )
 
@@ -129,12 +130,12 @@ export default defineComponent({
     genDayBodyCategory (day: CalendarTimestamp, category: CalendarCategory): VNode {
       const data = {
         class: 'v-calendar-category__column',
-        on: this.getDefaultMouseEventHandlers(':time-category', e => {
+        ...this.getDefaultMouseEventHandlers(':time-category', e => {
           return this.getCategoryScope(this.getSlotScope(this.getTimestampAtEvent(e, day)), category)
         }),
       }
 
-      const children = getSlot(this, 'day-body', () => this.getCategoryScope(this.getSlotScope(day), category))
+      const children = getSlot(this, 'day-body', this.getCategoryScope(this.getSlotScope(day), category))
 
       return h('div', data, children)
     },

package/src/components/VCalendar/VCalendarDaily.ts

@@ -1,10 +1,7 @@
-import {h} from 'vue'
+import { h, defineComponent, withDirectives, VNode } from 'vue'
 // Styles
 import './VCalendarDaily.sass'
 
-// Types
-import { VNode, defineComponent } from 'vue'
-
 // Directives
 import Resize from '../../directives/resize'
 
@@ -21,9 +18,9 @@ import { CalendarTimestamp } from 'vuetify/types'
 /* @vue/component */
 export default defineComponent({
   name: 'v-calendar-daily',
-  extends: CalendarWithIntervals,
 
-  directives: { Resize },
+
+  extends: CalendarWithIntervals,
 
   data: () => ({
     scrollPush: 0,
@@ -82,9 +79,8 @@ export default defineComponent({
     genHeadDay (day: CalendarTimestamp, index: number): VNode {
       return h('div', {
         key: day.date,
-        class: 'v-calendar-daily_head-day',
-        class: this.getRelativeClasses(day),
-        on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+        class: ['v-calendar-daily_head-day', this.getRelativeClasses(day)],
+        ...this.getDefaultMouseEventHandlers(':day', nativeEvent => {
           return { nativeEvent, ...this.getSlotScope(day) }
         }),
       }, [
@@ -94,9 +90,9 @@ export default defineComponent({
       ])
     },
     genDayHeader (day: CalendarTimestamp, index: number): VNode[] {
-      return getSlot(this, 'day-header', () => ({
+      return getSlot(this, 'day-header', {
         week: this.days, ...day, index,
-      })) || []
+      }) || []
     },
     genHeadWeekday (day: CalendarTimestamp): VNode {
       const color = day.present ? this.color : undefined
@@ -123,7 +119,7 @@ export default defineComponent({
         }, nativeEvent => {
           return { nativeEvent, ...day }
         }),
-      }, this.dayFormatter(day, false))
+      }, { default: () => this.dayFormatter(day, false) })
     },
     genBody (): VNode {
       return h('div', {
@@ -165,9 +161,8 @@ export default defineComponent({
     genDay (day: CalendarTimestamp, index: number): VNode {
       return h('div', {
         key: day.date,
-        class: 'v-calendar-daily__day',
-        class: this.getRelativeClasses(day),
-        on: this.getDefaultMouseEventHandlers(':time', nativeEvent => {
+        class: ['v-calendar-daily__day', this.getRelativeClasses(day)],
+        ...this.getDefaultMouseEventHandlers(':time', nativeEvent => {
           return { nativeEvent, ...this.getSlotScope(this.getTimestampAtEvent(nativeEvent, day)) }
         }),
       }, [
@@ -176,7 +171,7 @@ export default defineComponent({
       ])
     },
     genDayBody (day: CalendarTimestamp): VNode[] {
-      return getSlot(this, 'day-body', () => this.getSlotScope(day)) || []
+      return getSlot(this, 'day-body', this.getSlotScope(day)) || []
     },
     genDayIntervals (index: number): VNode[] {
       return this.intervals[index].map(this.genDayInterval)
@@ -195,7 +190,7 @@ export default defineComponent({
 
       }
 
-      const children = getSlot(this, 'interval', () => this.getSlotScope(interval))
+      const children = getSlot(this, 'interval', this.getSlotScope(interval))
 
       return h('div', data, children)
     },
@@ -206,7 +201,7 @@ export default defineComponent({
         style: {
           width,
         },
-        on: this.getDefaultMouseEventHandlers(':interval', nativeEvent => {
+        ...this.getDefaultMouseEventHandlers(':interval', nativeEvent => {
           return { nativeEvent, ...this.getTimestampAtEvent(nativeEvent, this.parsedStart) }
         }),
       }
@@ -240,21 +235,16 @@ export default defineComponent({
   },
 
   render (): VNode {
-    return h('div', {
+    return withDirectives(h('div', {
       class: this.classes,
-      on: {
-        dragstart: (e: MouseEvent) => {
-          e.preventDefault()
-        },
+      onDragstart: (e: MouseEvent) => {
+        e.preventDefault()
       },
-      directives: [{
-        modifiers: { quiet: true },
-        name: 'resize',
-        value: this.onResize,
-      }],
     }, [
       !this.hideHeader ? this.genHead() : '',
       this.genBody(),
+    ]), [
+      [Resize, this.onResize, '', { quiet: true }],
     ])
   },
 })

package/src/components/VCalendar/VCalendarMonthly.ts

@@ -1,3 +1,5 @@
+import { defineComponent } from 'vue'
+
 // Styles
 import './VCalendarWeekly.sass'
 
@@ -7,7 +9,6 @@ import VCalendarWeekly from './VCalendarWeekly'
 // Util
 import { parseTimestamp, getStartOfMonth, getEndOfMonth } from './util/timestamp'
 import { CalendarTimestamp } from 'vuetify/types'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
 export default defineComponent({

package/src/components/VCalendar/VCalendarWeekly.ts

@@ -1,9 +1,9 @@
-import {h} from 'vue'
+import { h, defineComponent } from 'vue'
 // Styles
 import './VCalendarWeekly.sass'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 // Components
 import VBtn from '../VBtn'
@@ -92,9 +92,7 @@ export default defineComponent({
     genHead (): VNode {
       return h('div', {
         class: 'v-calendar-weekly__head',
-        attrs: {
-          role: 'row',
-        },
+        role: 'row',
       }, this.genHeadDays())
     },
     genHeadDays (): VNode[] {
@@ -114,11 +112,8 @@ export default defineComponent({
 
       return h('div', this.setTextColor(color, {
         key: day.date,
-        class: 'v-calendar-weekly__head-weekday',
-        class: this.getRelativeClasses(day, outside),
-        attrs: {
-          role: 'columnheader',
-        },
+        class: ['v-calendar-weekly__head-weekday', this.getRelativeClasses(day, outside)],
+        role: 'columnheader',
       }), this.weekdayFormatter(day, this.shortWeekdays))
     },
     genWeeks (): VNode[] {
@@ -142,9 +137,7 @@ export default defineComponent({
       return h('div', {
         key: week[0].date,
         class: 'v-calendar-weekly__week',
-        attrs: {
-          role: 'row',
-        },
+        role: 'row',
       }, weekNodes)
     },
     getWeekNumber (determineDay: CalendarTimestamp) {
@@ -168,17 +161,14 @@ export default defineComponent({
 
       return h('div', {
         key: day.date,
-        class: 'v-calendar-weekly__day',
-        class: this.getRelativeClasses(day, outside),
-        attrs: {
-          role: 'cell',
-        },
-        on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
+        class: ['v-calendar-weekly__day', this.getRelativeClasses(day, outside)],
+        role: 'cell',
+        ...this.getDefaultMouseEventHandlers(':day', nativeEvent => {
           return { nativeEvent, ...day }
         }),
       }, [
         this.genDayLabel(day),
-        ...(getSlot(this, 'day', () => ({ outside, index, week, ...day })) || []),
+        ...(getSlot(this, 'day', { outside, index, week, ...day }) || []),
       ])
     },
     genDayLabel (day: CalendarTimestamp): VNode {
@@ -199,10 +189,11 @@ export default defineComponent({
           'click:date': { event: 'click', stop: true },
           'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
         }, nativeEvent => ({ nativeEvent, ...day })),
-      }, hasMonth
-        ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false)
-        : this.dayFormatter(day, false)
-      )
+      }, {
+        default: () => hasMonth
+          ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false)
+          : this.dayFormatter(day, false)
+      })
     },
     genDayMonth (day: CalendarTimestamp): VNode | string {
       const color = day.present ? this.color : undefined
@@ -215,12 +206,9 @@ export default defineComponent({
 
   render (): VNode {
     return h('div', {
-      class: this.staticClass,
-      class: this.classes,
-      on: {
-        dragstart: (e: MouseEvent) => {
-          e.preventDefault()
-        },
+      class: [this.staticClass, this.classes],
+      onDragstart: (e: MouseEvent) => {
+        e.preventDefault()
       },
     }, [
       !this.hideHeader ? this.genHead() : '',

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

@@ -2,23 +2,22 @@ import { parseDate } from '../util/timestamp'
 import VCalendar from '../VCalendar'
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../util/mixins'
 
 describe('VCalendar', () => {
-  type Instance = ExtractVue<typeof VCalendar>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VCalendar>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VCalendar, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              current: 'en-US',
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                current: 'en-US',
+              },
             },
           },
         },
@@ -29,15 +28,12 @@ describe('VCalendar', () => {
 
   it('should render day view', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'day',
         start: '2018-01-29',
         end: '2018-02-04',
         now: '2019-02-17',
       },
-      methods: {
-        getNow: () => parseDate(new Date('2019-02-17')),
-      },
     })
 
     expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
@@ -46,15 +42,12 @@ describe('VCalendar', () => {
 
   it('should render 4-day view', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: '4day',
         start: '2018-01-29',
         end: '2018-02-04',
         now: '2019-02-17',
       },
-      methods: {
-        getNow: () => parseDate(new Date('2019-02-17')),
-      },
     })
 
     expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
@@ -63,15 +56,12 @@ describe('VCalendar', () => {
 
   it('should render week view', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'week',
         start: '2018-01-29',
         end: '2018-02-04',
         now: '2019-02-17',
       },
-      methods: {
-        getNow: () => parseDate(new Date('2019-02-17')),
-      },
     })
 
     expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
@@ -80,15 +70,12 @@ describe('VCalendar', () => {
 
   it('should render month view', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'month',
         start: '2018-01-29',
         end: '2018-02-04',
         now: '2019-02-17',
       },
-      methods: {
-        getNow: () => parseDate(new Date('2019-02-17')),
-      },
     })
 
     expect(wrapper.classes('v-calendar-monthly')).toBeTruthy()
@@ -97,7 +84,7 @@ describe('VCalendar', () => {
 
   it('should parse value', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: '2019-02-02',
         start: '2019-01-29',
         end: '2019-02-04',
@@ -109,7 +96,7 @@ describe('VCalendar', () => {
 
   it('should parse start', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         start: '2019-01-29',
         end: '2019-02-04',
       },
@@ -120,16 +107,13 @@ describe('VCalendar', () => {
 
   it('should go to correct day when using next/prev public functions', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: '2019-01-11',
         type: 'day',
         weekdays: [1, 2, 3, 4, 5],
       },
     })
 
-    const input = jest.fn(value => wrapper.setProps({ value }))
-    wrapper.vm.$on('input', input)
-
     expect(wrapper.html()).toMatchSnapshot()
 
     wrapper.vm.next()

package/src/components/VCalendar/__tests__/VCalendarCategory.spec.ts

@@ -1,32 +1,34 @@
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
 import { ExtractVue } from '../../../util/mixins'
 import VCalendar from '../VCalendar'
 
 describe('VCalendarCategory', () => {
   type Instance = ExtractVue<typeof VCalendar>
-  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(VCalendar, {
-        ...options,
-        mocks: {
-          $vuetify: {
-            lang: {
-              current: 'en-US',
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                current: 'en-US',
+              },
             },
           },
         },
+        ...options,
       })
     }
   })
 
   it('should test categoryText prop as a string', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'category',
         events: [{ start: new Date(), category: 'Nate' }],
         categories: [{ name: 'Nate' }],
@@ -39,7 +41,7 @@ describe('VCalendarCategory', () => {
 
   it('should test categoryText prop as a function', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'category',
         events: [{ start: new Date(), category: '20' }],
         categories: [{ name: 'Nate', age: '20' }],
@@ -60,7 +62,7 @@ describe('VCalendarCategory', () => {
     }
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'category',
         events: [{ start: new Date(), category: 'Nate' }],
         categories: [{ name: 'Nate', age: 20 }, { name: 'Bob', age: 30 }],
@@ -79,7 +81,7 @@ describe('VCalendarCategory', () => {
     }
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'category',
         categoryShowAll: true,
         events: [{ start: new Date(), category: 'Nate' }],
@@ -99,7 +101,7 @@ describe('VCalendarCategory', () => {
     }
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         type: 'category',
         events: [{ start: new Date(), category: 'Nate' }, { start: new Date(), category: 'Bob' }],
         categories: ['Nate', 'Bob'],