Carousel arrows & indicators are broken in RTL

[MuhammadM1998]

Environment

N/A

Version

v2.13.0

Reproduction

https://ui.nuxt.com/components/carousel#arrows

Description

• Open the docs carousel link above
• Add dir="rtl" to the carousel parent or html tag
• Try to click the arrows and indicators
• They won't work as expected

I've created a video repro but my internet is poor it didn't upload 😅

Additional context

• I've created a branch locally and fixed the style issue by reverting arrows positions in rtl in carousel.ts

prevButton: {
      color: 'black' as const,
-      class: 'rtl:[&_span:first-child]:rotate-180 absolute left-4 top-1/2 transform -translate-y-1/2 rounded-full',
+      class: 'rtl:[&_span:first-child]:rotate-180 absolute ltr:left-4 rtl:right-4 top-1/2 transform -translate-y-1/2 rounded-full',
      icon: 'i-heroicons-chevron-left-20-solid'
},
nextButton: {
      color: 'black' as const,
-     class: 'rtl:[&_span:last-child]:rotate-180 absolute right-4 top-1/2 transform -translate-y-1/2 rounded-full',
+     class: 'rtl:[&_span:last-child]:rotate-180 absolute ltr:right-4 rtl:left-4 top-1/2 transform -translate-y-1/2 rounded-full',
      icon: 'i-heroicons-chevron-right-20-solid '
}

• Also fixed the slides not moving correctly when clicking arrows and indicators by negating the direction in rtl in carousel.vue

function onClickNext () {
+  const dirMultiplier = getComputedStyle(carouselRef.value).direction === 'ltr' ? 1 : -1
-  x.value += itemWidth.value
+  x.value += itemWidth.value * dirMultiplier
}

function onClickPrev () {
+  const dirMultiplier = getComputedStyle(carouselRef.value).direction === 'ltr' ? 1 : -1
-  x.value -= itemWidth.value
+  x.value -= itemWidth.value * dirMultiplier
}

function onClick (page: number) {
+ const dirMultiplier = getComputedStyle(carouselRef.value).direction === 'ltr' ? 1 : -1
-  x.value = (page - 1) * itemWidth.value
+  x.value = (page - 1) * (itemWidth.value * dirMultiplier)
)}

• The only issue left is the style of the active indicator which is determined by this line. Problem is carouselRef isn't reactive so using getComputedStyle on it to get the dir won't work (That's why I'm repeating it inside each function)

Logs

No response

[benjamincanac]

Would you mind submitting a PR so I can see the preview?

[MuhammadM1998]

Sure no problem

[beingmomen]

I have the same issue