@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

package/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap

@@ -16,7 +16,9 @@ exports[`VDataIterator.ts should render and match snapshot 1`] = `
   <div class="v-data-footer">
     <div class="v-data-footer__select">
       Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
+      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"
+           aria-label="Items per page:"
+      >
         <div class="v-input__control">
           <div role="button"
                aria-haspopup="listbox"
@@ -30,17 +32,17 @@ exports[`VDataIterator.ts should render and match snapshot 1`] = `
                   10
                 </div>
                 <input aria-label="Items per page:"
-                       id="input-4"
-                       readonly="readonly"
-                       type="text"
                        aria-readonly="false"
                        autocomplete="off"
+                       id="input-4"
+                       readonly
+                       type="text"
                 >
               </div>
               <div class="v-input__append-inner">
                 <div class="v-input__icon v-input__icon--append">
                   <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
+                     class="v-icon notranslate material-icons theme--light"
                   >
                   </i>
                 </div>
@@ -59,28 +61,28 @@ exports[`VDataIterator.ts should render and match snapshot 1`] = `
       –
     </div>
     <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Previous page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
       </button>
     </div>
     <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Next page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
@@ -107,12 +109,14 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
   <div class="v-data-footer">
     <div class="v-data-footer__select">
       Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
+      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"
+           aria-label="Items per page:"
+      >
         <div class="v-input__control">
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-16"
+               aria-owns="list-18"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -121,17 +125,17 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
                   10
                 </div>
                 <input aria-label="Items per page:"
-                       id="input-16"
-                       readonly="readonly"
-                       type="text"
                        aria-readonly="false"
                        autocomplete="off"
+                       id="input-18"
+                       readonly
+                       type="text"
                 >
               </div>
               <div class="v-input__append-inner">
                 <div class="v-input__icon v-input__icon--append">
                   <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
+                     class="v-icon notranslate material-icons theme--light"
                   >
                   </i>
                 </div>
@@ -150,28 +154,28 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
       1-4 of 4
     </div>
     <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Previous page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
       </button>
     </div>
     <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Next page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
@@ -189,12 +193,14 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
   <div class="v-data-footer">
     <div class="v-data-footer__select">
       Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
+      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"
+           aria-label="Items per page:"
+      >
         <div class="v-input__control">
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-27"
+               aria-owns="list-32"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -203,17 +209,17 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                   10
                 </div>
                 <input aria-label="Items per page:"
-                       id="input-27"
-                       readonly="readonly"
-                       type="text"
                        aria-readonly="false"
                        autocomplete="off"
+                       id="input-32"
+                       readonly
+                       type="text"
                 >
               </div>
               <div class="v-input__append-inner">
                 <div class="v-input__icon v-input__icon--append">
                   <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
+                     class="v-icon notranslate material-icons theme--light"
                   >
                   </i>
                 </div>
@@ -232,28 +238,28 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
       –
     </div>
     <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Previous page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
       </button>
     </div>
     <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Next page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
@@ -271,12 +277,14 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
   <div class="v-data-footer">
     <div class="v-data-footer__select">
       Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
+      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"
+           aria-label="Items per page:"
+      >
         <div class="v-input__control">
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-27"
+               aria-owns="list-32"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -285,17 +293,17 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                   10
                 </div>
                 <input aria-label="Items per page:"
-                       id="input-27"
-                       readonly="readonly"
-                       type="text"
                        aria-readonly="false"
                        autocomplete="off"
+                       id="input-32"
+                       readonly
+                       type="text"
                 >
               </div>
               <div class="v-input__append-inner">
                 <div class="v-input__icon v-input__icon--append">
                   <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
+                     class="v-icon notranslate material-icons theme--light"
                   >
                   </i>
                 </div>
@@ -314,28 +322,28 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
       –
     </div>
     <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Previous page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
       </button>
     </div>
     <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Next page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
@@ -353,12 +361,14 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
   <div class="v-data-footer">
     <div class="v-data-footer__select">
       Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
+      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"
+           aria-label="Items per page:"
+      >
         <div class="v-input__control">
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-27"
+               aria-owns="list-32"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -367,17 +377,17 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                   10
                 </div>
                 <input aria-label="Items per page:"
-                       id="input-27"
-                       readonly="readonly"
-                       type="text"
                        aria-readonly="false"
                        autocomplete="off"
+                       id="input-32"
+                       readonly
+                       type="text"
                 >
               </div>
               <div class="v-input__append-inner">
                 <div class="v-input__icon v-input__icon--append">
                   <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
+                     class="v-icon notranslate material-icons theme--light"
                   >
                   </i>
                 </div>
@@ -396,28 +406,28 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
       –
     </div>
     <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Previous page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>
       </button>
     </div>
     <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+      <button class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              type="button"
+              disabled
               aria-label="Next page"
       >
         <span class="v-btn__content">
           <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
+             class="v-icon notranslate material-icons theme--light"
           >
           </i>
         </span>

package/src/components/VDataTable/RowGroup.ts

@@ -1,12 +1,12 @@
-import { defineComponent, VNode, h } from 'vue'
+import { defineComponent, VNode, h, Fragment } from 'vue'
+import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 export default defineComponent({
   name: 'row-group',
 
-  functional: true,
-
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       default: true,
     },
@@ -21,30 +21,47 @@ export default defineComponent({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   render (): VNode {
     const props = this.$props
-
-    const computedSlots = this.$slots
     const children = []
 
-    if (computedSlots['column.header']) {
+    const columnHeaderSlot = getSlot(this, 'column.header')
+    const rowHeaderSlot = getSlot(this, 'row.header')
+    const rowContentSlot = getSlot(this, 'row.content')
+    const columnSummarySlot = getSlot(this, 'column.summary')
+    const rowSummarySlot = getSlot(this, 'row.summary')
+
+    if (columnHeaderSlot) {
       children.push(h('tr', {
         class: props.headerClass,
-      }, computedSlots['column.header']))
-    } else if (computedSlots['row.header']) {
-      children.push(...computedSlots['row.header'])
+      }, columnHeaderSlot))
+    } else if (rowHeaderSlot) {
+      children.push(...(Array.isArray(rowHeaderSlot) ? rowHeaderSlot : [rowHeaderSlot]))
     }
 
-    if (computedSlots['row.content'] && props.value) children.push(...computedSlots['row.content'])
+    if (rowContentSlot && props.modelValue) {
+      children.push(...(Array.isArray(rowContentSlot) ? rowContentSlot : [rowContentSlot]))
+    }
 
-    if (computedSlots['column.summary']) {
+    if (columnSummarySlot) {
       children.push(h('tr', {
         class: props.summaryClass,
-      }, computedSlots['column.summary']))
-    } else if (computedSlots['row.summary']) {
-      children.push(...computedSlots['row.summary'])
+      }, columnSummarySlot))
+    } else if (rowSummarySlot) {
+      children.push(...(Array.isArray(rowSummarySlot) ? rowSummarySlot : [rowSummarySlot]))
     }
 
-    return children as any
+    return h(Fragment, children)
   },
 })

package/src/components/VDataTable/VDataTable.ts

@@ -109,6 +109,7 @@ export default mixins(
     } as PropValidator<DataTableHeader[]>,
     showSelect: Boolean,
     checkboxColor: String,
+    color: String,
     showExpand: Boolean,
     showGroupBy: Boolean,
     // TODO: Fix
@@ -406,13 +407,9 @@ export default mixins(
 
         const remove = h(VBtn, {
           class: 'ma-0',
-          props: {
-            icon: true,
-            small: true,
-          },
-          on: {
-            click: removeFn,
-          },
+          icon: true,
+          small: true,
+          onClick: removeFn,
         }, () => [h(VIcon, {}, () => ['$close'])])
 
         const column = h('td', {
@@ -439,9 +436,7 @@ export default mixins(
 
       return h(RowGroup, {
         key: group,
-        props: {
-          value: isOpen,
-        },
+        modelValue: isOpen,
       }, children)
     },
     genRows (items: any[], props: DataScopeProps) {
@@ -489,9 +484,7 @@ export default mixins(
       })])
 
       return h(RowGroup, {
-        props: {
-          value: isExpanded,
-        },
+        modelValue: isExpanded,
       }, [
         h('template', { slot: 'row.header' }, [headerRow]),
         h('template', { slot: 'row.content' }, [expandedRow]),
@@ -512,7 +505,7 @@ export default mixins(
           modelValue: data.isSelected,
           disabled: !this.isSelectable(item),
           color: this.checkboxColor ?? '',
-          onInput: (val: boolean) => data.select(val),
+          'onUpdate:modelValue': (val: boolean) => data.select(val),
         })
       }
 
@@ -541,7 +534,7 @@ export default mixins(
         index,
         item,
         rtl: this.$vuetify.rtl,
-        on: data.on,
+        ...data.on,
       }, scopedSlots)
     },
     genBody (props: DataScopeProps): VNode | string | VNodeChildren {

package/src/components/VDataTable/VDataTableHeader.ts

@@ -14,7 +14,7 @@ import mergeData from '../../util/mergeData'
 import rebuildSlots from '../../util/rebuildFunctionalSlots'
 
 // Types
-import {defineComponent, h} from 'vue'
+import { defineComponent, h } from 'vue'
 
 /* @vue/component */
 export default defineComponent({
@@ -27,7 +27,7 @@ export default defineComponent({
 
   render () {
     const props = this.$props
-    let data = {
+    const data = {
       ...this.$attrs,
       ...props,
     }

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -8,6 +8,10 @@ import { DataTableHeader } from 'vuetify/types'
 export default mixins(header).extend({
   name: 'v-data-table-header-desktop',
 
+  props: {
+    mobile: Boolean,
+  },
+
   emits: [
     'group',
     'sort',

package/src/components/VDataTable/VDataTableHeaderMobile.ts

@@ -1,5 +1,4 @@
-import {h} from 'vue'
-import { VNode, VNodeChildrenArrayContents } from 'vue'
+import { h, VNode, VNodeChildrenArrayContents } from 'vue'
 import mixins from '../../util/mixins'
 import VSelect from '../VSelect/VSelect'
 import VChip from '../VChip'
@@ -14,6 +13,7 @@ export default mixins(header).extend({
       type: String,
       default: '$vuetify.dataTable.sortBy',
     },
+    mobile: Boolean,
   },
 
   emits: ['sort'],
@@ -27,8 +27,8 @@ export default mixins(header).extend({
       const isDesc = this.options.sortDesc[sortIndex]
 
       children.push(h('div', {
-        class: 'v-chip__close',
         class: {
+          'v-chip__close': true,
           sortable: true,
           active: beingSorted,
           asc: beingSorted && !isDesc,
@@ -38,30 +38,23 @@ export default mixins(header).extend({
 
       return h(VChip, {
         class: 'sortable',
-        on: {
-          click: (e: MouseEvent) => {
-            e.stopPropagation()
-            this.$emit('sort', props.item.value)
-          },
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation()
+          this.$emit('sort', props.item.value)
         },
       }, children)
     },
     genSortSelect (items: any[]) {
       return h(VSelect, {
-        props: {
-          label: this.$vuetify.lang.t(this.sortByText),
-          items,
-          hideDetails: true,
-          multiple: this.options.multiSort,
-          value: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
-          menuProps: { closeOnContentClick: true },
-        },
-        on: {
-          change: (v: string | string[]) => this.$emit('sort', v),
-        },
-        scopedSlots: {
-          selection: props => this.genSortChip(props),
-        },
+        label: this.$vuetify.lang.t(this.sortByText),
+        items,
+        hideDetails: true,
+        multiple: this.options.multiSort,
+        modelValue: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
+        menuProps: { closeOnContentClick: true },
+        'onUpdate:modelValue': (v: string | string[]) => this.$emit('sort', v),
+      }, {
+        selection: (props: any) => this.genSortChip(props),
       })
     },
   },
@@ -76,9 +69,7 @@ export default mixins(header).extend({
           'v-data-table-header-mobile__select',
           ...wrapInArray(header.class),
         ],
-        attrs: {
-          width: header.width,
-        },
+        width: header.width,
       }, [this.genSelectAll()]))
     }
 

package/src/components/VDataTable/VEditDialog.ts

@@ -41,7 +41,7 @@ export default mixins(Returnable, Themeable).extend({
 
   data () {
     return {
-      isActive: false,
+      // isActive is provided by Returnable mixin
     }
   },
 
@@ -106,13 +106,13 @@ export default mixins(Returnable, Themeable).extend({
       transition: this.transition,
       origin: 'top right',
       right: true,
-      value: this.isActive,
+      modelValue: this.isActive,
       closeOnClick: !this.persistent,
       closeOnContentClick: false,
       eager: this.eager,
       light: this.light,
       dark: this.dark,
-      onInput: (val: boolean) => (this.isActive = val),
+      'onUpdate:modelValue': (val: boolean) => (this.isActive = val),
     }, {
       activator: ({ on }: { on: any }) => {
         return h('div', {

package/src/components/VDataTable/VSimpleTable.ts

@@ -1,10 +1,9 @@
-import {h} from 'vue'
+import { h, VNode } from 'vue'
 import './VSimpleTable.sass'
 
 import { convertToUnit, getSlot } from '../../util/helpers'
 import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
-import { VNode } from 'vue'
 
 export default mixins(Themeable).extend({
   name: 'v-simple-table',
@@ -30,7 +29,7 @@ export default mixins(Themeable).extend({
 
   methods: {
     genWrapper () {
-      return this.$slots.wrapper || h('div', {
+      return getSlot(this, 'wrapper') || h('div', {
         class: 'v-data-table__wrapper',
         style: {
           height: convertToUnit(this.height),