Feature Request: emit mouseleave or something similar

[telkins]

Hi,

I'm not a front-end developer, so there may be a solution that I'm not aware of, but it would be nice to see when the user's mouse pointer leaves the vue-rate-it component.

My use case: I have a rating "button" similar to what you see on imdb.com. When a user clicks on it, a popover pops up with vue-rate-it and a "clear" link. If/when the rating-selected event is fired, the popover closes and the rating is updated. When the user moves around vue-rate-it, the current-rating event is used to update the "button" to reflect the "number" that they are hovering over. What I would like to do is to be able to reset the "button" value when the user has moved from the vue-rate-it component to some other part of the popover component, if that makes sense. When I move off of the vue-rate-it component, the stars reset to reflect the current rating, but I can't update the "button" value.

Example: I have a current rating of 8 out of 10. I see the 8 on the rating "button". I click on it and up pops the popover with a clear "button" and the vue-rate-it component showing 8 highlighted stars out of 10. All is good. I hover over the 7th star and the "button" updates to show 7. I "slide" down to the 5th star and the "button" updates to show 5. Then, I move off the vue-rate-it component but still remain over the popover. The vue-rate-it stars resets to reflect 8 out of 10 stars, which is perfect, but the "button" still shows 5. I would like to be able to reset the "button" text to go back to 8 as well.

I've tried using v-on:mouseleave.native on the vue-rate-it component and things similar, but I'm not having any luck. As I noted in the beginning, I'm not a front-end developer, so there may be a solution that I'm just not seeing.

Please consider introducing a "mouseleave"-like event (as well as related events, since it's probably easy once the one's done) or let me know how I might go about addressing my problem.

Thanks for your time. :-)

[craigh411]

Thanks for opening the issue. I think this is a great idea. It is possible to do this yourself by wrapping the component is a div which you can attach the mouseleave event to, but I think emitting mouseleave and mouseenter events from the component is a much neater solution.

[telkins]

Thx. I could swear I tried what you said with wrapping the component with a div and then attaching the events....and not having success. But, I tried again and it worked. So, I must have done something wrong the first time around. Thanks for the suggestion. :-)

So...I'll keep the div solution in place until you come with an update, which I'm looking forward to....

[telkins]

@craigh411 Any traction on this? :-)