refactor: replace getScrolledIndex utility with computed properties for min and max visible slides in Carousel component

Author: ismail9k

src/components/Carousel/Carousel.ts

@@ -469,6 +469,46 @@ export const Carousel = defineComponent({
       document.removeEventListener(endEvent, handleDragEnd)
     }
 
+    const minVisibleSlideIndex = computed(() => {
+      let output = 0
+      const snapAlignOffset = getSnapAlignOffset({
+        itemsToShow: +config.itemsToShow,
+        align: config.snapAlign,
+      })
+
+      if (config.wrapAround) {
+        output = currentSlideIndex.value - snapAlignOffset
+      } else {
+        output = getNumberInRange({
+          val: currentSlideIndex.value - snapAlignOffset,
+          max: slidesCount.value - +config.itemsToShow,
+          min: 0,
+        })
+      }
+
+      return Math.floor(output)
+    })
+
+    const maxVisibleSlideIndex = computed(() => {
+      let output = +config.itemsToShow - 1
+
+      const snapAlignOffset = getSnapAlignOffset({
+        itemsToShow: +config.itemsToShow,
+        align: config.snapAlign,
+      })
+
+      if (config.wrapAround) {
+        output += currentSlideIndex.value - snapAlignOffset
+      } else {
+        output += getNumberInRange({
+          val: currentSlideIndex.value - snapAlignOffset,
+          max: slidesCount.value - +config.itemsToShow,
+          min: 0,
+        })
+      }
+
+      return Math.ceil(output)
+    })
     /**
      * Autoplay
      */
@@ -584,6 +624,8 @@ export const Carousel = defineComponent({
       slides,
       currentSlide: currentSlideIndex,
       activeSlide: activeSlideIndex,
+      maxVisibleSlide: maxVisibleSlideIndex,
+      minVisibleSlide: minVisibleSlideIndex,
       maxSlide: maxSlideIndex,
       minSlide: minSlideIndex,
       slideSize,

src/components/Carousel/Carousel.types.ts

@@ -21,8 +21,8 @@ export type InjectedCarousel = Reactive<{
   slidesCount: ComputedRef<number>
   activeSlide: Ref<number>
   currentSlide: Ref<number>
-  maxSlide: ComputedRef<number>
-  minSlide: ComputedRef<number>
+  maxVisibleSlide: ComputedRef<number>
+  minVisibleSlide: ComputedRef<number>
   slideSize: Ref<number>
   isVertical: ComputedRef<boolean>
   normalizedDir: ComputedRef<NormalizedDir>

src/components/Slide/Slide.ts

@@ -17,7 +17,6 @@ import {
 
 import { injectCarousel } from '@/shared'
 import { disableChildrenTabbing } from '@/utils'
-import { getScrolledIndex } from '@/utils/getScrolledIndex'
 
 import { SlideProps } from './Slide.types'
 
@@ -78,18 +77,9 @@ export const Slide = defineComponent({
       () => currentIndex.value === carousel.activeSlide + 1
     )
     const isVisible: ComputedRef<boolean> = computed(() => {
-      if (carousel.config.itemsToShow === 'auto') {
-        return false
-      }
-      const scrolledIndex = getScrolledIndex({
-        config: carousel.config,
-        currentSlide: carousel.currentSlide,
-        slidesCount: carousel.slidesCount,
-      })
-
       return (
-        currentIndex.value >= Math.floor(scrolledIndex) &&
-        currentIndex.value < Math.ceil(scrolledIndex) + carousel.config.itemsToShow
+        currentIndex.value >= carousel.minVisibleSlide &&
+        currentIndex.value <= carousel.maxVisibleSlide
       )
     })