From 713738a9261730479e4b942b99962a8e37c8f858 Mon Sep 17 00:00:00 2001
From: malik jouda <1999.malik.jouda@gmail.com>
Date: Wed, 25 Sep 2024 15:27:23 +0300
Subject: [PATCH 1/3] fix(Carousel): arrows & indicators are broken in RTL

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

diff --git a/docs/components/content/examples/CarouselExampleArrowsCenter.vue b/docs/components/content/examples/CarouselExampleArrowsCenter.vue
index bbe864cf31..11d5ee5032 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 c90e145368..99f1dcda84 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="isRtl ? 'rtl' : 'ltr'">
     <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
     },
+    isRtl: {
+      type: Boolean,
+      default: false
+    },
     prevButton: {
       type: Object as PropType<Button & { class?: string }>,
       default: () => config.default.prevButton as Button & { class?: string }
@@ -129,7 +133,9 @@ export default defineComponent({
         return 0
       }
 
-      return Math.round(x.value / itemWidth.value) + 1
+      return props.isRtl
+        ? Math.round(-x.value / itemWidth.value) + 1
+        : Math.round(x.value / itemWidth.value) + 1
     })
 
     const pages = computed(() => {
@@ -144,15 +150,15 @@ export default defineComponent({
     const isLast = computed(() => currentPage.value === pages.value)
 
     function onClickNext () {
-      x.value += itemWidth.value
+      x.value += props.isRtl ? -itemWidth.value : itemWidth.value
     }
 
     function onClickPrev () {
-      x.value -= itemWidth.value
+      x.value -= props.isRtl ? -itemWidth.value : itemWidth.value
     }
 
     function onClick (page: number) {
-      x.value = (page - 1) * itemWidth.value
+      x.value = (page - 1) * itemWidth.value * (props.isRtl ? -1 : 1)
     }
 
     expose({
diff --git a/src/runtime/ui.config/elements/carousel.ts b/src/runtime/ui.config/elements/carousel.ts
index 2a7165430b..00d8f860dd 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'
     }
   }

From 60359bf8ed428794c2b076a80d42b907e1196fb7 Mon Sep 17 00:00:00 2001
From: malik jouda <1999.malik.jouda@gmail.com>
Date: Tue, 1 Oct 2024 22:16:54 +0300
Subject: [PATCH 2/3] =?UTF-8?q?refactor(Carousel):=20replace=20prop=20`isR?=
 =?UTF-8?q?tl=E2=80=99=20with=20prop=20`dir=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/runtime/components/elements/Carousel.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/elements/Carousel.vue b/src/runtime/components/elements/Carousel.vue
index 99f1dcda84..1b12226a8e 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" :dir="isRtl ? 'rtl' : 'ltr'">
+  <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,9 +89,9 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    isRtl: {
-      type: Boolean,
-      default: false
+    dir: {
+      type: String as PropType<'ltr' | 'rtl'>,
+      default: 'ltr'
     },
     prevButton: {
       type: Object as PropType<Button & { class?: string }>,
@@ -128,12 +128,14 @@ 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 props.isRtl
+      return isRtl.value
         ? Math.round(-x.value / itemWidth.value) + 1
         : Math.round(x.value / itemWidth.value) + 1
     })
@@ -150,15 +152,15 @@ export default defineComponent({
     const isLast = computed(() => currentPage.value === pages.value)
 
     function onClickNext () {
-      x.value += props.isRtl ? -itemWidth.value : itemWidth.value
+      x.value += isRtl.value ? -itemWidth.value : itemWidth.value
     }
 
     function onClickPrev () {
-      x.value -= props.isRtl ? -itemWidth.value : itemWidth.value
+      x.value -= isRtl.value ? -itemWidth.value : itemWidth.value
     }
 
     function onClick (page: number) {
-      x.value = (page - 1) * itemWidth.value * (props.isRtl ? -1 : 1)
+      x.value = (page - 1) * itemWidth.value * (isRtl.value ? -1 : 1)
     }
 
     expose({

From 2028e08100c3fc7c68629b21e5b40f42aa3cdde2 Mon Sep 17 00:00:00 2001
From: malik jouda <1999.malik.jouda@gmail.com>
Date: Tue, 1 Oct 2024 22:16:54 +0300
Subject: [PATCH 3/3] refactor(Carousel): replace prop `isRtl` with prop `dir`

---
 src/runtime/components/elements/Carousel.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/elements/Carousel.vue b/src/runtime/components/elements/Carousel.vue
index 99f1dcda84..1b12226a8e 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" :dir="isRtl ? 'rtl' : 'ltr'">
+  <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,9 +89,9 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    isRtl: {
-      type: Boolean,
-      default: false
+    dir: {
+      type: String as PropType<'ltr' | 'rtl'>,
+      default: 'ltr'
     },
     prevButton: {
       type: Object as PropType<Button & { class?: string }>,
@@ -128,12 +128,14 @@ 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 props.isRtl
+      return isRtl.value
         ? Math.round(-x.value / itemWidth.value) + 1
         : Math.round(x.value / itemWidth.value) + 1
     })
@@ -150,15 +152,15 @@ export default defineComponent({
     const isLast = computed(() => currentPage.value === pages.value)
 
     function onClickNext () {
-      x.value += props.isRtl ? -itemWidth.value : itemWidth.value
+      x.value += isRtl.value ? -itemWidth.value : itemWidth.value
     }
 
     function onClickPrev () {
-      x.value -= props.isRtl ? -itemWidth.value : itemWidth.value
+      x.value -= isRtl.value ? -itemWidth.value : itemWidth.value
     }
 
     function onClick (page: number) {
-      x.value = (page - 1) * itemWidth.value * (props.isRtl ? -1 : 1)
+      x.value = (page - 1) * itemWidth.value * (isRtl.value ? -1 : 1)
     }
 
     expose({