vue3-carousel - npm Package Compare versions

Comparing version 0.1.19 to 0.1.20

dist/carousel.es.js

 /**
- * Vue 3 Carousel 0.1.19
+ * Vue 3 Carousel 0.1.20
  * (c) 2021
@@ -67,5 +67,5 @@ * @license MIT
         },
-        // slide number number of initial slide
-        currentSlide: {
-            default: 0,
+        // count of items to be scrolled
+        itemsToScroll: {
+            default: 1,
             type: Number,
@@ -108,4 +108,10 @@ },
         },
+        // slide number number of initial slide
+        modelValue: {
+            default: undefined,
+            type: Number,
+        },
     },
-    setup(props, { slots }) {
+    setup(props, { slots, emit }) {
+        var _a;
         const root = ref(null);
@@ -118,3 +124,3 @@ const slides = ref([]);
         // generate carousel configs
-        const defaultConfig = Object.assign(Object.assign({}, props), props.settings);
+        const defaultConfig = Object.assign(Object.assign(Object.assign({}, props), props.settings), { currentSlide: props.modelValue });
         const breakpoints = ref(Object.assign({}, defaultConfig.breakpoints));
@@ -127,3 +133,3 @@ // remove extra values
         // slides
-        const currentSlide = ref(config.currentSlide);
+        const currentSlide = ref((_a = config.currentSlide) !== null && _a !== void 0 ? _a : 0);
         const prevSlide = ref(0);
@@ -219,3 +225,4 @@ const middleSlide = ref(0);
         function handleDragStart(event) {
-            event.preventDefault();
+            if (!isTouch)
+                event.preventDefault();
             isTouch = event.type === 'touchstart';
@@ -250,3 +257,3 @@ if ((!isTouch && event.button !== 0) || isSliding.value) {
         const isSliding = ref(false);
-        function slideTo(slideIndex) {
+        function slideTo(slideIndex, mute = false) {
             if (currentSlide.value === slideIndex || isSliding.value) {
@@ -266,6 +273,8 @@ return;
             currentSlide.value = slideIndex;
+            if (!mute) {
+                emit('update:modelValue', currentSlide.value);
+            }
             setTimeout(() => {
-                if (config.wrapAround) {
+                if (config.wrapAround)
                     updateSlidesBuffer();
-                }
                 isSliding.value = false;
@@ -275,22 +284,14 @@ }, config.transition);
         function next() {
-            const isLastSlide = currentSlide.value >= slidesCount.value - 1;
-            if (!isLastSlide) {
-                slideTo(currentSlide.value + 1);
-                return;
+            let nextSlide = currentSlide.value + config.itemsToScroll;
+            if (!config.wrapAround) {
+                nextSlide = Math.min(nextSlide, slidesCount.value - 1);
             }
-            // if wrap around to the first slide
-            if (config.wrapAround) {
-                slideTo(0);
-            }
+            slideTo(nextSlide);
         }
         function prev() {
-            const isFirstSlide = currentSlide.value <= 0;
-            if (!isFirstSlide) {
-                slideTo(currentSlide.value - 1);
-                return;
+            let prevSlide = currentSlide.value - config.itemsToScroll;
+            if (!config.wrapAround) {
+                prevSlide = Math.max(prevSlide, 0);
             }
-            // if wrap around to the last slide
-            if (config.wrapAround) {
-                slideTo(slidesCount.value - 1);
-            }
+            slideTo(prevSlide);
         }
@@ -333,2 +334,6 @@ const nav = { slideTo, next, prev };
             const needToUpdate = slidesCount.value !== slides.value.length;
+            const currentSlideUpdated = props.modelValue !== undefined && currentSlide.value !== props.modelValue;
+            if (currentSlideUpdated) {
+                slideTo(Number(props.modelValue), true);
+            }
             if (needToUpdate) {
@@ -335,0 +340,0 @@ updateSlidesData();

dist/carousel.js

 /**
- * Vue 3 Carousel 0.1.19
+ * Vue 3 Carousel 0.1.20
  * (c) 2021
@@ -71,5 +71,5 @@ * @license MIT
           },
-          // slide number number of initial slide
-          currentSlide: {
-              default: 0,
+          // count of items to be scrolled
+          itemsToScroll: {
+              default: 1,
               type: Number,
@@ -112,4 +112,10 @@ },
           },
+          // slide number number of initial slide
+          modelValue: {
+              default: undefined,
+              type: Number,
+          },
       },
-      setup(props, { slots }) {
+      setup(props, { slots, emit }) {
+          var _a;
           const root = vue.ref(null);
@@ -122,3 +128,3 @@ const slides = vue.ref([]);
           // generate carousel configs
-          const defaultConfig = Object.assign(Object.assign({}, props), props.settings);
+          const defaultConfig = Object.assign(Object.assign(Object.assign({}, props), props.settings), { currentSlide: props.modelValue });
           const breakpoints = vue.ref(Object.assign({}, defaultConfig.breakpoints));
@@ -131,3 +137,3 @@ // remove extra values
           // slides
-          const currentSlide = vue.ref(config.currentSlide);
+          const currentSlide = vue.ref((_a = config.currentSlide) !== null && _a !== void 0 ? _a : 0);
           const prevSlide = vue.ref(0);
@@ -223,3 +229,4 @@ const middleSlide = vue.ref(0);
           function handleDragStart(event) {
-              event.preventDefault();
+              if (!isTouch)
+                  event.preventDefault();
               isTouch = event.type === 'touchstart';
@@ -254,3 +261,3 @@ if ((!isTouch && event.button !== 0) || isSliding.value) {
           const isSliding = vue.ref(false);
-          function slideTo(slideIndex) {
+          function slideTo(slideIndex, mute = false) {
               if (currentSlide.value === slideIndex || isSliding.value) {
@@ -270,6 +277,8 @@ return;
               currentSlide.value = slideIndex;
+              if (!mute) {
+                  emit('update:modelValue', currentSlide.value);
+              }
               setTimeout(() => {
-                  if (config.wrapAround) {
+                  if (config.wrapAround)
                       updateSlidesBuffer();
-                  }
                   isSliding.value = false;
@@ -279,22 +288,14 @@ }, config.transition);
           function next() {
-              const isLastSlide = currentSlide.value >= slidesCount.value - 1;
-              if (!isLastSlide) {
-                  slideTo(currentSlide.value + 1);
-                  return;
+              let nextSlide = currentSlide.value + config.itemsToScroll;
+              if (!config.wrapAround) {
+                  nextSlide = Math.min(nextSlide, slidesCount.value - 1);
               }
-              // if wrap around to the first slide
-              if (config.wrapAround) {
-                  slideTo(0);
-              }
+              slideTo(nextSlide);
           }
           function prev() {
-              const isFirstSlide = currentSlide.value <= 0;
-              if (!isFirstSlide) {
-                  slideTo(currentSlide.value - 1);
-                  return;
+              let prevSlide = currentSlide.value - config.itemsToScroll;
+              if (!config.wrapAround) {
+                  prevSlide = Math.max(prevSlide, 0);
               }
-              // if wrap around to the last slide
-              if (config.wrapAround) {
-                  slideTo(slidesCount.value - 1);
-              }
+              slideTo(prevSlide);
           }
@@ -337,2 +338,6 @@ const nav = { slideTo, next, prev };
               const needToUpdate = slidesCount.value !== slides.value.length;
+              const currentSlideUpdated = props.modelValue !== undefined && currentSlide.value !== props.modelValue;
+              if (currentSlideUpdated) {
+                  slideTo(Number(props.modelValue), true);
+              }
               if (needToUpdate) {
@@ -339,0 +344,0 @@ updateSlidesData();

dist/components/Carousel.d.ts

@@ -6,3 +6,3 @@ declare const _default: import("vue").DefineComponent<{
     };
-    currentSlide: {
+    itemsToScroll: {
         default: number;
@@ -35,2 +35,6 @@ type: NumberConstructor;
     };
+    modelValue: {
+        default: undefined;
+        type: NumberConstructor;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -41,3 +45,3 @@ [key: string]: any;
     itemsToShow: number;
-    currentSlide: number;
+    itemsToScroll: number;
     wrapAround: boolean;
@@ -48,6 +52,7 @@ snapAlign: string;
     autoplay: number;
+    modelValue: number;
 } & {}>, {
     settings: Record<string, any>;
     itemsToShow: number;
-    currentSlide: number;
+    itemsToScroll: number;
     wrapAround: boolean;
@@ -58,3 +63,4 @@ snapAlign: string;
     autoplay: number;
+    modelValue: number;
 }>;
 export default _default;

package.json

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

README.md

@@ -19,4 +19,4 @@ # Vue 3 Carousel
 - [x] Infinity scroll (wrapping around)
+- [x] Auto play
 - [ ] Add classes for active and for visible slides
-- [ ] Auto play
 - [ ] RTL
@@ -23,0 +23,0 @@ - [ ] Vertical scroll

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45786

increased by2.08%

Lines of code

1174

increased by1.38%

No dependency changes