Refactor #6647 - For ScrollPanel

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,9 +159,14 @@ export default {
                         } else {
                             this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
                             !this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+
+                            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;';
                             }
                         }
+                    }
 
                     if (this.$refs.yBar) {
                         if (this.scrollYRatio >= 1) {
@@ -148,10 +175,16 @@ export default {
                         } else {
                             this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
                             !this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+
+                            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;';
                             }
                         }
+                    }
                 });
             }
         },

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 {