fix(Breadcrumb/Carousel/Pagination): handle icons in RTL mode (#2633)

This commit is contained in:
Malik-Jouda
2024-11-14 11:17:55 +02:00
committed by GitHub
parent 976dd2a386
commit e5119a9ca4
4 changed files with 25 additions and 11 deletions

View File

@@ -135,9 +135,12 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
defineSlots<CarouselSlots<T>>()
const appConfig = useAppConfig()
const { t } = useLocale()
const { dir, t } = useLocale()
const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft))
const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight))
const ui = computed(() => carousel({
orientation: props.orientation
}))
@@ -277,7 +280,7 @@ defineExpose({
<div v-if="arrows" :class="ui.arrows({ class: props.ui?.arrows })">
<UButton
:disabled="!canScrollPrev"
:icon="prevIcon || appConfig.ui.icons.arrowLeft"
:icon="prevIcon"
size="md"
color="neutral"
variant="outline"
@@ -288,7 +291,7 @@ defineExpose({
/>
<UButton
:disabled="!canScrollNext"
:icon="nextIcon || appConfig.ui.icons.arrowRight"
:icon="nextIcon"
size="md"
color="neutral"
variant="outline"