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): next and prev buttons disabled (#1619)

Browse Source
This commit is contained in:
Kshitij Subedi
2024-04-05 16:05:50 +05:45
committed by GitHub
parent 5e84fd0570
commit e909884d03
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,7 +56,7 @@
</template>
<script lang="ts">
import { ref, toRef, toRefs, computed, defineComponent } from 'vue'
import { ref, toRef, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge } from 'tailwind-merge'
import { mergeConfig } from '../../utils'
@@ -112,10 +112,9 @@ export default defineComponent({
const carouselRef = ref<HTMLElement>()
const itemWidth = ref(0)
const { x, arrivedState } = useScroll(carouselRef, { behavior: 'smooth' })
const { width: carouselWidth } = useElementSize(carouselRef)
const { x } = useScroll(carouselRef, { behavior: 'smooth' })
const { left: isFirst, right: isLast } = toRefs(arrivedState)
const { width: carouselWidth } = useElementSize(carouselRef)
useCarouselScroll(carouselRef)
@@ -125,7 +124,13 @@ export default defineComponent({
itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
})
const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1)
const currentPage = computed(() => {
if (!itemWidth.value) {
return 0
}
return Math.round(x.value / itemWidth.value) + 1
})
const pages = computed(() => {
if (!itemWidth.value) {
@@ -135,6 +140,9 @@ export default defineComponent({
return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1
})
const isFirst = computed(() => currentPage.value <= 1)
const isLast = computed(() => currentPage.value === pages.value)
function onClickNext () {
x.value += itemWidth.value
}