From b267464d60fe8b5d003c765d6c8c0d332e3386b5 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Thu, 21 Nov 2024 18:10:43 +0000
Subject: [PATCH] Refactor #6826 - For DataTable

---
 packages/primevue/src/datatable/BodyCell.vue  | 13 ++-------
 packages/primevue/src/datatable/DataTable.vue | 27 +++----------------
 .../primevue/src/datatable/FooterCell.vue     | 15 +++--------
 .../primevue/src/datatable/HeaderCell.vue     | 13 ++-------
 4 files changed, 10 insertions(+), 58 deletions(-)

diff --git a/packages/primevue/src/datatable/BodyCell.vue b/packages/primevue/src/datatable/BodyCell.vue
index 990a82090..4a74cff52 100755
--- a/packages/primevue/src/datatable/BodyCell.vue
+++ b/packages/primevue/src/datatable/BodyCell.vue
@@ -490,7 +490,6 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
-                let isRTL = this.$parentInstance.$parentInstance.isRTL;
 
                 if (align === 'right') {
                     let pos = 0;
@@ -500,11 +499,7 @@ export default {
                         pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.left = pos + 'px';
-                    } else {
-                        this.styleObject.right = pos + 'px';
-                    }
+                    this.styleObject.insetInlineEnd = pos + 'px';
                 } else {
                     let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@@ -513,11 +508,7 @@ export default {
                         pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.right = pos + 'px';
-                    } else {
-                        this.styleObject.left = pos + 'px';
-                    }
+                    this.styleObject.insetInlineStart = pos + 'px';
                 }
             }
         },
diff --git a/packages/primevue/src/datatable/DataTable.vue b/packages/primevue/src/datatable/DataTable.vue
index 567ed5c31..928d8adfb 100755
--- a/packages/primevue/src/datatable/DataTable.vue
+++ b/packages/primevue/src/datatable/DataTable.vue
@@ -329,6 +329,7 @@ import {
     getOuterHeight,
     getOuterWidth,
     isClickable,
+    isRTL,
     removeClass,
     setAttribute
 } from '@primeuix/utils/dom';
@@ -410,8 +411,7 @@ export default {
             d_editingMeta: {},
             d_filters: this.cloneFilters(this.filters),
             d_columns: new HelperSet({ type: 'Column' }),
-            d_columnGroups: new HelperSet({ type: 'ColumnGroup' }),
-            isRTL: false
+            d_columnGroups: new HelperSet({ type: 'ColumnGroup' })
         };
     },
     rowTouched: false,
@@ -432,7 +432,6 @@ export default {
     columnWidthsState: null,
     tableWidthState: null,
     columnWidthsRestored: false,
-    mutationObserver: null,
     watch: {
         first(newValue) {
             this.d_first = newValue;
@@ -485,9 +484,6 @@ export default {
         if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) {
             this.updateEditingRowKeys(this.editingRows);
         }
-
-        this.updateDirection();
-        this.observeDirectionChanges();
     },
     beforeUnmount() {
         this.unbindColumnResizeEvents();
@@ -495,10 +491,6 @@ export default {
 
         this.d_columns.clear();
         this.d_columnGroups.clear();
-
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
     },
     updated() {
         if (this.isStateful()) {
@@ -510,19 +502,6 @@ export default {
         }
     },
     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);
         },
@@ -1312,7 +1291,7 @@ export default {
             this.$refs.resizeHelper.style.display = 'block';
         },
         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 newColumnWidth = columnWidth + delta;
             let minWidth = this.resizeColumnElement.style.minWidth || 15;
diff --git a/packages/primevue/src/datatable/FooterCell.vue b/packages/primevue/src/datatable/FooterCell.vue
index 2ce05c84d..53fc7b83b 100644
--- a/packages/primevue/src/datatable/FooterCell.vue
+++ b/packages/primevue/src/datatable/FooterCell.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script>
+import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
 import BaseComponent from '@primevue/core/basecomponent';
 import { getVNodeProp } from '@primevue/core/utils';
-import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
 import { mergeProps } from 'vue';
 
 export default {
@@ -67,7 +67,6 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
-                let isRTL = this.$parentInstance.$parentInstance.isRTL;
 
                 if (align === 'right') {
                     let pos = 0;
@@ -77,11 +76,7 @@ export default {
                         pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.left = pos + 'px';
-                    } else {
-                        this.styleObject.right = pos + 'px';
-                    }
+                    this.styleObject.insetInlineEnd = pos + 'px';
                 } else {
                     let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@@ -90,11 +85,7 @@ export default {
                         pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.right = pos + 'px';
-                    } else {
-                        this.styleObject.left = pos + 'px';
-                    }
+                    this.styleObject.insetInlineStart = pos + 'px';
                 }
             }
         }
diff --git a/packages/primevue/src/datatable/HeaderCell.vue b/packages/primevue/src/datatable/HeaderCell.vue
index 25b293628..26e7db576 100644
--- a/packages/primevue/src/datatable/HeaderCell.vue
+++ b/packages/primevue/src/datatable/HeaderCell.vue
@@ -277,7 +277,6 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
-                let isRTL = this.$parentInstance.$parentInstance.isRTL;
 
                 if (align === 'right') {
                     let pos = 0;
@@ -287,11 +286,7 @@ export default {
                         pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.left = pos + 'px';
-                    } else {
-                        this.styleObject.right = pos + 'px';
-                    }
+                    this.styleObject.insetInlineEnd = pos + 'px';
                 } else {
                     let pos = 0;
                     let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
@@ -300,11 +295,7 @@ export default {
                         pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
 
-                    if (isRTL) {
-                        this.styleObject.right = pos + 'px';
-                    } else {
-                        this.styleObject.left = pos + 'px';
-                    }
+                    this.styleObject.insetInlineStart = pos + 'px';
                 }
 
                 let filterRow = this.$el.parentElement.nextElementSibling;