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

GitLab UI Components

import GlLink from '../link/link';
import { badgeVariantOptions, badgeIconSizeOptions, linkVariantUnstyled } from '../../../utils/constants';
import GlIcon from '../icon/icon';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

//
const variantClass = {
  [badgeVariantOptions.muted]: 'badge-muted',
  [badgeVariantOptions.neutral]: 'badge-neutral',
  [badgeVariantOptions.info]: 'badge-info',
  [badgeVariantOptions.success]: 'badge-success',
  [badgeVariantOptions.warning]: 'badge-warning',
  [badgeVariantOptions.danger]: 'badge-danger',
  [badgeVariantOptions.tier]: 'badge-tier'
};
var script = {
  name: 'GlBadge',
  components: {
    GlLink,
    GlIcon
  },
  props: {
    /**
     * The variant of the badge.
     */
    variant: {
      type: String,
      default: badgeVariantOptions.muted,
      validator(value) {
        return badgeVariantOptions[value] !== undefined;
      },
      required: false
    },
    /**
     * The icon to show next to the text
     */
    icon: {
      type: String,
      required: false,
      default: null
    },
    /**
     * The size of the icon 16 or 12
     */
    iconSize: {
      type: String,
      default: 'md',
      validator: value => Object.keys(badgeIconSizeOptions).includes(value),
      required: false
    },
    /**
     * Optically aligns circular icons with the badge.
     */
    iconOpticallyAligned: {
      type: Boolean,
      default: false,
      required: false
    },
    /**
     * Custom tag to use (unless `href` is defined)
     */
    tag: {
      type: String,
      required: false,
      default: 'span'
    },
    /**
     * Creates the badge as link (ignores `tag` property)
     */
    href: {
      type: String,
      required: false,
      default: undefined
    },
    /**
     * Sets the `rel` attributes, when `href` is defined
     */
    rel: {
      type: String,
      required: false,
      default: null
    },
    /**
     * Sets the `target`, when `href` is defined
     */
    target: {
      type: String,
      required: false,
      default: '_self'
    },
    /**
     * Adds the `active` class, when `href` is defined
     */
    active: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Disables the link, when `href` is defined
     */
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    hasIconOnly() {
      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
      return Boolean(this.icon && Object.keys(this.$slots).length === 0);
    },
    isCircularIcon() {
      return this.iconOpticallyAligned || ['issue-open-m', 'issue-close'].includes(this.icon);
    },
    role() {
      return this.hasIconOnly ? 'img' : undefined;
    },
    ariaLabel() {
      if (this.$attrs['aria-label']) {
        return this.$attrs['aria-label'];
      }
      return this.role === 'img' ? this.icon : undefined;
    },
    iconSizeComputed() {
      return badgeIconSizeOptions[this.iconSize];
    },
    isLink() {
      return Boolean(this.href);
    },
    computedTag() {
      return this.isLink ? GlLink : this.tag;
    },
    computedProps() {
      if (!this.isLink) return {};
      const {
        href,
        rel,
        target,
        active,
        disabled
      } = this;
      return {
        href,
        rel,
        target,
        active,
        disabled,
        variant: linkVariantUnstyled
      };
    },
    classes() {
      return ['gl-badge', 'badge', 'badge-pill', variantClass[this.variant], {
        '!gl-px-2': !this.$scopedSlots.default
      }];
    }
  }
};

/* 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(_vm.computedTag,_vm._g(_vm._b({tag:"component",class:_vm.classes,attrs:{"role":_vm.role,"aria-label":_vm.ariaLabel}},'component',_vm.computedProps,false),_vm.$listeners),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_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__ = /*#__PURE__*/__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 { __vue_component__ as default };