@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VCalendar/VCalendar.ts

@@ -27,7 +27,7 @@ import {
   getEndOfMonth,
   VTime,
   VTimestampInput,
-  timestampToDate,
+  timestampToDate
 } from './util/timestamp'
 
 // Calendars
@@ -52,21 +52,20 @@ interface VCalendarRenderProps {
 export default defineComponent({
   name: 'v-calendar',
 
-
   extends: CalendarWithEvents,
 
   props: {
     ...props.calendar,
     ...props.weeks,
     ...props.intervals,
-    ...props.category,
+    ...props.category
   },
 
   emits: ['change', 'update:modelValue', 'moved', 'click:date'],
 
   data: () => ({
     lastStart: null as CalendarTimestamp | null,
-    lastEnd: null as CalendarTimestamp | null,
+    lastEnd: null as CalendarTimestamp | null
   }),
 
   computed: {
@@ -112,7 +111,7 @@ export default defineComponent({
             start.weekday,
             (start.weekday + 1) % 7,
             (start.weekday + 2) % 7,
-            (start.weekday + 3) % 7,
+            (start.weekday + 3) % 7
           ]
           break
         case 'custom-weekly':
@@ -169,21 +168,21 @@ export default defineComponent({
     },
     monthLongFormatter (): CalendarFormatter {
       return this.getFormatter({
-        timeZone: 'UTC', month: 'long',
+        timeZone: 'UTC', month: 'long'
       })
     },
     monthShortFormatter (): CalendarFormatter {
       return this.getFormatter({
-        timeZone: 'UTC', month: 'short',
+        timeZone: 'UTC', month: 'short'
       })
     },
     parsedCategories (): CalendarCategory[] {
       return getParsedCategories(this.categories, this.categoryText)
-    },
+    }
   },
 
   watch: {
-    renderProps: 'checkChange',
+    renderProps: 'checkChange'
   },
 
   mounted () {
@@ -324,7 +323,7 @@ export default defineComponent({
             } else if (!this.categoryHideDynamic) {
               categoryMap[category] = {
                 index: categoryLength++,
-                count: 1,
+                count: 1
               }
             }
           })
@@ -348,7 +347,7 @@ export default defineComponent({
         })
       }
       return categories
-    },
+    }
   },
 
   render (): VNode {
@@ -358,7 +357,7 @@ export default defineComponent({
     const props: any = {
       ref: 'calendarChild',
       class: ['v-calendar', {
-        'v-calendar-events': !this.noEvents,
+        'v-calendar-events': !this.noEvents
       }],
       start: start.date,
       end: end.date,
@@ -368,7 +367,7 @@ export default defineComponent({
       'onClick:date': (day: CalendarTimestamp, e?: MouseEvent) => {
         this.$emit('update:modelValue', day.date)
         this.$emit('click:date', day, e)
-      },
+      }
     }
 
     // Only add categories prop for VCalendarCategory component
@@ -377,7 +376,7 @@ export default defineComponent({
     }
 
     return withDirectives(h(component, props, this.getScopedSlots()), [
-      [Resize, this.updateEventVisibility, '', { quiet: true }],
+      [Resize, this.updateEventVisibility, '', { quiet: true }]
     ])
-  },
+  }
 })

package/src/components/VCalendar/VCalendarCategory.ts

@@ -27,20 +27,20 @@ export default defineComponent({
       return {
         'v-calendar-daily': true,
         'v-calendar-category': true,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
     parsedCategories (): CalendarCategory[] {
       return getParsedCategories(this.categories, this.categoryText)
-    },
+    }
   },
   methods: {
     genDayHeader (day: CalendarTimestamp, index: number): VNode[] {
       const data = {
-        class: 'v-calendar-category__columns',
+        class: 'v-calendar-category__columns'
       }
       const scope = {
-        week: this.days, ...day, index,
+        week: this.days, ...day, index
       }
 
       const children = this.parsedCategories.map(category => {
@@ -51,10 +51,12 @@ export default defineComponent({
     },
     getCategoryScope (scope: any, category: CalendarCategory) {
       const cat = typeof category === 'object' && category &&
-          category.categoryName === this.categoryForInvalid ? null : category
+          category.categoryName === this.categoryForInvalid
+        ? null
+        : category
       return {
         ...scope,
-        category: cat,
+        category: cat
       }
     },
     genDayHeaderCategory (day: CalendarTimestamp, scope: any): VNode {
@@ -63,15 +65,15 @@ export default defineComponent({
         class: 'v-calendar-category__column-header',
         ...this.getDefaultMouseEventHandlers(':day-category', e => {
           return this.getCategoryScope(this.getSlotScope(day), scope.category)
-        }),
+        })
       }, [
         getSlot(this, 'category', scope) || this.genDayHeaderCategoryTitle(headerTitle),
-        getSlot(this, 'day-header', scope),
+        getSlot(this, 'day-header', scope)
       ])
     },
     genDayHeaderCategoryTitle (categoryName: string | null) {
       return h('div', {
-        class: 'v-calendar-category__category',
+        class: 'v-calendar-category__category'
       }, categoryName === null ? this.categoryForInvalid : categoryName)
     },
     genDays (): VNode[] {
@@ -90,10 +92,10 @@ export default defineComponent({
         class: ['v-calendar-daily__day', this.getRelativeClasses(day)],
         ...this.getDefaultMouseEventHandlers(':time', e => {
           return this.getSlotScope(this.getTimestampAtEvent(e, day))
-        }),
+        })
       }, [
         ...this.genDayIntervals(index, category),
-        ...this.genDayBody(day, category),
+        ...this.genDayBody(day, category)
       ])
     },
     genDayIntervals (index: number, category: CalendarCategory): VNode[] {
@@ -108,8 +110,8 @@ export default defineComponent({
         class: 'v-calendar-daily__day-interval',
         style: {
           height,
-          ...styler({ ...interval, category }),
-        },
+          ...styler({ ...interval, category })
+        }
       }
 
       const children = getSlot(this, 'interval',
@@ -120,7 +122,7 @@ export default defineComponent({
     },
     genDayBody (day: CalendarTimestamp, category: CalendarCategory): VNode[] {
       const data = {
-        class: 'v-calendar-category__columns',
+        class: 'v-calendar-category__columns'
       }
 
       const children = [this.genDayBodyCategory(day, category)]
@@ -132,12 +134,12 @@ export default defineComponent({
         class: 'v-calendar-category__column',
         ...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))
 
       return h('div', data, children)
-    },
-  },
+    }
+  }
 })

package/src/components/VCalendar/VCalendarDaily.ts

@@ -19,20 +19,19 @@ import { CalendarTimestamp } from 'vuetify/types'
 export default defineComponent({
   name: 'v-calendar-daily',
 
-
   extends: CalendarWithIntervals,
 
   data: () => ({
-    scrollPush: 0,
+    scrollPush: 0
   }),
 
   computed: {
     classes (): object {
       return {
         'v-calendar-daily': true,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
-    },
+    }
   },
 
   mounted () {
@@ -56,11 +55,11 @@ export default defineComponent({
       return h('div', {
         class: 'v-calendar-daily__head',
         style: {
-          marginRight: this.scrollPush + 'px',
-        },
+          marginRight: this.scrollPush + 'px'
+        }
       }, [
         this.genHeadIntervals(),
-        ...this.genHeadDays(),
+        ...this.genHeadDays()
       ])
     },
     genHeadIntervals (): VNode {
@@ -69,8 +68,8 @@ export default defineComponent({
       return h('div', {
         class: 'v-calendar-daily__intervals-head',
         style: {
-          width,
-        },
+          width
+        }
       }, getSlot(this, 'interval-header'))
     },
     genHeadDays (): VNode[] {
@@ -82,28 +81,30 @@ export default defineComponent({
         class: ['v-calendar-daily_head-day', this.getRelativeClasses(day)],
         ...this.getDefaultMouseEventHandlers(':day', nativeEvent => {
           return { nativeEvent, ...this.getSlotScope(day) }
-        }),
+        })
       }, [
         this.genHeadWeekday(day),
         this.genHeadDayLabel(day),
-        ...this.genDayHeader(day, index),
+        ...this.genDayHeader(day, index)
       ])
     },
     genDayHeader (day: CalendarTimestamp, index: number): VNode[] {
-      return getSlot(this, 'day-header', {
-        week: this.days, ...day, index,
-      }) || []
+      const slot = getSlot(this, 'day-header', {
+        week: this.days, ...day, index
+      })
+      if (slot == null) return []
+      return (Array.isArray(slot) ? slot : [slot]) as VNode[]
     },
     genHeadWeekday (day: CalendarTimestamp): VNode {
       const color = day.present ? this.color : undefined
 
       return h('div', this.setTextColor(color, {
-        class: 'v-calendar-daily_head-weekday',
+        class: 'v-calendar-daily_head-weekday'
       }), this.weekdayFormatter(day, this.shortWeekdays))
     },
     genHeadDayLabel (day: CalendarTimestamp): VNode {
       return h('div', {
-        class: 'v-calendar-daily_head-day-label',
+        class: 'v-calendar-daily_head-day-label'
       }, getSlot(this, 'day-label-header', day) || [this.genHeadDayButton(day)])
     },
     genHeadDayButton (day: CalendarTimestamp): VNode {
@@ -115,25 +116,25 @@ export default defineComponent({
         depressed: true,
         ...this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
-          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
+          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false }
         }, nativeEvent => {
           return { nativeEvent, ...day }
-        }),
+        })
       }, { default: () => this.dayFormatter(day, false) })
     },
     genBody (): VNode {
       return h('div', {
-        class: 'v-calendar-daily__body',
+        class: 'v-calendar-daily__body'
       }, [
-        this.genScrollArea(),
+        this.genScrollArea()
       ])
     },
     genScrollArea (): VNode {
       return h('div', {
         ref: 'scrollArea',
-        class: 'v-calendar-daily__scroll-area',
+        class: 'v-calendar-daily__scroll-area'
       }, [
-        this.genPane(),
+        this.genPane()
       ])
     },
     genPane (): VNode {
@@ -141,18 +142,18 @@ export default defineComponent({
         ref: 'pane',
         class: 'v-calendar-daily__pane',
         style: {
-          height: convertToUnit(this.bodyHeight),
-        },
+          height: convertToUnit(this.bodyHeight)
+        }
       }, [
-        this.genDayContainer(),
+        this.genDayContainer()
       ])
     },
     genDayContainer (): VNode {
       return h('div', {
-        class: 'v-calendar-daily__day-container',
+        class: 'v-calendar-daily__day-container'
       }, [
         this.genBodyIntervals(),
-        ...this.genDays(),
+        ...this.genDays()
       ])
     },
     genDays (): VNode[] {
@@ -164,14 +165,16 @@ export default defineComponent({
         class: ['v-calendar-daily__day', this.getRelativeClasses(day)],
         ...this.getDefaultMouseEventHandlers(':time', nativeEvent => {
           return { nativeEvent, ...this.getSlotScope(this.getTimestampAtEvent(nativeEvent, day)) }
-        }),
+        })
       }, [
         ...this.genDayIntervals(index),
-        ...this.genDayBody(day),
+        ...this.genDayBody(day)
       ])
     },
     genDayBody (day: CalendarTimestamp): VNode[] {
-      return getSlot(this, 'day-body', this.getSlotScope(day)) || []
+      const slot = getSlot(this, 'day-body', this.getSlotScope(day))
+      if (slot == null) return []
+      return (Array.isArray(slot) ? slot : [slot]) as VNode[]
     },
     genDayIntervals (index: number): VNode[] {
       return this.intervals[index].map(this.genDayInterval)
@@ -185,8 +188,8 @@ export default defineComponent({
         class: 'v-calendar-daily__day-interval',
         style: {
           height,
-          ...styler(interval),
-        },
+          ...styler(interval)
+        }
 
       }
 
@@ -199,11 +202,11 @@ export default defineComponent({
       const data = {
         class: 'v-calendar-daily__intervals-body',
         style: {
-          width,
+          width
         },
         ...this.getDefaultMouseEventHandlers(':interval', nativeEvent => {
           return { nativeEvent, ...this.getTimestampAtEvent(nativeEvent, this.parsedStart) }
-        }),
+        })
       }
 
       return h('div', data, this.genIntervalLabels())
@@ -224,14 +227,14 @@ export default defineComponent({
         key: interval.time,
         class: 'v-calendar-daily__interval',
         style: {
-          height,
-        },
+          height
+        }
       }, [
         h('div', {
-          class: 'v-calendar-daily__interval-text',
-        }, label),
+          class: 'v-calendar-daily__interval-text'
+        }, label)
       ])
-    },
+    }
   },
 
   render (): VNode {
@@ -239,12 +242,12 @@ export default defineComponent({
       class: this.classes,
       onDragstart: (e: MouseEvent) => {
         e.preventDefault()
-      },
+      }
     }, [
       !this.hideHeader ? this.genHead() : '',
-      this.genBody(),
+      this.genBody()
     ]), [
-      [Resize, this.onResize, '', { quiet: true }],
+      [Resize, this.onResize, '', { quiet: true }]
     ])
-  },
+  }
 })

package/src/components/VCalendar/VCalendarMonthly.ts

@@ -24,7 +24,7 @@ export default defineComponent({
     },
     parsedEnd (): CalendarTimestamp {
       return getEndOfMonth(parseTimestamp(this.end, true))
-    },
-  },
+    }
+  }
 
 })

package/src/components/VCalendar/VCalendarWeekly.ts

@@ -19,7 +19,7 @@ import {
   createDayList,
   getDayIdentifier,
   createNativeLocaleFormatter,
-  validateTimestamp,
+  validateTimestamp
 } from './util/timestamp'
 import { CalendarTimestamp, CalendarFormatter } from 'vuetify/types'
 
@@ -32,8 +32,8 @@ export default defineComponent({
     ...props.weeks,
     now: {
       type: String,
-      validator: validateTimestamp,
-    },
+      validator: validateTimestamp
+    }
   },
 
   computed: {
@@ -86,7 +86,7 @@ export default defineComponent({
         this.currentLocale,
         (_tms, short) => short ? shortOptions : longOptions
       )
-    },
+    }
   },
 
   methods: {
@@ -99,7 +99,7 @@ export default defineComponent({
     genHead (): VNode {
       return h('div', {
         class: 'v-calendar-weekly__head',
-        role: 'row',
+        role: 'row'
       }, this.genHeadDays())
     },
     genHeadDays (): VNode[] {
@@ -107,7 +107,7 @@ export default defineComponent({
 
       if (this.showWeek) {
         header.unshift(h('div', {
-          class: 'v-calendar-weekly__head-weeknumber',
+          class: 'v-calendar-weekly__head-weeknumber'
         }))
       }
 
@@ -120,7 +120,7 @@ export default defineComponent({
       return h('div', this.setTextColor(color, {
         key: day.date,
         class: ['v-calendar-weekly__head-weekday', this.getRelativeClasses(day, outside)],
-        role: 'columnheader',
+        role: 'columnheader'
       }), this.weekdayFormatter(day, this.shortWeekdays))
     },
     genWeeks (): VNode[] {
@@ -144,7 +144,7 @@ export default defineComponent({
       return h('div', {
         key: week[0].date,
         class: 'v-calendar-weekly__week',
-        role: 'row',
+        role: 'row'
       }, weekNodes)
     },
     getWeekNumber (determineDay: CalendarTimestamp) {
@@ -158,9 +158,9 @@ export default defineComponent({
     },
     genWeekNumber (weekNumber: number) {
       return h('div', {
-        class: 'v-calendar-weekly__weeknumber',
+        class: 'v-calendar-weekly__weeknumber'
       }, [
-        h('small', String(weekNumber)),
+        h('small', String(weekNumber))
       ])
     },
     genDay (day: CalendarTimestamp, index: number, week: CalendarTimestamp[]): VNode {
@@ -172,15 +172,19 @@ export default defineComponent({
         role: 'cell',
         ...this.getDefaultMouseEventHandlers(':day', nativeEvent => {
           return { nativeEvent, ...day }
-        }),
+        })
       }, [
         this.genDayLabel(day),
-        ...(getSlot(this, 'day', { outside, index, week, ...day }) || []),
+        ...(() => {
+          const slot = getSlot(this, 'day', { outside, index, week, ...day })
+          if (slot == null) return []
+          return (Array.isArray(slot) ? slot : [slot]) as VNode[]
+        })()
       ])
     },
     genDayLabel (day: CalendarTimestamp): VNode {
       return h('div', {
-        class: 'v-calendar-weekly__day-label',
+        class: 'v-calendar-weekly__day-label'
       }, getSlot(this, 'day-label', day) || [this.genDayLabelButton(day)])
     },
     genDayLabelButton (day: CalendarTimestamp): VNode {
@@ -194,8 +198,8 @@ export default defineComponent({
         small: true,
         ...this.getMouseEventHandlers({
           'click:date': { event: 'click', stop: true },
-          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-        }, nativeEvent => ({ nativeEvent, ...day })),
+          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false }
+        }, nativeEvent => ({ nativeEvent, ...day }))
       }, {
         default: () => hasMonth
           ? this.monthFormatter(day, this.shortMonths) + ' ' + this.dayFormatter(day, false)
@@ -206,9 +210,9 @@ export default defineComponent({
       const color = day.present ? this.color : undefined
 
       return h('div', this.setTextColor(color, {
-        class: 'v-calendar-weekly__day-month',
+        class: 'v-calendar-weekly__day-month'
       }), getSlot(this, 'day-month', day) || this.monthFormatter(day, this.shortMonths))
-    },
+    }
   },
 
   render (): VNode {
@@ -216,10 +220,10 @@ export default defineComponent({
       class: [this.staticClass, this.classes],
       onDragstart: (e: MouseEvent) => {
         e.preventDefault()
-      },
+      }
     }, [
       !this.hideHeader ? this.genHead() : '',
-      ...this.genWeeks(),
+      ...this.genWeeks()
     ])
-  },
+  }
 })

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

@@ -3,7 +3,7 @@ import VCalendar from '../VCalendar'
 import {
   mount,
   VueWrapper,
-  MountingOptions,
+  MountingOptions
 } from '@vue/test-utils'
 
 describe('VCalendar', () => {
@@ -16,12 +16,12 @@ describe('VCalendar', () => {
           mocks: {
             $vuetify: {
               lang: {
-                current: 'en-US',
-              },
-            },
-          },
+                current: 'en-US'
+              }
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -32,8 +32,8 @@ describe('VCalendar', () => {
         type: 'day',
         start: '2018-01-29',
         end: '2018-02-04',
-        now: '2019-02-17',
-      },
+        now: '2019-02-17'
+      }
     })
 
     expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
@@ -46,8 +46,8 @@ describe('VCalendar', () => {
         type: '4day',
         start: '2018-01-29',
         end: '2018-02-04',
-        now: '2019-02-17',
-      },
+        now: '2019-02-17'
+      }
     })
 
     expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
@@ -60,8 +60,8 @@ describe('VCalendar', () => {
         type: 'week',
         start: '2018-01-29',
         end: '2018-02-04',
-        now: '2019-02-17',
-      },
+        now: '2019-02-17'
+      }
     })
 
     expect(wrapper.classes('v-calendar-daily')).toBeTruthy()
@@ -74,8 +74,8 @@ describe('VCalendar', () => {
         type: 'month',
         start: '2018-01-29',
         end: '2018-02-04',
-        now: '2019-02-17',
-      },
+        now: '2019-02-17'
+      }
     })
 
     expect(wrapper.classes('v-calendar-monthly')).toBeTruthy()
@@ -87,8 +87,8 @@ describe('VCalendar', () => {
       props: {
         value: '2019-02-02',
         start: '2019-01-29',
-        end: '2019-02-04',
-      },
+        end: '2019-02-04'
+      }
     })
 
     expect(wrapper.vm.parsedValue.date).toBe('2019-02-02')
@@ -98,8 +98,8 @@ describe('VCalendar', () => {
     const wrapper = mountFunction({
       props: {
         start: '2019-01-29',
-        end: '2019-02-04',
-      },
+        end: '2019-02-04'
+      }
     })
 
     expect(wrapper.vm.parsedValue.date).toBe('2019-01-29')
@@ -110,8 +110,8 @@ describe('VCalendar', () => {
       props: {
         value: '2019-01-11',
         type: 'day',
-        weekdays: [1, 2, 3, 4, 5],
-      },
+        weekdays: [1, 2, 3, 4, 5]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()