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

53 lines
1.0 KiB
Vue
Raw Normal View History

2021-02-27 11:53:20 +01:00
<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 '@/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>