@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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"
+                  <i class="v-icon notranslate theme--light material-icons"
+                     aria-hidden="true"
                   >
                   </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+                  <i class="v-icon notranslate theme--light material-icons"
+                     aria-hidden="true"
                   >
                   </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+                  <i class="v-icon notranslate theme--light material-icons"
+                     aria-hidden="true"
                   >
                   </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+                  <i class="v-icon notranslate theme--light material-icons"
+                     aria-hidden="true"
                   >
                   </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+                  <i class="v-icon notranslate theme--light material-icons"
+                     aria-hidden="true"
                   >
                   </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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"
+          <i class="v-icon notranslate theme--light material-icons"
+             aria-hidden="true"
           >
           </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

@@ -99,10 +99,8 @@ export default mixins(
 ).extend({
   name: 'v-data-table',
 
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
+  emits: ['click:row', 'update:options', 'update:page', 'update:items-per-page', 'update:sort-by', 'update:sort-desc', 'update:group-by', 'update:group-desc', 'pagination', 'current-items', 'page-count', 'click', 'mousedown', 'mouseup', 'touchstart', 'touchend'],
+
 
   props: {
     headers: {
@@ -111,6 +109,7 @@ export default mixins(
     } as PropValidator<DataTableHeader[]>,
     showSelect: Boolean,
     checkboxColor: String,
+    color: String,
     showExpand: Boolean,
     showGroupBy: Boolean,
     // TODO: Fix
@@ -241,7 +240,7 @@ export default mixins(
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.calculateWidths) {
       window.removeEventListener('resize', this.calcWidths)
     }
@@ -298,7 +297,7 @@ export default mixins(
     genLoading () {
       const th = h('th', {
         class: 'column',
-        attrs: this.colspanAttrs,
+        ...this.colspanAttrs,
       }, [this.genProgress()])
 
       const tr = h('tr', {
@@ -348,7 +347,7 @@ export default mixins(
         class: 'v-data-table__empty-wrapper',
       }, [
         h('td', {
-          attrs: this.colspanAttrs,
+          ...this.colspanAttrs,
         }, content),
       ])
     },
@@ -404,22 +403,18 @@ 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',
-          props: {
-            icon: true,
-            small: true,
-          },
-          on: {
-            click: removeFn,
-          },
-        }, [h(VIcon, ['$close'])])
+          icon: true,
+          small: true,
+          onClick: removeFn,
+        }, () => [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]))
@@ -441,9 +436,7 @@ export default mixins(
 
       return h(RowGroup, {
         key: group,
-        props: {
-          value: isOpen,
-        },
+        modelValue: isOpen,
       }, children)
     },
     genRows (items: any[], props: DataScopeProps) {
@@ -491,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]),
@@ -511,10 +502,10 @@ export default mixins(
           isMobile: this.isMobile,
         }) : () => h(VSimpleCheckbox, {
           class: 'v-data-table__checkbox',
-          value: data.isSelected,
+          modelValue: data.isSelected,
           disabled: !this.isSelectable(item),
           color: this.checkboxColor ?? '',
-          onInput: (val: boolean) => data.select(val),
+          'onUpdate:modelValue': (val: boolean) => data.select(val),
         })
       }
 
@@ -528,7 +519,7 @@ export default mixins(
             e.stopPropagation()
             data.expand(!data.isExpanded)
           }
-        }, [this.expandIcon])
+        }, () => [this.expandIcon])
       }
 
       return h(this.isMobile ? MobileRow : Row, {
@@ -543,7 +534,7 @@ export default mixins(
         index,
         item,
         rtl: this.$vuetify.rtl,
-        on: data.on,
+        ...data.on,
       }, scopedSlots)
     },
     genBody (props: DataScopeProps): VNode | string | VNodeChildren {
@@ -634,11 +625,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

@@ -14,14 +14,12 @@ 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({
   name: 'v-data-table-header',
 
-  functional: true,
-
   props: {
     ...header.props,
     mobile: Boolean,
@@ -29,15 +27,16 @@ export default defineComponent({
 
   render () {
     const props = this.$props
-    let data = this.$attrs
+    const data = {
+      ...this.$attrs,
+      ...props,
+    }
 
     // dedupeModelListeners(data)
-    const children = rebuildSlots(this.$slots, h)
-
-    if (this.mobile) {
-      return h(VDataTableHeaderMobile, data, children)
+    if (props.mobile) {
+      return h(VDataTableHeaderMobile, data, this.$slots)
     } else {
-      return h(VDataTableHeaderDesktop, data, children)
+      return h(VDataTableHeaderDesktop, data, this.$slots)
     }
   },
 })

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -8,6 +8,15 @@ import { DataTableHeader } from 'vuetify/types'
 export default mixins(header).extend({
   name: 'v-data-table-header-desktop',
 
+  props: {
+    mobile: Boolean,
+  },
+
+  emits: [
+    'group',
+    'sort',
+  ],
+
   methods: {
     genGroupByToggle (header: DataTableHeader) {
       return h('span', {
@@ -110,7 +119,7 @@ export default mixins(header).extend({
     return h('thead', {
       class: 'v-data-table-header',
     }, [
-      h('tr', this.headers.map(header => this.genHeader(header))),
+      h('tr', this.headers?.map(header => this.genHeader(header)) || []),
     ])
   },
 })