@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VSelect/VSelect.ts

@@ -21,12 +21,12 @@ import ClickOutside from '../../directives/click-outside'
 
 // Utilities
 import mergeData from '../../util/mergeData'
-import { getPropertyFromItem, getObjectValueByPath, keyCodes, normalizeAttrs } from '../../util/helpers'
+import { getPropertyFromItem, getObjectValueByPath, keyCodes } from '../../util/helpers'
 import { consoleError } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode, VNodeDirective, PropType, VNodeData, withDirectives, h } from 'vue'
+import { VNode, VNodeDirective, PropType, VNodeData } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import { SelectItemKey } from 'vuetify/types'
 
@@ -60,7 +60,7 @@ interface options extends InstanceType<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-select',
 
   directives: {
@@ -122,8 +122,8 @@ export default baseMixins.extend({
       // As long as a value is defined, show it
       // Otherwise, check if multiple
       // to determine which default to provide
-      lazyValue: this.modelValue !== undefined
-        ? this.modelValue
+      lazyValue: this.value !== undefined
+        ? this.value
         : this.multiple ? [] : undefined,
       selectedIndex: -1,
       selectedItems: [] as any[],
@@ -139,7 +139,7 @@ export default baseMixins.extend({
     },
     classes (): object {
       return {
-        ...VTextField.computed.classes.call(this),
+        ...VTextField.options.computed.classes.call(this),
         'v-select': true,
         'v-select--chips': this.hasChips,
         'v-select--chips--small': this.smallChips,
@@ -152,7 +152,7 @@ export default baseMixins.extend({
       return this.allItems
     },
     computedOwns (): string {
-      return `list-${this.$.uid}`
+      return `list-${this._uid}`
     },
     computedCounterValue (): number {
       const value = this.multiple
@@ -166,16 +166,14 @@ export default baseMixins.extend({
       return value.length
     },
     directives (): VNodeDirective[] | undefined {
-      return [
-        [
-          ClickOutside,
-          {
-            handler: () => this.isFocused && this.blur(),
-            closeConditional: this.closeConditional,
-            include: () => this.getOpenDependentElements(),
-          }
-        ]
-      ]
+      return this.isFocused ? [{
+        name: 'click-outside',
+        value: {
+          handler: this.blur,
+          closeConditional: this.closeConditional,
+          include: () => this.getOpenDependentElements(),
+        },
+      }] : undefined
     },
     dynamicHeight () {
       return 'auto'
@@ -184,7 +182,7 @@ export default baseMixins.extend({
       return this.chips || this.smallChips
     },
     hasSlot (): boolean {
-      return Boolean(this.hasChips || this.$slots.selection)
+      return Boolean(this.hasChips || this.$scopedSlots.selection)
     },
     isDirty (): boolean {
       return this.selectedItems.length > 0
@@ -196,19 +194,28 @@ export default baseMixins.extend({
       } : {}
 
       return {
-        ...attrs,
-        id: this.computedOwns,
-        action: this.multiple,
-        color: this.itemColor,
-        dense: this.dense,
-        hideSelected: this.hideSelected,
-        items: this.virtualizedItems,
-        itemDisabled: this.itemDisabled,
-        itemText: this.itemText,
-        itemValue: this.itemValue,
-        noDataText: this.$vuetify.lang.t(this.noDataText),
-        selectedItems: this.selectedItems,
-        onSelect: this.selectItem,
+        attrs: {
+          ...attrs,
+          id: this.computedOwns,
+        },
+        props: {
+          action: this.multiple,
+          color: this.itemColor,
+          dense: this.dense,
+          hideSelected: this.hideSelected,
+          items: this.virtualizedItems,
+          itemDisabled: this.itemDisabled,
+          itemText: this.itemText,
+          itemValue: this.itemValue,
+          noDataText: this.$vuetify.lang.t(this.noDataText),
+          selectedItems: this.selectedItems,
+        },
+        on: {
+          select: this.selectItem,
+        },
+        scopedSlots: {
+          item: this.$scopedSlots.item,
+        },
       }
     },
     staticList (): VNode {
@@ -216,9 +223,7 @@ export default baseMixins.extend({
         consoleError('assert: staticList should not be called if slots are used')
       }
 
-      return h(VSelectList, this.listData,  {
-        item: this.$slots.item,
-      })
+      return this.$createElement(VSelectList, this.listData)
     },
     virtualizedItems (): object[] {
       return (this.$_menuProps as any).auto
@@ -287,9 +292,7 @@ export default baseMixins.extend({
   methods: {
     /** @public */
     blur (e?: Event) {
-      console.log("BLUUUUR")
-
-      VTextField.methods.blur.call(this, e)
+      VTextField.options.methods.blur.call(this, e)
       this.isMenuActive = false
       this.isFocused = false
       this.selectedIndex = -1
@@ -365,21 +368,25 @@ export default baseMixins.extend({
       )
       const isInteractive = !isDisabled && this.isInteractive
 
-      return h(VChip, {
-        class: 'v-chip--select',
-        tabindex: -1,
-        close: this.deletableChips && isInteractive,
-        disabled: isDisabled,
-        inputValue: index === this.selectedIndex,
-        small: this.smallChips,
-        onClick: (e: MouseEvent) => {
-          if (!isInteractive) return
+      return this.$createElement(VChip, {
+        staticClass: 'v-chip--select',
+        attrs: { tabindex: -1 },
+        props: {
+          close: this.deletableChips && isInteractive,
+          disabled: isDisabled,
+          inputValue: index === this.selectedIndex,
+          small: this.smallChips,
+        },
+        on: {
+          click: (e: MouseEvent) => {
+            if (!isInteractive) return
 
-          e.stopPropagation()
+            e.stopPropagation()
 
-          this.selectedIndex = index
+            this.selectedIndex = index
+          },
+          'click:close': () => this.onChipInput(item),
         },
-        'onClick:close': () => this.onChipInput(item),
         key: JSON.stringify(this.getValue(item)),
       }, this.getText(item))
     },
@@ -390,10 +397,11 @@ export default baseMixins.extend({
         this.getDisabled(item)
       )
 
-      return h('div', this.setTextColor(color, {
-        class: ['v-select__selection v-select__selection--comma', {
+      return this.$createElement('div', this.setTextColor(color, {
+        staticClass: 'v-select__selection v-select__selection--comma',
+        class: {
           'v-select__selection--disabled': isDisabled,
-        }],
+        },
         key: JSON.stringify(this.getValue(item)),
       }), `${this.getText(item)}${last ? '' : ', '}`)
     },
@@ -413,8 +421,9 @@ export default baseMixins.extend({
 
       return [
         this.genFieldset(),
-        withDirectives(h('div', {
-          class: 'v-select__slot'
+        this.$createElement('div', {
+          staticClass: 'v-select__slot',
+          directives: this.directives,
         }, [
           this.genLabel(),
           this.prefix ? this.genAffix('prefix') : null,
@@ -423,7 +432,7 @@ export default baseMixins.extend({
           this.genClearIcon(),
           this.genIconSlot(),
           this.genHiddenInput(),
-        ]), this.directives),
+        ]),
         this.genMenu(),
         this.genProgress(),
       ]
@@ -433,58 +442,59 @@ export default baseMixins.extend({
       cb?: (e: Event) => void,
       extraData?: VNodeData
     ) {
-      const icon = VInput.methods.genIcon.call(this, type, cb, extraData)
+      const icon = VInput.options.methods.genIcon.call(this, type, cb, extraData)
 
       if (type === 'append') {
         // Don't allow the dropdown icon to be focused
-        const hasListeners = Object.keys(icon.children![0].props).some(key => key.startsWith('on'))
-        icon.children![0].data = mergeData(icon.children![0].props!, {
-          tabindex: hasListeners && '-1',
-          'aria-hidden': 'true',
-          'aria-label': undefined
+        icon.children![0].data = mergeData(icon.children![0].data!, {
+          attrs: {
+            tabindex: icon.children![0].componentOptions!.listeners && '-1',
+            'aria-hidden': 'true',
+            'aria-label': undefined,
+          },
         })
       }
 
       return icon
     },
     genInput (): VNode {
-      const input = VTextField.methods.genInput.call(this)
-
-      delete input.props.name
-
-      input.props = mergeData(input.props, {
-        value: null,
-        readonly: true,
-        type: 'text',
-        'aria-readonly': String(this.isReadonly),
-        'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
-        autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
-        placeholder: (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
-        onKeypress: this.onKeyPress,
+      const input = VTextField.options.methods.genInput.call(this)
+
+      delete input.data!.attrs!.name
+
+      input.data = mergeData(input.data!, {
+        domProps: { value: null },
+        attrs: {
+          readonly: true,
+          type: 'text',
+          'aria-readonly': String(this.isReadonly),
+          'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
+          autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
+          placeholder: (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
+        },
+        on: { keypress: this.onKeyPress },
       })
 
-      input.props = normalizeAttrs(input.props)
-
-      // console.log(input)
-
       return input
     },
     genHiddenInput (): VNode {
-      return h('input', {
-        value: this.lazyValue,
-        type: 'hidden',
-        name: this.attrs$.name
+      return this.$createElement('input', {
+        domProps: { value: this.lazyValue },
+        attrs: {
+          type: 'hidden',
+          name: this.attrs$.name,
+        },
       })
     },
     genInputSlot (): VNode {
-      const render = VTextField.methods.genInputSlot.call(this)
+      const render = VTextField.options.methods.genInputSlot.call(this)
 
-      render.props = {
+      render.data!.attrs = {
+        ...render.data!.attrs,
         role: 'button',
         'aria-haspopup': 'listbox',
         'aria-expanded': String(this.isMenuActive),
         'aria-owns': this.computedOwns,
-        ...render.props
       }
 
       return render
@@ -500,16 +510,15 @@ export default baseMixins.extend({
     genListWithSlot (): VNode {
       const slots = ['prepend-item', 'no-data', 'append-item']
         .filter(slotName => this.$slots[slotName])
-        .map(slotName => h('template', {
+        .map(slotName => this.$createElement('template', {
           slot: slotName,
         }, this.$slots[slotName]))
       // Requires destructuring due to Vue
       // modifying the `on` property when passed
       // as a referenced object
-
-      return h(VSelectList, {
+      return this.$createElement(VSelectList, {
         ...this.listData,
-      }, {...slots,item: this.$slots.item})
+      }, slots)
     },
     genMenu (): VNode {
       const props = this.$_menuProps as any
@@ -529,24 +538,25 @@ export default baseMixins.extend({
         props.attach = this.attach
       }
 
-      return h(VMenu, {
-        role: undefined,
-        ...props,
-        onInput: (val: boolean) => {
-          this.isMenuActive = val
-          this.isFocused = val
+      return this.$createElement(VMenu, {
+        attrs: { role: undefined },
+        props,
+        on: {
+          input: (val: boolean) => {
+            this.isMenuActive = val
+            this.isFocused = val
+          },
+          scroll: this.onScroll,
         },
-        onScroll: this.onScroll,
         ref: 'menu',
       }, [this.genList()])
     },
     genSelections (): VNode {
       let length = this.selectedItems.length
-
       const children = new Array(length)
 
       let genSelection
-      if (this.$slots.selection) {
+      if (this.$scopedSlots.selection) {
         genSelection = this.genSlotSelection
       } else if (this.hasChips) {
         genSelection = this.genChipSelection
@@ -562,13 +572,15 @@ export default baseMixins.extend({
         )
       }
 
-      return h('div', {
-        class: 'v-select__selections',
+      return this.$createElement('div', {
+        staticClass: 'v-select__selections',
       }, children)
     },
     genSlotSelection (item: object, index: number): VNode[] | undefined {
-      return this.$slots.selection!({
-        class: 'v-chip--select',
+      return this.$scopedSlots.selection!({
+        attrs: {
+          class: 'v-chip--select',
+        },
         parent: this,
         item,
         index,
@@ -738,7 +750,7 @@ export default baseMixins.extend({
         }
       }
 
-      VTextField.methods.onMouseUp.call(this, e)
+      VTextField.options.methods.onMouseUp.call(this, e)
     },
     onScroll () {
       if (!this.isMenuActive) {
@@ -879,7 +891,7 @@ export default baseMixins.extend({
     setValue (value: any) {
       if (!this.valueComparator(value, this.internalValue)) {
         this.internalValue = value
-        this.$emit('update:modelValue', value)
+        this.$emit('change', value)
       }
     },
     isAppendInner (target: any) {

package/src/components/VSelect/VSelectList.ts

@@ -22,7 +22,7 @@ import { getPropertyFromItem } from '../../util/helpers'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode, PropType, VNodeChildren, h } from 'vue'
+import { VNode, PropType, VNodeChildren } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import { SelectItemKey } from 'vuetify/types'
 
@@ -75,11 +75,15 @@ export default mixins(Colorable, Themeable).extend({
     },
     staticNoDataTile (): VNode {
       const tile = {
-        role: undefined,
-        onMousedown: (e: Event) => e.preventDefault(), // Prevent onBlur from being called
+        attrs: {
+          role: undefined,
+        },
+        on: {
+          mousedown: (e: Event) => e.preventDefault(), // Prevent onBlur from being called
+        },
       }
 
-      return h(VListItem, tile, [
+      return this.$createElement(VListItem, tile, [
         this.genTileContent(this.noDataText),
       ])
     },
@@ -87,17 +91,21 @@ export default mixins(Colorable, Themeable).extend({
 
   methods: {
     genAction (item: object, inputValue: any): VNode {
-      return h(VListItemAction, [
-        h(VSimpleCheckbox, {
-          color: this.color,
-          value: inputValue,
-          ripple: false,
-          onInput: () => this.$emit('select', item)
+      return this.$createElement(VListItemAction, [
+        this.$createElement(VSimpleCheckbox, {
+          props: {
+            color: this.color,
+            value: inputValue,
+            ripple: false,
+          },
+          on: {
+            input: () => this.$emit('select', item),
+          },
         }),
       ])
     },
     genDivider (props: { [key: string]: any }) {
-      return h(VDivider, { props })
+      return this.$createElement(VDivider, { props })
     },
     genFilteredText (text: string) {
       text = text || ''
@@ -109,10 +117,10 @@ export default mixins(Colorable, Themeable).extend({
       return [start, this.genHighlight(middle), end]
     },
     genHeader (props: { [key: string]: any }): VNode {
-      return h(VSubheader, { props }, props.header)
+      return this.$createElement(VSubheader, { props }, props.header)
     },
     genHighlight (text: string) {
-      return h('span', { class: 'v-list-item__mask' }, text)
+      return this.$createElement('span', { staticClass: 'v-list-item__mask' }, text)
     },
     getMaskedCharacters (text: string): {
       start: string
@@ -144,24 +152,30 @@ export default mixins(Colorable, Themeable).extend({
       }
 
       const tile = {
-        // Default behavior in list does not
-        // contain aria-selected by default
-        'aria-selected': String(value),
-        id: `list-item-${this._uid}-${index}`,
-        role: 'option',
-        onMousedown: (e: Event) => {
-          // Prevent onBlur from being called
-          e.preventDefault()
+        attrs: {
+          // Default behavior in list does not
+          // contain aria-selected by default
+          'aria-selected': String(value),
+          id: `list-item-${this._uid}-${index}`,
+          role: 'option',
+        },
+        on: {
+          mousedown: (e: Event) => {
+            // Prevent onBlur from being called
+            e.preventDefault()
+          },
+          click: () => disabled || this.$emit('select', item),
+        },
+        props: {
+          activeClass: this.tileActiveClass,
+          disabled,
+          ripple: true,
+          inputValue: value,
         },
-        onClick: () => disabled || this.$emit('select', item),
-        activeClass: this.tileActiveClass,
-        disabled,
-        ripple: true,
-        inputValue: value,
       }
 
-      if (!this.$slots.item) {
-        return h(VListItem, tile, [
+      if (!this.$scopedSlots.item) {
+        return this.$createElement(VListItem, tile, [
           this.action && !this.hideSelected && this.items.length > 0
             ? this.genAction(item, value)
             : null,
@@ -170,7 +184,7 @@ export default mixins(Colorable, Themeable).extend({
       }
 
       const parent = this
-      const scopedSlot = this.$slots.item({
+      const scopedSlot = this.$scopedSlots.item({
         parent,
         item,
         attrs: {
@@ -181,12 +195,12 @@ export default mixins(Colorable, Themeable).extend({
       })
 
       return this.needsTile(scopedSlot)
-        ? h(VListItem, tile, scopedSlot)
+        ? this.$createElement(VListItem, tile, scopedSlot)
         : scopedSlot
     },
     genTileContent (item: any, index = 0): VNode {
-      return h(VListItemContent, [
-        h(VListItemTitle, [
+      return this.$createElement(VListItemContent, [
+        this.$createElement(VListItemTitle, [
           this.genFilteredText(this.getText(item)),
         ]),
       ])
@@ -197,7 +211,7 @@ export default mixins(Colorable, Themeable).extend({
     needsTile (slot: VNode[] | undefined) {
       return slot!.length !== 1 ||
         slot![0].componentOptions == null ||
-        slot![0].componentOptions.Ctor.name !== 'v-list-item'
+        slot![0].componentOptions.Ctor.options.name !== 'v-list-item'
     },
     getDisabled (item: object) {
       return Boolean(getPropertyFromItem(item, this.itemDisabled, false))
@@ -232,14 +246,19 @@ export default mixins(Colorable, Themeable).extend({
 
     this.$slots['append-item'] && children.push(this.$slots['append-item'])
 
-    return h(VList, {
-      class: ['v-select-list', this.themeClasses],
-      role: 'listbox',
-      tabindex: -1,
-      onMousedown: (e: Event) => {
-        e.preventDefault()
+    return this.$createElement(VList, {
+      staticClass: 'v-select-list',
+      class: this.themeClasses,
+      attrs: {
+        role: 'listbox',
+        tabindex: -1,
+      },
+      on: {
+        mousedown: (e: Event) => {
+          e.preventDefault()
+        },
       },
-      dense: this.dense,
+      props: { dense: this.dense },
     }, children)
   },
 })

package/src/components/VSheet/VSheet.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VSheet.sass'
 
@@ -14,19 +13,18 @@ import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default mixins(
+  BindsAttrs,
+  Colorable,
+  Elevatable,
+  Measurable,
+  Roundable,
+  Themeable
+).extend({
   name: 'v-sheet',
-  mixins: [
-    BindsAttrs,
-    Colorable,
-    Elevatable,
-    Measurable,
-    Roundable,
-    Themeable
-  ],
 
   props: {
     outlined: Boolean,
@@ -53,7 +51,7 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
       class: this.classes,
       style: this.styles,
@@ -63,7 +61,7 @@ export default defineComponent({
     return h(
       this.tag,
       this.setBackgroundColor(this.color, data),
-      this.$slots.default?.()
+      this.$slots.default
     )
   },
 })