fix(Progress): handle horizontal animation in RTL mode (#2723)

src/runtime/components/Progress.vue

@@ -50,6 +50,7 @@ export type ProgressSlots = {
 import { computed } from 'vue'
 import { ProgressIndicator, ProgressRoot, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(defineProps<ProgressProps>(), {
   inverted: false,
@@ -59,6 +60,8 @@ const props = withDefaults(defineProps<ProgressProps>(), {
 const emits = defineEmits<ProgressEmits>()
 defineSlots<ProgressSlots>()
 
+const { dir } = useLocale()
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'getValueLabel', 'modelValue'), emits)
 
 const isIndeterminate = computed(() => rootProps.value.modelValue === null)
@@ -93,8 +96,20 @@ const indicatorStyle = computed(() => {
     return
   }
 
-  return {
-    transform: `translate${props.orientation === 'vertical' ? 'Y' : 'X'}(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+  if (props.orientation === 'vertical') {
+    return {
+      transform: `translateY(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+    }
+  } else {
+    if (dir.value === 'rtl') {
+      return {
+        transform: `translateX(${props.inverted ? '-' : ''}${100 - percent.value}%)`
+      }
+    } else {
+      return {
+        transform: `translateX(${props.inverted ? '' : '-'}${100 - percent.value}%)`
+      }
+    }
   }
 })
 

src/runtime/keyframes.css

@@ -362,6 +362,24 @@
   }
 }
 
+
+@keyframes carousel-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(100%)
+  }
+
+  100% {
+    transform: translateX(-200%)
+  }
+}
+
+
 @keyframes carousel-vertical {
 
   0%,
@@ -394,6 +412,22 @@
   }
 }
 
+@keyframes carousel-inverse-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(-200%)
+  }
+
+  100% {
+    transform: translateX(100%)
+  }
+}
+
 @keyframes carousel-inverse-vertical {
 
   0%,

src/theme/progress.ts

@@ -162,7 +162,7 @@ export default (options: Required<ModuleOptions>) => ({
     orientation: 'horizontal',
     animation: 'carousel',
     class: {
-      indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]'
+      indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
     }
   }, {
     orientation: 'vertical',
@@ -174,7 +174,7 @@ export default (options: Required<ModuleOptions>) => ({
     orientation: 'horizontal',
     animation: 'carousel-inverse',
     class: {
-      indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]'
+      indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
     }
   }, {
     orientation: 'vertical',