Skip to content

Commit

Permalink
feat(VDataTable): expose row default props to item slots (#15711)
Browse files Browse the repository at this point in the history
  • Loading branch information
@maitlandmarshall
maitlandmarshall committed Jun 1, 2023
1 parent 42ec8c5 commit 034ca21
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 14 deletions.
8 changes: 8 additions & 0 deletions packages/api-generator/src/maps/v-data-table.js
View file
Expand Up @@ -81,6 +81,14 @@ const DataTableItemScopedProps = {
...DataIteratorItemScopedProps,
headers: 'DataTableHeader[]',
isMobile: 'boolean',
on: {
click: '(event: MouseEvent) => void',
contextmenu: '(event: MouseEvent) => void',
dblclick: '(event: MouseEvent) => void',
},
attrs: {
class: 'object',
},
}

const DataTableItemColumnScopedProps = {
Expand Down
29 changes: 20 additions & 9 deletions packages/vuetify/src/components/VDataTable/VDataTable.ts
View file
Expand Up @@ -228,9 +228,26 @@ export default mixins(
return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters)
},
createItemProps (item: any, index: number): DataTableItemProps {
const props = VDataIterator.options.methods.createItemProps.call(this, item, index)
const data = {
...VDataIterator.options.methods.createItemProps.call(this, item, index),
headers: this.computedHeaders,
}

return Object.assign(props, { headers: this.computedHeaders })
return {
...data,
attrs: {
class: {
'v-data-table__selected': data.isSelected,
},
},
on: {
// TODO: for click, the first argument should be the event, and the second argument should be data,
// but this is a breaking change so it's for v3
click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
},
}
},
genCaption (props: DataScopeProps) {
if (this.caption) return [this.$createElement('caption', [this.caption])]
Expand Down Expand Up @@ -510,13 +527,7 @@ export default mixins(
rtl: this.$vuetify.rtl,
},
scopedSlots,
on: {
// TODO: for click, the first argument should be the event, and the second argument should be data,
// but this is a breaking change so it's for v3
click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
},
on: data.on,
})
},
genBody (props: DataScopeProps): VNode | string | VNodeChildren {
Expand Down
10 changes: 5 additions & 5 deletions packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
View file
Expand Up @@ -9436,19 +9436,19 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
</thead>
<tbody>
<div>
{"item":{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"},"index":0,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
{"item":{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"},"index":0,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
</div>
<div>
{"item":{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]},"index":1,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
{"item":{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]},"index":1,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
</div>
<div>
{"item":{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%","class":{"test":true,"second":false}},"index":2,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
{"item":{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%","class":{"test":true,"second":false}},"index":2,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
</div>
<div>
{"item":{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},"index":3,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
{"item":{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},"index":3,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
</div>
<div>
{"item":{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},"index":4,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]}
{"item":{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},"index":4,"isSelected":false,"isExpanded":false,"isMobile":true,"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":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}],"attrs":{"class":{"v-data-table__selected":false}},"on":{}}
</div>
</tbody>
</table>
Expand Down
2 changes: 2 additions & 0 deletions packages/vuetify/types/index.d.ts
View file
Expand Up @@ -117,6 +117,8 @@ export interface DataItemProps {

export interface DataTableItemProps extends DataItemProps {
headers: DataTableHeader[]
on: { [key: string]: Function | Function[] }
attrs: object;
}

export interface DataScopeProps {
Expand Down

0 comments on commit 034ca21

Please sign in to comment.