feat(v-data-table): expose row defaults to item slot props

[maitlandmarshall]

Description

Allows the consumers of v-data-table's item slot to implement default functionality through on and attrs scoped slot props.

Motivation and Context

Currently if someone implements the item slot they must manually reimplement the v-data-table__selected class binding and the v-data-table's @click:row, @dblclick:row & @contextmenu:row will stop working.

This change will allow consumers of the item slot to apply row-level formatting that isn't achievable just using the item-class prop without losing any of the default functionality.

import Row from './../src/components/VDataTable/Row'
<v-data-table
      v-model="selectedItems"
      :items="items"
      :headers="headers"
      single-select
      @click:row="onRowClick"
      @dblclick:row="onRowDblClick"
    >
      <template #item="scopeProps">
        <Row
          v-bind="{
            ...scopeProps,
            ...scopeProps.attrs,
          }"
          v-on="scopeProps.on"
        >
          <template #name="{value}">
            <b>{{ value }}</b>
          </template>

          <template #city="{value}">
            <b>{{ value }}</b>
          </template>
        </Row>
      </template>
</v-data-table>

How Has This Been Tested?

Visually tested & unit test, "should render with item scoped slot". Have updated the v-data-table snapshot.

Markup:

<template>
  <v-container>
    <v-data-table
      v-model="selectedItems"
      :items="items"
      :headers="headers"
      single-select
      @click:row="onRowClick"
      @dblclick:row="onRowDblClick"
    >
      <template #item="scopeProps">
        <Row
          v-bind="{
            ...scopeProps,
            ...scopeProps.attrs,
          }"
          v-on="scopeProps.on"
        >
          <template #name="{value}">
            <b>{{ value }}</b>
          </template>

          <template #city="{value}">
            <b>{{ value }}</b>
          </template>
        </Row>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
  import Row from './../src/components/VDataTable/Row'

  export default {
    components: {
      Row,
    },
    data: () => ({
      selectedItems: [],
      items: [
        {
          id: 1,
          name: 'John Doe',
          age: 30,
          city: 'New York',
          status: 'active',
        },
        {
          id: 2,
          name: 'Jane Doe',
          age: 25,
          city: 'Miami',
          status: 'active',
        },
        {
          id: 3,
          name: 'James Doe',
          age: 20,
          city: 'Los Angeles',
          status: 'inactive',
        },
      ],
      headers: [
        {
          text: 'ID',
          align: 'left',
          value: 'id',
        },
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'City', value: 'city' },
        { text: 'Status', value: 'status' },
      ],
    }),
    methods: {
      onRowClick (item, data) {
        // eslint-disable-next-line no-console
        console.log('The row was clicked, the feature is working.')

        data.select(true)
      },
      onRowDblClick (event, data) {
        // eslint-disable-next-line no-console
        console.log('The row was double clicked, the feature is working.')
        data.select(true)
      },
    },
  }
</script>

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [x] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• [x] The PR title is no longer than 64 characters.
• [x] The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• [x] My code follows the code style of this project.
• [x] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)