vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #6826 - For TreeTable

pull/6829/head
Mert Sincan 2024-11-21 18:10:54 +00:00
parent b267464d60
commit db61c5ec80
4 changed files with 11 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/primevue/src/treetable/BodyCell.vue
View File

@ -171,7 +171,6 @@ export default {
}, },
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let isRTL = this.$parentInstance.isRTL;
let align = this.columnProp('alignFrozen'); let align = this.columnProp('alignFrozen');
if (align === 'right') { if (align === 'right') {
@ -182,11 +181,7 @@ export default {
pos = getOuterWidth(next) + parseFloat(next.style.right || 0); pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
} }
if (isRTL) { this.styleObject.insetInlineEnd = pos + 'px';
this.styleObject.left = pos + 'px';
} else {
this.styleObject.right = pos + 'px';
}
} else { } else {
let pos = 0; let pos = 0;
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@ -195,11 +190,7 @@ export default {
pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
} }
if (isRTL) { this.styleObject.insetInlineStart = pos + 'px';
this.styleObject.right = pos + 'px';
} else {
this.styleObject.left = pos + 'px';
}
} }
} }
}, },

15
packages/primevue/src/treetable/FooterCell.vue
View File

@ -6,8 +6,8 @@
</template> </template>
<script> <script>
import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { getNextElementSibling, getPreviousElementSibling, getOuterWidth } from '@primeuix/utils/dom';
import { getVNodeProp } from '@primevue/core/utils'; import { getVNodeProp } from '@primevue/core/utils';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
@ -66,7 +66,6 @@ export default {
}, },
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let isRTL = this.$parentInstance.isRTL;
let align = this.columnProp('alignFrozen'); let align = this.columnProp('alignFrozen');
if (align === 'right') { if (align === 'right') {
@ -77,11 +76,7 @@ export default {
pos = getOuterWidth(next) + parseFloat(next.style.right || 0); pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
} }
if (isRTL) { this.styleObject.insetInlineEnd = pos + 'px';
this.styleObject.left = pos + 'px';
} else {
this.styleObject.right = pos + 'px';
}
} else { } else {
let pos = 0; let pos = 0;
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@ -90,11 +85,7 @@ export default {
pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
} }
if (isRTL) { this.styleObject.insetInlineStart = pos + 'px';
this.styleObject.right = pos + 'px';
} else {
this.styleObject.left = pos + 'px';
}
} }
} }
} }

15
packages/primevue/src/treetable/HeaderCell.vue
View File

@ -26,8 +26,8 @@
</template> </template>
<script> <script>
import { getAttribute, getIndex, getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { getNextElementSibling, getPreviousElementSibling, getOuterWidth, getAttribute, getIndex } from '@primeuix/utils/dom';
import { getVNodeProp } from '@primevue/core/utils'; import { getVNodeProp } from '@primevue/core/utils';
import SortAltIcon from '@primevue/icons/sortalt'; import SortAltIcon from '@primevue/icons/sortalt';
import SortAmountDownIcon from '@primevue/icons/sortamountdown'; import SortAmountDownIcon from '@primevue/icons/sortamountdown';
@ -115,7 +115,6 @@ export default {
}, },
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let isRTL = this.$parentInstance.isRTL;
let align = this.columnProp('alignFrozen'); let align = this.columnProp('alignFrozen');
if (align === 'right') { if (align === 'right') {
@ -126,11 +125,7 @@ export default {
pos = getOuterWidth(next) + parseFloat(next.style.right || 0); pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
} }
if (isRTL) { this.styleObject.insetInlineEnd = pos + 'px';
this.styleObject.left = pos + 'px';
} else {
this.styleObject.right = pos + 'px';
}
} else { } else {
let pos = 0; let pos = 0;
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@ -139,11 +134,7 @@ export default {
pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
} }
if (isRTL) { this.styleObject.insetInlineStart = pos + 'px';
this.styleObject.right = pos + 'px';
} else {
this.styleObject.left = pos + 'px';
}
} }
let filterRow = this.$el.parentElement.nextElementSibling; let filterRow = this.$el.parentElement.nextElementSibling;

29
packages/primevue/src/treetable/TreeTable.vue
View File

@ -203,7 +203,7 @@
</template> </template>
<script> <script>
import { addStyle, clearSelection, find, getAttribute, getIndex, getOffset, getOuterWidth, setAttribute } from '@primeuix/utils/dom'; import { addStyle, clearSelection, find, getAttribute, getIndex, getOffset, getOuterWidth, isRTL, setAttribute } from '@primeuix/utils/dom';
import { localeComparator, resolveFieldData, sort } from '@primeuix/utils/object'; import { localeComparator, resolveFieldData, sort } from '@primeuix/utils/object';
import { FilterService } from '@primevue/core/api'; import { FilterService } from '@primevue/core/api';
import { getVNodeProp, HelperSet } from '@primevue/core/utils'; import { getVNodeProp, HelperSet } from '@primevue/core/utils';
@ -251,15 +251,13 @@ export default {
d_sortOrder: this.sortOrder, d_sortOrder: this.sortOrder,
d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [], d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
hasASelectedNode: false, hasASelectedNode: false,
d_columns: new HelperSet({ type: 'Column' }), d_columns: new HelperSet({ type: 'Column' })
isRTL: false
}; };
}, },
documentColumnResizeListener: null, documentColumnResizeListener: null,
documentColumnResizeEndListener: null, documentColumnResizeEndListener: null,
lastResizeHelperX: null, lastResizeHelperX: null,
resizeColumnElement: null, resizeColumnElement: null,
mutationObserver: null,
watch: { watch: {
expandedKeys(newValue) { expandedKeys(newValue) {
this.d_expandedKeys = newValue; this.d_expandedKeys = newValue;
@ -280,32 +278,11 @@ export default {
this.d_multiSortMeta = newValue; this.d_multiSortMeta = newValue;
} }
}, },
mounted() {
this.updateDirection();
this.observeDirectionChanges();
},
beforeUnmount() { beforeUnmount() {
this.destroyStyleElement(); this.destroyStyleElement();
this.d_columns.clear(); this.d_columns.clear();
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
}, },
methods: { 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) { columnProp(col, prop) {
return getVNodeProp(col, prop); return getVNodeProp(col, prop);
}, },
@ -701,7 +678,7 @@ export default {
this.$refs.resizeHelper.style.display = 'block'; this.$refs.resizeHelper.style.display = 'block';
}, },
onColumnResizeEnd() { onColumnResizeEnd() {
let delta = this.isRTL ? this.lastResizeHelperX - this.$refs.resizeHelper.offsetLeft : this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX; let delta = isRTL(this.$el) ? this.lastResizeHelperX - this.$refs.resizeHelper.offsetLeft : this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
let columnWidth = this.resizeColumnElement.offsetWidth; let columnWidth = this.resizeColumnElement.offsetWidth;
let newColumnWidth = columnWidth + delta; let newColumnWidth = columnWidth + delta;
let minWidth = this.resizeColumnElement.style.minWidth || 15; let minWidth = this.resizeColumnElement.style.minWidth || 15;