primevue/treeselect/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/treeselect/BaseTreeSelect.vue","../../src/treeselect/TreeSelect.vue","../../src/treeselect/TreeSelect.vue?vue&type=template&id=e8339e10&lang.js"],"sourcesContent":["<script>\nimport BaseInput from '@primevue/core/baseinput';\nimport TreeSelectStyle from 'primevue/treeselect/style';\n\nexport default {\n    name: 'BaseTreeSelect',\n    extends: BaseInput,\n    props: {\n        options: Array,\n        scrollHeight: {\n            type: String,\n            default: '20rem'\n        },\n        placeholder: {\n            type: String,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: null\n        },\n        selectionMode: {\n            type: String,\n            default: 'single'\n        },\n        selectedItemsLabel: {\n            type: String,\n            default: null\n        },\n        maxSelectedLabels: {\n            type: Number,\n            default: null\n        },\n        appendTo: {\n            type: [String, Object],\n            default: 'body'\n        },\n        emptyMessage: {\n            type: String,\n            default: null\n        },\n        display: {\n            type: String,\n            default: 'comma'\n        },\n        metaKeySelection: {\n            type: Boolean,\n            default: false\n        },\n        loading: {\n            type: Boolean,\n            default: false\n        },\n        loadingIcon: {\n            type: String,\n            default: undefined\n        },\n        loadingMode: {\n            type: String,\n            default: 'mask'\n        },\n        showClear: {\n            type: Boolean,\n            default: false\n        },\n        clearIcon: {\n            type: String,\n            default: undefined\n        },\n        filter: {\n            type: Boolean,\n            default: false\n        },\n        filterBy: {\n            type: [String, Function],\n            default: 'label'\n        },\n        filterMode: {\n            type: String,\n            default: 'lenient'\n        },\n        filterPlaceholder: {\n            type: String,\n            default: null\n        },\n        filterLocale: {\n            type: String,\n            default: undefined\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        inputProps: {\n            type: null,\n            default: null\n        },\n        panelClass: {\n            type: [String, Object],\n            default: null\n        },\n        panelProps: {\n            type: null,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        },\n        expandedKeys: {\n            type: null,\n            default: null\n        }\n    },\n    style: TreeSelectStyle,\n    provide() {\n        return {\n            $pcTreeSelect: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div ref=\"container\" :class=\"cx('root')\" :style=\"sx('root')\" @click=\"onClick\" v-bind=\"ptmi('root')\">\n        <div class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenInputContainer')\" :data-p-hidden-accessible=\"true\">\n            <input\n                ref=\"focusInput\"\n                :id=\"inputId\"\n                type=\"text\"\n                role=\"combobox\"\n                :class=\"inputClass\"\n                :style=\"inputStyle\"\n                readonly\n                :disabled=\"disabled\"\n                :tabindex=\"!disabled ? tabindex : -1\"\n                :aria-labelledby=\"ariaLabelledby\"\n                :aria-label=\"ariaLabel\"\n                aria-haspopup=\"tree\"\n                :aria-expanded=\"overlayVisible\"\n                :aria-controls=\"listId\"\n                @focus=\"onFocus($event)\"\n                @blur=\"onBlur($event)\"\n                @keydown=\"onKeyDown($event)\"\n                v-bind=\"{ ...inputProps, ...ptm('hiddenInput') }\"\n            />\n        </div>\n        <div :class=\"cx('labelContainer')\" v-bind=\"ptm('labelContainer')\">\n            <div :class=\"cx('label')\" v-bind=\"ptm('label')\">\n                <slot name=\"value\" :value=\"selectedNodes\" :placeholder=\"placeholder\">\n                    <template v-if=\"display === 'comma'\">\n                        {{ label || 'empty' }}\n                    </template>\n                    <template v-else-if=\"display === 'chip'\">\n                        <template v-if=\"chipSelectedItems\">\n                            <span>{{ label }}</span>\n                        </template>\n                        <template v-else>\n                            <div v-for=\"node of selectedNodes\" :key=\"node.key\" :class=\"cx('chipItem')\" v-bind=\"ptm('chipItem')\">\n                                <Chip :class=\"cx('pcChip')\" :label=\"node.label\" :unstyled=\"unstyled\" :pt=\"ptm('pcChip')\" />\n                            </div>\n                            <template v-if=\"emptyValue\">{{ placeholder || 'empty' }}</template>\n                        </template>\n                    </template>\n                </slot>\n            </div>\n        </div>\n        <slot v-if=\"isClearIconVisible\" name=\"clearicon\" :class=\"cx('clearIcon')\" :clearCallback=\"onClearClick\">\n            <component :is=\"clearIcon ? 'i' : 'TimesIcon'\" ref=\"clearIcon\" :class=\"[cx('clearIcon'), clearIcon]\" @click=\"onClearClick\" v-bind=\"ptm('clearIcon')\" data-pc-section=\"clearicon\" />\n        </slot>\n        <div :class=\"cx('dropdown')\" role=\"button\" aria-haspopup=\"tree\" :aria-expanded=\"overlayVisible\" v-bind=\"ptm('dropdown')\">\n            <!-- TODO: triggericon is deprecated since v4.0 -->\n            <slot :name=\"$slots.dropdownicon ? 'dropdownicon' : 'triggericon'\" :class=\"cx('dropdownIcon')\">\n                <component :is=\"'ChevronDownIcon'\" :class=\"cx('dropdownIcon')\" v-bind=\"ptm('dropdownIcon')\" />\n            </slot>\n        </div>\n        <Portal :appendTo=\"appendTo\">\n            <transition name=\"p-connected-overlay\" @enter=\"onOverlayEnter\" @after-enter=\"onOverlayAfterEnter\" @leave=\"onOverlayLeave\" @after-leave=\"onOverlayAfterLeave\" v-bind=\"ptm('transition')\">\n                <div v-if=\"overlayVisible\" :ref=\"overlayRef\" @click=\"onOverlayClick\" :class=\"[cx('panel'), panelClass]\" @keydown=\"onOverlayKeydown\" v-bind=\"{ ...panelProps, ...ptm('panel') }\">\n                    <span\n                        ref=\"firstHiddenFocusableElementOnOverlay\"\n                        role=\"presentation\"\n                        class=\"p-hidden-accessible p-hidden-focusable\"\n                        :tabindex=\"0\"\n                        @focus=\"onFirstHiddenFocus\"\n                        v-bind=\"ptm('hiddenFirstFocusableEl')\"\n                        :data-p-hidden-accessible=\"true\"\n                        :data-p-hidden-focusable=\"true\"\n                    ></span>\n                    <slot name=\"header\" :value=\"d_value\" :options=\"options\"></slot>\n                    <div :class=\"cx('treeContainer')\" :style=\"{ 'max-height': scrollHeight }\" v-bind=\"ptm('treeContainer')\">\n                        <TSTree\n                            ref=\"tree\"\n                            :id=\"listId\"\n                            :value=\"options\"\n                            :selectionMode=\"selectionMode\"\n                            :loading=\"loading\"\n                            :loadingIcon=\"loadingIcon\"\n                            :loadingMode=\"loadingMode\"\n                            :filter=\"filter\"\n                            :filterBy=\"filterBy\"\n                            :filterMode=\"filterMode\"\n                            :filterPlaceholder=\"filterPlaceholder\"\n                            :filterLocale=\"filterLocale\"\n                            @update:selectionKeys=\"onSelectionChange\"\n                            :selectionKeys=\"d_value\"\n                            :expandedKeys=\"d_expandedKeys\"\n                            @update:expandedKeys=\"onNodeToggle\"\n                            :metaKeySelection=\"metaKeySelection\"\n                            @node-expand=\"$emit('node-expand', $event)\"\n                            @node-collapse=\"$emit('node-collapse', $event)\"\n                            @node-select=\"onNodeSelect\"\n                            @node-unselect=\"onNodeUnselect\"\n                            @click.stop\n                            :level=\"0\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"ptm('pcTree')\"\n                        >\n                            <template v-if=\"$slots.option\" #default=\"optionSlotProps\">\n                                <slot name=\"option\" :node=\"optionSlotProps.node\" :expanded=\"optionSlotProps.expanded\" :selected=\"optionSlotProps.selected\" />\n                            </template>\n                            <template v-if=\"$slots.itemtoggleicon\" #toggleicon=\"iconSlotProps\">\n                                <slot name=\"itemtoggleicon\" :node=\"iconSlotProps.node\" :expanded=\"iconSlotProps.expanded\" :class=\"iconSlotProps.class\" />\n                            </template>\n                            <!--TODO: itemtogglericon deprecated since v4.0-->\n                            <template v-else-if=\"$slots.itemtogglericon\" #togglericon=\"iconSlotProps\">\n                                <slot name=\"itemtogglericon\" :node=\"iconSlotProps.node\" :expanded=\"iconSlotProps.expanded\" :class=\"iconSlotProps.class\" />\n                            </template>\n                            <template v-if=\"$slots.itemcheckboxicon\" #checkboxicon=\"iconSlotProps\">\n                                <slot name=\"itemcheckboxicon\" :checked=\"iconSlotProps.checked\" :partialChecked=\"iconSlotProps.partialChecked\" :class=\"iconSlotProps.class\" />\n                            </template>\n                        </TSTree>\n                        <div v-if=\"emptyOptions && !loading\" :class=\"cx('emptyMessage')\" v-bind=\"ptm('emptyMessage')\">\n                            <slot name=\"empty\">{{ emptyMessageText }}</slot>\n                        </div>\n                    </div>\n                    <slot name=\"footer\" :value=\"d_value\" :options=\"options\"></slot>\n                    <span\n                        ref=\"lastHiddenFocusableElementOnOverlay\"\n                        role=\"presentation\"\n                        class=\"p-hidden-accessible p-hidden-focusable\"\n                        :tabindex=\"0\"\n                        @focus=\"onLastHiddenFocus\"\n                        v-bind=\"ptm('hiddenLastFocusableEl')\"\n                        :data-p-hidden-accessible=\"true\"\n                        :data-p-hidden-focusable=\"true\"\n                    ></span>\n                </div>\n            </transition>\n        </Portal>\n    </div>\n</template>\n\n<script>\nimport { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';\nimport { isEmpty, isNotEmpty } from '@primeuix/utils/object';\nimport { ZIndex } from '@primeuix/utils/zindex';\nimport { ConnectedOverlayScrollHandler } from '@primevue/core/utils';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport TimesIcon from '@primevue/icons/times';\nimport Chip from 'primevue/chip';\nimport OverlayEventBus from 'primevue/overlayeventbus';\nimport Portal from 'primevue/portal';\nimport Ripple from 'primevue/ripple';\nimport Tree from 'primevue/tree';\nimport BaseTreeSelect from './BaseTreeSelect.vue';\n\nexport default {\n    name: 'TreeSelect',\n    extends: BaseTreeSelect,\n    inheritAttrs: false,\n    emits: ['before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],\n    inject: {\n        $pcFluid: { default: null }\n    },\n    data() {\n        return {\n            focused: false,\n            overlayVisible: false,\n            d_expandedKeys: this.expandedKeys || {}\n        };\n    },\n    watch: {\n        modelValue: {\n            handler: function () {\n                if (!this.selfChange) {\n                    this.updateTreeState();\n                }\n\n                this.selfChange = false;\n            },\n            immediate: true\n        },\n        options() {\n            this.updateTreeState();\n        },\n        expandedKeys(value) {\n            this.d_expandedKeys = value;\n        }\n    },\n    outsideClickListener: null,\n    resizeListener: null,\n    scrollHandler: null,\n    overlay: null,\n    selfChange: false,\n    selfClick: false,\n    beforeUnmount() {\n        this.unbindOutsideClickListener();\n        this.unbindResizeListener();\n\n        if (this.scrollHandler) {\n            this.scrollHandler.destroy();\n            this.scrollHandler = null;\n        }\n\n        if (this.overlay) {\n            ZIndex.clear(this.overlay);\n            this.overlay = null;\n        }\n    },\n    mounted() {\n        this.updateTreeState();\n    },\n    methods: {\n        show() {\n            this.$emit('before-show');\n            this.overlayVisible = true;\n        },\n        hide() {\n            this.$emit('before-hide');\n            this.overlayVisible = false;\n            this.$refs.focusInput.focus();\n        },\n        onFocus(event) {\n            this.focused = true;\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.focused = false;\n            this.$emit('blur', event);\n            this.formField.onBlur?.();\n        },\n        onClick(event) {\n            if (this.disabled) {\n                return;\n            }\n\n            if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section=\"clearicon\"]')) {\n                return;\n            } else if (!this.overlay || !this.overlay.contains(event.target)) {\n                if (this.overlayVisible) this.hide();\n                else this.show();\n\n                focus(this.$refs.focusInput);\n            }\n        },\n        onClearClick() {\n            this.onSelectionChange(null);\n        },\n        onSelectionChange(keys) {\n            this.selfChange = true;\n            this.writeValue(keys);\n            this.$emit('change', keys);\n        },\n        onNodeSelect(node) {\n            this.$emit('node-select', node);\n\n            if (this.selectionMode === 'single') {\n                this.hide();\n            }\n        },\n        onNodeUnselect(node) {\n            this.$emit('node-unselect', node);\n        },\n        onNodeToggle(keys) {\n            this.d_expandedKeys = keys;\n\n            this.$emit('update:expandedKeys', this.d_expandedKeys);\n        },\n        getSelectedItemsLabel() {\n            let pattern = /{(.*?)}/;\n            const selectedItemsLabel = this.selectedItemsLabel || this.$primevue.config.locale.selectionMessage;\n\n            if (pattern.test(selectedItemsLabel)) {\n                return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], Object.keys(this.d_value).length + '');\n            }\n\n            return selectedItemsLabel;\n        },\n        onFirstHiddenFocus(event) {\n            const focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable=\"true\"])') : this.$refs.focusInput;\n\n            focus(focusableEl);\n        },\n        onLastHiddenFocus(event) {\n            const focusableEl = event.relatedTarget === this.$refs.focusInput ? getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable=\"true\"])') : this.$refs.focusInput;\n\n            focus(focusableEl);\n        },\n        onKeyDown(event) {\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'Space':\n                case 'Enter':\n                case 'NumpadEnter':\n                    this.onEnterKey(event);\n                    break;\n\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                case 'Tab':\n                    this.onTabKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            if (this.overlayVisible) return;\n\n            this.show();\n\n            this.$nextTick(() => {\n                const treeNodeEl = find(this.$refs.tree.$el, '[data-pc-section=\"treeitem\"]');\n                const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');\n\n                focus(focusedElement);\n            });\n\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (this.overlayVisible) {\n                this.hide();\n            } else {\n                this.onArrowDownKey(event);\n            }\n\n            event.preventDefault();\n        },\n        onEscapeKey(event) {\n            if (this.overlayVisible) {\n                this.hide();\n                event.preventDefault();\n            }\n        },\n        onTabKey(event, pressedInInputText = false) {\n            if (!pressedInInputText) {\n                if (this.overlayVisible && this.hasFocusableElements()) {\n                    focus(this.$refs.firstHiddenFocusableElementOnOverlay);\n\n                    event.preventDefault();\n                }\n            }\n        },\n        hasFocusableElements() {\n            return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable=\"true\"])').length > 0;\n        },\n        onOverlayEnter(el) {\n            ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);\n\n            addStyle(el, { position: 'absolute', top: '0' });\n            this.alignOverlay();\n            this.focus();\n        },\n        onOverlayAfterEnter() {\n            this.bindOutsideClickListener();\n            this.bindScrollListener();\n            this.bindResizeListener();\n            this.scrollValueInView();\n            this.$emit('show');\n        },\n        onOverlayLeave() {\n            this.unbindOutsideClickListener();\n            this.unbindScrollListener();\n            this.unbindResizeListener();\n            this.$emit('hide');\n            this.overlay = null;\n        },\n        onOverlayAfterLeave(el) {\n            ZIndex.clear(el);\n        },\n        focus() {\n            let focusableElements = getFocusableElements(this.overlay);\n\n            if (focusableElements && focusableElements.length > 0) {\n                focusableElements[0].focus();\n            }\n        },\n        alignOverlay() {\n            if (this.appendTo === 'self') {\n                relativePosition(this.overlay, this.$el);\n            } else {\n                this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';\n                absolutePosition(this.overlay, this.$el);\n            }\n        },\n        bindOutsideClickListener() {\n            if (!this.outsideClickListener) {\n                this.outsideClickListener = (event) => {\n                    if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event)) {\n                        this.hide();\n                    }\n\n                    this.selfClick = false;\n                };\n\n                document.addEventListener('click', this.outsideClickListener, true);\n            }\n        },\n        unbindOutsideClickListener() {\n            if (this.outsideClickListener) {\n                document.removeEventListener('click', this.outsideClickListener, true);\n                this.outsideClickListener = null;\n            }\n        },\n        bindScrollListener() {\n            if (!this.scrollHandler) {\n                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {\n                    if (this.overlayVisible) {\n                        this.hide();\n                    }\n                });\n            }\n\n            this.scrollHandler.bindScrollListener();\n        },\n        unbindScrollListener() {\n            if (this.scrollHandler) {\n                this.scrollHandler.unbindScrollListener();\n            }\n        },\n        bindResizeListener() {\n            if (!this.resizeListener) {\n                this.resizeListener = () => {\n                    if (this.overlayVisible && !isTouchDevice()) {\n                        this.hide();\n                    }\n                };\n\n                window.addEventListener('resize', this.resizeListener);\n            }\n        },\n        unbindResizeListener() {\n            if (this.resizeListener) {\n                window.removeEventListener('resize', this.resizeListener);\n                this.resizeListener = null;\n            }\n        },\n        isOutsideClicked(event) {\n            return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));\n        },\n        overlayRef(el) {\n            this.overlay = el;\n        },\n        onOverlayClick(event) {\n            OverlayEventBus.emit('overlay-click', {\n                originalEvent: event,\n                target: this.$el\n            });\n\n            this.selfClick = true;\n        },\n        onOverlayKeydown(event) {\n            if (event.code === 'Escape') this.hide();\n        },\n        fillNodeMap(node, nodeMap) {\n            nodeMap[node.key] = node;\n\n            if (node.children?.length) {\n                node.children.forEach((children) => this.fillNodeMap(children, nodeMap));\n            }\n        },\n        isSelected(node, keys) {\n            return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];\n        },\n        updateTreeState() {\n            let keys = { ...this.d_value };\n\n            if (keys && this.options) {\n                this.updateTreeBranchState(null, null, keys);\n            }\n        },\n        updateTreeBranchState(node, path, keys) {\n            if (node) {\n                if (this.isSelected(node, keys)) {\n                    this.expandPath(path);\n                    delete keys[node.key];\n                }\n\n                if (Object.keys(keys).length && node.children) {\n                    for (let childNode of node.children) {\n                        path.push(node.key);\n                        this.updateTreeBranchState(childNode, path, keys);\n                    }\n                }\n            } else {\n                for (let childNode of this.options) {\n                    this.updateTreeBranchState(childNode, [], keys);\n                }\n            }\n        },\n        expandPath(path) {\n            if (path.length > 0) {\n                for (let key of path) {\n                    this.d_expandedKeys[key] = true;\n                }\n\n                this.d_expandedKeys = { ...this.d_expandedKeys };\n                this.$emit('update:expandedKeys', this.d_expandedKeys);\n            }\n        },\n        scrollValueInView() {\n            if (this.overlay) {\n                let selectedItem = findSingle(this.overlay, '[data-p-selected=\"true\"]');\n\n                if (selectedItem) {\n                    selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });\n                }\n            }\n        }\n    },\n    computed: {\n        nodeMap() {\n            const nodeMap = {};\n\n            this.options?.forEach((node) => this.fillNodeMap(node, nodeMap));\n\n            return nodeMap;\n        },\n        selectedNodes() {\n            let selectedNodes = [];\n\n            if (this.d_value && this.options) {\n                Object.keys(this.d_value).forEach((key) => {\n                    const node = this.nodeMap[key];\n\n                    if (this.isSelected(node, this.d_value)) {\n                        selectedNodes.push(node);\n                    }\n                });\n            }\n\n            return selectedNodes;\n        },\n        label() {\n            let value = this.selectedNodes;\n            let label;\n\n            if (value.length) {\n                if (isNotEmpty(this.maxSelectedLabels) && value.length > this.maxSelectedLabels) {\n                    label = this.getSelectedItemsLabel();\n                } else {\n                    label = value.map((node) => node.label).join(', ');\n                }\n            } else {\n                label = this.placeholder;\n            }\n\n            return label;\n        },\n        chipSelectedItems() {\n            return isNotEmpty(this.maxSelectedLabels) && this.d_value && Object.keys(this.d_value).length > this.maxSelectedLabels;\n        },\n        emptyMessageText() {\n            return this.emptyMessage || this.$primevue.config.locale.emptyMessage;\n        },\n        emptyValue() {\n            return !this.$filled;\n        },\n        emptyOptions() {\n            return !this.options || this.options.length === 0;\n        },\n        listId() {\n            return this.$id + '_list';\n        },\n        hasFluid() {\n            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;\n        },\n        isClearIconVisible() {\n            return this.showClear && this.d_value != null && isNotEmpty(this.options);\n        }\n    },\n    components: {\n        TSTree: Tree,\n        Chip,\n        Portal,\n        ChevronDownIcon,\n        TimesIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div ref=\"container\" :class=\"cx('root')\" :style=\"sx('root')\" @click=\"onClick\" v-bind=\"ptmi('root')\">\n        <div class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenInputContainer')\" :data-p-hidden-accessible=\"true\">\n            <input\n                ref=\"focusInput\"\n                :id=\"inputId\"\n                type=\"text\"\n                role=\"combobox\"\n                :class=\"inputClass\"\n                :style=\"inputStyle\"\n                readonly\n                :disabled=\"disabled\"\n                :tabindex=\"!disabled ? tabindex : -1\"\n                :aria-labelledby=\"ariaLabelledby\"\n                :aria-label=\"ariaLabel\"\n                aria-haspopup=\"tree\"\n                :aria-expanded=\"overlayVisible\"\n                :aria-controls=\"listId\"\n                @focus=\"onFocus($event)\"\n                @blur=\"onBlur($event)\"\n                @keydown=\"onKeyDown($event)\"\n                v-bind=\"{ ...inputProps, ...ptm('hiddenInput') }\"\n            />\n        </div>\n        <div :class=\"cx('labelContainer')\" v-bind=\"ptm('labelContainer')\">\n            <div :class=\"cx('label')\" v-bind=\"ptm('label')\">\n                <slot name=\"value\" :value=\"selectedNodes\" :placeholder=\"placeholder\">\n                    <template v-if=\"display === 'comma'\">\n                        {{ label || 'empty' }}\n                    </template>\n                    <template v-else-if=\"display === 'chip'\">\n                        <template v-if=\"chipSelectedItems\">\n                            <span>{{ label }}</span>\n                        </template>\n                        <template v-else>\n                            <div v-for=\"node of selectedNodes\" :key=\"node.key\" :class=\"cx('chipItem')\" v-bind=\"ptm('chipItem')\">\n                                <Chip :class=\"cx('pcChip')\" :label=\"node.label\" :unstyled=\"unstyled\" :pt=\"ptm('pcChip')\" />\n                            </div>\n                            <template v-if=\"emptyValue\">{{ placeholder || 'empty' }}</template>\n                        </template>\n                    </template>\n                </slot>\n            </div>\n        </div>\n        <slot v-if=\"isClearIconVisible\" name=\"clearicon\" :class=\"cx('clearIcon')\" :clearCallback=\"onClearClick\">\n            <component :is=\"clearIcon ? 'i' : 'TimesIcon'\" ref=\"clearIcon\" :class=\"[cx('clearIcon'), clearIcon]\" @click=\"onClearClick\" v-bind=\"ptm('clearIcon')\" data-pc-section=\"clearicon\" />\n        </slot>\n        <div :class=\"cx('dropdown')\" role=\"button\" aria-haspopup=\"tree\" :aria-expanded=\"overlayVisible\" v-bind=\"ptm('dropdown')\">\n            <!-- TODO: triggericon is deprecated since v4.0 -->\n            <slot :name=\"$slots.dropdownicon ? 'dropdownicon' : 'triggericon'\" :class=\"cx('dropdownIcon')\">\n                <component :is=\"'ChevronDownIcon'\" :class=\"cx('dropdownIcon')\" v-bind=\"ptm('dropdownIcon')\" />\n            </slot>\n        </div>\n        <Portal :appendTo=\"appendTo\">\n            <transition name=\"p-connected-overlay\" @enter=\"onOverlayEnter\" @after-enter=\"onOverlayAfterEnter\" @leave=\"onOverlayLeave\" @after-leave=\"onOverlayAfterLeave\" v-bind=\"ptm('transition')\">\n                <div v-if=\"overlayVisible\" :ref=\"overlayRef\" @click=\"onOverlayClick\" :class=\"[cx('panel'), panelClass]\" @keydown=\"onOverlayKeydown\" v-bind=\"{ ...panelProps, ...ptm('panel') }\">\n                    <span\n                        ref=\"firstHiddenFocusableElementOnOverlay\"\n                        role=\"presentation\"\n                        class=\"p-hidden-accessible p-hidden-focusable\"\n                        :tabindex=\"0\"\n                        @focus=\"onFirstHiddenFocus\"\n                        v-bind=\"ptm('hiddenFirstFocusableEl')\"\n                        :data-p-hidden-accessible=\"true\"\n                        :data-p-hidden-focusable=\"true\"\n                    ></span>\n                    <slot name=\"header\" :value=\"d_value\" :options=\"options\"></slot>\n                    <div :class=\"cx('treeContainer')\" :style=\"{ 'max-height': scrollHeight }\" v-bind=\"ptm('treeContainer')\">\n                        <TSTree\n                            ref=\"tree\"\n                            :id=\"listId\"\n                            :value=\"options\"\n                            :selectionMode=\"selectionMode\"\n                            :loading=\"loading\"\n                            :loadingIcon=\"loadingIcon\"\n                            :loadingMode=\"loadingMode\"\n                            :filter=\"filter\"\n                            :filterBy=\"filterBy\"\n                            :filterMode=\"filterMode\"\n                            :filterPlaceholder=\"filterPlaceholder\"\n                            :filterLocale=\"filterLocale\"\n                            @update:selectionKeys=\"onSelectionChange\"\n                            :selectionKeys=\"d_value\"\n                            :expandedKeys=\"d_expandedKeys\"\n                            @update:expandedKeys=\"onNodeToggle\"\n                            :metaKeySelection=\"metaKeySelection\"\n                            @node-expand=\"$emit('node-expand', $event)\"\n                            @node-collapse=\"$emit('node-collapse', $event)\"\n                            @node-select=\"onNodeSelect\"\n                            @node-unselect=\"onNodeUnselect\"\n                            @click.stop\n                            :level=\"0\"\n                            :unstyled=\"unstyled\"\n                            :pt=\"ptm('pcTree')\"\n                        >\n                            <template v-if=\"$slots.option\" #default=\"optionSlotProps\">\n                                <slot name=\"option\" :node=\"optionSlotProps.node\" :expanded=\"optionSlotProps.expanded\" :selected=\"optionSlotProps.selected\" />\n                            </template>\n                            <template v-if=\"$slots.itemtoggleicon\" #toggleicon=\"iconSlotProps\">\n                                <slot name=\"itemtoggleicon\" :node=\"iconSlotProps.node\" :expanded=\"iconSlotProps.expanded\" :class=\"iconSlotProps.class\" />\n                            </template>\n                            <!--TODO: itemtogglericon deprecated since v4.0-->\n                            <template v-else-if=\"$slots.itemtogglericon\" #togglericon=\"iconSlotProps\">\n                                <slot name=\"itemtogglericon\" :node=\"iconSlotProps.node\" :expanded=\"iconSlotProps.expanded\" :class=\"iconSlotProps.class\" />\n                            </template>\n                            <template v-if=\"$slots.itemcheckboxicon\" #checkboxicon=\"iconSlotProps\">\n                                <slot name=\"itemcheckboxicon\" :checked=\"iconSlotProps.checked\" :partialChecked=\"iconSlotProps.partialChecked\" :class=\"iconSlotProps.class\" />\n                            </template>\n                        </TSTree>\n                        <div v-if=\"emptyOptions && !loading\" :class=\"cx('emptyMessage')\" v-bind=\"ptm('emptyMessage')\">\n                            <slot name=\"empty\">{{ emptyMessageText }}</slot>\n                        </div>\n                    </div>\n                    <slot name=\"footer\" :value=\"d_value\" :options=\"options\"></slot>\n                    <span\n                        ref=\"lastHiddenFocusableElementOnOverlay\"\n                        role=\"presentation\"\n                        class=\"p-hidden-accessible p-hidden-focusable\"\n                        :tabindex=\"0\"\n                        @focus=\"onLastHiddenFocus\"\n                        v-bind=\"ptm('hiddenLastFocusableEl')\"\n                        :data-p-hidden-accessible=\"true\"\n                        :data-p-hidden-focusable=\"true\"\n                    ></span>\n                </div>\n            </transition>\n        </Portal>\n    </div>\n</template>\n\n<script>\nimport { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';\nimport { isEmpty, isNotEmpty } from '@primeuix/utils/object';\nimport { ZIndex } from '@primeuix/utils/zindex';\nimport { ConnectedOverlayScrollHandler } from '@primevue/core/utils';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport TimesIcon from '@primevue/icons/times';\nimport Chip from 'primevue/chip';\nimport OverlayEventBus from 'primevue/overlayeventbus';\nimport Portal from 'primevue/portal';\nimport Ripple from 'primevue/ripple';\nimport Tree from 'primevue/tree';\nimport BaseTreeSelect from './BaseTreeSelect.vue';\n\nexport default {\n    name: 'TreeSelect',\n    extends: BaseTreeSelect,\n    inheritAttrs: false,\n    emits: ['before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],\n    inject: {\n        $pcFluid: { default: null }\n    },\n    data() {\n        return {\n            focused: false,\n            overlayVisible: false,\n            d_expandedKeys: this.expandedKeys || {}\n        };\n    },\n    watch: {\n        modelValue: {\n            handler: function () {\n                if (!this.selfChange) {\n                    this.updateTreeState();\n                }\n\n                this.selfChange = false;\n            },\n            immediate: true\n        },\n        options() {\n            this.updateTreeState();\n        },\n        expandedKeys(value) {\n            this.d_expandedKeys = value;\n        }\n    },\n    outsideClickListener: null,\n    resizeListener: null,\n    scrollHandler: null,\n    overlay: null,\n    selfChange: false,\n    selfClick: false,\n    beforeUnmount() {\n        this.unbindOutsideClickListener();\n        this.unbindResizeListener();\n\n        if (this.scrollHandler) {\n            this.scrollHandler.destroy();\n            this.scrollHandler = null;\n        }\n\n        if (this.overlay) {\n            ZIndex.clear(this.overlay);\n            this.overlay = null;\n        }\n    },\n    mounted() {\n        this.updateTreeState();\n    },\n    methods: {\n        show() {\n            this.$emit('before-show');\n            this.overlayVisible = true;\n        },\n        hide() {\n            this.$emit('before-hide');\n            this.overlayVisible = false;\n            this.$refs.focusInput.focus();\n        },\n        onFocus(event) {\n            this.focused = true;\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.focused = false;\n            this.$emit('blur', event);\n            this.formField.onBlur?.();\n        },\n        onClick(event) {\n            if (this.disabled) {\n                return;\n            }\n\n            if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section=\"clearicon\"]')) {\n                return;\n            } else if (!this.overlay || !this.overlay.contains(event.target)) {\n                if (this.overlayVisible) this.hide();\n                else this.show();\n\n                focus(this.$refs.focusInput);\n            }\n        },\n        onClearClick() {\n            this.onSelectionChange(null);\n        },\n        onSelectionChange(keys) {\n            this.selfChange = true;\n            this.writeValue(keys);\n            this.$emit('change', keys);\n        },\n        onNodeSelect(node) {\n            this.$emit('node-select', node);\n\n            if (this.selectionMode === 'single') {\n                this.hide();\n            }\n        },\n        onNodeUnselect(node) {\n            this.$emit('node-unselect', node);\n        },\n        onNodeToggle(keys) {\n            this.d_expandedKeys = keys;\n\n            this.$emit('update:expandedKeys', this.d_expandedKeys);\n        },\n        getSelectedItemsLabel() {\n            let pattern = /{(.*?)}/;\n            const selectedItemsLabel = this.selectedItemsLabel || this.$primevue.config.locale.selectionMessage;\n\n            if (pattern.test(selectedItemsLabel)) {\n                return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], Object.keys(this.d_value).length + '');\n            }\n\n            return selectedItemsLabel;\n        },\n        onFirstHiddenFocus(event) {\n            const focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable=\"true\"])') : this.$refs.focusInput;\n\n            focus(focusableEl);\n        },\n        onLastHiddenFocus(event) {\n            const focusableEl = event.relatedTarget === this.$refs.focusInput ? getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable=\"true\"])') : this.$refs.focusInput;\n\n            focus(focusableEl);\n        },\n        onKeyDown(event) {\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'Space':\n                case 'Enter':\n                case 'NumpadEnter':\n                    this.onEnterKey(event);\n                    break;\n\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                case 'Tab':\n                    this.onTabKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            if (this.overlayVisible) return;\n\n            this.show();\n\n            this.$nextTick(() => {\n                const treeNodeEl = find(this.$refs.tree.$el, '[data-pc-section=\"treeitem\"]');\n                const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');\n\n                focus(focusedElement);\n            });\n\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (this.overlayVisible) {\n                this.hide();\n            } else {\n                this.onArrowDownKey(event);\n            }\n\n            event.preventDefault();\n        },\n        onEscapeKey(event) {\n            if (this.overlayVisible) {\n                this.hide();\n                event.preventDefault();\n            }\n        },\n        onTabKey(event, pressedInInputText = false) {\n            if (!pressedInInputText) {\n                if (this.overlayVisible && this.hasFocusableElements()) {\n                    focus(this.$refs.firstHiddenFocusableElementOnOverlay);\n\n                    event.preventDefault();\n                }\n            }\n        },\n        hasFocusableElements() {\n            return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable=\"true\"])').length > 0;\n        },\n        onOverlayEnter(el) {\n            ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);\n\n            addStyle(el, { position: 'absolute', top: '0' });\n            this.alignOverlay();\n            this.focus();\n        },\n        onOverlayAfterEnter() {\n            this.bindOutsideClickListener();\n            this.bindScrollListener();\n            this.bindResizeListener();\n            this.scrollValueInView();\n            this.$emit('show');\n        },\n        onOverlayLeave() {\n            this.unbindOutsideClickListener();\n            this.unbindScrollListener();\n            this.unbindResizeListener();\n            this.$emit('hide');\n            this.overlay = null;\n        },\n        onOverlayAfterLeave(el) {\n            ZIndex.clear(el);\n        },\n        focus() {\n            let focusableElements = getFocusableElements(this.overlay);\n\n            if (focusableElements && focusableElements.length > 0) {\n                focusableElements[0].focus();\n            }\n        },\n        alignOverlay() {\n            if (this.appendTo === 'self') {\n                relativePosition(this.overlay, this.$el);\n            } else {\n                this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';\n                absolutePosition(this.overlay, this.$el);\n            }\n        },\n        bindOutsideClickListener() {\n            if (!this.outsideClickListener) {\n                this.outsideClickListener = (event) => {\n                    if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event)) {\n                        this.hide();\n                    }\n\n                    this.selfClick = false;\n                };\n\n                document.addEventListener('click', this.outsideClickListener, true);\n            }\n        },\n        unbindOutsideClickListener() {\n            if (this.outsideClickListener) {\n                document.removeEventListener('click', this.outsideClickListener, true);\n                this.outsideClickListener = null;\n            }\n        },\n        bindScrollListener() {\n            if (!this.scrollHandler) {\n                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {\n                    if (this.overlayVisible) {\n                        this.hide();\n                    }\n                });\n            }\n\n            this.scrollHandler.bindScrollListener();\n        },\n        unbindScrollListener() {\n            if (this.scrollHandler) {\n                this.scrollHandler.unbindScrollListener();\n            }\n        },\n        bindResizeListener() {\n            if (!this.resizeListener) {\n                this.resizeListener = () => {\n                    if (this.overlayVisible && !isTouchDevice()) {\n                        this.hide();\n                    }\n                };\n\n                window.addEventListener('resize', this.resizeListener);\n            }\n        },\n        unbindResizeListener() {\n            if (this.resizeListener) {\n                window.removeEventListener('resize', this.resizeListener);\n                this.resizeListener = null;\n            }\n        },\n        isOutsideClicked(event) {\n            return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));\n        },\n        overlayRef(el) {\n            this.overlay = el;\n        },\n        onOverlayClick(event) {\n            OverlayEventBus.emit('overlay-click', {\n                originalEvent: event,\n                target: this.$el\n            });\n\n            this.selfClick = true;\n        },\n        onOverlayKeydown(event) {\n            if (event.code === 'Escape') this.hide();\n        },\n        fillNodeMap(node, nodeMap) {\n            nodeMap[node.key] = node;\n\n            if (node.children?.length) {\n                node.children.forEach((children) => this.fillNodeMap(children, nodeMap));\n            }\n        },\n        isSelected(node, keys) {\n            return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];\n        },\n        updateTreeState() {\n            let keys = { ...this.d_value };\n\n            if (keys && this.options) {\n                this.updateTreeBranchState(null, null, keys);\n            }\n        },\n        updateTreeBranchState(node, path, keys) {\n            if (node) {\n                if (this.isSelected(node, keys)) {\n                    this.expandPath(path);\n                    delete keys[node.key];\n                }\n\n                if (Object.keys(keys).length && node.children) {\n                    for (let childNode of node.children) {\n                        path.push(node.key);\n                        this.updateTreeBranchState(childNode, path, keys);\n                    }\n                }\n            } else {\n                for (let childNode of this.options) {\n                    this.updateTreeBranchState(childNode, [], keys);\n                }\n            }\n        },\n        expandPath(path) {\n            if (path.length > 0) {\n                for (let key of path) {\n                    this.d_expandedKeys[key] = true;\n                }\n\n                this.d_expandedKeys = { ...this.d_expandedKeys };\n                this.$emit('update:expandedKeys', this.d_expandedKeys);\n            }\n        },\n        scrollValueInView() {\n            if (this.overlay) {\n                let selectedItem = findSingle(this.overlay, '[data-p-selected=\"true\"]');\n\n                if (selectedItem) {\n                    selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });\n                }\n            }\n        }\n    },\n    computed: {\n        nodeMap() {\n            const nodeMap = {};\n\n            this.options?.forEach((node) => this.fillNodeMap(node, nodeMap));\n\n            return nodeMap;\n        },\n        selectedNodes() {\n            let selectedNodes = [];\n\n            if (this.d_value && this.options) {\n                Object.keys(this.d_value).forEach((key) => {\n                    const node = this.nodeMap[key];\n\n                    if (this.isSelected(node, this.d_value)) {\n                        selectedNodes.push(node);\n                    }\n                });\n            }\n\n            return selectedNodes;\n        },\n        label() {\n            let value = this.selectedNodes;\n            let label;\n\n            if (value.length) {\n                if (isNotEmpty(this.maxSelectedLabels) && value.length > this.maxSelectedLabels) {\n                    label = this.getSelectedItemsLabel();\n                } else {\n                    label = value.map((node) => node.label).join(', ');\n                }\n            } else {\n                label = this.placeholder;\n            }\n\n            return label;\n        },\n        chipSelectedItems() {\n            return isNotEmpty(this.maxSelectedLabels) && this.d_value && Object.keys(this.d_value).length > this.maxSelectedLabels;\n        },\n        emptyMessageText() {\n            return this.emptyMessage || this.$primevue.config.locale.emptyMessage;\n        },\n        emptyValue() {\n            return !this.$filled;\n        },\n        emptyOptions() {\n            return !this.options || this.options.length === 0;\n        },\n        listId() {\n            return this.$id + '_list';\n        },\n        hasFluid() {\n            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;\n        },\n        isClearIconVisible() {\n            return this.showClear && this.d_value != null && isNotEmpty(this.options);\n        }\n    },\n    components: {\n        TSTree: Tree,\n        Chip,\n        Portal,\n        ChevronDownIcon,\n        TimesIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseInput","props","options","Array","scrollHeight","type","String","placeholder","tabindex","Number","selectionMode","selectedItemsLabel","maxSelectedLabels","appendTo","Object","emptyMessage","display","metaKeySelection","Boolean","loading","loadingIcon","undefined","loadingMode","showClear","clearIcon","filter","filterBy","Function","