Skip to content

Commit

Permalink
feat(VDataTable): isMobile prop in scoped slots (#12604)
Browse files Browse the repository at this point in the history 
fixes #11330
  • Loading branch information
@jacekkarczmarczyk
jacekkarczmarczyk committed Nov 13, 2020
1 parent 1f48dcd commit e1720a8
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 14 deletions.
10 changes: 9 additions & 1 deletion packages/api-generator/src/maps/v-data-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const DataTableEvents = [
].concat(DataIteratorEvents)

const DataTableHeaderScopedProps = {
isMobile: 'boolean',
props: {
headers: 'DataTableHeader[]',
options: DataOptions,
Expand Down Expand Up @@ -79,15 +80,18 @@ const DataTableHeaderColumnScopedProps = {
const DataTableItemScopedProps = {
...DataIteratorItemScopedProps,
headers: 'DataTableHeader[]',
isMobile: 'boolean',
}

const DataTableItemColumnScopedProps = {
isMobile: 'boolean',
item: 'any',
header: 'DataTableHeader',
value: 'any',
}

const DataTableHeaderSelectScopedProps = {
isMobile: 'boolean',
props: {
value: 'boolean',
indeterminate: 'boolean',
Expand All @@ -98,6 +102,7 @@ const DataTableHeaderSelectScopedProps = {
}

const DataTableExpandedItemScopedProps = {
isMobile: 'boolean',
item: 'any',
headers: 'DataTableHeader[]',
}
Expand All @@ -115,13 +120,15 @@ const DataTableBodyScopedProps = {
const DataGroupScopedProps = {
group: 'string',
options: DataOptions,
isMobile: 'boolean',
items: 'any[]',
headers: 'i DataTableHeader[]',
}

const DataGroupHeaderScopedProps = {
group: 'string',
groupBy: DataOptions.groupBy,
isMobile: 'boolean',
items: 'any[]',
headers: 'DataTableHeader[]',
isOpen: 'boolean',
Expand All @@ -132,6 +139,7 @@ const DataGroupHeaderScopedProps = {
const DataGroupSummaryScopedProps = {
group: 'string',
groupBy: DataOptions.groupBy,
isMobile: 'boolean',
items: 'any[]',
headers: 'DataTableHeader[]',
isOpen: 'boolean',
Expand All @@ -147,7 +155,7 @@ const DataTableSlots = [
{ name: 'header', props: DataTableHeaderScopedProps },
{ name: 'header.data-table-select', props: DataTableHeaderSelectScopedProps },
{ name: 'header.<name>', props: DataTableHeaderColumnScopedProps },
{ name: 'top', props: DataDefaultScopedSlotProps },
{ name: 'top', props: { ...DataDefaultScopedSlotProps, isMobile: 'boolean' } },
{ name: 'progress' },
{ name: 'group', props: DataGroupScopedProps },
{ name: 'group.header', props: DataGroupHeaderScopedProps },
Expand Down
1 change: 1 addition & 0 deletions packages/vuetify/src/components/VDataIterator/VDataIterator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ export default mixins(
isSelected: this.isSelected,
select: this.select,
isExpanded: this.isExpanded,
isMobile: this.isMobile,
expand: this.expand,
})
}
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VDataTable/MobileRow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default Vue.extend({
const regularSlot = computedSlots[slotName]

if (scopedSlot) {
children.push(scopedSlot({ item: props.item, header, value }))
children.push(scopedSlot({ item: props.item, isMobile: true, header, value }))
} else if (regularSlot) {
children.push(regularSlot)
} else {
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VDataTable/Row.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default Vue.extend({
const regularSlot = computedSlots[slotName]

if (scopedSlot) {
children.push(scopedSlot({ item: props.item, header, value }))
children.push(scopedSlot({ item: props.item, isMobile: false, header, value }))
} else if (regularSlot) {
children.push(regularSlot)
} else {
Expand Down
50 changes: 43 additions & 7 deletions packages/vuetify/src/components/VDataTable/VDataTable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,10 @@ export default mixins(
},
}

const children: VNodeChildrenArrayContents = [getSlot(this, 'header', data)]
const children: VNodeChildrenArrayContents = [getSlot(this, 'header', {
...data,
isMobile: this.isMobile,
})]

if (!this.hideDefaultHeader) {
const scopedSlots = getPrefixedScopedSlots('header.', this.$scopedSlots)
Expand Down Expand Up @@ -313,6 +316,7 @@ export default mixins(
return this.$scopedSlots.group({
group: group.name,
options: props.options,
isMobile: this.isMobile,
items: group.items,
headers: this.computedHeaders,
})
Expand All @@ -331,7 +335,16 @@ export default mixins(

if (this.$scopedSlots['group.header']) {
children.unshift(this.$createElement('template', { slot: 'column.header' }, [
this.$scopedSlots['group.header']!({ group, groupBy: props.options.groupBy, items, headers: this.computedHeaders, isOpen, toggle: toggleFn, remove: removeFn }),
this.$scopedSlots['group.header']!({
group,
groupBy: props.options.groupBy,
isMobile: this.isMobile,
items,
headers: this.computedHeaders,
isOpen,
toggle: toggleFn,
remove: removeFn,
}),
]))
} else {
const toggle = this.$createElement(VBtn, {
Expand Down Expand Up @@ -366,7 +379,15 @@ export default mixins(

if (this.$scopedSlots['group.summary']) {
children.push(this.$createElement('template', { slot: 'column.summary' }, [
this.$scopedSlots['group.summary']!({ group, groupBy: props.options.groupBy, items, headers: this.computedHeaders, isOpen, toggle: toggleFn }),
this.$scopedSlots['group.summary']!({
group,
groupBy: props.options.groupBy,
isMobile: this.isMobile,
items,
headers: this.computedHeaders,
isOpen,
toggle: toggleFn,
}),
]))
}

Expand All @@ -388,10 +409,15 @@ export default mixins(
rows.push(this.$scopedSlots.item!({
...this.createItemProps(item),
index: i,
isMobile: this.isMobile,
}))

if (this.isExpanded(item)) {
rows.push(this.$scopedSlots['expanded-item']!({ item, headers: this.computedHeaders }))
rows.push(this.$scopedSlots['expanded-item']!({
headers: this.computedHeaders,
isMobile: this.isMobile,
item,
}))
}
}

Expand All @@ -410,7 +436,11 @@ export default mixins(
const headerRow = this.genDefaultSimpleRow(item, classes)
const expandedRow = this.$createElement('tr', {
staticClass: 'v-data-table__expanded v-data-table__expanded__content',
}, [this.$scopedSlots['expanded-item']!({ item, headers: this.computedHeaders })])
}, [this.$scopedSlots['expanded-item']!({
headers: this.computedHeaders,
isMobile: this.isMobile,
item,
})])

return this.$createElement(RowGroup, {
props: {
Expand All @@ -428,7 +458,10 @@ export default mixins(

if (this.showSelect) {
const slot = scopedSlots['data-table-select']
scopedSlots['data-table-select'] = slot ? () => slot(data) : () => this.$createElement(VSimpleCheckbox, {
scopedSlots['data-table-select'] = slot ? () => slot({
...data,
isMobile: this.isMobile,
}) : () => this.$createElement(VSimpleCheckbox, {
staticClass: 'v-data-table__checkbox',
props: {
value: data.isSelected,
Expand Down Expand Up @@ -555,7 +588,10 @@ export default mixins(
return this.$createElement(VSimpleTable, {
props: simpleProps,
}, [
this.proxySlot('top', getSlot(this, 'top', props, true)),
this.proxySlot('top', getSlot(this, 'top', {
...props,
isMobile: this.isMobile,
}, true)),
this.genCaption(props),
this.genColgroup(props),
this.genHeaders(props),
Expand Down
8 changes: 4 additions & 4 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 @@ -7828,16 +7828,16 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
</thead>
<tbody>
<div>
{"group":0,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"items":[{"name":"Jelly bean","calories":375,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":392,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
{"group":0,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Jelly bean","calories":375,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":392,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
</div>
<div>
{"group":3.9,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"items":[{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
{"group":3.9,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
</div>
<div>
{"group":4,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"items":[{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
{"group":4,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
</div>
<div>
{"group":4.3,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"items":[{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
{"group":4.3,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
</div>
</tbody>
</table>
Expand Down

0 comments on commit e1720a8

Please sign in to comment.