diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue')
-rw-r--r-- | app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue new file mode 100644 index 00000000000..135fa9f6228 --- /dev/null +++ b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue @@ -0,0 +1,109 @@ +<script> +import { GlLink, GlIcon } from '@gitlab/ui'; +import { __ } from '~/locale'; + +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/sidebar/components/labels/labels_select_widget/label_item.vue` instead. +export default { + functional: true, + props: { + label: { + type: Object, + required: true, + }, + isLabelSet: { + type: Boolean, + required: true, + }, + isLabelIndeterminate: { + type: Boolean, + required: false, + default: false, + }, + highlight: { + type: Boolean, + required: false, + default: false, + }, + }, + render(h, { props, listeners }) { + const { label, highlight, isLabelSet, isLabelIndeterminate } = props; + + const labelColorBox = h('span', { + class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3', + style: { + backgroundColor: label.color, + }, + attrs: { + 'data-testid': 'label-color-box', + }, + }); + + const checkedIcon = h(GlIcon, { + class: { + 'gl-mr-3 gl-flex-shrink-0 has-tooltip': true, + hidden: !isLabelSet, + }, + attrs: { + title: __('Selected for all items.'), + 'data-testid': 'checked-icon', + }, + props: { + name: 'mobile-issue-close', + }, + }); + + const indeterminateIcon = h(GlIcon, { + class: { + 'gl-mr-3 gl-flex-shrink-0 has-tooltip': true, + hidden: !isLabelIndeterminate, + }, + attrs: { + title: __('Selected for some items.'), + 'data-testid': 'indeterminate-icon', + }, + props: { + name: 'dash', + }, + }); + + const noIcon = h('span', { + class: { + 'gl-mr-5 gl-pr-3': true, + hidden: isLabelSet || isLabelIndeterminate, + }, + attrs: { + 'data-testid': 'no-icon', + }, + }); + + const labelTitle = h('span', label.title); + + const labelLink = h( + GlLink, + { + class: 'gl-display-flex gl-align-items-center label-item gl-text-body', + on: { + click: () => { + listeners.clickLabel(label); + }, + }, + }, + [noIcon, checkedIcon, indeterminateIcon, labelColorBox, labelTitle], + ); + + return h( + 'li', + { + class: { + 'gl-display-block': true, + 'gl-text-left': true, + 'is-focused': highlight, + }, + }, + [labelLink], + ); + }, +}; +</script> |