@gitlab/ui/dist/components/base/label/label.js

GitLab UI Components

import GlLink from '../link/link';
import GlTooltip from '../tooltip/tooltip';
import GlIcon from '../icon/icon';
import { labelColorOptions } from '../../../utils/constants';
import { colorFromBackground } from '../../../utils/utils';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var blackNormal = '#333';

var _titleColorClassMap;

var titleColorClassMap = (_titleColorClassMap = {}, _defineProperty(_titleColorClassMap, labelColorOptions.dark, 'gl-label-text-dark'), _defineProperty(_titleColorClassMap, labelColorOptions.light, 'gl-label-text-light'), _titleColorClassMap);
var script = {
  components: {
    GlLink: GlLink,
    GlTooltip: GlTooltip,
    GlIcon: GlIcon
  },
  props: {
    backgroundColor: {
      type: String,
      required: true,
      validator: function validator(value) {
        return /^(#|rgb|rgba)/.test(value);
      }
    },
    title: {
      type: String,
      required: true,
      default: ''
    },
    description: {
      type: String,
      required: false,
      default: ''
    },
    size: {
      type: String,
      required: false,
      default: ''
    },
    tooltipPlacement: {
      type: String,
      required: false,
      default: 'top'
    },
    target: {
      type: String,
      required: false,
      default: '#'
    },
    scoped: {
      type: Boolean,
      required: false,
      default: false
    },
    scopedLabelsDocumentationLink: {
      type: String,
      required: false,
      default: '#'
    }
  },
  data: function data() {
    return {
      splitScopedLabelIndex: this.title.lastIndexOf('::')
    };
  },
  computed: {
    cssClasses: function cssClasses() {
      return {
        'gl-label-sm': this.size === 'sm',
        'gl-label-scoped': this.scoped
      };
    },
    titleColorClass: function titleColorClass() {
      return titleColorClassMap[colorFromBackground(this.backgroundColor)];
    },
    scopedKey: function scopedKey() {
      return this.scoped ? this.title.slice(0, this.splitScopedLabelIndex) : this.title;
    },
    scopedValue: function scopedValue() {
      return this.title.slice(this.splitScopedLabelIndex + 2);
    },
    scopedValueColor: function scopedValueColor() {
      return colorFromBackground(this.backgroundColor) === 'dark' ? blackNormal : this.backgroundColor;
    },
    boxShadow: function boxShadow() {
      return {
        boxShadow: "inset 0 0 0 ".concat(this.size === 'sm' ? '1px' : '2px', " ").concat(this.backgroundColor)
      };
    }
  },
  watch: {
    title: function title() {
      this.splitScopedLabelIndex = this.title.lastIndexOf('::');
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({ref:"labelTitle",staticClass:"gl-label",class:[_vm.titleColorClass, _vm.cssClasses],style:(_vm.boxShadow),on:{"click":function($event){return _vm.$emit('click', $event)}}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text",style:({ backgroundColor: _vm.backgroundColor })},[_vm._v(_vm._s(_vm.scopedKey))]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text",style:({
        color: _vm.scopedValueColor,
      })},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.scoped)?_c('gl-link',{staticClass:"gl-label-icon",attrs:{"href":_vm.scopedLabelsDocumentationLink}},[_c('gl-icon',{attrs:{"name":"question","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;