summaryrefslogtreecommitdiff
path: root/src/client/components/emoji-picker.section.vue
blob: 0ea3761429562ebf2b9b0a50405644cac5f71678 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
<section>
	<header class="_acrylic" @click="shown = !shown">
		<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <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 { 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,
		};
	},

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

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