UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

dialpad/dialtone

1 lines • 8.45 kB
1
{"version":3,"file":"feed_item_pill.vue.cjs","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :aria-label=\"ariaLabel\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #left>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <slot name=\"bottom\" />\n </div>\n </template>\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\n /**\n * Bolded primary text\n */\n title: {\n type: String,\n default: () => '',\n },\n\n /**\n * Additional styling around the pill\n */\n wrapperClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional styling for the pill\n */\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Aria label for feed pill\n */\n ariaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n */\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /**\n * Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"names":["DtItemLayout","DtCollapsible","FEED_ITEM_PILL_BORDER_COLORS","DtIconChevronDown","DtIconChevronRight","_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","_createSlots","_createBlock","_resolveDynamicComponent","_renderSlot","_withCtx","_toDisplayString"],"mappings":"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"}