From 709c1023c05a9e4934453b677d43771c38ca1ddd Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 29 Oct 2024 12:42:59 +0300
Subject: [PATCH] Refactor #6677 - For TreeTable

---
 packages/primevue/src/treetable/BodyCell.vue  | 33 +++++++++++-------
 .../primevue/src/treetable/FooterCell.vue     | 21 ++++++++----
 .../primevue/src/treetable/HeaderCell.vue     | 21 ++++++++----
 packages/primevue/src/treetable/TreeTable.vue | 27 +++++++++++++--
 .../src/treetable/style/TreeTableStyle.js     | 34 +++++++++++--------
 5 files changed, 95 insertions(+), 41 deletions(-)

diff --git a/packages/primevue/src/treetable/BodyCell.vue b/packages/primevue/src/treetable/BodyCell.vue
index 7b564ba34..b2d141450 100644
--- a/packages/primevue/src/treetable/BodyCell.vue
+++ b/packages/primevue/src/treetable/BodyCell.vue
@@ -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 {
+                        this.styleObject.right = pos + 'px';
+                    }
                 } else {
-                    let left = 0;
+                    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';
+                    }
                 }
             }
         },
diff --git a/packages/primevue/src/treetable/FooterCell.vue b/packages/primevue/src/treetable/FooterCell.vue
index ce29fcd8a..40282fa7e 100644
--- a/packages/primevue/src/treetable/FooterCell.vue
+++ b/packages/primevue/src/treetable/FooterCell.vue
@@ -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 {
+                        this.styleObject.right = pos + 'px';
+                    }
                 } else {
-                    let left = 0;
+                    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';
+                    }
                 }
             }
         }
diff --git a/packages/primevue/src/treetable/HeaderCell.vue b/packages/primevue/src/treetable/HeaderCell.vue
index 4340cac0e..bafed6a0f 100644
--- a/packages/primevue/src/treetable/HeaderCell.vue
+++ b/packages/primevue/src/treetable/HeaderCell.vue
@@ -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 {
+                        this.styleObject.right = pos + 'px';
+                    }
                 } else {
-                    let left = 0;
+                    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;
diff --git a/packages/primevue/src/treetable/TreeTable.vue b/packages/primevue/src/treetable/TreeTable.vue
index cd4377f52..8ed027331 100755
--- a/packages/primevue/src/treetable/TreeTable.vue
+++ b/packages/primevue/src/treetable/TreeTable.vue
@@ -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;
diff --git a/packages/primevue/src/treetable/style/TreeTableStyle.js b/packages/primevue/src/treetable/style/TreeTableStyle.js
index ea1c9f96a..d471fd6a0 100644
--- a/packages/primevue/src/treetable/style/TreeTableStyle.js
+++ b/packages/primevue/src/treetable/style/TreeTableStyle.js
@@ -15,7 +15,7 @@ const theme = ({ dt }) => `
 }
 
 .p-treetable-scrollable-table > .p-treetable-thead {
-    top: 0;
+    inset-block-start: 0;
     z-index: 1;
 }
 
@@ -24,8 +24,8 @@ const theme = ({ dt }) => `
     z-index: 1;
 }
 
-.p-treetable-scrollable-table>.p-treetable-tfoot {
-    bottom: 0;
+.p-treetable-scrollable-table > .p-treetable-tfoot {
+    inset-block-end: 0;
     z-index: 1;
 }
 
@@ -42,7 +42,7 @@ const theme = ({ dt }) => `
     background: ${dt('treetable.header.cell.background')};
 }
 
-.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot  {
+.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot {
     background: ${dt('treetable.footer.cell.background')};
 }
 
@@ -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;
@@ -311,7 +311,7 @@ const theme = ({ dt }) => `
     border-width: 1px;
 }
 
-.p-treetable-gridlines .p-treetable-tfoot >tr > td {
+.p-treetable-gridlines .p-treetable-tfoot > tr > td {
     border-width: 1px 0 1px 1px;
 }
 
@@ -371,11 +371,11 @@ const theme = ({ dt }) => `
     padding: 0.9375rem 1.25rem;
 }
 
-.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {
+.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
     padding: 0.9375rem 1.25rem;
 }
 
-.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {
+.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
     padding: 0.9375rem 1.25rem;
 }
 
@@ -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 = {