fix(VDataTable): fix passing kebab-cased footer props (#8286)

* fix(VDataTable): fix passing kebab-cased footer props items-per-page-text kebab-cased footer prop was not passed correctly to v-data-footer because v-data-table sets a different default value using camelCase. also fixed passing header props. closes #8254 * test(VDataTable): update snapshot
vuetifyjs · Aug 12, 2019 · b04d853 · b04d853
1 parent bff228e
commit b04d853
Showing 5 changed files with 134 additions and 5 deletions.
diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts
@@ -8,7 +8,7 @@ import VDataFooter from './VDataFooter'
 import Themeable from '../../mixins/themeable'
 
 // Helpers
-import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot } from '../../util/helpers'
+import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, camelizeObjectKeys } from '../../util/helpers'
 import { DataProps } from '../VData/VData'
 import { PropValidator } from 'vue/types/options'
 import { breaking, removed } from '../../util/console'
@@ -63,6 +63,9 @@ export default Themeable.extend({
     someItems (): boolean {
       return this.internalCurrentItems.some((i: any) => this.isSelected(i))
     },
+    sanitizedFooterProps (): object {
+      return camelizeObjectKeys(this.footerProps)
+    },
   },
 
   watch: {
@@ -219,7 +222,7 @@ export default Themeable.extend({
 
       const data = {
         props: {
-          ...this.footerProps,
+          ...this.sanitizedFooterProps,
           options: props.options,
           pagination: props.pagination,
         },

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -22,7 +22,7 @@ import MobileRow from './MobileRow'
 import ripple from '../../directives/ripple'
 
 // Helpers
-import { deepEqual, getObjectValueByPath, compareFn, getPrefixedScopedSlots, getSlot, defaultFilter, FilterFn } from '../../util/helpers'
+import { deepEqual, getObjectValueByPath, compareFn, getPrefixedScopedSlots, getSlot, defaultFilter, FilterFn, camelizeObjectKeys } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 function filterFn (item: any, search: string | null, filter: FilterFn) {
@@ -138,6 +138,9 @@ export default VDataIterator.extend({
     headersWithoutCustomFilters (): TableHeader[] {
       return this.computedHeaders.filter(header => !header.filter)
     },
+    sanitizedHeaderProps (): object {
+      return camelizeObjectKeys(this.headerProps)
+    },
   },
 
   created () {
@@ -225,7 +228,7 @@ export default VDataIterator.extend({
     genHeaders (props: DataProps) {
       const data = {
         props: {
-          ...this.headerProps,
+          ...this.sanitizedHeaderProps,
           headers: this.computedHeaders,
           options: props.options,
           mobile: this.isMobile,
@@ -461,7 +464,7 @@ export default VDataIterator.extend({
           options: props.options,
           pagination: props.pagination,
           itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
-          ...this.footerProps,
+          ...this.sanitizedFooterProps,
         },
         on: {
           'update:options': (value: any) => props.updateOptions(value),

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
@@ -346,6 +346,21 @@ describe('VDataTable.ts', () => {
     expect(fn).toHaveBeenCalled()
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/8254
+  it('should pass kebab-case footer props correctly', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        headers: [],
+        items: [],
+        footerProps: {
+          'items-per-page-text': 'Foo:',
+        },
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/8266
   it('should use options prop for initial values', () => {
     const fn = jest.fn()

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -1,5 +1,104 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VDataTable.ts should pass kebab-case footer props correctly 1`] = `
+<div class="v-data-table theme--light">
+  <div class="v-data-table__wrapper">
+    <table>
+      <colgroup>
+      </colgroup>
+      <thead class="v-data-table-header">
+        <tr>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="v-data-table__empty-wrapper">
+          <td colspan="0">
+            No data available
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="v-data-footer">
+    <div class="v-data-footer__select">
+      Foo:
+      <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__control">
+          <div role="button"
+               aria-haspopup="listbox"
+               aria-expanded="false"
+               aria-owns="list-311"
+               class="v-input__slot"
+          >
+            <div class="v-select__slot">
+              <div class="v-select__selections">
+                <div class="v-select__selection v-select__selection--comma">
+                  10
+                </div>
+                <input aria-label="Foo:"
+                       id="input-311"
+                       readonly="readonly"
+                       type="text"
+                       aria-readonly="true"
+                >
+              </div>
+              <div class="v-input__append-inner">
+                <div class="v-input__icon v-input__icon--append">
+                  <i aria-hidden="true"
+                     class="v-icon notranslate material-icons theme--light"
+                  >
+                    $vuetify.icons.dropdown
+                  </i>
+                </div>
+              </div>
+            </div>
+            <div class="v-menu">
+              <div class="v-menu__content theme--light "
+                   style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+              >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="v-data-footer__pagination">
+      –
+    </div>
+    <div class="v-data-footer__icons-before">
+      <button type="button"
+              disabled="disabled"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              aria-label="Previous page"
+      >
+        <span class="v-btn__content">
+          <i aria-hidden="true"
+             class="v-icon notranslate material-icons theme--light"
+          >
+            $vuetify.icons.prev
+          </i>
+        </span>
+      </button>
+    </div>
+    <div class="v-data-footer__icons-after">
+      <button type="button"
+              disabled="disabled"
+              class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
+              aria-label="Next page"
+      >
+        <span class="v-btn__content">
+          <i aria-hidden="true"
+             class="v-icon notranslate material-icons theme--light"
+          >
+            $vuetify.icons.next
+          </i>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VDataTable.ts should render 1`] = `
 <div class="v-data-table theme--light">
   <div class="v-data-table__wrapper">

diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
@@ -506,3 +506,12 @@ export function humanReadableFileSize (bytes: number, binary = false): string {
   }
   return `${bytes.toFixed(1)} ${prefix[unit]}B`
 }
+
+export function camelizeObjectKeys (obj: Record<string, any> | null | undefined) {
+  if (!obj) return {}
+
+  return Object.keys(obj).reduce((o: any, key: string) => {
+    o[camelize(key)] = obj[key]
+    return o
+  }, {})
+}