@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
169 lines (168 loc) • 5.29 kB
JavaScript
import { BADGE_KIND_MODIFIERS, BADGE_TYPE_MODIFIERS, BADGE_DECORATION_MODIFIERS } from "./badge_constants.js";
import { hasSlotContent } from "../../common/utils.js";
import { openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
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_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_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_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_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_KIND_MODIFIERS,
BADGE_DECORATION_MODIFIERS
};
},
computed: {
hasLeftIcon() {
return hasSlotContent(this.$slots.leftIcon);
},
hasRightIcon() {
return 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 openBlock(), createElementBlock("span", {
class: 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 ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true),
$options.hasLeftIcon ? (openBlock(), createElementBlock("span", _hoisted_2, [
renderSlot(_ctx.$slots, "leftIcon", { iconSize: $props.iconSize })
])) : createCommentVNode("", true),
createElementVNode("span", {
class: normalizeClass(["d-badge__label", $props.labelClass])
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString($props.text), 1)
])
], 2),
$options.hasRightIcon ? (openBlock(), createElementBlock("span", _hoisted_3, [
renderSlot(_ctx.$slots, "rightIcon", { iconSize: $props.iconSize })
])) : createCommentVNode("", true)
], 2);
}
const DtBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtBadge as default
};
//# sourceMappingURL=badge.vue.js.map