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

Refactor #6677 - For DataTable

pull/6687/head
tugcekucukoglu 2024-10-29 12:38:37 +03:00
parent b331cbf894
commit 6b8f98afda
5 changed files with 93 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/primevue/src/datatable/BodyCell.vue
View File

@ -490,25 +490,34 @@ export default {
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen'); let align = this.columnProp('alignFrozen');
let isRTL = this.$parentInstance.$parentInstance.isRTL;
if (align === 'right') { if (align === 'right') {
let right = 0; let pos = 0;
let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { 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 {
this.styleObject.right = pos + 'px';
}
} else { } else {
let left = 0; let pos = 0;
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { 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';
}
} }
} }
}, },

26
packages/primevue/src/datatable/DataTable.vue
View File

@ -378,7 +378,8 @@ export default {
d_editingMeta: {}, d_editingMeta: {},
d_filters: this.cloneFilters(this.filters), d_filters: this.cloneFilters(this.filters),
d_columns: new HelperSet({ type: 'Column' }), d_columns: new HelperSet({ type: 'Column' }),
d_columnGroups: new HelperSet({ type: 'ColumnGroup' }) d_columnGroups: new HelperSet({ type: 'ColumnGroup' }),
isRTL: false
}; };
}, },
rowTouched: false, rowTouched: false,
@ -399,6 +400,7 @@ export default {
columnWidthsState: null, columnWidthsState: null,
tableWidthState: null, tableWidthState: null,
columnWidthsRestored: false, columnWidthsRestored: false,
mutationObserver: null,
watch: { watch: {
first(newValue) { first(newValue) {
this.d_first = newValue; this.d_first = newValue;
@ -451,6 +453,9 @@ export default {
if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) { if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) {
this.updateEditingRowKeys(this.editingRows); this.updateEditingRowKeys(this.editingRows);
} }
this.updateDirection();
this.observeDirectionChanges();
}, },
beforeUnmount() { beforeUnmount() {
this.unbindColumnResizeEvents(); this.unbindColumnResizeEvents();
@ -458,6 +463,10 @@ export default {
this.d_columns.clear(); this.d_columns.clear();
this.d_columnGroups.clear(); this.d_columnGroups.clear();
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
}, },
updated() { updated() {
if (this.isStateful()) { if (this.isStateful()) {
@ -469,6 +478,19 @@ export default {
} }
}, },
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);
}, },
@ -1258,7 +1280,7 @@ export default {
this.$refs.resizeHelper.style.display = 'block'; this.$refs.resizeHelper.style.display = 'block';
}, },
onColumnResizeEnd() { 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 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;

21
packages/primevue/src/datatable/FooterCell.vue
View File

@ -67,25 +67,34 @@ export default {
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen'); let align = this.columnProp('alignFrozen');
let isRTL = this.$parentInstance.$parentInstance.isRTL;
if (align === 'right') { if (align === 'right') {
let right = 0; let pos = 0;
let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { 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 {
this.styleObject.right = pos + 'px';
}
} else { } else {
let left = 0; let pos = 0;
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { 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';
}
} }
} }
} }

21
packages/primevue/src/datatable/HeaderCell.vue
View File

@ -277,25 +277,34 @@ export default {
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen'); let align = this.columnProp('alignFrozen');
let isRTL = this.$parentInstance.$parentInstance.isRTL;
if (align === 'right') { if (align === 'right') {
let right = 0; let pos = 0;
let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { 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 {
this.styleObject.right = pos + 'px';
}
} else { } else {
let left = 0; let pos = 0;
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { 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; let filterRow = this.$el.parentElement.nextElementSibling;

44
packages/primevue/src/datatable/style/DataTableStyle.js
View File

@ -15,7 +15,7 @@ const theme = ({ dt }) => `
} }
.p-datatable-scrollable-table > .p-datatable-thead { .p-datatable-scrollable-table > .p-datatable-thead {
top: 0; inset-block-start: 0;
z-index: 1; z-index: 1;
} }
@ -24,8 +24,8 @@ const theme = ({ dt }) => `
z-index: 1; z-index: 1;
} }
.p-datatable-scrollable-table>.p-datatable-tfoot { .p-datatable-scrollable-table > .p-datatable-tfoot {
bottom: 0; inset-block-end: 0;
z-index: 1; z-index: 1;
} }
@ -85,12 +85,12 @@ const theme = ({ dt }) => `
.p-datatable-column-resizer { .p-datatable-column-resizer {
display: block; display: block;
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
right: 0; inset-inline-end: 0;
margin: 0; margin: 0;
width: ${dt('datatable.column.resizer.width')}; width: ${dt('datatable.column.resizer.width')};
height: 100%; height: 100%;
padding: 0px; padding: 0;
cursor: col-resize; cursor: col-resize;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -190,12 +190,12 @@ const theme = ({ dt }) => `
} }
.p-datatable-filter-constraint-separator { .p-datatable-filter-constraint-separator {
border-top: 1px solid ${dt('datatable.filter.constraint.separator.border.color')}; border-block-start: 1px solid ${dt('datatable.filter.constraint.separator.border.color')};
} }
.p-datatable-popover-filter { .p-datatable-popover-filter {
display: inline-flex; display: inline-flex;
margin-left: auto; margin-inline-start: auto;
} }
.p-datatable-filter-overlay-popover { .p-datatable-filter-overlay-popover {
@ -223,11 +223,11 @@ const theme = ({ dt }) => `
} }
.p-datatable-filter-rule { .p-datatable-filter-rule {
border-bottom: 1px solid ${dt('datatable.filter.rule.border.color')}; border-block-end: 1px solid ${dt('datatable.filter.rule.border.color')};
} }
.p-datatable-filter-rule:last-child { .p-datatable-filter-rule:last-child {
border-bottom: 0 none; border-block-end: 0 none;
} }
.p-datatable-filter-add-rule-button { .p-datatable-filter-add-rule-button {
@ -253,8 +253,8 @@ const theme = ({ dt }) => `
transform: none !important; transform: none !important;
min-height: 0; min-height: 0;
position: sticky; position: sticky;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
} }
.p-datatable-paginator-top { .p-datatable-paginator-top {
@ -295,7 +295,7 @@ const theme = ({ dt }) => `
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
color: ${dt('datatable.header.cell.color')}; color: ${dt('datatable.header.cell.color')};
font-weight: normal; font-weight: normal;
text-align: left; text-align: start;
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')}; outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
} }
@ -313,7 +313,7 @@ const theme = ({ dt }) => `
} }
.p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: start;
border-color: ${dt('datatable.body.cell.border.color')}; border-color: ${dt('datatable.body.cell.border.color')};
border-style: solid; border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
@ -331,11 +331,11 @@ const theme = ({ dt }) => `
} }
.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td { .p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; border-block-end-color: ${dt('datatable.body.cell.selected.border.color')};
} }
.p-datatable-tbody > tr.p-datatable-row-selected > td { .p-datatable-tbody > tr.p-datatable-row-selected > td {
border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; border-block-end-color: ${dt('datatable.body.cell.selected.border.color')};
} }
.p-datatable-tbody > tr:focus-visible, .p-datatable-tbody > tr:focus-visible,
@ -346,7 +346,7 @@ const theme = ({ dt }) => `
} }
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {
text-align: left; text-align: start;
padding: ${dt('datatable.footer.cell.padding')}; padding: ${dt('datatable.footer.cell.padding')};
border-color: ${dt('datatable.footer.cell.border.color')}; border-color: ${dt('datatable.footer.cell.border.color')};
border-style: solid; border-style: solid;
@ -530,11 +530,11 @@ const theme = ({ dt }) => `
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
} }
.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td { .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
} }
.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td { .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
} }
@ -568,7 +568,7 @@ const theme = ({ dt }) => `
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover { .p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
background: ${dt('datatable.row.toggle.button.selected.hover.background')}; background: ${dt('datatable.row.toggle.button.selected.hover.background')};
${dt('datatable.row.toggle.button.selected.hover.color')}; color: ${dt('datatable.row.toggle.button.selected.hover.color')};
} }
.p-datatable-row-toggle-button:focus-visible { .p-datatable-row-toggle-button:focus-visible {
@ -576,6 +576,10 @@ const theme = ({ dt }) => `
outline: ${dt('datatable.row.toggle.button.focus.ring.width')} ${dt('datatable.row.toggle.button.focus.ring.style')} ${dt('datatable.row.toggle.button.focus.ring.color')}; outline: ${dt('datatable.row.toggle.button.focus.ring.width')} ${dt('datatable.row.toggle.button.focus.ring.style')} ${dt('datatable.row.toggle.button.focus.ring.color')};
outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')}; outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')};
} }
.p-datatable-row-toggle-icon:dir(rtl) {
transform: rotate(180deg);
}
`; `;
const classes = { const classes = {