@dialpad/dialtone/dist/vue3/components/badge/badge.vue.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const badge_constants = require("./badge_constants.cjs");
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const icon_constants = require("../icon/icon_constants.cjs");
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtBadge",
  props: {
    /**
     * The size of the left and right icons.
     * @values 100, 200, 300, 400, 500, 600, 700, 800
     */
    iconSize: {
      type: String,
      default: "200",
      validator: (s) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(s)
    },
    /**
     * Text for the badge content
     */
    text: {
      type: String,
      default: ""
    },
    /**
     * The kind of badge which determines the styling
     * @values label, count
     */
    kind: {
      type: String,
      default: "label",
      validator: (kind) => Object.keys(badge_constants.BADGE_KIND_MODIFIERS).includes(kind)
    },
    /**
     * Color for the badge background
     * @values default, info, success, warning, critical, bulletin, ai
     */
    type: {
      type: String,
      default: "default",
      validator: (type) => Object.keys(badge_constants.BADGE_TYPE_MODIFIERS).includes(type)
    },
    /**
     * Decoration for the badge. This can be only used with kind: label and type: default
     * with no left and right icons
     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
     */
    decoration: {
      type: String,
      default: void 0,
      validator: (type) => Object.keys(badge_constants.BADGE_DECORATION_MODIFIERS).includes(type)
    },
    /**
     * Used to customize the label container
     */
    labelClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Shows a subtle appearance for the badge
     * Currently only affects the badge when type is bulletin.
     */
    subtle: {
      type: Boolean,
      default: false
    },
    /**
     * Outlines the badge with a border
     */
    outlined: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      BADGE_TYPE_MODIFIERS: badge_constants.BADGE_TYPE_MODIFIERS,
      BADGE_KIND_MODIFIERS: badge_constants.BADGE_KIND_MODIFIERS,
      BADGE_DECORATION_MODIFIERS: badge_constants.BADGE_DECORATION_MODIFIERS
    };
  },
  computed: {
    hasLeftIcon() {
      return common_utils.hasSlotContent(this.$slots.leftIcon);
    },
    hasRightIcon() {
      return common_utils.hasSlotContent(this.$slots.rightIcon);
    },
    hasIcons() {
      return this.hasLeftIcon || this.hasRightIcon;
    }
  },
  updated() {
    this.validateProps();
  },
  methods: {
    validateProps() {
      this.validateTypePropCombination();
      this.validateDecorationPropCombination();
    },
    validateTypePropCombination() {
      if (this.type === "ai" && this.kind === "count") {
        console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.");
      }
      if (this.type !== "bulletin" && this.subtle) {
        console.error("DtBadge error: subtle can only be used with type 'bulletin'");
      }
    },
    validateDecorationPropCombination() {
      if (!this.decoration) return;
      if (this.kind !== "label" || this.type !== "default") {
        console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.");
      }
      if (this.hasIcons) {
        console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.");
      }
    }
  }
};
const _hoisted_1 = {
  key: 0,
  class: "d-badge__decorative"
};
const _hoisted_2 = {
  key: 1,
  class: "d-badge__icon-left"
};
const _hoisted_3 = {
  key: 2,
  class: "d-badge__icon-right"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createElementBlock("span", {
    class: vue.normalizeClass([
      "d-badge",
      $data.BADGE_TYPE_MODIFIERS[$props.type],
      $data.BADGE_KIND_MODIFIERS[$props.kind],
      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
      { "d-badge--subtle": $props.subtle },
      { "d-badge--outlined": $props.outlined }
    ]),
    "data-qa": "dt-badge"
  }, [
    $props.decoration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1)) : vue.createCommentVNode("", true),
    $options.hasLeftIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
      vue.renderSlot(_ctx.$slots, "leftIcon", { iconSize: $props.iconSize })
    ])) : vue.createCommentVNode("", true),
    vue.createElementVNode("span", {
      class: vue.normalizeClass(["d-badge__label", $props.labelClass])
    }, [
      vue.renderSlot(_ctx.$slots, "default", {}, () => [
        vue.createTextVNode(vue.toDisplayString($props.text), 1)
      ])
    ], 2),
    $options.hasRightIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
      vue.renderSlot(_ctx.$slots, "rightIcon", { iconSize: $props.iconSize })
    ])) : vue.createCommentVNode("", true)
  ], 2);
}
const DtBadge = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtBadge;
//# sourceMappingURL=badge.vue.cjs.map