@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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/VDataIterator/index.ts

@@ -5,6 +5,6 @@ export { VDataIterator, VDataFooter }
 export default {
   $_vuetify_subcomponents: {
     VDataIterator,
-    VDataFooter,
-  },
+    VDataFooter
+  }
 }

package/src/components/VDataTable/MobileRow.ts

@@ -12,7 +12,7 @@ export default defineComponent({
     hideDefaultHeader: Boolean,
     index: Number,
     item: Object,
-    rtl: Boolean,
+    rtl: Boolean
   },
 
   render (): VNode {
@@ -23,7 +23,7 @@ export default defineComponent({
 
     const columns: VNode[] = props.headers.map((header: DataTableHeader) => {
       const classes = {
-        'v-data-table__mobile-row': true,
+        'v-data-table__mobile-row': true
       }
 
       const children = []
@@ -38,7 +38,7 @@ export default defineComponent({
           isMobile: true,
           header,
           index: props.index,
-          value,
+          value
         }))
       } else {
         children.push(value == null ? value : String(value))
@@ -46,14 +46,14 @@ export default defineComponent({
 
       const mobileRowChildren = [
         h('div', {
-          class: 'v-data-table__mobile-row__cell',
-        }, children),
+          class: 'v-data-table__mobile-row__cell'
+        }, children)
       ]
 
       if (header.value !== 'dataTableSelect' && !props.hideDefaultHeader) {
         mobileRowChildren.unshift(
           h('div', {
-            class: 'v-data-table__mobile-row__header',
+            class: 'v-data-table__mobile-row__header'
           }, [header.text])
         )
       }
@@ -62,5 +62,5 @@ export default defineComponent({
     })
 
     return h('tr', { ...data, class: 'v-data-table__mobile-table-row' }, columns)
-  },
+  }
 })

package/src/components/VDataTable/Row.ts

@@ -5,9 +5,14 @@ import { DataTableHeader } from 'vuetify/types'
 // Utils
 import { getObjectValueByPath, wrapInArray } from '../../util/helpers'
 
+function vnodeTag (vnode: VNode | undefined): string | undefined {
+  const t = vnode?.type
+  return typeof t === 'string' ? t : undefined
+}
+
 function needsTd (slot: VNode[] | undefined) {
   return slot!.length !== 1 ||
-    !['td', 'th'].includes(slot![0]?.tag!)
+    !['td', 'th'].includes(vnodeTag(slot![0])!)
 }
 
 export default defineComponent({
@@ -19,7 +24,7 @@ export default defineComponent({
     headers: Array as PropType<DataTableHeader[]>,
     index: Number,
     item: Object,
-    rtl: Boolean,
+    rtl: Boolean
   },
 
   render (): VNode {
@@ -39,10 +44,9 @@ export default defineComponent({
           isMobile: false,
           header,
           index: props.index,
-          value,
+          value
         })))
-      }
-      else {
+      } else {
         children.push(value == null ? value : String(value))
       }
 
@@ -54,13 +58,13 @@ export default defineComponent({
             textAlign,
             header.cellClass,
             {
-              'v-data-table__divider': header.divider,
-            },
-          ],
+              'v-data-table__divider': header.divider
+            }
+          ]
         }, children)
         : children
     })
 
     return h('tr', data, columns)
-  },
+  }
 })

package/src/components/VDataTable/RowGroup.ts

@@ -1,50 +1,67 @@
-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,
+      default: true
     },
     headerClass: {
       type: String,
-      default: 'v-row-group__header',
+      default: 'v-row-group__header'
     },
     contentClass: String,
     summaryClass: {
       type: String,
-      default: 'v-row-group__summary',
-    },
+      default: 'v-row-group__summary'
+    }
+  },
+
+  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'])
+        class: props.headerClass
+      }, 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'])
+        class: props.summaryClass
+      }, columnSummarySlot))
+    } else if (rowSummarySlot) {
+      children.push(...(Array.isArray(rowSummarySlot) ? rowSummarySlot : [rowSummarySlot]))
     }
 
-    return children as any
-  },
+    return h(Fragment, children)
+  }
 })