From e7b69b7d6f0ebb3c578b9f58bcddf8ad36e6c6ce Mon Sep 17 00:00:00 2001
From: Malik-Jouda <48517781+Malik-Jouda@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:17:06 +0200
Subject: [PATCH] fix(Calendar): handle icons in RTL mode (#2770)

---
 src/runtime/components/Calendar.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index d89cf0b7..f4cb0a75 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -71,6 +71,11 @@ const { code: locale, dir, t } = useLocale()
 
 const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits)
 
+const prevYearIcon = computed(() => dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft)
+const prevMonthIcon = computed(() => dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft)
+const nextYearIcon = computed(() => dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight)
+const nextMonthIcon = computed(() => dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight)
+
 const ui = computed(() => calendar({
   color: props.color,
   size: props.size
@@ -99,10 +104,10 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
-        <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
-        <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Prev>
       <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
@@ -110,10 +115,10 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
         </slot>
       </Calendar.Heading>
       <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
-        <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Next>
       <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
-        <UButton :icon="appConfig.ui.icons.chevronDoubleRight" :size="props.size" color="neutral" variant="ghost" />
+        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Next>
     </Calendar.Header>
     <div :class="ui.body({ class: props.ui?.body })">