@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 8.96 kB

Source Map (JSON)

{"version":3,"file":"chip.vue.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n <span class=\"d-chip\">\n <component\n :is=\"interactive ? 'button' : 'span'\"\n :id=\"id\"\n :type=\"interactive && 'button'\"\n :class=\"chipClasses()\"\n data-qa=\"dt-chip\"\n :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n :aria-label=\"ariaLabel\"\n v-on=\"chipListeners\"\n >\n <span\n v-if=\"hasSlotContent($slots.icon)\"\n data-qa=\"dt-chip-icon\"\n class=\"d-chip__icon\"\n >\n \n <slot name=\"icon\" />\n </span>\n <span\n v-else-if=\"hasSlotContent($slots.avatar)\"\n data-qa=\"dt-chip-avatar\"\n >\n \n <slot name=\"avatar\" />\n </span>\n <span\n v-if=\"hasSlotContent($slots.default)\"\n :id=\"`${id}-content`\"\n data-qa=\"dt-chip-label\"\n :class=\"['d-chip__text', contentClass]\"\n >\n \n <slot />\n </span>\n </component>\n <dt-button\n v-if=\"!hideClose\"\n v-bind=\"closeButtonProps\"\n :class=\"chipCloseButtonClasses()\"\n data-qa=\"dt-chip-close\"\n :aria-label=\"closeButtonProps.ariaLabel\"\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';\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 * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n */\n closeButtonProps: {\n type: Object,\n default: function () { return { ariaLabel: 'close' }; },\n validator: (props) => {\n return !!props.ariaLabel;\n },\n },\n\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 };\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\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":["DtButton","DtIconClose","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_renderSlot","_createCommentVNode","_normalizeClass","_createVNode"],"mappings":"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"}