Add slots for UI customization

[guanzo]

Is your feature request related to a problem? Please describe. When search results return nothing, the UI is blank

Describe the solution you'd like Add a slot "noSearchResults" to let us provide a UI for no search results.

Maybe consider adding a few more slots to cover the basics, like an scoped emoji slot. I'm replacing the default emojis with emojis from twemoji. twemoji does not use unicode, it uses images, which forces vue-users to do v-html.

Potential usage:

<template>
<VEmojiPicker @select="selectEmoji">
    <template #noSearchResults>
        No results...
    </template>
    <template #emoji="slotProps">
        <span v-html="toTwemoji(slotProps.emoji)"/>
    </template>
</VEmojiPicker>
</template>

<script>
import twemoji from 'twemoji'

export default {
    methods: {
        toTwemoji: emoji => twemoji.parse(emoji) // returns <img src="..." />
    }
}
</script>

Awesome library, thanks.

[joaoeudes7]

I thought about adding slots in positions like ["beforeCategories", "afterCategories", "afterSearch", "afterEmojis"], soon it would be customizable for everyone, but that may be polluted :/

You could set data of emoji as string with the code of image, see EmojiItem.vue

<template>
  <span :class="['emoji', { 'border': withBorder } ]" :style="styleSize" v-html="emoji.data" />
</template>

This resolve show SVG too :) When I have time I will document it, but I haven't tested it with SVG yet.

Thanks for contributing with the suggestions, so feel free if you want to implement something in code :)

[guanzo]

but that may be polluted

Yah I agree. Slots are really, really convenient, but you don't want to overuse them. But I do think this lib should provide the important slots. Whats "important" is up to you, but I don't think it includes the generic "beforeX/afterX" slots.