Skip to content

Commit

Permalink
fix(VDataTable): group-by should use correct slot (#10592)
Browse files Browse the repository at this point in the history 
closes #10289

Co-authored-by: Andrew Henry <AMajesticPotatoe@gmail.com>
  • Loading branch information
@nekosaur @MajesticPotatoe
nekosaur and MajesticPotatoe authored Feb 18, 2020
1 parent c014bdc commit 065e93c
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VDataTable/VDataTable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ export default VDataIterator.extend({
genDefaultGroupedRow (group: string, items: any[], props: DataScopeProps) {
const isOpen = !!this.openCache[group]
const children: VNodeChildren = [
this.$createElement('template', { slot: 'row.content' }, this.genDefaultRows(items, props)),
this.$createElement('template', { slot: 'row.content' }, this.genRows(items, props)),
]
const toggleFn = () => this.$set(this.openCache, group, !this.openCache[group])
const removeFn = () => props.updateOptions({ groupBy: [], groupDesc: [] })
Expand Down
19 changes: 19 additions & 0 deletions packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -672,4 +672,23 @@ describe('VDataTable.ts', () => {

expect(input).toHaveBeenNthCalledWith(2, [])
})

// https://github.com/vuetifyjs/vuetify/issues/10289
it('should render item slot when using group-by function', async () => {
const wrapper = mountFunction({
propsData: {
headers: testHeaders,
itemKey: 'name',
items: testItems.slice(0, 2),
groupBy: 'name',
},
scopedSlots: {
item () {
return this.$createElement('div', ['scoped'])
},
},
})

expect(wrapper.html()).toMatchSnapshot()
})
})
243 changes: 243 additions & 0 deletions packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3472,6 +3472,249 @@ exports[`VDataTable.ts should render footer.page-text slot content 1`] = `
</div>
`;

exports[`VDataTable.ts should render item slot when using group-by function 1`] = `
<div class="v-data-table theme--light">
<div class="v-data-table__wrapper">
<table>
<colgroup>
<col class>
<col class>
<col class>
<col class>
<col class>
</colgroup>
<thead class="v-data-table-header">
<tr>
<th role="columnheader"
scope="col"
aria-label="Calories: Not sorted. Activate to sort ascending."
aria-sort="none"
class="text-start sortable"
>
<span>
Calories
</span>
<i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;"
>
$sort
</i>
</th>
<th role="columnheader"
scope="col"
aria-label="Fat (g): Not sorted. Activate to sort ascending."
aria-sort="none"
class="text-start sortable"
>
<span>
Fat (g)
</span>
<i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;"
>
$sort
</i>
</th>
<th role="columnheader"
scope="col"
aria-label="Carbs (g): Not sorted. Activate to sort ascending."
aria-sort="none"
class="text-start sortable"
>
<span>
Carbs (g)
</span>
<i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;"
>
$sort
</i>
</th>
<th role="columnheader"
scope="col"
aria-label="Protein (g): Not sorted. Activate to sort ascending."
aria-sort="none"
class="text-start sortable"
>
<span>
Protein (g)
</span>
<i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;"
>
$sort
</i>
</th>
<th role="columnheader"
scope="col"
aria-label="Iron (%): Not sorted. Activate to sort ascending."
aria-sort="none"
class="text-start sortable"
>
<span>
Iron (%)
</span>
<i aria-hidden="true"
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
style="font-size: 18px;"
>
$sort
</i>
</th>
</tr>
</thead>
<tbody>
<tr class="v-row-group__header">
<td colspan="5"
class="text-start"
>
<button type="button"
class="ma-0 v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
>
<span class="v-btn__content">
<i aria-hidden="true"
class="v-icon notranslate material-icons theme--light"
>
$minus
</i>
</span>
</button>
name: Frozen Yogurt
<button type="button"
class="ma-0 v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
>
<span class="v-btn__content">
<i aria-hidden="true"
class="v-icon notranslate material-icons theme--light"
>
$close
</i>
</span>
</button>
</td>
</tr>
<div>
scoped
</div>
<tr class="v-row-group__header">
<td colspan="5"
class="text-start"
>
<button type="button"
class="ma-0 v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
>
<span class="v-btn__content">
<i aria-hidden="true"
class="v-icon notranslate material-icons theme--light"
>
$minus
</i>
</span>
</button>
name: Ice cream sandwich
<button type="button"
class="ma-0 v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
>
<span class="v-btn__content">
<i aria-hidden="true"
class="v-icon notranslate material-icons theme--light"
>
$close
</i>
</span>
</button>
</td>
</tr>
<div>
scoped
</div>
</tbody>
</table>
</div>
<div class="v-data-footer">
<div class="v-data-footer__select">
Rows 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__control">
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-549"
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="$vuetify.dataTable.itemsPerPageText"
id="input-549"
readonly="readonly"
type="text"
aria-readonly="false"
autocomplete="off"
>
</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"
>
$dropdown
</i>
</div>
</div>
<input type="hidden"
value="10"
>
</div>
<div class="v-menu">
</div>
</div>
</div>
</div>
</div>
<div class="v-data-footer__pagination">
1-2 of 2
</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"
>
$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"
>
$next
</i>
</span>
</button>
</div>
</div>
</div>
`;

exports[`VDataTable.ts should render loading state 1`] = `
<div class="v-data-table theme--light">
<div class="v-data-table__wrapper">
Expand Down

0 comments on commit 065e93c

Please sign in to comment.