@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VFileInput/VFileInput.ts

@@ -14,11 +14,9 @@ import { PropValidator } from 'vue/types/options'
 import { deepEqual, humanReadableFileSize, wrapInArray } from '../../util/helpers'
 import { consoleError } from '../../util/console'
 import { mergeStyles } from '../../util/mergeData'
-import { defineComponent, h } from 'vue'
 
-export default defineComponent({
+export default VTextField.extend({
   name: 'v-file-input',
-  extends: VTextField,
 
   model: {
     prop: 'value',
@@ -80,7 +78,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VTextField.computed.classes.call(this),
+        ...VTextField.options.computed.classes.call(this),
         'v-file-input': true,
       }
     },
@@ -171,21 +169,23 @@ export default defineComponent({
     genChips () {
       if (!this.isDirty) return []
 
-      return this.text.map((text, index) => h(VChip, {
-        small: this.smallChips,
-        'onClick:close': () => {
-          const internalValue = this.internalValue
-          internalValue.splice(index, 1)
-          this.internalValue = internalValue // Trigger the watcher
-        }
+      return this.text.map((text, index) => this.$createElement(VChip, {
+        props: { small: this.smallChips },
+        on: {
+          'click:close': () => {
+            const internalValue = this.internalValue
+            internalValue.splice(index, 1)
+            this.internalValue = internalValue // Trigger the watcher
+          },
+        },
       }, [text]))
     },
     genControl () {
-      const render = VTextField.methods.genControl.call(this)
+      const render = VTextField.options.methods.genControl.call(this)
 
       if (this.hideInput) {
-        render.style = mergeStyles(
-          render.style,
+        render.data!.style = mergeStyles(
+          render.data!.style,
           { display: 'none' }
         )
       }
@@ -193,21 +193,21 @@ export default defineComponent({
       return render
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
+      const input = VTextField.options.methods.genInput.call(this)
 
-      input.multiple = this.multiple
+      input.data!.attrs!.multiple = this.multiple
 
       // We should not be setting value
       // programmatically on the input
       // when it is using type="file"
-      delete input.value
+      delete input.data!.domProps!.value
 
       // This solves an issue in Safari where
       // nothing happens when adding a file
       // due to the input event not firing
       // https://github.com/vuetifyjs/vuetify/issues/7941
-      delete input.onInput
-      input.onChange = this.onInput
+      delete input.data!.on!.input
+      input.data!.on!.change = this.onInput
 
       return [this.genSelections(), input]
     },
@@ -230,12 +230,12 @@ export default defineComponent({
     genSelections () {
       const children = []
 
-      if (this.isDirty && this.$slots.selection) {
+      if (this.isDirty && this.$scopedSlots.selection) {
         this.internalArrayValue.forEach((file: File, index: number) => {
-          if (!this.$slots.selection) return
+          if (!this.$scopedSlots.selection) return
 
           children.push(
-            this.$slots.selection({
+            this.$scopedSlots.selection({
               text: this.text[index],
               file,
               index,
@@ -246,21 +246,25 @@ export default defineComponent({
         children.push(this.hasChips && this.isDirty ? this.genChips() : this.genSelectionText())
       }
 
-      return h('div', {
-        class: ['v-file-input__text', {
+      return this.$createElement('div', {
+        staticClass: 'v-file-input__text',
+        class: {
           'v-file-input__text--placeholder': this.placeholder && !this.isDirty,
-          'v-file-input__text--chips': this.hasChips && !this.$slots.selection,
-        }]
+          'v-file-input__text--chips': this.hasChips && !this.$scopedSlots.selection,
+        },
       }, children)
     },
     genTextFieldSlot () {
-      const node = VTextField.methods.genTextFieldSlot.call(this)
+      const node = VTextField.options.methods.genTextFieldSlot.call(this)
 
-      node.onClick = (e: MouseEvent) => {
-        // Clicking the label already delegates to input element, so we shouldn't click it twice
-        if (e.target && (e.target as HTMLElement).nodeName === 'LABEL') return
+      node.data!.on = {
+        ...(node.data!.on || {}),
+        click: (e: MouseEvent) => {
+          // Clicking the label already delegates to input element, so we shouldn't click it twice
+          if (e.target && (e.target as HTMLElement).nodeName === 'LABEL') return
 
-        this.$refs.input.click()
+          this.$refs.input.click()
+        },
       }
 
       return node

package/src/components/VFooter/VFooter.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VFooter.sass'
 
@@ -46,7 +45,7 @@ export default mixins(
     },
     classes (): object {
       return {
-        ...VSheet.computed.classes.call(this),
+        ...VSheet.options.computed.classes.call(this),
         'v-footer--absolute': this.absolute,
         'v-footer--fixed': !this.absolute && (this.app || this.fixed),
         'v-footer--padless': this.padless,
@@ -85,7 +84,7 @@ export default mixins(
       const height = parseInt(this.height)
 
       return {
-        ...VSheet.computed.styles.call(this),
+        ...VSheet.options.computed.styles.call(this),
         height: isNaN(height) ? height : convertToUnit(height),
         left: convertToUnit(this.computedLeft),
         right: convertToUnit(this.computedRight),
@@ -104,9 +103,9 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = this.setBackgroundColor(this.color, {
-      class: 'v-footer',
+      staticClass: 'v-footer',
       class: this.classes,
       style: this.styles,
     })

package/src/components/VForm/VForm.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Components
 import VInput from '../VInput/VInput'
 
@@ -62,7 +61,7 @@ export default mixins(
     watchInput (input: any): Watchers {
       const watcher = (input: any): (() => void) => {
         return input.$watch('hasError', (val: boolean) => {
-          this.errorBag[input._uid] = val
+          this.$set(this.errorBag, input._uid, val)
         }, { immediate: true })
       }
 
@@ -131,12 +130,16 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('form', {
-      class: 'v-form',
-      novalidate: true,
-      ...this.attrs$,
-      onSubmit: (e: Event) => this.$emit('submit', e),
+      staticClass: 'v-form',
+      attrs: {
+        novalidate: true,
+        ...this.attrs$,
+      },
+      on: {
+        submit: (e: Event) => this.$emit('submit', e),
+      },
     }, getSlot(this))
   },
 })

package/src/components/VGrid/VCol.ts

@@ -1,9 +1,9 @@
 import './VGrid.sass'
 
-import { defineComponent, VNode, PropOptions, getCurrentInstance } from 'vue'
+import Vue, { VNode, PropOptions } from 'vue'
 import mergeData from '../../util/mergeData'
 import { upperFirst } from '../../util/helpers'
-import {h} from 'vue'
+
 // no xs
 const breakpoints = ['sm', 'md', 'lg', 'xl']
 
@@ -66,7 +66,7 @@ function breakpointClass (type: keyof typeof propMap, prop: string, val: boolean
 
 const cache = new Map<string, any[]>()
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-col',
   functional: true,
   props: {
@@ -95,12 +95,7 @@ export default defineComponent({
       default: 'div',
     },
   },
-  render (): VNode {
-    const props = this.$props
-    const data = this.$attrs
-    const children = this.$slots.default()
-    // const {parent} = getCurrentInstance()
-
+  render (h, { props, data, children, parent }): VNode {
     // Super-fast memoization based on props, 5x faster than JSON.stringify
     let cacheKey = ''
     for (const prop in props) {

package/src/components/VGrid/VContainer.ts

@@ -4,12 +4,10 @@ import './VGrid.sass'
 import Grid from './grid'
 
 import mergeData from '../../util/mergeData'
-import { defineComponent, h } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Grid('container').extend({
   name: 'v-container',
-  extends: Grid('container'),
   functional: true,
   props: {
     id: String,
@@ -22,14 +20,12 @@ export default defineComponent({
       default: false,
     },
   },
-  render () {
+  render (h, { props, data, children }) {
     let classes
-    // const { attrs } = data
-
-    const attrs = this.$attrs
-
+    const { attrs } = data
     if (attrs) {
       // reset attrs to extract utility clases like pa-3
+      data.attrs = {}
       classes = Object.keys(attrs).filter(key => {
         // TODO: Remove once resolved
         // https://github.com/vuejs/vue/issues/7841
@@ -40,7 +36,7 @@ export default defineComponent({
         // add back data attributes like data-test="foo" but do not
         // add them as classes
         if (key.startsWith('data-')) {
-          // data.attrs![key] = value
+          data.attrs![key] = value
           return false
         }
 
@@ -48,19 +44,20 @@ export default defineComponent({
       })
     }
 
-    // if (props.id) {
-    //   data.domProps = data.domProps || {}
-    //   data.domProps.id = props.id
-    // }
+    if (props.id) {
+      data.domProps = data.domProps || {}
+      data.domProps.id = props.id
+    }
 
     return h(
-      this.tag,
-      mergeData(this.$attrs, {
+      props.tag,
+      mergeData(data, {
+        staticClass: 'container',
         class: Array<any>({
-          'container--fluid': this.fluid,
-        }).concat(classes || []).concat('container'),
+          'container--fluid': props.fluid,
+        }).concat(classes || []),
       }),
-      this.$slots.default()
+      children
     )
   },
 })

package/src/components/VGrid/VRow.ts

@@ -1,9 +1,9 @@
 import './VGrid.sass'
 
-import { defineComponent, PropOptions } from 'vue'
+import Vue, { PropOptions } from 'vue'
 import mergeData from '../../util/mergeData'
 import { upperFirst } from '../../util/helpers'
-import {h} from 'vue'
+
 // no xs
 const breakpoints = ['sm', 'md', 'lg', 'xl']
 
@@ -66,7 +66,7 @@ function breakpointClass (type: keyof typeof propMap, prop: string, val: string)
 
 const cache = new Map<string, any[]>()
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-row',
   functional: true,
   props: {
@@ -95,10 +95,9 @@ export default defineComponent({
     },
     ...alignContentProps,
   },
-  render () {
+  render (h, { props, data, children }) {
     // Super-fast memoization based on props, 5x faster than JSON.stringify
     let cacheKey = ''
-    const props = this.$props
     for (const prop in props) {
       cacheKey += String((props as any)[prop])
     }
@@ -129,10 +128,11 @@ export default defineComponent({
 
     return h(
       props.tag,
-      mergeData(this.$attrs, {
-        class: classList.concat('row'),
+      mergeData(data, {
+        staticClass: 'row',
+        class: classList,
       }),
-      this.$slots.default()
+      children
     )
   },
 })

package/src/components/VGrid/grid.ts

@@ -1,9 +1,9 @@
 // Types
-import { defineComponent, VNode, h } from 'vue'
+import Vue, { VNode } from 'vue'
 
 export default function VGrid (name: string) {
   /* @vue/component */
-  return defineComponent({
+  return Vue.extend({
     name: `v-${name}`,
 
     functional: true,
@@ -16,11 +16,7 @@ export default function VGrid (name: string) {
       },
     },
 
-    render (): VNode {
-      const data = this.$attrs
-      const children = this.$slots.default()
-      const props = this.$props
-
+    render (h, { props, data, children }): VNode {
       data.staticClass = (`${name} ${data.staticClass || ''}`).trim()
 
       const { attrs } = data

package/src/components/VHover/VHover.ts

@@ -37,7 +37,7 @@ export default mixins(
   },
 
   render (): VNode {
-    if (!this.$slots.default && this.value === undefined) {
+    if (!this.$scopedSlots.default && this.value === undefined) {
       consoleWarn('v-hover is missing a default scopedSlot or bound value', this)
 
       return null as any
@@ -46,8 +46,8 @@ export default mixins(
     let element: VNode | ScopedSlotChildren
 
     /* istanbul ignore else */
-    if (this.$slots.default) {
-      element = this.$slots.default({ hover: this.isActive })
+    if (this.$scopedSlots.default) {
+      element = this.$scopedSlots.default({ hover: this.isActive })
     }
 
     if (Array.isArray(element) && element.length === 1) {

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

@@ -13,7 +13,7 @@ import { wait } from '../../../../test'
 
 const vm = new Vue()
 const item = props => vm.$createElement('div', {
-  class: 'foobar',
+  staticClass: 'foobar',
   class: { fizzbuzz: props.hover },
 })
 

package/src/components/VIcon/VIcon.ts

@@ -10,10 +10,9 @@ import Themeable from '../../mixins/themeable'
 import { convertToUnit, keys, remapInternalIcon } from '../../util/helpers'
 
 // Types
-import { defineComponent, CreateElement, VNode, VNodeChildren, VNodeData, h } from 'vue'
+import Vue, { CreateElement, VNode, VNodeChildren, VNodeData } from 'vue'
 import mixins from '../../util/mixins'
 import { VuetifyIcon, VuetifyIconComponent } from 'vuetify/types/services/icons'
-import { normalizeAttrs } from '../../util/helpers'
 
 enum SIZE_MAP {
   xSmall = '12px',
@@ -32,7 +31,6 @@ function isSvgPath (icon: string): boolean {
   return (/^[mzlhvcsqta]\s*[-+.0-9][^mlhvzcsqta]+/i.test(icon) && /[\dz]$/i.test(icon) && icon.length > 4)
 }
 
-
 const VIcon = mixins(
   BindsAttrs,
   Colorable,
@@ -61,7 +59,7 @@ const VIcon = mixins(
     },
     hasClickListener (): boolean {
       return Boolean(
-        this.listeners$.onClick
+        this.listeners$.click || this.listeners$['!click']
       )
     },
   },
@@ -69,12 +67,8 @@ const VIcon = mixins(
   methods: {
     getIcon (): VuetifyIcon {
       let iconName = ''
-      if (this.$slots.default) {
-        const children = this.$slots.default()[0].children
-        if(typeof children === 'string')
-          iconName = this.$slots.default()[0].children!.trim()
+      if (this.$slots.default) iconName = this.$slots.default[0].text!.trim()
 
-      }
       return remapInternalIcon(this, iconName)
     },
     getSize (): string | undefined {
@@ -94,26 +88,23 @@ const VIcon = mixins(
     },
     // Component data for both font icon and SVG wrapper span
     getDefaultData (): VNodeData {
-      const data = {
+      return {
+        staticClass: 'v-icon notranslate',
         class: {
           'v-icon--disabled': this.disabled,
           'v-icon--left': this.left,
           'v-icon--link': this.hasClickListener,
           'v-icon--right': this.right,
           'v-icon--dense': this.dense,
-          'v-icon': true,
-          'notranslate': true
         },
-        'aria-hidden': !this.hasClickListener,
-        type: this.hasClickListener ? 'button' : undefined,
-        // ...this.attrs$,
-        ...this.listeners$,
-      }
-
-      if(this.hasClickListener && this.disabled) {
-        data.disabled = true
+        attrs: {
+          'aria-hidden': !this.hasClickListener,
+          disabled: this.hasClickListener && this.disabled,
+          type: this.hasClickListener ? 'button' : undefined,
+          ...this.attrs$,
+        },
+        on: this.listeners$,
       }
-      return data
     },
     getSvgWrapperData () {
       const fontSize = this.getSize()
@@ -133,9 +124,9 @@ const VIcon = mixins(
       data.class = { ...data.class, ...this.themeClasses }
       this.setTextColor(this.color, data)
     },
-    renderFontIcon (icon: string): VNode {
+    renderFontIcon (icon: string, h: CreateElement): VNode {
       const newChildren: VNodeChildren = []
-      let data = this.getDefaultData()
+      const data = this.getDefaultData()
 
       let iconType = 'material-icons'
       // Material Icon delimiter is _
@@ -151,13 +142,6 @@ const VIcon = mixins(
         if (isFontAwesome5(iconType)) iconType = ''
       }
 
-      if(typeof data.class === 'string') {
-        data.class = data.class.split(' ').reduce((classes, className) => {
-          classes[className] = true
-          return classes
-        }, {})
-      }
-
       data.class[iconType] = true
       data.class[icon] = !isMaterialIcon
 
@@ -166,9 +150,9 @@ const VIcon = mixins(
 
       this.applyColors(data)
 
-      return h(this.hasClickListener ? 'button' : this.tag, normalizeAttrs(data), {default: () => newChildren})
+      return h(this.hasClickListener ? 'button' : this.tag, data, newChildren)
     },
-    renderSvgIcon (icon: string): VNode {
+    renderSvgIcon (icon: string, h: CreateElement): VNode {
       const svgData: VNodeData = {
         class: 'v-icon__svg',
         attrs: {
@@ -199,7 +183,8 @@ const VIcon = mixins(
       ])
     },
     renderSvgIconComponent (
-      icon: VuetifyIconComponent
+      icon: VuetifyIconComponent,
+      h: CreateElement
     ): VNode {
       const data: VNodeData = {
         class: {
@@ -222,58 +207,48 @@ const VIcon = mixins(
       data.props = icon.props
       data.nativeOn = data.on
 
-      return h(this.hasClickListener ? 'button' : 'span', this.getSvgWrapperData(), {default: () =>[
+      return h(this.hasClickListener ? 'button' : 'span', this.getSvgWrapperData(), [
         h(component, data),
-      ]})
+      ])
     },
   },
 
-  render (): VNode {
+  render (h: CreateElement): VNode {
     const icon = this.getIcon()
 
     if (typeof icon === 'string') {
       if (isSvgPath(icon)) {
-        return this.renderSvgIcon(icon)
+        return this.renderSvgIcon(icon, h)
       }
-      return this.renderFontIcon(icon)
+      return this.renderFontIcon(icon, h)
     }
 
-    return this.renderSvgIconComponent(icon)
+    return this.renderSvgIconComponent(icon, h)
   },
 })
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-icon',
 
   $_wrapperFor: VIcon,
 
   functional: true,
 
-  mounted() {
-    this.$el.innerHTML = ''
-  },
-
-  render (): VNode {
-    const data = { ...this.$attrs }
+  render (h, { data, children }): VNode {
+    let iconName = ''
 
+    // Support usage of v-text and v-html
+    if (data.domProps) {
+      iconName = data.domProps.textContent ||
+        data.domProps.innerHTML ||
+        iconName
 
-    // console.log(children && children[0]?.children)
-    return h(VIcon, data, {
-      default: () => {
-        let iconName = ''
-
-        // Support usage of v-text and v-html
-        // if (data.domProps) {
-        if(this.$.vnode.props?.textContent) {
-          iconName = this.$.vnode.props.textContent  ||
-          this.$.vnode.props.innerHTML ||
-            iconName
-        }
-
-        const children = this.$slots.default?.()
+      // Remove nodes so it doesn't
+      // overwrite our changes
+      delete data.domProps.textContent
+      delete data.domProps.innerHTML
+    }
 
-        return iconName ? [iconName] : children && children[0]?.children
-      }
-    })
-  }
+    return h(VIcon, data, iconName ? [iconName] : children)
+  },
 })