46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
|
<script>
|
||
|
import { GlLink, GlTooltip } from '@gitlab/ui';
|
||
|
|
||
|
export default {
|
||
|
components: {
|
||
|
GlTooltip,
|
||
|
GlLink,
|
||
|
},
|
||
|
props: {
|
||
|
label: {
|
||
|
type: Object,
|
||
|
required: true,
|
||
|
},
|
||
|
labelStyle: {
|
||
|
type: Object,
|
||
|
required: true,
|
||
|
},
|
||
|
scopedLabelsDocumentationLink: {
|
||
|
type: String,
|
||
|
required: true,
|
||
|
},
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<template>
|
||
|
<span
|
||
|
class="d-inline-block position-relative scoped-label-wrapper append-right-4 prepend-top-4 board-label"
|
||
|
>
|
||
|
<a @click="$emit('scoped-label-click', label)">
|
||
|
<span :ref="'labelTitleRef'" :style="labelStyle" class="badge label color-label">
|
||
|
{{ label.title }}
|
||
|
</span>
|
||
|
<gl-tooltip :target="() => $refs.labelTitleRef" placement="top" boundary="viewport">
|
||
|
<span class="font-weight-bold scoped-label-tooltip-title">{{ __('Scoped label') }}</span
|
||
|
><br />
|
||
|
{{ label.description }}
|
||
|
</gl-tooltip>
|
||
|
</a>
|
||
|
|
||
|
<gl-link :href="scopedLabelsDocumentationLink" target="_blank" class="label scoped-label"
|
||
|
><i class="fa fa-question-circle" :style="labelStyle"></i
|
||
|
></gl-link>
|
||
|
</span>
|
||
|
</template>
|