naive-ui 2.30.7 → 2.32.0

package/es/carousel/src/Carousel.js

@@ -1,17 +1,21 @@
-import { h, defineComponent, ref, provide, cloneVNode, computed, onBeforeUnmount, watch, withDirectives, vShow, Transition, toRef, nextTick, onMounted, watchEffect, onUpdated } from 'vue';
+import { h, defineComponent, ref, cloneVNode, computed, onBeforeUnmount, watch, withDirectives, vShow, Transition, toRef, nextTick, onMounted, watchEffect, normalizeStyle, onUpdated } from 'vue';
 import { VResizeObserver } from 'vueuc';
+import { useMergedState } from 'vooks';
 import { on, off } from 'evtd';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { flatten, keep, resolveSlotWithProps } from '../../_utils';
 import { carouselLight } from '../styles';
-import { calculateSize, getNextIndex, getPrevIndex, getDisplayIndex, getRealIndex, isTouchEvent, clampValue, resolveSpeed } from './utils';
+import { calculateSize, clampValue, resolveSpeed, isTouchEvent, getNextIndex, getPrevIndex, getDisplayIndex, getRealIndex, getDisplayTotalView, addDuplicateSlides } from './utils';
+import { provideCarouselContext } from './CarouselContext';
 import NCarouselDots from './CarouselDots';
 import NCarouselArrow from './CarouselArrow';
-import NCarouselItem from './CarouselItem';
-import { carouselMethodsInjectionKey, tuple } from './interface';
+import NCarouselItem, { isCarouselItem } from './CarouselItem';
 import style from './styles/index.cssr';
-const transitionProperties = tuple('transitionDuration', 'transitionTimingFunction');
-const carouselProps = Object.assign(Object.assign({}, useTheme.props), { defaultIndex: {
+const transitionProperties = [
+    'transitionDuration',
+    'transitionTimingFunction'
+];
+export const carouselProps = Object.assign(Object.assign({}, useTheme.props), { defaultIndex: {
         type: Number,
         default: 0
     }, currentIndex: Number, showArrow: Boolean, dotType: {
@@ -62,67 +66,54 @@ export default defineComponent({
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         // Dom
         const selfElRef = ref(null);
-        const slidesElsRef = ref([]);
+        const slidesElRef = ref(null);
+        const slideElsRef = ref([]);
         const slideVNodesRef = { value: [] };
+        // Computed states
+        const verticalRef = computed(() => props.direction === 'vertical');
+        const sizeAxisRef = computed(() => (verticalRef.value ? 'height' : 'width'));
+        const spaceAxisRef = computed(() => verticalRef.value ? 'bottom' : 'right');
+        const sequenceLayoutRef = computed(() => props.effect === 'slide');
+        const duplicatedableRef = 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 = computed(() => props.effect === 'custom');
-        const translateableRef = computed(() => !userWantsControlRef.value && props.effect === 'slide');
-        // TODO
-        const allowLoopRef = 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 = 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 = computed(() => userWantsControlRef.value ||
-            props.centeredSlides ||
-            props.effect !== 'slide'
-            ? 1
-            : props.slidesPerView);
+        const displaySlidesPerViewRef = computed(() => !sequenceLayoutRef.value || props.centeredSlides ? 1 : props.slidesPerView);
         // used to calculate the size of each slide
         const realSlidesPerViewRef = computed(() => userWantsControlRef.value ? 1 : props.slidesPerView);
         // we automatically calculate total view for special slides per view
         const autoSlideSizeRef = computed(() => displaySlidesPerViewRef.value === 'auto' ||
             (props.slidesPerView === 'auto' && props.centeredSlides));
-        const transitionStyleRef = computed(() => props.transitionStyle
-            ? keep(props.transitionStyle, transitionProperties)
-            : {});
-        const speedRef = computed(() => userWantsControlRef.value
-            ? 0
-            : resolveSpeed(transitionStyleRef.value.transitionDuration));
-        const verticalRef = computed(() => props.direction === 'vertical');
-        const sizeAxisRef = computed(() => (verticalRef.value ? 'height' : 'width'));
+        // Carousel size
         const perViewSizeRef = ref({ width: 0, height: 0 });
         const slideSizesRef = 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) => 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 = computed(() => {
             const { value: slideSizes } = slideSizesRef;
-            const { length } = slideSizes;
-            if (!length)
+            if (!slideSizes.length)
                 return [];
             const { centeredSlides, spaceBetween } = props;
             const { value: axis } = sizeAxisRef;
@@ -137,48 +128,58 @@ export default defineComponent({
                 return translate;
             });
         });
-        let isMounted = false;
+        // Styles
+        const isMountedRef = ref(false);
+        const transitionStyleRef = computed(() => {
+            const { transitionStyle } = props;
+            return transitionStyle
+                ? keep(transitionStyle, transitionProperties)
+                : {};
+        });
+        const speedRef = computed(() => userWantsControlRef.value
+            ? 0
+            : resolveSpeed(transitionStyleRef.value.transitionDuration));
         const slideStylesRef = 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 = 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];
@@ -188,59 +189,25 @@ export default defineComponent({
                     i--;
                     lastViewSize += translates[i] - translates[i - 1];
                 }
-                if (i !== length)
-                    i++;
-                if (i < 1)
-                    i = 1;
-                return i;
+                return clampValue(i + 1, 1, length);
             }
         });
-        const displayTotalViewRef = computed(() => {
-            const { value: totalView } = totalViewRef;
-            return duplicatedableRef.value && totalView > 3
-                ? totalView - 2
-                : totalView;
-        });
+        const displayTotalViewRef = computed(() => getDisplayTotalView(totalViewRef.value, duplicatedableRef.value));
         // Index
-        const initializeIndex = props.defaultIndex + (duplicatedableRef.value ? 1 : 0);
-        const displayIndexRef = ref(getDisplayIndex(initializeIndex, totalViewRef.value, duplicatedableRef.value));
-        const virtualIndexRef = ref(initializeIndex);
-        const realIndexRef = ref(initializeIndex);
-        // record the translate of each slide, so that it can be restored at touch
-        let previousTranslate = 0;
+        const defaultRealIndex = getRealIndex(props.defaultIndex, duplicatedableRef.value);
+        const uncontrolledDisplayIndexRef = ref(getDisplayIndex(defaultRealIndex, totalViewRef.value, duplicatedableRef.value));
+        const mergedDisplayIndexRef = useMergedState(toRef(props, 'currentIndex'), uncontrolledDisplayIndexRef);
+        const realIndexRef = computed(() => 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 = 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 = getDisplayIndex(index, totalViewRef.value, duplicatedableRef.value));
-                virtualIndexRef.value = index;
-                realIndexRef.value = 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 = clampValue(index, 0, totalViewRef.value - 1);
+            const displayIndex = 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) {
@@ -263,7 +230,7 @@ export default 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;
@@ -271,52 +238,63 @@ export default defineComponent({
         function isNextDisabled() {
             return getRealNextIndex() === null;
         }
-        // Slide to
+        // To
         function to(index) {
-            const realIndex = getRealIndex(index, duplicatedableRef.value);
-            if (index !== displayIndexRef.value || realIndex !== realIndexRef.value) {
+            const realIndex = clampValue(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 = ref({});
         let inTransition = false;
+        // record the translate of each slide, so that it can be restored at touch
+        let previousTranslate = 0;
+        const translateStyleRef = 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;
@@ -352,37 +330,63 @@ export default 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
+        };
+        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 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;
             }
@@ -391,54 +395,19 @@ export default 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: toRef(props, 'prevSlideStyle'),
-            nextSlideStyleRef: toRef(props, 'nextSlideStyle')
-        };
-        provide(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
@@ -446,14 +415,19 @@ export default 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();
@@ -466,7 +440,7 @@ export default defineComponent({
                 dragStartX = touchEvent.clientX;
             }
             if (props.touchable) {
-                on('touchmove', document, handleTouchmove);
+                on('touchmove', document, handleTouchmove, { passive: true });
                 on('touchend', document, handleTouchend);
                 on('touchcancel', document, handleTouchend);
             }
@@ -477,25 +451,24 @@ export default defineComponent({
         }
         function handleTouchmove(event) {
             const { value: vertical } = verticalRef;
-            const axis = vertical ? 'height' : 'width';
-            const perViewSize = perViewSizeRef.value[axis];
+            const { value: axis } = sizeAxisRef;
             const touchEvent = isTouchEvent(event) ? event.touches[0] : event;
             const offset = vertical
                 ? touchEvent.clientY - dragStartY
                 : touchEvent.clientX - dragStartX;
+            const perViewSize = perViewSizeRef.value[axis];
             dragOffset = 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),
@@ -512,39 +485,39 @@ export default 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 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;
@@ -556,15 +529,14 @@ export default defineComponent({
             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;
@@ -573,28 +545,27 @@ export default 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();
                 }
             }
@@ -610,17 +581,27 @@ export default defineComponent({
                 slideSizesRef.effect.run();
             }
         }
+        function handleMouseenter() {
+            if (props.autoplay) {
+                stopAutoplay();
+            }
+        }
+        function handleMouseleave() {
+            if (props.autoplay) {
+                resetAutoplay();
+            }
+        }
         onMounted(() => {
-            watchEffect(mesureAutoplay);
-            void nextTick(() => (isMounted = true));
+            watchEffect(resetAutoplay);
+            requestAnimationFrame(() => (isMountedRef.value = true));
         });
         onBeforeUnmount(() => {
             resetDragStatus();
-            resetAutoplay(true);
+            stopAutoplay();
         });
         // Fix index when remounting
         onUpdated(() => {
-            const { value: slidesEls } = slidesElsRef;
+            const { value: slidesEls } = slideElsRef;
             const { value: slideVNodes } = slideVNodesRef;
             const indexMap = new Map();
             const getDisplayIndex = (el) => 
@@ -638,12 +619,31 @@ export default defineComponent({
                 slidesEls.sort((a, b) => getDisplayIndex(a) - getDisplayIndex(b));
             }
         });
-        watch(toRef(props, 'currentIndex'), (index) => index !== undefined && to(index));
-        watch(duplicatedableRef, () => void nextTick(() => to(displayIndexRef.value)));
-        watch(slideTranlatesRef, () => translateableRef.value && fixTranslate(), {
+        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 });
+        watch([duplicatedableRef, displaySlidesPerViewRef], () => void nextTick(() => toRealIndex(realIndexRef.value)));
+        watch(slideTranlatesRef, () => sequenceLayoutRef.value && fixTranslate(), {
             deep: true
         });
-        watch(translateableRef, (value) => {
+        watch(sequenceLayoutRef, (value) => {
             if (!value) {
                 inTransition = false;
                 // if the current mode does not support translate, reset the position of the wrapper
@@ -653,22 +653,27 @@ export default defineComponent({
                 fixTranslate();
             }
         });
-        const caroulseSlotProps = {
-            arrowSlotProps: computed(() => (Object.assign({ total: displayTotalViewRef.value, currentIndex: displayIndexRef.value }, keep(carouselMethods, [
-                'to',
-                'prev',
-                'next',
-                'isPrevDisabled',
-                'isNextDisabled'
-            ])))),
-            dotSlotProps: computed(() => ({
-                total: displayTotalViewRef.value,
-                currentIndex: displayIndexRef.value,
-                to
-            }))
-        };
+        const slidesControlListenersRef = computed(() => {
+            return {
+                onTouchstartPassive: props.touchable ? handleTouchstart : undefined,
+                onMousedown: props.draggable ? handleTouchstart : undefined,
+                onWheel: props.mousewheel ? handleMousewheel : undefined
+            };
+        });
+        const arrowSlotPropsRef = computed(() => (Object.assign(Object.assign({}, keep(carouselContext, [
+            'to',
+            'prev',
+            'next',
+            'isPrevDisabled',
+            'isNextDisabled'
+        ])), { total: displayTotalViewRef.value, currentIndex: mergedDisplayIndexRef.value })));
+        const dotSlotPropsRef = computed(() => ({
+            total: displayTotalViewRef.value,
+            currentIndex: mergedDisplayIndexRef.value,
+            to: carouselContext.to
+        }));
         const caroulseExposedMethod = {
-            getCurrentIndex: () => displayIndexRef.value,
+            getCurrentIndex: () => mergedDisplayIndexRef.value,
             to: to,
             prev: prev,
             next: next
@@ -690,15 +695,16 @@ export default defineComponent({
         const themeClassHandle = inlineThemeDisabled
             ? 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 && flatten(defaultSlot())) || [];
         let slides = filterCarouselItem(children);
         if (!slides.length) {
@@ -706,10 +712,8 @@ export default defineComponent({
                 default: () => 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 = addDuplicateSlides(slides);
         }
         this.slideVNodes.value = slides;
         // When users need to customize the size of the slide,
@@ -720,7 +724,7 @@ export default defineComponent({
             })));
         }
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return (h("div", { ref: "selfElRef", class: [
+        return (h("div", Object.assign({ ref: "selfElRef", class: [
                 this.themeClass,
                 `${mergedClsPrefix}-carousel`,
                 this.direction === 'vertical' &&
@@ -730,17 +734,18 @@ export default 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 }),
             h(VResizeObserver, { onResize: this.handleResize }, {
-                default: () => (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: () => (h("div", { ref: "slidesElRef", class: `${mergedClsPrefix}-carousel__slides`, role: "listbox", style: this.translateStyle, onTransitionend: this.handleTransitionEnd }, userWantsControl
                     ? slides.map((slide, i) => (h("div", { style: slideStyles[i], key: i }, withDirectives(h(Transition, Object.assign({}, transitionProps), {
                         default: () => slide
                     }), [[vShow, this.isActive(i)]]))))
                     : slides))
             }),
             this.showDots &&
+                dotSlotProps.total > 1 &&
                 resolveSlotWithProps(dotsSlot, dotSlotProps, () => [
-                    dotSlotProps.total > 1 && (h(NCarouselDots, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))
+                    h(NCarouselDots, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard })
                 ]),
             showArrow &&
                 resolveSlotWithProps(arrowSlot, arrowSlotProps, () => [
@@ -748,19 +753,11 @@ export default 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 cloneVNode(child, {
-        // for patch
-        key: `carousel-item-duplicate-${index}-${position}`
-    });
+function filterCarouselItem(vnodes) {
+    return vnodes.reduce((carouselItems, vnode) => {
+        if (isCarouselItem(vnode)) {
+            carouselItems.push(vnode);
+        }
+        return carouselItems;
+    }, []);
 }