primevue/tree/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/tree/BaseTree.vue","../../src/tree/TreeNode.vue","../../src/tree/TreeNode.vue?vue&type=template&id=312bfd2b&lang.js","../../src/tree/Tree.vue","../../src/tree/Tree.vue?vue&type=template&id=02fa5d36&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport TreeStyle from 'primevue/tree/style';\n\nexport default {\n    name: 'BaseTree',\n    extends: BaseComponent,\n    props: {\n        value: {\n            type: null,\n            default: null\n        },\n        expandedKeys: {\n            type: null,\n            default: null\n        },\n        selectionKeys: {\n            type: null,\n            default: null\n        },\n        selectionMode: {\n            type: String,\n            default: null\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        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        highlightOnSelect: {\n            type: Boolean,\n            default: false\n        },\n        scrollHeight: {\n            type: String,\n            default: null\n        },\n        level: {\n            type: Number,\n            default: 0\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: TreeStyle,\n    provide() {\n        return {\n            $pcTree: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <li\n        ref=\"currentNode\"\n        :class=\"cx('node')\"\n        role=\"treeitem\"\n        :aria-label=\"label(node)\"\n        :aria-selected=\"ariaSelected\"\n        :aria-expanded=\"expanded\"\n        :aria-setsize=\"node.children ? node.children.length : 0\"\n        :aria-posinset=\"index + 1\"\n        :aria-level=\"level\"\n        :aria-checked=\"ariaChecked\"\n        :tabindex=\"index === 0 ? 0 : -1\"\n        @keydown=\"onKeyDown\"\n        v-bind=\"getPTOptions('node')\"\n    >\n        <div :class=\"cx('nodeContent')\" @click=\"onClick\" @touchend=\"onTouchEnd\" :style=\"node.style\" v-bind=\"getPTOptions('nodeContent')\" :data-p-selected=\"checkboxMode ? checked : selected\" :data-p-selectable=\"selectable\">\n            <button v-ripple type=\"button\" :class=\"cx('nodeToggleButton')\" @click=\"toggle\" tabindex=\"-1\" :data-p-leaf=\"leaf\" v-bind=\"getPTOptions('nodeToggleButton')\">\n                <template v-if=\"node.loading && loadingMode === 'icon'\">\n                    <!-- TODO: nodetogglericon deprecated since v4.0-->\n                    <component v-if=\"templates['nodetoggleicon'] || templates['nodetogglericon']\" :is=\"templates['nodetoggleicon'] || templates['nodetogglericon']\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <SpinnerIcon v-else spin :class=\"cx('nodeToggleIcon')\" v-bind=\"getPTOptions('nodeToggleIcon')\" />\n                </template>\n                <template v-else>\n                    <!-- TODO: togglericon deprecated since v4.0-->\n                    <component v-if=\"templates['nodetoggleicon'] || templates['togglericon']\" :is=\"templates['nodetoggleicon'] || templates['togglericon']\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <component v-else-if=\"expanded\" :is=\"node.expandedIcon ? 'span' : 'ChevronDownIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getPTOptions('nodeToggleIcon')\" />\n                    <component v-else :is=\"node.collapsedIcon ? 'span' : 'ChevronRightIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getPTOptions('nodeToggleIcon')\" />\n                </template>\n            </button>\n            <Checkbox\n                v-if=\"checkboxMode\"\n                :defaultValue=\"checked\"\n                :binary=\"true\"\n                :indeterminate=\"partialChecked\"\n                :class=\"cx('nodeCheckbox')\"\n                :tabindex=\"-1\"\n                :unstyled=\"unstyled\"\n                :pt=\"getPTOptions('pcNodeCheckbox')\"\n                :data-p-partialchecked=\"partialChecked\"\n            >\n                <template #icon=\"slotProps\">\n                    <component v-if=\"templates['checkboxicon']\" :is=\"templates['checkboxicon']\" :checked=\"slotProps.checked\" :partialChecked=\"partialChecked\" :class=\"slotProps.class\" />\n                </template>\n            </Checkbox>\n            <component v-if=\"templates['nodeicon']\" :is=\"templates['nodeicon']\" :node=\"node\" :class=\"[cx('nodeIcon')]\" v-bind=\"getPTOptions('nodeIcon')\"></component>\n            <span v-else :class=\"[cx('nodeIcon'), node.icon]\" v-bind=\"getPTOptions('nodeIcon')\"></span>\n            <span :class=\"cx('nodeLabel')\" v-bind=\"getPTOptions('nodeLabel')\" @keydown.stop>\n                <component v-if=\"templates[node.type] || templates['default']\" :is=\"templates[node.type] || templates['default']\" :node=\"node\" :expanded=\"expanded\" :selected=\"checkboxMode ? checked : selected\" />\n                <template v-else>{{ label(node) }}</template>\n            </span>\n        </div>\n        <ul v-if=\"hasChildren && expanded\" :class=\"cx('nodeChildren')\" role=\"group\" v-bind=\"ptm('nodeChildren')\">\n            <TreeNode\n                v-for=\"childNode of node.children\"\n                :key=\"childNode.key\"\n                :node=\"childNode\"\n                :templates=\"templates\"\n                :level=\"level + 1\"\n                :loadingMode=\"loadingMode\"\n                :expandedKeys=\"expandedKeys\"\n                @node-toggle=\"onChildNodeToggle\"\n                @node-click=\"onChildNodeClick\"\n                :selectionMode=\"selectionMode\"\n                :selectionKeys=\"selectionKeys\"\n                @checkbox-change=\"propagateUp\"\n                :unstyled=\"unstyled\"\n                :pt=\"pt\"\n            />\n        </ul>\n    </li>\n</template>\n\n<script>\nimport { find, findSingle, getAttribute } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport CheckIcon from '@primevue/icons/check';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport MinusIcon from '@primevue/icons/minus';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport Checkbox from 'primevue/checkbox';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'TreeNode',\n    hostName: 'Tree',\n    extends: BaseComponent,\n    emits: ['node-toggle', 'node-click', 'checkbox-change'],\n    props: {\n        node: {\n            type: null,\n            default: null\n        },\n        expandedKeys: {\n            type: null,\n            default: null\n        },\n        loadingMode: {\n            type: String,\n            default: 'mask'\n        },\n        selectionKeys: {\n            type: null,\n            default: null\n        },\n        selectionMode: {\n            type: String,\n            default: null\n        },\n        templates: {\n            type: null,\n            default: null\n        },\n        level: {\n            type: Number,\n            default: null\n        },\n        index: null\n    },\n    nodeTouched: false,\n    toggleClicked: false,\n    mounted() {\n        this.setAllNodesTabIndexes();\n    },\n    methods: {\n        toggle() {\n            this.$emit('node-toggle', this.node);\n            this.toggleClicked = true;\n        },\n        label(node) {\n            return typeof node.label === 'function' ? node.label() : node.label;\n        },\n        onChildNodeToggle(node) {\n            this.$emit('node-toggle', node);\n        },\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    node: this.node,\n                    index: this.index,\n                    expanded: this.expanded,\n                    selected: this.selected,\n                    checked: this.checked,\n                    partialChecked: this.partialChecked,\n                    leaf: this.leaf\n                }\n            });\n        },\n        onClick(event) {\n            if (this.toggleClicked || getAttribute(event.target, '[data-pc-section=\"nodetogglebutton\"]') || getAttribute(event.target.parentElement, '[data-pc-section=\"nodetogglebutton\"]')) {\n                this.toggleClicked = false;\n\n                return;\n            }\n\n            if (this.isCheckboxSelectionMode()) {\n                if (this.node.selectable != false) {\n                    this.toggleCheckbox();\n                }\n            } else {\n                this.$emit('node-click', {\n                    originalEvent: event,\n                    nodeTouched: this.nodeTouched,\n                    node: this.node\n                });\n            }\n\n            this.nodeTouched = false;\n        },\n        onChildNodeClick(event) {\n            this.$emit('node-click', event);\n        },\n        onTouchEnd() {\n            this.nodeTouched = true;\n        },\n        onKeyDown(event) {\n            if (!this.isSameNode(event)) return;\n\n            switch (event.code) {\n                case 'Tab':\n                    this.onTabKey(event);\n\n                    break;\n\n                case 'ArrowDown':\n                    this.onArrowDown(event);\n\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUp(event);\n\n                    break;\n\n                case 'ArrowRight':\n                    this.onArrowRight(event);\n\n                    break;\n\n                case 'ArrowLeft':\n                    this.onArrowLeft(event);\n\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDown(event) {\n            const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role=\"treeitem\"]') : event.target;\n            const listElement = nodeElement.children[1];\n\n            if (listElement) {\n                this.focusRowChange(nodeElement, listElement.children[0]);\n            } else {\n                if (nodeElement.nextElementSibling) {\n                    this.focusRowChange(nodeElement, nodeElement.nextElementSibling);\n                } else {\n                    let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);\n\n                    if (nextSiblingAncestor) {\n                        this.focusRowChange(nodeElement, nextSiblingAncestor);\n                    }\n                }\n            }\n\n            event.preventDefault();\n        },\n        onArrowUp(event) {\n            const nodeElement = event.target;\n\n            if (nodeElement.previousElementSibling) {\n                this.focusRowChange(nodeElement, nodeElement.previousElementSibling, this.findLastVisibleDescendant(nodeElement.previousElementSibling));\n            } else {\n                let parentNodeElement = this.getParentNodeElement(nodeElement);\n\n                if (parentNodeElement) {\n                    this.focusRowChange(nodeElement, parentNodeElement);\n                }\n            }\n\n            event.preventDefault();\n        },\n        onArrowRight(event) {\n            if (this.leaf || this.expanded) return;\n\n            event.currentTarget.tabIndex = -1;\n\n            this.$emit('node-toggle', this.node);\n            this.$nextTick(() => {\n                this.onArrowDown(event);\n            });\n        },\n        onArrowLeft(event) {\n            const togglerElement = findSingle(event.currentTarget, '[data-pc-section=\"nodetogglebutton\"]');\n\n            if (this.level === 0 && !this.expanded) {\n                return false;\n            }\n\n            if (this.expanded && !this.leaf) {\n                togglerElement.click();\n\n                return false;\n            }\n\n            const target = this.findBeforeClickableNode(event.currentTarget);\n\n            if (target) {\n                this.focusRowChange(event.currentTarget, target);\n            }\n        },\n        onEnterKey(event) {\n            this.setTabIndexForSelectionMode(event, this.nodeTouched);\n            this.onClick(event);\n\n            event.preventDefault();\n        },\n        onTabKey() {\n            this.setAllNodesTabIndexes();\n        },\n        setAllNodesTabIndexes() {\n            const nodes = find(this.$refs.currentNode.closest('[data-pc-section=\"rootchildren\"]'), '[role=\"treeitem\"]');\n\n            const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');\n\n            [...nodes].forEach((node) => {\n                node.tabIndex = -1;\n            });\n\n            if (hasSelectedNode) {\n                const selectedNodes = [...nodes].filter((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');\n\n                selectedNodes[0].tabIndex = 0;\n\n                return;\n            }\n\n            [...nodes][0].tabIndex = 0;\n        },\n        setTabIndexForSelectionMode(event, nodeTouched) {\n            if (this.selectionMode !== null) {\n                const elements = [...find(this.$refs.currentNode.parentElement, '[role=\"treeitem\"]')];\n\n                event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;\n\n                if (elements.every((element) => element.tabIndex === -1)) {\n                    elements[0].tabIndex = 0;\n                }\n            }\n        },\n        focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {\n            firstFocusableRow.tabIndex = '-1';\n            currentFocusedRow.tabIndex = '0';\n\n            this.focusNode(lastVisibleDescendant || currentFocusedRow);\n        },\n        findBeforeClickableNode(node) {\n            const parentListElement = node.closest('ul').closest('li');\n\n            if (parentListElement) {\n                const prevNodeButton = findSingle(parentListElement, 'button');\n\n                if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {\n                    return parentListElement;\n                }\n\n                return this.findBeforeClickableNode(node.previousElementSibling);\n            }\n\n            return null;\n        },\n        toggleCheckbox() {\n            let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};\n            const _check = !this.checked;\n\n            this.propagateDown(this.node, _check, _selectionKeys);\n\n            this.$emit('checkbox-change', {\n                node: this.node,\n                check: _check,\n                selectionKeys: _selectionKeys\n            });\n        },\n        propagateDown(node, check, selectionKeys) {\n            if (check && node.selectable != false) selectionKeys[node.key] = { checked: true, partialChecked: false };\n            else delete selectionKeys[node.key];\n\n            if (node.children && node.children.length) {\n                for (let child of node.children) {\n                    this.propagateDown(child, check, selectionKeys);\n                }\n            }\n        },\n        propagateUp(event) {\n            let check = event.check;\n            let _selectionKeys = { ...event.selectionKeys };\n            let checkedChildCount = 0;\n            let childPartialSelected = false;\n\n            for (let child of this.node.children) {\n                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;\n                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;\n            }\n\n            if (check && checkedChildCount === this.node.children.length) {\n                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };\n            } else {\n                if (!check) {\n                    delete _selectionKeys[this.node.key];\n                }\n\n                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };\n                else delete _selectionKeys[this.node.key];\n            }\n\n            this.$emit('checkbox-change', {\n                node: event.node,\n                check: event.check,\n                selectionKeys: _selectionKeys\n            });\n        },\n        onChildCheckboxChange(event) {\n            this.$emit('checkbox-change', event);\n        },\n        findNextSiblingOfAncestor(nodeElement) {\n            let parentNodeElement = this.getParentNodeElement(nodeElement);\n\n            if (parentNodeElement) {\n                if (parentNodeElement.nextElementSibling) return parentNodeElement.nextElementSibling;\n                else return this.findNextSiblingOfAncestor(parentNodeElement);\n            } else {\n                return null;\n            }\n        },\n        findLastVisibleDescendant(nodeElement) {\n            const childrenListElement = nodeElement.children[1];\n\n            if (childrenListElement) {\n                const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];\n\n                return this.findLastVisibleDescendant(lastChildElement);\n            } else {\n                return nodeElement;\n            }\n        },\n        getParentNodeElement(nodeElement) {\n            const parentNodeElement = nodeElement.parentElement.parentElement;\n\n            return getAttribute(parentNodeElement, 'role') === 'treeitem' ? parentNodeElement : null;\n        },\n        focusNode(element) {\n            element.focus();\n        },\n        isCheckboxSelectionMode() {\n            return this.selectionMode === 'checkbox';\n        },\n        isSameNode(event) {\n            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role=\"treeitem\"]')));\n        }\n    },\n    computed: {\n        hasChildren() {\n            return this.node.children && this.node.children.length > 0;\n        },\n        expanded() {\n            return this.expandedKeys && this.expandedKeys[this.node.key] === true;\n        },\n        leaf() {\n            return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);\n        },\n        selectable() {\n            return this.node.selectable === false ? false : this.selectionMode != null;\n        },\n        selected() {\n            return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;\n        },\n        checkboxMode() {\n            return this.selectionMode === 'checkbox' && this.node.selectable !== false;\n        },\n        checked() {\n            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;\n        },\n        partialChecked() {\n            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;\n        },\n        ariaChecked() {\n            return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : undefined;\n        },\n        ariaSelected() {\n            return this.checkboxMode ? this.checked : undefined;\n        }\n    },\n    components: {\n        Checkbox,\n        ChevronDownIcon,\n        ChevronRightIcon,\n        CheckIcon,\n        MinusIcon,\n        SpinnerIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <li\n        ref=\"currentNode\"\n        :class=\"cx('node')\"\n        role=\"treeitem\"\n        :aria-label=\"label(node)\"\n        :aria-selected=\"ariaSelected\"\n        :aria-expanded=\"expanded\"\n        :aria-setsize=\"node.children ? node.children.length : 0\"\n        :aria-posinset=\"index + 1\"\n        :aria-level=\"level\"\n        :aria-checked=\"ariaChecked\"\n        :tabindex=\"index === 0 ? 0 : -1\"\n        @keydown=\"onKeyDown\"\n        v-bind=\"getPTOptions('node')\"\n    >\n        <div :class=\"cx('nodeContent')\" @click=\"onClick\" @touchend=\"onTouchEnd\" :style=\"node.style\" v-bind=\"getPTOptions('nodeContent')\" :data-p-selected=\"checkboxMode ? checked : selected\" :data-p-selectable=\"selectable\">\n            <button v-ripple type=\"button\" :class=\"cx('nodeToggleButton')\" @click=\"toggle\" tabindex=\"-1\" :data-p-leaf=\"leaf\" v-bind=\"getPTOptions('nodeToggleButton')\">\n                <template v-if=\"node.loading && loadingMode === 'icon'\">\n                    <!-- TODO: nodetogglericon deprecated since v4.0-->\n                    <component v-if=\"templates['nodetoggleicon'] || templates['nodetogglericon']\" :is=\"templates['nodetoggleicon'] || templates['nodetogglericon']\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <SpinnerIcon v-else spin :class=\"cx('nodeToggleIcon')\" v-bind=\"getPTOptions('nodeToggleIcon')\" />\n                </template>\n                <template v-else>\n                    <!-- TODO: togglericon deprecated since v4.0-->\n                    <component v-if=\"templates['nodetoggleicon'] || templates['togglericon']\" :is=\"templates['nodetoggleicon'] || templates['togglericon']\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <component v-else-if=\"expanded\" :is=\"node.expandedIcon ? 'span' : 'ChevronDownIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getPTOptions('nodeToggleIcon')\" />\n                    <component v-else :is=\"node.collapsedIcon ? 'span' : 'ChevronRightIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getPTOptions('nodeToggleIcon')\" />\n                </template>\n            </button>\n            <Checkbox\n                v-if=\"checkboxMode\"\n                :defaultValue=\"checked\"\n                :binary=\"true\"\n                :indeterminate=\"partialChecked\"\n                :class=\"cx('nodeCheckbox')\"\n                :tabindex=\"-1\"\n                :unstyled=\"unstyled\"\n                :pt=\"getPTOptions('pcNodeCheckbox')\"\n                :data-p-partialchecked=\"partialChecked\"\n            >\n                <template #icon=\"slotProps\">\n                    <component v-if=\"templates['checkboxicon']\" :is=\"templates['checkboxicon']\" :checked=\"slotProps.checked\" :partialChecked=\"partialChecked\" :class=\"slotProps.class\" />\n                </template>\n            </Checkbox>\n            <component v-if=\"templates['nodeicon']\" :is=\"templates['nodeicon']\" :node=\"node\" :class=\"[cx('nodeIcon')]\" v-bind=\"getPTOptions('nodeIcon')\"></component>\n            <span v-else :class=\"[cx('nodeIcon'), node.icon]\" v-bind=\"getPTOptions('nodeIcon')\"></span>\n            <span :class=\"cx('nodeLabel')\" v-bind=\"getPTOptions('nodeLabel')\" @keydown.stop>\n                <component v-if=\"templates[node.type] || templates['default']\" :is=\"templates[node.type] || templates['default']\" :node=\"node\" :expanded=\"expanded\" :selected=\"checkboxMode ? checked : selected\" />\n                <template v-else>{{ label(node) }}</template>\n            </span>\n        </div>\n        <ul v-if=\"hasChildren && expanded\" :class=\"cx('nodeChildren')\" role=\"group\" v-bind=\"ptm('nodeChildren')\">\n            <TreeNode\n                v-for=\"childNode of node.children\"\n                :key=\"childNode.key\"\n                :node=\"childNode\"\n                :templates=\"templates\"\n                :level=\"level + 1\"\n                :loadingMode=\"loadingMode\"\n                :expandedKeys=\"expandedKeys\"\n                @node-toggle=\"onChildNodeToggle\"\n                @node-click=\"onChildNodeClick\"\n                :selectionMode=\"selectionMode\"\n                :selectionKeys=\"selectionKeys\"\n                @checkbox-change=\"propagateUp\"\n                :unstyled=\"unstyled\"\n                :pt=\"pt\"\n            />\n        </ul>\n    </li>\n</template>\n\n<script>\nimport { find, findSingle, getAttribute } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport CheckIcon from '@primevue/icons/check';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport MinusIcon from '@primevue/icons/minus';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport Checkbox from 'primevue/checkbox';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'TreeNode',\n    hostName: 'Tree',\n    extends: BaseComponent,\n    emits: ['node-toggle', 'node-click', 'checkbox-change'],\n    props: {\n        node: {\n            type: null,\n            default: null\n        },\n        expandedKeys: {\n            type: null,\n            default: null\n        },\n        loadingMode: {\n            type: String,\n            default: 'mask'\n        },\n        selectionKeys: {\n            type: null,\n            default: null\n        },\n        selectionMode: {\n            type: String,\n            default: null\n        },\n        templates: {\n            type: null,\n            default: null\n        },\n        level: {\n            type: Number,\n            default: null\n        },\n        index: null\n    },\n    nodeTouched: false,\n    toggleClicked: false,\n    mounted() {\n        this.setAllNodesTabIndexes();\n    },\n    methods: {\n        toggle() {\n            this.$emit('node-toggle', this.node);\n            this.toggleClicked = true;\n        },\n        label(node) {\n            return typeof node.label === 'function' ? node.label() : node.label;\n        },\n        onChildNodeToggle(node) {\n            this.$emit('node-toggle', node);\n        },\n        getPTOptions(key) {\n            return this.ptm(key, {\n                context: {\n                    node: this.node,\n                    index: this.index,\n                    expanded: this.expanded,\n                    selected: this.selected,\n                    checked: this.checked,\n                    partialChecked: this.partialChecked,\n                    leaf: this.leaf\n                }\n            });\n        },\n        onClick(event) {\n            if (this.toggleClicked || getAttribute(event.target, '[data-pc-section=\"nodetogglebutton\"]') || getAttribute(event.target.parentElement, '[data-pc-section=\"nodetogglebutton\"]')) {\n                this.toggleClicked = false;\n\n                return;\n            }\n\n            if (this.isCheckboxSelectionMode()) {\n                if (this.node.selectable != false) {\n                    this.toggleCheckbox();\n                }\n            } else {\n                this.$emit('node-click', {\n                    originalEvent: event,\n                    nodeTouched: this.nodeTouched,\n                    node: this.node\n                });\n            }\n\n            this.nodeTouched = false;\n        },\n        onChildNodeClick(event) {\n            this.$emit('node-click', event);\n        },\n        onTouchEnd() {\n            this.nodeTouched = true;\n        },\n        onKeyDown(event) {\n            if (!this.isSameNode(event)) return;\n\n            switch (event.code) {\n                case 'Tab':\n                    this.onTabKey(event);\n\n                    break;\n\n                case 'ArrowDown':\n                    this.onArrowDown(event);\n\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUp(event);\n\n                    break;\n\n                case 'ArrowRight':\n                    this.onArrowRight(event);\n\n                    break;\n\n                case 'ArrowLeft':\n                    this.onArrowLeft(event);\n\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDown(event) {\n            const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role=\"treeitem\"]') : event.target;\n            const listElement = nodeElement.children[1];\n\n            if (listElement) {\n                this.focusRowChange(nodeElement, listElement.children[0]);\n            } else {\n                if (nodeElement.nextElementSibling) {\n                    this.focusRowChange(nodeElement, nodeElement.nextElementSibling);\n                } else {\n                    let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);\n\n                    if (nextSiblingAncestor) {\n                        this.focusRowChange(nodeElement, nextSiblingAncestor);\n                    }\n                }\n            }\n\n            event.preventDefault();\n        },\n        onArrowUp(event) {\n            const nodeElement = event.target;\n\n            if (nodeElement.previousElementSibling) {\n                this.focusRowChange(nodeElement, nodeElement.previousElementSibling, this.findLastVisibleDescendant(nodeElement.previousElementSibling));\n            } else {\n                let parentNodeElement = this.getParentNodeElement(nodeElement);\n\n                if (parentNodeElement) {\n                    this.focusRowChange(nodeElement, parentNodeElement);\n                }\n            }\n\n            event.preventDefault();\n        },\n        onArrowRight(event) {\n            if (this.leaf || this.expanded) return;\n\n            event.currentTarget.tabIndex = -1;\n\n            this.$emit('node-toggle', this.node);\n            this.$nextTick(() => {\n                this.onArrowDown(event);\n            });\n        },\n        onArrowLeft(event) {\n            const togglerElement = findSingle(event.currentTarget, '[data-pc-section=\"nodetogglebutton\"]');\n\n            if (this.level === 0 && !this.expanded) {\n                return false;\n            }\n\n            if (this.expanded && !this.leaf) {\n                togglerElement.click();\n\n                return false;\n            }\n\n            const target = this.findBeforeClickableNode(event.currentTarget);\n\n            if (target) {\n                this.focusRowChange(event.currentTarget, target);\n            }\n        },\n        onEnterKey(event) {\n            this.setTabIndexForSelectionMode(event, this.nodeTouched);\n            this.onClick(event);\n\n            event.preventDefault();\n        },\n        onTabKey() {\n            this.setAllNodesTabIndexes();\n        },\n        setAllNodesTabIndexes() {\n            const nodes = find(this.$refs.currentNode.closest('[data-pc-section=\"rootchildren\"]'), '[role=\"treeitem\"]');\n\n            const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');\n\n            [...nodes].forEach((node) => {\n                node.tabIndex = -1;\n            });\n\n            if (hasSelectedNode) {\n                const selectedNodes = [...nodes].filter((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');\n\n                selectedNodes[0].tabIndex = 0;\n\n                return;\n            }\n\n            [...nodes][0].tabIndex = 0;\n        },\n        setTabIndexForSelectionMode(event, nodeTouched) {\n            if (this.selectionMode !== null) {\n                const elements = [...find(this.$refs.currentNode.parentElement, '[role=\"treeitem\"]')];\n\n                event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;\n\n                if (elements.every((element) => element.tabIndex === -1)) {\n                    elements[0].tabIndex = 0;\n                }\n            }\n        },\n        focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {\n            firstFocusableRow.tabIndex = '-1';\n            currentFocusedRow.tabIndex = '0';\n\n            this.focusNode(lastVisibleDescendant || currentFocusedRow);\n        },\n        findBeforeClickableNode(node) {\n            const parentListElement = node.closest('ul').closest('li');\n\n            if (parentListElement) {\n                const prevNodeButton = findSingle(parentListElement, 'button');\n\n                if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {\n                    return parentListElement;\n                }\n\n                return this.findBeforeClickableNode(node.previousElementSibling);\n            }\n\n            return null;\n        },\n        toggleCheckbox() {\n            let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};\n            const _check = !this.checked;\n\n            this.propagateDown(this.node, _check, _selectionKeys);\n\n            this.$emit('checkbox-change', {\n                node: this.node,\n                check: _check,\n                selectionKeys: _selectionKeys\n            });\n        },\n        propagateDown(node, check, selectionKeys) {\n            if (check && node.selectable != false) selectionKeys[node.key] = { checked: true, partialChecked: false };\n            else delete selectionKeys[node.key];\n\n            if (node.children && node.children.length) {\n                for (let child of node.children) {\n                    this.propagateDown(child, check, selectionKeys);\n                }\n            }\n        },\n        propagateUp(event) {\n            let check = event.check;\n            let _selectionKeys = { ...event.selectionKeys };\n            let checkedChildCount = 0;\n            let childPartialSelected = false;\n\n            for (let child of this.node.children) {\n                if (_selectionKeys[child.key] && _selectionKeys[child.key].checked) checkedChildCount++;\n                else if (_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked) childPartialSelected = true;\n            }\n\n            if (check && checkedChildCount === this.node.children.length) {\n                _selectionKeys[this.node.key] = { checked: true, partialChecked: false };\n            } else {\n                if (!check) {\n                    delete _selectionKeys[this.node.key];\n                }\n\n                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length)) _selectionKeys[this.node.key] = { checked: false, partialChecked: true };\n                else delete _selectionKeys[this.node.key];\n            }\n\n            this.$emit('checkbox-change', {\n                node: event.node,\n                check: event.check,\n                selectionKeys: _selectionKeys\n            });\n        },\n        onChildCheckboxChange(event) {\n            this.$emit('checkbox-change', event);\n        },\n        findNextSiblingOfAncestor(nodeElement) {\n            let parentNodeElement = this.getParentNodeElement(nodeElement);\n\n            if (parentNodeElement) {\n                if (parentNodeElement.nextElementSibling) return parentNodeElement.nextElementSibling;\n                else return this.findNextSiblingOfAncestor(parentNodeElement);\n            } else {\n                return null;\n            }\n        },\n        findLastVisibleDescendant(nodeElement) {\n            const childrenListElement = nodeElement.children[1];\n\n            if (childrenListElement) {\n                const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];\n\n                return this.findLastVisibleDescendant(lastChildElement);\n            } else {\n                return nodeElement;\n            }\n        },\n        getParentNodeElement(nodeElement) {\n            const parentNodeElement = nodeElement.parentElement.parentElement;\n\n            return getAttribute(parentNodeElement, 'role') === 'treeitem' ? parentNodeElement : null;\n        },\n        focusNode(element) {\n            element.focus();\n        },\n        isCheckboxSelectionMode() {\n            return this.selectionMode === 'checkbox';\n        },\n        isSameNode(event) {\n            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role=\"treeitem\"]')));\n        }\n    },\n    computed: {\n        hasChildren() {\n            return this.node.children && this.node.children.length > 0;\n        },\n        expanded() {\n            return this.expandedKeys && this.expandedKeys[this.node.key] === true;\n        },\n        leaf() {\n            return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);\n        },\n        selectable() {\n            return this.node.selectable === false ? false : this.selectionMode != null;\n        },\n        selected() {\n            return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;\n        },\n        checkboxMode() {\n            return this.selectionMode === 'checkbox' && this.node.selectable !== false;\n        },\n        checked() {\n            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;\n        },\n        partialChecked() {\n            return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;\n        },\n        ariaChecked() {\n            return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : undefined;\n        },\n        ariaSelected() {\n            return this.checkboxMode ? this.checked : undefined;\n        }\n    },\n    components: {\n        Checkbox,\n        ChevronDownIcon,\n        ChevronRightIcon,\n        CheckIcon,\n        MinusIcon,\n        SpinnerIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :data-p=\"containerDataP\" v-bind=\"ptmi('root')\">\n        <template v-if=\"loading && loadingMode === 'mask'\">\n            <div :class=\"cx('mask')\" v-bind=\"ptm('mask')\">\n                <slot name=\"loadingicon\" :class=\"cx('loadingIcon')\">\n                    <i v-if=\"loadingIcon\" :class=\"[cx('loadingIcon'), 'pi-spin', loadingIcon]\" v-bind=\"ptm('loadingIcon')\" />\n                    <SpinnerIcon v-else spin :class=\"cx('loadingIcon')\" v-bind=\"ptm('loadingIcon')\" />\n                </slot>\n            </div>\n        </template>\n        <IconField v-if=\"filter\" :unstyled=\"unstyled\" :pt=\"{ ...ptm('pcFilter'), ...ptm('pcFilterContainer') }\" :class=\"cx('pcFilterContainer')\">\n            <InputText v-model=\"filterValue\" autocomplete=\"off\" :class=\"cx('pcFilterInput')\" :placeholder=\"filterPlaceholder\" :unstyled=\"unstyled\" @keyup=\"onFilterKeyup\" :pt=\"ptm('pcFilterInput')\" />\n            <InputIcon :unstyled=\"unstyled\" :pt=\"ptm('pcFilterIconContainer')\">\n                <!--TODO: searchicon deprecated since v4.0-->\n                <slot :name=\"$slots.filtericon ? 'filtericon' : 'searchicon'\" :class=\"cx('filterIcon')\">\n                    <SearchIcon :class=\"cx('filterIcon')\" v-bind=\"ptm('filterIcon')\" />\n                </slot>\n            </InputIcon>\n        </IconField>\n        <div :class=\"cx('wrapper')\" :style=\"{ maxHeight: scrollHeight }\" :data-p=\"wrapperDataP\" v-bind=\"ptm('wrapper')\">\n            <slot name=\"header\" :value=\"value\" :expandedKeys=\"expandedKeys\" :selectionKeys=\"selectionKeys\" />\n            <ul :class=\"cx('rootChildren')\" role=\"tree\" :aria-labelledby=\"ariaLabelledby\" :aria-label=\"ariaLabel\" v-bind=\"ptm('rootChildren')\">\n                <TreeNode\n                    v-for=\"(node, index) of valueToRender\"\n                    :key=\"node.key\"\n                    :node=\"node\"\n                    :templates=\"$slots\"\n                    :level=\"level + 1\"\n                    :index=\"index\"\n                    :expandedKeys=\"d_expandedKeys\"\n                    @node-toggle=\"onNodeToggle\"\n                    @node-click=\"onNodeClick\"\n                    :selectionMode=\"selectionMode\"\n                    :selectionKeys=\"selectionKeys\"\n                    @checkbox-change=\"onCheckboxChange\"\n                    :loadingMode=\"loadingMode\"\n                    :unstyled=\"unstyled\"\n                    :pt=\"pt\"\n                ></TreeNode>\n            </ul>\n            <slot name=\"footer\" :value=\"value\" :expandedKeys=\"expandedKeys\" :selectionKeys=\"selectionKeys\" />\n        </div>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { isFunction, resolveFieldData } from '@primeuix/utils/object';\nimport SearchIcon from '@primevue/icons/search';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport IconField from 'primevue/iconfield';\nimport InputIcon from 'primevue/inputicon';\nimport InputText from 'primevue/inputtext';\nimport BaseTree from './BaseTree.vue';\nimport TreeNode from './TreeNode.vue';\n\nexport default {\n    name: 'Tree',\n    extends: BaseTree,\n    inheritAttrs: false,\n    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 'filter'],\n    data() {\n        return {\n            d_expandedKeys: this.expandedKeys || {},\n            filterValue: null\n        };\n    },\n    watch: {\n        expandedKeys(newValue) {\n            this.d_expandedKeys = newValue;\n        }\n    },\n    methods: {\n        onNodeToggle(node) {\n            const key = node.key;\n\n            if (this.d_expandedKeys[key]) {\n                delete this.d_expandedKeys[key];\n                this.$emit('node-collapse', node);\n            } else {\n                this.d_expandedKeys[key] = true;\n                this.$emit('node-expand', node);\n            }\n\n            this.d_expandedKeys = { ...this.d_expandedKeys };\n            this.$emit('update:expandedKeys', this.d_expandedKeys);\n        },\n        onNodeClick(event) {\n            if (this.selectionMode != null && event.node.selectable !== false) {\n                const metaSelection = event.nodeTouched ? false : this.metaKeySelection;\n                const _selectionKeys = metaSelection ? this.handleSelectionWithMetaKey(event) : this.handleSelectionWithoutMetaKey(event);\n\n                this.$emit('update:selectionKeys', _selectionKeys);\n            }\n        },\n        onCheckboxChange(event) {\n            this.$emit('update:selectionKeys', event.selectionKeys);\n\n            if (event.check) this.$emit('node-select', event.node);\n            else this.$emit('node-unselect', event.node);\n        },\n        handleSelectionWithMetaKey(event) {\n            const originalEvent = event.originalEvent;\n            const node = event.node;\n            const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;\n            const selected = this.isNodeSelected(node);\n            let _selectionKeys;\n\n            if (selected && metaKey) {\n                if (this.isSingleSelectionMode()) {\n                    _selectionKeys = {};\n                } else {\n                    _selectionKeys = { ...this.selectionKeys };\n                    delete _selectionKeys[node.key];\n                }\n\n                this.$emit('node-unselect', node);\n            } else {\n                if (this.isSingleSelectionMode()) {\n                    _selectionKeys = {};\n                } else if (this.isMultipleSelectionMode()) {\n                    _selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};\n                }\n\n                _selectionKeys[node.key] = true;\n                this.$emit('node-select', node);\n            }\n\n            return _selectionKeys;\n        },\n        handleSelectionWithoutMetaKey(event) {\n            const node = event.node;\n            const selected = this.isNodeSelected(node);\n            let _selectionKeys;\n\n            if (this.isSingleSelectionMode()) {\n                if (selected) {\n                    _selectionKeys = {};\n                    this.$emit('node-unselect', node);\n                } else {\n                    _selectionKeys = {};\n                    _selectionKeys[node.key] = true;\n                    this.$emit('node-select', node);\n                }\n            } else {\n                if (selected) {\n                    _selectionKeys = { ...this.selectionKeys };\n                    delete _selectionKeys[node.key];\n\n                    this.$emit('node-unselect', node);\n                } else {\n                    _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};\n                    _selectionKeys[node.key] = true;\n\n                    this.$emit('node-select', node);\n                }\n            }\n\n            return _selectionKeys;\n        },\n        isSingleSelectionMode() {\n            return this.selectionMode === 'single';\n        },\n        isMultipleSelectionMode() {\n            return this.selectionMode === 'multiple';\n        },\n        isNodeSelected(node) {\n            return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;\n        },\n        isChecked(node) {\n            return this.selectionKeys ? this.selectionKeys[node.key] && this.selectionKeys[node.key].checked : false;\n        },\n        isNodeLeaf(node) {\n            return node.leaf === false ? false : !(node.children && node.children.length);\n        },\n        onFilterKeyup(event) {\n            if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n                event.preventDefault();\n            }\n\n            this.$emit('filter', { originalEvent: event, value: event.target.value });\n        },\n        findFilteredNodes(node, paramsWithoutNode) {\n            if (node) {\n                let matched = false;\n\n                if (node.children) {\n                    let childNodes = [...node.children];\n\n                    node.children = [];\n\n                    for (let childNode of childNodes) {\n                        let copyChildNode = { ...childNode };\n\n                        if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {\n                            matched = true;\n                            node.children.push(copyChildNode);\n                        }\n                    }\n                }\n\n                if (matched) {\n                    return true;\n                }\n            }\n        },\n        isFilterMatched(node, { searchFields, filterText, strict }) {\n            let matched = false;\n\n            for (let field of searchFields) {\n                let fieldValue = String(resolveFieldData(node, field)).toLocaleLowerCase(this.filterLocale);\n\n                if (fieldValue.indexOf(filterText) > -1) {\n                    matched = true;\n                }\n            }\n\n            if (!matched || (strict && !this.isNodeLeaf(node))) {\n                matched = this.findFilteredNodes(node, { searchFields, filterText, strict }) || matched;\n            }\n\n            return matched;\n        }\n    },\n    computed: {\n        filteredValue() {\n            let filteredNodes = [];\n            const searchFields = isFunction(this.filterBy) ? [this.filterBy] : this.filterBy.split(',');\n            const filterText = this.filterValue.trim().toLocaleLowerCase(this.filterLocale);\n            const strict = this.filterMode === 'strict';\n\n            for (let node of this.value) {\n                let _node = { ...node };\n                let paramsWithoutNode = { searchFields, filterText, strict };\n\n                if (\n                    (strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||\n                    (!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))\n                ) {\n                    filteredNodes.push(_node);\n                }\n            }\n\n            return filteredNodes;\n        },\n        valueToRender() {\n            if (this.filterValue && this.filterValue.trim().length > 0) return this.fil