@shopware-ag/meteor-component-library/dist/esm/MtColorBadge.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-color-badge.css';
import { defineComponent, openBlock, createElementBlock, mergeProps, renderSlot } from "vue";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
const _sfc_main = defineComponent({
  name: "MtColorBadge",
  props: {
    variant: {
      type: String,
      required: false,
      default: "default",
      validator(value) {
        return ["default", "warning", "critical", "positive", "info"].includes(value);
      }
    },
    color: {
      type: String,
      required: false,
      default: ""
    },
    rounded: {
      type: Boolean,
      required: false,
      default: false
    },
    hasText: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    colorStyle() {
      if (!this.color.length) {
        return "";
      }
      return `background:${this.color}`;
    },
    variantClass() {
      return {
        [`is--${this.variant}`]: true,
        "is--rounded": this.rounded,
        "has--text": this.hasText
      };
    }
  }
});
const mtColorBadge_vue_vue_type_style_index_0_lang = "";
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("span", mergeProps({
    class: ["mt-color-badge", _ctx.variantClass]
  }, _ctx.$attrs, { style: _ctx.colorStyle }), [
    renderSlot(_ctx.$slots, "default")
  ], 16);
}
const MtColorBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  MtColorBadge as default
};
//# sourceMappingURL=MtColorBadge.js.map