Ability to pass @vue-use/motion directives to custom-row prop on Table #6554
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
I was hoping to make use of @vueuse/motion to animate some effects on my table rows similar to what's shown in this video.
When working with the Table component I've previously made use of the custom-row prop to pass down props doing similar to
const rowSelector = function (record) {
return {
onMouseover: () => {
console.log("yep the mouse is over");
}
};
};
However I don't seem to be able to pass directives like the ones supplied by vueuse/motion which is a shame.
const rowSelector = function (record) {
return {
onMouseover: () => {
console.log("yep the mouse is over");
},
"v-motion": "",
initial: { opacity: 0, y: 100 }
};
};
If I take a look at what gets rendered as HTML with this I see something like
<tr v-motion="'something'" initial="[object Object]" data-row-key="1" class="ant-table-row ant-table-row-level-0">...</tr>
What does the proposed API look like?
Perhaps something like?
const rowSelector = function (record) {
return {
onMouseover: () => {
console.log("yep the mouse is over");
},
"v-motion": "",
initial: { opacity: 0, y: 100 }
};
};
But I'm open to suggestions or expertise as to how to best make this work. Perhaps I've missed a better way to do this with the vuejs API.