Warnings for mouse events - "Component emitted event "mouseenter" but it is neither declared in the emits option nor as an "onMouseenter" prop."

[Vitomir2]

Hi community,

I continue receiving two warnings when enter and leave the emoji are with the mouse: "Component emitted event "mouseenter" but it is neither declared in the emits option nor as an "onMouseenter" prop." and the same for mouseleave event. Below, you can find also a screenshot. I am using the v12.0.1 of emoji-mart-vue and my vue version is 3.2.20. I am using this in another app which is Vue2 and there are no such warnings. It works fine, but I do not like these messages in the console. How can I solve that?

This is how I am using it:

<template>
    <ion-grid>
        <ion-row>
            <ion-col>
                <ion-text>
                    <h1>
                        <strong>{{ data.question[language.code] }}</strong>
                    </h1>
                </ion-text>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col v-if="data.type === 'emoji'">
                <ion-button
                    class="emojiBtn"
                    :class="isEmojiSelected(index) ? 'rating' : ''"
                    size="large"
                    v-for="(emoji, index) in getEmojis(data.emoji)"
                    :key="index"
                    fill="clear"
                    @click="select(index)"
                >
                    <!-- <ion-icon class="emojiIcon" slot="icon-only" color="#D10000" :src="require(`@/assets/icons/${emoji}.svg`)"></ion-icon> -->
                    <emoji v-if="emoji" :data="emojiIndex" :emoji="emojiObject(emoji)" :size="80" />
                </ion-button>
            </ion-col>
        </ion-row>
    </ion-grid>
</template>

<script>
    //* Import data/twitter.json/facebook.json/apple.json/google.json to reduce size, all.json contains data for all emoji sets.
    import data from 'emoji-mart-vue-fast/data/google.json'
    //* Import default CSS
    import 'emoji-mart-vue-fast/css/emoji-mart.css'
    import { EmojiIndex, Emoji } from 'emoji-mart-vue-fast/src'

    //* Create emoji data index.
    //* We can change it (for example, filter by category) before passing to the component.
    let emojiIndex = new EmojiIndex(data)

    export default defineComponent({
        name: 'QuestionRating',
        components: {
            ...,
            Emoji
        },
        props: {
            data: Object
        },
        data() {
            return {
                emojiIndex
            }
        },
        computed: {
            ...mapState(['language', 'answers']),
            answer() {
                return this.answers[this.data._id]
            },
            max() {
                return this.data.validationRule.max
            },
            emojis() {
                return this.$config.emojis
            }
        },
        methods: {
            select(rate) {
                this.$store.commit('setAnswer', { id: this.data._id, value: rate })
                this.$emit('selectedOption', rate)
            },
            getEmojis(mainEmoji) {
                if (mainEmoji === 'none') return []

                if (this.max === 3) {
                    const filteredEmojis = this.emojis[mainEmoji].filter((value, index) => index % 2 == 0)
                    return filteredEmojis
                }

                return this.emojis[mainEmoji]
            },
            isEmojiSelected(index) {
                return this.answer && this.answer[0] == index
            },
            emojiObject(emojiColons) {
                return emojiIndex.findEmoji(emojiColons)
            }
        }
    })
</script>

[serebrov]

I think this is something to be fixed in the extension code. The Emoji component has the emits property here:

https://github.com/serebrov/emoji-mart-vue/blob/7670ef8acfa7f07bf6bed016e68fc02091441617/src/components/Emoji.vue#L31

But it only defines click event, while the component also emits mouse events here:

https://github.com/serebrov/emoji-mart-vue/blob/7670ef8acfa7f07bf6bed016e68fc02091441617/src/components/Emoji.vue#L63-L68

[serebrov]

I added missing emits definitions and published version 12.0.4 with a fix.