primevue/treetable/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/treetable/BaseTreeTable.vue","../../src/treetable/FooterCell.vue","../../src/treetable/FooterCell.vue?vue&type=template&id=2533b3ba&lang.js","../../src/treetable/HeaderCell.vue","../../src/treetable/HeaderCell.vue?vue&type=template&id=443165a8&lang.js","../../src/treetable/BodyCell.vue","../../src/treetable/BodyCell.vue?vue&type=template&id=a4d989b8&lang.js","../../src/treetable/TreeTableRow.vue","../../src/treetable/TreeTableRow.vue?vue&type=template&id=631929fa&lang.js","../../src/treetable/TreeTable.vue","../../src/treetable/TreeTable.vue?vue&type=template&id=1c850030&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport TreeTableStyle from 'primevue/treetable/style';\n\nexport default {\n    name: 'BaseTreeTable',\n    extends: BaseComponent,\n    props: {\n        value: {\n            type: null,\n            default: null\n        },\n        dataKey: {\n            type: [String, Function],\n            default: 'key'\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        contextMenu: {\n            type: Boolean,\n            default: false\n        },\n        contextMenuSelection: {\n            type: Object,\n            default: null\n        },\n        rows: {\n            type: Number,\n            default: 0\n        },\n        first: {\n            type: Number,\n            default: 0\n        },\n        totalRecords: {\n            type: Number,\n            default: 0\n        },\n        paginator: {\n            type: Boolean,\n            default: false\n        },\n        paginatorPosition: {\n            type: String,\n            default: 'bottom'\n        },\n        alwaysShowPaginator: {\n            type: Boolean,\n            default: true\n        },\n        paginatorTemplate: {\n            type: String,\n            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'\n        },\n        pageLinkSize: {\n            type: Number,\n            default: 5\n        },\n        rowsPerPageOptions: {\n            type: Array,\n            default: null\n        },\n        currentPageReportTemplate: {\n            type: String,\n            default: '({currentPage} of {totalPages})'\n        },\n        lazy: {\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        rowHover: {\n            type: Boolean,\n            default: false\n        },\n        autoLayout: {\n            type: Boolean,\n            default: false\n        },\n        sortField: {\n            type: [String, Function],\n            default: null\n        },\n        sortOrder: {\n            type: Number,\n            default: null\n        },\n        defaultSortOrder: {\n            type: Number,\n            default: 1\n        },\n        multiSortMeta: {\n            type: Array,\n            default: null\n        },\n        sortMode: {\n            type: String,\n            default: 'single'\n        },\n        removableSort: {\n            type: Boolean,\n            default: false\n        },\n        filters: {\n            type: Object,\n            default: null\n        },\n        filterMode: {\n            type: String,\n            default: 'lenient'\n        },\n        filterLocale: {\n            type: String,\n            default: undefined\n        },\n        resizableColumns: {\n            type: Boolean,\n            default: false\n        },\n        columnResizeMode: {\n            type: String,\n            default: 'fit'\n        },\n        indentation: {\n            type: Number,\n            default: 1\n        },\n        showGridlines: {\n            type: Boolean,\n            default: false\n        },\n        scrollable: {\n            type: Boolean,\n            default: false\n        },\n        scrollHeight: {\n            type: String,\n            default: null\n        },\n        size: {\n            type: String,\n            default: null\n        },\n        tableStyle: {\n            type: null,\n            default: null\n        },\n        tableClass: {\n            type: [String, Object],\n            default: null\n        },\n        tableProps: {\n            type: Object,\n            default: null\n        }\n    },\n    style: TreeTableStyle,\n    provide() {\n        return {\n            $pcTreeTable: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <td :style=\"containerStyle\" :class=\"containerClass\" role=\"cell\" v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('footerCell') }\" :data-p-frozen-column=\"columnProp('frozen')\">\n        <component v-if=\"column.children && column.children.footer\" :is=\"column.children.footer\" :column=\"column\" />\n        <span v-if=\"columnProp('footer')\" :class=\"cx('columnFooter')\" v-bind=\"getColumnPT('columnFooter')\">{{ columnProp('footer') }}</span>\n    </td>\n</template>\n\n<script>\nimport { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { getVNodeProp } from '@primevue/core/utils';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'FooterCell',\n    hostName: 'TreeTable',\n    extends: BaseComponent,\n    props: {\n        column: {\n            type: Object,\n            default: null\n        },\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    data() {\n        return {\n            styleObject: {}\n        };\n    },\n    mounted() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    updated() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    methods: {\n        columnProp(prop) {\n            return getVNodeProp(this.column, prop);\n        },\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    frozen: this.columnProp('frozen'),\n                    size: this.$parentInstance?.size\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;\n        },\n        updateStickyPosition() {\n            if (this.columnProp('frozen')) {\n                let align = this.columnProp('alignFrozen');\n\n                if (align === 'right') {\n                    let pos = 0;\n                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (next) {\n                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);\n                    }\n\n                    this.styleObject.insetInlineEnd = pos + 'px';\n                } else {\n                    let pos = 0;\n                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (prev) {\n                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);\n                    }\n\n                    this.styleObject.insetInlineStart = pos + 'px';\n                }\n            }\n        }\n    },\n    computed: {\n        containerClass() {\n            return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];\n        },\n        containerStyle() {\n            let bodyStyle = this.columnProp('footerStyle');\n            let columnStyle = this.columnProp('style');\n\n            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];\n        }\n    }\n};\n</script>\n","<template>\n    <td :style=\"containerStyle\" :class=\"containerClass\" role=\"cell\" v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('footerCell') }\" :data-p-frozen-column=\"columnProp('frozen')\">\n        <component v-if=\"column.children && column.children.footer\" :is=\"column.children.footer\" :column=\"column\" />\n        <span v-if=\"columnProp('footer')\" :class=\"cx('columnFooter')\" v-bind=\"getColumnPT('columnFooter')\">{{ columnProp('footer') }}</span>\n    </td>\n</template>\n\n<script>\nimport { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { getVNodeProp } from '@primevue/core/utils';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'FooterCell',\n    hostName: 'TreeTable',\n    extends: BaseComponent,\n    props: {\n        column: {\n            type: Object,\n            default: null\n        },\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    data() {\n        return {\n            styleObject: {}\n        };\n    },\n    mounted() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    updated() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    methods: {\n        columnProp(prop) {\n            return getVNodeProp(this.column, prop);\n        },\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    frozen: this.columnProp('frozen'),\n                    size: this.$parentInstance?.size\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;\n        },\n        updateStickyPosition() {\n            if (this.columnProp('frozen')) {\n                let align = this.columnProp('alignFrozen');\n\n                if (align === 'right') {\n                    let pos = 0;\n                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (next) {\n                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);\n                    }\n\n                    this.styleObject.insetInlineEnd = pos + 'px';\n                } else {\n                    let pos = 0;\n                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (prev) {\n                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);\n                    }\n\n                    this.styleObject.insetInlineStart = pos + 'px';\n                }\n            }\n        }\n    },\n    computed: {\n        containerClass() {\n            return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];\n        },\n        containerStyle() {\n            let bodyStyle = this.columnProp('footerStyle');\n            let columnStyle = this.columnProp('style');\n\n            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];\n        }\n    }\n};\n</script>\n","<template>\n    <th\n        :class=\"containerClass\"\n        :style=\"[containerStyle]\"\n        @click=\"onClick\"\n        @keydown=\"onKeyDown\"\n        :tabindex=\"columnProp('sortable') ? '0' : null\"\n        :aria-sort=\"ariaSort\"\n        role=\"columnheader\"\n        v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('headerCell') }\"\n        :data-p-sortable-column=\"columnProp('sortable')\"\n        :data-p-resizable-column=\"resizableColumns\"\n        :data-p-sorted=\"isColumnSorted()\"\n        :data-p-frozen-column=\"columnProp('frozen')\"\n    >\n        <span v-if=\"resizableColumns && !columnProp('frozen')\" :class=\"cx('columnResizer')\" @mousedown=\"onResizeStart\" v-bind=\"getColumnPT('columnResizer')\"></span>\n        <div :class=\"cx('columnHeaderContent')\" v-bind=\"getColumnPT('columnHeaderContent')\">\n            <component v-if=\"column.children && column.children.header\" :is=\"column.children.header\" :column=\"column\" />\n            <span v-if=\"columnProp('header')\" :class=\"cx('columnTitle')\" v-bind=\"getColumnPT('columnTitle')\">{{ columnProp('header') }}</span>\n            <span v-if=\"columnProp('sortable')\" v-bind=\"getColumnPT('sort')\">\n                <component :is=\"(column.children && column.children.sorticon) || sortableColumnIcon\" :sorted=\"sortState.sorted\" :sortOrder=\"sortState.sortOrder\" :class=\"cx('sortIcon')\" v-bind=\"getColumnPT('sortIcon')\" />\n            </span>\n            <Badge v-if=\"isMultiSorted()\" :class=\"cx('pcSortBadge')\" v-bind=\"getColumnPT('pcSortBadge')\" :value=\"getMultiSortMetaIndex() + 1\" size=\"small\" />\n        </div>\n    </th>\n</template>\n\n<script>\nimport { getAttribute, getIndex, getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { getVNodeProp } from '@primevue/core/utils';\nimport SortAltIcon from '@primevue/icons/sortalt';\nimport SortAmountDownIcon from '@primevue/icons/sortamountdown';\nimport SortAmountUpAltIcon from '@primevue/icons/sortamountupalt';\nimport Badge from 'primevue/badge';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'HeaderCell',\n    hostName: 'TreeTable',\n    extends: BaseComponent,\n    emits: ['column-click', 'column-resizestart'],\n    props: {\n        column: {\n            type: Object,\n            default: null\n        },\n        resizableColumns: {\n            type: Boolean,\n            default: false\n        },\n        sortField: {\n            type: [String, Function],\n            default: null\n        },\n        sortOrder: {\n            type: Number,\n            default: null\n        },\n        multiSortMeta: {\n            type: Array,\n            default: null\n        },\n        sortMode: {\n            type: String,\n            default: 'single'\n        },\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    data() {\n        return {\n            styleObject: {}\n        };\n    },\n    mounted() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    updated() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    methods: {\n        columnProp(prop) {\n            return getVNodeProp(this.column, prop);\n        },\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    sorted: this.isColumnSorted(),\n                    frozen: this.$parentInstance.scrollable && this.columnProp('frozen'),\n                    resizable: this.resizableColumns,\n                    scrollable: this.$parentInstance.scrollable,\n                    showGridlines: this.$parentInstance.showGridlines,\n                    size: this.$parentInstance?.size\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:\n        },\n        updateStickyPosition() {\n            if (this.columnProp('frozen')) {\n                let align = this.columnProp('alignFrozen');\n\n                if (align === 'right') {\n                    let pos = 0;\n                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (next) {\n                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);\n                    }\n\n                    this.styleObject.insetInlineEnd = pos + 'px';\n                } else {\n                    let pos = 0;\n                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (prev) {\n                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);\n                    }\n\n                    this.styleObject.insetInlineStart = pos + 'px';\n                }\n\n                let filterRow = this.$el.parentElement.nextElementSibling;\n\n                if (filterRow) {\n                    let index = getIndex(this.$el);\n\n                    filterRow.children[index].style['inset-inline-start'] = this.styleObject['inset-inline-start'];\n                    filterRow.children[index].style['inset-inline-end'] = this.styleObject['inset-inline-end'];\n                }\n            }\n        },\n        onClick(event) {\n            this.$emit('column-click', { originalEvent: event, column: this.column });\n        },\n        onKeyDown(event) {\n            if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && getAttribute(event.currentTarget, 'data-p-sortable-column')) {\n                this.$emit('column-click', { originalEvent: event, column: this.column });\n\n                event.preventDefault();\n            }\n        },\n        onResizeStart(event) {\n            this.$emit('column-resizestart', event);\n        },\n        getMultiSortMetaIndex() {\n            let index = -1;\n\n            for (let i = 0; i < this.multiSortMeta.length; i++) {\n                let meta = this.multiSortMeta[i];\n\n                if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {\n                    index = i;\n                    break;\n                }\n            }\n\n            return index;\n        },\n        isMultiSorted() {\n            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;\n        },\n        isColumnSorted() {\n            return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();\n        }\n    },\n    computed: {\n        containerClass() {\n            return [this.columnProp('headerClass'), this.columnProp('class'), this.cx('headerCell')];\n        },\n        containerStyle() {\n            let headerStyle = this.columnProp('headerStyle');\n            let columnStyle = this.columnProp('style');\n\n            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];\n        },\n        sortState() {\n            let sorted = false;\n            let sortOrder = null;\n\n            if (this.sortMode === 'single') {\n                sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));\n                sortOrder = sorted ? this.sortOrder : 0;\n            } else if (this.sortMode === 'multiple') {\n                let metaIndex = this.getMultiSortMetaIndex();\n\n                if (metaIndex > -1) {\n                    sorted = true;\n                    sortOrder = this.multiSortMeta[metaIndex].order;\n                }\n            }\n\n            return {\n                sorted,\n                sortOrder\n            };\n        },\n        sortableColumnIcon() {\n            const { sorted, sortOrder } = this.sortState;\n\n            if (!sorted) return SortAltIcon;\n            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;\n            else if (sorted && sortOrder < 0) return SortAmountDownIcon;\n\n            return null;\n        },\n        ariaSort() {\n            if (this.columnProp('sortable')) {\n                const { sorted, sortOrder } = this.sortState;\n\n                if (sorted && sortOrder < 0) return 'descending';\n                else if (sorted && sortOrder > 0) return 'ascending';\n                else return 'none';\n            } else {\n                return null;\n            }\n        }\n    },\n    components: {\n        Badge,\n        SortAltIcon: SortAltIcon,\n        SortAmountUpAltIcon: SortAmountUpAltIcon,\n        SortAmountDownIcon: SortAmountDownIcon\n    }\n};\n</script>\n","<template>\n    <th\n        :class=\"containerClass\"\n        :style=\"[containerStyle]\"\n        @click=\"onClick\"\n        @keydown=\"onKeyDown\"\n        :tabindex=\"columnProp('sortable') ? '0' : null\"\n        :aria-sort=\"ariaSort\"\n        role=\"columnheader\"\n        v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('headerCell') }\"\n        :data-p-sortable-column=\"columnProp('sortable')\"\n        :data-p-resizable-column=\"resizableColumns\"\n        :data-p-sorted=\"isColumnSorted()\"\n        :data-p-frozen-column=\"columnProp('frozen')\"\n    >\n        <span v-if=\"resizableColumns && !columnProp('frozen')\" :class=\"cx('columnResizer')\" @mousedown=\"onResizeStart\" v-bind=\"getColumnPT('columnResizer')\"></span>\n        <div :class=\"cx('columnHeaderContent')\" v-bind=\"getColumnPT('columnHeaderContent')\">\n            <component v-if=\"column.children && column.children.header\" :is=\"column.children.header\" :column=\"column\" />\n            <span v-if=\"columnProp('header')\" :class=\"cx('columnTitle')\" v-bind=\"getColumnPT('columnTitle')\">{{ columnProp('header') }}</span>\n            <span v-if=\"columnProp('sortable')\" v-bind=\"getColumnPT('sort')\">\n                <component :is=\"(column.children && column.children.sorticon) || sortableColumnIcon\" :sorted=\"sortState.sorted\" :sortOrder=\"sortState.sortOrder\" :class=\"cx('sortIcon')\" v-bind=\"getColumnPT('sortIcon')\" />\n            </span>\n            <Badge v-if=\"isMultiSorted()\" :class=\"cx('pcSortBadge')\" v-bind=\"getColumnPT('pcSortBadge')\" :value=\"getMultiSortMetaIndex() + 1\" size=\"small\" />\n        </div>\n    </th>\n</template>\n\n<script>\nimport { getAttribute, getIndex, getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { getVNodeProp } from '@primevue/core/utils';\nimport SortAltIcon from '@primevue/icons/sortalt';\nimport SortAmountDownIcon from '@primevue/icons/sortamountdown';\nimport SortAmountUpAltIcon from '@primevue/icons/sortamountupalt';\nimport Badge from 'primevue/badge';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'HeaderCell',\n    hostName: 'TreeTable',\n    extends: BaseComponent,\n    emits: ['column-click', 'column-resizestart'],\n    props: {\n        column: {\n            type: Object,\n            default: null\n        },\n        resizableColumns: {\n            type: Boolean,\n            default: false\n        },\n        sortField: {\n            type: [String, Function],\n            default: null\n        },\n        sortOrder: {\n            type: Number,\n            default: null\n        },\n        multiSortMeta: {\n            type: Array,\n            default: null\n        },\n        sortMode: {\n            type: String,\n            default: 'single'\n        },\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    data() {\n        return {\n            styleObject: {}\n        };\n    },\n    mounted() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    updated() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    methods: {\n        columnProp(prop) {\n            return getVNodeProp(this.column, prop);\n        },\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    sorted: this.isColumnSorted(),\n                    frozen: this.$parentInstance.scrollable && this.columnProp('frozen'),\n                    resizable: this.resizableColumns,\n                    scrollable: this.$parentInstance.scrollable,\n                    showGridlines: this.$parentInstance.showGridlines,\n                    size: this.$parentInstance?.size\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:\n        },\n        updateStickyPosition() {\n            if (this.columnProp('frozen')) {\n                let align = this.columnProp('alignFrozen');\n\n                if (align === 'right') {\n                    let pos = 0;\n                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (next) {\n                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);\n                    }\n\n                    this.styleObject.insetInlineEnd = pos + 'px';\n                } else {\n                    let pos = 0;\n                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (prev) {\n                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);\n                    }\n\n                    this.styleObject.insetInlineStart = pos + 'px';\n                }\n\n                let filterRow = this.$el.parentElement.nextElementSibling;\n\n                if (filterRow) {\n                    let index = getIndex(this.$el);\n\n                    filterRow.children[index].style['inset-inline-start'] = this.styleObject['inset-inline-start'];\n                    filterRow.children[index].style['inset-inline-end'] = this.styleObject['inset-inline-end'];\n                }\n            }\n        },\n        onClick(event) {\n            this.$emit('column-click', { originalEvent: event, column: this.column });\n        },\n        onKeyDown(event) {\n            if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && getAttribute(event.currentTarget, 'data-p-sortable-column')) {\n                this.$emit('column-click', { originalEvent: event, column: this.column });\n\n                event.preventDefault();\n            }\n        },\n        onResizeStart(event) {\n            this.$emit('column-resizestart', event);\n        },\n        getMultiSortMetaIndex() {\n            let index = -1;\n\n            for (let i = 0; i < this.multiSortMeta.length; i++) {\n                let meta = this.multiSortMeta[i];\n\n                if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {\n                    index = i;\n                    break;\n                }\n            }\n\n            return index;\n        },\n        isMultiSorted() {\n            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;\n        },\n        isColumnSorted() {\n            return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();\n        }\n    },\n    computed: {\n        containerClass() {\n            return [this.columnProp('headerClass'), this.columnProp('class'), this.cx('headerCell')];\n        },\n        containerStyle() {\n            let headerStyle = this.columnProp('headerStyle');\n            let columnStyle = this.columnProp('style');\n\n            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];\n        },\n        sortState() {\n            let sorted = false;\n            let sortOrder = null;\n\n            if (this.sortMode === 'single') {\n                sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));\n                sortOrder = sorted ? this.sortOrder : 0;\n            } else if (this.sortMode === 'multiple') {\n                let metaIndex = this.getMultiSortMetaIndex();\n\n                if (metaIndex > -1) {\n                    sorted = true;\n                    sortOrder = this.multiSortMeta[metaIndex].order;\n                }\n            }\n\n            return {\n                sorted,\n                sortOrder\n            };\n        },\n        sortableColumnIcon() {\n            const { sorted, sortOrder } = this.sortState;\n\n            if (!sorted) return SortAltIcon;\n            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;\n            else if (sorted && sortOrder < 0) return SortAmountDownIcon;\n\n            return null;\n        },\n        ariaSort() {\n            if (this.columnProp('sortable')) {\n                const { sorted, sortOrder } = this.sortState;\n\n                if (sorted && sortOrder < 0) return 'descending';\n                else if (sorted && sortOrder > 0) return 'ascending';\n                else return 'none';\n            } else {\n                return null;\n            }\n        }\n    },\n    components: {\n        Badge,\n        SortAltIcon: SortAltIcon,\n        SortAmountUpAltIcon: SortAmountUpAltIcon,\n        SortAmountDownIcon: SortAmountDownIcon\n    }\n};\n</script>\n","<template>\n    <td :style=\"containerStyle\" :class=\"containerClass\" role=\"cell\" v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }\" :data-p-frozen-column=\"columnProp('frozen')\">\n        <div :class=\"cx('bodyCellContent')\" v-bind=\"getColumnPT('bodyCellContent')\">\n            <button v-if=\"columnProp('expander')\" v-ripple type=\"button\" :class=\"cx('nodeToggleButton')\" @click=\"toggle\" :style=\"togglerStyle\" tabindex=\"-1\" v-bind=\"getColumnPT('nodeToggleButton')\" data-pc-group-section=\"rowactionbutton\">\n                <template v-if=\"node.loading && loadingMode === 'icon'\">\n                    <component v-if=\"templates['nodetoggleicon']\" :is=\"templates['nodetoggleicon']\" />\n                    <!-- TODO: Deprecated since v4.0-->\n                    <component v-if=\"templates['nodetogglericon']\" :is=\"templates['nodetogglericon']\" />\n                    <SpinnerIcon v-else spin v-bind=\"ptm('nodetoggleicon')\" />\n                </template>\n                <template v-else>\n                    <component v-if=\"column.children && column.children.rowtoggleicon\" :is=\"column.children.rowtoggleicon\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <component v-else-if=\"templates['nodetoggleicon']\" :is=\"templates['nodetoggleicon']\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <!-- TODO: Deprecated since v4.0-->\n                    <component v-else-if=\"column.children && column.children.rowtogglericon\" :is=\"column.children.rowtogglericon\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <component v-else-if=\"expanded\" :is=\"node.expandedIcon ? 'span' : 'ChevronDownIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getColumnPT('nodeToggleIcon')\" />\n                    <component v-else :is=\"node.collapsedIcon ? 'span' : 'ChevronRightIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getColumnPT('nodeToggleIcon')\" />\n                </template>\n            </button>\n            <Checkbox\n                v-if=\"checkboxSelectionMode && columnProp('expander')\"\n                :modelValue=\"checked\"\n                :binary=\"true\"\n                :class=\"cx('pcNodeCheckbox')\"\n                :disabled=\"node.selectable === false\"\n                @change=\"toggleCheckbox\"\n                :tabindex=\"-1\"\n                :indeterminate=\"partialChecked\"\n                :unstyled=\"unstyled\"\n                :pt=\"getColumnCheckboxPT('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=\"column.children && column.children.body\" :is=\"column.children.body\" :node=\"node\" :column=\"column\" />\n            <template v-else>{{ resolveFieldData(node.data, columnProp('field')) }}</template>\n        </div>\n    </td>\n</template>\n\n<script>\nimport { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';\nimport { resolveFieldData } from '@primeuix/utils/object';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { getVNodeProp } from '@primevue/core/utils';\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';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'BodyCell',\n    hostName: 'TreeTable',\n    extends: BaseComponent,\n    emits: ['node-toggle', 'checkbox-toggle'],\n    props: {\n        node: {\n            type: Object,\n            default: null\n        },\n        column: {\n            type: Object,\n            default: null\n        },\n        level: {\n            type: Number,\n            default: 0\n        },\n        indentation: {\n            type: Number,\n            default: 1\n        },\n        leaf: {\n            type: Boolean,\n            default: false\n        },\n        expanded: {\n            type: Boolean,\n            default: false\n        },\n        selectionMode: {\n            type: String,\n            default: null\n        },\n        checked: {\n            type: Boolean,\n            default: false\n        },\n        partialChecked: {\n            type: Boolean,\n            default: false\n        },\n        templates: {\n            type: Object,\n            default: null\n        },\n        index: {\n            type: Number,\n            default: null\n        },\n        loadingMode: {\n            type: String,\n            default: 'mask'\n        }\n    },\n    data() {\n        return {\n            styleObject: {}\n        };\n    },\n    mounted() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    updated() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    methods: {\n        toggle() {\n            this.$emit('node-toggle', this.node);\n        },\n        columnProp(prop) {\n            return getVNodeProp(this.column, prop);\n        },\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,\n                    selected: this.$parent.selected,\n                    frozen: this.columnProp('frozen'),\n                    scrollable: this.$parentInstance.scrollable,\n                    showGridlines: this.$parentInstance.showGridlines,\n                    size: this.$parentInstance?.size,\n                    node: this.node\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo\n        },\n        getColumnCheckboxPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    checked: this.checked,\n                    partialChecked: this.partialChecked,\n                    node: this.node\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        updateStickyPosition() {\n            if (this.columnProp('frozen')) {\n                let align = this.columnProp('alignFrozen');\n\n                if (align === 'right') {\n                    let pos = 0;\n                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (next) {\n                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);\n                    }\n\n                    this.styleObject.insetInlineEnd = pos + 'px';\n                } else {\n                    let pos = 0;\n                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (prev) {\n                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);\n                    }\n\n                    this.styleObject.insetInlineStart = pos + 'px';\n                }\n            }\n        },\n        resolveFieldData(rowData, field) {\n            return resolveFieldData(rowData, field);\n        },\n        toggleCheckbox() {\n            this.$emit('checkbox-toggle');\n        }\n    },\n    computed: {\n        containerClass() {\n            return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];\n        },\n        containerStyle() {\n            let bodyStyle = this.columnProp('bodyStyle');\n            let columnStyle = this.columnProp('style');\n\n            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];\n        },\n        togglerStyle() {\n            return {\n                marginLeft: this.level * this.indentation + 'rem',\n                visibility: this.leaf ? 'hidden' : 'visible'\n            };\n        },\n        checkboxSelectionMode() {\n            return this.selectionMode === 'checkbox';\n        }\n    },\n    components: {\n        Checkbox,\n        ChevronRightIcon,\n        ChevronDownIcon,\n        CheckIcon,\n        MinusIcon,\n        SpinnerIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <td :style=\"containerStyle\" :class=\"containerClass\" role=\"cell\" v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }\" :data-p-frozen-column=\"columnProp('frozen')\">\n        <div :class=\"cx('bodyCellContent')\" v-bind=\"getColumnPT('bodyCellContent')\">\n            <button v-if=\"columnProp('expander')\" v-ripple type=\"button\" :class=\"cx('nodeToggleButton')\" @click=\"toggle\" :style=\"togglerStyle\" tabindex=\"-1\" v-bind=\"getColumnPT('nodeToggleButton')\" data-pc-group-section=\"rowactionbutton\">\n                <template v-if=\"node.loading && loadingMode === 'icon'\">\n                    <component v-if=\"templates['nodetoggleicon']\" :is=\"templates['nodetoggleicon']\" />\n                    <!-- TODO: Deprecated since v4.0-->\n                    <component v-if=\"templates['nodetogglericon']\" :is=\"templates['nodetogglericon']\" />\n                    <SpinnerIcon v-else spin v-bind=\"ptm('nodetoggleicon')\" />\n                </template>\n                <template v-else>\n                    <component v-if=\"column.children && column.children.rowtoggleicon\" :is=\"column.children.rowtoggleicon\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <component v-else-if=\"templates['nodetoggleicon']\" :is=\"templates['nodetoggleicon']\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <!-- TODO: Deprecated since v4.0-->\n                    <component v-else-if=\"column.children && column.children.rowtogglericon\" :is=\"column.children.rowtogglericon\" :node=\"node\" :expanded=\"expanded\" :class=\"cx('nodeToggleIcon')\" />\n                    <component v-else-if=\"expanded\" :is=\"node.expandedIcon ? 'span' : 'ChevronDownIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getColumnPT('nodeToggleIcon')\" />\n                    <component v-else :is=\"node.collapsedIcon ? 'span' : 'ChevronRightIcon'\" :class=\"cx('nodeToggleIcon')\" v-bind=\"getColumnPT('nodeToggleIcon')\" />\n                </template>\n            </button>\n            <Checkbox\n                v-if=\"checkboxSelectionMode && columnProp('expander')\"\n                :modelValue=\"checked\"\n                :binary=\"true\"\n                :class=\"cx('pcNodeCheckbox')\"\n                :disabled=\"node.selectable === false\"\n                @change=\"toggleCheckbox\"\n                :tabindex=\"-1\"\n                :indeterminate=\"partialChecked\"\n                :unstyled=\"unstyled\"\n                :pt=\"getColumnCheckboxPT('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=\"column.children && column.children.body\" :is=\"column.children.body\" :node=\"node\" :column=\"column\" />\n            <template v-else>{{ resolveFieldData(node.data, columnProp('field')) }}</template>\n        </div>\n    </td>\n</template>\n\n<script>\nimport { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';\nimport { resolveFieldData } from '@primeuix/utils/object';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { getVNodeProp } from '@primevue/core/utils';\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';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'BodyCell',\n    hostName: 'TreeTable',\n    extends: BaseComponent,\n    emits: ['node-toggle', 'checkbox-toggle'],\n    props: {\n        node: {\n            type: Object,\n            default: null\n        },\n        column: {\n            type: Object,\n            default: null\n        },\n        level: {\n            type: Number,\n            default: 0\n        },\n        indentation: {\n            type: Number,\n            default: 1\n        },\n        leaf: {\n            type: Boolean,\n            default: false\n        },\n        expanded: {\n            type: Boolean,\n            default: false\n        },\n        selectionMode: {\n            type: String,\n            default: null\n        },\n        checked: {\n            type: Boolean,\n            default: false\n        },\n        partialChecked: {\n            type: Boolean,\n            default: false\n        },\n        templates: {\n            type: Object,\n            default: null\n        },\n        index: {\n            type: Number,\n            default: null\n        },\n        loadingMode: {\n            type: String,\n            default: 'mask'\n        }\n    },\n    data() {\n        return {\n            styleObject: {}\n        };\n    },\n    mounted() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    updated() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    methods: {\n        toggle() {\n            this.$emit('node-toggle', this.node);\n        },\n        columnProp(prop) {\n            return getVNodeProp(this.column, prop);\n        },\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,\n                    selected: this.$parent.selected,\n                    frozen: this.columnProp('frozen'),\n                    scrollable: this.$parentInstance.scrollable,\n                    showGridlines: this.$parentInstance.showGridlines,\n                    size: this.$parentInstance?.size,\n                    node: this.node\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo\n        },\n        getColumnCheckboxPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    checked: this.checked,\n                    partialChecked: this.partialChecked,\n                    node: this.node\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        updateStickyPosition() {\n            if (this.columnProp('frozen')) {\n                let align = this.columnProp('alignFrozen');\n\n                if (align === 'right') {\n                    let pos = 0;\n                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (next) {\n                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);\n                    }\n\n                    this.styleObject.insetInlineEnd = pos + 'px';\n                } else {\n                    let pos = 0;\n                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (prev) {\n                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);\n                    }\n\n                    this.styleObject.insetInlineStart = pos + 'px';\n                }\n            }\n        },\n        resolveFieldData(rowData, field) {\n            return resolveFieldData(rowData, field);\n        },\n        toggleCheckbox() {\n            this.$emit('checkbox-toggle');\n        }\n    },\n    computed: {\n        containerClass() {\n