diff --git a/packages/api-generator/src/maps/v-data-table.js b/packages/api-generator/src/maps/v-data-table.js index 5122eae6ad7..9f9a8eea463 100644 --- a/packages/api-generator/src/maps/v-data-table.js +++ b/packages/api-generator/src/maps/v-data-table.js @@ -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 = { diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts index 6f4f2a8a329..b9ddffbb79a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.ts +++ b/packages/vuetify/src/components/VDataTable/VDataTable.ts @@ -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])] @@ -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 { 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 index edac3697f47..412936ef90e 100644 --- a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap @@ -9436,19 +9436,19 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
- {"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":{}}
- {"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":{}}
- {"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":{}}
- {"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":{}}
- {"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":{}}
diff --git a/packages/vuetify/types/index.d.ts b/packages/vuetify/types/index.d.ts index 27399ededd3..1c7a76db07f 100644 --- a/packages/vuetify/types/index.d.ts +++ b/packages/vuetify/types/index.d.ts @@ -117,6 +117,8 @@ export interface DataItemProps { export interface DataTableItemProps extends DataItemProps { headers: DataTableHeader[] + on: { [key: string]: Function | Function[] } + attrs: object; } export interface DataScopeProps {