@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 6.43 kB

Source Map (JSON)

{"version":3,"file":"badge.vue.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n <span\n :class=\"[\n 'd-badge',\n BADGE_TYPE_MODIFIERS[type],\n BADGE_KIND_MODIFIERS[kind],\n BADGE_DECORATION_MODIFIERS[decoration],\n { 'd-badge--subtle': subtle },\n { 'd-badge--outlined': outlined },\n ]\"\n data-qa=\"dt-badge\"\n >\n <span\n v-if=\"decoration\"\n class=\"d-badge__decorative\"\n />\n <span\n v-if=\"hasLeftIcon\"\n class=\"d-badge__icon-left\"\n >\n \n <slot\n name=\"leftIcon\"\n :icon-size=\"'200'\"\n />\n </span>\n <span :class=\"['d-badge__label', labelClass]\">\n \n <slot>\n {{ text }}\n </slot>\n </span>\n <span\n v-if=\"hasRightIcon\"\n class=\"d-badge__icon-right\"\n >\n \n <slot\n name=\"rightIcon\"\n :icon-size=\"'200'\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n name: 'DtBadge',\n\n props: {\n /**\n * Text for the badge content\n */\n text: {\n type: String,\n default: '',\n },\n\n /**\n * The kind of badge which determines the styling\n * @values label, count\n */\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /**\n * Color for the badge background\n * @values default, info, success, warning, critical, bulletin, ai\n */\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /**\n * Decoration for the badge. This can be only used with kind: label and type: default\n * with no left and right icons\n * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n */\n decoration: {\n type: String,\n default: undefined,\n validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Shows a subtle appearance for the badge\n * Currently only affects the badge when type is bulletin.\n */\n subtle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Outlines the badge with a border\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n BADGE_TYPE_MODIFIERS,\n BADGE_KIND_MODIFIERS,\n BADGE_DECORATION_MODIFIERS,\n };\n },\n\n computed: {\n hasLeftIcon () {\n return this.$scopedSlots.leftIcon && this.$scopedSlots.leftIcon();\n },\n\n hasRightIcon () {\n return this.$scopedSlots.rightIcon && this.$scopedSlots.rightIcon();\n },\n\n hasIcons () {\n return this.hasLeftIcon || this.hasRightIcon;\n },\n },\n\n updated () {\n this.validateProps();\n },\n\n methods: {\n validateProps () {\n this.validateTypePropCombination();\n this.validateDecorationPropCombination();\n },\n\n validateTypePropCombination () {\n if (this.type === 'ai' && this.kind === 'count') {\n console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n }\n if (this.type !== 'bulletin' && this.subtle) {\n console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n }\n },\n\n validateDecorationPropCombination () {\n if (!this.decoration) return;\n\n if (this.kind !== 'label' || this.type !== 'default') {\n console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n }\n\n if (this.hasIcons) {\n console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n }\n },\n },\n};\n</script>\n"],"names":["BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS"],"mappings":";;;;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAA,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,0CAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,4BAAAE,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,aAAA,YAAA,KAAA,aAAA;IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,aAAA;IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,cAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,4BAAA;AACA,WAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,UAAA,KAAA,SAAA,QAAA,KAAA,SAAA,SAAA;AACA,gBAAA,MAAA,yEAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,cAAA,KAAA,QAAA;AACA,gBAAA,MAAA,6DAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oCAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,UAAA,KAAA,SAAA,WAAA,KAAA,SAAA,WAAA;AACA,gBAAA,MAAA,yFAAA;AAAA,MACA;AAEA,UAAA,KAAA,UAAA;AACA,gBAAA,MAAA,2EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}