@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VCalendar/VCalendarCategory.ts

@@ -2,7 +2,7 @@
 import './VCalendarCategory.sass'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 // Mixins
 import VCalendarDaily from './VCalendarDaily'
@@ -14,9 +14,8 @@ import props from './util/props'
 import { getParsedCategories } from './util/parser'
 
 /* @vue/component */
-export default defineComponent({
+export default VCalendarDaily.extend({
   name: 'v-calendar-category',
-  extends: VCalendarDaily,
 
   props: props.category,
 
@@ -35,7 +34,7 @@ export default defineComponent({
   methods: {
     genDayHeader (day: CalendarTimestamp, index: number): VNode[] {
       const data = {
-        class: 'v-calendar-category__columns',
+        staticClass: 'v-calendar-category__columns',
       }
       const scope = {
         week: this.days, ...day, index,
@@ -45,7 +44,7 @@ export default defineComponent({
         return this.genDayHeaderCategory(day, this.getCategoryScope(scope, category))
       })
 
-      return [h('div', data, children)]
+      return [this.$createElement('div', data, children)]
     },
     getCategoryScope (scope: any, category: CalendarCategory) {
       const cat = typeof category === 'object' && category &&
@@ -57,8 +56,8 @@ export default defineComponent({
     },
     genDayHeaderCategory (day: CalendarTimestamp, scope: any): VNode {
       const headerTitle = typeof scope.category === 'object' ? scope.category.categoryName : scope.category
-      return h('div', {
-        class: 'v-calendar-category__column-header',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-category__column-header',
         on: this.getDefaultMouseEventHandlers(':day-category', e => {
           return this.getCategoryScope(this.getSlotScope(day), scope.category)
         }),
@@ -68,8 +67,8 @@ export default defineComponent({
       ])
     },
     genDayHeaderCategoryTitle (categoryName: string | null) {
-      return h('div', {
-        class: 'v-calendar-category__category',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-category__category',
       }, categoryName === null ? this.categoryForInvalid : categoryName)
     },
     genDays (): VNode[] {
@@ -83,9 +82,9 @@ export default defineComponent({
     },
     genDay (day: CalendarTimestamp, index: number, categoryIndex: number): VNode {
       const category = this.parsedCategories[categoryIndex]
-      return h('div', {
+      return this.$createElement('div', {
         key: day.date + '-' + categoryIndex,
-        class: 'v-calendar-daily__day',
+        staticClass: 'v-calendar-daily__day',
         class: this.getRelativeClasses(day),
         on: this.getDefaultMouseEventHandlers(':time', e => {
           return this.getSlotScope(this.getTimestampAtEvent(e, day))
@@ -104,7 +103,7 @@ export default defineComponent({
 
       const data = {
         key: interval.time,
-        class: 'v-calendar-daily__day-interval',
+        staticClass: 'v-calendar-daily__day-interval',
         style: {
           height,
           ...styler({ ...interval, category }),
@@ -115,20 +114,20 @@ export default defineComponent({
         this.getCategoryScope(this.getSlotScope(interval), category)
       )
 
-      return h('div', data, children)
+      return this.$createElement('div', data, children)
     },
     genDayBody (day: CalendarTimestamp, category: CalendarCategory): VNode[] {
       const data = {
-        class: 'v-calendar-category__columns',
+        staticClass: 'v-calendar-category__columns',
       }
 
       const children = [this.genDayBodyCategory(day, category)]
 
-      return [h('div', data, children)]
+      return [this.$createElement('div', data, children)]
     },
     genDayBodyCategory (day: CalendarTimestamp, category: CalendarCategory): VNode {
       const data = {
-        class: 'v-calendar-category__column',
+        staticClass: 'v-calendar-category__column',
         on: this.getDefaultMouseEventHandlers(':time-category', e => {
           return this.getCategoryScope(this.getSlotScope(this.getTimestampAtEvent(e, day)), category)
         }),
@@ -136,7 +135,7 @@ export default defineComponent({
 
       const children = getSlot(this, 'day-body', () => this.getCategoryScope(this.getSlotScope(day), category))
 
-      return h('div', data, children)
+      return this.$createElement('div', data, children)
     },
   },
 })

package/src/components/VCalendar/VCalendarDaily.ts

@@ -1,9 +1,8 @@
-import {h} from 'vue'
 // Styles
 import './VCalendarDaily.sass'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 // Directives
 import Resize from '../../directives/resize'
@@ -19,9 +18,8 @@ import { convertToUnit, getSlot } from '../../util/helpers'
 import { CalendarTimestamp } from 'vuetify/types'
 
 /* @vue/component */
-export default defineComponent({
+export default CalendarWithIntervals.extend({
   name: 'v-calendar-daily',
-  extends: CalendarWithIntervals,
 
   directives: { Resize },
 
@@ -56,8 +54,8 @@ export default defineComponent({
       return area && pane ? (area.offsetWidth - pane.offsetWidth) : 0
     },
     genHead (): VNode {
-      return h('div', {
-        class: 'v-calendar-daily__head',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-daily__head',
         style: {
           marginRight: this.scrollPush + 'px',
         },
@@ -69,8 +67,8 @@ export default defineComponent({
     genHeadIntervals (): VNode {
       const width: string | undefined = convertToUnit(this.intervalWidth)
 
-      return h('div', {
-        class: 'v-calendar-daily__intervals-head',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-daily__intervals-head',
         style: {
           width,
         },
@@ -80,9 +78,9 @@ export default defineComponent({
       return this.days.map(this.genHeadDay)
     },
     genHeadDay (day: CalendarTimestamp, index: number): VNode {
-      return h('div', {
+      return this.$createElement('div', {
         key: day.date,
-        class: 'v-calendar-daily_head-day',
+        staticClass: 'v-calendar-daily_head-day',
         class: this.getRelativeClasses(day),
         on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
           return { nativeEvent, ...this.getSlotScope(day) }
@@ -101,23 +99,25 @@ export default defineComponent({
     genHeadWeekday (day: CalendarTimestamp): VNode {
       const color = day.present ? this.color : undefined
 
-      return h('div', this.setTextColor(color, {
-        class: 'v-calendar-daily_head-weekday',
+      return this.$createElement('div', this.setTextColor(color, {
+        staticClass: 'v-calendar-daily_head-weekday',
       }), this.weekdayFormatter(day, this.shortWeekdays))
     },
     genHeadDayLabel (day: CalendarTimestamp): VNode {
-      return h('div', {
-        class: 'v-calendar-daily_head-day-label',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-daily_head-day-label',
       }, getSlot(this, 'day-label-header', day) || [this.genHeadDayButton(day)])
     },
     genHeadDayButton (day: CalendarTimestamp): VNode {
       const color = day.present ? this.color : 'transparent'
 
-      return h(VBtn, {
-        color,
-        fab: true,
-        depressed: true,
-        ...this.getMouseEventHandlers({
+      return this.$createElement(VBtn, {
+        props: {
+          color,
+          fab: true,
+          depressed: true,
+        },
+        on: this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
           'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
         }, nativeEvent => {
@@ -126,24 +126,24 @@ export default defineComponent({
       }, this.dayFormatter(day, false))
     },
     genBody (): VNode {
-      return h('div', {
-        class: 'v-calendar-daily__body',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-daily__body',
       }, [
         this.genScrollArea(),
       ])
     },
     genScrollArea (): VNode {
-      return h('div', {
+      return this.$createElement('div', {
         ref: 'scrollArea',
-        class: 'v-calendar-daily__scroll-area',
+        staticClass: 'v-calendar-daily__scroll-area',
       }, [
         this.genPane(),
       ])
     },
     genPane (): VNode {
-      return h('div', {
+      return this.$createElement('div', {
         ref: 'pane',
-        class: 'v-calendar-daily__pane',
+        staticClass: 'v-calendar-daily__pane',
         style: {
           height: convertToUnit(this.bodyHeight),
         },
@@ -152,8 +152,8 @@ export default defineComponent({
       ])
     },
     genDayContainer (): VNode {
-      return h('div', {
-        class: 'v-calendar-daily__day-container',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-daily__day-container',
       }, [
         this.genBodyIntervals(),
         ...this.genDays(),
@@ -163,9 +163,9 @@ export default defineComponent({
       return this.days.map(this.genDay)
     },
     genDay (day: CalendarTimestamp, index: number): VNode {
-      return h('div', {
+      return this.$createElement('div', {
         key: day.date,
-        class: 'v-calendar-daily__day',
+        staticClass: 'v-calendar-daily__day',
         class: this.getRelativeClasses(day),
         on: this.getDefaultMouseEventHandlers(':time', nativeEvent => {
           return { nativeEvent, ...this.getSlotScope(this.getTimestampAtEvent(nativeEvent, day)) }
@@ -187,7 +187,7 @@ export default defineComponent({
 
       const data = {
         key: interval.time,
-        class: 'v-calendar-daily__day-interval',
+        staticClass: 'v-calendar-daily__day-interval',
         style: {
           height,
           ...styler(interval),
@@ -197,12 +197,12 @@ export default defineComponent({
 
       const children = getSlot(this, 'interval', () => this.getSlotScope(interval))
 
-      return h('div', data, children)
+      return this.$createElement('div', data, children)
     },
     genBodyIntervals (): VNode {
       const width: string | undefined = convertToUnit(this.intervalWidth)
       const data = {
-        class: 'v-calendar-daily__intervals-body',
+        staticClass: 'v-calendar-daily__intervals-body',
         style: {
           width,
         },
@@ -211,7 +211,7 @@ export default defineComponent({
         }),
       }
 
-      return h('div', data, this.genIntervalLabels())
+      return this.$createElement('div', data, this.genIntervalLabels())
     },
     genIntervalLabels (): VNode[] | null {
       if (!this.intervals.length) return null
@@ -225,21 +225,21 @@ export default defineComponent({
       const show = shower(interval)
       const label = show ? this.intervalFormatter(interval, short) : undefined
 
-      return h('div', {
+      return this.$createElement('div', {
         key: interval.time,
-        class: 'v-calendar-daily__interval',
+        staticClass: 'v-calendar-daily__interval',
         style: {
           height,
         },
       }, [
-        h('div', {
-          class: 'v-calendar-daily__interval-text',
+        this.$createElement('div', {
+          staticClass: 'v-calendar-daily__interval-text',
         }, label),
       ])
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
       class: this.classes,
       on: {

package/src/components/VCalendar/VCalendarMonthly.ts

@@ -7,12 +7,10 @@ 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({
+export default VCalendarWeekly.extend({
   name: 'v-calendar-monthly',
-  extends: VCalendarWeekly,
 
   computed: {
     staticClass (): string {

package/src/components/VCalendar/VCalendarWeekly.ts

@@ -1,9 +1,8 @@
-import {h} from 'vue'
 // Styles
 import './VCalendarWeekly.sass'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 // Components
 import VBtn from '../VBtn'
@@ -23,9 +22,8 @@ import {
 import { CalendarTimestamp, CalendarFormatter } from 'vuetify/types'
 
 /* @vue/component */
-export default defineComponent({
+export default CalendarBase.extend({
   name: 'v-calendar-weekly',
-  extends: CalendarBase,
 
   props: props.weeks,
 
@@ -90,8 +88,8 @@ export default defineComponent({
              dayIdentifier > getDayIdentifier(this.parsedEnd)
     },
     genHead (): VNode {
-      return h('div', {
-        class: 'v-calendar-weekly__head',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-weekly__head',
         attrs: {
           role: 'row',
         },
@@ -101,8 +99,8 @@ export default defineComponent({
       const header = this.todayWeek.map(this.genHeadDay)
 
       if (this.showWeek) {
-        header.unshift(h('div', {
-          class: 'v-calendar-weekly__head-weeknumber',
+        header.unshift(this.$createElement('div', {
+          staticClass: 'v-calendar-weekly__head-weeknumber',
         }))
       }
 
@@ -112,9 +110,9 @@ export default defineComponent({
       const outside = this.isOutside(this.days[index])
       const color = day.present ? this.color : undefined
 
-      return h('div', this.setTextColor(color, {
+      return this.$createElement('div', this.setTextColor(color, {
         key: day.date,
-        class: 'v-calendar-weekly__head-weekday',
+        staticClass: 'v-calendar-weekly__head-weekday',
         class: this.getRelativeClasses(day, outside),
         attrs: {
           role: 'columnheader',
@@ -139,9 +137,9 @@ export default defineComponent({
         weekNodes.unshift(this.genWeekNumber(weekNumber))
       }
 
-      return h('div', {
+      return this.$createElement('div', {
         key: week[0].date,
-        class: 'v-calendar-weekly__week',
+        staticClass: 'v-calendar-weekly__week',
         attrs: {
           role: 'row',
         },
@@ -157,18 +155,18 @@ export default defineComponent({
       )
     },
     genWeekNumber (weekNumber: number) {
-      return h('div', {
-        class: 'v-calendar-weekly__weeknumber',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-weekly__weeknumber',
       }, [
-        h('small', String(weekNumber)),
+        this.$createElement('small', String(weekNumber)),
       ])
     },
     genDay (day: CalendarTimestamp, index: number, week: CalendarTimestamp[]): VNode {
       const outside = this.isOutside(day)
 
-      return h('div', {
+      return this.$createElement('div', {
         key: day.date,
-        class: 'v-calendar-weekly__day',
+        staticClass: 'v-calendar-weekly__day',
         class: this.getRelativeClasses(day, outside),
         attrs: {
           role: 'cell',
@@ -182,20 +180,22 @@ export default defineComponent({
       ])
     },
     genDayLabel (day: CalendarTimestamp): VNode {
-      return h('div', {
-        class: 'v-calendar-weekly__day-label',
+      return this.$createElement('div', {
+        staticClass: 'v-calendar-weekly__day-label',
       }, getSlot(this, 'day-label', day) || [this.genDayLabelButton(day)])
     },
     genDayLabelButton (day: CalendarTimestamp): VNode {
       const color = day.present ? this.color : 'transparent'
       const hasMonth = day.day === 1 && this.showMonthOnFirst
 
-      return h(VBtn, {
-        color,
-        fab: true,
-        depressed: true,
-        small: true,
-        ...this.getMouseEventHandlers({
+      return this.$createElement(VBtn, {
+        props: {
+          color,
+          fab: true,
+          depressed: true,
+          small: true,
+        },
+        on: this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
           'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
         }, nativeEvent => ({ nativeEvent, ...day })),
@@ -207,15 +207,15 @@ export default defineComponent({
     genDayMonth (day: CalendarTimestamp): VNode | string {
       const color = day.present ? this.color : undefined
 
-      return h('div', this.setTextColor(color, {
-        class: 'v-calendar-weekly__day-month',
+      return this.$createElement('div', this.setTextColor(color, {
+        staticClass: 'v-calendar-weekly__day-month',
       }), getSlot(this, 'day-month', day) || this.monthFormatter(day, this.shortMonths))
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: this.staticClass,
+      staticClass: this.staticClass,
       class: this.classes,
       on: {
         dragstart: (e: MouseEvent) => {

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

@@ -2,7 +2,7 @@
 import './calendar-with-events.sass'
 
 // Types
-import { VNode, VNodeData, defineComponent } from 'vue'
+import { VNode, VNodeData } from 'vue'
 
 // Directives
 import ripple from '../../../directives/ripple'
@@ -72,11 +72,9 @@ const WIDTH_START = 95
 const MINUTES_IN_DAY = 1440
 
 /* @vue/component */
-export default defineComponent({
+export default CalendarBase.extend({
   name: 'calendar-with-events',
 
-  extends: CalendarBase,
-
   directives: {
     ripple,
   },
@@ -250,7 +248,7 @@ export default defineComponent({
       const scope = { eventParsed: event, day, start, end, timed: false }
 
       return this.genEvent(event, scope, false, {
-        class: 'v-event',
+        staticClass: 'v-event',
         class: {
           'v-event-start': start,
           'v-event-end': end,
@@ -282,7 +280,7 @@ export default defineComponent({
       const scope = { eventParsed: event, day, start, end, timed: true }
 
       return this.genEvent(event, scope, true, {
-        class: 'v-event-timed',
+        staticClass: 'v-event-timed',
         style: {
           top: `${top}px`,
           height: `${height}px`,
@@ -292,7 +290,7 @@ export default defineComponent({
       })
     },
     genEvent (event: CalendarEventParsed, scopeInput: VEventScopeInput, timedEvent: boolean, data: VNodeData): VNode {
-      const slot = this.$slots.event
+      const slot = this.$scopedSlots.event
       const text = this.eventTextColorFunction(event.input)
       const background = this.eventColorFunction(event.input)
       const overlapsNoon = event.start.hour < 12 && event.end.hour >= 12
@@ -304,25 +302,25 @@ export default defineComponent({
         if (event.start.hasTime) {
           if (timedEvent) {
             const time = timeSummary()
-            const delimiter = singline ? ', ' : h('br')
+            const delimiter = singline ? ', ' : this.$createElement('br')
 
-            return h('span', { class: 'v-event-summary' }, [
-              h('strong', [name]),
+            return this.$createElement('span', { staticClass: 'v-event-summary' }, [
+              this.$createElement('strong', [name]),
               delimiter,
               time,
             ])
           } else {
             const time = formatTime(event.start, true)
 
-            return h('span', { class: 'v-event-summary' }, [
-              h('strong', [time]),
+            return this.$createElement('span', { staticClass: 'v-event-summary' }, [
+              this.$createElement('strong', [time]),
               ' ',
               name,
             ])
           }
         }
 
-        return h('span', { class: 'v-event-summary' }, [name])
+        return this.$createElement('span', { staticClass: 'v-event-summary' }, [name])
       }
 
       const scope = {
@@ -336,7 +334,7 @@ export default defineComponent({
         eventSummary,
       }
 
-      return h('div',
+      return this.$createElement('div',
         this.setTextColor(text,
           this.setBackgroundColor(background, {
             on: this.getDefaultMouseEventHandlers(':event', nativeEvent => ({ ...scope, nativeEvent })),
@@ -352,14 +350,14 @@ export default defineComponent({
       )
     },
     genName (eventSummary: () => string | VNode): VNode {
-      return h('div', {
-        class: 'pl-1',
+      return this.$createElement('div', {
+        staticClass: 'pl-1',
       }, [eventSummary()])
     },
     genPlaceholder (day: CalendarTimestamp): VNode {
       const height = this.eventHeight + this.eventMarginBottom
 
-      return h('div', {
+      return this.$createElement('div', {
         style: {
           height: `${height}px`,
         },
@@ -374,8 +372,8 @@ export default defineComponent({
       const eventHeight = this.eventHeight
       const eventMarginBottom = this.eventMarginBottom
 
-      return h('div', {
-        class: 'v-event-more pl-1',
+      return this.$createElement('div', {
+        staticClass: 'v-event-more pl-1',
         class: {
           'v-outside': day.outside,
         },
@@ -443,7 +441,7 @@ export default defineComponent({
     },
     getScopedSlots () {
       if (this.noEvents) {
-        return { ...this.$slots }
+        return { ...this.$scopedSlots }
       }
 
       const mode = this.eventModeFunction(
@@ -477,7 +475,7 @@ export default defineComponent({
         return children
       }
 
-      const slots = this.$slots
+      const slots = this.$scopedSlots
       const slotDay = slots.day
       const slotDayHeader = slots['day-header']
       const slotDayBody = slots['day-body']
@@ -511,8 +509,8 @@ export default defineComponent({
         'day-body': (day: CalendarDayBodySlotScope) => {
           const events = getSlotChildren(day, this.getEventsForDayTimed, this.genTimedEvent, true)
           let children: VNode[] = [
-            h('div', {
-              class: 'v-event-timed-container',
+            this.$createElement('div', {
+              staticClass: 'v-event-timed-container',
             }, events),
           ]
 

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

@@ -15,13 +15,11 @@ import {
   MINUTES_IN_DAY,
 } from '../util/timestamp'
 import { CalendarTimestamp, CalendarFormatter, CalendarDayBodySlotScope } from 'vuetify/types'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default CalendarBase.extend({
   name: 'calendar-with-intervals',
 
-  extends: CalendarBase,
   props: props.intervals,
 
   computed: {

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

@@ -1,4 +1,4 @@
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 
 import {
   validateTimestamp,
@@ -7,7 +7,7 @@ import {
 } from '../util/timestamp'
 import { CalendarTimestamp } from 'vuetify/types'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'times',
 
   props: {