@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

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

@@ -4,26 +4,26 @@ import { parseTimestamp } from '../../util/timestamp'
 import {
   mount,
   VueWrapper,
-  MountingOptions,
+  MountingOptions
 } from '@vue/test-utils'
 import { defineComponent, h } from 'vue'
 
 const Mock = defineComponent({
   ...CalendarWithIntervals,
-  render: () => h('div'),
+  render: () => h('div')
 })
 
 const createMouseEvent = (x, y) => ({
   clientX: x,
   clientY: y,
-  currentTarget: document.body,
+  currentTarget: document.body
 })
 const createTouchEvent = (x, y) => ({
   touches: [{
     clientX: x,
-    clientY: y,
+    clientY: y
   }],
-  currentTarget: document.body,
+  currentTarget: document.body
 })
 
 describe('calendar-with-intervals.ts', () => {
@@ -37,11 +37,11 @@ describe('calendar-with-intervals.ts', () => {
           mocks: {
             $vuetify: {
               lang: {
-                current: 'en-US',
-              },
-            },
-          },
-        },
+                current: 'en-US'
+              }
+            }
+          }
+        }
       })
     }
   })
@@ -52,8 +52,8 @@ describe('calendar-with-intervals.ts', () => {
         firstInterval: '1',
         intervalMinutes: '30',
         intervalCount: '10',
-        intervalHeight: '20',
-      },
+        intervalHeight: '20'
+      }
     })
 
     expect(wrapper.vm.parsedFirstInterval).toBeDefined()
@@ -70,8 +70,8 @@ describe('calendar-with-intervals.ts', () => {
     const wrapper = mountFunction({
       props: {
         firstInterval: '2',
-        intervalMinutes: '30',
-      },
+        intervalMinutes: '30'
+      }
     })
 
     expect(wrapper.vm.firstMinute).toBeDefined()
@@ -82,8 +82,8 @@ describe('calendar-with-intervals.ts', () => {
     const wrapper = mountFunction({
       props: {
         intervalCount: '10',
-        intervalHeight: '20',
-      },
+        intervalHeight: '20'
+      }
     })
 
     expect(wrapper.vm.bodyHeight).toBeDefined()
@@ -94,8 +94,8 @@ describe('calendar-with-intervals.ts', () => {
     const wrapper = mountFunction({
       props: {
         start: '2019-01-29',
-        end: '2019-02-04',
-      },
+        end: '2019-02-04'
+      }
     })
 
     expect(wrapper.vm.days).toBeDefined()
@@ -106,7 +106,7 @@ describe('calendar-with-intervals.ts', () => {
 
     await wrapper.setProps({
       start: '2019-01-29',
-      end: '2019-02-02',
+      end: '2019-02-02'
     })
 
     expect(wrapper.vm.days).toBeDefined()
@@ -120,8 +120,8 @@ describe('calendar-with-intervals.ts', () => {
     const wrapper = mountFunction({
       props: {
         start: '2019-01-29',
-        end: '2019-02-04',
-      },
+        end: '2019-02-04'
+      }
     })
 
     expect(wrapper.vm.intervals).toBeDefined()
@@ -133,7 +133,7 @@ describe('calendar-with-intervals.ts', () => {
 
     await wrapper.setProps({
       start: '2019-01-29',
-      end: '2019-02-02',
+      end: '2019-02-02'
     })
 
     expect(wrapper.vm.intervals).toBeDefined()
@@ -167,8 +167,8 @@ describe('calendar-with-intervals.ts', () => {
     const intervalFormat = x => x
     const wrapper = mountFunction({
       props: {
-        intervalFormat,
-      },
+        intervalFormat
+      }
     })
 
     expect(wrapper.vm.intervalFormatter).toBeDefined()
@@ -204,7 +204,7 @@ describe('calendar-with-intervals.ts', () => {
       firstInterval: 5,
       intervalCount: 5,
       intervalMinutes: 10,
-      bodyHeight: 400,
+      bodyHeight: 400
     })
 
     expect(wrapper.vm.timeToY('08:30')).toBe(240)
@@ -232,7 +232,7 @@ describe('calendar-with-intervals.ts', () => {
       firstInterval: 5,
       intervalCount: 5,
       intervalMinutes: 10,
-      bodyHeight: 400,
+      bodyHeight: 400
     })
 
     expect(wrapper.vm.timeDelta('08:30')).toBe((8 * 60 + 30 - 50) / 50)
@@ -248,8 +248,8 @@ describe('calendar-with-intervals.ts', () => {
     const wrapper = mountFunction({
       props: {
         intervalMinutes: 5,
-        bodyHeight: 200,
-      },
+        bodyHeight: 200
+      }
     })
 
     expect(wrapper.vm.minutesToPixels).toBeDefined()
@@ -262,7 +262,7 @@ describe('calendar-with-intervals.ts', () => {
 
     await wrapper.setProps({
       intervalMinutes: 10,
-      bodyHeight: 400,
+      bodyHeight: 400
     })
 
     expect(wrapper.vm.minutesToPixels(5)).toBe(24)
@@ -274,9 +274,9 @@ describe('calendar-with-intervals.ts', () => {
     const wrapper = mountFunction({
       render: () => h('div', [
         h('div', {
-          ref: 'scrollArea',
-        }),
-      ]),
+          ref: 'scrollArea'
+        })
+      ])
     })
 
     wrapper.vm.scrollToTime('8:30')
@@ -288,7 +288,7 @@ describe('calendar-with-intervals.ts', () => {
 
     await wrapper.setProps({
       intervalMinutes: 5,
-      bodyHeight: 200,
+      bodyHeight: 200
     })
 
     wrapper.vm.scrollToTime('8:30')
@@ -300,7 +300,7 @@ describe('calendar-with-intervals.ts', () => {
 
     await wrapper.setProps({
       intervalMinutes: 30,
-      bodyHeight: 1700,
+      bodyHeight: 1700
     })
 
     wrapper.vm.scrollToTime('8:30')
@@ -346,8 +346,8 @@ describe('calendar-with-intervals.ts', () => {
       props: {
         start: '2019-01-29',
         end: '2019-02-04',
-        firstInterval: 5,
-      },
+        firstInterval: 5
+      }
     })
     expect(typeof wrapper.vm.showIntervalLabelDefault).toBe('function')
     expect(wrapper.vm.showIntervalLabelDefault({})).toBeTruthy()

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

@@ -2,14 +2,14 @@ import Times from '../times'
 import {
   mount,
   VueWrapper,
-  MountingOptions,
+  MountingOptions
 } from '@vue/test-utils'
 import { CalendarTimestamp } from 'vuetify/types'
 import { defineComponent, h } from 'vue'
 
 const Mock = defineComponent({
   ...Times,
-  render: () => h('div'),
+  render: () => h('div')
 })
 
 describe('times.ts', () => {
@@ -24,8 +24,8 @@ describe('times.ts', () => {
   it('should parse timestamp', async () => {
     const wrapper = mountFunction({
       props: {
-        now: '2019-02-08',
-      },
+        now: '2019-02-08'
+      }
     })
 
     expect(wrapper.vm.parsedNow).toBeDefined()
@@ -42,7 +42,7 @@ describe('times.ts', () => {
       year: '2019',
       month: '2',
       day: '8',
-      weekday: '4',
+      weekday: '4'
     }
     wrapper.vm.updateDay(now as unknown as CalendarTimestamp, target as unknown as CalendarTimestamp)
     expect(target).toEqual(now)
@@ -58,7 +58,7 @@ describe('times.ts', () => {
       year: '2019',
       month: '2',
       day: '8',
-      weekday: '4',
+      weekday: '4'
     }
     wrapper.vm.updateDay(now as unknown as CalendarTimestamp, target as unknown as CalendarTimestamp)
     expect(target).not.toEqual(now)
@@ -72,7 +72,7 @@ describe('times.ts', () => {
     const now = {
       time: '08:30',
       hour: '8',
-      minute: '30',
+      minute: '30'
     }
     wrapper.vm.updateTime(now as unknown as CalendarTimestamp, target as unknown as CalendarTimestamp)
     expect(target).not.toEqual(now)

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

@@ -19,14 +19,13 @@ import {
   createNativeLocaleFormatter,
   getStartOfWeek,
   getEndOfWeek,
-  getTimestampIdentifier,
+  getTimestampIdentifier
 } from '../util/timestamp'
 import { CalendarTimestamp, CalendarFormatter } from 'vuetify/types'
 
 export default defineComponent({
   name: 'calendar-base',
 
-
   extends: Times,
 
   mixins: [Colorable, Localable, Mouse, Themeable],
@@ -90,7 +89,7 @@ export default defineComponent({
         this.currentLocale,
         (_tms, short) => short ? shortOptions : longOptions
       )
-    },
+    }
   },
 
   methods: {
@@ -99,7 +98,7 @@ export default defineComponent({
         'v-present': timestamp.present,
         'v-past': timestamp.past,
         'v-future': timestamp.future,
-        'v-outside': outside,
+        'v-outside': outside
       }
     },
     getStartOfWeek (timestamp: CalendarTimestamp): CalendarTimestamp {
@@ -113,6 +112,6 @@ export default defineComponent({
         this.locale,
         (_tms, _short) => options
       )
-    },
-  },
+    }
+  }
 })

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

@@ -2,7 +2,8 @@
 import './calendar-with-events.sass'
 
 // Types
-import { VNode, VNodeData, defineComponent, h, withDirectives } from 'vue'
+import { VNode, defineComponent, h, withDirectives } from 'vue'
+import type { VNodeData } from '../../../types/vue-internal'
 
 // Directives
 import ripple from '../../../directives/ripple'
@@ -13,17 +14,17 @@ import CalendarBase from './calendar-base'
 // Util
 import props from '../util/props'
 import {
-  CalendarEventOverlapModes,
+  CalendarEventOverlapModes
 } from '../modes'
 import {
-  getDayIdentifier, diffMinutes,
+  getDayIdentifier, diffMinutes
 } from '../util/timestamp'
 import {
   parseEvent,
   isEventStart,
   isEventOn,
   isEventOverlapping,
-  isEventHiddenOn,
+  isEventHiddenOn
 } from '../util/events'
 import {
   CalendarTimestamp,
@@ -37,7 +38,7 @@ import {
   CalendarEventOverlapMode,
   CalendarEvent,
   CalendarEventCategoryFunction,
-  CalendarCategory,
+  CalendarCategory
 } from 'vuetify/types'
 
 // Types
@@ -75,13 +76,12 @@ const MINUTES_IN_DAY = 1440
 export default defineComponent({
   name: 'calendar-with-events',
 
-
   extends: CalendarBase,
 
   props: {
     ...props.events,
     ...props.calendar,
-    ...props.category,
+    ...props.category
   },
 
   computed: {
@@ -124,7 +124,7 @@ export default defineComponent({
     },
     categoryMode (): boolean {
       return this.type === 'category'
-    },
+    }
   },
 
   methods: {
@@ -140,14 +140,14 @@ export default defineComponent({
         this.eventStart,
         this.eventEnd,
         this.eventTimedFunction(input),
-        this.categoryMode ? this.eventCategoryFunction(input) : false,
+        this.categoryMode ? this.eventCategoryFunction(input) : false
       )
     },
     formatTime (withTime: CalendarTimestamp, ampm: boolean): string {
       const formatter = this.getFormatter({
         timeZone: 'UTC',
         hour: 'numeric',
-        minute: withTime.minute > 0 ? 'numeric' : undefined,
+        minute: withTime.minute > 0 ? 'numeric' : undefined
       })
 
       return formatter(withTime, true)
@@ -170,7 +170,7 @@ export default defineComponent({
         const last = events.length - 1
         const eventsSorted = events.map(event => ({
           event,
-          bottom: event.getBoundingClientRect().bottom,
+          bottom: event.getBoundingClientRect().bottom
         })).sort((a, b) => a.bottom - b.bottom)
         let hidden = 0
 
@@ -209,7 +209,7 @@ export default defineComponent({
             eventsMap[date] = {
               parent: el.parentElement,
               more: null,
-              events: [],
+              events: []
             }
           }
           if (el.getAttribute('data-more')) {
@@ -249,20 +249,26 @@ export default defineComponent({
       return this.genEvent(event, scope, false, {
         class: ['v-event', {
           'v-event-start': start,
-          'v-event-end': end,
+          'v-event-end': end
         }],
         style: {
           height: `${eventHeight}px`,
           width: `${width}%`,
-          'margin-bottom': `${eventMarginBottom}px`,
+          'margin-bottom': `${eventMarginBottom}px`
         },
         'data-date': day.date,
         key: event.index,
-        ref: 'events',
+        ref: 'events'
       })
     },
     genTimedEvent ({ event, left, width }: CalendarEventVisual, day: CalendarDayBodySlotScope): VNode | false {
-      if (day.timeDelta(event.end) < 0 || day.timeDelta(event.start) >= 1 || isEventHiddenOn(event, day)) {
+      const endDelta = day.timeDelta(event.end)
+      const startDelta = day.timeDelta(event.start)
+      if (
+        (typeof endDelta === 'number' && endDelta < 0) ||
+        (typeof startDelta === 'number' && startDelta >= 1) ||
+        isEventHiddenOn(event, day)
+      ) {
         return false
       }
 
@@ -280,8 +286,8 @@ export default defineComponent({
           top: `${top}px`,
           height: `${height}px`,
           left: `${left}%`,
-          width: `${width}%`,
-        },
+          width: `${width}%`
+        }
       })
     },
     genEvent (event: CalendarEventParsed, scopeInput: VEventScopeInput, timedEvent: boolean, data: VNodeData): VNode {
@@ -302,7 +308,7 @@ export default defineComponent({
             return h('span', { class: 'v-event-summary' }, [
               h('strong', [name]),
               delimiter,
-              time,
+              time
             ])
           } else {
             const time = formatTime(event.start, true)
@@ -310,7 +316,7 @@ export default defineComponent({
             return h('span', { class: 'v-event-summary' }, [
               h('strong', [time]),
               ' ',
-              name,
+              name
             ])
           }
         }
@@ -326,25 +332,25 @@ export default defineComponent({
         overlapsNoon,
         formatTime,
         timeSummary,
-        eventSummary,
+        eventSummary
       }
 
       return withDirectives(h('div',
         this.setTextColor(text,
           this.setBackgroundColor(background, {
             ...this.getDefaultMouseEventHandlers(':event', nativeEvent => ({ ...scope, nativeEvent })),
-            ...data,
+            ...data
           })
         ), slot
           ? slot(scope)
           : [this.genName(eventSummary)]
       ), [
-        [ripple, this.eventRipple ?? true],
+        [ripple, this.eventRipple ?? true]
       ])
     },
     genName (eventSummary: () => string | VNode): VNode {
       return h('div', {
-        class: 'pl-1',
+        class: 'pl-1'
       }, [eventSummary()])
     },
     genPlaceholder (day: CalendarTimestamp): VNode {
@@ -352,10 +358,10 @@ export default defineComponent({
 
       return h('div', {
         style: {
-          height: `${height}px`,
+          height: `${height}px`
         },
         'data-date': day.date,
-        ref: 'events',
+        ref: 'events'
       })
     },
     genMore (day: CalendarDaySlotScope): VNode {
@@ -364,7 +370,7 @@ export default defineComponent({
 
       return withDirectives(h('div', {
         class: ['v-event-more pl-1', {
-          'v-outside': day.outside,
+          'v-outside': day.outside
         }],
         'data-date': day.date,
         'data-more': 1,
@@ -374,11 +380,11 @@ export default defineComponent({
         style: {
           display: 'none',
           height: `${eventHeight}px`,
-          'margin-bottom': `${eventMarginBottom}px`,
+          'margin-bottom': `${eventMarginBottom}px`
         },
-        ref: 'events',
+        ref: 'events'
       }), [
-        [ripple, this.eventRipple ?? true],
+        [ripple, this.eventRipple ?? true]
       ])
     },
     getVisibleEvents (): CalendarEventParsed[] {
@@ -493,8 +499,8 @@ export default defineComponent({
           const events = getSlotChildren(day, this.getEventsForDayTimed, this.genTimedEvent, true)
           let children: VNode[] = [
             h('div', {
-              class: 'v-event-timed-container',
-            }, events),
+              class: 'v-event-timed-container'
+            }, events)
           ]
 
           if (slotDayBody) {
@@ -504,8 +510,8 @@ export default defineComponent({
             }
           }
           return children
-        },
+        }
       }
-    },
-  },
+    }
+  }
 })

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

@@ -13,7 +13,7 @@ import {
   createIntervalList,
   createNativeLocaleFormatter,
   VTime,
-  MINUTES_IN_DAY,
+  MINUTES_IN_DAY
 } from '../util/timestamp'
 import { CalendarTimestamp, CalendarFormatter, CalendarDayBodySlotScope } from 'vuetify/types'
 
@@ -81,7 +81,7 @@ export default defineComponent({
         this.currentLocale,
         (tms, short) => short ? (tms.minute === 0 ? shortHourOptions : shortOptions) : longOptions
       )
-    },
+    }
   },
 
   methods: {
@@ -159,6 +159,6 @@ export default defineComponent({
       const gap: number = this.parsedIntervalCount * this.parsedIntervalMinutes
 
       return (minutes - min) / gap
-    },
-  },
+    }
+  }
 })

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

@@ -3,7 +3,7 @@ import { defineComponent } from 'vue'
 import {
   validateTimestamp,
   parseTimestamp,
-  parseDate,
+  parseDate
 } from '../util/timestamp'
 import { CalendarTimestamp } from 'vuetify/types'
 
@@ -13,25 +13,25 @@ export default defineComponent({
   props: {
     now: {
       type: String,
-      validator: validateTimestamp,
-    },
+      validator: validateTimestamp
+    }
   },
 
   data: () => ({
     times: {
       now: parseTimestamp('0000-00-00 00:00', true),
-      today: parseTimestamp('0000-00-00', true),
-    },
+      today: parseTimestamp('0000-00-00', true)
+    }
   }),
 
   computed: {
     parsedNow (): CalendarTimestamp | null {
       return this.now ? parseTimestamp(this.now, true) : null
-    },
+    }
   },
 
   watch: {
-    parsedNow: 'updateTimes',
+    parsedNow: 'updateTimes'
   },
 
   created () {
@@ -69,6 +69,6 @@ export default defineComponent({
         target.minute = now.minute
         target.time = now.time
       }
-    },
-  },
+    }
+  }
 })

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

@@ -1,6 +1,6 @@
 import { parseEvent } from '../../util/events'
 import {
-  getVisuals, hasOverlap,
+  getVisuals, hasOverlap
 } from '../common'
 
 describe('common.ts', () => {
@@ -8,47 +8,47 @@ describe('common.ts', () => {
     expect(getVisuals([])).toEqual([])
     expect(parseEvent({
       start: '2019-02-13',
-      end: '2019-02-14',
+      end: '2019-02-14'
     }, 0, 'start', 'end')).toMatchSnapshot()
     expect(parseEvent({
       a: '2019-02-13',
-      b: '2019-02-14',
+      b: '2019-02-14'
     }, 0, 'a', 'b')).toMatchSnapshot()
     expect(parseEvent({
       start: '2019-02-13',
-      end: '2019-02-14',
+      end: '2019-02-14'
     }, 1, 'start', 'end')).toMatchSnapshot()
     expect(parseEvent({
       a: '2019-02-13',
-      b: '2019-02-14',
+      b: '2019-02-14'
     }, 1, 'a', 'b')).toMatchSnapshot()
   })
   it('should get visuals 2', () => {
     const p0 = parseEvent({
       start: '2019-02-13',
-      end: '2019-02-14',
+      end: '2019-02-14'
     }, 0, 'start', 'end')
     const p1 = parseEvent({
       start: '2019-02-13',
-      end: '2019-02-15',
+      end: '2019-02-15'
     }, 0, 'start', 'end')
     const p2 = parseEvent({
       start: '2019-02-13 08:00',
-      end: '2019-02-13 09:00',
+      end: '2019-02-13 09:00'
     }, 0, 'start', 'end')
     const p3 = parseEvent({
       start: '2019-02-13 07:30',
-      end: '2019-02-13 08:30',
+      end: '2019-02-13 08:30'
     }, 0, 'start', 'end')
     const p4 = parseEvent({
       start: '2019-02-13 08:00',
-      end: '2019-02-13 10:00',
+      end: '2019-02-13 10:00'
     }, 0, 'start', 'end')
     const visualDefaults = {
       columnCount: 0,
       column: 0,
       left: 0,
-      width: 100,
+      width: 100
     }
 
     expect(getVisuals([p0, p1, p2, p3, p4])).toEqual([
@@ -56,7 +56,7 @@ describe('common.ts', () => {
       { event: p0, ...visualDefaults },
       { event: p3, ...visualDefaults },
       { event: p4, ...visualDefaults },
-      { event: p2, ...visualDefaults },
+      { event: p2, ...visualDefaults }
     ])
   })
   it('should overlap', () => {