From b00da05efb366a22f61007ab09858f0cc6014ffc Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 28 Oct 2024 10:56:50 +0300
Subject: [PATCH] Refactor #6636 - For Slider

---
 packages/primevue/src/slider/Slider.vue       | 110 +++++++++++++-----
 .../primevue/src/slider/style/SliderStyle.js  |  20 ++--
 packages/primevue/src/tablist/TabList.vue     |  31 +++--
 3 files changed, 103 insertions(+), 58 deletions(-)

diff --git a/packages/primevue/src/slider/Slider.vue b/packages/primevue/src/slider/Slider.vue
index 49a69b533..cef9b30ee 100755
--- a/packages/primevue/src/slider/Slider.vue
+++ b/packages/primevue/src/slider/Slider.vue
@@ -1,10 +1,10 @@
 <template>
     <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false">
-        <span :class="cx('range')" :style="[sx('range'), rangeStyle]" v-bind="ptm('range')"></span>
+        <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')"></span>
         <span
             v-if="!range"
             :class="cx('handle')"
-            :style="[sx('handle'), handleStyle]"
+            :style="[sx('handle'), handleStyle()]"
             @touchstart.passive="onDragStart($event)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
@@ -24,7 +24,7 @@
         <span
             v-if="range"
             :class="cx('handle')"
-            :style="[sx('handle'), rangeStartHandleStyle]"
+            :style="[sx('handle'), rangeStartHandleStyle()]"
             @touchstart.passive="onDragStart($event, 0)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
@@ -44,7 +44,7 @@
         <span
             v-if="range"
             :class="cx('handle')"
-            :style="[sx('handle'), rangeEndHandleStyle]"
+            :style="[sx('handle'), rangeEndHandleStyle()]"
             @touchstart.passive="onDragStart($event, 1)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
@@ -81,8 +81,22 @@ export default {
     barHeight: null,
     dragListener: null,
     dragEndListener: null,
+    mutationObserver: null,
+    data() {
+        return {
+            isRTL: false
+        };
+    },
     beforeUnmount() {
         this.unbindDragListeners();
+
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    },
+    mounted() {
+        this.updateDirection();
+        this.observeDirectionChanges();
     },
     methods: {
         updateDomData() {
@@ -98,8 +112,16 @@ export default {
             let pageX = event.touches ? event.touches[0].pageX : event.pageX;
             let pageY = event.touches ? event.touches[0].pageY : event.pageY;
 
-            if (this.orientation === 'horizontal') handleValue = ((pageX - this.initX) * 100) / this.barWidth;
-            else handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
+            if (this.orientation === 'horizontal') {
+                if (this.isRTL) {
+                    handleValue = ((this.initX + this.barWidth - pageX) * 100) / this.barWidth;
+                } else {
+                    handleValue = ((pageX - this.initX) * 100) / this.barWidth;
+                }
+            } else {
+                handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
+            }
+
             let newValue = (this.max - this.min) * (handleValue / 100) + this.min;
 
             if (this.step) {
@@ -281,6 +303,58 @@ export default {
                 document.removeEventListener('mouseup', this.dragEndListener);
                 this.dragEndListener = null;
             }
+        },
+        rangeStyle() {
+            if (this.range) {
+                const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
+                const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
+
+                if (this.horizontal) {
+                    return this.isRTL ? { right: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
+                } else {
+                    return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
+                }
+            } else {
+                if (this.horizontal) {
+                    return { width: this.handlePosition + '%' };
+                } else {
+                    return { height: this.handlePosition + '%' };
+                }
+            }
+        },
+        handleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.handlePosition + '%' } : { left: this.handlePosition + '%' };
+            } else {
+                return { bottom: this.handlePosition + '%' };
+            }
+        },
+        rangeStartHandleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.rangeStartPosition + '%' } : { left: this.rangeStartPosition + '%' };
+            } else {
+                return { bottom: this.rangeStartPosition + '%' };
+            }
+        },
+        rangeEndHandleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.rangeEndPosition + '%' } : { left: this.rangeEndPosition + '%' };
+            } else {
+                return { bottom: this.rangeEndPosition + '%' };
+            }
+        },
+        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);
         }
     },
     computed: {
@@ -297,22 +371,6 @@ export default {
         vertical() {
             return this.orientation === 'vertical';
         },
-        rangeStyle() {
-            if (this.range) {
-                const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
-                const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
-
-                if (this.horizontal) return { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
-                else return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
-            } else {
-                if (this.horizontal) return { width: this.handlePosition + '%' };
-                else return { height: this.handlePosition + '%' };
-            }
-        },
-        handleStyle() {
-            if (this.horizontal) return { left: this.handlePosition + '%' };
-            else return { bottom: this.handlePosition + '%' };
-        },
         handlePosition() {
             if (this.value < this.min) return 0;
             else if (this.value > this.max) return 100;
@@ -325,14 +383,6 @@ export default {
         rangeEndPosition() {
             if (this.value && this.value.length === 2) return ((this.value[1] > this.max ? 100 : this.value[1] - this.min) * 100) / (this.max - this.min);
             else return 100;
-        },
-        rangeStartHandleStyle() {
-            if (this.horizontal) return { left: this.rangeStartPosition + '%' };
-            else return { bottom: this.rangeStartPosition + '%' };
-        },
-        rangeEndHandleStyle() {
-            if (this.horizontal) return { left: this.rangeEndPosition + '%' };
-            else return { bottom: this.rangeEndPosition + '%' };
         }
     }
 };
diff --git a/packages/primevue/src/slider/style/SliderStyle.js b/packages/primevue/src/slider/style/SliderStyle.js
index 29feaf871..df18a972e 100644
--- a/packages/primevue/src/slider/style/SliderStyle.js
+++ b/packages/primevue/src/slider/style/SliderStyle.js
@@ -60,15 +60,15 @@ const theme = ({ dt }) => `
 }
 
 .p-slider-horizontal .p-slider-range {
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     height: 100%;
 }
 
 .p-slider-horizontal .p-slider-handle {
-    top: 50%;
-    margin-top: calc(-1 * calc(${dt('slider.handle.height')} / 2));
-    margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
+    inset-block-start: 50%;
+    margin-block-start: calc(-1 * calc(${dt('slider.handle.height')} / 2));
+    margin-inline-start: calc(-1 * calc(${dt('slider.handle.width')} / 2));
 }
 
 .p-slider-vertical {
@@ -77,14 +77,14 @@ const theme = ({ dt }) => `
 }
 
 .p-slider-vertical .p-slider-handle {
-    left: 50%;
-    margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
-    margin-bottom: calc(-1 * calc(${dt('slider.handle.height')} / 2));
+    inset-inline-start: 50%;
+    margin-inline-start: calc(-1 * calc(${dt('slider.handle.width')} / 2));
+    margin-block-end: calc(-1 * calc(${dt('slider.handle.height')} / 2));
 }
 
 .p-slider-vertical .p-slider-range {
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: 100%;
 }
 `;
diff --git a/packages/primevue/src/tablist/TabList.vue b/packages/primevue/src/tablist/TabList.vue
index 360ff0309..55a151cc9 100644
--- a/packages/primevue/src/tablist/TabList.vue
+++ b/packages/primevue/src/tablist/TabList.vue
@@ -91,24 +91,6 @@ export default {
         }
     },
     methods: {
-        updateDirection() {
-            if (document) {
-                const isHtmlRtl = document.documentElement.getAttribute('dir') === 'rtl';
-                const isBodyRtl = document.body.getAttribute('dir') === 'rtl';
-
-                this.isRTL = isHtmlRtl || isBodyRtl || 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);
-        },
         onScroll(event) {
             this.showNavigators && this.updateButtonState();
 
@@ -179,6 +161,19 @@ export default {
             const { prevBtn, nextBtn } = this.$refs;
 
             return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0);
+        },
+        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);
         }
     },
     computed: {