From 7cfe3d852e88e493c614dd99ed5dcb560b915693 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 28 Oct 2024 12:59:00 +0300
Subject: [PATCH] Refactor #6647 - For ScrollPanel

---
 .../primevue/src/scrollpanel/ScrollPanel.vue  | 43 ++++++++++++++++---
 .../src/scrollpanel/style/ScrollPanelStyle.js |  5 +--
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/primevue/src/scrollpanel/ScrollPanel.vue b/packages/primevue/src/scrollpanel/ScrollPanel.vue
index 72cdeef3a..9e53e0ec8 100644
--- a/packages/primevue/src/scrollpanel/ScrollPanel.vue
+++ b/packages/primevue/src/scrollpanel/ScrollPanel.vue
@@ -40,8 +40,8 @@
 </template>
 
 <script>
+import { addClass, getHeight, removeClass } from '@primeuix/utils/dom';
 import { UniqueComponentId } from '@primevue/core/utils';
-import { getHeight, addClass, removeClass } from '@primeuix/utils/dom';
 import BaseScrollPanel from './BaseScrollPanel.vue';
 
 export default {
@@ -61,12 +61,14 @@ export default {
     lastPageY: null,
     timer: null,
     outsideClickListener: null,
+    mutationObserver: null,
     data() {
         return {
             id: this.$attrs.id,
             orientation: 'vertical',
             lastScrollTop: 0,
-            lastScrollLeft: 0
+            lastScrollLeft: 0,
+            isRTL: false
         };
     },
     watch: {
@@ -80,6 +82,9 @@ export default {
         if (this.$el.offsetParent) {
             this.initialize();
         }
+
+        this.updateDirection();
+        this.observeDirectionChanges();
     },
     updated() {
         if (!this.initialized && this.$el.offsetParent) {
@@ -92,8 +97,25 @@ export default {
         if (this.frame) {
             window.cancelAnimationFrame(this.frame);
         }
+
+        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);
+        },
         initialize() {
             this.moveBar();
             this.bindDocumentResizeListener();
@@ -137,7 +159,12 @@ export default {
                         } else {
                             this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
                             !this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                            this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+
+                            if (this.isRTL) {
+                                this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; right:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                            } else {
+                                this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                            }
                         }
                     }
 
@@ -148,8 +175,14 @@ export default {
                         } else {
                             this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
                             !this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                            this.$refs.yBar.style.cssText =
-                                'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+
+                            if (this.isRTL) {
+                                this.$refs.yBar.style.cssText =
+                                    'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);left:' + right + 'px;';
+                            } else {
+                                this.$refs.yBar.style.cssText =
+                                    'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                            }
                         }
                     }
                 });
diff --git a/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js b/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
index 898fc80c4..a7252ba70 100644
--- a/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
+++ b/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
@@ -31,7 +31,6 @@ const theme = ({ dt }) => `
     cursor: pointer;
     opacity: 0;
     outline-color: transparent;
-    transition: outline-color ${dt('scrollpanel.transition.duration')};
     background: ${dt('scrollpanel.bar.background')};
     border: 0 none;
     transition: outline-color ${dt('scrollpanel.transition.duration')}, opacity ${dt('scrollpanel.transition.duration')};
@@ -45,12 +44,12 @@ const theme = ({ dt }) => `
 
 .p-scrollpanel-bar-y {
     width: ${dt('scrollpanel.bar.size')};
-    top: 0;
+    inset-block-start: 0;
 }
 
 .p-scrollpanel-bar-x {
     height: ${dt('scrollpanel.bar.size')};
-    bottom: 0;
+    inset-block-end: 0;
 }
 
 .p-scrollpanel-hidden {