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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"badge.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      <!-- @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"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","_createCommentVNode","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_createTextVNode","_toDisplayString","_hoisted_3"],"mappings":"kTAuDKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,EACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,CACrE,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,CACrE,EASD,WAAY,CACV,KAAM,OACN,QAAS,OACT,UAAYA,GAAS,OAAO,KAAKE,4BAA0B,EAAE,SAASF,CAAI,CAC3E,EAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,qBAAAC,EAAoB,qBACpB,qBAAAF,EAAoB,gDACpBG,EAA0B,2BAE7B,EAED,SAAU,CACR,aAAe,CACb,OAAOC,iBAAe,KAAK,OAAO,QAAQ,CAC3C,EAED,cAAgB,CACd,OAAOA,iBAAe,KAAK,OAAO,SAAS,CAC5C,EAED,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,YACjC,CACF,EAED,SAAW,CACT,KAAK,cAAa,CACnB,EAED,QAAS,CACP,eAAiB,CACf,KAAK,4BAA2B,EAChC,KAAK,kCAAiC,CACvC,EAED,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,yEAA6E,EAEzF,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,6DAA+D,CAEhF,EAED,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,yFAA6F,EAGzG,KAAK,UACP,QAAQ,MAAM,2EAA2E,EAE5F,CACF,CACH,KA9LA,IAAA,EAcM,MAAM,0BAdZ,IAAA,EAkBM,MAAM,yBAlBZ,IAAA,EAkCM,MAAM,oEAjCVC,EAyCO,mBAAA,OAAA,CAxCJ,MAFLC,EAAAA,eAAA,WAEqCC,EAAA,qBAAqBC,EAAI,IAAA,EAASD,EAAA,qBAAqBC,EAAI,IAAA,EAASD,EAAA,2BAA2BC,EAAU,UAAA,qBAA8BA,EAAM,MAAA,uBAAiCA,EAAQ,QAAA,IAQvN,UAAQ,aAGAA,EAAU,YADlBC,EAAAA,YAAAJ,EAAAA,mBAGE,OAHFK,CAGE,GAfNC,EAAA,mBAAA,GAAA,EAAA,EAiBYC,EAAW,aADnBH,EAAAA,YAAAJ,EAAAA,mBASO,OATPQ,EASO,CAJLC,EAGE,WAAAC,EAAA,OAAA,WAAA,CADC,SAAWP,EAAQ,SAAA,KAvB5BG,EAAA,mBAAA,GAAA,EAAA,EA0BIK,EAAAA,mBAKO,OAAA,CALA,MA1BXV,EAAAA,iCA0BqCE,EAAU,UAAA,CAAA,IAEzCM,EAAAA,WAEOC,sBAFP,IAEO,CA9BbE,EAAAA,gBAAAC,EAAAA,gBA6BWV,EAAI,IAAA,EAAA,CAAA,QAIHI,EAAY,cADpBH,EAAAA,YAAAJ,EAAAA,mBASO,OATPc,EASO,CAJLL,EAGE,WAAAC,EAAA,OAAA,YAAA,CADC,SAAWP,EAAQ,SAAA,KAvC5BG,EAAA,mBAAA,GAAA,EAAA"}