@dialpad/dialtone/dist/vue3/lib/badge/badge.js

Dialpad's Dialtone design system monorepo

import { hasSlotContent as e } from "../../common/utils/index.js";
import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
import { BADGE_DECORATION_MODIFIERS as r, BADGE_KIND_MODIFIERS as i, BADGE_TYPE_MODIFIERS as a } from "./badge-constants.js";
import { createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p } from "vue";
//#region components/badge/badge.vue
var m = {
	compatConfig: { MODE: 3 },
	name: "DtBadge",
	props: {
		iconSize: {
			type: String,
			default: "200",
			validator: (e) => Object.keys(n).includes(e)
		},
		text: {
			type: String,
			default: ""
		},
		kind: {
			type: String,
			default: "label",
			validator: (e) => Object.keys(i).includes(e)
		},
		type: {
			type: String,
			default: "default",
			validator: (e) => Object.keys(a).includes(e)
		},
		decoration: {
			type: String,
			default: void 0,
			validator: (e) => Object.keys(r).includes(e)
		},
		labelClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		subtle: {
			type: Boolean,
			default: !1
		},
		outlined: {
			type: Boolean,
			default: !1
		}
	},
	data() {
		return {
			BADGE_TYPE_MODIFIERS: a,
			BADGE_KIND_MODIFIERS: i,
			BADGE_DECORATION_MODIFIERS: r
		};
	},
	computed: {
		hasLeftIcon() {
			return e(this.$slots.leftIcon);
		},
		hasRightIcon() {
			return e(this.$slots.rightIcon);
		},
		hasIcons() {
			return this.hasLeftIcon || this.hasRightIcon;
		}
	},
	updated() {
		this.validateProps();
	},
	methods: {
		validateProps() {
			this.validateTypePropCombination(), this.validateDecorationPropCombination();
		},
		validateTypePropCombination() {
			this.type === "ai" && this.kind === "count" && console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."), this.type !== "bulletin" && this.subtle && console.error("DtBadge error: subtle can only be used with type 'bulletin'");
		},
		validateDecorationPropCombination() {
			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon."));
		}
	}
}, h = {
	key: 0,
	class: "d-badge__decorative"
}, g = {
	key: 1,
	class: "d-badge__icon-left"
}, _ = {
	key: 2,
	class: "d-badge__icon-right"
};
function v(e, t, n, r, i, a) {
	return d(), s("span", {
		class: u([
			"d-badge",
			i.BADGE_TYPE_MODIFIERS[n.type],
			i.BADGE_KIND_MODIFIERS[n.kind],
			i.BADGE_DECORATION_MODIFIERS[n.decoration],
			{ "d-badge--subtle": n.subtle },
			{ "d-badge--outlined": n.outlined }
		]),
		"data-qa": "dt-badge"
	}, [
		n.decoration ? (d(), s("span", h)) : o("", !0),
		a.hasLeftIcon ? (d(), s("span", g, [f(e.$slots, "leftIcon", { iconSize: n.iconSize })])) : o("", !0),
		c("span", { class: u(["d-badge__label", n.labelClass]) }, [f(e.$slots, "default", {}, () => [l(p(n.text), 1)])], 2),
		a.hasRightIcon ? (d(), s("span", _, [f(e.$slots, "rightIcon", { iconSize: n.iconSize })])) : o("", !0)
	], 2);
}
var y = /* @__PURE__ */ t(m, [["render", v]]);
//#endregion
export { y as default };

//# sourceMappingURL=badge.js.map