Skip to content

Commit

Permalink
fix(VDataFooter): better handle custom item options (#8029)
Browse files Browse the repository at this point in the history 
* fix(VDataFooter): select first available option when default does not match

default itemsPerPage is 10 and was being pushed into the items array

fixes #8026

* refactor(VDataFooter): clean-up genItemsPerPageSelect method
  • Loading branch information
@johnleider
johnleider committed Jul 26, 2019
1 parent aa23f74 commit 8b7a25b
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 116 deletions.
28 changes: 11 additions & 17 deletions packages/vuetify/src/components/VDataIterator/VDataFooter.ts
View file
Expand Up @@ -63,24 +63,10 @@ export default Vue.extend({
this.pagination.pageStop < 0
},
computedItemsPerPageOptions (): any[] {
const itemsPerPageOptions = this.itemsPerPageOptions.map(option => {
return this.itemsPerPageOptions.map(option => {
if (typeof option === 'object') return option
else return this.genItemsPerPageOption(option)
})

const customItemsPerPage = !itemsPerPageOptions.find(option => option.value === this.options.itemsPerPage)

if (customItemsPerPage) {
itemsPerPageOptions.push(this.genItemsPerPageOption(this.options.itemsPerPage))

itemsPerPageOptions.sort((a, b) => {
if (a.value === -1) return 1
else if (b.value === -1) return -1
else return a.value - b.value
})
}

return itemsPerPageOptions
},
},

Expand Down Expand Up @@ -110,6 +96,14 @@ export default Vue.extend({
}
},
genItemsPerPageSelect () {
let value = this.options.itemsPerPage
const computedIPPO = this.computedItemsPerPageOptions

if (
computedIPPO.length > 0 &&
!computedIPPO.find(ippo => ippo.value === value)
) value = computedIPPO[0]

return this.$createElement('div', {
staticClass: 'v-data-footer__select',
}, [
Expand All @@ -120,8 +114,8 @@ export default Vue.extend({
},
props: {
disabled: this.disableItemsPerPage,
items: this.computedItemsPerPageOptions,
value: this.options.itemsPerPage,
items: computedIPPO,
value,
hideDetails: true,
auto: true,
minWidth: '75px',
Expand Down
20 changes: 1 addition & 19 deletions packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts
View file
Expand Up @@ -40,28 +40,10 @@ describe('VDataFooter.ts', () => {
}
})

it('should render and match snapshot', () => {
const wrapper = mountFunction({
propsData: {
options: {
page: 4,
},
pagination: {
page: 4,
pageStart: 1,
pageStop: 10,
pageCount: 10,
itemsLength: 100,
},
},
})

expect(wrapper.html()).toMatchSnapshot()
})

it('should render with custom itemsPerPage', () => {
const wrapper = mountFunction({
propsData: {
itemsPerPageOptions: [100],
options: {
page: 4,
itemsPerPage: 100,
Expand Down
88 changes: 8 additions & 80 deletions ...ges/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
View file
@@ -1,77 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`VDataFooter.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 theme--light v-text-field v-select">
<div class="v-input__control">
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-2"
class="v-input__slot"
>
<div class="v-select__slot">
<div class="v-select__selections">
<input aria-label="$vuetify.dataFooter.itemsPerPageText"
id="input-2"
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 mdi mdi-menu-down theme--light"
>
</i>
</div>
</div>
</div>
<div class="v-menu">
<div class="v-menu__content theme--light "
style="max-height: 300px; 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">
2-10 of 100
</div>
<div class="v-data-footer__icons-before">
<button type="button"
class="v-btn v-btn--fab 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 mdi mdi-chevron-left theme--light"
>
</i>
</span>
</button>
</div>
<div class="v-data-footer__icons-after">
<button type="button"
class="v-btn v-btn--fab 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 mdi mdi-chevron-right theme--light"
>
</i>
</span>
</button>
</div>
</div>
`;
exports[`VDataFooter.ts should render first & last icons with showFirstLastPage 1`] = `
<div class="v-data-footer">
<div class="v-data-footer__select">
Expand All @@ -81,7 +9,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-39"
aria-owns="list-28"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -90,7 +18,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
10
</div>
<input aria-label="$vuetify.dataFooter.itemsPerPageText"
id="input-39"
id="input-28"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -178,7 +106,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-24"
aria-owns="list-13"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -187,7 +115,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
10
</div>
<input aria-label="$vuetify.dataFooter.itemsPerPageText"
id="input-24"
id="input-13"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -275,7 +203,7 @@ exports[`VDataFooter.ts should render with custom itemsPerPage 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-13"
aria-owns="list-2"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -284,7 +212,7 @@ exports[`VDataFooter.ts should render with custom itemsPerPage 1`] = `
100
</div>
<input aria-label="$vuetify.dataFooter.itemsPerPageText"
id="input-13"
id="input-2"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -351,7 +279,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-65"
aria-owns="list-54"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -360,7 +288,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
10
</div>
<input aria-label="$vuetify.dataFooter.itemsPerPageText"
id="input-65"
id="input-54"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down

0 comments on commit 8b7a25b

Please sign in to comment.