feat(VDataTable): forward arbitrary row events

[FBuervenich]

Description

resolves #13332

Motivation and Context

Allow to use the mouseover and mouseleave event for data-table rows without having to completely rewrite the row-slot.

How Has This Been Tested?

visually -> created a test markup and generated console outputs

Markup:

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="desserts"
      @mouseover:row="mouseOverRow"
      @mouseleave:row="mouseLeaveRow"
    />
  </v-container>
</template>

<script>
export default {
  data: () => ({
    headers: [
      {
        text: "Dessert (100g serving)",
        align: "start",
        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" },
    ],
    desserts: [
      {
        name: "Frozen Yogurt",
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: "1%",
      },
      {
        name: "Ice cream sandwich",
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: "1%",
      },
      {
        name: "Eclair",
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: "7%",
      },
      {
        name: "Cupcake",
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: "8%",
      },
      {
        name: "Gingerbread",
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: "16%",
      },
      {
        name: "Jelly bean",
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: "0%",
      },
      {
        name: "Lollipop",
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: "2%",
      },
      {
        name: "Honeycomb",
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: "45%",
      },
      {
        name: "Donut",
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: "22%",
      },
      {
        name: "KitKat",
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: "6%",
      },
    ],
    //
  }),
  methods: {
    mouseOverRow(data, event) {
      console.log(`mouseOverRow`, data, event);
    },
    mouseLeaveRow(data, event) {
      console.log(`mouseLeaveRow`, data, event);
    },
  },
};
</script>

Types of changes

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

Checklist:

• The PR title is no longer than 64 characters.
• 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).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[KaelWD]

This should probably just do something like #15592 with a special case for click

[minhphongvn]

please add this feature, it's really necessary for v-data-table

[dayre]

If this could be added to 2.6.10 i would travel from Canada and wash someone's dog, cat, bike, car, truck or windows where you live. *

* Offer valid for a period of one year, shipping fees not included. Not valid in Alaska or Hawaii.

[FBuervenich]

I updated it to the way used for the VCalendar @KaelWD.

Unfortunately, the order of the (existing) attributes provided by the events differ for the VCalendar and the VDataTable, so I kept special cases for the click, contextmenu and dblclick events. These should probably be unified in v3.

[mudimek]

any chance for this to be merged soon?

[KaelWD]

I didn't realise calendar was like this too. This is actually backwards, the first argument has to be the event so modifiers like .prevent work.

[KaelWD]

I don't know if this is really necessary considering it takes any dom event now.