@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha28

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

@@ -10,6 +10,7 @@ import {
   mount,
   Wrapper,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 // Types
 import { ExtractVue } from '../../../util/mixins'
@@ -22,16 +23,21 @@ describe('VBanner.ts', () => {
     mountFunction = (options = {}) => {
       return mount(VBanner, {
         ...options,
-        mocks: {
-          $vuetify: {
-            application: {
-              top: 0,
-              bar: 0,
-            },
-            breakpoint: {
-              mobile: true,
-              mobileBreakpoint: 1264,
-              width: 1000,
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                top: 0,
+                bar: 0,
+              },
+              breakpoint: {
+                mobile: true,
+                mobileBreakpoint: 1264,
+                width: 1000,
+              },
+              icons: {
+                component: null,
+              },
             },
           },
         },
@@ -67,7 +73,7 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      propsData: {
+      props: {
         icon: 'mdi-plus',
       },
     })
@@ -79,7 +85,7 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        icon: { render: h => h('span', ['icon']) },
+        icon: () => h('span', ['icon']),
       },
     })
 
@@ -90,7 +96,7 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        actions: { render: h => h('div', [h('button', ['OK']), h('button', ['Cancel'])]) },
+        actions: () => h('div', [h('button', ['OK']), h('button', ['Cancel'])]),
       },
     })
 
@@ -102,19 +108,16 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      propsData: {
+      props: {
         icon: 'mdi-plus',
       },
     })
 
-    const fn = jest.fn()
-    wrapper.vm.$on('click:icon', fn)
-
     const icon = wrapper.find('.v-banner__icon')
 
-    expect(fn).not.toHaveBeenCalled()
+    expect(wrapper.emitted('click:icon')).toBeFalsy()
     icon.trigger('click')
-    expect(fn).toHaveBeenCalled()
+    expect(wrapper.emitted('click:icon')).toBeTruthy()
   })
 
   it(`should not render icon container if icon property and slot aren't passed`, () => {
@@ -167,16 +170,10 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-      },
-      scopedSlots: {
-        actions (props) {
-          return h('div', {
-            on: {
-              click: props.dismiss,
-            },
-            class: 'test',
-          })
-        },
+        actions: ({ dismiss }) => h('div', {
+          onClick: dismiss,
+          class: 'test',
+        }),
       },
     })
 
@@ -191,9 +188,11 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
       },
-      mocks: {
-        $vuetify: {
-          breakpoint: new Breakpoint(preset),
+      global: {
+        mocks: {
+          $vuetify: {
+            breakpoint: new Breakpoint(preset),
+          },
         },
       },
     })
@@ -201,16 +200,16 @@ describe('VBanner.ts', () => {
     expect(wrapper.classes('v-banner--is-mobile')).toBeTruthy()
   })
 
-  it('should apply sticky when using the app prop', () => {
+  it('should apply sticky when using the app prop', async () => {
     const wrapper = mountFunction({
-      propsData: { app: true },
+      props: { app: true },
     })
 
     expect(wrapper.vm.isSticky).toBe(true)
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       app: false,
       sticky: true,
     })
@@ -219,7 +218,7 @@ describe('VBanner.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ sticky: false })
+    await wrapper.setProps({ app: false, sticky: false })
 
     expect(wrapper.vm.isSticky).toBe(false)
 

package/src/components/VBanner/__tests__/__snapshots__/VBanner.spec.ts.snap

@@ -114,7 +114,7 @@ exports[`VBanner.ts should render component with icon slot 1`] = `
 `;
 
 exports[`VBanner.ts should render sinle-line component with content 1`] = `
-<div class="v-banner v-sheet theme--light v-banner--is-mobile">
+<div class="v-banner v-sheet theme--light v-banner--is-mobile v-banner--single-line">
   <div class="v-banner__wrapper">
     <div class="v-banner__content">
       <div class="v-banner__text">

package/src/components/VBottomNavigation/VBottomNavigation.ts

@@ -23,11 +23,11 @@ import { VNode } from 'vue'
 export default mixins(
   Applicationable('bottom', [
     'height',
-    'inputValue',
+    'modelValue',
   ]),
   Colorable,
   Measurable,
-  ToggleableFactory('inputValue'),
+  ToggleableFactory(),
   Proxyable,
   Scrollable,
   Themeable
@@ -48,7 +48,7 @@ export default mixins(
     },
     hideOnScroll: Boolean,
     horizontal: Boolean,
-    inputValue: {
+    modelValue: {
       type: Boolean,
       default: true,
     },
@@ -60,9 +60,11 @@ export default mixins(
     },
   },
 
+  emits: ['update:modelValue', 'change'],
+
   data () {
     return {
-      isActive: this.inputValue,
+      isActive: this.modelValue,
     }
   },
 
@@ -72,7 +74,7 @@ export default mixins(
         Scrollable.computed.canScroll.call(this) &&
         (
           this.hideOnScroll ||
-          !this.inputValue
+          !this.modelValue
         )
       )
     },
@@ -110,7 +112,7 @@ export default mixins(
         this.isActive = !this.isScrollingUp ||
           this.currentScroll > this.computedScrollThreshold
 
-        this.$emit('update:input-value', this.isActive)
+        this.$emit('update:modelValue', this.isActive)
       }
 
       if (this.currentThreshold < this.computedScrollThreshold) return
@@ -134,10 +136,10 @@ export default mixins(
       activeClass: this.activeClass,
       mandatory: Boolean(
         this.mandatory ||
-        this.value !== undefined
+        this.modelValue !== undefined
       ),
       tag: this.tag,
-      value: this.internalValue,
+      modelValue: this.internalValue,
       onChange: this.updateValue
     })
 

package/src/components/VBtn/VBtn.ts

@@ -31,7 +31,7 @@ const baseMixins = mixins(
   Positionable,
   Sizeable,
   GroupableFactory('btnToggle'),
-  ToggleableFactory('inputValue')
+  ToggleableFactory()
   /* @vue/component */
 )
 interface options extends ExtractVue<typeof baseMixins> {
@@ -66,7 +66,7 @@ export default baseMixins.extend({
     value: null as any as PropType<any>,
   },
 
-  emits: ['click'],
+  emits: ['click', 'change', 'update:modelValue'],
 
   data: () => ({
     proxyClass: 'v-btn--active',

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

@@ -99,7 +99,7 @@ describe('VBtn.ts', () => {
   it('should use custom active-class', () => {
     const wrapper = mountFunction({
       props: {
-        inputValue: true,
+        modelValue: true,
         activeClass: 'foo',
       },
     })

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() : '',