arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Carousel): arrows & indicators are broken in RTL (#2251)

Browse Source
This commit is contained in:
Malik-Jouda
2024-10-02 12:16:00 +03:00
committed by GitHub
parent 474accbefb
commit db5e5c4907
3 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/runtime/components/elements/Carousel.vue
View File

@@ -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({

4
src/runtime/ui.config/elements/carousel.ts
View File

@@ -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'
}
}