Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 51 52 53 54 55 56 57 58 59 60 61 62 63 | 45x 4x 4x 3x 3x | <!-- eslint-disable vue/multi-word-component-names --> <script> import { GlIntersectionObserver } from '@gitlab/ui'; import { humanize } from '~/lib/utils/text_utility'; import EmojiGroup from './emoji_group.vue'; export default { components: { GlIntersectionObserver, EmojiGroup, }, props: { category: { type: String, required: true, }, emojis: { type: Array, required: true, }, }, data() { return { renderGroup: false, }; }, computed: { categoryTitle() { return humanize(this.category); }, }, methods: { categoryAppeared() { this.renderGroup = true; this.$emit('appear', this.category); }, onClick(emoji) { this.$emit('click', { category: this.category, emoji }); }, }, }; </script> <template> <gl-intersection-observer class="gl-px-4 gl-h-full" @appear="categoryAppeared"> <div class="gl-top-0 gl-py-3 gl-w-full gl-z-index-1 gl-font-sm emoji-picker-category-header"> <b>{{ categoryTitle }}</b> </div> <template v-if="emojis.length"> <emoji-group v-for="(emojiGroup, index) in emojis" :key="index" :emojis="emojiGroup" :render-group="renderGroup" @emoji-click="onClick" /> </template> <p v-else> {{ s__('AwardEmoji|No emoji found.') }} </p> </gl-intersection-observer> </template> |