@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 16.8 kB

Source Map (JSON)

{"version":3,"file":"combobox.vue.cjs","sources":["../../../components/combobox/combobox.vue"],"sourcesContent":["\n<template>\n <div\n @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n >\n <div data-qa=\"dt-combobox-input-wrapper\">\n \n <slot\n name=\"input\"\n :input-props=\"inputProps\"\n />\n </div>\n\n <div\n v-if=\"showList\"\n ref=\"listWrapper\"\n data-qa=\"dt-combobox-list-wrapper\"\n @mouseleave=\"clearHighlightIndex\"\n @focusout=\"clearHighlightIndex\"\n @mousemove.capture=\"onMouseHighlight\"\n >\n <combobox-loading-list\n v-if=\"loading && !listRenderedOutside\"\n v-bind=\"listProps\"\n />\n <combobox-empty-list\n v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n v-bind=\"listProps\"\n :message=\"emptyStateMessage\"\n :item-class=\"emptyStateClass\"\n >\n <slot name=\"emptyListItem\" />\n </combobox-empty-list>\n \n <slot\n v-else\n name=\"list\"\n :list-props=\"listProps\"\n :opened=\"onOpen\"\n :clear-highlight-index=\"clearHighlightIndex\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtCombobox',\n\n components: {\n ComboboxLoadingList,\n ComboboxEmptyList,\n },\n\n mixins: [\n KeyboardNavigation({\n indexKey: 'highlightIndex',\n idKey: 'highlightId',\n listElementKey: 'getListElement',\n afterHighlightMethod: 'afterHighlight',\n beginningOfListMethod: 'beginningOfListMethod',\n endOfListMethod: 'endOfListMethod',\n activeItemKey: 'activeItemEl',\n }),\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 * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values null, xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: null,\n validator: (t) => Object.values(LABEL_SIZES).includes(t),\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Sets an ID on the list element of the component. Used by several aria attributes\n * as well as when deriving the IDs for each item.\n */\n listId: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * A method that will be called when the selection goes past the beginning of the list.\n */\n onBeginningOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * A method that will be called when the selection goes past the end of the list.\n */\n onEndOfList: {\n type: Function,\n default: null,\n },\n\n /**\n * Determines when to show the list element and also controls the aria-expanded attribute.\n * @values true, false\n */\n showList: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If the list is rendered outside the component, like when using popover as the list wrapper.\n * @values true, false\n */\n listRenderedOutside: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines when to show the skeletons and also controls aria-busy attribute.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n * @values true, false\n */\n emptyList: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Message to show when the list is empty\n */\n emptyStateMessage: {\n type: String,\n default: '',\n },\n\n /**\n * Additional class name for the empty list 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 emptyStateClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Programmatically click on the active list item element when a selection\n * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n * @values true, false\n */\n clickOnSelect: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Event fired when item selected\n *\n * @event select\n * @type {Number}\n */\n 'select',\n\n /**\n * Event fired when pressing escape\n *\n * @event escape\n */\n 'escape',\n\n /**\n * Event fired when the highlight changes\n *\n * @event highlight\n * @type {Number}\n */\n 'highlight',\n\n /**\n * Event fired when list is shown or hidden\n *\n * @event opened\n * @type {Boolean}\n */\n 'opened',\n ],\n\n data () {\n return {\n // If the list is rendered at the root, rather than as a child\n // of this component, this is the ref to that dom element. Set\n // by the onOpen method.\n outsideRenderedListRef: null,\n hasSlotContent,\n };\n },\n\n computed: {\n inputProps () {\n return {\n label: this.label,\n labelVisible: this.labelVisible,\n size: this.size,\n description: this.description,\n role: 'combobox',\n 'aria-label': this.label,\n 'aria-expanded': this.showList.toString(),\n 'aria-owns': this.listId,\n 'aria-haspopup': 'listbox',\n 'aria-activedescendant': this.activeItemId,\n 'aria-controls': this.listId,\n };\n },\n\n listProps () {\n return {\n role: 'listbox',\n id: this.listId,\n // The list has to be positioned relatively so that the auto-scroll can\n // calculate the correct offset for the list items.\n class: 'd-ps-relative',\n 'aria-label': this.label,\n };\n },\n\n beginningOfListMethod () {\n return this.onBeginningOfList || this.jumpToEnd;\n },\n\n endOfListMethod () {\n return this.onEndOfList || this.jumpToBeginning;\n },\n\n activeItemId () {\n if (!this.showList || this.highlightIndex < 0 || this.loading) {\n return;\n }\n return this.highlightId;\n },\n\n activeItemEl () {\n if (!this.highlightId) return '';\n return this.getListElement().querySelector('#' + this.highlightId);\n },\n },\n\n watch: {\n showList (showList) {\n // When the list's visibility changes reset the highlight index.\n\n if (!this.listRenderedOutside) {\n this.setInitialHighlightIndex();\n this.$emit('opened', showList);\n }\n\n if (!showList && this.outsideRenderedListRef) {\n this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n this.outsideRenderedListRef = null;\n }\n },\n\n loading (loading) {\n this.$nextTick(() => {\n this.setInitialHighlightIndex();\n });\n },\n\n $props: {\n deep: true,\n immediate: true,\n handler () {\n this.validateEmptyListProps();\n },\n },\n },\n\n created () {\n this.validateEmptyListProps();\n },\n\n methods: {\n onMouseHighlight (e) {\n if (this.loading) return;\n\n const liElement = e.target.closest('li');\n\n if (liElement && this.highlightId !== liElement.id) {\n this.setHighlightId(liElement.id);\n }\n },\n\n getListElement () {\n return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n },\n\n clearHighlightIndex () {\n if (this.showList) {\n this.setHighlightIndex(-1);\n }\n },\n\n afterHighlight () {\n if (this.loading) return;\n this.$emit('highlight', this.highlightIndex);\n },\n\n onEnterKey () {\n if (this.loading || this.emptyList) return;\n\n if (this.highlightIndex >= 0) {\n this.$emit('select', this.highlightIndex);\n\n if (this.clickOnSelect) {\n this.activeItemEl?.click();\n }\n }\n },\n\n onEscapeKey () {\n this.$emit('escape');\n },\n\n onOpen (open, contentRef) {\n this.outsideRenderedListRef = contentRef;\n this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n this.$emit('opened', open);\n\n if (open) {\n this.setInitialHighlightIndex();\n }\n },\n\n onKeyValidation (e, eventHandler) {\n if (!this.showList || !this.getListElement()) return;\n\n this[eventHandler](e);\n },\n\n setInitialHighlightIndex () {\n if (!this.showList) return;\n this.$nextTick(() => {\n // When the list's is shown, reset the highlight index.\n // If the list is loading, set to -1\n this.setHighlightIndex(this.loading ? -1 : 0);\n });\n },\n\n validateEmptyListProps () {\n if (this.$slots.emptyListItem) { return; }\n\n if (this.emptyList && !this.emptyStateMessage) {\n console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.`);\n }\n },\n },\n};\n</script>\n"],"names":["ComboboxLoadingList","ComboboxEmptyList","KeyboardNavigation","LABEL_SIZES","getUniqueString","hasSlotContent","_createElementBlock","_withKeys","_withModifiers","_createElementVNode","_renderSlot","_openBlock","_createBlock","_normalizeProps","_mergeProps","_withCtx","_createCommentVNode"],"mappings":"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"}