45 lines
946 B
Vue
45 lines
946 B
Vue
|
<script>
|
||
|
import { chunk } from 'lodash';
|
||
|
import { searchEmoji } from '~/emoji';
|
||
|
import { EMOJIS_PER_ROW } from '../constants';
|
||
|
import { getEmojiCategories, generateCategoryHeight } from './utils';
|
||
|
|
||
|
export default {
|
||
|
props: {
|
||
|
searchValue: {
|
||
|
type: String,
|
||
|
required: true,
|
||
|
},
|
||
|
},
|
||
|
data() {
|
||
|
return { render: false };
|
||
|
},
|
||
|
computed: {
|
||
|
filteredCategories() {
|
||
|
if (this.searchValue !== '') {
|
||
|
const emojis = chunk(
|
||
|
searchEmoji(this.searchValue).map(({ emoji }) => emoji.name),
|
||
|
EMOJIS_PER_ROW,
|
||
|
);
|
||
|
|
||
|
return {
|
||
|
search: { emojis, height: generateCategoryHeight(emojis.length) },
|
||
|
};
|
||
|
}
|
||
|
|
||
|
return this.categories;
|
||
|
},
|
||
|
},
|
||
|
async mounted() {
|
||
|
this.categories = await getEmojiCategories();
|
||
|
this.render = true;
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<template>
|
||
|
<div v-if="render">
|
||
|
<slot :filtered-categories="filteredCategories"></slot>
|
||
|
</div>
|
||
|
</template>
|