Refactor #6677 - For TreeTable
parent
c745334edd
commit
709c1023c0
|
@ -9,11 +9,11 @@
|
|||
<SpinnerIcon v-else spin v-bind="ptm('nodetoggleicon')" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<component v-if="column.children && column.children.rowtoggleicon" :is="column.children.rowtoggleicon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
|
||||
<component v-if="column.children && column.children.rowtoggleicon" :is="column.children.rowtoggleicon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
|
||||
<!-- TODO: Deprecated since v4.0-->
|
||||
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
|
||||
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
|
||||
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
|
||||
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
|
||||
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getColumnPT('nodeToggleIcon')" />
|
||||
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getColumnPT('nodeToggleIcon')" />
|
||||
</template>
|
||||
</button>
|
||||
<Checkbox
|
||||
|
@ -39,10 +39,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
|
||||
import { resolveFieldData } from '@primeuix/utils/object';
|
||||
import BaseComponent from '@primevue/core/basecomponent';
|
||||
import { getVNodeProp } from '@primevue/core/utils';
|
||||
import { getNextElementSibling, getPreviousElementSibling, getOuterWidth } from '@primeuix/utils/dom';
|
||||
import { resolveFieldData } from '@primeuix/utils/object';
|
||||
import CheckIcon from '@primevue/icons/check';
|
||||
import ChevronDownIcon from '@primevue/icons/chevrondown';
|
||||
import ChevronRightIcon from '@primevue/icons/chevronright';
|
||||
|
@ -171,26 +171,35 @@ export default {
|
|||
},
|
||||
updateStickyPosition() {
|
||||
if (this.columnProp('frozen')) {
|
||||
let isRTL = this.$parentInstance.isRTL;
|
||||
let align = this.columnProp('alignFrozen');
|
||||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let pos = 0;
|
||||
let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
}
|
||||
|
||||
this.styleObject.right = right + 'px';
|
||||
if (isRTL) {
|
||||
this.styleObject.left = pos + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
this.styleObject.right = pos + 'px';
|
||||
}
|
||||
} else {
|
||||
let pos = 0;
|
||||
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
}
|
||||
|
||||
this.styleObject.left = left + 'px';
|
||||
if (isRTL) {
|
||||
this.styleObject.right = pos + 'px';
|
||||
} else {
|
||||
this.styleObject.left = pos + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -66,26 +66,35 @@ export default {
|
|||
},
|
||||
updateStickyPosition() {
|
||||
if (this.columnProp('frozen')) {
|
||||
let isRTL = this.$parentInstance.isRTL;
|
||||
let align = this.columnProp('alignFrozen');
|
||||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let pos = 0;
|
||||
let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
}
|
||||
|
||||
this.styleObject.right = right + 'px';
|
||||
if (isRTL) {
|
||||
this.styleObject.left = pos + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
this.styleObject.right = pos + 'px';
|
||||
}
|
||||
} else {
|
||||
let pos = 0;
|
||||
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
}
|
||||
|
||||
this.styleObject.left = left + 'px';
|
||||
if (isRTL) {
|
||||
this.styleObject.right = pos + 'px';
|
||||
} else {
|
||||
this.styleObject.left = pos + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -115,26 +115,35 @@ export default {
|
|||
},
|
||||
updateStickyPosition() {
|
||||
if (this.columnProp('frozen')) {
|
||||
let isRTL = this.$parentInstance.isRTL;
|
||||
let align = this.columnProp('alignFrozen');
|
||||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let pos = 0;
|
||||
let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
}
|
||||
|
||||
this.styleObject.right = right + 'px';
|
||||
if (isRTL) {
|
||||
this.styleObject.left = pos + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
this.styleObject.right = pos + 'px';
|
||||
}
|
||||
} else {
|
||||
let pos = 0;
|
||||
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
}
|
||||
|
||||
this.styleObject.left = left + 'px';
|
||||
if (isRTL) {
|
||||
this.styleObject.right = pos + 'px';
|
||||
} else {
|
||||
this.styleObject.left = pos + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
let filterRow = this.$el.parentElement.nextElementSibling;
|
||||
|
|
|
@ -219,13 +219,15 @@ export default {
|
|||
d_sortOrder: this.sortOrder,
|
||||
d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
|
||||
hasASelectedNode: false,
|
||||
d_columns: new HelperSet({ type: 'Column' })
|
||||
d_columns: new HelperSet({ type: 'Column' }),
|
||||
isRTL: false
|
||||
};
|
||||
},
|
||||
documentColumnResizeListener: null,
|
||||
documentColumnResizeEndListener: null,
|
||||
lastResizeHelperX: null,
|
||||
resizeColumnElement: null,
|
||||
mutationObserver: null,
|
||||
watch: {
|
||||
expandedKeys(newValue) {
|
||||
this.d_expandedKeys = newValue;
|
||||
|
@ -246,11 +248,32 @@ export default {
|
|||
this.d_multiSortMeta = newValue;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateDirection();
|
||||
this.observeDirectionChanges();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.destroyStyleElement();
|
||||
this.d_columns.clear();
|
||||
|
||||
if (this.mutationObserver) {
|
||||
this.mutationObserver.disconnect();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateDirection() {
|
||||
this.isRTL = !!this.$el.closest('[dir="rtl"]');
|
||||
},
|
||||
observeDirectionChanges() {
|
||||
const targetNode = document.documentElement;
|
||||
const config = { attributes: true, attributeFilter: ['dir'] };
|
||||
|
||||
this.mutationObserver = new MutationObserver(() => {
|
||||
this.updateDirection();
|
||||
});
|
||||
|
||||
this.mutationObserver.observe(targetNode, config);
|
||||
},
|
||||
columnProp(col, prop) {
|
||||
return getVNodeProp(col, prop);
|
||||
},
|
||||
|
@ -646,7 +669,7 @@ export default {
|
|||
this.$refs.resizeHelper.style.display = 'block';
|
||||
},
|
||||
onColumnResizeEnd() {
|
||||
let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
|
||||
let delta = this.isRTL ? this.lastResizeHelperX - this.$refs.resizeHelper.offsetLeft : this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
|
||||
let columnWidth = this.resizeColumnElement.offsetWidth;
|
||||
let newColumnWidth = columnWidth + delta;
|
||||
let minWidth = this.resizeColumnElement.style.minWidth || 15;
|
||||
|
|
|
@ -15,7 +15,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-scrollable-table > .p-treetable-thead {
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
@ -25,7 +25,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-scrollable-table > .p-treetable-tfoot {
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
@ -83,12 +83,12 @@ const theme = ({ dt }) => `
|
|||
.p-treetable-column-resizer {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0;
|
||||
width: ${dt('treetable.column.resizer.width')};
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
cursor: col-resize;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
@ -153,7 +153,7 @@ const theme = ({ dt }) => `
|
|||
border-width: 0 0 1px 0;
|
||||
color: ${dt('treetable.header.cell.color')};
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')},
|
||||
outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
|
||||
}
|
||||
|
@ -171,7 +171,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-tbody > tr > td {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
border-color: ${dt('treetable.body.cell.border.color')};
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
|
@ -189,11 +189,11 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
|
||||
border-bottom-color: ${dt('treetable.body.cell.selected.border.color')};
|
||||
border-block-end-color: ${dt('treetable.body.cell.selected.border.color')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr.p-treetable-row-selected > td {
|
||||
border-bottom-color: ${dt('treetable.body.cell.selected.border.color')};
|
||||
border-block-end-color: ${dt('treetable.body.cell.selected.border.color')};
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr:focus-visible,
|
||||
|
@ -204,7 +204,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
padding: ${dt('treetable.footer.cell.padding')};
|
||||
border-color: ${dt('treetable.footer.cell.border.color')};
|
||||
border-style: solid;
|
||||
|
@ -427,6 +427,10 @@ const theme = ({ dt }) => `
|
|||
outline: ${dt('treetable.node.toggle.button.focus.ring.width')} ${dt('treetable.node.toggle.button.focus.ring.style')} ${dt('treetable.node.toggle.button.focus.ring.color')};
|
||||
outline-offset: ${dt('treetable.node.toggle.button.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-treetable-node-toggle-icon:dir(rtl) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
|
|
Loading…
Reference in New Issue