primevue/badge/badge.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue = this.primevue || {};
this.primevue.badge = (function (BaseComponent, usestyle, utils, vue) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);

    var styles = "\n.p-badge {\n    display: inline-block;\n    border-radius: 10px;\n    text-align: center;\n    padding: 0 .5rem;\n}\n\n.p-overlay-badge {\n    position: relative;\n}\n\n.p-overlay-badge .p-badge {\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(50%,-50%);\n    transform-origin: 100% 0;\n    margin: 0;\n}\n\n.p-badge-dot {\n    width: .5rem;\n    min-width: .5rem;\n    height: .5rem;\n    border-radius: 50%;\n    padding: 0;\n}\n\n.p-badge-no-gutter {\n    padding: 0;\n    border-radius: 50%;\n}\n";
    var classes = {
      root: function root(_ref) {
        var props = _ref.props,
          instance = _ref.instance;
        return ['p-badge p-component', {
          'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
          'p-badge-dot': utils.ObjectUtils.isEmpty(props.value) && !instance.$slots["default"],
          'p-badge-lg': props.size === 'large',
          'p-badge-xl': props.size === 'xlarge',
          'p-badge-info': props.severity === 'info',
          'p-badge-success': props.severity === 'success',
          'p-badge-warning': props.severity === 'warning',
          'p-badge-danger': props.severity === 'danger'
        }];
      }
    };
    var _useStyle = usestyle.useStyle(styles, {
        name: 'badge',
        manual: true
      }),
      loadStyle = _useStyle.load;
    var script$1 = {
      name: 'BaseBadge',
      "extends": BaseComponent__default["default"],
      props: {
        value: {
          type: [String, Number],
          "default": null
        },
        severity: {
          type: String,
          "default": null
        },
        size: {
          type: String,
          "default": null
        }
      },
      css: {
        classes: classes,
        loadStyle: loadStyle
      },
      provide: function provide() {
        return {
          $parentInstance: this
        };
      }
    };

    var script = {
      name: 'Badge',
      "extends": script$1
    };

    function render(_ctx, _cache, $props, $setup, $data, $options) {
      return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
        "class": _ctx.cx('root')
      }, _ctx.ptm('root'), {
        "data-pc-name": "badge"
      }), [vue.renderSlot(_ctx.$slots, "default", {}, function () {
        return [vue.createTextVNode(vue.toDisplayString(_ctx.value), 1)];
      })], 16);
    }

    script.render = render;

    return script;

})(primevue.basecomponent, primevue.usestyle, primevue.utils, Vue);