From db5e5c49078a4faac3fb0c41b23b0dbd64efdd77 Mon Sep 17 00:00:00 2001
From: Malik-Jouda <48517781+Malik-Jouda@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:16:00 +0300
Subject: [PATCH] fix(Carousel): arrows & indicators are broken in RTL (#2251)

---
 .../examples/CarouselExampleArrowsCenter.vue   |  4 ++--
 src/runtime/components/elements/Carousel.vue   | 18 +++++++++++++-----
 src/runtime/ui.config/elements/carousel.ts     |  4 ++--
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/docs/components/content/examples/CarouselExampleArrowsCenter.vue b/docs/components/content/examples/CarouselExampleArrowsCenter.vue
index bbe864cf..11d5ee50 100644
--- a/docs/components/content/examples/CarouselExampleArrowsCenter.vue
+++ b/docs/components/content/examples/CarouselExampleArrowsCenter.vue
@@ -20,12 +20,12 @@ const items = [
     :prev-button="{
       color: 'gray',
       icon: 'i-heroicons-arrow-left-20-solid',
-      class: '-left-12'
+      class: '-start-12'
     }"
     :next-button="{
       color: 'gray',
       icon: 'i-heroicons-arrow-right-20-solid',
-      class: '-right-12'
+      class: '-end-12'
     }"
     arrows
     class="w-64 mx-auto"
diff --git a/src/runtime/components/elements/Carousel.vue b/src/runtime/components/elements/Carousel.vue
index c90e1453..1b12226a 100644
--- a/src/runtime/components/elements/Carousel.vue
+++ b/src/runtime/components/elements/Carousel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs" :dir="dir">
     <div ref="carouselRef" :class="ui.container" class="no-scrollbar">
       <div
         v-for="(item, index) in items"
@@ -89,6 +89,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    dir: {
+      type: String as PropType<'ltr' | 'rtl'>,
+      default: 'ltr'
+    },
     prevButton: {
       type: Object as PropType<Button & { class?: string }>,
       default: () => config.default.prevButton as Button & { class?: string }
@@ -124,12 +128,16 @@ export default defineComponent({
       itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
     })
 
+    const isRtl = computed(() => props.dir === 'rtl')
+
     const currentPage = computed(() => {
       if (!itemWidth.value) {
         return 0
       }
 
-      return Math.round(x.value / itemWidth.value) + 1
+      return isRtl.value
+        ? Math.round(-x.value / itemWidth.value) + 1
+        : Math.round(x.value / itemWidth.value) + 1
     })
 
     const pages = computed(() => {
@@ -144,15 +152,15 @@ export default defineComponent({
     const isLast = computed(() => currentPage.value === pages.value)
 
     function onClickNext () {
-      x.value += itemWidth.value
+      x.value += isRtl.value ? -itemWidth.value : itemWidth.value
     }
 
     function onClickPrev () {
-      x.value -= itemWidth.value
+      x.value -= isRtl.value ? -itemWidth.value : itemWidth.value
     }
 
     function onClick (page: number) {
-      x.value = (page - 1) * itemWidth.value
+      x.value = (page - 1) * itemWidth.value * (isRtl.value ? -1 : 1)
     }
 
     expose({
diff --git a/src/runtime/ui.config/elements/carousel.ts b/src/runtime/ui.config/elements/carousel.ts
index 2a716543..00d8f860 100644
--- a/src/runtime/ui.config/elements/carousel.ts
+++ b/src/runtime/ui.config/elements/carousel.ts
@@ -14,12 +14,12 @@ export default {
   default: {
     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 start-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 end-4 top-1/2 transform -translate-y-1/2 rounded-full',
       icon: 'i-heroicons-chevron-right-20-solid'
     }
   }