UNPKG

@dialpad/dialtone-vue

Version:

Vue component library for Dialpad's design system Dialtone

1 lines 27.2 kB
{"version":3,"file":"combobox-multi-select.cjs","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n <dt-recipe-combobox-with-popover\n ref=\"comboboxWithPopover\"\n :label=\"label\"\n :show-list=\"showList\"\n :max-height=\"listMaxHeight\"\n :max-width=\"listMaxWidth\"\n :popover-offset=\"popoverOffset\"\n :has-suggestion-list=\"hasSuggestionList\"\n content-width=\"anchor\"\n :append-to=\"appendTo\"\n :transition=\"transition\"\n @select=\"onComboboxSelect\"\n @highlight=\"comboboxHighlight\"\n >\n <template #input=\"{ onInput }\">\n <span\n ref=\"inputSlotWrapper\"\n class=\"d-recipe-combobox-multi-select__input-wrapper\"\n @focusin=\"handleInputFocusIn\"\n @focusout=\"handleInputFocusOut\"\n >\n <span\n ref=\"chipsWrapper\"\n :class=\"['d-recipe-combobox-multi-select__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=\"[\n 'd-recipe-combobox-multi-select__chip',\n { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n ]\"\n :style=\"{ maxWidth: chipMaxWidth }\"\n :size=\"CHIP_SIZES[size]\"\n :disabled=\"disabled\"\n v-on=\"chipListeners\"\n @keydown.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=\"d-recipe-combobox-multi-select__input\"\n :input-class=\"[\n inputClass, {\n 'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n }]\"\n :input-wrapper-class=\"inputWrapperClass\"\n :disabled=\"disabled\"\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 @select.stop\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 class=\"d-recipe-combobox-multi-select__list\"\n @mousedown.prevent\n >\n <slot\n v-if=\"!loading\"\n name=\"list\"\n />\n <div\n v-else\n class=\"d-recipe-combobox-multi-select__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 { getUniqueString } from '@/common/utils';\n\nexport default {\n name: 'DtRecipeComboboxMultiSelect',\n\n components: {\n DtRecipeComboboxWithPopover,\n DtInput,\n DtChip,\n DtValidationMessages,\n },\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 * Determines maximum width for the popover before overflow.\n * Possible units rem|px|em\n */\n listMaxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Amount of reserved space (in px) on the right side of the input\n * before the chips and the input caret jump to the next line.\n * default is 64\n */\n reservedRightSpace: {\n type: Number,\n default: 64,\n },\n\n /**\n * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n * it will be truncated with ellipses.\n * Possible units rem|px|em\n */\n chipMaxWidth: {\n type: String,\n default: '',\n },\n\n /**\n * Additional class name for the input 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 inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * When true, disables the underlying input.\n */\n disabled: {\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 * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * Event fired when combobox item is highlighted\n *\n * @event combobox-highlight\n * @type {Object}\n */\n 'combobox-highlight',\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 hideInputText: 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 keydown: event => {\n this.onChipKeyDown(event);\n this.$emit('keydown', 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 keydown: event => {\n this.onInputKeyDown(event);\n },\n\n keyup: event => {\n this.$emit('keyup', event);\n },\n\n click: () => {\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 [`d-recipe-combobox-multi-select__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 chipMaxWidth: {\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 comboboxHighlight (highlightIndex) {\n this.$emit('combobox-highlight', highlightIndex);\n },\n\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 if (this.loading) return;\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 onChipKeyDown (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 onInputKeyDown (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 there is selected text, do not focus the last chip\n if (event.target.selectionEnd !== event.target.selectionStart) {\n return;\n }\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 const spaceLeft = input.getBoundingClientRect().width - left;\n // input.style.paddingLeft = left + 'px';\n\n if (spaceLeft > this.reservedRightSpace) {\n input.style.paddingLeft = left + 'px';\n } else {\n input.style.paddingLeft = '4px';\n }\n\n // Get the chip wrapper height minus the 4px padding\n const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n // Get lastChip offsetTop plus 2px of the input padding.\n const top = spaceLeft > this.reservedRightSpace\n ? lastChip.offsetTop + 2\n : (chipsWrapperHeight + lastChipHeight - 9);\n\n input.style.paddingTop = `${top}px`;\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 this.hideInputText = false;\n await this.$nextTick();\n this.setInputPadding();\n }\n },\n\n async handleInputFocusOut () {\n this.inputFocused = false;\n if (this.collapseOnFocusOut) {\n this.hideInputText = true;\n const input = this.getInput();\n if (!input) return;\n // Hide the input text when is not on first line\n if (!input.style.paddingTop) {\n return;\n }\n this.revertInputPadding(input);\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":"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"}