Put behind clamp option

Author: Tofandel

src/components/Carousel/Carousel.ts

@@ -141,6 +141,15 @@ export const Carousel = defineComponent({
       })
 
       Object.assign(config, fallbackConfig.value, newConfig)
+
+      // Validate itemsToShow
+      if (!isAuto.value) {
+        config.itemsToShow = getNumberInRange({
+          val: Number(config.itemsToShow),
+          max: props.clamp ? slidesCount.value : Infinity,
+          min: 1,
+        });
+      }
     }
 
     const handleResize = throttle(() => {
@@ -209,11 +218,6 @@ export const Carousel = defineComponent({
           min: minSlideIndex.value,
         })
       }
-
-      // Validate itemsToShow
-      if (!isAuto.value) {
-        config.itemsToShow = Math.max(Number(config.itemsToShow), 1);
-      }
     }
 
     const ignoreAnimations = computed<false | string[]>(() => {
@@ -848,7 +852,7 @@ export const Carousel = defineComponent({
       slidesCount,
     })
 
-    expose<CarouselExposed>({
+    expose<CarouselExposed>(reactive({
       data,
       next,
       prev,
@@ -858,7 +862,7 @@ export const Carousel = defineComponent({
       updateSlideSize,
       updateSlidesData,
       ...toRefs(provided),
-    })
+    }))
 
     return () => {
       const slotSlides = slots.default || slots.slides

src/components/Carousel/carouselProps.ts

@@ -150,4 +150,7 @@ export const carouselProps = {
     default: DEFAULT_CONFIG.wrapAround,
     type: Boolean,
   },
+  clamp: {
+    type: Boolean,
+  }
 }

src/shared/types.ts

@@ -49,6 +49,7 @@ export type CarouselConfig = {
   touchDrag?: boolean
   transition?: number
   wrapAround?: boolean
+  clamp?: boolean
 }
 
 export type VueClass = string | Record<string, boolean> | VueClass[]