vue3-carousel - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/carousel.d.ts

@@ -5,2 +5,6 @@ import * as vue from 'vue';
 type Breakpoints = { [key: number]: Partial<CarouselConfig> }
+
+type SnapAlign = 'start' | 'end' | 'center' | 'center-even' | 'center-odd'
+
+type Dir = 'rtl' | 'ltr'
 interface CarouselConfig {
@@ -12,3 +16,3 @@ itemsToShow: number
   autoplay?: number
-  snapAlign: 'start' | 'end' | 'center' | 'center-even' | 'center-odd'
+  snapAlign: SnapAlign
   wrapAround?: boolean
@@ -18,3 +22,3 @@ pauseAutoplayOnHover?: boolean
   touchDrag?: boolean
-  dir: 'rtl' | 'ltr'
+  dir?: Dir
   breakpoints?: Breakpoints
@@ -38,3 +42,3 @@ settings?: Partial<CarouselConfig>
     snapAlign: {
-        default: "start" | "end" | "center" | "center-even" | "center-odd";
+        default: SnapAlign;
         validator(value: string): boolean;
@@ -71,3 +75,3 @@ };
     dir: {
-        default: "rtl" | "ltr";
+        default: Dir | undefined;
         validator(value: string): boolean;
@@ -74,0 +78,0 @@ };

dist/carousel.es.js

 /**
- * Vue 3 Carousel 0.2.0
+ * Vue 3 Carousel 0.2.1
  * (c) 2022
@@ -99,85 +99,58 @@ * @license MIT
 
-/**
- * return a debounced version of the function
- * @param fn
- * @param delay
- */
-// eslint-disable-next-line no-unused-vars
-function debounce(fn, delay) {
-    let timerId;
-    return function (...args) {
-        if (timerId) {
-            clearTimeout(timerId);
-        }
-        timerId = setTimeout(() => {
-            fn(...args);
-            timerId = null;
-        }, delay);
-    };
-}
-/**
- * return a throttle version of the function
- * Throttling
- *
- */
-// eslint-disable-next-line no-unused-vars
-function throttle(fn, limit) {
-    let inThrottle;
-    return function (...args) {
-        const self = this;
-        if (!inThrottle) {
-            fn.apply(self, args);
-            inThrottle = true;
-            setTimeout(() => (inThrottle = false), limit);
-        }
-    };
-}
-function getSlidesVNodes(vNode) {
-    var _a, _b, _c;
-    // Return empty array if there's any node
-    if (!vNode)
-        return [];
-    // Check if the Slides components are added directly without v-for (#72)
-    if (((_b = (_a = vNode[0]) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.name) === 'CarouselSlide')
-        return vNode;
-    return ((_c = vNode[0]) === null || _c === void 0 ? void 0 : _c.children) || [];
-}
-function getMaxSlideIndex(config, slidesCount) {
-    if (config.wrapAround) {
-        return slidesCount - 1;
+function getMaxSlideIndex({ config, slidesCount }) {
+    const { snapAlign, wrapAround, itemsToShow = 1 } = config;
+    if (wrapAround) {
+        return Math.max(slidesCount - 1, 0);
     }
-    switch (config.snapAlign) {
+    let output;
+    switch (snapAlign) {
         case 'start':
-            return slidesCount - config.itemsToShow;
+            output = slidesCount - itemsToShow;
+            break;
         case 'end':
-            return slidesCount - 1;
+            output = slidesCount - 1;
+            break;
         case 'center':
         case 'center-odd':
-            return slidesCount - Math.ceil((config.itemsToShow - 0.5) / 2);
+            output = slidesCount - Math.ceil((itemsToShow - 0.5) / 2);
+            break;
         case 'center-even':
-            return slidesCount - Math.ceil(config.itemsToShow / 2);
+            output = slidesCount - Math.ceil(itemsToShow / 2);
+            break;
         default:
-            return 0;
+            output = 0;
+            break;
     }
+    return Math.max(output, 0);
 }
-function getMinSlideIndex(config) {
-    if (config.wrapAround) {
-        return 0;
+
+function getMinSlideIndex({ config, slidesCount }) {
+    const { wrapAround, snapAlign, itemsToShow = 1 } = config;
+    let output = 0;
+    if (wrapAround || itemsToShow > slidesCount) {
+        return output;
     }
-    switch (config.snapAlign) {
+    switch (snapAlign) {
         case 'start':
-            return 0;
+            output = 0;
+            break;
         case 'end':
-            return config.itemsToShow - 1;
+            output = itemsToShow - 1;
+            break;
         case 'center':
         case 'center-odd':
-            return Math.floor((config.itemsToShow - 1) / 2);
+            output = Math.floor((itemsToShow - 1) / 2);
+            break;
         case 'center-even':
-            return Math.floor((config.itemsToShow - 2) / 2);
+            output = Math.floor((itemsToShow - 2) / 2);
+            break;
         default:
-            return 0;
+            output = 0;
+            break;
     }
+    return output;
 }
-function getCurrentSlideIndex(config, val, max, min) {
-    if (config.wrapAround) {
+
+function getNumberInRange({ val, max, min }) {
+    if (max < min) {
         return val;
@@ -187,30 +160,86 @@ }
 }
-function getSlidesToScroll({ currentSlide, snapAlign, itemsToShow, wrapAround, slidesCount, }) {
+
+function getSlidesToScroll({ config, currentSlide, slidesCount }) {
+    const { snapAlign, wrapAround, itemsToShow = 1 } = config;
     let output = currentSlide;
-    if (snapAlign === 'center' || snapAlign === 'center-odd') {
-        output -= (itemsToShow - 1) / 2;
+    switch (snapAlign) {
+        case 'center':
+        case 'center-odd':
+            output -= (itemsToShow - 1) / 2;
+            break;
+        case 'center-even':
+            output -= (itemsToShow - 2) / 2;
+            break;
+        case 'end':
+            output -= itemsToShow - 1;
+            break;
     }
-    else if (snapAlign === 'center-even') {
-        output -= (itemsToShow - 2) / 2;
+    if (wrapAround) {
+        return output;
     }
-    else if (snapAlign === 'end') {
-        output -= itemsToShow - 1;
-    }
-    if (!wrapAround) {
-        const max = slidesCount - itemsToShow;
-        const min = 0;
-        output = Math.max(Math.min(output, max), min);
-    }
-    return output;
+    return getNumberInRange({
+        val: output,
+        max: slidesCount - itemsToShow,
+        min: 0,
+    });
 }
-function mapNumberToRange(current, max, min = 0) {
-    if (current > max) {
-        return mapNumberToRange(current - (max + 1), max, min);
+
+function getSlidesVNodes(vNode) {
+    var _a, _b, _c;
+    // Return empty array if there's any node
+    if (!vNode)
+        return [];
+    // Check if the Slides components are added directly without v-for (#72)
+    if (((_b = (_a = vNode[0]) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.name) === 'CarouselSlide')
+        return vNode;
+    return ((_c = vNode[0]) === null || _c === void 0 ? void 0 : _c.children) || [];
+}
+
+function mapNumberToRange({ val, max, min = 0 }) {
+    if (val > max) {
+        return mapNumberToRange({ val: val - (max + 1), max, min });
     }
-    if (current < min) {
-        return mapNumberToRange(current + (max + 1), max, min);
+    if (val < min) {
+        return mapNumberToRange({ val: val + (max + 1), max, min });
     }
-    return current;
+    return val;
 }
 
+/**
+ * return a throttle version of the function
+ * Throttling
+ *
+ */
+// eslint-disable-next-line no-unused-vars
+function throttle(fn, limit) {
+    let inThrottle;
+    return function (...args) {
+        const self = this;
+        if (!inThrottle) {
+            fn.apply(self, args);
+            inThrottle = true;
+            setTimeout(() => (inThrottle = false), limit);
+        }
+    };
+}
+
+/**
+ * return a debounced version of the function
+ * @param fn
+ * @param delay
+ */
+// eslint-disable-next-line no-unused-vars
+function debounce(fn, delay) {
+    let timerId;
+    return function (...args) {
+        if (timerId) {
+            clearTimeout(timerId);
+        }
+        timerId = setTimeout(() => {
+            fn(...args);
+            timerId = null;
+        }, delay);
+    };
+}
+
 var ARIAComponent = defineComponent({
@@ -310,5 +339,11 @@ name: 'ARIA',
             middleSlideIndex.value = Math.ceil((slidesCount.value - 1) / 2);
-            maxSlideIndex.value = getMaxSlideIndex(config, slidesCount.value);
-            minSlideIndex.value = getMinSlideIndex(config);
-            currentSlideIndex.value = getCurrentSlideIndex(config, currentSlideIndex.value, maxSlideIndex.value, minSlideIndex.value);
+            maxSlideIndex.value = getMaxSlideIndex({ config, slidesCount: slidesCount.value });
+            minSlideIndex.value = getMinSlideIndex({ config, slidesCount: slidesCount.value });
+            if (!config.wrapAround) {
+                currentSlideIndex.value = getNumberInRange({
+                    val: currentSlideIndex.value,
+                    max: maxSlideIndex.value,
+                    min: minSlideIndex.value,
+                });
+            }
         }
@@ -419,7 +454,17 @@ onMounted(() => {
             resetAutoplay();
-            const currentVal = getCurrentSlideIndex(config, slideIndex, maxSlideIndex.value, minSlideIndex.value);
+            const currentVal = config.wrapAround
+                ? slideIndex
+                : getNumberInRange({
+                    val: slideIndex,
+                    max: maxSlideIndex.value,
+                    min: minSlideIndex.value,
+                });
             prevSlideIndex.value = currentSlideIndex.value;
             currentSlideIndex.value = currentVal;
             transitionTimer = setTimeout(() => {
-                const mappedNumber = mapNumberToRange(currentVal, maxSlideIndex.value);
+                const mappedNumber = mapNumberToRange({
+                    val: currentVal,
+                    max: maxSlideIndex.value,
+                    min: 0,
+                });
                 if (config.wrapAround) {
@@ -445,5 +490,3 @@ currentSlideIndex.value = mappedNumber;
         const slidesToScroll = computed(() => getSlidesToScroll({
-            itemsToShow: config.itemsToShow,
-            snapAlign: config.snapAlign,
-            wrapAround: Boolean(config.wrapAround),
+            config,
             currentSlide: currentSlideIndex.value,
@@ -590,3 +633,4 @@ slidesCount: slidesCount.value,
     const nav = inject('nav', {});
-    const isRTL = config.dir === 'rtl';
+    const { dir, wrapAround } = config;
+    const isRTL = dir === 'rtl';
     const prevButton = h('button', {
@@ -596,5 +640,3 @@ type: 'button',
             'carousel__prev',
-            !config.wrapAround &&
-                currentSlide.value <= minSlide.value &&
-                'carousel__prev--disabled',
+            !wrapAround && currentSlide.value <= minSlide.value && 'carousel__prev--disabled',
             attrs === null || attrs === void 0 ? void 0 : attrs.class,
@@ -609,5 +651,3 @@ ],
             'carousel__next',
-            !config.wrapAround &&
-                currentSlide.value >= maxSlide.value &&
-                'carousel__next--disabled',
+            !wrapAround && currentSlide.value >= maxSlide.value && 'carousel__next--disabled',
             attrs === null || attrs === void 0 ? void 0 : attrs.class,
@@ -625,11 +665,8 @@ ],
     const currentSlide = inject('currentSlide', ref(1));
-    const slidesCount = inject('slidesCount', ref(1));
     const nav = inject('nav', {});
-    function handleButtonClick(slideNumber) {
-        nav.slideTo(slideNumber);
-    }
-    const isActive = (slide) => {
-        const val = mapNumberToRange(currentSlide.value, slidesCount.value - 1, 0);
-        return val === slide;
-    };
+    const isActive = (slide) => mapNumberToRange({
+        val: currentSlide.value,
+        max: maxSlide.value,
+        min: 0,
+    }) === slide;
     const children = [];
@@ -644,3 +681,3 @@ for (let slide = minSlide.value; slide < maxSlide.value + 1; slide++) {
             'aria-label': `Navigate to slide ${slide + 1}`,
-            onClick: () => handleButtonClick(slide),
+            onClick: () => nav.slideTo(slide),
         });
@@ -671,8 +708,8 @@ const item = h('li', { class: 'carousel__pagination-item', key: slide }, button);
         const isSliding = inject('isSliding', ref(false));
-        const slideStyle = computed(() => {
-            return {
-                width: slideWidth.value ? `${slideWidth.value}px` : `100%`,
-            };
-        });
+        const slideStyle = computed(() => ({
+            width: slideWidth.value ? `${slideWidth.value}px` : `100%`,
+        }));
         const isActive = () => props.index === currentSlide.value;
+        const isPrev = () => props.index === currentSlide.value - 1;
+        const isNext = () => props.index === currentSlide.value + 1;
         const isVisible = () => {
@@ -683,4 +720,2 @@ const min = Math.floor(slidesToScroll.value);
         };
-        const isPrev = () => props.index === currentSlide.value - 1;
-        const isNext = () => props.index === currentSlide.value + 1;
         return () => {
@@ -687,0 +722,0 @@ var _a;

dist/carousel.js

 /**
- * Vue 3 Carousel 0.2.0
+ * Vue 3 Carousel 0.2.1
  * (c) 2022
@@ -103,85 +103,58 @@ * @license MIT
 
-  /**
-   * return a debounced version of the function
-   * @param fn
-   * @param delay
-   */
-  // eslint-disable-next-line no-unused-vars
-  function debounce(fn, delay) {
-      let timerId;
-      return function (...args) {
-          if (timerId) {
-              clearTimeout(timerId);
-          }
-          timerId = setTimeout(() => {
-              fn(...args);
-              timerId = null;
-          }, delay);
-      };
-  }
-  /**
-   * return a throttle version of the function
-   * Throttling
-   *
-   */
-  // eslint-disable-next-line no-unused-vars
-  function throttle(fn, limit) {
-      let inThrottle;
-      return function (...args) {
-          const self = this;
-          if (!inThrottle) {
-              fn.apply(self, args);
-              inThrottle = true;
-              setTimeout(() => (inThrottle = false), limit);
-          }
-      };
-  }
-  function getSlidesVNodes(vNode) {
-      var _a, _b, _c;
-      // Return empty array if there's any node
-      if (!vNode)
-          return [];
-      // Check if the Slides components are added directly without v-for (#72)
-      if (((_b = (_a = vNode[0]) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.name) === 'CarouselSlide')
-          return vNode;
-      return ((_c = vNode[0]) === null || _c === void 0 ? void 0 : _c.children) || [];
-  }
-  function getMaxSlideIndex(config, slidesCount) {
-      if (config.wrapAround) {
-          return slidesCount - 1;
+  function getMaxSlideIndex({ config, slidesCount }) {
+      const { snapAlign, wrapAround, itemsToShow = 1 } = config;
+      if (wrapAround) {
+          return Math.max(slidesCount - 1, 0);
       }
-      switch (config.snapAlign) {
+      let output;
+      switch (snapAlign) {
           case 'start':
-              return slidesCount - config.itemsToShow;
+              output = slidesCount - itemsToShow;
+              break;
           case 'end':
-              return slidesCount - 1;
+              output = slidesCount - 1;
+              break;
           case 'center':
           case 'center-odd':
-              return slidesCount - Math.ceil((config.itemsToShow - 0.5) / 2);
+              output = slidesCount - Math.ceil((itemsToShow - 0.5) / 2);
+              break;
           case 'center-even':
-              return slidesCount - Math.ceil(config.itemsToShow / 2);
+              output = slidesCount - Math.ceil(itemsToShow / 2);
+              break;
           default:
-              return 0;
+              output = 0;
+              break;
       }
+      return Math.max(output, 0);
   }
-  function getMinSlideIndex(config) {
-      if (config.wrapAround) {
-          return 0;
+
+  function getMinSlideIndex({ config, slidesCount }) {
+      const { wrapAround, snapAlign, itemsToShow = 1 } = config;
+      let output = 0;
+      if (wrapAround || itemsToShow > slidesCount) {
+          return output;
       }
-      switch (config.snapAlign) {
+      switch (snapAlign) {
           case 'start':
-              return 0;
+              output = 0;
+              break;
           case 'end':
-              return config.itemsToShow - 1;
+              output = itemsToShow - 1;
+              break;
           case 'center':
           case 'center-odd':
-              return Math.floor((config.itemsToShow - 1) / 2);
+              output = Math.floor((itemsToShow - 1) / 2);
+              break;
           case 'center-even':
-              return Math.floor((config.itemsToShow - 2) / 2);
+              output = Math.floor((itemsToShow - 2) / 2);
+              break;
           default:
-              return 0;
+              output = 0;
+              break;
       }
+      return output;
   }
-  function getCurrentSlideIndex(config, val, max, min) {
-      if (config.wrapAround) {
+
+  function getNumberInRange({ val, max, min }) {
+      if (max < min) {
           return val;
@@ -191,30 +164,86 @@ }
   }
-  function getSlidesToScroll({ currentSlide, snapAlign, itemsToShow, wrapAround, slidesCount, }) {
+
+  function getSlidesToScroll({ config, currentSlide, slidesCount }) {
+      const { snapAlign, wrapAround, itemsToShow = 1 } = config;
       let output = currentSlide;
-      if (snapAlign === 'center' || snapAlign === 'center-odd') {
-          output -= (itemsToShow - 1) / 2;
+      switch (snapAlign) {
+          case 'center':
+          case 'center-odd':
+              output -= (itemsToShow - 1) / 2;
+              break;
+          case 'center-even':
+              output -= (itemsToShow - 2) / 2;
+              break;
+          case 'end':
+              output -= itemsToShow - 1;
+              break;
       }
-      else if (snapAlign === 'center-even') {
-          output -= (itemsToShow - 2) / 2;
+      if (wrapAround) {
+          return output;
       }
-      else if (snapAlign === 'end') {
-          output -= itemsToShow - 1;
-      }
-      if (!wrapAround) {
-          const max = slidesCount - itemsToShow;
-          const min = 0;
-          output = Math.max(Math.min(output, max), min);
-      }
-      return output;
+      return getNumberInRange({
+          val: output,
+          max: slidesCount - itemsToShow,
+          min: 0,
+      });
   }
-  function mapNumberToRange(current, max, min = 0) {
-      if (current > max) {
-          return mapNumberToRange(current - (max + 1), max, min);
+
+  function getSlidesVNodes(vNode) {
+      var _a, _b, _c;
+      // Return empty array if there's any node
+      if (!vNode)
+          return [];
+      // Check if the Slides components are added directly without v-for (#72)
+      if (((_b = (_a = vNode[0]) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.name) === 'CarouselSlide')
+          return vNode;
+      return ((_c = vNode[0]) === null || _c === void 0 ? void 0 : _c.children) || [];
+  }
+
+  function mapNumberToRange({ val, max, min = 0 }) {
+      if (val > max) {
+          return mapNumberToRange({ val: val - (max + 1), max, min });
       }
-      if (current < min) {
-          return mapNumberToRange(current + (max + 1), max, min);
+      if (val < min) {
+          return mapNumberToRange({ val: val + (max + 1), max, min });
       }
-      return current;
+      return val;
   }
 
+  /**
+   * return a throttle version of the function
+   * Throttling
+   *
+   */
+  // eslint-disable-next-line no-unused-vars
+  function throttle(fn, limit) {
+      let inThrottle;
+      return function (...args) {
+          const self = this;
+          if (!inThrottle) {
+              fn.apply(self, args);
+              inThrottle = true;
+              setTimeout(() => (inThrottle = false), limit);
+          }
+      };
+  }
+
+  /**
+   * return a debounced version of the function
+   * @param fn
+   * @param delay
+   */
+  // eslint-disable-next-line no-unused-vars
+  function debounce(fn, delay) {
+      let timerId;
+      return function (...args) {
+          if (timerId) {
+              clearTimeout(timerId);
+          }
+          timerId = setTimeout(() => {
+              fn(...args);
+              timerId = null;
+          }, delay);
+      };
+  }
+
   var ARIAComponent = vue.defineComponent({
@@ -314,5 +343,11 @@ name: 'ARIA',
               middleSlideIndex.value = Math.ceil((slidesCount.value - 1) / 2);
-              maxSlideIndex.value = getMaxSlideIndex(config, slidesCount.value);
-              minSlideIndex.value = getMinSlideIndex(config);
-              currentSlideIndex.value = getCurrentSlideIndex(config, currentSlideIndex.value, maxSlideIndex.value, minSlideIndex.value);
+              maxSlideIndex.value = getMaxSlideIndex({ config, slidesCount: slidesCount.value });
+              minSlideIndex.value = getMinSlideIndex({ config, slidesCount: slidesCount.value });
+              if (!config.wrapAround) {
+                  currentSlideIndex.value = getNumberInRange({
+                      val: currentSlideIndex.value,
+                      max: maxSlideIndex.value,
+                      min: minSlideIndex.value,
+                  });
+              }
           }
@@ -423,7 +458,17 @@ vue.onMounted(() => {
               resetAutoplay();
-              const currentVal = getCurrentSlideIndex(config, slideIndex, maxSlideIndex.value, minSlideIndex.value);
+              const currentVal = config.wrapAround
+                  ? slideIndex
+                  : getNumberInRange({
+                      val: slideIndex,
+                      max: maxSlideIndex.value,
+                      min: minSlideIndex.value,
+                  });
               prevSlideIndex.value = currentSlideIndex.value;
               currentSlideIndex.value = currentVal;
               transitionTimer = setTimeout(() => {
-                  const mappedNumber = mapNumberToRange(currentVal, maxSlideIndex.value);
+                  const mappedNumber = mapNumberToRange({
+                      val: currentVal,
+                      max: maxSlideIndex.value,
+                      min: 0,
+                  });
                   if (config.wrapAround) {
@@ -449,5 +494,3 @@ currentSlideIndex.value = mappedNumber;
           const slidesToScroll = vue.computed(() => getSlidesToScroll({
-              itemsToShow: config.itemsToShow,
-              snapAlign: config.snapAlign,
-              wrapAround: Boolean(config.wrapAround),
+              config,
               currentSlide: currentSlideIndex.value,
@@ -594,3 +637,4 @@ slidesCount: slidesCount.value,
       const nav = vue.inject('nav', {});
-      const isRTL = config.dir === 'rtl';
+      const { dir, wrapAround } = config;
+      const isRTL = dir === 'rtl';
       const prevButton = vue.h('button', {
@@ -600,5 +644,3 @@ type: 'button',
               'carousel__prev',
-              !config.wrapAround &&
-                  currentSlide.value <= minSlide.value &&
-                  'carousel__prev--disabled',
+              !wrapAround && currentSlide.value <= minSlide.value && 'carousel__prev--disabled',
               attrs === null || attrs === void 0 ? void 0 : attrs.class,
@@ -613,5 +655,3 @@ ],
               'carousel__next',
-              !config.wrapAround &&
-                  currentSlide.value >= maxSlide.value &&
-                  'carousel__next--disabled',
+              !wrapAround && currentSlide.value >= maxSlide.value && 'carousel__next--disabled',
               attrs === null || attrs === void 0 ? void 0 : attrs.class,
@@ -629,11 +669,8 @@ ],
       const currentSlide = vue.inject('currentSlide', vue.ref(1));
-      const slidesCount = vue.inject('slidesCount', vue.ref(1));
       const nav = vue.inject('nav', {});
-      function handleButtonClick(slideNumber) {
-          nav.slideTo(slideNumber);
-      }
-      const isActive = (slide) => {
-          const val = mapNumberToRange(currentSlide.value, slidesCount.value - 1, 0);
-          return val === slide;
-      };
+      const isActive = (slide) => mapNumberToRange({
+          val: currentSlide.value,
+          max: maxSlide.value,
+          min: 0,
+      }) === slide;
       const children = [];
@@ -648,3 +685,3 @@ for (let slide = minSlide.value; slide < maxSlide.value + 1; slide++) {
               'aria-label': `Navigate to slide ${slide + 1}`,
-              onClick: () => handleButtonClick(slide),
+              onClick: () => nav.slideTo(slide),
           });
@@ -675,8 +712,8 @@ const item = vue.h('li', { class: 'carousel__pagination-item', key: slide }, button);
           const isSliding = vue.inject('isSliding', vue.ref(false));
-          const slideStyle = vue.computed(() => {
-              return {
-                  width: slideWidth.value ? `${slideWidth.value}px` : `100%`,
-              };
-          });
+          const slideStyle = vue.computed(() => ({
+              width: slideWidth.value ? `${slideWidth.value}px` : `100%`,
+          }));
           const isActive = () => props.index === currentSlide.value;
+          const isPrev = () => props.index === currentSlide.value - 1;
+          const isNext = () => props.index === currentSlide.value + 1;
           const isVisible = () => {
@@ -687,4 +724,2 @@ const min = Math.floor(slidesToScroll.value);
           };
-          const isPrev = () => props.index === currentSlide.value - 1;
-          const isNext = () => props.index === currentSlide.value + 1;
           return () => {
@@ -691,0 +726,0 @@ var _a;

package.json

 {
   "name": "vue3-carousel",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "scripts": {
@@ -5,0 +5,0 @@ "build": "rollup -c",

tests/integartion/carousel.spec.ts

@@ -10,3 +10,2 @@ import { mount } from '@vue/test-utils'
     wrapper = mount(App)
-    console.log(wrapper.html())
   })
@@ -13,0 +12,0 @@

No alert changes

Improved metrics

Total package byte prevSize

272720

increased by0.43%

Lines of code

1845

increased by3.19%

No dependency changes