@dialpad/dialtone-vue 2.144.1 → 2.145.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/combobox-multi-select.cjs +3 -1
- package/dist/lib/combobox-multi-select.cjs.map +1 -1
- package/dist/lib/combobox-multi-select.js +3 -1
- package/dist/lib/combobox-multi-select.js.map +1 -1
- package/dist/lib/emoji-text-wrapper.cjs +9 -6
- package/dist/lib/emoji-text-wrapper.cjs.map +1 -1
- package/dist/lib/emoji-text-wrapper.js +9 -6
- package/dist/lib/emoji-text-wrapper.js.map +1 -1
- package/dist/lib/emoji.cjs +1 -1
- package/dist/lib/emoji.cjs.map +1 -1
- package/dist/lib/emoji.js +1 -1
- package/dist/lib/emoji.js.map +1 -1
- package/dist/lib/message-input.cjs +12 -9
- package/dist/lib/message-input.cjs.map +1 -1
- package/dist/lib/message-input.js +12 -9
- package/dist/lib/message-input.js.map +1 -1
- package/dist/style.css +10 -14
- package/dist/types/components/emoji_text_wrapper/emoji_text_wrapper.vue.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -457,6 +457,8 @@ const _sfc_main = {
|
|
|
457
457
|
this.popoverOffset = [0, 4];
|
|
458
458
|
if (!lastChip)
|
|
459
459
|
return;
|
|
460
|
+
if (this.collapseOnFocusOut && !this.inputFocused)
|
|
461
|
+
return;
|
|
460
462
|
const left = lastChip.offsetLeft + this.getFullWidth(lastChip);
|
|
461
463
|
input.style.paddingLeft = left + "px";
|
|
462
464
|
const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;
|
|
@@ -550,7 +552,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
|
|
550
552
|
_sfc_staticRenderFns,
|
|
551
553
|
false,
|
|
552
554
|
null,
|
|
553
|
-
"
|
|
555
|
+
"f0e55fc8",
|
|
554
556
|
null,
|
|
555
557
|
null
|
|
556
558
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-multi-select.cjs","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n xs: 1.4,\n sm: 0.4,\n md: 0.2,\n};\n\nexport default {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n};\n","<template>\n <dt-recipe-combobox-with-popover\n ref=\"comboboxWithPopover\"\n :label=\"label\"\n :show-list=\"showList\"\n :max-height=\"listMaxHeight\"\n :popover-offset=\"popoverOffset\"\n :has-suggestion-list=\"hasSuggestionList\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n content-width=\"anchor\"\n :append-to=\"appendTo\"\n :transition=\"transition\"\n @select=\"onComboboxSelect\"\n >\n <template #input=\"{ onInput }\">\n <span\n ref=\"inputSlotWrapper\"\n class=\"combobox__input-wrapper\"\n @focusin=\"handleInputFocusIn\"\n @focusout=\"handleInputFocusOut\"\n >\n <span\n ref=\"chipsWrapper\"\n :class=\"['combobox__chip-wrapper', chipWrapperClass]\"\n >\n <dt-chip\n v-for=\"({ item, key }) in selectedItemsWithKeys\"\n ref=\"chips\"\n :key=\"key\"\n :label-class=\"['d-chip__label']\"\n class=\"combobox__chip\"\n :close-button-props=\"{ ariaLabel: 'close' }\"\n :size=\"CHIP_SIZES[size]\"\n v-on=\"chipListeners\"\n @keyup.backspace=\"onChipRemove(item)\"\n @close=\"onChipRemove(item)\"\n >\n {{ item }}\n </dt-chip>\n </span>\n\n <dt-input\n ref=\"input\"\n v-model=\"value\"\n class=\"combobox__input\"\n :aria-label=\"label\"\n :label=\"labelVisible ? label : ''\"\n :description=\"description\"\n :placeholder=\"inputPlaceHolder\"\n :show-messages=\"showInputMessages\"\n :messages=\"inputMessages\"\n :size=\"size\"\n v-on=\"inputListeners\"\n @input=\"onInput\"\n />\n\n <dt-validation-messages\n :validation-messages=\"maxSelectedMessage\"\n :show-messages=\"showValidationMessages\"\n />\n </span>\n </template>\n\n <!-- @slot slot for popover header -->\n <template\n v-if=\"$slots.header\"\n #header\n >\n <div ref=\"header\">\n <slot name=\"header\" />\n </div>\n </template>\n\n <!-- @slot slot for popover list -->\n <template #list>\n <div\n ref=\"list\"\n @mousedown.prevent\n >\n <slot\n v-if=\"!loading\"\n name=\"list\"\n />\n <div\n v-else\n class=\"combobox__list--loading\"\n >\n {{ loadingMessage }}\n </div>\n </div>\n </template>\n\n <!-- @slot slot for popover footer -->\n <template\n v-if=\"$slots.footer\"\n #footer\n >\n <div ref=\"footer\">\n <slot name=\"footer\" />\n </div>\n </template>\n </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeComboboxMultiSelect',\n\n components: {\n DtRecipeComboboxWithPopover,\n DtInput,\n DtChip,\n DtValidationMessages,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * String to use for the input label.\n */\n label: {\n type: String,\n required: true,\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Input placeholder\n */\n placeholder: {\n type: String,\n default: 'Select one or start typing',\n },\n\n /**\n * Input validation messages\n */\n inputMessages: {\n type: Array,\n default: () => [],\n validator: inputMessages => {\n return validationMessageValidator(inputMessages);\n },\n },\n\n /**\n * Show input validation message\n */\n showInputMessages: {\n type: Boolean,\n default: true,\n },\n\n // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n // type: {\n // type: String,\n // values: ['input', 'select'],\n // default: 'select',\n // },\n\n /**\n * Determines if the list is loading\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The message when the list is loading\n */\n loadingMessage: {\n type: String,\n default: 'loading...',\n },\n\n /**\n * Determines when to show the list element and also controls the aria-expanded attribute.\n * Leaving this null will have the combobox trigger on input focus by default.\n * If you set this value, the default trigger behavior will be disabled and you can\n * control it as you need.\n */\n showList: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n listMaxHeight: {\n type: String,\n default: '300px',\n },\n\n /**\n * The selected items\n */\n selectedItems: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Would be the maximum number of selections you can make. 0 is unlimited\n */\n maxSelected: {\n type: Number,\n default: 0,\n },\n\n /**\n * Max select message when the max selections is exceeded with the structure:\n * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n */\n maxSelectedMessage: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Displays the list when the combobox is focused, before the user has typed anything.\n * When this is enabled the list will not close after selection.\n */\n hasSuggestionList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Size of the chip, one of `xs`, `sm`, `md`\n */\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n\n /**\n * Determines whether the combobox should collapse to a single when losing focus.\n * @type {boolean}\n */\n collapseOnFocusOut: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String }\n */\n 'input',\n\n /**\n * Event fired when item selected\n *\n * @event select\n * @type {Number}\n */\n 'select',\n\n /**\n * Event fired when item removed\n *\n * @event remove\n * @type {String}\n */\n 'remove',\n\n /**\n * Event fired when max selected items limit is reached\n *\n * @event max-selected\n * @type {Object}\n */\n 'max-selected',\n\n /**\n * Native keyup event\n *\n * @event keyup\n * @type {KeyboardEvent}\n */\n 'keyup',\n ],\n\n data () {\n return {\n value: '',\n popoverOffset: [0, 4],\n showValidationMessages: false,\n resizeWindowObserver: null,\n initialInputHeight: null,\n CHIP_SIZES,\n inputFocused: false,\n };\n },\n\n computed: {\n inputPlaceHolder () {\n return this.selectedItems?.length > 0 ? '' : this.placeholder;\n },\n\n chipListeners () {\n return {\n ...this.$listeners,\n keyup: event => {\n this.onChipKeyup(event);\n this.$emit('keyup', event);\n },\n };\n },\n\n inputListeners () {\n return {\n ...this.$listeners,\n input: event => {\n this.$emit('input', event);\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n\n keyup: event => {\n this.onInputKeyup(event);\n this.$emit('keyup', event);\n },\n\n click: event => {\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n };\n },\n\n selectedItemsWithKeys () {\n return this.selectedItems.map(selectedItem => ({\n item: selectedItem,\n key: getUniqueString(selectedItem),\n }));\n },\n\n chipWrapperClass () {\n return {\n [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n };\n },\n },\n\n watch: {\n selectedItems: {\n async handler () {\n this.initSelectedItems();\n },\n },\n\n async label () {\n await this.$nextTick();\n // Adjust the chips position if label changed\n this.setChipsTopPosition();\n },\n\n async description () {\n await this.$nextTick();\n // Adjust the chips position if description changed\n this.setChipsTopPosition();\n },\n\n size: {\n async handler () {\n await this.$nextTick();\n const input = this.getInput();\n this.revertInputPadding(input);\n this.initialInputHeight = input.getBoundingClientRect().height;\n this.setInputPadding();\n this.setChipsTopPosition();\n },\n },\n },\n\n mounted () {\n this.setInitialInputHeight();\n // Recalculate chip position and input padding when resizing window\n this.resizeWindowObserver = new ResizeObserver(async () => {\n this.setChipsTopPosition();\n this.setInputPadding();\n });\n this.resizeWindowObserver.observe(document.body);\n\n this.initSelectedItems();\n },\n\n beforeDestroy () {\n this.resizeWindowObserver?.unobserve(document.body);\n },\n\n methods: {\n async initSelectedItems () {\n await this.$nextTick();\n this.setInputPadding();\n this.setChipsTopPosition();\n this.setInputMinWidth();\n this.checkMaxSelected();\n },\n\n onChipRemove (item) {\n this.$emit('remove', item);\n this.$refs.input?.focus();\n },\n\n onComboboxSelect (i) {\n this.value = '';\n this.$emit('select', i);\n },\n\n showComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.showComboboxList();\n },\n\n closeComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.closeComboboxList();\n },\n\n getChipButtons () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n },\n\n getChips () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n },\n\n getLastChipButton () {\n return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n },\n\n getLastChip () {\n return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n },\n\n getFirstChip () {\n return this.$refs.chips && this.getChips()[0];\n },\n\n getInput () {\n return this.$refs.input?.$refs.input;\n },\n\n onChipKeyup (event) {\n const key = event.code?.toLowerCase();\n if (key === 'arrowleft') {\n // Move to the previous chip\n this.navigateBetweenChips(event.target, true);\n } else if (key === 'arrowright') {\n if (event.target.id === this.getLastChipButton().id) {\n // Move to the input if it's the last chip\n this.moveFromChipToInput();\n } else {\n // Move to the next chip\n this.navigateBetweenChips(event.target, false);\n }\n }\n },\n\n onInputKeyup (event) {\n const key = event.code?.toLowerCase();\n // If the cursor is at the start of the text,\n // press 'backspace' or 'left' focuses the last chip\n if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n if (key === 'backspace' || key === 'arrowleft') {\n this.moveFromInputToChip();\n }\n }\n },\n\n moveFromInputToChip () {\n this.getLastChipButton().focus();\n this.$refs.input?.blur();\n this.closeComboboxList();\n },\n\n moveFromChipToInput () {\n this.getLastChipButton().blur();\n this.$refs.input?.focus();\n this.showComboboxList();\n },\n\n navigateBetweenChips (target, toLeft) {\n const from = this.getChipButtons().indexOf(target);\n const to = toLeft ? from - 1 : from + 1;\n if (to < 0 || to >= this.$refs.chips?.length) {\n return;\n }\n this.getChipButtons()[from].blur();\n this.getChipButtons()[to].focus();\n this.closeComboboxList();\n },\n\n setChipsTopPosition () {\n // To place the chips in the input box\n // The chip \"top\" position should be the same line as the input box\n const input = this.getInput();\n if (!input) return;\n const inputSlotWrapper = this.$refs.inputSlotWrapper;\n const top = input.getBoundingClientRect().top -\n inputSlotWrapper.getBoundingClientRect().top;\n const chipsWrapper = this.$refs.chipsWrapper;\n chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n },\n\n setInputPadding () {\n const lastChip = this.getLastChip();\n const input = this.getInput();\n const chipsWrapper = this.$refs.chipsWrapper;\n if (!input) return;\n this.revertInputPadding(input);\n this.popoverOffset = [0, 4];\n if (!lastChip) return;\n\n // Get the position of the last chip\n // The input cursor should be the same \"top\" as that chip and next besides it\n const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n input.style.paddingLeft = left + 'px';\n\n // Get the chip size minus the 4px padding\n const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n // Get lastChip offsetTop plus 2px of the input padding.\n const top = lastChip.offsetTop + 2;\n\n // Add padding to Top only if the chips need more space\n if (chipsSize > this.initialInputHeight) {\n input.style.paddingTop = `${top}px`;\n }\n },\n\n revertInputPadding (input) {\n input.style.paddingLeft = '';\n input.style.paddingTop = '';\n input.style.paddingBottom = '';\n },\n\n getFullWidth (el) {\n const styles = window.getComputedStyle(el);\n return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n },\n\n setInputMinWidth () {\n // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n const firstChip = this.getFirstChip();\n const input = this.getInput();\n if (!input) return;\n if (firstChip) {\n // Add 4px buffer for typing room\n input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n } else {\n input.style.minWidth = '';\n }\n },\n\n checkMaxSelected () {\n if (this.maxSelected === 0) return;\n if (this.selectedItems.length > this.maxSelected) {\n this.showValidationMessages = true;\n this.$emit('max-selected');\n } else {\n this.showValidationMessages = false;\n }\n },\n\n setInitialInputHeight () {\n const input = this.getInput();\n if (!input) return;\n this.initialInputHeight = input.getBoundingClientRect().height;\n },\n\n async handleInputFocusIn () {\n this.inputFocused = true;\n if (this.collapseOnFocusOut) {\n await this.$nextTick();\n this.setInputPadding();\n }\n },\n\n async handleInputFocusOut () {\n this.inputFocused = false;\n if (this.collapseOnFocusOut) {\n const input = this.getInput();\n if (!input) return;\n this.revertInputPadding(input);\n }\n },\n },\n};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n position: relative;\n display: block;\n}\n\n.combobox__chip-wrapper {\n position: absolute;\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n padding-left: var(--dt-space-100);\n max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n max-height: initial;\n overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n max-height: 2.8rem;\n overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n max-height: 2.5rem;\n overflow-y: hidden;\n}\n\n.combobox__chip {\n margin-top: var(--dt-space-300);\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n z-index: var(--zi-base1);\n max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n flex-grow: 1;\n}\n\n.combobox__list--loading {\n text-align: center;\n padding-top: var(--dt-space-500);\n padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":["DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","validationMessageValidator","POPOVER_APPEND_TO_VALUES","getUniqueString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAY,MAAC,qBAAqB;AAAA;AAAA,EAEhC,aAAa;AAAA,EACb,OAAO;AAAA,EACP,SAAS;AACX;AAEY,MAAC,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AC0GA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,6BAAAA,wBAAA;AAAA,IACA,SAAAC,UAAA;AAAA,IACA,QAAAC,SAAA;AAAA,IACA,sBAAAC,uBAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,qBAAAA,sBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,mBAAA;AACA,eAAAC,kBAAAA,2BAAA,aAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAA,kBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,aAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,cAAA;AACA,eAAAC,kBAAA,yBAAA,SAAA,QAAA,KACA,oBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,eAAA,CAAA,GAAA,CAAA;AAAA,MACA,wBAAA;AAAA,MACA,sBAAA;AAAA,MACA,oBAAA;AAAA,MACA;AAAA,MACA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;;AACA,eAAA,UAAA,kBAAA,mBAAA,UAAA,IAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,WAAA;AACA,eAAA,YAAA,KAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,WAAA;AACA,eAAA,MAAA,SAAA,KAAA;AACA,cAAA,KAAA,mBAAA;AACA,iBAAA,iBAAA;AAAA,UACA;AAAA,QACA;AAAA,QAEA,OAAA,WAAA;AACA,eAAA,aAAA,KAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,QAEA,OAAA,WAAA;AACA,cAAA,KAAA,mBAAA;AACA,iBAAA,iBAAA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,cAAA,IAAA,mBAAA;AAAA,QACA,MAAA;AAAA,QACA,KAAAC,aAAA,gBAAA,YAAA;AAAA,MACA,EAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA;AAAA,QACA,CAAA,0BAAA,KAAA,IAAA,aAAA,GAAA,CAAA,KAAA,gBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,eAAA;AAAA,MACA,MAAA,UAAA;AACA,aAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,MAAA,QAAA;AACA,YAAA,KAAA;AAEA,WAAA,oBAAA;AAAA,IACA;AAAA,IAEA,MAAA,cAAA;AACA,YAAA,KAAA;AAEA,WAAA,oBAAA;AAAA,IACA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,cAAA,KAAA;AACA,cAAA,QAAA,KAAA;AACA,aAAA,mBAAA,KAAA;AACA,aAAA,qBAAA,MAAA,sBAAA,EAAA;AACA,aAAA,gBAAA;AACA,aAAA,oBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,sBAAA;AAEA,SAAA,uBAAA,IAAA,eAAA,YAAA;AACA,WAAA,oBAAA;AACA,WAAA,gBAAA;AAAA,IACA,CAAA;AACA,SAAA,qBAAA,QAAA,SAAA,IAAA;AAEA,SAAA,kBAAA;AAAA,EACA;AAAA,EAEA,gBAAA;;AACA,eAAA,yBAAA,mBAAA,UAAA,SAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,oBAAA;AACA,YAAA,KAAA;AACA,WAAA,gBAAA;AACA,WAAA,oBAAA;AACA,WAAA,iBAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,aAAA,MAAA;;AACA,WAAA,MAAA,UAAA,IAAA;AACA,iBAAA,MAAA,UAAA,mBAAA;AAAA,IACA;AAAA,IAEA,iBAAA,GAAA;AACA,WAAA,QAAA;AACA,WAAA,MAAA,UAAA,CAAA;AAAA,IACA;AAAA,IAEA,mBAAA;;AACA,UAAA,KAAA,YAAA,MAAA;AAAA;AAAA,MAAA;AACA,iBAAA,MAAA,wBAAA,mBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;;AACA,UAAA,KAAA,YAAA,MAAA;AAAA;AAAA,MAAA;AACA,iBAAA,MAAA,wBAAA,mBAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,MAAA,MAAA,IAAA,UAAA,KAAA,IAAA,cAAA,QAAA,CAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,MAAA,MAAA,IAAA,UAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,iBAAA,KAAA,eAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,WAAA,KAAA,SAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,SAAA,EAAA,CAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,cAAA,UAAA,MAAA,UAAA,mBAAA,MAAA;AAAA,IACA;AAAA,IAEA,YAAA,OAAA;;AACA,YAAA,OAAA,WAAA,SAAA,mBAAA;AACA,UAAA,QAAA,aAAA;AAEA,aAAA,qBAAA,MAAA,QAAA,IAAA;AAAA,MACA,WAAA,QAAA,cAAA;AACA,YAAA,MAAA,OAAA,OAAA,KAAA,kBAAA,EAAA,IAAA;AAEA,eAAA,oBAAA;AAAA,QACA,OAAA;AAEA,eAAA,qBAAA,MAAA,QAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,aAAA,OAAA;;AACA,YAAA,OAAA,WAAA,SAAA,mBAAA;AAGA,UAAA,KAAA,cAAA,SAAA,KAAA,MAAA,OAAA,mBAAA,GAAA;AACA,YAAA,QAAA,eAAA,QAAA,aAAA;AACA,eAAA,oBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,sBAAA;;AACA,WAAA,oBAAA;AACA,iBAAA,MAAA,UAAA,mBAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;;AACA,WAAA,oBAAA;AACA,iBAAA,MAAA,UAAA,mBAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,qBAAA,QAAA,QAAA;;AACA,YAAA,OAAA,KAAA,eAAA,EAAA,QAAA,MAAA;AACA,YAAA,KAAA,SAAA,OAAA,IAAA,OAAA;AACA,UAAA,KAAA,KAAA,QAAA,UAAA,MAAA,UAAA,mBAAA,SAAA;AACA;AAAA,MACA;AACA,WAAA,eAAA,EAAA,IAAA,EAAA,KAAA;AACA,WAAA,eAAA,EAAA,EAAA,EAAA,MAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAGA,YAAA,QAAA,KAAA;AACA,UAAA,CAAA;AAAA;AACA,YAAA,mBAAA,KAAA,MAAA;AACA,YAAA,MAAA,MAAA,sBAAA,EAAA,MACA,iBAAA,sBAAA,EAAA;AACA,YAAA,eAAA,KAAA,MAAA;AACA,mBAAA,MAAA,MAAA,MAAA,kBAAA,KAAA,IAAA,IAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAA,WAAA,KAAA;AACA,YAAA,QAAA,KAAA;AACA,YAAA,eAAA,KAAA,MAAA;AACA,UAAA,CAAA;AAAA;AACA,WAAA,mBAAA,KAAA;AACA,WAAA,gBAAA,CAAA,GAAA,CAAA;AACA,UAAA,CAAA;AAAA;AAIA,YAAA,OAAA,SAAA,aAAA,KAAA,aAAA,QAAA;AACA,YAAA,MAAA,cAAA,OAAA;AAGA,YAAA,YAAA,aAAA,sBAAA,EAAA,SAAA;AAGA,YAAA,MAAA,SAAA,YAAA;AAGA,UAAA,YAAA,KAAA,oBAAA;AACA,cAAA,MAAA,aAAA,GAAA,GAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,mBAAA,OAAA;AACA,YAAA,MAAA,cAAA;AACA,YAAA,MAAA,aAAA;AACA,YAAA,MAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA,IAAA;AACA,YAAA,SAAA,OAAA,iBAAA,EAAA;AACA,aAAA,GAAA,cAAA,SAAA,OAAA,UAAA,IAAA,SAAA,OAAA,WAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAEA,YAAA,YAAA,KAAA;AACA,YAAA,QAAA,KAAA;AACA,UAAA,CAAA;AAAA;AACA,UAAA,WAAA;AAEA,cAAA,MAAA,WAAA,KAAA,aAAA,SAAA,IAAA,IAAA;AAAA,MACA,OAAA;AACA,cAAA,MAAA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,UAAA,KAAA,gBAAA;AAAA;AACA,UAAA,KAAA,cAAA,SAAA,KAAA,aAAA;AACA,aAAA,yBAAA;AACA,aAAA,MAAA,cAAA;AAAA,MACA,OAAA;AACA,aAAA,yBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,YAAA,QAAA,KAAA;AACA,UAAA,CAAA;AAAA;AACA,WAAA,qBAAA,MAAA,sBAAA,EAAA;AAAA,IACA;AAAA,IAEA,MAAA,qBAAA;AACA,WAAA,eAAA;AACA,UAAA,KAAA,oBAAA;AACA,cAAA,KAAA;AACA,aAAA,gBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,MAAA,sBAAA;AACA,WAAA,eAAA;AACA,UAAA,KAAA,oBAAA;AACA,cAAA,QAAA,KAAA;AACA,YAAA,CAAA;AAAA;AACA,aAAA,mBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"combobox-multi-select.cjs","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n xs: 1.4,\n sm: 0.4,\n md: 0.2,\n};\n\nexport default {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n};\n","<template>\n <dt-recipe-combobox-with-popover\n ref=\"comboboxWithPopover\"\n :label=\"label\"\n :show-list=\"showList\"\n :max-height=\"listMaxHeight\"\n :popover-offset=\"popoverOffset\"\n :has-suggestion-list=\"hasSuggestionList\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n content-width=\"anchor\"\n :append-to=\"appendTo\"\n :transition=\"transition\"\n @select=\"onComboboxSelect\"\n >\n <template #input=\"{ onInput }\">\n <span\n ref=\"inputSlotWrapper\"\n class=\"combobox__input-wrapper\"\n @focusin=\"handleInputFocusIn\"\n @focusout=\"handleInputFocusOut\"\n >\n <span\n ref=\"chipsWrapper\"\n :class=\"['combobox__chip-wrapper', chipWrapperClass]\"\n >\n <dt-chip\n v-for=\"({ item, key }) in selectedItemsWithKeys\"\n ref=\"chips\"\n :key=\"key\"\n :label-class=\"['d-chip__label']\"\n class=\"combobox__chip\"\n :close-button-props=\"{ ariaLabel: 'close' }\"\n :size=\"CHIP_SIZES[size]\"\n v-on=\"chipListeners\"\n @keyup.backspace=\"onChipRemove(item)\"\n @close=\"onChipRemove(item)\"\n >\n {{ item }}\n </dt-chip>\n </span>\n\n <dt-input\n ref=\"input\"\n v-model=\"value\"\n class=\"combobox__input\"\n :aria-label=\"label\"\n :label=\"labelVisible ? label : ''\"\n :description=\"description\"\n :placeholder=\"inputPlaceHolder\"\n :show-messages=\"showInputMessages\"\n :messages=\"inputMessages\"\n :size=\"size\"\n v-on=\"inputListeners\"\n @input=\"onInput\"\n />\n\n <dt-validation-messages\n :validation-messages=\"maxSelectedMessage\"\n :show-messages=\"showValidationMessages\"\n />\n </span>\n </template>\n\n <!-- @slot slot for popover header -->\n <template\n v-if=\"$slots.header\"\n #header\n >\n <div ref=\"header\">\n <slot name=\"header\" />\n </div>\n </template>\n\n <!-- @slot slot for popover list -->\n <template #list>\n <div\n ref=\"list\"\n @mousedown.prevent\n >\n <slot\n v-if=\"!loading\"\n name=\"list\"\n />\n <div\n v-else\n class=\"combobox__list--loading\"\n >\n {{ loadingMessage }}\n </div>\n </div>\n </template>\n\n <!-- @slot slot for popover footer -->\n <template\n v-if=\"$slots.footer\"\n #footer\n >\n <div ref=\"footer\">\n <slot name=\"footer\" />\n </div>\n </template>\n </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeComboboxMultiSelect',\n\n components: {\n DtRecipeComboboxWithPopover,\n DtInput,\n DtChip,\n DtValidationMessages,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * String to use for the input label.\n */\n label: {\n type: String,\n required: true,\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Input placeholder\n */\n placeholder: {\n type: String,\n default: 'Select one or start typing',\n },\n\n /**\n * Input validation messages\n */\n inputMessages: {\n type: Array,\n default: () => [],\n validator: inputMessages => {\n return validationMessageValidator(inputMessages);\n },\n },\n\n /**\n * Show input validation message\n */\n showInputMessages: {\n type: Boolean,\n default: true,\n },\n\n // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n // type: {\n // type: String,\n // values: ['input', 'select'],\n // default: 'select',\n // },\n\n /**\n * Determines if the list is loading\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The message when the list is loading\n */\n loadingMessage: {\n type: String,\n default: 'loading...',\n },\n\n /**\n * Determines when to show the list element and also controls the aria-expanded attribute.\n * Leaving this null will have the combobox trigger on input focus by default.\n * If you set this value, the default trigger behavior will be disabled and you can\n * control it as you need.\n */\n showList: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n listMaxHeight: {\n type: String,\n default: '300px',\n },\n\n /**\n * The selected items\n */\n selectedItems: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Would be the maximum number of selections you can make. 0 is unlimited\n */\n maxSelected: {\n type: Number,\n default: 0,\n },\n\n /**\n * Max select message when the max selections is exceeded with the structure:\n * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n */\n maxSelectedMessage: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Displays the list when the combobox is focused, before the user has typed anything.\n * When this is enabled the list will not close after selection.\n */\n hasSuggestionList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Size of the chip, one of `xs`, `sm`, `md`\n */\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n\n /**\n * Determines whether the combobox should collapse to a single when losing focus.\n * @type {boolean}\n */\n collapseOnFocusOut: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String }\n */\n 'input',\n\n /**\n * Event fired when item selected\n *\n * @event select\n * @type {Number}\n */\n 'select',\n\n /**\n * Event fired when item removed\n *\n * @event remove\n * @type {String}\n */\n 'remove',\n\n /**\n * Event fired when max selected items limit is reached\n *\n * @event max-selected\n * @type {Object}\n */\n 'max-selected',\n\n /**\n * Native keyup event\n *\n * @event keyup\n * @type {KeyboardEvent}\n */\n 'keyup',\n ],\n\n data () {\n return {\n value: '',\n popoverOffset: [0, 4],\n showValidationMessages: false,\n resizeWindowObserver: null,\n initialInputHeight: null,\n CHIP_SIZES,\n inputFocused: false,\n };\n },\n\n computed: {\n inputPlaceHolder () {\n return this.selectedItems?.length > 0 ? '' : this.placeholder;\n },\n\n chipListeners () {\n return {\n ...this.$listeners,\n keyup: event => {\n this.onChipKeyup(event);\n this.$emit('keyup', event);\n },\n };\n },\n\n inputListeners () {\n return {\n ...this.$listeners,\n input: event => {\n this.$emit('input', event);\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n\n keyup: event => {\n this.onInputKeyup(event);\n this.$emit('keyup', event);\n },\n\n click: event => {\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n };\n },\n\n selectedItemsWithKeys () {\n return this.selectedItems.map(selectedItem => ({\n item: selectedItem,\n key: getUniqueString(selectedItem),\n }));\n },\n\n chipWrapperClass () {\n return {\n [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n };\n },\n },\n\n watch: {\n selectedItems: {\n async handler () {\n this.initSelectedItems();\n },\n },\n\n async label () {\n await this.$nextTick();\n // Adjust the chips position if label changed\n this.setChipsTopPosition();\n },\n\n async description () {\n await this.$nextTick();\n // Adjust the chips position if description changed\n this.setChipsTopPosition();\n },\n\n size: {\n async handler () {\n await this.$nextTick();\n const input = this.getInput();\n this.revertInputPadding(input);\n this.initialInputHeight = input.getBoundingClientRect().height;\n this.setInputPadding();\n this.setChipsTopPosition();\n },\n },\n },\n\n mounted () {\n this.setInitialInputHeight();\n // Recalculate chip position and input padding when resizing window\n this.resizeWindowObserver = new ResizeObserver(async () => {\n this.setChipsTopPosition();\n this.setInputPadding();\n });\n this.resizeWindowObserver.observe(document.body);\n\n this.initSelectedItems();\n },\n\n beforeDestroy () {\n this.resizeWindowObserver?.unobserve(document.body);\n },\n\n methods: {\n async initSelectedItems () {\n await this.$nextTick();\n this.setInputPadding();\n this.setChipsTopPosition();\n this.setInputMinWidth();\n this.checkMaxSelected();\n },\n\n onChipRemove (item) {\n this.$emit('remove', item);\n this.$refs.input?.focus();\n },\n\n onComboboxSelect (i) {\n this.value = '';\n this.$emit('select', i);\n },\n\n showComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.showComboboxList();\n },\n\n closeComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.closeComboboxList();\n },\n\n getChipButtons () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n },\n\n getChips () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n },\n\n getLastChipButton () {\n return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n },\n\n getLastChip () {\n return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n },\n\n getFirstChip () {\n return this.$refs.chips && this.getChips()[0];\n },\n\n getInput () {\n return this.$refs.input?.$refs.input;\n },\n\n onChipKeyup (event) {\n const key = event.code?.toLowerCase();\n if (key === 'arrowleft') {\n // Move to the previous chip\n this.navigateBetweenChips(event.target, true);\n } else if (key === 'arrowright') {\n if (event.target.id === this.getLastChipButton().id) {\n // Move to the input if it's the last chip\n this.moveFromChipToInput();\n } else {\n // Move to the next chip\n this.navigateBetweenChips(event.target, false);\n }\n }\n },\n\n onInputKeyup (event) {\n const key = event.code?.toLowerCase();\n // If the cursor is at the start of the text,\n // press 'backspace' or 'left' focuses the last chip\n if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n if (key === 'backspace' || key === 'arrowleft') {\n this.moveFromInputToChip();\n }\n }\n },\n\n moveFromInputToChip () {\n this.getLastChipButton().focus();\n this.$refs.input?.blur();\n this.closeComboboxList();\n },\n\n moveFromChipToInput () {\n this.getLastChipButton().blur();\n this.$refs.input?.focus();\n this.showComboboxList();\n },\n\n navigateBetweenChips (target, toLeft) {\n const from = this.getChipButtons().indexOf(target);\n const to = toLeft ? from - 1 : from + 1;\n if (to < 0 || to >= this.$refs.chips?.length) {\n return;\n }\n this.getChipButtons()[from].blur();\n this.getChipButtons()[to].focus();\n this.closeComboboxList();\n },\n\n setChipsTopPosition () {\n // To place the chips in the input box\n // The chip \"top\" position should be the same line as the input box\n const input = this.getInput();\n if (!input) return;\n const inputSlotWrapper = this.$refs.inputSlotWrapper;\n const top = input.getBoundingClientRect().top -\n inputSlotWrapper.getBoundingClientRect().top;\n const chipsWrapper = this.$refs.chipsWrapper;\n chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n },\n\n setInputPadding () {\n const lastChip = this.getLastChip();\n const input = this.getInput();\n const chipsWrapper = this.$refs.chipsWrapper;\n if (!input) return;\n this.revertInputPadding(input);\n this.popoverOffset = [0, 4];\n if (!lastChip) return;\n // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n // This ensures the input returns to its original state when resizing\n if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n // Get the position of the last chip\n // The input cursor should be the same \"top\" as that chip and next besides it\n const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n input.style.paddingLeft = left + 'px';\n\n // Get the chip size minus the 4px padding\n const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n // Get lastChip offsetTop plus 2px of the input padding.\n const top = lastChip.offsetTop + 2;\n\n // Add padding to Top only if the chips need more space\n if (chipsSize > this.initialInputHeight) {\n input.style.paddingTop = `${top}px`;\n }\n },\n\n revertInputPadding (input) {\n input.style.paddingLeft = '';\n input.style.paddingTop = '';\n input.style.paddingBottom = '';\n },\n\n getFullWidth (el) {\n const styles = window.getComputedStyle(el);\n return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n },\n\n setInputMinWidth () {\n // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n const firstChip = this.getFirstChip();\n const input = this.getInput();\n if (!input) return;\n if (firstChip) {\n // Add 4px buffer for typing room\n input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n } else {\n input.style.minWidth = '';\n }\n },\n\n checkMaxSelected () {\n if (this.maxSelected === 0) return;\n if (this.selectedItems.length > this.maxSelected) {\n this.showValidationMessages = true;\n this.$emit('max-selected');\n } else {\n this.showValidationMessages = false;\n }\n },\n\n setInitialInputHeight () {\n const input = this.getInput();\n if (!input) return;\n this.initialInputHeight = input.getBoundingClientRect().height;\n },\n\n async handleInputFocusIn () {\n this.inputFocused = true;\n if (this.collapseOnFocusOut) {\n await this.$nextTick();\n this.setInputPadding();\n }\n },\n\n async handleInputFocusOut () {\n this.inputFocused = false;\n if (this.collapseOnFocusOut) {\n const input = this.getInput();\n if (!input) return;\n this.revertInputPadding(input);\n }\n },\n },\n};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n position: relative;\n display: block;\n}\n\n.combobox__chip-wrapper {\n position: absolute;\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n padding-left: var(--dt-space-100);\n max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n max-height: initial;\n overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n max-height: 2.8rem;\n overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n max-height: 2.5rem;\n overflow-y: hidden;\n}\n\n.combobox__chip {\n margin-top: var(--dt-space-300);\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n z-index: var(--zi-base1);\n max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n flex-grow: 1;\n}\n\n.combobox__list--loading {\n text-align: center;\n padding-top: var(--dt-space-500);\n padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":["DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","validationMessageValidator","POPOVER_APPEND_TO_VALUES","getUniqueString"],"mappings":"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"}
|
|
@@ -455,6 +455,8 @@ const _sfc_main = {
|
|
|
455
455
|
this.popoverOffset = [0, 4];
|
|
456
456
|
if (!lastChip)
|
|
457
457
|
return;
|
|
458
|
+
if (this.collapseOnFocusOut && !this.inputFocused)
|
|
459
|
+
return;
|
|
458
460
|
const left = lastChip.offsetLeft + this.getFullWidth(lastChip);
|
|
459
461
|
input.style.paddingLeft = left + "px";
|
|
460
462
|
const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;
|
|
@@ -548,7 +550,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
|
|
|
548
550
|
_sfc_staticRenderFns,
|
|
549
551
|
false,
|
|
550
552
|
null,
|
|
551
|
-
"
|
|
553
|
+
"f0e55fc8",
|
|
552
554
|
null,
|
|
553
555
|
null
|
|
554
556
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-multi-select.js","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n xs: 1.4,\n sm: 0.4,\n md: 0.2,\n};\n\nexport default {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n};\n","<template>\n <dt-recipe-combobox-with-popover\n ref=\"comboboxWithPopover\"\n :label=\"label\"\n :show-list=\"showList\"\n :max-height=\"listMaxHeight\"\n :popover-offset=\"popoverOffset\"\n :has-suggestion-list=\"hasSuggestionList\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n content-width=\"anchor\"\n :append-to=\"appendTo\"\n :transition=\"transition\"\n @select=\"onComboboxSelect\"\n >\n <template #input=\"{ onInput }\">\n <span\n ref=\"inputSlotWrapper\"\n class=\"combobox__input-wrapper\"\n @focusin=\"handleInputFocusIn\"\n @focusout=\"handleInputFocusOut\"\n >\n <span\n ref=\"chipsWrapper\"\n :class=\"['combobox__chip-wrapper', chipWrapperClass]\"\n >\n <dt-chip\n v-for=\"({ item, key }) in selectedItemsWithKeys\"\n ref=\"chips\"\n :key=\"key\"\n :label-class=\"['d-chip__label']\"\n class=\"combobox__chip\"\n :close-button-props=\"{ ariaLabel: 'close' }\"\n :size=\"CHIP_SIZES[size]\"\n v-on=\"chipListeners\"\n @keyup.backspace=\"onChipRemove(item)\"\n @close=\"onChipRemove(item)\"\n >\n {{ item }}\n </dt-chip>\n </span>\n\n <dt-input\n ref=\"input\"\n v-model=\"value\"\n class=\"combobox__input\"\n :aria-label=\"label\"\n :label=\"labelVisible ? label : ''\"\n :description=\"description\"\n :placeholder=\"inputPlaceHolder\"\n :show-messages=\"showInputMessages\"\n :messages=\"inputMessages\"\n :size=\"size\"\n v-on=\"inputListeners\"\n @input=\"onInput\"\n />\n\n <dt-validation-messages\n :validation-messages=\"maxSelectedMessage\"\n :show-messages=\"showValidationMessages\"\n />\n </span>\n </template>\n\n <!-- @slot slot for popover header -->\n <template\n v-if=\"$slots.header\"\n #header\n >\n <div ref=\"header\">\n <slot name=\"header\" />\n </div>\n </template>\n\n <!-- @slot slot for popover list -->\n <template #list>\n <div\n ref=\"list\"\n @mousedown.prevent\n >\n <slot\n v-if=\"!loading\"\n name=\"list\"\n />\n <div\n v-else\n class=\"combobox__list--loading\"\n >\n {{ loadingMessage }}\n </div>\n </div>\n </template>\n\n <!-- @slot slot for popover footer -->\n <template\n v-if=\"$slots.footer\"\n #footer\n >\n <div ref=\"footer\">\n <slot name=\"footer\" />\n </div>\n </template>\n </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeComboboxMultiSelect',\n\n components: {\n DtRecipeComboboxWithPopover,\n DtInput,\n DtChip,\n DtValidationMessages,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * String to use for the input label.\n */\n label: {\n type: String,\n required: true,\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Input placeholder\n */\n placeholder: {\n type: String,\n default: 'Select one or start typing',\n },\n\n /**\n * Input validation messages\n */\n inputMessages: {\n type: Array,\n default: () => [],\n validator: inputMessages => {\n return validationMessageValidator(inputMessages);\n },\n },\n\n /**\n * Show input validation message\n */\n showInputMessages: {\n type: Boolean,\n default: true,\n },\n\n // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n // type: {\n // type: String,\n // values: ['input', 'select'],\n // default: 'select',\n // },\n\n /**\n * Determines if the list is loading\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The message when the list is loading\n */\n loadingMessage: {\n type: String,\n default: 'loading...',\n },\n\n /**\n * Determines when to show the list element and also controls the aria-expanded attribute.\n * Leaving this null will have the combobox trigger on input focus by default.\n * If you set this value, the default trigger behavior will be disabled and you can\n * control it as you need.\n */\n showList: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n listMaxHeight: {\n type: String,\n default: '300px',\n },\n\n /**\n * The selected items\n */\n selectedItems: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Would be the maximum number of selections you can make. 0 is unlimited\n */\n maxSelected: {\n type: Number,\n default: 0,\n },\n\n /**\n * Max select message when the max selections is exceeded with the structure:\n * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n */\n maxSelectedMessage: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Displays the list when the combobox is focused, before the user has typed anything.\n * When this is enabled the list will not close after selection.\n */\n hasSuggestionList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Size of the chip, one of `xs`, `sm`, `md`\n */\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n\n /**\n * Determines whether the combobox should collapse to a single when losing focus.\n * @type {boolean}\n */\n collapseOnFocusOut: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String }\n */\n 'input',\n\n /**\n * Event fired when item selected\n *\n * @event select\n * @type {Number}\n */\n 'select',\n\n /**\n * Event fired when item removed\n *\n * @event remove\n * @type {String}\n */\n 'remove',\n\n /**\n * Event fired when max selected items limit is reached\n *\n * @event max-selected\n * @type {Object}\n */\n 'max-selected',\n\n /**\n * Native keyup event\n *\n * @event keyup\n * @type {KeyboardEvent}\n */\n 'keyup',\n ],\n\n data () {\n return {\n value: '',\n popoverOffset: [0, 4],\n showValidationMessages: false,\n resizeWindowObserver: null,\n initialInputHeight: null,\n CHIP_SIZES,\n inputFocused: false,\n };\n },\n\n computed: {\n inputPlaceHolder () {\n return this.selectedItems?.length > 0 ? '' : this.placeholder;\n },\n\n chipListeners () {\n return {\n ...this.$listeners,\n keyup: event => {\n this.onChipKeyup(event);\n this.$emit('keyup', event);\n },\n };\n },\n\n inputListeners () {\n return {\n ...this.$listeners,\n input: event => {\n this.$emit('input', event);\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n\n keyup: event => {\n this.onInputKeyup(event);\n this.$emit('keyup', event);\n },\n\n click: event => {\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n };\n },\n\n selectedItemsWithKeys () {\n return this.selectedItems.map(selectedItem => ({\n item: selectedItem,\n key: getUniqueString(selectedItem),\n }));\n },\n\n chipWrapperClass () {\n return {\n [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n };\n },\n },\n\n watch: {\n selectedItems: {\n async handler () {\n this.initSelectedItems();\n },\n },\n\n async label () {\n await this.$nextTick();\n // Adjust the chips position if label changed\n this.setChipsTopPosition();\n },\n\n async description () {\n await this.$nextTick();\n // Adjust the chips position if description changed\n this.setChipsTopPosition();\n },\n\n size: {\n async handler () {\n await this.$nextTick();\n const input = this.getInput();\n this.revertInputPadding(input);\n this.initialInputHeight = input.getBoundingClientRect().height;\n this.setInputPadding();\n this.setChipsTopPosition();\n },\n },\n },\n\n mounted () {\n this.setInitialInputHeight();\n // Recalculate chip position and input padding when resizing window\n this.resizeWindowObserver = new ResizeObserver(async () => {\n this.setChipsTopPosition();\n this.setInputPadding();\n });\n this.resizeWindowObserver.observe(document.body);\n\n this.initSelectedItems();\n },\n\n beforeDestroy () {\n this.resizeWindowObserver?.unobserve(document.body);\n },\n\n methods: {\n async initSelectedItems () {\n await this.$nextTick();\n this.setInputPadding();\n this.setChipsTopPosition();\n this.setInputMinWidth();\n this.checkMaxSelected();\n },\n\n onChipRemove (item) {\n this.$emit('remove', item);\n this.$refs.input?.focus();\n },\n\n onComboboxSelect (i) {\n this.value = '';\n this.$emit('select', i);\n },\n\n showComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.showComboboxList();\n },\n\n closeComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.closeComboboxList();\n },\n\n getChipButtons () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n },\n\n getChips () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n },\n\n getLastChipButton () {\n return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n },\n\n getLastChip () {\n return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n },\n\n getFirstChip () {\n return this.$refs.chips && this.getChips()[0];\n },\n\n getInput () {\n return this.$refs.input?.$refs.input;\n },\n\n onChipKeyup (event) {\n const key = event.code?.toLowerCase();\n if (key === 'arrowleft') {\n // Move to the previous chip\n this.navigateBetweenChips(event.target, true);\n } else if (key === 'arrowright') {\n if (event.target.id === this.getLastChipButton().id) {\n // Move to the input if it's the last chip\n this.moveFromChipToInput();\n } else {\n // Move to the next chip\n this.navigateBetweenChips(event.target, false);\n }\n }\n },\n\n onInputKeyup (event) {\n const key = event.code?.toLowerCase();\n // If the cursor is at the start of the text,\n // press 'backspace' or 'left' focuses the last chip\n if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n if (key === 'backspace' || key === 'arrowleft') {\n this.moveFromInputToChip();\n }\n }\n },\n\n moveFromInputToChip () {\n this.getLastChipButton().focus();\n this.$refs.input?.blur();\n this.closeComboboxList();\n },\n\n moveFromChipToInput () {\n this.getLastChipButton().blur();\n this.$refs.input?.focus();\n this.showComboboxList();\n },\n\n navigateBetweenChips (target, toLeft) {\n const from = this.getChipButtons().indexOf(target);\n const to = toLeft ? from - 1 : from + 1;\n if (to < 0 || to >= this.$refs.chips?.length) {\n return;\n }\n this.getChipButtons()[from].blur();\n this.getChipButtons()[to].focus();\n this.closeComboboxList();\n },\n\n setChipsTopPosition () {\n // To place the chips in the input box\n // The chip \"top\" position should be the same line as the input box\n const input = this.getInput();\n if (!input) return;\n const inputSlotWrapper = this.$refs.inputSlotWrapper;\n const top = input.getBoundingClientRect().top -\n inputSlotWrapper.getBoundingClientRect().top;\n const chipsWrapper = this.$refs.chipsWrapper;\n chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n },\n\n setInputPadding () {\n const lastChip = this.getLastChip();\n const input = this.getInput();\n const chipsWrapper = this.$refs.chipsWrapper;\n if (!input) return;\n this.revertInputPadding(input);\n this.popoverOffset = [0, 4];\n if (!lastChip) return;\n\n // Get the position of the last chip\n // The input cursor should be the same \"top\" as that chip and next besides it\n const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n input.style.paddingLeft = left + 'px';\n\n // Get the chip size minus the 4px padding\n const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n // Get lastChip offsetTop plus 2px of the input padding.\n const top = lastChip.offsetTop + 2;\n\n // Add padding to Top only if the chips need more space\n if (chipsSize > this.initialInputHeight) {\n input.style.paddingTop = `${top}px`;\n }\n },\n\n revertInputPadding (input) {\n input.style.paddingLeft = '';\n input.style.paddingTop = '';\n input.style.paddingBottom = '';\n },\n\n getFullWidth (el) {\n const styles = window.getComputedStyle(el);\n return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n },\n\n setInputMinWidth () {\n // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n const firstChip = this.getFirstChip();\n const input = this.getInput();\n if (!input) return;\n if (firstChip) {\n // Add 4px buffer for typing room\n input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n } else {\n input.style.minWidth = '';\n }\n },\n\n checkMaxSelected () {\n if (this.maxSelected === 0) return;\n if (this.selectedItems.length > this.maxSelected) {\n this.showValidationMessages = true;\n this.$emit('max-selected');\n } else {\n this.showValidationMessages = false;\n }\n },\n\n setInitialInputHeight () {\n const input = this.getInput();\n if (!input) return;\n this.initialInputHeight = input.getBoundingClientRect().height;\n },\n\n async handleInputFocusIn () {\n this.inputFocused = true;\n if (this.collapseOnFocusOut) {\n await this.$nextTick();\n this.setInputPadding();\n }\n },\n\n async handleInputFocusOut () {\n this.inputFocused = false;\n if (this.collapseOnFocusOut) {\n const input = this.getInput();\n if (!input) return;\n this.revertInputPadding(input);\n }\n },\n },\n};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n position: relative;\n display: block;\n}\n\n.combobox__chip-wrapper {\n position: absolute;\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n padding-left: var(--dt-space-100);\n max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n max-height: initial;\n overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n max-height: 2.8rem;\n overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n max-height: 2.5rem;\n overflow-y: hidden;\n}\n\n.combobox__chip {\n margin-top: var(--dt-space-300);\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n z-index: var(--zi-base1);\n max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n flex-grow: 1;\n}\n\n.combobox__list--loading {\n text-align: center;\n padding-top: var(--dt-space-500);\n padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"combobox-multi-select.js","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n xs: 'xs',\n sm: 'xs',\n md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n xs: 1.4,\n sm: 0.4,\n md: 0.2,\n};\n\nexport default {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n};\n","<template>\n <dt-recipe-combobox-with-popover\n ref=\"comboboxWithPopover\"\n :label=\"label\"\n :show-list=\"showList\"\n :max-height=\"listMaxHeight\"\n :popover-offset=\"popoverOffset\"\n :has-suggestion-list=\"hasSuggestionList\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n content-width=\"anchor\"\n :append-to=\"appendTo\"\n :transition=\"transition\"\n @select=\"onComboboxSelect\"\n >\n <template #input=\"{ onInput }\">\n <span\n ref=\"inputSlotWrapper\"\n class=\"combobox__input-wrapper\"\n @focusin=\"handleInputFocusIn\"\n @focusout=\"handleInputFocusOut\"\n >\n <span\n ref=\"chipsWrapper\"\n :class=\"['combobox__chip-wrapper', chipWrapperClass]\"\n >\n <dt-chip\n v-for=\"({ item, key }) in selectedItemsWithKeys\"\n ref=\"chips\"\n :key=\"key\"\n :label-class=\"['d-chip__label']\"\n class=\"combobox__chip\"\n :close-button-props=\"{ ariaLabel: 'close' }\"\n :size=\"CHIP_SIZES[size]\"\n v-on=\"chipListeners\"\n @keyup.backspace=\"onChipRemove(item)\"\n @close=\"onChipRemove(item)\"\n >\n {{ item }}\n </dt-chip>\n </span>\n\n <dt-input\n ref=\"input\"\n v-model=\"value\"\n class=\"combobox__input\"\n :aria-label=\"label\"\n :label=\"labelVisible ? label : ''\"\n :description=\"description\"\n :placeholder=\"inputPlaceHolder\"\n :show-messages=\"showInputMessages\"\n :messages=\"inputMessages\"\n :size=\"size\"\n v-on=\"inputListeners\"\n @input=\"onInput\"\n />\n\n <dt-validation-messages\n :validation-messages=\"maxSelectedMessage\"\n :show-messages=\"showValidationMessages\"\n />\n </span>\n </template>\n\n <!-- @slot slot for popover header -->\n <template\n v-if=\"$slots.header\"\n #header\n >\n <div ref=\"header\">\n <slot name=\"header\" />\n </div>\n </template>\n\n <!-- @slot slot for popover list -->\n <template #list>\n <div\n ref=\"list\"\n @mousedown.prevent\n >\n <slot\n v-if=\"!loading\"\n name=\"list\"\n />\n <div\n v-else\n class=\"combobox__list--loading\"\n >\n {{ loadingMessage }}\n </div>\n </div>\n </template>\n\n <!-- @slot slot for popover footer -->\n <template\n v-if=\"$slots.footer\"\n #footer\n >\n <div ref=\"footer\">\n <slot name=\"footer\" />\n </div>\n </template>\n </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeComboboxMultiSelect',\n\n components: {\n DtRecipeComboboxWithPopover,\n DtInput,\n DtChip,\n DtValidationMessages,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * String to use for the input label.\n */\n label: {\n type: String,\n required: true,\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Input placeholder\n */\n placeholder: {\n type: String,\n default: 'Select one or start typing',\n },\n\n /**\n * Input validation messages\n */\n inputMessages: {\n type: Array,\n default: () => [],\n validator: inputMessages => {\n return validationMessageValidator(inputMessages);\n },\n },\n\n /**\n * Show input validation message\n */\n showInputMessages: {\n type: Boolean,\n default: true,\n },\n\n // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n // type: {\n // type: String,\n // values: ['input', 'select'],\n // default: 'select',\n // },\n\n /**\n * Determines if the list is loading\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The message when the list is loading\n */\n loadingMessage: {\n type: String,\n default: 'loading...',\n },\n\n /**\n * Determines when to show the list element and also controls the aria-expanded attribute.\n * Leaving this null will have the combobox trigger on input focus by default.\n * If you set this value, the default trigger behavior will be disabled and you can\n * control it as you need.\n */\n showList: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Determines maximum height for the popover before overflow.\n * Possible units rem|px|em\n */\n listMaxHeight: {\n type: String,\n default: '300px',\n },\n\n /**\n * The selected items\n */\n selectedItems: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Would be the maximum number of selections you can make. 0 is unlimited\n */\n maxSelected: {\n type: Number,\n default: 0,\n },\n\n /**\n * Max select message when the max selections is exceeded with the structure:\n * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n */\n maxSelectedMessage: {\n type: Array,\n default: function () { return []; },\n },\n\n /**\n * Displays the list when the combobox is focused, before the user has typed anything.\n * When this is enabled the list will not close after selection.\n */\n hasSuggestionList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Size of the chip, one of `xs`, `sm`, `md`\n */\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n },\n\n /**\n * Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n */\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n (appendTo instanceof HTMLElement);\n },\n },\n\n /**\n * Named transition when the content display is toggled.\n * @see DtLazyShow\n */\n transition: {\n type: String,\n default: 'fade',\n },\n\n /**\n * Determines whether the combobox should collapse to a single when losing focus.\n * @type {boolean}\n */\n collapseOnFocusOut: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String }\n */\n 'input',\n\n /**\n * Event fired when item selected\n *\n * @event select\n * @type {Number}\n */\n 'select',\n\n /**\n * Event fired when item removed\n *\n * @event remove\n * @type {String}\n */\n 'remove',\n\n /**\n * Event fired when max selected items limit is reached\n *\n * @event max-selected\n * @type {Object}\n */\n 'max-selected',\n\n /**\n * Native keyup event\n *\n * @event keyup\n * @type {KeyboardEvent}\n */\n 'keyup',\n ],\n\n data () {\n return {\n value: '',\n popoverOffset: [0, 4],\n showValidationMessages: false,\n resizeWindowObserver: null,\n initialInputHeight: null,\n CHIP_SIZES,\n inputFocused: false,\n };\n },\n\n computed: {\n inputPlaceHolder () {\n return this.selectedItems?.length > 0 ? '' : this.placeholder;\n },\n\n chipListeners () {\n return {\n ...this.$listeners,\n keyup: event => {\n this.onChipKeyup(event);\n this.$emit('keyup', event);\n },\n };\n },\n\n inputListeners () {\n return {\n ...this.$listeners,\n input: event => {\n this.$emit('input', event);\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n\n keyup: event => {\n this.onInputKeyup(event);\n this.$emit('keyup', event);\n },\n\n click: event => {\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n };\n },\n\n selectedItemsWithKeys () {\n return this.selectedItems.map(selectedItem => ({\n item: selectedItem,\n key: getUniqueString(selectedItem),\n }));\n },\n\n chipWrapperClass () {\n return {\n [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n };\n },\n },\n\n watch: {\n selectedItems: {\n async handler () {\n this.initSelectedItems();\n },\n },\n\n async label () {\n await this.$nextTick();\n // Adjust the chips position if label changed\n this.setChipsTopPosition();\n },\n\n async description () {\n await this.$nextTick();\n // Adjust the chips position if description changed\n this.setChipsTopPosition();\n },\n\n size: {\n async handler () {\n await this.$nextTick();\n const input = this.getInput();\n this.revertInputPadding(input);\n this.initialInputHeight = input.getBoundingClientRect().height;\n this.setInputPadding();\n this.setChipsTopPosition();\n },\n },\n },\n\n mounted () {\n this.setInitialInputHeight();\n // Recalculate chip position and input padding when resizing window\n this.resizeWindowObserver = new ResizeObserver(async () => {\n this.setChipsTopPosition();\n this.setInputPadding();\n });\n this.resizeWindowObserver.observe(document.body);\n\n this.initSelectedItems();\n },\n\n beforeDestroy () {\n this.resizeWindowObserver?.unobserve(document.body);\n },\n\n methods: {\n async initSelectedItems () {\n await this.$nextTick();\n this.setInputPadding();\n this.setChipsTopPosition();\n this.setInputMinWidth();\n this.checkMaxSelected();\n },\n\n onChipRemove (item) {\n this.$emit('remove', item);\n this.$refs.input?.focus();\n },\n\n onComboboxSelect (i) {\n this.value = '';\n this.$emit('select', i);\n },\n\n showComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.showComboboxList();\n },\n\n closeComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.closeComboboxList();\n },\n\n getChipButtons () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n },\n\n getChips () {\n return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n },\n\n getLastChipButton () {\n return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n },\n\n getLastChip () {\n return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n },\n\n getFirstChip () {\n return this.$refs.chips && this.getChips()[0];\n },\n\n getInput () {\n return this.$refs.input?.$refs.input;\n },\n\n onChipKeyup (event) {\n const key = event.code?.toLowerCase();\n if (key === 'arrowleft') {\n // Move to the previous chip\n this.navigateBetweenChips(event.target, true);\n } else if (key === 'arrowright') {\n if (event.target.id === this.getLastChipButton().id) {\n // Move to the input if it's the last chip\n this.moveFromChipToInput();\n } else {\n // Move to the next chip\n this.navigateBetweenChips(event.target, false);\n }\n }\n },\n\n onInputKeyup (event) {\n const key = event.code?.toLowerCase();\n // If the cursor is at the start of the text,\n // press 'backspace' or 'left' focuses the last chip\n if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n if (key === 'backspace' || key === 'arrowleft') {\n this.moveFromInputToChip();\n }\n }\n },\n\n moveFromInputToChip () {\n this.getLastChipButton().focus();\n this.$refs.input?.blur();\n this.closeComboboxList();\n },\n\n moveFromChipToInput () {\n this.getLastChipButton().blur();\n this.$refs.input?.focus();\n this.showComboboxList();\n },\n\n navigateBetweenChips (target, toLeft) {\n const from = this.getChipButtons().indexOf(target);\n const to = toLeft ? from - 1 : from + 1;\n if (to < 0 || to >= this.$refs.chips?.length) {\n return;\n }\n this.getChipButtons()[from].blur();\n this.getChipButtons()[to].focus();\n this.closeComboboxList();\n },\n\n setChipsTopPosition () {\n // To place the chips in the input box\n // The chip \"top\" position should be the same line as the input box\n const input = this.getInput();\n if (!input) return;\n const inputSlotWrapper = this.$refs.inputSlotWrapper;\n const top = input.getBoundingClientRect().top -\n inputSlotWrapper.getBoundingClientRect().top;\n const chipsWrapper = this.$refs.chipsWrapper;\n chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n },\n\n setInputPadding () {\n const lastChip = this.getLastChip();\n const input = this.getInput();\n const chipsWrapper = this.$refs.chipsWrapper;\n if (!input) return;\n this.revertInputPadding(input);\n this.popoverOffset = [0, 4];\n if (!lastChip) return;\n // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n // This ensures the input returns to its original state when resizing\n if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n // Get the position of the last chip\n // The input cursor should be the same \"top\" as that chip and next besides it\n const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n input.style.paddingLeft = left + 'px';\n\n // Get the chip size minus the 4px padding\n const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n // Get lastChip offsetTop plus 2px of the input padding.\n const top = lastChip.offsetTop + 2;\n\n // Add padding to Top only if the chips need more space\n if (chipsSize > this.initialInputHeight) {\n input.style.paddingTop = `${top}px`;\n }\n },\n\n revertInputPadding (input) {\n input.style.paddingLeft = '';\n input.style.paddingTop = '';\n input.style.paddingBottom = '';\n },\n\n getFullWidth (el) {\n const styles = window.getComputedStyle(el);\n return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n },\n\n setInputMinWidth () {\n // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n const firstChip = this.getFirstChip();\n const input = this.getInput();\n if (!input) return;\n if (firstChip) {\n // Add 4px buffer for typing room\n input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n } else {\n input.style.minWidth = '';\n }\n },\n\n checkMaxSelected () {\n if (this.maxSelected === 0) return;\n if (this.selectedItems.length > this.maxSelected) {\n this.showValidationMessages = true;\n this.$emit('max-selected');\n } else {\n this.showValidationMessages = false;\n }\n },\n\n setInitialInputHeight () {\n const input = this.getInput();\n if (!input) return;\n this.initialInputHeight = input.getBoundingClientRect().height;\n },\n\n async handleInputFocusIn () {\n this.inputFocused = true;\n if (this.collapseOnFocusOut) {\n await this.$nextTick();\n this.setInputPadding();\n }\n },\n\n async handleInputFocusOut () {\n this.inputFocused = false;\n if (this.collapseOnFocusOut) {\n const input = this.getInput();\n if (!input) return;\n this.revertInputPadding(input);\n }\n },\n },\n};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n position: relative;\n display: block;\n}\n\n.combobox__chip-wrapper {\n position: absolute;\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n padding-left: var(--dt-space-100);\n max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n max-height: initial;\n overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n max-height: 2.8rem;\n overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n max-height: 2.5rem;\n overflow-y: hidden;\n}\n\n.combobox__chip {\n margin-top: var(--dt-space-300);\n margin-left: var(--dt-space-200);\n margin-right: var(--dt-space-200);\n z-index: var(--zi-base1);\n max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n flex-grow: 1;\n}\n\n.combobox__list--loading {\n text-align: center;\n padding-top: var(--dt-space-500);\n padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":[],"mappings":"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"}
|
|
@@ -43,15 +43,17 @@ const _sfc_main = {
|
|
|
43
43
|
* @returns {Array<VNode|string>}
|
|
44
44
|
*/
|
|
45
45
|
replaceDtEmojis(replaceList, textContent) {
|
|
46
|
+
if (!replaceList.length)
|
|
47
|
+
return textContent;
|
|
46
48
|
const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
|
|
47
|
-
const
|
|
48
|
-
return
|
|
49
|
+
const items = textContent.split(regexp);
|
|
50
|
+
return items.filter((item) => item.trim() !== "").map((item) => {
|
|
49
51
|
if (replaceList.includes(item)) {
|
|
50
52
|
return this.$createElement(lib_emoji.DtEmoji, {
|
|
51
53
|
props: { code: item, size: this.size }
|
|
52
54
|
});
|
|
53
55
|
}
|
|
54
|
-
return this.$createElement("span", item);
|
|
56
|
+
return this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, item);
|
|
55
57
|
});
|
|
56
58
|
},
|
|
57
59
|
/**
|
|
@@ -78,8 +80,6 @@ const _sfc_main = {
|
|
|
78
80
|
const shortcodes = common_emoji.findShortCodes(textContent);
|
|
79
81
|
const emojis = common_emoji.findEmojis(textContent);
|
|
80
82
|
const replaceList = [...shortcodes, ...emojis];
|
|
81
|
-
if (replaceList.length === 0)
|
|
82
|
-
return textContent;
|
|
83
83
|
return this.replaceDtEmojis(replaceList, textContent);
|
|
84
84
|
}
|
|
85
85
|
},
|
|
@@ -87,7 +87,10 @@ const _sfc_main = {
|
|
|
87
87
|
const defaultSlotContent = this.$slots.default || [];
|
|
88
88
|
return h(
|
|
89
89
|
this.elementType,
|
|
90
|
-
{
|
|
90
|
+
{
|
|
91
|
+
"data-qa": "emoji-text-wrapper",
|
|
92
|
+
class: "d-emoji-text-wrapper"
|
|
93
|
+
},
|
|
91
94
|
this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
|
|
92
95
|
);
|
|
93
96
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /**\n * Element type (tag name) to use for the wrapper.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * The icon size to render the emojis at: 100 to 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /**\n * Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode|string>}\n */\n replaceDtEmojis (replaceList, textContent) {\n const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n const
|
|
1
|
+
{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /**\n * Element type (tag name) to use for the wrapper.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * The icon size to render the emojis at: 100 to 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /**\n * Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode|string>}\n */\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n\n const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return this.$createElement(DtEmoji, {\n props: { code: item, size: this.size },\n });\n }\n return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /**\n * Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode|*}\n */\n searchVNodes (VNode) {\n // If VNode has no tag, it is a text node\n if (!VNode.tag && VNode.text) {\n return this.searchCodes(VNode.text);\n }\n\n const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n return this.$createElement(VNode.tag, VNode.data, children);\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /**\n * Find codes in text.\n * @param textContent string\n * @returns {Array<VNode|string>|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render (h) {\n const defaultSlotContent = this.$slots.default || [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","findShortCodes","findEmojis"],"mappings":";;;;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA;AAAA,eAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAAD,mBAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAAE,4BAAA,WAAA;AACA,YAAA,SAAAC,wBAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
|
|
@@ -41,15 +41,17 @@ const _sfc_main = {
|
|
|
41
41
|
* @returns {Array<VNode|string>}
|
|
42
42
|
*/
|
|
43
43
|
replaceDtEmojis(replaceList, textContent) {
|
|
44
|
+
if (!replaceList.length)
|
|
45
|
+
return textContent;
|
|
44
46
|
const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
|
|
45
|
-
const
|
|
46
|
-
return
|
|
47
|
+
const items = textContent.split(regexp);
|
|
48
|
+
return items.filter((item) => item.trim() !== "").map((item) => {
|
|
47
49
|
if (replaceList.includes(item)) {
|
|
48
50
|
return this.$createElement(DtEmoji, {
|
|
49
51
|
props: { code: item, size: this.size }
|
|
50
52
|
});
|
|
51
53
|
}
|
|
52
|
-
return this.$createElement("span", item);
|
|
54
|
+
return this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, item);
|
|
53
55
|
});
|
|
54
56
|
},
|
|
55
57
|
/**
|
|
@@ -76,8 +78,6 @@ const _sfc_main = {
|
|
|
76
78
|
const shortcodes = findShortCodes(textContent);
|
|
77
79
|
const emojis = findEmojis(textContent);
|
|
78
80
|
const replaceList = [...shortcodes, ...emojis];
|
|
79
|
-
if (replaceList.length === 0)
|
|
80
|
-
return textContent;
|
|
81
81
|
return this.replaceDtEmojis(replaceList, textContent);
|
|
82
82
|
}
|
|
83
83
|
},
|
|
@@ -85,7 +85,10 @@ const _sfc_main = {
|
|
|
85
85
|
const defaultSlotContent = this.$slots.default || [];
|
|
86
86
|
return h(
|
|
87
87
|
this.elementType,
|
|
88
|
-
{
|
|
88
|
+
{
|
|
89
|
+
"data-qa": "emoji-text-wrapper",
|
|
90
|
+
class: "d-emoji-text-wrapper"
|
|
91
|
+
},
|
|
89
92
|
this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
|
|
90
93
|
);
|
|
91
94
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /**\n * Element type (tag name) to use for the wrapper.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * The icon size to render the emojis at: 100 to 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /**\n * Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode|string>}\n */\n replaceDtEmojis (replaceList, textContent) {\n const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n const
|
|
1
|
+
{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n name: 'DtEmojiTextWrapper',\n\n components: {\n DtEmoji,\n },\n\n props: {\n /**\n * Element type (tag name) to use for the wrapper.\n */\n elementType: {\n type: String,\n default: 'div',\n },\n\n /**\n * The icon size to render the emojis at: 100 to 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n },\n\n data () {\n return {\n loadingEmojiJson: true,\n };\n },\n\n async created () {\n this.loadingEmojiJson = false;\n },\n\n methods: {\n /**\n * Replaces the valid codes from the text content with a DtEmoji component.\n * @returns {Array<VNode|string>}\n */\n replaceDtEmojis (replaceList, textContent) {\n if (!replaceList.length) return textContent;\n\n const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n const items = textContent.split(regexp);\n\n return items\n .filter(item => item.trim() !== '')\n .map((item) => {\n if (replaceList.includes(item)) {\n return this.$createElement(DtEmoji, {\n props: { code: item, size: this.size },\n });\n }\n return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n });\n },\n\n /**\n * Recursively search the Vue virtual DOM to find text\n * @param VNode\n * @returns {VNode|*}\n */\n searchVNodes (VNode) {\n // If VNode has no tag, it is a text node\n if (!VNode.tag && VNode.text) {\n return this.searchCodes(VNode.text);\n }\n\n const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n return this.$createElement(VNode.tag, VNode.data, children);\n },\n\n // TODO: Find a way to crawl vue components\n replaceVueComponentVNodeContent (VNode) {\n //\n },\n\n /**\n * Find codes in text.\n * @param textContent string\n * @returns {Array<VNode|string>|string}\n */\n searchCodes (textContent) {\n const shortcodes = findShortCodes(textContent);\n const emojis = findEmojis(textContent);\n\n const replaceList = [...shortcodes, ...emojis];\n return this.replaceDtEmojis(replaceList, textContent);\n },\n },\n\n render (h) {\n const defaultSlotContent = this.$slots.default || [];\n return h(\n this.elementType,\n {\n 'data-qa': 'emoji-text-wrapper',\n class: 'd-emoji-text-wrapper',\n },\n this.loadingEmojiJson\n ? defaultSlotContent\n : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n );\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA;AAAA,eAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,SAAA,WAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}
|
package/dist/lib/emoji.cjs
CHANGED
|
@@ -127,7 +127,7 @@ const _sfc_main = {
|
|
|
127
127
|
};
|
|
128
128
|
var _sfc_render = function render() {
|
|
129
129
|
var _vm = this, _c = _vm._self._c;
|
|
130
|
-
return _c("span", { class: ["d-emoji
|
|
130
|
+
return _c("span", { class: ["d-emoji d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
|
|
131
131
|
};
|
|
132
132
|
var _sfc_staticRenderFns = [];
|
|
133
133
|
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
package/dist/lib/emoji.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji.cjs","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji
|
|
1
|
+
{"version":3,"file":"emoji.cjs","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji d-icon', emojiSize]\">\n <dt-skeleton\n v-show=\"imgLoading && showSkeleton\"\n :offset=\"0\"\n :class=\"['d-icon', emojiSize]\"\n :shape-option=\"{ shape: 'circle', size: '100%' }\"\n />\n <img\n v-show=\"!imgLoading\"\n ref=\"emojiImg\"\n :class=\"['d-icon', emojiSize, imgClass]\"\n :aria-label=\"emojiLabel\"\n :alt=\"emojiAlt\"\n :title=\"emojiLabel\"\n :src=\"emojiSrc\"\n @load=\"imageLoaded\"\n @error=\"imageErrored\"\n >\n </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n codeToEmojiData,\n stringToUnicode,\n emojiImageUrlSmall,\n emojiFileExtensionSmall,\n emojiImageUrlLarge,\n emojiFileExtensionLarge,\n customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n name: 'DtEmoji',\n\n components: {\n DtSkeleton,\n },\n\n props: {\n /**\n * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n * for all supported shortcode/unicode or the docs for setting up custom emojis.\n */\n code: {\n type: String,\n required: true,\n },\n\n /**\n * The size of the emoji. Can be any of the icon size utility classes from\n * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n\n /**\n * Additional class name for the emoji img element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n imgClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n * getEmojiData() function\n */\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /**\n * Shows a skeleton loader while the emoji asset is loading.\n * @values true, false\n */\n showSkeleton: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n emojiData: null,\n imgLoading: false,\n };\n },\n\n computed: {\n emojiDataValid () {\n return !!this.emojiData;\n },\n\n emojiSrc () {\n if (!this.emojiDataValid) { return 'invalid'; }\n\n // custom emoji\n if (this.emojiData?.custom) {\n return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n }\n\n if (['100', '200'].includes(this.size)) {\n return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n } else {\n return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n }\n },\n\n emojiAlt () {\n if (!this.emojiDataValid) { return undefined; }\n return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n },\n\n emojiLabel () {\n if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n },\n\n emojiSize () {\n return ICON_SIZE_MODIFIERS[this.size];\n },\n },\n\n watch: {\n code: {\n handler: function () {\n this.getEmojiData();\n },\n\n immediate: true,\n },\n\n emojiSrc: {\n handler: async function () {\n this.imgLoading = true;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n getEmojiData () {\n this.emojiData = codeToEmojiData(this.code);\n },\n\n imageLoaded () {\n this.imgLoading = false;\n },\n\n imageErrored () {\n this.imgLoading = false;\n },\n },\n};\n</script>\n"],"names":["DtSkeleton","ICON_SIZE_MODIFIERS","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":";;;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA,aAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAAC,aAAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA,OAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAAC,6BAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAN,eAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAO,aAAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
|
package/dist/lib/emoji.js
CHANGED
|
@@ -125,7 +125,7 @@ const _sfc_main = {
|
|
|
125
125
|
};
|
|
126
126
|
var _sfc_render = function render() {
|
|
127
127
|
var _vm = this, _c = _vm._self._c;
|
|
128
|
-
return _c("span", { class: ["d-emoji
|
|
128
|
+
return _c("span", { class: ["d-emoji d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
|
|
129
129
|
};
|
|
130
130
|
var _sfc_staticRenderFns = [];
|
|
131
131
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|
package/dist/lib/emoji.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji.js","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji
|
|
1
|
+
{"version":3,"file":"emoji.js","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n <span :class=\"['d-emoji d-icon', emojiSize]\">\n <dt-skeleton\n v-show=\"imgLoading && showSkeleton\"\n :offset=\"0\"\n :class=\"['d-icon', emojiSize]\"\n :shape-option=\"{ shape: 'circle', size: '100%' }\"\n />\n <img\n v-show=\"!imgLoading\"\n ref=\"emojiImg\"\n :class=\"['d-icon', emojiSize, imgClass]\"\n :aria-label=\"emojiLabel\"\n :alt=\"emojiAlt\"\n :title=\"emojiLabel\"\n :src=\"emojiSrc\"\n @load=\"imageLoaded\"\n @error=\"imageErrored\"\n >\n </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n codeToEmojiData,\n stringToUnicode,\n emojiImageUrlSmall,\n emojiFileExtensionSmall,\n emojiImageUrlLarge,\n emojiFileExtensionLarge,\n customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n name: 'DtEmoji',\n\n components: {\n DtSkeleton,\n },\n\n props: {\n /**\n * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n * for all supported shortcode/unicode or the docs for setting up custom emojis.\n */\n code: {\n type: String,\n required: true,\n },\n\n /**\n * The size of the emoji. Can be any of the icon size utility classes from\n * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n */\n size: {\n type: String,\n default: '500',\n validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n },\n\n /**\n * Additional class name for the emoji img element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n imgClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n * getEmojiData() function\n */\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /**\n * Shows a skeleton loader while the emoji asset is loading.\n * @values true, false\n */\n showSkeleton: {\n type: Boolean,\n default: true,\n },\n },\n\n data () {\n return {\n emojiData: null,\n imgLoading: false,\n };\n },\n\n computed: {\n emojiDataValid () {\n return !!this.emojiData;\n },\n\n emojiSrc () {\n if (!this.emojiDataValid) { return 'invalid'; }\n\n // custom emoji\n if (this.emojiData?.custom) {\n return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n }\n\n if (['100', '200'].includes(this.size)) {\n return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n } else {\n return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n }\n },\n\n emojiAlt () {\n if (!this.emojiDataValid) { return undefined; }\n return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n },\n\n emojiLabel () {\n if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n },\n\n emojiSize () {\n return ICON_SIZE_MODIFIERS[this.size];\n },\n },\n\n watch: {\n code: {\n handler: function () {\n this.getEmojiData();\n },\n\n immediate: true,\n },\n\n emojiSrc: {\n handler: async function () {\n this.imgLoading = true;\n },\n\n immediate: true,\n },\n },\n\n methods: {\n getEmojiData () {\n this.emojiData = codeToEmojiData(this.code);\n },\n\n imageLoaded () {\n this.imgLoading = false;\n },\n\n imageErrored () {\n this.imgLoading = false;\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAA,qBAAA,KAAA,UAAA,MAAA;AAAA,MACA,OAAA;AACA,eAAA,qBAAA,KAAA,UAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAA,gBAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
|
|
@@ -576,7 +576,7 @@ const _sfc_main = {
|
|
|
576
576
|
}
|
|
577
577
|
};
|
|
578
578
|
var _sfc_render = function render2() {
|
|
579
|
-
var _a
|
|
579
|
+
var _a;
|
|
580
580
|
var _vm = this, _c = _vm._self._c;
|
|
581
581
|
return _c("div", { class: ["dt-message-input"], attrs: { "data-qa": "dt-message-input", "role": "presentation" }, on: { "drag-enter": _vm.onDrag, "drag-over": _vm.onDrag, "drop": _vm.onDrop, "paste": _vm.onPaste } }, [_vm._t("top"), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "dt-message-input__editor-wrapper", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._g(_vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "prevent-typing": _vm.preventTyping, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "slash-command-suggestion": _vm.slashCommandSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-codeblock": _vm.allowCodeblock, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline, "additional-extensions": _vm.additionalExtensions }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": _vm.onInput, "enter": _vm.onSend }, model: { value: _vm.internalInputValue, callback: function($$v) {
|
|
582
582
|
_vm.internalInputValue = $$v;
|
|
@@ -611,14 +611,17 @@ var _sfc_render = function render2() {
|
|
|
611
611
|
} } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
|
|
612
612
|
} }], null, false, 3336317833) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "dt-message-input__bottom-section-right" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
613
613
|
return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "dt-message-input__remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
|
|
614
|
-
}, proxy: true }], null, false, 3769616566) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input__cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm.
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
614
|
+
}, proxy: true }], null, false, 3769616566) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input__cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm._t("sendButton", function() {
|
|
615
|
+
var _a2;
|
|
616
|
+
return [_vm.showSend ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (_a2 = _vm.showSend) == null ? void 0 : _a2.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
|
|
617
|
+
{
|
|
618
|
+
"dt-message-input__send-button--disabled": _vm.isSendDisabled,
|
|
619
|
+
"d-btn--circle": _vm.showSend.icon
|
|
620
|
+
}
|
|
621
|
+
], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
|
|
622
|
+
return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
|
|
623
|
+
}, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2) : _vm._e()];
|
|
624
|
+
})], 2)])], 2);
|
|
622
625
|
};
|
|
623
626
|
var _sfc_staticRenderFns = [];
|
|
624
627
|
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-input.cjs","sources":["../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue","../../recipes/conversation_view/message_input/meeting_pill/meeting_pill.js","../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon\n name=\"video\"\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n DtIcon,\n DtButton,\n },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n","import { mergeAttributes, Node } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-2';\nimport MeetingPill from './MeetingPill.vue';\n\nexport default Node.create({\n\n atom: true,\n group: 'inline',\n inline: true,\n\n addNodeView () {\n return VueNodeViewRenderer(MeetingPill);\n },\n\n addAttributes () {\n return {\n text: {\n default: 'Please pass in \"text\" attribute',\n },\n 'close-button-aria-label': {},\n };\n },\n\n parseHTML () {\n return [\n {\n tag: 'meeting-pill',\n },\n ];\n },\n\n renderText ({ node }) {\n return '/dpm';\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['meeting-pill', mergeAttributes(HTMLAttributes)];\n },\n});\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['dt-message-input']\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @paste=\"onPaste\"\n >\n <!-- @slot Renders above the input, but still within the borders. -->\n <slot name=\"top\" />\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n v-dt-scrollbar\n class=\"dt-message-input__editor-wrapper\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :prevent-typing=\"preventTyping\"\n :mention-suggestion=\"mentionSuggestion\"\n :channel-suggestion=\"channelSuggestion\"\n :slash-command-suggestion=\"slashCommandSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-codeblock=\"allowCodeblock\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n :additional-extensions=\"additionalExtensions\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput\"\n @enter=\"onSend\"\n v-on=\"$listeners\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"dt-message-input__bottom-section\">\n <!-- Left content -->\n <div class=\"dt-message-input__bottom-section-left\">\n <dt-button\n v-if=\"showImagePicker\"\n v-dt-tooltip:top-start=\"showImagePicker?.tooltipLabel\"\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n accept=\"image/*, video/*\"\n type=\"file\"\n class=\"dt-message-input__image-input\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open.sync=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n >\n <template #anchor=\"{ attrs }\">\n <dt-button\n v-dt-tooltip=\"emojiTooltipMessage\"\n v-bind=\"attrs\"\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n <template\n #content=\"{ close }\"\n >\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"(emoji) => { close(); onSelectEmoji(emoji); }\"\n />\n </template>\n </dt-popover>\n <!-- @slot Slot for emojiGiphy picker -->\n <slot name=\"emojiGiphyPicker\" />\n </div>\n <!-- Right content -->\n <div class=\"dt-message-input__bottom-section-right\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input__remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, 8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"dt-message-input__remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input__cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <!-- Right positioned UI - send button -->\n <dt-button\n v-if=\"showSend\"\n v-dt-tooltip:top-end=\"showSend?.tooltipLabel\"\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'dt-message-input__send-button--disabled': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </div>\n </section>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport meetingPill from './meeting_pill/meeting_pill';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Prevents the user from typing any further. Deleting text will still work.\n */\n preventTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n */\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /**\n * Enables the Link extension and optionally passes configurations to it\n */\n link: {\n type: [Boolean, Object],\n default: true,\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Disable Send Button\n */\n disableSend: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Props to pass into the emoji picker.\n */\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /**\n * Emoji button tooltip label\n */\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /**\n * Emoji button aria label\n */\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /**\n * Enable character Limit warning\n */\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /**\n * Send button defaults.\n */\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /**\n * Cancel button defaults.\n */\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n *\n * When null, it does not add the plugin.\n */\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the channels for suggestion.\n * items({ query }) => { return [ChannelObject]; }\n * ChannelObject format:\n * { name: string, id: string, locked: boolean }\n *\n * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.\n */\n channelSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the slash commands for suggestion.\n * items({ query }) => { return [SlashCommandObject]; }\n * SlashCommandObject format:\n * { command: string, description: string, parametersExample?: string }\n * The \"parametersExample\" parameter is optional, and describes an example\n * of the parameters that command can take.\n *\n * When null, it does not add the plugin.\n */\n slashCommandSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * Whether the input allows for block quote.\n */\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bold to be introduced in the text.\n */\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bullet list to be introduced in the text.\n */\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for italic to be introduced in the text.\n */\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for strike to be introduced in the text.\n */\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for underline to be introduced in the text.\n */\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows codeblock to be introduced in the text.\n */\n allowCodeblock: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Fires when send button is clicked\n *\n * @event submit\n * @type {String}\n */\n 'submit',\n\n /**\n * Fires when media is selected from image button\n *\n * @event select-media\n * @type {Array}\n */\n 'select-media',\n\n /**\n * Fires when media is dropped into the message input\n *\n * @event add-media\n * @type {Array}\n */\n 'add-media',\n\n /**\n * Fires when media is pasted into the message input\n *\n * @event paste-media\n * @type {Array}\n */\n 'paste-media',\n\n /**\n * Fires when cancel button is pressed (only on edit mode)\n *\n * @event cancel\n * @type {Boolean}\n */\n 'cancel',\n\n /**\n * Fires when skin tone is selected from the emoji picker\n *\n * @event skin-tone\n * @type {String}\n */\n 'skin-tone',\n\n /**\n * Fires when emoji is selected from the emoji picker\n *\n * @event selected-emoji\n * @type {String}\n */\n 'selected-emoji',\n\n /**\n * Fires when a slash command is selected\n *\n * @event selected-command\n * @type {String}\n */\n 'selected-command',\n\n /**\n * Fires when meeting pill is closed\n *\n * @event meeting-pill-close\n * @type {String}\n */\n 'meeting-pill-close',\n\n /**\n * Event to sync the value with the parent\n * @event update:value\n * @type {String|JSON}\n */\n 'update:value',\n ],\n\n data () {\n return {\n additionalExtensions: [meetingPill],\n internalInputValue: this.value, // internal input content\n imagePickerFocus: false,\n emojiPickerFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend ||\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus || this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n\n emojiPickerOpened (newValue) {\n if (!newValue) {\n this.$refs.richTextEditor?.focusEditor();\n }\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onInput (event) {\n this.$emit('update:value', event);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input {\n display: flex;\n flex-direction: column;\n border-radius: var(--dt-size-radius-400);\n border: var(--dt-size-border-100) solid;\n border-color: var(--dt-color-border-default);\n cursor: text;\n\n &:focus-within {\n border-color: var(--dt-color-border-bold);\n box-shadow: var(--dt-shadow-small);\n }\n\n &__editor-wrapper {\n padding: var(--dt-space-400) var(--dt-space-500) var(--dt-space-300);\n }\n\n &__remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n &__remaining-char {\n color: var(--dt-color-foreground-critical);\n font-size: var(--dt-font-size-100);\n margin-right: var(--dt-space-500);\n }\n\n &__send-button--disabled {\n background-color: unset;\n color: var(--dt-color-foreground-muted);\n cursor: default;\n }\n\n &__cancel-button {\n margin-right: var(--dt-space-300);\n }\n\n &__bottom-section {\n display: flex;\n justify-content: space-between;\n padding: var(--dt-space-300) var(--dt-space-400);\n }\n\n &__bottom-section-left {\n display: flex;\n }\n\n &__bottom-section-right {\n display: flex;\n }\n\n &__image-input {\n position: absolute;\n }\n}\n</style>\n"],"names":["_sfc_main","NodeViewWrapper","DtItemLayout","DtIcon","DtButton","nodeViewProps","Node","VueNodeViewRenderer","mergeAttributes","DtEmojiPicker","DtInput","DtPopover","DtRichTextEditor","DtTooltip","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"message-input.cjs","sources":["../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue","../../recipes/conversation_view/message_input/meeting_pill/meeting_pill.js","../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon\n name=\"video\"\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n DtIcon,\n DtButton,\n },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n","import { mergeAttributes, Node } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-2';\nimport MeetingPill from './MeetingPill.vue';\n\nexport default Node.create({\n\n atom: true,\n group: 'inline',\n inline: true,\n\n addNodeView () {\n return VueNodeViewRenderer(MeetingPill);\n },\n\n addAttributes () {\n return {\n text: {\n default: 'Please pass in \"text\" attribute',\n },\n 'close-button-aria-label': {},\n };\n },\n\n parseHTML () {\n return [\n {\n tag: 'meeting-pill',\n },\n ];\n },\n\n renderText ({ node }) {\n return '/dpm';\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['meeting-pill', mergeAttributes(HTMLAttributes)];\n },\n});\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['dt-message-input']\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @paste=\"onPaste\"\n >\n <!-- @slot Renders above the input, but still within the borders. -->\n <slot name=\"top\" />\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n v-dt-scrollbar\n class=\"dt-message-input__editor-wrapper\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :prevent-typing=\"preventTyping\"\n :mention-suggestion=\"mentionSuggestion\"\n :channel-suggestion=\"channelSuggestion\"\n :slash-command-suggestion=\"slashCommandSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-codeblock=\"allowCodeblock\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n :additional-extensions=\"additionalExtensions\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput\"\n @enter=\"onSend\"\n v-on=\"$listeners\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"dt-message-input__bottom-section\">\n <!-- Left content -->\n <div class=\"dt-message-input__bottom-section-left\">\n <dt-button\n v-if=\"showImagePicker\"\n v-dt-tooltip:top-start=\"showImagePicker?.tooltipLabel\"\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n accept=\"image/*, video/*\"\n type=\"file\"\n class=\"dt-message-input__image-input\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open.sync=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n >\n <template #anchor=\"{ attrs }\">\n <dt-button\n v-dt-tooltip=\"emojiTooltipMessage\"\n v-bind=\"attrs\"\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n <template\n #content=\"{ close }\"\n >\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"(emoji) => { close(); onSelectEmoji(emoji); }\"\n />\n </template>\n </dt-popover>\n <!-- @slot Slot for emojiGiphy picker -->\n <slot name=\"emojiGiphyPicker\" />\n </div>\n <!-- Right content -->\n <div class=\"dt-message-input__bottom-section-right\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input__remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, 8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"dt-message-input__remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input__cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- @slot Slot for sendButton picker -->\n <slot name=\"sendButton\">\n <!-- Send button -->\n <!-- Right positioned UI - send button -->\n <dt-button\n v-if=\"showSend\"\n v-dt-tooltip:top-end=\"showSend?.tooltipLabel\"\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'dt-message-input__send-button--disabled': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </slot>\n </div>\n </section>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport meetingPill from './meeting_pill/meeting_pill';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Prevents the user from typing any further. Deleting text will still work.\n */\n preventTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n */\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /**\n * Enables the Link extension and optionally passes configurations to it\n */\n link: {\n type: [Boolean, Object],\n default: true,\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Disable Send Button\n */\n disableSend: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Props to pass into the emoji picker.\n */\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /**\n * Emoji button tooltip label\n */\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /**\n * Emoji button aria label\n */\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /**\n * Enable character Limit warning\n */\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /**\n * Send button defaults.\n */\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /**\n * Cancel button defaults.\n */\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n *\n * When null, it does not add the plugin.\n */\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the channels for suggestion.\n * items({ query }) => { return [ChannelObject]; }\n * ChannelObject format:\n * { name: string, id: string, locked: boolean }\n *\n * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.\n */\n channelSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the slash commands for suggestion.\n * items({ query }) => { return [SlashCommandObject]; }\n * SlashCommandObject format:\n * { command: string, description: string, parametersExample?: string }\n * The \"parametersExample\" parameter is optional, and describes an example\n * of the parameters that command can take.\n *\n * When null, it does not add the plugin.\n */\n slashCommandSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * Whether the input allows for block quote.\n */\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bold to be introduced in the text.\n */\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bullet list to be introduced in the text.\n */\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for italic to be introduced in the text.\n */\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for strike to be introduced in the text.\n */\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for underline to be introduced in the text.\n */\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows codeblock to be introduced in the text.\n */\n allowCodeblock: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Fires when send button is clicked\n *\n * @event submit\n * @type {String}\n */\n 'submit',\n\n /**\n * Fires when media is selected from image button\n *\n * @event select-media\n * @type {Array}\n */\n 'select-media',\n\n /**\n * Fires when media is dropped into the message input\n *\n * @event add-media\n * @type {Array}\n */\n 'add-media',\n\n /**\n * Fires when media is pasted into the message input\n *\n * @event paste-media\n * @type {Array}\n */\n 'paste-media',\n\n /**\n * Fires when cancel button is pressed (only on edit mode)\n *\n * @event cancel\n * @type {Boolean}\n */\n 'cancel',\n\n /**\n * Fires when skin tone is selected from the emoji picker\n *\n * @event skin-tone\n * @type {String}\n */\n 'skin-tone',\n\n /**\n * Fires when emoji is selected from the emoji picker\n *\n * @event selected-emoji\n * @type {String}\n */\n 'selected-emoji',\n\n /**\n * Fires when a slash command is selected\n *\n * @event selected-command\n * @type {String}\n */\n 'selected-command',\n\n /**\n * Fires when meeting pill is closed\n *\n * @event meeting-pill-close\n * @type {String}\n */\n 'meeting-pill-close',\n\n /**\n * Event to sync the value with the parent\n * @event update:value\n * @type {String|JSON}\n */\n 'update:value',\n ],\n\n data () {\n return {\n additionalExtensions: [meetingPill],\n internalInputValue: this.value, // internal input content\n imagePickerFocus: false,\n emojiPickerFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend ||\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus || this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n\n emojiPickerOpened (newValue) {\n if (!newValue) {\n this.$refs.richTextEditor?.focusEditor();\n }\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onInput (event) {\n this.$emit('update:value', event);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input {\n display: flex;\n flex-direction: column;\n border-radius: var(--dt-size-radius-400);\n border: var(--dt-size-border-100) solid;\n border-color: var(--dt-color-border-default);\n cursor: text;\n\n &:focus-within {\n border-color: var(--dt-color-border-bold);\n box-shadow: var(--dt-shadow-small);\n }\n\n &__editor-wrapper {\n padding: var(--dt-space-400) var(--dt-space-500) var(--dt-space-300);\n }\n\n &__remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n &__remaining-char {\n color: var(--dt-color-foreground-critical);\n font-size: var(--dt-font-size-100);\n margin-right: var(--dt-space-500);\n }\n\n &__send-button--disabled {\n background-color: unset;\n color: var(--dt-color-foreground-muted);\n cursor: default;\n }\n\n &__cancel-button {\n margin-right: var(--dt-space-300);\n }\n\n &__bottom-section {\n display: flex;\n justify-content: space-between;\n padding: var(--dt-space-300) var(--dt-space-400);\n }\n\n &__bottom-section-left {\n display: flex;\n }\n\n &__bottom-section-right {\n display: flex;\n }\n\n &__image-input {\n position: absolute;\n }\n}\n</style>\n"],"names":["_sfc_main","NodeViewWrapper","DtItemLayout","DtIcon","DtButton","nodeViewProps","Node","VueNodeViewRenderer","mergeAttributes","DtEmojiPicker","DtInput","DtPopover","DtRichTextEditor","DtTooltip","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS"],"mappings":"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"}
|
|
@@ -574,7 +574,7 @@ const _sfc_main = {
|
|
|
574
574
|
}
|
|
575
575
|
};
|
|
576
576
|
var _sfc_render = function render2() {
|
|
577
|
-
var _a
|
|
577
|
+
var _a;
|
|
578
578
|
var _vm = this, _c = _vm._self._c;
|
|
579
579
|
return _c("div", { class: ["dt-message-input"], attrs: { "data-qa": "dt-message-input", "role": "presentation" }, on: { "drag-enter": _vm.onDrag, "drag-over": _vm.onDrag, "drop": _vm.onDrop, "paste": _vm.onPaste } }, [_vm._t("top"), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "dt-message-input__editor-wrapper", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._g(_vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "prevent-typing": _vm.preventTyping, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "slash-command-suggestion": _vm.slashCommandSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-codeblock": _vm.allowCodeblock, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline, "additional-extensions": _vm.additionalExtensions }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": _vm.onInput, "enter": _vm.onSend }, model: { value: _vm.internalInputValue, callback: function($$v) {
|
|
580
580
|
_vm.internalInputValue = $$v;
|
|
@@ -609,14 +609,17 @@ var _sfc_render = function render2() {
|
|
|
609
609
|
} } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
|
|
610
610
|
} }], null, false, 3336317833) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "dt-message-input__bottom-section-right" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
611
611
|
return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "dt-message-input__remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
|
|
612
|
-
}, proxy: true }], null, false, 3769616566) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input__cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm.
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
612
|
+
}, proxy: true }], null, false, 3769616566) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input__cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm._t("sendButton", function() {
|
|
613
|
+
var _a2;
|
|
614
|
+
return [_vm.showSend ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (_a2 = _vm.showSend) == null ? void 0 : _a2.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
|
|
615
|
+
{
|
|
616
|
+
"dt-message-input__send-button--disabled": _vm.isSendDisabled,
|
|
617
|
+
"d-btn--circle": _vm.showSend.icon
|
|
618
|
+
}
|
|
619
|
+
], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
|
|
620
|
+
return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
|
|
621
|
+
}, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2) : _vm._e()];
|
|
622
|
+
})], 2)])], 2);
|
|
620
623
|
};
|
|
621
624
|
var _sfc_staticRenderFns = [];
|
|
622
625
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-input.js","sources":["../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue","../../recipes/conversation_view/message_input/meeting_pill/meeting_pill.js","../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon\n name=\"video\"\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n DtIcon,\n DtButton,\n },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n","import { mergeAttributes, Node } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-2';\nimport MeetingPill from './MeetingPill.vue';\n\nexport default Node.create({\n\n atom: true,\n group: 'inline',\n inline: true,\n\n addNodeView () {\n return VueNodeViewRenderer(MeetingPill);\n },\n\n addAttributes () {\n return {\n text: {\n default: 'Please pass in \"text\" attribute',\n },\n 'close-button-aria-label': {},\n };\n },\n\n parseHTML () {\n return [\n {\n tag: 'meeting-pill',\n },\n ];\n },\n\n renderText ({ node }) {\n return '/dpm';\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['meeting-pill', mergeAttributes(HTMLAttributes)];\n },\n});\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['dt-message-input']\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @paste=\"onPaste\"\n >\n <!-- @slot Renders above the input, but still within the borders. -->\n <slot name=\"top\" />\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n v-dt-scrollbar\n class=\"dt-message-input__editor-wrapper\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :prevent-typing=\"preventTyping\"\n :mention-suggestion=\"mentionSuggestion\"\n :channel-suggestion=\"channelSuggestion\"\n :slash-command-suggestion=\"slashCommandSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-codeblock=\"allowCodeblock\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n :additional-extensions=\"additionalExtensions\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput\"\n @enter=\"onSend\"\n v-on=\"$listeners\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"dt-message-input__bottom-section\">\n <!-- Left content -->\n <div class=\"dt-message-input__bottom-section-left\">\n <dt-button\n v-if=\"showImagePicker\"\n v-dt-tooltip:top-start=\"showImagePicker?.tooltipLabel\"\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n accept=\"image/*, video/*\"\n type=\"file\"\n class=\"dt-message-input__image-input\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open.sync=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n >\n <template #anchor=\"{ attrs }\">\n <dt-button\n v-dt-tooltip=\"emojiTooltipMessage\"\n v-bind=\"attrs\"\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n <template\n #content=\"{ close }\"\n >\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"(emoji) => { close(); onSelectEmoji(emoji); }\"\n />\n </template>\n </dt-popover>\n <!-- @slot Slot for emojiGiphy picker -->\n <slot name=\"emojiGiphyPicker\" />\n </div>\n <!-- Right content -->\n <div class=\"dt-message-input__bottom-section-right\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input__remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, 8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"dt-message-input__remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input__cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- Send button -->\n <!-- Right positioned UI - send button -->\n <dt-button\n v-if=\"showSend\"\n v-dt-tooltip:top-end=\"showSend?.tooltipLabel\"\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'dt-message-input__send-button--disabled': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </div>\n </section>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport meetingPill from './meeting_pill/meeting_pill';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Prevents the user from typing any further. Deleting text will still work.\n */\n preventTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n */\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /**\n * Enables the Link extension and optionally passes configurations to it\n */\n link: {\n type: [Boolean, Object],\n default: true,\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Disable Send Button\n */\n disableSend: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Props to pass into the emoji picker.\n */\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /**\n * Emoji button tooltip label\n */\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /**\n * Emoji button aria label\n */\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /**\n * Enable character Limit warning\n */\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /**\n * Send button defaults.\n */\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /**\n * Cancel button defaults.\n */\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n *\n * When null, it does not add the plugin.\n */\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the channels for suggestion.\n * items({ query }) => { return [ChannelObject]; }\n * ChannelObject format:\n * { name: string, id: string, locked: boolean }\n *\n * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.\n */\n channelSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the slash commands for suggestion.\n * items({ query }) => { return [SlashCommandObject]; }\n * SlashCommandObject format:\n * { command: string, description: string, parametersExample?: string }\n * The \"parametersExample\" parameter is optional, and describes an example\n * of the parameters that command can take.\n *\n * When null, it does not add the plugin.\n */\n slashCommandSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * Whether the input allows for block quote.\n */\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bold to be introduced in the text.\n */\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bullet list to be introduced in the text.\n */\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for italic to be introduced in the text.\n */\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for strike to be introduced in the text.\n */\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for underline to be introduced in the text.\n */\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows codeblock to be introduced in the text.\n */\n allowCodeblock: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Fires when send button is clicked\n *\n * @event submit\n * @type {String}\n */\n 'submit',\n\n /**\n * Fires when media is selected from image button\n *\n * @event select-media\n * @type {Array}\n */\n 'select-media',\n\n /**\n * Fires when media is dropped into the message input\n *\n * @event add-media\n * @type {Array}\n */\n 'add-media',\n\n /**\n * Fires when media is pasted into the message input\n *\n * @event paste-media\n * @type {Array}\n */\n 'paste-media',\n\n /**\n * Fires when cancel button is pressed (only on edit mode)\n *\n * @event cancel\n * @type {Boolean}\n */\n 'cancel',\n\n /**\n * Fires when skin tone is selected from the emoji picker\n *\n * @event skin-tone\n * @type {String}\n */\n 'skin-tone',\n\n /**\n * Fires when emoji is selected from the emoji picker\n *\n * @event selected-emoji\n * @type {String}\n */\n 'selected-emoji',\n\n /**\n * Fires when a slash command is selected\n *\n * @event selected-command\n * @type {String}\n */\n 'selected-command',\n\n /**\n * Fires when meeting pill is closed\n *\n * @event meeting-pill-close\n * @type {String}\n */\n 'meeting-pill-close',\n\n /**\n * Event to sync the value with the parent\n * @event update:value\n * @type {String|JSON}\n */\n 'update:value',\n ],\n\n data () {\n return {\n additionalExtensions: [meetingPill],\n internalInputValue: this.value, // internal input content\n imagePickerFocus: false,\n emojiPickerFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend ||\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus || this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n\n emojiPickerOpened (newValue) {\n if (!newValue) {\n this.$refs.richTextEditor?.focusEditor();\n }\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onInput (event) {\n this.$emit('update:value', event);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input {\n display: flex;\n flex-direction: column;\n border-radius: var(--dt-size-radius-400);\n border: var(--dt-size-border-100) solid;\n border-color: var(--dt-color-border-default);\n cursor: text;\n\n &:focus-within {\n border-color: var(--dt-color-border-bold);\n box-shadow: var(--dt-shadow-small);\n }\n\n &__editor-wrapper {\n padding: var(--dt-space-400) var(--dt-space-500) var(--dt-space-300);\n }\n\n &__remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n &__remaining-char {\n color: var(--dt-color-foreground-critical);\n font-size: var(--dt-font-size-100);\n margin-right: var(--dt-space-500);\n }\n\n &__send-button--disabled {\n background-color: unset;\n color: var(--dt-color-foreground-muted);\n cursor: default;\n }\n\n &__cancel-button {\n margin-right: var(--dt-space-300);\n }\n\n &__bottom-section {\n display: flex;\n justify-content: space-between;\n padding: var(--dt-space-300) var(--dt-space-400);\n }\n\n &__bottom-section-left {\n display: flex;\n }\n\n &__bottom-section-right {\n display: flex;\n }\n\n &__image-input {\n position: absolute;\n }\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"message-input.js","sources":["../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue","../../recipes/conversation_view/message_input/meeting_pill/meeting_pill.js","../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon\n name=\"video\"\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n DtIcon,\n DtButton,\n },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n","import { mergeAttributes, Node } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-2';\nimport MeetingPill from './MeetingPill.vue';\n\nexport default Node.create({\n\n atom: true,\n group: 'inline',\n inline: true,\n\n addNodeView () {\n return VueNodeViewRenderer(MeetingPill);\n },\n\n addAttributes () {\n return {\n text: {\n default: 'Please pass in \"text\" attribute',\n },\n 'close-button-aria-label': {},\n };\n },\n\n parseHTML () {\n return [\n {\n tag: 'meeting-pill',\n },\n ];\n },\n\n renderText ({ node }) {\n return '/dpm';\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['meeting-pill', mergeAttributes(HTMLAttributes)];\n },\n});\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-message-input\"\n role=\"presentation\"\n :class=\"['dt-message-input']\"\n @drag-enter=\"onDrag\"\n @drag-over=\"onDrag\"\n @drop=\"onDrop\"\n @paste=\"onPaste\"\n >\n <!-- @slot Renders above the input, but still within the borders. -->\n <slot name=\"top\" />\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n v-dt-scrollbar\n class=\"dt-message-input__editor-wrapper\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"inputClass\"\n :output-format=\"outputFormat\"\n :auto-focus=\"autoFocus\"\n :link=\"link\"\n :placeholder=\"placeholder\"\n :prevent-typing=\"preventTyping\"\n :mention-suggestion=\"mentionSuggestion\"\n :channel-suggestion=\"channelSuggestion\"\n :slash-command-suggestion=\"slashCommandSuggestion\"\n :allow-blockquote=\"allowBlockquote\"\n :allow-bold=\"allowBold\"\n :allow-bullet-list=\"allowBulletList\"\n :allow-codeblock=\"allowCodeblock\"\n :allow-italic=\"allowItalic\"\n :allow-strike=\"allowStrike\"\n :allow-underline=\"allowUnderline\"\n :additional-extensions=\"additionalExtensions\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput\"\n @enter=\"onSend\"\n v-on=\"$listeners\"\n />\n </div>\n <!-- @slot Slot for attachment carousel -->\n <slot name=\"middle\" />\n <!-- Section for the bottom UI -->\n <section class=\"dt-message-input__bottom-section\">\n <!-- Left content -->\n <div class=\"dt-message-input__bottom-section-left\">\n <dt-button\n v-if=\"showImagePicker\"\n v-dt-tooltip:top-start=\"showImagePicker?.tooltipLabel\"\n data-qa=\"dt-message-input-image-btn\"\n size=\"sm\"\n circle\n :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"showImagePicker.ariaLabel\"\n @click=\"onSelectImage\"\n @mouseenter=\"imagePickerFocus = true\"\n @mouseleave=\"imagePickerFocus = false\"\n @focus=\"imagePickerFocus = true\"\n @blur=\"imagePickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n name=\"image\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <dt-input\n ref=\"messageInputImageUpload\"\n data-qa=\"dt-message-input-image-input\"\n accept=\"image/*, video/*\"\n type=\"file\"\n class=\"dt-message-input__image-input\"\n multiple\n hidden\n @input=\"onImageUpload\"\n />\n <dt-popover\n v-if=\"showEmojiPicker\"\n data-qa=\"dt-message-input-emoji-picker-popover\"\n :open.sync=\"emojiPickerOpened\"\n initial-focus-element=\"#searchInput\"\n padding=\"none\"\n >\n <template #anchor=\"{ attrs }\">\n <dt-button\n v-dt-tooltip=\"emojiTooltipMessage\"\n v-bind=\"attrs\"\n data-qa=\"dt-message-input-emoji-picker-btn\"\n size=\"sm\"\n circle\n :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n importance=\"clear\"\n :aria-label=\"emojiButtonAriaLabel\"\n @click=\"toggleEmojiPicker\"\n @mouseenter=\"emojiPickerFocus = true\"\n @mouseleave=\"emojiPickerFocus = false\"\n @focus=\"emojiPickerFocus = true\"\n @blur=\"emojiPickerFocus = false\"\n >\n <template #icon>\n <dt-icon\n :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </template>\n <template\n #content=\"{ close }\"\n >\n <dt-emoji-picker\n v-bind=\"emojiPickerProps\"\n @skin-tone=\"onSkinTone\"\n @selected-emoji=\"(emoji) => { close(); onSelectEmoji(emoji); }\"\n />\n </template>\n </dt-popover>\n <!-- @slot Slot for emojiGiphy picker -->\n <slot name=\"emojiGiphyPicker\" />\n </div>\n <!-- Right content -->\n <div class=\"dt-message-input__bottom-section-right\">\n <!-- Optionally displayed remaining character counter -->\n <dt-tooltip\n v-if=\"Boolean(showCharacterLimit)\"\n class=\"dt-message-input__remaining-char-tooltip\"\n placement=\"top-end\"\n :enabled=\"characterLimitTooltipEnabled\"\n :message=\"showCharacterLimit.message\"\n :offset=\"[10, 8]\"\n >\n <template #anchor>\n <p\n v-show=\"displayCharacterLimitWarning\"\n class=\"dt-message-input__remaining-char\"\n data-qa=\"dt-message-input-character-limit\"\n >\n {{ showCharacterLimit.count - inputLength }}\n </p>\n </template>\n </dt-tooltip>\n\n <!-- Cancel button for edit mode -->\n <dt-button\n v-if=\"showCancel\"\n data-qa=\"dt-message-input-cancel-button\"\n class=\"dt-message-input__cancel-button\"\n size=\"sm\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"showCancel.ariaLabel\"\n @click=\"onCancel\"\n >\n <p>{{ showCancel.text }}</p>\n </dt-button>\n\n <!-- @slot Slot for sendButton picker -->\n <slot name=\"sendButton\">\n <!-- Send button -->\n <!-- Right positioned UI - send button -->\n <dt-button\n v-if=\"showSend\"\n v-dt-tooltip:top-end=\"showSend?.tooltipLabel\"\n data-qa=\"dt-message-input-send-btn\"\n size=\"sm\"\n kind=\"default\"\n importance=\"primary\"\n :class=\"[\n {\n 'dt-message-input__send-button--disabled': isSendDisabled,\n 'd-btn--circle': showSend.icon,\n },\n ]\"\n :aria-label=\"showSend.ariaLabel\"\n :aria-disabled=\"isSendDisabled\"\n @click=\"onSend\"\n >\n <template\n v-if=\"showSend.icon\"\n #icon\n >\n <dt-icon\n :name=\"showSend.icon\"\n size=\"300\"\n />\n </template>\n <template\n v-if=\"showSend.text\"\n >\n <p>{{ showSend.text }}</p>\n </template>\n </dt-button>\n </slot>\n </div>\n </section>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport meetingPill from './meeting_pill/meeting_pill';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n name: 'DtRecipeMessageInput',\n\n components: {\n DtButton,\n DtEmojiPicker,\n DtIcon,\n DtInput,\n DtPopover,\n DtRichTextEditor,\n DtTooltip,\n },\n\n mixins: [],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Prevents the user from typing any further. Deleting text will still work.\n */\n preventTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n */\n outputFormat: {\n type: String,\n default: 'text',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /**\n * Enables the Link extension and optionally passes configurations to it\n */\n link: {\n type: [Boolean, Object],\n default: true,\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Disable Send Button\n */\n disableSend: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n // Emoji picker props\n showEmojiPicker: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Props to pass into the emoji picker.\n */\n emojiPickerProps: {\n type: Object,\n default: () => ({}),\n validate (emojiPickerProps) {\n return [\n 'searchNoResultsLabel',\n 'searchResultsLabel',\n 'searchPlaceholderLabel',\n 'skinSelectorButtonTooltipLabel',\n 'tabSetLabels',\n ].every(prop => emojiPickerProps[prop] != null);\n },\n },\n\n /**\n * Emoji button tooltip label\n */\n emojiTooltipMessage: {\n type: String,\n default: 'Emoji',\n },\n\n // Aria label for buttons\n /**\n * Emoji button aria label\n */\n emojiButtonAriaLabel: {\n type: String,\n default: 'emoji button',\n },\n\n /**\n * Enable character Limit warning\n */\n showCharacterLimit: {\n type: [Boolean, Object],\n default: () => ({ count: 1500, warning: 500, message: '' }),\n },\n\n showImagePicker: {\n type: [Boolean, Object],\n default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n },\n\n /**\n * Send button defaults.\n */\n showSend: {\n type: [Boolean, Object],\n default: () => ({ icon: 'send' }),\n },\n\n /**\n * Cancel button defaults.\n */\n showCancel: {\n type: [Boolean, Object],\n default: () => ({ text: 'Cancel' }),\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the contacts for suggestion.\n * items({ query }) => { return [ContactObject]; }\n * ContactObject format:\n * { name: string, avatarSrc: string, id: string }\n *\n * When null, it does not add the plugin.\n */\n mentionSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the channels for suggestion.\n * items({ query }) => { return [ChannelObject]; }\n * ChannelObject format:\n * { name: string, id: string, locked: boolean }\n *\n * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.\n */\n channelSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is used to query the slash commands for suggestion.\n * items({ query }) => { return [SlashCommandObject]; }\n * SlashCommandObject format:\n * { command: string, description: string, parametersExample?: string }\n * The \"parametersExample\" parameter is optional, and describes an example\n * of the parameters that command can take.\n *\n * When null, it does not add the plugin.\n */\n slashCommandSuggestion: {\n type: Object,\n default: null,\n },\n\n /**\n * Whether the input allows for block quote.\n */\n allowBlockquote: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bold to be introduced in the text.\n */\n allowBold: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for bullet list to be introduced in the text.\n */\n allowBulletList: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for italic to be introduced in the text.\n */\n allowItalic: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for strike to be introduced in the text.\n */\n allowStrike: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for underline to be introduced in the text.\n */\n allowUnderline: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows codeblock to be introduced in the text.\n */\n allowCodeblock: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Fires when send button is clicked\n *\n * @event submit\n * @type {String}\n */\n 'submit',\n\n /**\n * Fires when media is selected from image button\n *\n * @event select-media\n * @type {Array}\n */\n 'select-media',\n\n /**\n * Fires when media is dropped into the message input\n *\n * @event add-media\n * @type {Array}\n */\n 'add-media',\n\n /**\n * Fires when media is pasted into the message input\n *\n * @event paste-media\n * @type {Array}\n */\n 'paste-media',\n\n /**\n * Fires when cancel button is pressed (only on edit mode)\n *\n * @event cancel\n * @type {Boolean}\n */\n 'cancel',\n\n /**\n * Fires when skin tone is selected from the emoji picker\n *\n * @event skin-tone\n * @type {String}\n */\n 'skin-tone',\n\n /**\n * Fires when emoji is selected from the emoji picker\n *\n * @event selected-emoji\n * @type {String}\n */\n 'selected-emoji',\n\n /**\n * Fires when a slash command is selected\n *\n * @event selected-command\n * @type {String}\n */\n 'selected-command',\n\n /**\n * Fires when meeting pill is closed\n *\n * @event meeting-pill-close\n * @type {String}\n */\n 'meeting-pill-close',\n\n /**\n * Event to sync the value with the parent\n * @event update:value\n * @type {String|JSON}\n */\n 'update:value',\n ],\n\n data () {\n return {\n additionalExtensions: [meetingPill],\n internalInputValue: this.value, // internal input content\n imagePickerFocus: false,\n emojiPickerFocus: false,\n emojiPickerOpened: false,\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n displayCharacterLimitWarning () {\n return Boolean(this.showCharacterLimit) &&\n ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n },\n\n characterLimitTooltipEnabled () {\n return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n },\n\n isSendDisabled () {\n return this.disableSend ||\n (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n },\n\n computedCloseButtonProps () {\n return {\n ariaLabel: 'Close',\n };\n },\n\n emojiPickerHovered () {\n return this.emojiPickerFocus || this.emojiPickerOpened;\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n\n emojiPickerOpened (newValue) {\n if (!newValue) {\n this.$refs.richTextEditor?.focusEditor();\n }\n },\n },\n\n methods: {\n onDrag (e) {\n e.stopPropagation();\n e.preventDefault();\n },\n\n onDrop (e) {\n e.stopPropagation();\n e.preventDefault();\n\n const dt = e.dataTransfer;\n const files = Array.from(dt.files);\n this.$emit('add-media', files);\n },\n\n onPaste (e) {\n if (e.clipboardData.files.length) {\n e.stopPropagation();\n e.preventDefault();\n const files = [...e.clipboardData.files];\n this.$emit('paste-media', files);\n }\n },\n\n onSkinTone (skinTone) {\n this.$emit('skin-tone', skinTone);\n },\n\n onSelectEmoji (emoji) {\n if (!emoji) {\n return;\n }\n\n // Insert emoji into the editor\n this.$refs.richTextEditor.editor.commands.insertContent({\n type: 'emoji',\n attrs: {\n code: emoji.shortname,\n },\n });\n this.$emit('selected-emoji', emoji);\n },\n\n onSelectImage () {\n this.$refs.messageInputImageUpload.$refs.input.click();\n },\n\n onImageUpload () {\n this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n },\n\n toggleEmojiPicker () {\n this.emojiPickerOpened = !this.emojiPickerOpened;\n },\n\n onSend () {\n if (this.isSendDisabled) {\n return;\n }\n this.$emit('submit', this.internalInputValue);\n },\n\n onCancel () {\n this.$emit('cancel');\n },\n\n onInput (event) {\n this.$emit('update:value', event);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input {\n display: flex;\n flex-direction: column;\n border-radius: var(--dt-size-radius-400);\n border: var(--dt-size-border-100) solid;\n border-color: var(--dt-color-border-default);\n cursor: text;\n\n &:focus-within {\n border-color: var(--dt-color-border-bold);\n box-shadow: var(--dt-shadow-small);\n }\n\n &__editor-wrapper {\n padding: var(--dt-space-400) var(--dt-space-500) var(--dt-space-300);\n }\n\n &__remaining-char-tooltip {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n &__remaining-char {\n color: var(--dt-color-foreground-critical);\n font-size: var(--dt-font-size-100);\n margin-right: var(--dt-space-500);\n }\n\n &__send-button--disabled {\n background-color: unset;\n color: var(--dt-color-foreground-muted);\n cursor: default;\n }\n\n &__cancel-button {\n margin-right: var(--dt-space-300);\n }\n\n &__bottom-section {\n display: flex;\n justify-content: space-between;\n padding: var(--dt-space-300) var(--dt-space-400);\n }\n\n &__bottom-section-left {\n display: flex;\n }\n\n &__bottom-section-right {\n display: flex;\n }\n\n &__image-input {\n position: absolute;\n }\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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"}
|
package/dist/style.css
CHANGED
|
@@ -1143,7 +1143,6 @@ body > .os-scrollbar {
|
|
|
1143
1143
|
height: var(--dt-size-500);
|
|
1144
1144
|
}
|
|
1145
1145
|
.dt-leftbar-row[data-v-e6da0c41] .dt-leftbar-row__description {
|
|
1146
|
-
display: block;
|
|
1147
1146
|
overflow: hidden;
|
|
1148
1147
|
color: var(--leftbar-row-description-color-foreground);
|
|
1149
1148
|
font-weight: var(--leftbar-row-description-font-weight);
|
|
@@ -1153,7 +1152,6 @@ body > .os-scrollbar {
|
|
|
1153
1152
|
text-overflow: ellipsis;
|
|
1154
1153
|
}
|
|
1155
1154
|
.dt-leftbar-row[data-v-e6da0c41] .dt-leftbar-row__status {
|
|
1156
|
-
display: block;
|
|
1157
1155
|
padding-bottom: var(--dt-space-100);
|
|
1158
1156
|
overflow: hidden;
|
|
1159
1157
|
color: var(--leftbar-row-status-color-foreground);
|
|
@@ -1164,7 +1162,7 @@ body > .os-scrollbar {
|
|
|
1164
1162
|
}
|
|
1165
1163
|
.dt-leftbar-row[data-v-e6da0c41] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
|
|
1166
1164
|
color: var(--dt-theme-sidebar-status-color-foreground);
|
|
1167
|
-
content:
|
|
1165
|
+
content: " • ";
|
|
1168
1166
|
}
|
|
1169
1167
|
.dt-leftbar-row__icon-cc[data-v-e6da0c41] {
|
|
1170
1168
|
width: calc(var(--dt-size-300) * 3.5);
|
|
@@ -1448,7 +1446,6 @@ body > .os-scrollbar {
|
|
|
1448
1446
|
height: var(--dt-size-500);
|
|
1449
1447
|
}
|
|
1450
1448
|
.dt-leftbar-row[data-v-f44e0386] .dt-leftbar-row__description {
|
|
1451
|
-
display: block;
|
|
1452
1449
|
overflow: hidden;
|
|
1453
1450
|
color: var(--leftbar-row-description-color-foreground);
|
|
1454
1451
|
font-weight: var(--leftbar-row-description-font-weight);
|
|
@@ -1458,7 +1455,6 @@ body > .os-scrollbar {
|
|
|
1458
1455
|
text-overflow: ellipsis;
|
|
1459
1456
|
}
|
|
1460
1457
|
.dt-leftbar-row[data-v-f44e0386] .dt-leftbar-row__status {
|
|
1461
|
-
display: block;
|
|
1462
1458
|
padding-bottom: var(--dt-space-100);
|
|
1463
1459
|
overflow: hidden;
|
|
1464
1460
|
color: var(--leftbar-row-status-color-foreground);
|
|
@@ -1469,7 +1465,7 @@ body > .os-scrollbar {
|
|
|
1469
1465
|
}
|
|
1470
1466
|
.dt-leftbar-row[data-v-f44e0386] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
|
|
1471
1467
|
color: var(--dt-theme-sidebar-status-color-foreground);
|
|
1472
|
-
content:
|
|
1468
|
+
content: " • ";
|
|
1473
1469
|
}
|
|
1474
1470
|
.dt-leftbar-row__icon-cc[data-v-f44e0386] {
|
|
1475
1471
|
width: calc(var(--dt-size-300) * 3.5);
|
|
@@ -2108,11 +2104,11 @@ body > .os-scrollbar {
|
|
|
2108
2104
|
border-width: var(--dt-size-350);
|
|
2109
2105
|
border-color: var(--dt-color-border-subtle);
|
|
2110
2106
|
}
|
|
2111
|
-
.combobox__input-wrapper[data-v-
|
|
2107
|
+
.combobox__input-wrapper[data-v-f0e55fc8] {
|
|
2112
2108
|
position: relative;
|
|
2113
2109
|
display: block;
|
|
2114
2110
|
}
|
|
2115
|
-
.combobox__chip-wrapper[data-v-
|
|
2111
|
+
.combobox__chip-wrapper[data-v-f0e55fc8] {
|
|
2116
2112
|
position: absolute;
|
|
2117
2113
|
margin-left: var(--dt-space-200);
|
|
2118
2114
|
margin-right: var(--dt-space-200);
|
|
@@ -2121,26 +2117,26 @@ body > .os-scrollbar {
|
|
|
2121
2117
|
max-height: initial;
|
|
2122
2118
|
overflow-y: visible;
|
|
2123
2119
|
}
|
|
2124
|
-
.combobox__chip-wrapper-md--collapsed[data-v-
|
|
2120
|
+
.combobox__chip-wrapper-md--collapsed[data-v-f0e55fc8] {
|
|
2125
2121
|
max-height: 2.8rem;
|
|
2126
2122
|
overflow-y: hidden;
|
|
2127
2123
|
}
|
|
2128
|
-
.combobox__chip-wrapper-sm--collapsed[data-v-
|
|
2129
|
-
.combobox__chip-wrapper-xs--collapsed[data-v-
|
|
2124
|
+
.combobox__chip-wrapper-sm--collapsed[data-v-f0e55fc8],
|
|
2125
|
+
.combobox__chip-wrapper-xs--collapsed[data-v-f0e55fc8] {
|
|
2130
2126
|
max-height: 2.5rem;
|
|
2131
2127
|
overflow-y: hidden;
|
|
2132
2128
|
}
|
|
2133
|
-
.combobox__chip[data-v-
|
|
2129
|
+
.combobox__chip[data-v-f0e55fc8] {
|
|
2134
2130
|
margin-top: var(--dt-space-300);
|
|
2135
2131
|
margin-left: var(--dt-space-200);
|
|
2136
2132
|
margin-right: var(--dt-space-200);
|
|
2137
2133
|
z-index: var(--zi-base1);
|
|
2138
2134
|
max-width: var(--dt-size-100-percent);
|
|
2139
2135
|
}
|
|
2140
|
-
.combobox__input[data-v-
|
|
2136
|
+
.combobox__input[data-v-f0e55fc8] {
|
|
2141
2137
|
flex-grow: 1;
|
|
2142
2138
|
}
|
|
2143
|
-
.combobox__list--loading[data-v-
|
|
2139
|
+
.combobox__list--loading[data-v-f0e55fc8] {
|
|
2144
2140
|
text-align: center;
|
|
2145
2141
|
padding-top: var(--dt-space-500);
|
|
2146
2142
|
padding-bottom: var(--dt-space-500);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_text_wrapper.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js"],"names":[],"mappings":";IAkBI;;OAEG;;;;;IAMH;;OAEG;;;;;;;;;IAmBH;;;OAGG;yDADU,MAAM,QAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"emoji_text_wrapper.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js"],"names":[],"mappings":";IAkBI;;OAEG;;;;;IAMH;;OAEG;;;;;;;;;IAmBH;;;OAGG;yDADU,MAAM,QAAM,MAAM,CAAC;IAoBhC;;;;OAIG;8BADU,SAAO;;IAiBpB;;;;OAIG;mCADU,MAAM,QAAM,MAAM,CAAC,GAAC,MAAM;;IA1EvC;;OAEG;;;;;IAMH;;OAEG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.145.0-beta.1",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"regex-combined-emojis": "1.6.0",
|
|
36
36
|
"tippy.js": "6.3.7",
|
|
37
37
|
"@dialpad/dialtone-emojis": "1.0.7",
|
|
38
|
-
"@dialpad/dialtone-icons": "4.
|
|
38
|
+
"@dialpad/dialtone-icons": "4.25.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@faker-js/faker": "8.4.1",
|
|
@@ -84,12 +84,12 @@
|
|
|
84
84
|
"vue-tsc": "^1.8.25",
|
|
85
85
|
"yo": "^5.0.0",
|
|
86
86
|
"yorkie": "^2.0.0",
|
|
87
|
-
"@dialpad/dialtone-css": "8.38.
|
|
87
|
+
"@dialpad/dialtone-css": "8.38.2",
|
|
88
88
|
"@dialpad/generator-dialtone": "0.1.0"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
91
|
"vue": ">=2.6",
|
|
92
|
-
"@dialpad/dialtone-css": "^8.38.
|
|
92
|
+
"@dialpad/dialtone-css": "^8.38.2"
|
|
93
93
|
},
|
|
94
94
|
"bugs": {
|
|
95
95
|
"email": "dialtone@dialpad.com"
|