naive-ui 2.31.0 → 2.32.0

package/lib/carousel/src/Carousel.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,17 +29,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.carouselProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
+const vooks_1 = require("vooks");
 const evtd_1 = require("evtd");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
+const CarouselContext_1 = require("./CarouselContext");
 const CarouselDots_1 = __importDefault(require("./CarouselDots"));
 const CarouselArrow_1 = __importDefault(require("./CarouselArrow"));
-const CarouselItem_1 = __importDefault(require("./CarouselItem"));
-const interface_1 = require("./interface");
+const CarouselItem_1 = __importStar(require("./CarouselItem"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const transitionProperties = (0, interface_1.tuple)('transitionDuration', 'transitionTimingFunction');
+const transitionProperties = [
+    'transitionDuration',
+    'transitionTimingFunction'
+];
 exports.carouselProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { defaultIndex: {
         type: Number,
         default: 0
@@ -68,67 +95,54 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         // Dom
         const selfElRef = (0, vue_1.ref)(null);
-        const slidesElsRef = (0, vue_1.ref)([]);
+        const slidesElRef = (0, vue_1.ref)(null);
+        const slideElsRef = (0, vue_1.ref)([]);
         const slideVNodesRef = { value: [] };
+        // Computed states
+        const verticalRef = (0, vue_1.computed)(() => props.direction === 'vertical');
+        const sizeAxisRef = (0, vue_1.computed)(() => (verticalRef.value ? 'height' : 'width'));
+        const spaceAxisRef = (0, vue_1.computed)(() => verticalRef.value ? 'bottom' : 'right');
+        const sequenceLayoutRef = (0, vue_1.computed)(() => props.effect === 'slide');
+        const duplicatedableRef = (0, vue_1.computed)(
+        // duplicate the copy operation in `slide` mode,
+        // because only its DOM is sequence layout
+        () => props.loop && props.slidesPerView === 1 && sequenceLayoutRef.value);
         // user wants to control the transition animation
         const userWantsControlRef = (0, vue_1.computed)(() => props.effect === 'custom');
-        const translateableRef = (0, vue_1.computed)(() => !userWantsControlRef.value && props.effect === 'slide');
-        // TODO
-        const allowLoopRef = (0, vue_1.computed)(() => props.loop && props.slidesPerView === 1);
-        // Because of the nature of the loop slide work,
-        // we need to add duplicates to the left and right of the carousel
-        // slot    [ 0 1 2 ]
-        // display 2 0 1 2 0
-        // index   0 1 2 3 4
-        const duplicatedableRef = (0, vue_1.computed)(
-        // only duplicate the copy operation in `slide` mode,
-        // because other effects have special process
-        () => translateableRef.value && allowLoopRef.value);
         // used to calculate total views
-        const displaySlidesPerViewRef = (0, vue_1.computed)(() => userWantsControlRef.value ||
-            props.centeredSlides ||
-            props.effect !== 'slide'
-            ? 1
-            : props.slidesPerView);
+        const displaySlidesPerViewRef = (0, vue_1.computed)(() => !sequenceLayoutRef.value || props.centeredSlides ? 1 : props.slidesPerView);
         // used to calculate the size of each slide
         const realSlidesPerViewRef = (0, vue_1.computed)(() => userWantsControlRef.value ? 1 : props.slidesPerView);
         // we automatically calculate total view for special slides per view
         const autoSlideSizeRef = (0, vue_1.computed)(() => displaySlidesPerViewRef.value === 'auto' ||
             (props.slidesPerView === 'auto' && props.centeredSlides));
-        const transitionStyleRef = (0, vue_1.computed)(() => props.transitionStyle
-            ? (0, _utils_1.keep)(props.transitionStyle, transitionProperties)
-            : {});
-        const speedRef = (0, vue_1.computed)(() => userWantsControlRef.value
-            ? 0
-            : (0, utils_1.resolveSpeed)(transitionStyleRef.value.transitionDuration));
-        const verticalRef = (0, vue_1.computed)(() => props.direction === 'vertical');
-        const sizeAxisRef = (0, vue_1.computed)(() => (verticalRef.value ? 'height' : 'width'));
+        // Carousel size
         const perViewSizeRef = (0, vue_1.ref)({ width: 0, height: 0 });
         const slideSizesRef = (0, vue_1.computed)(() => {
-            const { value: slidesEls } = slidesElsRef;
-            const { length } = slidesEls;
-            if (!length)
+            const { value: slidesEls } = slideElsRef;
+            if (!slidesEls.length)
                 return [];
-            if (autoSlideSizeRef.value) {
+            const { value: autoSlideSize } = autoSlideSizeRef;
+            if (autoSlideSize) {
                 return slidesEls.map((slide) => (0, utils_1.calculateSize)(slide));
             }
             const { value: slidesPerView } = realSlidesPerViewRef;
             const { value: perViewSize } = perViewSizeRef;
             const { value: axis } = sizeAxisRef;
-            let slideSize = perViewSize[axis];
+            let axisSize = perViewSize[axis];
             if (slidesPerView !== 'auto') {
                 const { spaceBetween } = props;
-                const remaining = slideSize - (slidesPerView - 1) * spaceBetween;
+                const remaining = axisSize - (slidesPerView - 1) * spaceBetween;
                 const percentage = 1 / Math.max(1, slidesPerView);
-                slideSize = remaining * percentage;
+                axisSize = remaining * percentage;
             }
-            return slidesEls.map(() => (Object.assign(Object.assign({}, perViewSize), { [axis]: slideSize })));
+            const slideSize = Object.assign(Object.assign({}, perViewSize), { [axis]: axisSize });
+            return slidesEls.map(() => slideSize);
         });
         // The translate required to reach each slide
         const slideTranlatesRef = (0, vue_1.computed)(() => {
             const { value: slideSizes } = slideSizesRef;
-            const { length } = slideSizes;
-            if (!length)
+            if (!slideSizes.length)
                 return [];
             const { centeredSlides, spaceBetween } = props;
             const { value: axis } = sizeAxisRef;
@@ -143,48 +157,58 @@ exports.default = (0, vue_1.defineComponent)({
                 return translate;
             });
         });
-        let isMounted = false;
+        // Styles
+        const isMountedRef = (0, vue_1.ref)(false);
+        const transitionStyleRef = (0, vue_1.computed)(() => {
+            const { transitionStyle } = props;
+            return transitionStyle
+                ? (0, _utils_1.keep)(transitionStyle, transitionProperties)
+                : {};
+        });
+        const speedRef = (0, vue_1.computed)(() => userWantsControlRef.value
+            ? 0
+            : (0, utils_1.resolveSpeed)(transitionStyleRef.value.transitionDuration));
         const slideStylesRef = (0, vue_1.computed)(() => {
-            const { value: slideSizes } = slideSizesRef;
-            const { length } = slideSizes;
-            if (!length)
+            const { value: slidesEls } = slideElsRef;
+            if (!slidesEls.length)
                 return [];
-            const { value: axis } = sizeAxisRef;
-            // when user wants to control the transition animation, we center each slide
+            const useComputedSize = !(autoSlideSizeRef.value || realSlidesPerViewRef.value === 1);
+            const getSlideSize = (index) => {
+                if (useComputedSize) {
+                    const { value: axis } = sizeAxisRef;
+                    return {
+                        [axis]: `${slideSizesRef.value[index][axis]}px`
+                    };
+                }
+            };
             if (userWantsControlRef.value) {
-                return slideSizes.map((size) => ({
-                    [axis]: `${size[axis]}px`
-                }));
+                // We center each slide when user wants to control the transition animation,
+                // so there is no need to calculate the offset
+                return slidesEls.map((_, i) => getSlideSize(i));
             }
             const { effect, spaceBetween } = props;
-            const { value: vertical } = verticalRef;
-            const spaceAxis = vertical ? 'bottom' : 'right';
-            const slideStyles = [];
-            for (let i = 0; i < length; i++) {
-                const size = slideSizes[i][axis];
-                const style = {
-                    [axis]: `${size}px`,
-                    [`margin-${spaceAxis}`]: `${spaceBetween}px`
-                };
-                if (isMounted && (effect === 'fade' || effect === 'card')) {
+            const { value: spaceAxis } = spaceAxisRef;
+            return slidesEls.reduce((styles, _, i) => {
+                const style = Object.assign(Object.assign({}, getSlideSize(i)), { [`margin-${spaceAxis}`]: `${spaceBetween}px` });
+                styles.push(style);
+                if (isMountedRef.value && (effect === 'fade' || effect === 'card')) {
                     Object.assign(style, transitionStyleRef.value);
                 }
-                slideStyles.push(style);
-            }
-            return slideStyles;
+                return styles;
+            }, []);
         });
         // Total
         const totalViewRef = (0, vue_1.computed)(() => {
             const { value: slidesPerView } = displaySlidesPerViewRef;
-            const { length: originLength } = slidesElsRef.value;
+            const { length: totalSlides } = slideElsRef.value;
             if (slidesPerView !== 'auto') {
-                return originLength - slidesPerView + 1;
+                return Math.max(totalSlides - slidesPerView, 0) + 1;
             }
             else {
                 const { value: slideSizes } = slideSizesRef;
                 const { length } = slideSizes;
                 if (!length)
-                    return originLength;
+                    return totalSlides;
                 const { value: translates } = slideTranlatesRef;
                 const { value: axis } = sizeAxisRef;
                 const perViewSize = perViewSizeRef.value[axis];
@@ -194,59 +218,25 @@ exports.default = (0, vue_1.defineComponent)({
                     i--;
                     lastViewSize += translates[i] - translates[i - 1];
                 }
-                if (i !== length)
-                    i++;
-                if (i < 1)
-                    i = 1;
-                return i;
+                return (0, utils_1.clampValue)(i + 1, 1, length);
             }
         });
-        const displayTotalViewRef = (0, vue_1.computed)(() => {
-            const { value: totalView } = totalViewRef;
-            return duplicatedableRef.value && totalView > 3
-                ? totalView - 2
-                : totalView;
-        });
+        const displayTotalViewRef = (0, vue_1.computed)(() => (0, utils_1.getDisplayTotalView)(totalViewRef.value, duplicatedableRef.value));
         // Index
-        const initializeIndex = props.defaultIndex + (duplicatedableRef.value ? 1 : 0);
-        const displayIndexRef = (0, vue_1.ref)((0, utils_1.getDisplayIndex)(initializeIndex, totalViewRef.value, duplicatedableRef.value));
-        const virtualIndexRef = (0, vue_1.ref)(initializeIndex);
-        const realIndexRef = (0, vue_1.ref)(initializeIndex);
-        // record the translate of each slide, so that it can be restored at touch
-        let previousTranslate = 0;
+        const defaultRealIndex = (0, utils_1.getRealIndex)(props.defaultIndex, duplicatedableRef.value);
+        const uncontrolledDisplayIndexRef = (0, vue_1.ref)((0, utils_1.getDisplayIndex)(defaultRealIndex, totalViewRef.value, duplicatedableRef.value));
+        const mergedDisplayIndexRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'currentIndex'), uncontrolledDisplayIndexRef);
+        const realIndexRef = (0, vue_1.computed)(() => (0, utils_1.getRealIndex)(mergedDisplayIndexRef.value, duplicatedableRef.value));
         // Reality methods
-        function toRealIndex(index, speed = speedRef.value) {
+        function toRealIndex(index) {
             var _a, _b;
-            const { value: length } = totalViewRef;
-            if ((index = (0, utils_1.clampValue)(index, 0, length - 1)) !== realIndexRef.value) {
-                const { value: lastDisplayIndex } = displayIndexRef;
-                // When it is loop from the first silde to the last one,
-                // we control its animation effect
-                if (duplicatedableRef.value && displayTotalViewRef.value > 2) {
-                    if (lastDisplayIndex === 0 && index === displayTotalViewRef.value) {
-                        index = 0;
-                    }
-                    else if (lastDisplayIndex === displayTotalViewRef.value - 1 &&
-                        index === 1) {
-                        index = length - 1;
-                    }
-                }
-                const displayIndex = (displayIndexRef.value = (0, utils_1.getDisplayIndex)(index, totalViewRef.value, duplicatedableRef.value));
-                virtualIndexRef.value = index;
-                realIndexRef.value = (0, utils_1.getRealIndex)(displayIndex, duplicatedableRef.value);
-                if (translateableRef.value) {
-                    translateTo(index, speed);
-                }
-                else {
-                    if (!userWantsControlRef.value && speed > 0) {
-                        inTransition = true;
-                    }
-                    fixTranslate();
-                }
-                if (displayIndex !== lastDisplayIndex) {
-                    (_a = props['onUpdate:currentIndex']) === null || _a === void 0 ? void 0 : _a.call(props, displayIndex, lastDisplayIndex);
-                    (_b = props.onUpdateCurrentIndex) === null || _b === void 0 ? void 0 : _b.call(props, displayIndex, lastDisplayIndex);
-                }
+            index = (0, utils_1.clampValue)(index, 0, totalViewRef.value - 1);
+            const displayIndex = (0, utils_1.getDisplayIndex)(index, totalViewRef.value, duplicatedableRef.value);
+            const { value: lastDisplayIndex } = mergedDisplayIndexRef;
+            if (displayIndex !== mergedDisplayIndexRef.value) {
+                uncontrolledDisplayIndexRef.value = displayIndex;
+                (_a = props['onUpdate:currentIndex']) === null || _a === void 0 ? void 0 : _a.call(props, displayIndex, lastDisplayIndex);
+                (_b = props.onUpdateCurrentIndex) === null || _b === void 0 ? void 0 : _b.call(props, displayIndex, lastDisplayIndex);
             }
         }
         function getRealPrevIndex(index = realIndexRef.value) {
@@ -269,7 +259,7 @@ exports.default = (0, vue_1.defineComponent)({
         // Display methods
         // They are used to deal with the actual values displayed on the UI
         function isDisplayActive(index) {
-            return displayIndexRef.value === index;
+            return mergedDisplayIndexRef.value === index;
         }
         function isPrevDisabled() {
             return getRealPrevIndex() === null;
@@ -277,52 +267,63 @@ exports.default = (0, vue_1.defineComponent)({
         function isNextDisabled() {
             return getRealNextIndex() === null;
         }
-        // Slide to
+        // To
         function to(index) {
-            const realIndex = (0, utils_1.getRealIndex)(index, duplicatedableRef.value);
-            if (index !== displayIndexRef.value || realIndex !== realIndexRef.value) {
+            const realIndex = (0, utils_1.clampValue)((0, utils_1.getRealIndex)(index, duplicatedableRef.value), 0, totalViewRef.value);
+            if (index !== mergedDisplayIndexRef.value ||
+                realIndex !== realIndexRef.value) {
                 toRealIndex(realIndex);
             }
         }
         function prev() {
             const prevIndex = getRealPrevIndex();
-            if (prevIndex !== null) {
+            if (prevIndex !== null)
                 toRealIndex(prevIndex);
-            }
         }
         function next() {
             const nextIndex = getRealNextIndex();
-            if (nextIndex !== null) {
+            if (nextIndex !== null)
                 toRealIndex(nextIndex);
-            }
+        }
+        function prevIfSlideTransitionEnd() {
+            if (!inTransition || !duplicatedableRef.value)
+                prev();
+        }
+        function nextIfSlideTransitionEnd() {
+            if (!inTransition || !duplicatedableRef.value)
+                next();
         }
         // Translate to
-        const translateStyleRef = (0, vue_1.ref)({});
         let inTransition = false;
+        // record the translate of each slide, so that it can be restored at touch
+        let previousTranslate = 0;
+        const translateStyleRef = (0, vue_1.ref)({});
         function updateTranslate(translate, speed = 0) {
-            const isVersical = props.direction === 'vertical';
             translateStyleRef.value = Object.assign({}, transitionStyleRef.value, {
-                transform: isVersical
+                transform: verticalRef.value
                     ? `translateY(${-translate}px)`
                     : `translateX(${-translate}px)`,
                 transitionDuration: `${speed}ms`
             });
         }
         function fixTranslate(speed = 0) {
-            if (translateableRef.value) {
+            if (sequenceLayoutRef.value) {
                 translateTo(realIndexRef.value, speed);
             }
             else if (previousTranslate !== 0) {
+                if (!inTransition && speed > 0) {
+                    inTransition = true;
+                }
                 updateTranslate((previousTranslate = 0), speed);
             }
         }
-        function translateTo(index, speed = speedRef.value) {
+        function translateTo(index, speed) {
             const translate = getTranslate(index);
             if (translate !== previousTranslate && speed > 0) {
                 inTransition = true;
             }
-            updateTranslate(translate, speed);
             previousTranslate = getTranslate(realIndexRef.value);
+            updateTranslate(translate, speed);
         }
         function getTranslate(index) {
             let translate;
@@ -358,37 +359,63 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         // Provide
+        const carouselContext = {
+            currentIndexRef: mergedDisplayIndexRef,
+            to,
+            prev: prevIfSlideTransitionEnd,
+            next: nextIfSlideTransitionEnd,
+            isVertical: () => verticalRef.value,
+            isHorizontal: () => !verticalRef.value,
+            isPrev: isRealPrev,
+            isNext: isRealNext,
+            isActive: isRealActive,
+            isPrevDisabled,
+            isNextDisabled,
+            getSlideIndex,
+            getSlideStyle,
+            addSlide,
+            removeSlide,
+            onCarouselItemClick
+        };
+        (0, CarouselContext_1.provideCarouselContext)(carouselContext);
         function addSlide(slide) {
             if (!slide)
                 return;
-            slidesElsRef.value.push(slide);
+            slideElsRef.value.push(slide);
         }
         function removeSlide(slide) {
             if (!slide)
                 return;
             const index = getSlideIndex(slide);
             if (index !== -1) {
-                slidesElsRef.value.splice(index, 1);
+                slideElsRef.value.splice(index, 1);
             }
         }
         function getSlideIndex(slideOrIndex) {
             return typeof slideOrIndex === 'number'
                 ? slideOrIndex
-                : slidesElsRef.value.indexOf(slideOrIndex);
+                : slideOrIndex
+                    ? slideElsRef.value.indexOf(slideOrIndex)
+                    : -1;
         }
         function getSlideStyle(slide) {
             const index = getSlideIndex(slide);
             if (index !== -1) {
-                return slideStylesRef.value[index];
+                const styles = [slideStylesRef.value[index]];
+                const isPrev = carouselContext.isPrev(index);
+                const isNext = carouselContext.isNext(index);
+                if (isPrev) {
+                    styles.push(props.prevSlideStyle || '');
+                }
+                if (isNext) {
+                    styles.push(props.nextSlideStyle || '');
+                }
+                return (0, vue_1.normalizeStyle)(styles);
             }
         }
         function onCarouselItemClick(index, event) {
-            const isTryDrag = 4 /* PROGRESS */ | 8 /* SUCCESS */ | 16 /* FAIL */;
-            let allowClick = !inTransition && !(dragStatus & isTryDrag);
-            if (props.effect === 'card' &&
-                !userWantsControlRef.value &&
-                !(dragStatus & 8 /* SUCCESS */) &&
-                !isRealActive(index)) {
+            let allowClick = !inTransition && !dragging && !isEffectiveDrag;
+            if (props.effect === 'card' && allowClick && !isRealActive(index)) {
                 to(index);
                 allowClick = false;
             }
@@ -397,54 +424,19 @@ exports.default = (0, vue_1.defineComponent)({
                 event.stopPropagation();
             }
         }
-        const carouselMethods = {
-            to,
-            prev: () => {
-                // wait transition end
-                if (!inTransition || !duplicatedableRef.value)
-                    prev();
-            },
-            next: () => {
-                // wait transition end
-                if (!inTransition || !duplicatedableRef.value)
-                    next();
-            },
-            isVertical: () => verticalRef.value,
-            isHorizontal: () => !verticalRef.value,
-            isPrev: isRealPrev,
-            isNext: isRealNext,
-            isActive: isRealActive,
-            isPrevDisabled,
-            isNextDisabled,
-            getCurrentIndex: () => displayIndexRef.value,
-            getSlideIndex,
-            getSlideStyle,
-            addSlide,
-            removeSlide,
-            onCarouselItemClick,
-            prevSlideStyleRef: (0, vue_1.toRef)(props, 'prevSlideStyle'),
-            nextSlideStyleRef: (0, vue_1.toRef)(props, 'nextSlideStyle')
-        };
-        (0, vue_1.provide)(interface_1.carouselMethodsInjectionKey, carouselMethods);
         // Autoplay
         let autoplayTimer = null;
-        function resetAutoplay(cleanOnly) {
+        function stopAutoplay() {
             if (autoplayTimer) {
                 clearInterval(autoplayTimer);
                 autoplayTimer = null;
             }
-            const { autoplay, interval } = props;
-            if (autoplay && interval && !cleanOnly) {
-                autoplayTimer = window.setInterval(next, interval);
-            }
         }
-        function mesureAutoplay() {
-            const { autoplay } = props;
-            if (autoplay) {
-                resetAutoplay();
-            }
-            else if (displayTotalViewRef.value < 2) {
-                resetAutoplay(true);
+        function resetAutoplay() {
+            stopAutoplay();
+            const disabled = !props.autoplay || displayTotalViewRef.value < 2;
+            if (!disabled) {
+                autoplayTimer = window.setInterval(next, props.interval);
             }
         }
         // Drag
@@ -452,14 +444,19 @@ exports.default = (0, vue_1.defineComponent)({
         let dragStartY = 0;
         let dragOffset = 0;
         let dragStartTime = 0;
-        let dragStatus = 1 /* NORMAL */;
+        let dragging = false;
+        let isEffectiveDrag = false;
         function handleTouchstart(event) {
+            var _a;
             if (globalDragging)
                 return;
-            dragStartTime = Date.now();
-            dragStatus = 2 /* START */;
+            if (!((_a = slidesElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
+                return;
             globalDragging = true;
-            resetAutoplay(true /** cleanOnly */);
+            dragging = true;
+            isEffectiveDrag = false;
+            dragStartTime = Date.now();
+            stopAutoplay();
             if (event.type !== 'touchstart' &&
                 !event.target.isContentEditable) {
                 event.preventDefault();
@@ -472,7 +469,7 @@ exports.default = (0, vue_1.defineComponent)({
                 dragStartX = touchEvent.clientX;
             }
             if (props.touchable) {
-                (0, evtd_1.on)('touchmove', document, handleTouchmove);
+                (0, evtd_1.on)('touchmove', document, handleTouchmove, { passive: true });
                 (0, evtd_1.on)('touchend', document, handleTouchend);
                 (0, evtd_1.on)('touchcancel', document, handleTouchend);
             }
@@ -483,25 +480,24 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleTouchmove(event) {
             const { value: vertical } = verticalRef;
-            const axis = vertical ? 'height' : 'width';
-            const perViewSize = perViewSizeRef.value[axis];
+            const { value: axis } = sizeAxisRef;
             const touchEvent = (0, utils_1.isTouchEvent)(event) ? event.touches[0] : event;
             const offset = vertical
                 ? touchEvent.clientY - dragStartY
                 : touchEvent.clientX - dragStartX;
+            const perViewSize = perViewSizeRef.value[axis];
             dragOffset = (0, utils_1.clampValue)(offset, -perViewSize, perViewSize);
-            dragStatus = 4 /* PROGRESS */;
-            if (translateableRef.value) {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            if (sequenceLayoutRef.value) {
                 updateTranslate(previousTranslate - dragOffset, 0);
             }
         }
         function handleTouchend() {
-            const duration = Date.now() - dragStartTime;
-            const { value: axis } = sizeAxisRef;
             const { value: realIndex } = realIndexRef;
-            const { value: translateable } = translateableRef;
             let currentIndex = realIndex;
-            if (!inTransition && translateable && dragOffset !== 0) {
+            if (!inTransition && dragOffset !== 0 && sequenceLayoutRef.value) {
                 const currentTranslate = previousTranslate - dragOffset;
                 const translates = [
                     ...slideTranlatesRef.value.slice(0, totalViewRef.value - 1),
@@ -518,39 +514,39 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
             if (currentIndex === realIndex) {
+                const timeElapsed = Date.now() - dragStartTime;
+                const { value: axis } = sizeAxisRef;
                 const perViewSize = perViewSizeRef.value[axis];
                 // more than 50% width or faster than 0.4px per ms
-                if (dragOffset > perViewSize / 2 || dragOffset / duration > 0.4) {
+                if (dragOffset > perViewSize / 2 || dragOffset / timeElapsed > 0.4) {
                     currentIndex = getRealPrevIndex(realIndex);
                 }
                 else if (dragOffset < -perViewSize / 2 ||
-                    dragOffset / duration < -0.4) {
+                    dragOffset / timeElapsed < -0.4) {
                     currentIndex = getRealNextIndex(realIndex);
                 }
             }
             if (currentIndex !== null && currentIndex !== realIndex) {
-                dragStatus = 8 /* SUCCESS */;
+                isEffectiveDrag = true;
                 toRealIndex(currentIndex);
+                void (0, vue_1.nextTick)(() => {
+                    if (!duplicatedableRef.value ||
+                        uncontrolledDisplayIndexRef.value !== mergedDisplayIndexRef.value) {
+                        fixTranslate(speedRef.value);
+                    }
+                });
             }
             else {
-                if (dragStatus & 4 /* PROGRESS */) {
-                    dragStatus = 16 /* FAIL */;
-                }
-                else {
-                    dragStatus = 32 /* END */;
-                }
                 fixTranslate(speedRef.value);
             }
-            mesureAutoplay();
             resetDragStatus();
+            resetAutoplay();
         }
         function resetDragStatus() {
-            if (!(dragStatus & 1 /* NORMAL */)) {
+            if (dragging) {
                 globalDragging = false;
-                if (dragStatus & (2 /* START */ | 4 /* PROGRESS */)) {
-                    dragStatus = 1 /* NORMAL */;
-                }
             }
+            dragging = false;
             dragStartX = 0;
             dragStartY = 0;
             dragOffset = 0;
@@ -562,15 +558,14 @@ exports.default = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mouseup', document, handleTouchend);
         }
         function handleTransitionEnd() {
-            const { value: virtualIndex } = virtualIndexRef;
-            const { value: realIndex } = realIndexRef;
-            if (inTransition && virtualIndex !== realIndex) {
+            if (sequenceLayoutRef.value && inTransition) {
+                const { value: realIndex } = realIndexRef;
                 translateTo(realIndex, 0);
             }
             else {
                 resetAutoplay();
             }
-            if (translateableRef.value) {
+            if (sequenceLayoutRef.value) {
                 translateStyleRef.value.transitionDuration = '0ms';
             }
             inTransition = false;
@@ -579,28 +574,27 @@ exports.default = (0, vue_1.defineComponent)({
             event.preventDefault();
             if (inTransition)
                 return;
-            const { value: vertical } = verticalRef;
             let { deltaX, deltaY } = event;
             if (event.shiftKey && !deltaX) {
                 deltaX = deltaY;
             }
-            const P_MULTIPLIER = -1;
-            const N_MULTIPLIER = 1;
-            const MULTIPLIER = (deltaX || deltaY) > 0 ? N_MULTIPLIER : P_MULTIPLIER;
+            const prevMultiplier = -1;
+            const nextMultiplier = 1;
+            const m = (deltaX || deltaY) > 0 ? nextMultiplier : prevMultiplier;
             let rx = 0;
             let ry = 0;
-            if (vertical) {
-                ry = MULTIPLIER;
+            if (verticalRef.value) {
+                ry = m;
             }
             else {
-                rx = MULTIPLIER;
+                rx = m;
             }
-            const RESPONSE_STEP = 10;
-            if (ry * deltaY >= RESPONSE_STEP || rx * deltaX >= RESPONSE_STEP) {
-                if (MULTIPLIER === N_MULTIPLIER && !isNextDisabled()) {
+            const responseStep = 10;
+            if (ry * deltaY >= responseStep || rx * deltaX >= responseStep) {
+                if (m === nextMultiplier && !isNextDisabled()) {
                     next();
                 }
-                else if (MULTIPLIER === P_MULTIPLIER && !isPrevDisabled()) {
+                else if (m === prevMultiplier && !isPrevDisabled()) {
                     prev();
                 }
             }
@@ -616,17 +610,27 @@ exports.default = (0, vue_1.defineComponent)({
                 slideSizesRef.effect.run();
             }
         }
+        function handleMouseenter() {
+            if (props.autoplay) {
+                stopAutoplay();
+            }
+        }
+        function handleMouseleave() {
+            if (props.autoplay) {
+                resetAutoplay();
+            }
+        }
         (0, vue_1.onMounted)(() => {
-            (0, vue_1.watchEffect)(mesureAutoplay);
-            void (0, vue_1.nextTick)(() => (isMounted = true));
+            (0, vue_1.watchEffect)(resetAutoplay);
+            requestAnimationFrame(() => (isMountedRef.value = true));
         });
         (0, vue_1.onBeforeUnmount)(() => {
             resetDragStatus();
-            resetAutoplay(true);
+            stopAutoplay();
         });
         // Fix index when remounting
         (0, vue_1.onUpdated)(() => {
-            const { value: slidesEls } = slidesElsRef;
+            const { value: slidesEls } = slideElsRef;
             const { value: slideVNodes } = slideVNodesRef;
             const indexMap = new Map();
             const getDisplayIndex = (el) => 
@@ -644,12 +648,31 @@ exports.default = (0, vue_1.defineComponent)({
                 slidesEls.sort((a, b) => getDisplayIndex(a) - getDisplayIndex(b));
             }
         });
-        (0, vue_1.watch)((0, vue_1.toRef)(props, 'currentIndex'), (index) => index !== undefined && to(index));
-        (0, vue_1.watch)(duplicatedableRef, () => void (0, vue_1.nextTick)(() => to(displayIndexRef.value)));
-        (0, vue_1.watch)(slideTranlatesRef, () => translateableRef.value && fixTranslate(), {
+        (0, vue_1.watch)(realIndexRef, (realIndex, lastRealIndex) => {
+            if (realIndex === lastRealIndex)
+                return;
+            resetAutoplay();
+            if (sequenceLayoutRef.value) {
+                if (duplicatedableRef.value) {
+                    const { value: length } = totalViewRef;
+                    if (realIndex === length - 2 && lastRealIndex === 1) {
+                        realIndex = 0;
+                    }
+                    else if (realIndex === 1 && lastRealIndex === length - 2) {
+                        realIndex = length - 1;
+                    }
+                }
+                translateTo(realIndex, speedRef.value);
+            }
+            else {
+                fixTranslate();
+            }
+        }, { immediate: true });
+        (0, vue_1.watch)([duplicatedableRef, displaySlidesPerViewRef], () => void (0, vue_1.nextTick)(() => toRealIndex(realIndexRef.value)));
+        (0, vue_1.watch)(slideTranlatesRef, () => sequenceLayoutRef.value && fixTranslate(), {
             deep: true
         });
-        (0, vue_1.watch)(translateableRef, (value) => {
+        (0, vue_1.watch)(sequenceLayoutRef, (value) => {
             if (!value) {
                 inTransition = false;
                 // if the current mode does not support translate, reset the position of the wrapper
@@ -659,22 +682,27 @@ exports.default = (0, vue_1.defineComponent)({
                 fixTranslate();
             }
         });
-        const caroulseSlotProps = {
-            arrowSlotProps: (0, vue_1.computed)(() => (Object.assign({ total: displayTotalViewRef.value, currentIndex: displayIndexRef.value }, (0, _utils_1.keep)(carouselMethods, [
-                'to',
-                'prev',
-                'next',
-                'isPrevDisabled',
-                'isNextDisabled'
-            ])))),
-            dotSlotProps: (0, vue_1.computed)(() => ({
-                total: displayTotalViewRef.value,
-                currentIndex: displayIndexRef.value,
-                to
-            }))
-        };
+        const slidesControlListenersRef = (0, vue_1.computed)(() => {
+            return {
+                onTouchstartPassive: props.touchable ? handleTouchstart : undefined,
+                onMousedown: props.draggable ? handleTouchstart : undefined,
+                onWheel: props.mousewheel ? handleMousewheel : undefined
+            };
+        });
+        const arrowSlotPropsRef = (0, vue_1.computed)(() => (Object.assign(Object.assign({}, (0, _utils_1.keep)(carouselContext, [
+            'to',
+            'prev',
+            'next',
+            'isPrevDisabled',
+            'isNextDisabled'
+        ])), { total: displayTotalViewRef.value, currentIndex: mergedDisplayIndexRef.value })));
+        const dotSlotPropsRef = (0, vue_1.computed)(() => ({
+            total: displayTotalViewRef.value,
+            currentIndex: mergedDisplayIndexRef.value,
+            to: carouselContext.to
+        }));
         const caroulseExposedMethod = {
-            getCurrentIndex: () => displayIndexRef.value,
+            getCurrentIndex: () => mergedDisplayIndexRef.value,
             to: to,
             prev: prev,
             next: next
@@ -696,15 +724,16 @@ exports.default = (0, vue_1.defineComponent)({
         const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('carousel', undefined, cssVarsRef, props)
             : undefined;
-        return Object.assign(Object.assign(Object.assign({ mergedClsPrefix: mergedClsPrefixRef, selfElRef, slideVNodes: slideVNodesRef, duplicatedable: duplicatedableRef, userWantsControl: userWantsControlRef, autoSlideSize: autoSlideSizeRef, displayIndex: displayIndexRef, realIndex: realIndexRef, slideStyles: slideStylesRef, translateStyle: translateStyleRef, handleTouchstart,
-            handleTransitionEnd,
-            handleMousewheel,
+        return Object.assign(Object.assign({ mergedClsPrefix: mergedClsPrefixRef, selfElRef,
+            slidesElRef, slideVNodes: slideVNodesRef, duplicatedable: duplicatedableRef, userWantsControl: userWantsControlRef, autoSlideSize: autoSlideSizeRef, displayIndex: mergedDisplayIndexRef, realIndex: realIndexRef, slideStyles: slideStylesRef, translateStyle: translateStyleRef, slidesControlListeners: slidesControlListenersRef, handleTransitionEnd,
             handleResize,
-            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
+            handleSlideResize,
+            handleMouseenter,
+            handleMouseleave, isActive: isDisplayActive, arrowSlotProps: arrowSlotPropsRef, dotSlotProps: dotSlotPropsRef }, caroulseExposedMethod), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
         var _a;
-        const { mergedClsPrefix, showArrow, userWantsControl, draggable, touchable, slideStyles, dotType, dotPlacement, transitionProps = {}, arrowSlotProps, dotSlotProps, $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot } } = this;
+        const { mergedClsPrefix, showArrow, userWantsControl, slideStyles, dotType, dotPlacement, slidesControlListeners, transitionProps = {}, arrowSlotProps, dotSlotProps, $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot } } = this;
         const children = (defaultSlot && (0, _utils_1.flatten)(defaultSlot())) || [];
         let slides = filterCarouselItem(children);
         if (!slides.length) {
@@ -712,10 +741,8 @@ exports.default = (0, vue_1.defineComponent)({
                 default: () => (0, vue_1.cloneVNode)(ch)
             })));
         }
-        const { length: realLength } = slides;
-        if (realLength > 1 && this.duplicatedable) {
-            slides.push(duplicateSlide(slides[0], 0, 'append'));
-            slides.unshift(duplicateSlide(slides[realLength - 1], realLength - 1, 'prepend'));
+        if (this.duplicatedable) {
+            slides = (0, utils_1.addDuplicateSlides)(slides);
         }
         this.slideVNodes.value = slides;
         // When users need to customize the size of the slide,
@@ -726,7 +753,7 @@ exports.default = (0, vue_1.defineComponent)({
             })));
         }
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return ((0, vue_1.h)("div", { ref: "selfElRef", class: [
+        return ((0, vue_1.h)("div", Object.assign({ ref: "selfElRef", class: [
                 this.themeClass,
                 `${mergedClsPrefix}-carousel`,
                 this.direction === 'vertical' &&
@@ -736,17 +763,18 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-carousel--${this.direction}`,
                 `${mergedClsPrefix}-carousel--${this.effect}`,
                 userWantsControl && `${mergedClsPrefix}-carousel--usercontrol`
-            ], style: this.cssVars },
+            ], style: this.cssVars }, slidesControlListeners, { onMouseenter: this.handleMouseenter, onMouseleave: this.handleMouseleave }),
             (0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleResize }, {
-                default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-carousel__slides`, role: "listbox", style: this.translateStyle, onMousedown: draggable ? this.handleTouchstart : undefined, onTouchstart: touchable ? this.handleTouchstart : undefined, onWheel: this.mousewheel ? this.handleMousewheel : undefined, onTransitionend: this.handleTransitionEnd }, userWantsControl
+                default: () => ((0, vue_1.h)("div", { ref: "slidesElRef", class: `${mergedClsPrefix}-carousel__slides`, role: "listbox", style: this.translateStyle, onTransitionend: this.handleTransitionEnd }, userWantsControl
                     ? slides.map((slide, i) => ((0, vue_1.h)("div", { style: slideStyles[i], key: i }, (0, vue_1.withDirectives)((0, vue_1.h)(vue_1.Transition, Object.assign({}, transitionProps), {
                         default: () => slide
                     }), [[vue_1.vShow, this.isActive(i)]]))))
                     : slides))
             }),
             this.showDots &&
+                dotSlotProps.total > 1 &&
                 (0, _utils_1.resolveSlotWithProps)(dotsSlot, dotSlotProps, () => [
-                    dotSlotProps.total > 1 && ((0, vue_1.h)(CarouselDots_1.default, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))
+                    (0, vue_1.h)(CarouselDots_1.default, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard })
                 ]),
             showArrow &&
                 (0, _utils_1.resolveSlotWithProps)(arrowSlot, arrowSlotProps, () => [
@@ -754,19 +782,11 @@ exports.default = (0, vue_1.defineComponent)({
                 ])));
     }
 });
-function filterCarouselItem(vnodes, carouselItems = []) {
-    if (Array.isArray(vnodes)) {
-        vnodes.forEach((vnode) => {
-            if (vnode.type && vnode.type.name === 'CarouselItem') {
-                carouselItems.push(vnode);
-            }
-        });
-    }
-    return carouselItems;
-}
-function duplicateSlide(child, index, position) {
-    return (0, vue_1.cloneVNode)(child, {
-        // for patch
-        key: `carousel-item-duplicate-${index}-${position}`
-    });
+function filterCarouselItem(vnodes) {
+    return vnodes.reduce((carouselItems, vnode) => {
+        if ((0, CarouselItem_1.isCarouselItem)(vnode)) {
+            carouselItems.push(vnode);
+        }
+        return carouselItems;
+    }, []);
 }