diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue | 106 |
1 files changed, 61 insertions, 45 deletions
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue index 002e741ab96..e431fd000a6 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue @@ -1,11 +1,8 @@ <script> -import { GlIcon, GlLink } from '@gitlab/ui'; +import { GlLink, GlIcon } from '@gitlab/ui'; export default { - components: { - GlIcon, - GlLink, - }, + functional: true, props: { label: { type: Object, @@ -21,46 +18,65 @@ export default { default: false, }, }, - data() { - return { - isSet: this.isLabelSet, - }; - }, - computed: { - labelBoxStyle() { - return { - backgroundColor: this.label.color, - }; - }, - }, - watch: { - /** - * This watcher assures that if user used - * `Enter` key to set/unset label, changes - * are reflected here too. - */ - isLabelSet(value) { - this.isSet = value; - }, - }, - methods: { - handleClick() { - this.isSet = !this.isSet; - this.$emit('clickLabel', this.label); - }, + render(h, { props, listeners }) { + const { label, highlight, isLabelSet } = props; + + const labelColorBox = h('span', { + class: 'dropdown-label-box', + style: { + backgroundColor: label.color, + }, + attrs: { + 'data-testid': 'label-color-box', + }, + }); + + const checkedIcon = h(GlIcon, { + class: { + 'mr-2 align-self-center': true, + hidden: !isLabelSet, + }, + props: { + name: 'mobile-issue-close', + }, + }); + + const noIcon = h('span', { + class: { + 'mr-3 pr-2': true, + hidden: isLabelSet, + }, + attrs: { + 'data-testid': 'no-icon', + }, + }); + + const labelTitle = h('span', label.title); + + const labelLink = h( + GlLink, + { + class: 'd-flex align-items-baseline text-break-word label-item', + on: { + click: () => { + listeners.clickLabel(label); + }, + }, + }, + [noIcon, checkedIcon, labelColorBox, labelTitle], + ); + + return h( + 'li', + { + class: { + 'd-block': true, + 'text-left': true, + 'is-focused': highlight, + }, + }, + [labelLink], + ); }, }; </script> - -<template> - <gl-link - class="d-flex align-items-baseline text-break-word label-item" - :class="{ 'is-focused': highlight }" - @click="handleClick" - > - <gl-icon v-show="isSet" name="mobile-issue-close" class="mr-2 align-self-center" /> - <span v-show="!isSet" data-testid="no-icon" class="mr-3 pr-2"></span> - <span class="dropdown-label-box" data-testid="label-color-box" :style="labelBoxStyle"></span> - <span>{{ label.title }}</span> - </gl-link> -</template> |