@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VSkeletonLoader/VSkeletonLoader.ts

@@ -1,4 +1,3 @@
-import {Transition, h} from 'vue'
 // Styles
 import './VSkeletonLoader.sass'
 
@@ -54,7 +53,8 @@ export default mixins(
         'aria-busy': !this.boilerplate ? true : undefined,
         'aria-live': !this.boilerplate ? 'polite' : undefined,
         'aria-label': !this.boilerplate ? this.$vuetify.lang.t(this.loadingText) : undefined,
-        role: !this.boilerplate ? 'alert' : undefined
+        role: !this.boilerplate ? 'alert' : undefined,
+        ...this.$attrs,
       }
     },
     classes (): object {
@@ -67,7 +67,7 @@ export default mixins(
       }
     },
     isLoading (): boolean {
-      return !('default' in this.$slots) || this.loading
+      return !('default' in this.$scopedSlots) || this.loading
     },
     rootTypes (): Record<string, string> {
       return {
@@ -108,8 +108,8 @@ export default mixins(
 
   methods: {
     genBone (text: string, children: VNode[]) {
-      return h('div', {
-        class: `v-skeleton-loader__${text} v-skeleton-loader__bone`,
+      return this.$createElement('div', {
+        staticClass: `v-skeleton-loader__${text} v-skeleton-loader__bone`,
       }, children)
     },
     genBones (bone: string): VNode[] {
@@ -154,14 +154,18 @@ export default mixins(
       if (!this.transition) return children
 
       /* istanbul ignore next */
-      return h(Transition, {
-        name: this.transition,
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition,
+        },
         // Only show transition when
         // content has been loaded
-        onAfterEnter: this.resetStyles,
-        onBeforeEnter: this.onBeforeEnter,
-        onBeforeLeave: this.onBeforeLeave,
-        onLeaveCancelled: this.resetStyles
+        on: {
+          afterEnter: this.resetStyles,
+          beforeEnter: this.onBeforeEnter,
+          beforeLeave: this.onBeforeLeave,
+          leaveCancelled: this.resetStyles,
+        },
       }, children)
     },
     mapBones (bones: string) {
@@ -193,11 +197,12 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-skeleton-loader', this.classes],
-      ...this.attrs,
-      ...this.$listeners,
+      staticClass: 'v-skeleton-loader',
+      attrs: this.attrs,
+      on: this.$listeners,
+      class: this.classes,
       style: this.isLoading ? this.measurableStyles : undefined,
     }, [this.genSkeleton()])
   },

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VSlideGroup.sass'
 
@@ -20,7 +19,7 @@ import Touch from '../../directives/touch'
 import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
-import Vue, { VNode, defineComponent } from 'vue'
+import Vue, { VNode } from 'vue'
 import { composedPath, getSlot } from '../../util/helpers'
 
 interface TouchEvent {
@@ -164,7 +163,7 @@ export const BaseSlideGroup = mixins<options &
     },
     classes (): object {
       return {
-        ...BaseItemGroup.computed.classes.call(this),
+        ...BaseItemGroup.options.computed.classes.call(this),
         'v-slide-group': true,
         'v-slide-group--has-affixes': this.hasAffixes,
         'v-slide-group--is-overflowing': this.isOverflowing,
@@ -282,28 +281,37 @@ export const BaseSlideGroup = mixins<options &
     },
     // Always generate next for scrollable hint
     genNext (): VNode | null {
-      const slot = this.$slots.next
-        ? this.$slots.next({})
+      const slot = this.$scopedSlots.next
+        ? this.$scopedSlots.next({})
         : getSlot(this, 'next') || this.__cachedNext
 
-      return h('div', {
-        class: ['v-slide-group__next', {
+      return this.$createElement('div', {
+        staticClass: 'v-slide-group__next',
+        class: {
           'v-slide-group__next--disabled': !this.hasNext,
-        }],
-        onClick: () => this.onAffixClick('next'),
+        },
+        on: {
+          click: () => this.onAffixClick('next'),
+        },
         key: 'next',
       }, [slot])
     },
     genContent (): VNode {
-      return h('div', {
-        class: 'v-slide-group__content',
+      return this.$createElement('div', {
+        staticClass: 'v-slide-group__content',
         ref: 'content',
-        onFocusin: this.onFocusin,
+        on: {
+          focusin: this.onFocusin,
+        },
       }, getSlot(this))
     },
     genData (): object {
       return {
-        class: this.classes
+        class: this.classes,
+        directives: [{
+          name: 'resize',
+          value: this.onResize,
+        }],
       }
     },
     genIcon (location: 'prev' | 'next'): VNode | null {
@@ -323,43 +331,48 @@ export const BaseSlideGroup = mixins<options &
         !hasAffix
       ) return null
 
-      return h(VIcon, {
-        disabled: !hasAffix,
+      return this.$createElement(VIcon, {
+        props: {
+          disabled: !hasAffix,
+        },
       }, (this as any)[`${icon}Icon`])
     },
     // Always generate prev for scrollable hint
     genPrev (): VNode | null {
-      const slot = this.$slots.prev
-        ? this.$slots.prev({})
+      const slot = this.$scopedSlots.prev
+        ? this.$scopedSlots.prev({})
         : getSlot(this, 'prev') || this.__cachedPrev
 
-      return h('div', {
-        class: ['v-slide-group__prev', {
+      return this.$createElement('div', {
+        staticClass: 'v-slide-group__prev',
+        class: {
           'v-slide-group__prev--disabled': !this.hasPrev,
-        }],
-        onClick: () => this.onAffixClick('prev'),
+        },
+        on: {
+          click: () => this.onAffixClick('prev'),
+        },
         key: 'prev',
       }, [slot])
     },
     genTransition (location: 'prev' | 'next') {
-      return h(VFadeTransition, [this.genIcon(location)])
+      return this.$createElement(VFadeTransition, [this.genIcon(location)])
     },
     genWrapper (): VNode {
-      return withDirectives(h('div', {
-        class: 'v-slide-group__wrapper',
-        ref: 'wrapper',
-        onScroll: this.onScroll,
-      }, [this.genContent()]), [
-        [
-          Touch,
-          {
+      return this.$createElement('div', {
+        staticClass: 'v-slide-group__wrapper',
+        directives: [{
+          name: 'touch',
+          value: {
             start: (e: TouchEvent) => this.overflowCheck(e, this.onTouchStart),
             move: (e: TouchEvent) => this.overflowCheck(e, this.onTouchMove),
             end: (e: TouchEvent) => this.overflowCheck(e, this.onTouchEnd),
-          }
-        ]
-
-      ])
+          },
+        }],
+        ref: 'wrapper',
+        on: {
+          scroll: this.onScroll,
+        },
+      }, [this.genContent()])
     },
     calculateNewOffset (direction: 'prev' | 'next', widths: Widths, rtl: boolean, currentScrollOffset: number) {
       const sign = rtl ? -1 : 1
@@ -503,25 +516,18 @@ export const BaseSlideGroup = mixins<options &
     },
   },
 
-  render (): VNode {
-    return withDirectives(h('div', this.genData(), [
+  render (h): VNode {
+    return h('div', this.genData(), [
       this.genPrev(),
       this.genWrapper(),
       this.genNext(),
-    ]), [
-      [
-        Resize,
-        this.onResize
-      ]
     ])
   },
 })
 
-export default defineComponent({
+export default BaseSlideGroup.extend({
   name: 'v-slide-group',
 
-  extends: BaseSlideGroup,
-
   provide (): object {
     return {
       slideGroup: this,

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

@@ -255,13 +255,13 @@ describe('VSlideGroup.ts', () => {
       },
       scopedSlots: {
         prev () {
-          return h('div', {
-            class: 'fizz',
+          return this.$createElement('div', {
+            staticClass: 'fizz',
           }, 'foo')
         },
         next () {
-          return h('div', {
-            class: 'fizz',
+          return this.$createElement('div', {
+            staticClass: 'fizz',
           }, 'bar')
         },
       },

package/src/components/VSlider/VSlider.ts

@@ -16,7 +16,7 @@ import { addOnceEventListener, deepEqual, keyCodes, createRange, convertToUnit,
 import { consoleWarn } from '../../util/console'
 
 // Types
-import Vue, { VNode, VNodeChildrenArrayContents, PropType, h } from 'vue'
+import Vue, { VNode, VNodeChildrenArrayContents, PropType } from 'vue'
 import { ScopedSlotChildren } from 'vue/types/vnode'
 import { PropValidator } from 'vue/types/options'
 
@@ -44,6 +44,8 @@ export default mixins<options &
     ClickOutside,
   },
 
+  mixins: [Loadable],
+
   props: {
     disabled: Boolean,
     inverseLabel: Boolean,
@@ -84,7 +86,7 @@ export default mixins<options &
     },
     trackColor: String,
     trackFillColor: String,
-    modelValue: [Number, String],
+    value: [Number, String],
     vertical: Boolean,
   },
 
@@ -102,7 +104,7 @@ export default mixins<options &
   computed: {
     classes (): object {
       return {
-        ...VInput.computed.classes.call(this),
+        ...VInput.options.computed.classes.call(this),
         'v-input__slider': true,
         'v-input__slider--vertical': this.vertical,
         'v-input__slider--inverse-label': this.inverseLabel,
@@ -123,7 +125,7 @@ export default mixins<options &
 
         this.lazyValue = value
 
-        this.$emit('update:modelValue', value)
+        this.$emit('input', value)
       },
     },
     trackTransition (): string {
@@ -186,7 +188,7 @@ export default mixins<options &
     showThumbLabel (): boolean {
       return !this.isDisabled && !!(
         this.thumbLabel ||
-        this.$slots['thumb-label']
+        this.$scopedSlots['thumb-label']
       )
     },
     computedTrackColor (): string | undefined {
@@ -209,13 +211,13 @@ export default mixins<options &
   watch: {
     min (val) {
       const parsed = parseFloat(val)
-      parsed > this.internalValue && this.$emit('update:modelValue', parsed)
+      parsed > this.internalValue && this.$emit('input', parsed)
     },
     max (val) {
       const parsed = parseFloat(val)
-      parsed < this.internalValue && this.$emit('update:modelValue', parsed)
+      parsed < this.internalValue && this.$emit('input', parsed)
     },
-    modelValue: {
+    value: {
       handler (v: number) {
         this.internalValue = v
       },
@@ -242,7 +244,7 @@ export default mixins<options &
       return children
     },
     genSlider (): VNode {
-      return h('div', {
+      return this.$createElement('div', {
         class: {
           'v-slider': true,
           'v-slider--horizontal': !this.vertical,
@@ -257,9 +259,11 @@ export default mixins<options &
           name: 'click-outside',
           value: this.onBlur,
         }],
-        onClick: this.onSliderClick,
-        onMousedown: this.onSliderMouseDown,
-        onTouchstart: this.onSliderMouseDown,
+        on: {
+          click: this.onSliderClick,
+          mousedown: this.onSliderMouseDown,
+          touchstart: this.onSliderMouseDown,
+        },
       }, this.genChildren())
     },
     genChildren (): VNodeChildrenArrayContents {
@@ -278,30 +282,32 @@ export default mixins<options &
       ]
     },
     genInput (): VNode {
-      return h('input', {
-        value: this.internalValue,
-        id: this.computedId,
-        disabled: true,
-        readonly: true,
-        tabindex: -1,
-        ...this.$attrs,
+      return this.$createElement('input', {
+        attrs: {
+          value: this.internalValue,
+          id: this.computedId,
+          disabled: true,
+          readonly: true,
+          tabindex: -1,
+          ...this.$attrs,
+        },
         // on: this.genListeners(), // TODO: do we need to attach the listeners to input?
       })
     },
     genTrackContainer (): VNode {
       const children = [
-        h('div', this.setBackgroundColor(this.computedTrackColor, {
-          class: 'v-slider__track-background',
+        this.$createElement('div', this.setBackgroundColor(this.computedTrackColor, {
+          staticClass: 'v-slider__track-background',
           style: this.trackStyles,
         })),
-        h('div', this.setBackgroundColor(this.computedTrackFillColor, {
-          class: 'v-slider__track-fill',
+        this.$createElement('div', this.setBackgroundColor(this.computedTrackFillColor, {
+          staticClass: 'v-slider__track-fill',
           style: this.trackFillStyles,
         })),
       ]
 
-      return h('div', {
-        class: 'v-slider__track-container',
+      return this.$createElement('div', {
+        staticClass: 'v-slider__track-container',
         ref: 'track',
       }, children)
     },
@@ -319,19 +325,20 @@ export default mixins<options &
         const children = []
 
         if (this.tickLabels[index]) {
-          children.push(h('div', {
-            class: 'v-slider__tick-label',
+          children.push(this.$createElement('div', {
+            staticClass: 'v-slider__tick-label',
           }, this.tickLabels[index]))
         }
 
         const width = index * (100 / this.numTicks)
         const filled = this.$vuetify.rtl ? (100 - this.inputWidth) < width : width < this.inputWidth
 
-        return h('span', {
+        return this.$createElement('span', {
           key: index,
-          class: ['v-slider__tick', {
+          staticClass: 'v-slider__tick',
+          class: {
             'v-slider__tick--filled': filled,
-          }],
+          },
           style: {
             width: `${tickSize}px`,
             height: `${tickSize}px`,
@@ -341,10 +348,11 @@ export default mixins<options &
         }, children)
       })
 
-      return h('div', {
-        class: ['v-slider__ticks-container', {
+      return this.$createElement('div', {
+        staticClass: 'v-slider__ticks-container',
+        class: {
           'v-slider__ticks-container--always-show': this.ticks === 'always' || this.tickLabels.length > 0,
-        }],
+        },
       }, ticks)
     },
     genThumbContainer (
@@ -361,32 +369,37 @@ export default mixins<options &
       const thumbLabelContent = this.genThumbLabelContent(value)
       this.showThumbLabel && children.push(this.genThumbLabel(thumbLabelContent))
 
-      return h('div', this.setTextColor(this.computedThumbColor, {
+      return this.$createElement('div', this.setTextColor(this.computedThumbColor, {
         ref,
         key: ref,
-        class: ['v-slider__thumb-container', {
+        staticClass: 'v-slider__thumb-container',
+        class: {
           'v-slider__thumb-container--active': isActive,
           'v-slider__thumb-container--focused': isFocused,
           'v-slider__thumb-container--show-label': this.showThumbLabel,
-        }],
+        },
         style: this.getThumbContainerStyles(valueWidth),
-        role: 'slider',
-        tabindex: this.isDisabled ? -1 : this.$attrs.tabindex ? this.$attrs.tabindex : 0,
-        'aria-label': this.$attrs['aria-label'] || this.label,
-        'aria-valuemin': this.min,
-        'aria-valuemax': this.max,
-        'aria-valuenow': this.internalValue,
-        'aria-readonly': String(this.isReadonly),
-        'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onKeydown: this.onKeyDown,
+        attrs: {
+          role: 'slider',
+          tabindex: this.isDisabled ? -1 : this.$attrs.tabindex ? this.$attrs.tabindex : 0,
+          'aria-label': this.$attrs['aria-label'] || this.label,
+          'aria-valuemin': this.min,
+          'aria-valuemax': this.max,
+          'aria-valuenow': this.internalValue,
+          'aria-readonly': String(this.isReadonly),
+          'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
+        },
+        on: {
+          focus: onFocus,
+          blur: onBlur,
+          keydown: this.onKeyDown,
+        },
       }), children)
     },
     genThumbLabelContent (value: number | string): ScopedSlotChildren {
-      return this.$slots['thumb-label']
-        ? this.$slots['thumb-label']!({ value })
-        : [h('span', [String(value)])]
+      return this.$scopedSlots['thumb-label']
+        ? this.$scopedSlots['thumb-label']!({ value })
+        : [this.$createElement('span', [String(value)])]
     },
     genThumbLabel (content: ScopedSlotChildren): VNode {
       const size = convertToUnit(this.thumbSize)
@@ -395,30 +408,30 @@ export default mixins<options &
         ? `translateY(20%) translateY(${(Number(this.thumbSize) / 3) - 1}px) translateX(55%) rotate(135deg)`
         : `translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)`
 
-      return h(VScaleTransition, {
-        origin: 'bottom center',
+      return this.$createElement(VScaleTransition, {
+        props: { origin: 'bottom center' },
       }, [
-        h('div', {
-          class: 'v-slider__thumb-label-container',
+        this.$createElement('div', {
+          staticClass: 'v-slider__thumb-label-container',
           directives: [{
             name: 'show',
             value: this.isFocused || this.isActive || this.thumbLabel === 'always',
           }],
         }, [
-          h('div', this.setBackgroundColor(this.computedThumbColor, {
-            class: 'v-slider__thumb-label',
+          this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
+            staticClass: 'v-slider__thumb-label',
             style: {
               height: size,
               width: size,
               transform,
             },
-          }), [h('div', content)]),
+          }), [this.$createElement('div', content)]),
         ]),
       ])
     },
     genThumb (): VNode {
-      return h('div', this.setBackgroundColor(this.computedThumbColor, {
-        class: 'v-slider__thumb',
+      return this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
+        staticClass: 'v-slider__thumb',
       }))
     },
     getThumbContainerStyles (width: number): object {
@@ -474,7 +487,7 @@ export default mixins<options &
       this.$emit('mouseup', e)
       this.$emit('end', this.internalValue)
       if (!deepEqual(this.oldValue, this.internalValue)) {
-        this.$emit('update:modelValue', this.internalValue)
+        this.$emit('change', this.internalValue)
         this.noClick = true
       }
 
@@ -498,7 +511,7 @@ export default mixins<options &
       ) return
 
       this.internalValue = value
-      this.$emit('update:modelValue', value)
+      this.$emit('change', value)
     },
     onSliderClick (e: MouseEvent) {
       if (this.noClick) {
@@ -509,7 +522,7 @@ export default mixins<options &
       thumb.focus()
 
       this.onMouseMove(e)
-      this.$emit('update:modelValue', this.internalValue)
+      this.$emit('change', this.internalValue)
     },
     onBlur (e: Event) {
       this.isFocused = false

package/src/components/VSnackbar/VSnackbar.ts

@@ -1,4 +1,3 @@
-import {Transition, h, vShow, withDirectives} from 'vue'
 // Styles
 import './VSnackbar.sass'
 
@@ -88,7 +87,7 @@ export default mixins(
     isDark (): boolean {
       return this.hasBackground
         ? !this.light
-        : Themeable.computed.isDark.call(this)
+        : Themeable.options.computed.isDark.call(this)
     },
     styles (): object {
       if (this.absolute || !this.app) return {}
@@ -136,8 +135,8 @@ export default mixins(
 
   methods: {
     genActions () {
-      return h('div', {
-        class: 'v-snack__action ',
+      return this.$createElement('div', {
+        staticClass: 'v-snack__action ',
       }, [
         getSlot(this, 'action', {
           attrs: { class: 'v-snack__btn' },
@@ -145,12 +144,15 @@ export default mixins(
       ])
     },
     genContent () {
-      return h('div', {
-        class: ['v-snack__content', {
+      return this.$createElement('div', {
+        staticClass: 'v-snack__content',
+        class: {
           [this.contentClass]: true,
-        }],
-        role: 'status',
-        'aria-live': 'polite'
+        },
+        attrs: {
+          role: 'status',
+          'aria-live': 'polite',
+        },
       }, [getSlot(this)])
     },
     genWrapper () {
@@ -159,27 +161,27 @@ export default mixins(
         : this.setTextColor
 
       const data = setColor(this.color, {
-        class: ['v-snack__wrapper', VSheet.computed.classes.call(this)],
-        style: VSheet.computed.styles.call(this),
-        onPointerenter: () => window.clearTimeout(this.activeTimeout),
-        onPointerleave: this.setTimeout
+        staticClass: 'v-snack__wrapper',
+        class: VSheet.options.computed.classes.call(this),
+        style: VSheet.options.computed.styles.call(this),
+        directives: [{
+          name: 'show',
+          value: this.isActive,
+        }],
+        on: {
+          pointerenter: () => window.clearTimeout(this.activeTimeout),
+          pointerleave: this.setTimeout,
+        },
       })
 
-      const directives = [
-        [
-          vShow,
-          this.isActive
-        ]
-      ]
-
-      return withDirectives(h('div', data, [
+      return this.$createElement('div', data, [
         this.genContent(),
         this.genActions(),
-      ]), directives)
+      ])
     },
     genTransition () {
-      return h(Transition, {
-        name: this.transition,
+      return this.$createElement('transition', {
+        props: { name: this.transition },
       }, [this.genWrapper()])
     },
     setTimeout () {
@@ -201,9 +203,10 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-snack', this.classes],
+      staticClass: 'v-snack',
+      class: this.classes,
       style: this.styles,
     }, [
       this.transition !== false