QTable: Add row-mouseenter and row-mouseleave events

[jdk2pq]

Similar to the click, dblclick, and contextmenu events that are already emitted from rows in a QTable, it'd be great to also have mouseenter and mouseleave events to add behavior to rows that are currently hovered over.

In my team's use case, we want to add a Gmail-style action button menu at the end of each row without using the body slot to override the appearance of each row.

With the mouseenter and mouseleave events, we would be able to dynamically add and remove the action button menu like so:

// template
<QTable
    ...
    @row-mouseenter="showActionButtons"
    @row-mouseleave="hideActionButtons"
/>

// script setup
import { render } from 'vue';

const rowId = ref(null);
const actionButtonsElement = ref(null)
const actionButtonsParentElement = ref(null)

// ...

function showActionButtons(event, row) {
    if (rowId.value !== row.id) {
        hideActionButtons();

        actionButtonsElement.value = h(ActionButtons, { row });
        render(actionButtonsElement.value, event.target);
        actionButtonsParentElement.value = event.target;
        rowId.value = row.id;
    }
}

function hideActionButtons() {
    if (actionButtonsElement.value && actionButtonsParentElement.value) {
        render(null, actionButtonsParentElement.value);
        actionButtonsParentElement.value = null;
        actionButtonsElement.value = null;
        rowId.value = null;
    }
}

Related discussions that the above would help with:

• QTable conditional row styling #16998
• QTable - change row style dinamically #14898

I'm very happy to contribute a PR for this new feature. I just wanted to follow the right procedure for starting a new feature discussion and getting this properly green-lit first. Thanks.