Ability to pass @vue-use/motion directives to custom-row prop on Table

[rowanwins]

• [x] 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.

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.