Refactor #6690 - Form ImageCompare

packages/primevue/src/imagecompare/ImageCompare.vue

@@ -12,12 +12,44 @@ import BaseImageCompare from './BaseImageCompare.vue';
 export default {
     name: 'ImageCompare',
     extends: BaseImageCompare,
+    mutationObserver: null,
+    data() {
+        return {
+            isRTL: false
+        };
+    },
+    beforeUnmount() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    },
+    mounted() {
+        this.updateDirection();
+        this.observeDirectionChanges();
+    },
     methods: {
         onSlide(event) {
             const value = event.target.value;
             const image = event.target.previousElementSibling;
 
-            image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)';
+            if (this.isRTL) {
+                image.style.clipPath = `polygon(${100 - value}% 0, 100% 0, 100% 100%, ${100 - value}% 100%)`;
+            } else {
+                image.style.clipPath = `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)`;
+            }
+        },
+        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);
         }
     }
 };

packages/primevue/src/imagecompare/style/ImageCompareStyle.js

@@ -18,12 +18,16 @@ const theme = ({ dt }) => `
     clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
+.p-imagecompare:dir(rtl) img + img {
+    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
+}
+
 .p-imagecompare-slider {
     position: relative;
     -webkit-appearance: none;
     width: calc(100% + ${dt('imagecompare.handle.size')});
     height: 100%;
-    margin-left: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));
+    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));
     background-color: transparent;
     outline: none;
     transition: all ${dt('imagecompare.handle.transition.duration')};
@@ -62,10 +66,10 @@ const theme = ({ dt }) => `
     outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
     outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
 }
-    
+
 .p-imagecompare-slider:hover {
     width: calc(100% + ${dt('imagecompare.handle.hover.size')});
-    margin-left: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));
+    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));
 }
 
 .p-imagecompare-slider:hover::-webkit-slider-thumb {