cherrypick/src/client/components/emoji-picker.section.vue

<template>
<section>
	<header class="_acrylic" @click="shown = !shown">
		<Fa :icon="shown ? faChevronDown : faChevronUp" :key="shown" fixed-width class="toggle"/> <slot></slot> ({{ emojis.length }})
	</header>
	<div v-if="shown">
		<button v-for="emoji in emojis"
			class="_button"
			@click="chosen(emoji, $event)"
			:key="emoji"
		>
			<MkEmoji :emoji="emoji" :normal="true"/>
		</button>
	</div>
</section>
</template>

<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { getStaticImageUrl } from '@client/scripts/get-static-image-url';

export default defineComponent({
	props: {
		emojis: {
			required: true,
		},
		initialShown: {
			required: false
		}
	},

	emits: ['chosen'],

	data() {
		return {
			getStaticImageUrl,
			shown: this.initialShown,
			faChevronUp, faChevronDown,
		};
	},

	methods: {
		chosen(emoji: any, ev) {
			this.$parent.chosen(emoji, ev);
		},
	}
});
</script>

<style lang="scss" scoped>
</style>