@dialpad/dialtone/dist/vue3/lib/badge/badge.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"badge.cjs","names":[],"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      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\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  compatConfig: { MODE: 3 },\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\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 hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.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"],"mappings":"6UAuDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CASD,WAAY,CACV,KAAM,OACN,QAAS,IAAA,GACT,UAAY,GAAS,OAAO,KAAK,EAAA,2BAA2B,CAAC,SAAS,EAAK,CAC5E,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,qBAAA,EAAA,qBACA,qBAAA,EAAA,qBACA,2BAAA,EAAA,2BACD,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAA,eAAe,KAAK,OAAO,SAAS,EAG7C,cAAgB,CACd,OAAO,EAAA,eAAe,KAAK,OAAO,UAAU,EAG9C,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,cAEnC,CAED,SAAW,CACT,KAAK,eAAe,EAGtB,QAAS,CACP,eAAiB,CACf,KAAK,6BAA6B,CAClC,KAAK,mCAAmC,EAG1C,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,0EAA8E,CAE1F,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,8DAAgE,EAIlF,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,0FAA8F,CAG1G,KAAK,UACP,QAAQ,MAAM,4EAA4E,GAG/F,CACF,UAhLK,MAAM,gCAIN,MAAM,+BAgBN,MAAM,gGAQH,OAAA,CAxCJ,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,qBAAqB,EAAA,MAAa,EAAA,qBAAqB,EAAA,MAAa,EAAA,2BAA2B,EAAA,+BAAwC,EAAA,OAAM,sBAAiC,EAAA,SAAQ,GAQvN,UAAQ,aAGA,EAAA,aAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAEM,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,WAAA,CADC,SAAW,EAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,0BAQjB,OAAA,CALA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,YAIlC,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAIH,EAAA,eAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,YAAA,CADC,SAAW,EAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}