@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VNavigationDrawer.sass'
 
@@ -58,7 +57,7 @@ export default baseMixins.extend({
 
   provide (): object {
     return {
-      isInNav: this.$tag === 'nav',
+      isInNav: this.tag === 'nav',
     }
   },
 
@@ -71,6 +70,9 @@ export default baseMixins.extend({
     floating: Boolean,
     height: {
       type: [Number, String],
+      default (): string {
+        return this.app ? '100vh' : '100%'
+      },
     },
     miniVariant: Boolean,
     miniVariantWidth: {
@@ -85,7 +87,10 @@ export default baseMixins.extend({
     },
     stateless: Boolean,
     tag: {
-      type: String
+      type: String,
+      default (): string {
+        return this.app ? 'nav' : 'aside'
+      },
     },
     temporary: Boolean,
     touchless: Boolean,
@@ -93,7 +98,7 @@ export default baseMixins.extend({
       type: [Number, String],
       default: 256,
     },
-    modelValue: null as unknown as PropType<any>,
+    value: null as unknown as PropType<any>,
   },
 
   data: () => ({
@@ -106,12 +111,6 @@ export default baseMixins.extend({
   }),
 
   computed: {
-    $tag() {
-      return this.tag || this.app ? 'nav' : 'aside'
-    },
-    $height() {
-      return this.height || (this.app ? '100vh' : '100%')
-    },
     /**
      * Used for setting an app value from a dynamic
      * property. Called from applicationable.js
@@ -193,7 +192,7 @@ export default baseMixins.extend({
       return (
         !this.stateless &&
         !this.permanent &&
-        Mobile.computed.isMobile.call(this)
+        Mobile.options.computed.isMobile.call(this)
       )
     },
     reactsToClick (): boolean {
@@ -232,7 +231,7 @@ export default baseMixins.extend({
     styles (): object {
       const translate = this.isBottom ? 'translateY' : 'translateX'
       return {
-        height: convertToUnit(this.$height),
+        height: convertToUnit(this.height),
         top: !this.isBottom ? convertToUnit(this.computedTop) : 'auto',
         maxHeight: this.computedMaxHeight != null
           ? `calc(100% - ${convertToUnit(this.computedMaxHeight)})`
@@ -246,7 +245,7 @@ export default baseMixins.extend({
   watch: {
     $route: 'onRouteChange',
     isActive (val) {
-      this.$emit('update:modelValue', val)
+      this.$emit('input', val)
     },
     /**
      * When mobile changes, adjust the active state
@@ -273,7 +272,7 @@ export default baseMixins.extend({
       if (val) this.genOverlay()
       else this.removeOverlay()
     },
-    modelValue (val) {
+    value (val) {
       if (this.permanent) return
 
       if (val == null) {
@@ -319,42 +318,42 @@ export default baseMixins.extend({
         src: this.src,
       }
 
-      const image = this.$slots.img
-        ? this.$slots.img(props)
-        : h(VImg, { props })
+      const image = this.$scopedSlots.img
+        ? this.$scopedSlots.img(props)
+        : this.$createElement(VImg, { props })
 
-      return h('div', {
-        class: 'v-navigation-drawer__image',
+      return this.$createElement('div', {
+        staticClass: 'v-navigation-drawer__image',
       }, [image])
     },
     genDirectives (): VNodeDirective[] {
-      const directives = [
-        [
-          ClickOutside,
-          {
-            handler: () => { this.isActive = false },
-            closeConditional: this.closeConditional,
-            include: this.getOpenDependentElements,
-          }
-        ],
-        [
-          Touch,
-          {
+      const directives = [{
+        name: 'click-outside',
+        value: {
+          handler: () => { this.isActive = false },
+          closeConditional: this.closeConditional,
+          include: this.getOpenDependentElements,
+        },
+      }]
+
+      if (!this.touchless && !this.stateless) {
+        directives.push({
+          name: 'touch',
+          value: {
             parent: true,
             left: this.swipeLeft,
             right: this.swipeRight,
-            isDirActive: !this.touchless && !this.stateless
           },
-        ]
-      ]
+        } as any)
+      }
 
       return directives
     },
     genListeners () {
       const on: Record<string, (e: Event) => void> = {
-        onMouseenter: () => (this.isMouseover = true),
-        onMouseleave: () => (this.isMouseover = false),
-        onTransitionend: (e: Event) => {
+        mouseenter: () => (this.isMouseover = true),
+        mouseleave: () => (this.isMouseover = false),
+        transitionend: (e: Event) => {
           if (e.target !== e.currentTarget) return
           this.$emit('transitionend', e)
 
@@ -366,7 +365,7 @@ export default baseMixins.extend({
       }
 
       if (this.miniVariant) {
-        on.onClick = () => this.$emit('update:mini-variant', false)
+        on.click = () => this.$emit('update:mini-variant', false)
       }
 
       return on
@@ -376,30 +375,30 @@ export default baseMixins.extend({
 
       if (!slot) return slot
 
-      return h('div', {
-        class: `v-navigation-drawer__${name}`,
+      return this.$createElement('div', {
+        staticClass: `v-navigation-drawer__${name}`,
       }, slot)
     },
     genPrepend () {
       return this.genPosition('prepend')
     },
     genContent () {
-      return h('div', {
-        class: 'v-navigation-drawer__content',
+      return this.$createElement('div', {
+        staticClass: 'v-navigation-drawer__content',
       }, getSlot(this))
     },
     genBorder () {
-      return h('div', {
-        class: 'v-navigation-drawer__border',
+      return this.$createElement('div', {
+        staticClass: 'v-navigation-drawer__border',
       })
     },
     init () {
       if (this.permanent) {
         this.isActive = true
       } else if (this.stateless ||
-        this.modelValue != null
+        this.value != null
       ) {
-        this.isActive = this.modelValue
+        this.isActive = this.value
       } else if (!this.temporary) {
         this.isActive = !this.isMobile
       }
@@ -449,7 +448,7 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = [
       this.genPrepend(),
       this.genContent(),
@@ -459,12 +458,11 @@ export default baseMixins.extend({
 
     if (this.src || getSlot(this, 'img')) children.unshift(this.genBackground())
 
-    const node = h(this.$tag, this.setBackgroundColor(this.color, {
+    return h(this.tag, this.setBackgroundColor(this.color, {
       class: this.classes,
       style: this.styles,
-      ...this.genListeners(),
+      directives: this.genDirectives(),
+      on: this.genListeners(),
     }), children)
-
-    return withDirectives(node, this.genDirectives())
   },
 })

package/src/components/VOtpInput/VOtpInput.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import '../VTextField/VTextField.sass'
 import './VOtpInput.sass'
@@ -28,7 +27,7 @@ interface options extends InstanceType<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-otp-input',
 
   directives: {
@@ -61,8 +60,8 @@ export default baseMixins.extend({
     },
     classes (): object {
       return {
-        ...VInput.computed.classes.call(this),
-        ...VTextField.computed.classes.call(this),
+        ...VInput.options.computed.classes.call(this),
+        ...VTextField.options.computed.classes.call(this),
         'v-otp-input--plain': this.plain,
       }
     },
@@ -70,7 +69,7 @@ export default baseMixins.extend({
 
   watch: {
     isFocused: 'updateValue',
-    modelValue (val) {
+    value (val) {
       this.lazyValue = val
       this.otp = val?.split('') || []
     },
@@ -95,17 +94,19 @@ export default baseMixins.extend({
       this.onFocus(e, otpIdx || 0)
     },
     genInputSlot (otpIdx: number) {
-      return h('div', this.setBackgroundColor(this.backgroundColor, {
-        class: 'v-input__slot',
+      return this.$createElement('div', this.setBackgroundColor(this.backgroundColor, {
+        staticClass: 'v-input__slot',
         style: { height: convertToUnit(this.height) },
-        onClick: () => this.onClick(otpIdx),
-        onMousedown: (e: Event) => this.onMouseDown(e, otpIdx),
-        onMouseup: (e: Event) => this.onMouseUp(e, otpIdx),
+        on: {
+          click: () => this.onClick(otpIdx),
+          mousedown: (e: Event) => this.onMouseDown(e, otpIdx),
+          mouseup: (e: Event) => this.onMouseUp(e, otpIdx),
+        },
       }), [this.genDefaultSlot(otpIdx)])
     },
     genControl (otpIdx: number) {
-      return h('div', {
-        class: 'v-input__control',
+      return this.$createElement('div', {
+        staticClass: 'v-input__control',
       }, [
         this.genInputSlot(otpIdx),
       ])
@@ -118,24 +119,25 @@ export default baseMixins.extend({
     },
     genContent () {
       return Array.from({ length: +this.length }, (_, i) => {
-        return h('div', this.setTextColor(this.validationState, {
-          class: ['v-input', this.classes]
+        return this.$createElement('div', this.setTextColor(this.validationState, {
+          staticClass: 'v-input',
+          class: this.classes,
         }), [this.genControl(i)])
       })
     },
     genFieldset () {
-      return h('fieldset', {
+      return this.$createElement('fieldset', {
         attrs: {
           'aria-hidden': true,
         },
       }, [this.genLegend()])
     },
     genLegend () {
-      const span = h('span', {
+      const span = this.$createElement('span', {
         domProps: { innerHTML: '&#8203;' },
       })
 
-      return h('legend', {
+      return this.$createElement('legend', {
         style: {
           width: '0px',
         },
@@ -145,31 +147,35 @@ export default baseMixins.extend({
       const listeners = Object.assign({}, this.listeners$)
       delete listeners.change // Change should not be bound externally
 
-      return h('input', {
+      return this.$createElement('input', {
         style: {},
-        value: this.otp[otpIdx],
-        min: this.type === 'number' ? 0 : null,
-        ...this.attrs$,
-        autocomplete: 'one-time-code',
-        disabled: this.isDisabled,
-        readonly: this.isReadonly,
-        type: this.type,
-        id: `${this.computedId}--${otpIdx}`,
-        class: `otp-field-box--${otpIdx}`,
-        ...Object.assign(listeners, {
-          onBlur: this.onBlur,
-          onInput: (e: Event) => this.onInput(e, otpIdx),
-          onFocus: (e: Event) => this.onFocus(e, otpIdx),
-          onKeydown: this.onKeyDown,
-          onKeyup: (e: KeyboardEvent) => this.onKeyUp(e, otpIdx),
+        domProps: {
+          value: this.otp[otpIdx],
+          min: this.type === 'number' ? 0 : null,
+        },
+        attrs: {
+          ...this.attrs$,
+          autocomplete: 'one-time-code',
+          disabled: this.isDisabled,
+          readonly: this.isReadonly,
+          type: this.type,
+          id: `${this.computedId}--${otpIdx}`,
+          class: `otp-field-box--${otpIdx}`,
+        },
+        on: Object.assign(listeners, {
+          blur: this.onBlur,
+          input: (e: Event) => this.onInput(e, otpIdx),
+          focus: (e: Event) => this.onFocus(e, otpIdx),
+          keydown: this.onKeyDown,
+          keyup: (e: KeyboardEvent) => this.onKeyUp(e, otpIdx),
         }),
         ref: 'input',
         refInFor: true,
       })
     },
     genTextFieldSlot (otpIdx: number): VNode {
-      return h('div', {
-        class: 'v-text-field__slot',
+      return this.$createElement('div', {
+        staticClass: 'v-text-field__slot',
       }, [
         this.genInput(otpIdx),
       ])
@@ -246,12 +252,12 @@ export default baseMixins.extend({
         e.stopPropagation()
       }
 
-      VInput.methods.onMouseDown.call(this, e)
+      VInput.options.methods.onMouseDown.call(this, e)
     },
     onMouseUp (e: Event, otpIdx: number) {
       if (this.hasMouseDown) this.focus(e, otpIdx)
 
-      VInput.methods.onMouseUp.call(this, e)
+      VInput.options.methods.onMouseUp.call(this, e)
     },
     changeFocus (index: number) {
       this.onFocus(undefined, index || 0)
@@ -289,9 +295,10 @@ export default baseMixins.extend({
       }
     },
   },
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-otp-input', this.themeClasses],
+      staticClass: 'v-otp-input',
+      class: this.themeClasses,
     }, this.genContent())
   },
 })

package/src/components/VOverflowBtn/VOverflowBtn.ts

@@ -11,14 +11,11 @@ import VBtn from '../VBtn'
 
 // Utilities
 import { consoleWarn } from '../../util/console'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default VAutocomplete.extend({
   name: 'v-overflow-btn',
 
-  extends: VAutocomplete,
-
   props: {
     editable: Boolean,
     segmented: Boolean,
@@ -27,7 +24,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VAutocomplete.computed.classes.call(this),
+        ...VAutocomplete.options.computed.classes.call(this),
         'v-overflow-btn': true,
         'v-overflow-btn--segmented': this.segmented,
         'v-overflow-btn--editable': this.editable,
@@ -35,7 +32,7 @@ export default defineComponent({
     },
     isAnyValueAllowed (): boolean {
       return this.editable ||
-        VAutocomplete.computed.isAnyValueAllowed.call(this)
+        VAutocomplete.options.computed.isAnyValueAllowed.call(this)
     },
     isSingle (): true {
       return true
@@ -51,16 +48,16 @@ export default defineComponent({
   methods: {
     genSelections () {
       return this.editable
-        ? VAutocomplete.methods.genSelections.call(this)
-        : VSelect.methods.genSelections.call(this) // Override v-autocomplete's override
+        ? VAutocomplete.options.methods.genSelections.call(this)
+        : VSelect.options.methods.genSelections.call(this) // Override v-autocomplete's override
     },
     genCommaSelection (item: any, index: number, last: boolean) {
       return this.segmented
         ? this.genSegmentedBtn(item)
-        : VSelect.methods.genCommaSelection.call(this, item, index, last)
+        : VSelect.options.methods.genCommaSelection.call(this, item, index, last)
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
+      const input = VTextField.options.methods.genInput.call(this)
 
       input.data = input.data || {}
       input.data.domProps!.value = this.editable ? this.internalSearch : ''
@@ -71,7 +68,7 @@ export default defineComponent({
     genLabel () {
       if (this.editable && this.isFocused) return null
 
-      const label = VTextField.methods.genLabel.call(this)
+      const label = VTextField.options.methods.genLabel.call(this)
 
       if (!label) return label
 
@@ -91,7 +88,7 @@ export default defineComponent({
         return null
       }
 
-      return h(VBtn, {
+      return this.$createElement(VBtn, {
         props: { text: true },
         on: {
           click (e: Event) {

package/src/components/VOverlay/VOverlay.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VOverlay.sass'
 
@@ -48,13 +47,13 @@ export default mixins(
   computed: {
     __scrim (): VNode {
       const data = this.setBackgroundColor(this.color, {
-        class: {'v-overlay__scrim': true},
+        staticClass: 'v-overlay__scrim',
         style: {
           opacity: this.computedOpacity,
         },
       })
 
-      return h('div', data)
+      return this.$createElement('div', data)
     },
     classes (): object {
       return {
@@ -75,20 +74,21 @@ export default mixins(
 
   methods: {
     genContent () {
-      return h('div', {
-        class: 'v-overlay__content',
+      return this.$createElement('div', {
+        staticClass: 'v-overlay__content',
       }, getSlot(this))
-    }
+    },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = [this.__scrim]
 
     if (this.isActive) children.push(this.genContent())
 
     return h('div', {
+      staticClass: 'v-overlay',
       on: this.$listeners,
-      class: ['v-overlay', this.classes],
+      class: this.classes,
       style: this.styles,
     }, children)
   },

package/src/components/VPagination/VPagination.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 import './VPagination.sass'
 
 import VIcon from '../VIcon'
@@ -46,7 +45,7 @@ export default mixins(
       default: '$prev',
     },
     totalVisible: [Number, String],
-    modelValue: {
+    value: {
       type: Number,
       default: 0,
     },
@@ -80,9 +79,6 @@ export default mixins(
   },
 
   computed: {
-    value() {
-      return this.modelValue
-    },
     classes (): object {
       return {
         'v-pagination': true,
@@ -166,12 +162,12 @@ export default mixins(
     },
     next (e: Event) {
       e.preventDefault()
-      this.$emit('update:modelValue', this.value + 1)
+      this.$emit('input', this.value + 1)
       this.$emit('next')
     },
     previous (e: Event) {
       e.preventDefault()
-      this.$emit('update:modelValue', this.value - 1)
+      this.$emit('input', this.value - 1)
       this.$emit('previous')
     },
     range (from: number, to: number) {
@@ -189,15 +185,18 @@ export default mixins(
       return h('li', [
         h('button',
           this.setBackgroundColor(this.navigationColor, {
-            class: ['v-pagination__navigation', {
+            staticClass: 'v-pagination__navigation',
+            class: {
               'v-pagination__navigation--disabled': disabled,
-            }],
-            disabled,
-            type: 'button',
-            'aria-label': label,
-            ...(disabled ? {} : { onClick: fn }),
+            },
+            attrs: {
+              disabled,
+              type: 'button',
+              'aria-label': label,
+            },
+            on: disabled ? {} : { click: fn },
           }),
-          [h(VIcon, { color: this.navigationTextColor }, [icon])]
+          [h(VIcon, { props: { color: this.navigationTextColor } }, [icon])]
         ),
       ])
     },
@@ -207,13 +206,18 @@ export default mixins(
       const ariaLabel = isCurrentPage ? this.currentPageAriaLabel : this.pageAriaLabel
 
       return h('button', this.setBackgroundColor(color, {
-        class: ['v-pagination__item', {
+        staticClass: 'v-pagination__item',
+        class: {
           'v-pagination__item--active': i === this.value,
-        }],
-        type: 'button',
-        'aria-current': isCurrentPage,
-        'aria-label': this.$vuetify.lang.t(ariaLabel, i),
-        onClick: () => this.$emit('update:modelValue', i),
+        },
+        attrs: {
+          type: 'button',
+          'aria-current': isCurrentPage,
+          'aria-label': this.$vuetify.lang.t(ariaLabel, i),
+        },
+        on: {
+          click: () => this.$emit('input', i),
+        },
       }), [i.toString()])
     },
     genItems (h: CreateElement): VNode[] {
@@ -224,20 +228,18 @@ export default mixins(
       })
     },
     genList (h: CreateElement, children: VNodeChildrenArrayContents): VNode {
-      return withDirectives(h('ul', {
-        class: this.classes
-      }, children), [
-        [
-          Resize,
-          this.onResize,
-          '',
-          { quiet: true }
-        ]
-      ])
+      return h('ul', {
+        directives: [{
+          modifiers: { quiet: true },
+          name: 'resize',
+          value: this.onResize,
+        }],
+        class: this.classes,
+      }, children)
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = [
       this.genIcon(h,
         this.$vuetify.rtl ? this.nextIcon : this.prevIcon,
@@ -253,8 +255,10 @@ export default mixins(
     ]
 
     return h('nav', {
-      role: 'navigation',
-      'aria-label': this.$vuetify.lang.t(this.wrapperAriaLabel),
+      attrs: {
+        role: 'navigation',
+        'aria-label': this.$vuetify.lang.t(this.wrapperAriaLabel),
+      },
     }, [this.genList(h, children)])
   },
 })