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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_hoisted_1","_hoisted_4","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_withCtx","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_createCommentVNode","_normalizeClass","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"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"}