vue3-carousel - npm Package Compare versions

Comparing version 0.1.36 to 0.1.38

dist/carousel.es.js

 /**
- * Vue 3 Carousel 0.1.36
+ * Vue 3 Carousel 0.1.38
  * (c) 2022
  * @license MIT
  */
-import { defineComponent, ref, reactive, provide, onMounted, onUnmounted, computed, watch, watchEffect, h, inject } from 'vue';
+import { defineComponent, ref, reactive, provide, onMounted, nextTick, onUnmounted, computed, watch, watchEffect, h, inject } from 'vue';
 
@@ -19,2 +19,3 @@ const defaultConfigs = {
     touchDrag: true,
+    dir: 'ltr',
     breakpoints: undefined,
@@ -112,2 +113,5 @@ };
     let output = slidesBuffer.indexOf(currentSlide);
+    if (output === -1) {
+        output = slidesBuffer.indexOf(Math.ceil(currentSlide));
+    }
     if (snapAlign === 'center' || snapAlign === 'center-odd') {
@@ -191,2 +195,10 @@ output -= (itemsToShow - 1) / 2;
         },
+        // control snap position alignment
+        dir: {
+            default: defaultConfigs.dir,
+            validator(value) {
+                // The value must match one of these strings
+                return ['rtl', 'ltr'].includes(value);
+            },
+        },
         // an object to pass all settings
@@ -317,3 +329,3 @@ settings: {
             }
-            updateSlideWidth();
+            nextTick(() => setTimeout(updateSlideWidth, 16));
             if (config.autoplay && config.autoplay > 0) {
@@ -370,4 +382,5 @@ initializeAutoplay();
             isDragging.value = false;
+            const direction = config.dir === 'rtl' ? -1 : 1;
             const tolerance = Math.sign(dragged.x) * 0.4;
-            const draggedSlides = Math.round(dragged.x / slideWidth.value + tolerance);
+            const draggedSlides = Math.round(dragged.x / slideWidth.value + tolerance) * direction;
             let newSlide = getCurrentSlideIndex(config, currentSlideIndex.value - draggedSlides, maxSlideIndex.value, minSlideIndex.value);
@@ -458,5 +471,6 @@ slideTo(newSlide);
         const trackStyle = computed(() => {
-            const xScroll = dragged.x - slidesToScroll.value * slideWidth.value;
+            const direction = config.dir === 'rtl' ? -1 : 1;
+            const xScroll = slidesToScroll.value * slideWidth.value * direction;
             return {
-                transform: `translateX(${xScroll}px)`,
+                transform: `translateX(${dragged.x - xScroll}px)`,
                 transition: `${isSliding.value ? config.transition : 0}ms`,
@@ -536,3 +550,7 @@ };
                 ref: root,
-                class: 'carousel',
+                class: {
+                    carousel: true,
+                    'carousel--rtl': config.dir === 'rtl',
+                },
+                dir: config.dir,
                 'aria-label': 'Gallery',
@@ -578,2 +596,3 @@ onMouseenter: handleMouseEnter,
     const nav = inject('nav', {});
+    const isRTL = config.dir === 'rtl';
     const prevButton = h('button', {
@@ -583,8 +602,10 @@ type: 'button',
             'carousel__prev',
-            (!config.wrapAround && currentSlide.value <= minSlide.value) && 'carousel__prev--in-active',
-            attrs === null || attrs === void 0 ? void 0 : attrs.class
+            !config.wrapAround &&
+                currentSlide.value <= minSlide.value &&
+                'carousel__prev--in-active',
+            attrs === null || attrs === void 0 ? void 0 : attrs.class,
         ],
         'aria-label': `Navigate to previous slide`,
         onClick: nav.prev,
-    }, (slotPrev === null || slotPrev === void 0 ? void 0 : slotPrev()) || h(Icon, { name: 'arrowLeft' }));
+    }, (slotPrev === null || slotPrev === void 0 ? void 0 : slotPrev()) || h(Icon, { name: isRTL ? 'arrowRight' : 'arrowLeft' }));
     const nextButton = h('button', {
@@ -594,8 +615,10 @@ type: 'button',
             'carousel__next',
-            (!config.wrapAround && currentSlide.value >= maxSlide.value) && 'carousel__next--in-active',
-            attrs === null || attrs === void 0 ? void 0 : attrs.class
+            !config.wrapAround &&
+                currentSlide.value >= maxSlide.value &&
+                'carousel__next--in-active',
+            attrs === null || attrs === void 0 ? void 0 : attrs.class,
         ],
         'aria-label': `Navigate to next slide`,
         onClick: nav.next,
-    }, (slotNext === null || slotNext === void 0 ? void 0 : slotNext()) || h(Icon, { name: 'arrowRight' }));
+    }, (slotNext === null || slotNext === void 0 ? void 0 : slotNext()) || h(Icon, { name: isRTL ? 'arrowLeft' : 'arrowRight' }));
     return [prevButton, nextButton];
@@ -602,0 +625,0 @@ };

dist/carousel.js

 /**
- * Vue 3 Carousel 0.1.36
+ * Vue 3 Carousel 0.1.38
  * (c) 2022
@@ -23,2 +23,3 @@ * @license MIT
       touchDrag: true,
+      dir: 'ltr',
       breakpoints: undefined,
@@ -116,2 +117,5 @@ };
       let output = slidesBuffer.indexOf(currentSlide);
+      if (output === -1) {
+          output = slidesBuffer.indexOf(Math.ceil(currentSlide));
+      }
       if (snapAlign === 'center' || snapAlign === 'center-odd') {
@@ -195,2 +199,10 @@ output -= (itemsToShow - 1) / 2;
           },
+          // control snap position alignment
+          dir: {
+              default: defaultConfigs.dir,
+              validator(value) {
+                  // The value must match one of these strings
+                  return ['rtl', 'ltr'].includes(value);
+              },
+          },
           // an object to pass all settings
@@ -321,3 +333,3 @@ settings: {
               }
-              updateSlideWidth();
+              vue.nextTick(() => setTimeout(updateSlideWidth, 16));
               if (config.autoplay && config.autoplay > 0) {
@@ -374,4 +386,5 @@ initializeAutoplay();
               isDragging.value = false;
+              const direction = config.dir === 'rtl' ? -1 : 1;
               const tolerance = Math.sign(dragged.x) * 0.4;
-              const draggedSlides = Math.round(dragged.x / slideWidth.value + tolerance);
+              const draggedSlides = Math.round(dragged.x / slideWidth.value + tolerance) * direction;
               let newSlide = getCurrentSlideIndex(config, currentSlideIndex.value - draggedSlides, maxSlideIndex.value, minSlideIndex.value);
@@ -462,5 +475,6 @@ slideTo(newSlide);
           const trackStyle = vue.computed(() => {
-              const xScroll = dragged.x - slidesToScroll.value * slideWidth.value;
+              const direction = config.dir === 'rtl' ? -1 : 1;
+              const xScroll = slidesToScroll.value * slideWidth.value * direction;
               return {
-                  transform: `translateX(${xScroll}px)`,
+                  transform: `translateX(${dragged.x - xScroll}px)`,
                   transition: `${isSliding.value ? config.transition : 0}ms`,
@@ -540,3 +554,7 @@ };
                   ref: root,
-                  class: 'carousel',
+                  class: {
+                      carousel: true,
+                      'carousel--rtl': config.dir === 'rtl',
+                  },
+                  dir: config.dir,
                   'aria-label': 'Gallery',
@@ -582,2 +600,3 @@ onMouseenter: handleMouseEnter,
       const nav = vue.inject('nav', {});
+      const isRTL = config.dir === 'rtl';
       const prevButton = vue.h('button', {
@@ -587,8 +606,10 @@ type: 'button',
               'carousel__prev',
-              (!config.wrapAround && currentSlide.value <= minSlide.value) && 'carousel__prev--in-active',
-              attrs === null || attrs === void 0 ? void 0 : attrs.class
+              !config.wrapAround &&
+                  currentSlide.value <= minSlide.value &&
+                  'carousel__prev--in-active',
+              attrs === null || attrs === void 0 ? void 0 : attrs.class,
           ],
           'aria-label': `Navigate to previous slide`,
           onClick: nav.prev,
-      }, (slotPrev === null || slotPrev === void 0 ? void 0 : slotPrev()) || vue.h(Icon, { name: 'arrowLeft' }));
+      }, (slotPrev === null || slotPrev === void 0 ? void 0 : slotPrev()) || vue.h(Icon, { name: isRTL ? 'arrowRight' : 'arrowLeft' }));
       const nextButton = vue.h('button', {
@@ -598,8 +619,10 @@ type: 'button',
               'carousel__next',
-              (!config.wrapAround && currentSlide.value >= maxSlide.value) && 'carousel__next--in-active',
-              attrs === null || attrs === void 0 ? void 0 : attrs.class
+              !config.wrapAround &&
+                  currentSlide.value >= maxSlide.value &&
+                  'carousel__next--in-active',
+              attrs === null || attrs === void 0 ? void 0 : attrs.class,
           ],
           'aria-label': `Navigate to next slide`,
           onClick: nav.next,
-      }, (slotNext === null || slotNext === void 0 ? void 0 : slotNext()) || vue.h(Icon, { name: 'arrowRight' }));
+      }, (slotNext === null || slotNext === void 0 ? void 0 : slotNext()) || vue.h(Icon, { name: isRTL ? 'arrowLeft' : 'arrowRight' }));
       return [prevButton, nextButton];
@@ -606,0 +629,0 @@ };

package.json

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

README.md

@@ -21,3 +21,3 @@ # Vue 3 Carousel
 - [x] Add classes for active and for visible slides
-- [ ] RTL
+- [x] RTL
 - [ ] Vertical scroll
@@ -24,0 +24,0 @@ - [ ] Sync multiple carousel

No alert changes

Improved metrics

Lines of code

1618

increased by3.59%

Worsened metrics

Total package byte prevSize

62835

decreased by-74.76%

Number of package files

13

decreased by-7.14%

No dependency changes