@dimailn/vuetify 2.7.2-alpha24 → 2.7.2-alpha26

package/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerEdit.spec.ts.snap

@@ -7,6 +7,7 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
            min="0"
            max="255"
            step="1"
+           value="0"
     >
     <span>
       R
@@ -17,6 +18,7 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
            min="0"
            max="255"
            step="1"
+           value="0"
     >
     <span>
       G
@@ -27,6 +29,7 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
            min="0"
            max="255"
            step="1"
+           value="0"
     >
     <span>
       B
@@ -37,6 +40,7 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       A
@@ -49,7 +53,6 @@ exports[`VColorPickerEdit.ts should change mode 1`] = `
       <i aria-hidden="true"
          class="v-icon notranslate material-icons theme--light"
       >
-        $unfold
       </i>
     </span>
   </button>
@@ -63,6 +66,7 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
            min="0"
            max="360"
            step="1"
+           value="0"
     >
     <span>
       H
@@ -73,6 +77,7 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       S
@@ -83,6 +88,7 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       L
@@ -93,6 +99,7 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       A
@@ -105,7 +112,6 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
       <i aria-hidden="true"
          class="v-icon notranslate material-icons theme--light"
       >
-        $unfold
       </i>
     </span>
   </button>
@@ -115,7 +121,9 @@ exports[`VColorPickerEdit.ts should change mode 2`] = `
 exports[`VColorPickerEdit.ts should change mode 3`] = `
 <div class="v-color-picker__edit">
   <div class="v-color-picker__input">
-    <input maxlength="9">
+    <input maxlength="9"
+           value="#00000000"
+    >
     <span>
       HEX
     </span>
@@ -127,7 +135,6 @@ exports[`VColorPickerEdit.ts should change mode 3`] = `
       <i aria-hidden="true"
          class="v-icon notranslate material-icons theme--light"
       >
-        $unfold
       </i>
     </span>
   </button>
@@ -141,6 +148,7 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
            min="0"
            max="360"
            step="1"
+           value="0"
     >
     <span>
       H
@@ -151,6 +159,7 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       S
@@ -161,6 +170,7 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       L
@@ -171,6 +181,7 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       A
@@ -183,7 +194,6 @@ exports[`VColorPickerEdit.ts should change mode 4`] = `
       <i aria-hidden="true"
          class="v-icon notranslate material-icons theme--light"
       >
-        $unfold
       </i>
     </span>
   </button>
@@ -197,6 +207,7 @@ exports[`VColorPickerEdit.ts should hide mode switch button 1`] = `
            min="0"
            max="255"
            step="1"
+           value="0"
     >
     <span>
       R
@@ -207,6 +218,7 @@ exports[`VColorPickerEdit.ts should hide mode switch button 1`] = `
            min="0"
            max="255"
            step="1"
+           value="0"
     >
     <span>
       G
@@ -217,6 +229,7 @@ exports[`VColorPickerEdit.ts should hide mode switch button 1`] = `
            min="0"
            max="255"
            step="1"
+           value="0"
     >
     <span>
       B
@@ -227,6 +240,7 @@ exports[`VColorPickerEdit.ts should hide mode switch button 1`] = `
            min="0"
            max="1"
            step="0.01"
+           value="0"
     >
     <span>
       A
@@ -242,7 +256,8 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
            min="0"
            max="255"
            step="1"
-           disabled="disabled"
+           disabled
+           value="0"
     >
     <span>
       R
@@ -253,7 +268,8 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
            min="0"
            max="255"
            step="1"
-           disabled="disabled"
+           disabled
+           value="0"
     >
     <span>
       G
@@ -264,7 +280,8 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
            min="0"
            max="255"
            step="1"
-           disabled="disabled"
+           disabled
+           value="0"
     >
     <span>
       B
@@ -275,21 +292,21 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
            min="0"
            max="1"
            step="0.01"
-           disabled="disabled"
+           disabled
+           value="0"
     >
     <span>
       A
     </span>
   </div>
   <button type="button"
-          disabled="disabled"
+          disabled
           class="v-btn v-btn--disabled v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">
       <i aria-hidden="true"
          class="v-icon notranslate material-icons theme--light"
       >
-        $unfold
       </i>
     </span>
   </button>

package/src/components/VDataIterator/VDataFooter.ts

@@ -156,7 +156,7 @@ export default defineComponent({
         // light: this.light // TODO: add mixin
         onClick: click,
         'aria-label': label, // TODO: Localization
-      }, [h(VIcon, icon)])
+      }, () => [h(VIcon, {}, () => icon)])
     },
     genIcons () {
       const before: VNodeChildrenArrayContents = []

package/src/components/VDataTable/VDataTable.ts

@@ -298,7 +298,7 @@ export default mixins(
     genLoading () {
       const th = h('th', {
         class: 'column',
-        attrs: this.colspanAttrs,
+        ...this.colspanAttrs,
       }, [this.genProgress()])
 
       const tr = h('tr', {
@@ -348,7 +348,7 @@ export default mixins(
         class: 'v-data-table__empty-wrapper',
       }, [
         h('td', {
-          attrs: this.colspanAttrs,
+          ...this.colspanAttrs,
         }, content),
       ])
     },
@@ -404,7 +404,7 @@ export default mixins(
           icon: true,
           small: true,
           onClick: toggleFn
-        }, [h(VIcon, [isOpen ? '$minus' : '$plus'])])
+        }, () => [h(VIcon, {}, () => [isOpen ? '$minus' : '$plus'])])
 
         const remove = h(VBtn, {
           class: 'ma-0',
@@ -415,11 +415,11 @@ export default mixins(
           on: {
             click: removeFn,
           },
-        }, [h(VIcon, ['$close'])])
+        }, () => [h(VIcon, {}, () => ['$close'])])
 
         const column = h('td', {
           class: 'text-start',
-          attrs: this.colspanAttrs,
+          ...this.colspanAttrs,
         }, [toggle, `${this.groupByText}: ${group}`, remove])
 
         children.unshift(h('template', { slot: 'column.header' }, [column]))
@@ -528,7 +528,7 @@ export default mixins(
             e.stopPropagation()
             data.expand(!data.isExpanded)
           }
-        }, [this.expandIcon])
+        }, () => [this.expandIcon])
       }
 
       return h(this.isMobile ? MobileRow : Row, {
@@ -634,11 +634,11 @@ export default mixins(
           this.genBody(props),
           this.genFoot(props),
         ],
-        top: getSlot(this, 'top', {
+        top: () => getSlot(this, 'top', {
           ...props,
           isMobile: this.isMobile,
         }, true),
-        bottom: this.genFooters(props)
+        bottom: () => this.genFooters(props)
       })
     }
   },

package/src/components/VDataTable/VDataTableHeader.ts

@@ -33,12 +33,10 @@ export default defineComponent({
     }
 
     // dedupeModelListeners(data)
-    const children = rebuildSlots(this.$slots, h)
-
     if (props.mobile) {
-      return h(VDataTableHeaderMobile, data, children)
+      return h(VDataTableHeaderMobile, data, this.$slots)
     } else {
-      return h(VDataTableHeaderDesktop, data, children)
+      return h(VDataTableHeaderDesktop, data, this.$slots)
     }
   },
 })

package/src/components/VDataTable/VEditDialog.ts

@@ -69,7 +69,7 @@ export default mixins(Returnable, Themeable).extend({
         color: 'primary',
         light: true,
         onClick: fn,
-      }, text)
+      }, () => text)
     },
     genActions (): VNode {
       return h('div', {
@@ -123,7 +123,7 @@ export default mixins(Returnable, Themeable).extend({
           ])
         },
       },
-    }, [
+    }, () => [
       this.genContent(),
       this.large ? this.genActions() : null,
     ])

package/src/components/VDataTable/mixins/header.ts

@@ -72,7 +72,7 @@ export default mixins<HeaderOptions>().extend({
       return h(VIcon, {
         class: 'v-data-table-header__icon',
         size: 18,
-      }, [this.sortIcon])
+      }, () => [this.sortIcon])
     },
   },
 })

package/src/components/VDatePicker/VDatePickerHeader.ts

@@ -90,8 +90,8 @@ export default mixins(
           e.stopPropagation()
           this.$emit('input', this.calculateChange(change))
         }
-      }, [
-        h(VIcon, ((change < 0) === !this.$vuetify.rtl) ? this.prevIcon : this.nextIcon),
+      }, () => [
+        h(VIcon, {}, () => (((change < 0) === !this.$vuetify.rtl) ? this.prevIcon : this.nextIcon)),
       ])
     },
     calculateChange (sign: number) {
@@ -114,7 +114,7 @@ export default mixins(
 
       const transition = h(Transition, {
         name: (this.isReversing === !this.$vuetify.rtl) ? 'tab-reverse-transition' : 'tab-transition',
-      }, [header])
+      }, () => [header])
 
       return h('div', {
         class: ['v-date-picker-header__value', {

package/src/components/VDatePicker/VDatePickerTitle.ts

@@ -59,7 +59,7 @@ export default mixins(
     genYearIcon (): VNode {
       return h(VIcon, {
         dark: true,
-      }, this.yearIcon)
+      }, () => this.yearIcon)
     },
     getYearBtn (): VNode {
       return this.genPickerButton('selectingYear', true, [
@@ -70,7 +70,7 @@ export default mixins(
     genTitleText (): VNode {
       return h(Transition, {
         name: this.computedTransition,
-      }, [
+      }, () => [
         h('div', {
           innerHTML: this.date || ' ',
           key: this.value

package/src/components/VDatePicker/mixins/date-picker-table.ts

@@ -213,7 +213,7 @@ export default mixins(
     genTable (staticClass: string, children: VNodeChildren, calculateTableDate: CalculateTableDateFunction) {
       const transition = h(Transition, {
         name: this.computedTransition,
-      }, [h('table', { key: this.tableDate }, children)])
+      }, () => [h('table', { key: this.tableDate }, children)])
 
       const touchDirective = [
         Touch,

package/src/components/VDialog/VDialog.ts

@@ -244,7 +244,7 @@ export default baseMixins.extend({
           root: true,
           light: this.light,
           dark: this.dark
-        }, [
+        }, () => [
           h('div', {
             class: this.contentClasses,
             role: 'dialog',
@@ -266,7 +266,7 @@ export default baseMixins.extend({
         name: this.transition,
         origin: this.origin,
         appear: true
-      }, [content])
+      }, () => [content])
     },
     genInnerContent () {
       const directives = [

package/src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -60,7 +60,7 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
-    return h(VExpandTransition, this.showLazyContent(() => [
+    return h(VExpandTransition, {}, () => this.showLazyContent(() => [
       withDirectives(h('div', this.setBackgroundColor(this.color, {
         class: 'v-expansion-panel-content'
       }), [

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -83,9 +83,9 @@ export default baseMixins.extend({
     },
     genIcon () {
       const icon = getSlot(this, 'actions', { open: this.isActive }) ||
-        [h(VIcon, this.expandIcon)]
+        [h(VIcon, {}, () => this.expandIcon)]
 
-      return h(VFadeTransition, [
+      return h(VFadeTransition, {}, () => [
         withDirectives(h('div', {
           class: ['v-expansion-panel-header__icon', {
             'v-expansion-panel-header__icon--disable-rotate': this.disableIconRotate,

package/src/components/VImg/VImg.ts

@@ -131,7 +131,7 @@ export default mixins(
       return h(Transition, {
         name: this.transition,
         mode: 'in-out',
-      }, [image])
+      }, () => [image])
     },
   },
 
@@ -265,7 +265,7 @@ export default mixins(
         return h(Transition, {
           appear: true,
           name: this.transition,
-        }, placeholder)
+        }, () => placeholder)
       }
     },
   },

package/src/components/VInput/VInput.ts

@@ -15,6 +15,7 @@ import {
   convertToUnit,
   getSlot,
   kebabCase,
+  normalizeClasses,
 } from '../../util/helpers'
 import mergeData from '../../util/mergeData'
 
@@ -227,7 +228,7 @@ export default baseMixins.extend({
         h(
           VIcon,
           data,
-          icon
+          () => icon
         ),
       ])
     },
@@ -251,7 +252,7 @@ export default baseMixins.extend({
         focused: this.hasState,
         for: this.computedId,
         light: this.light,
-      }, getSlot(this, 'label') || this.label)
+      }, () => getSlot(this, 'label') || this.label)
     },
     genMessages () {
       if (!this.showDetails) return null
@@ -320,8 +321,13 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
+    const { class: additionalClasses, ...restAttrs } = this.$attrs as Record<string, any>
+
     return h('div', this.setTextColor(this.validationState, {
-      class: {'v-input': true, ...this.classes},
-    }), this.genContent())
+      class: { 'v-input': true, ...this.classes, ...normalizeClasses(additionalClasses) },
+      ...restAttrs,
+    }), {
+      default: () => this.genContent(),
+    })
   },
 })