naive-ui 2.23.1 → 2.24.2

package/es/carousel/src/Carousel.js

@@ -1,301 +1,752 @@
-import { h, defineComponent, ref, toRef, cloneVNode, nextTick, computed, onMounted, watchEffect, onBeforeUnmount } from 'vue';
-import { indexMap } from 'seemly';
+import { h, defineComponent, ref, provide, cloneVNode, computed, onBeforeUnmount, watch, withDirectives, vShow, Transition, toRef, nextTick, onMounted, watchEffect, onUpdated } from 'vue';
+import { VResizeObserver } from 'vueuc';
 import { on, off } from 'evtd';
-import { BackwardIcon, ForwardIcon } from '../../_internal/icons';
 import { useConfig, useTheme } from '../../_mixins';
-import { flatten } from '../../_utils';
+import { flatten, keep } from '../../_utils';
 import { carouselLight } from '../styles';
+import { calculateSize, getNextIndex, getPrevIndex, getDisplayIndex, getRealIndex, isTouchEvent, clampValue, resolveSpeed } from './utils';
+import NCarouselDots from './CarouselDots';
+import NCarouselArrow from './CarouselArrow';
+import NCarouselItem from './CarouselItem';
+import { carouselMethodsInjectionKey, tuple } from './interface';
 import style from './styles/index.cssr';
-const carouselProps = Object.assign(Object.assign({}, useTheme.props), { showArrow: Boolean, autoplay: Boolean, dotPlacement: {
+const transitionProperties = tuple('transitionDuration', 'transitionTimingFunction');
+const carouselProps = Object.assign(Object.assign({}, useTheme.props), { defaultIndex: {
+        type: Number,
+        default: 0
+    }, currentIndex: Number, showArrow: Boolean, dotType: {
+        type: String,
+        default: 'dot'
+    }, dotPlacement: {
         type: String,
         default: 'bottom'
-    }, interval: {
+    }, slidesPerView: {
+        type: [Number, String],
+        default: 1
+    }, spaceBetween: {
+        type: Number,
+        default: 0
+    }, centeredSlides: Boolean, direction: {
+        type: String,
+        default: 'horizontal'
+    }, autoplay: Boolean, interval: {
         type: Number,
         default: 5000
+    }, loop: {
+        type: Boolean,
+        default: true
+    }, effect: {
+        type: String,
+        default: 'slide'
+    }, showDots: {
+        type: Boolean,
+        default: true
     }, trigger: {
         type: String,
         default: 'click'
-    } });
+    }, transitionStyle: {
+        type: Object,
+        default: () => ({
+            transitionDuration: '300ms'
+        })
+    }, transitionProps: Object, draggable: Boolean, touchable: {
+        type: Boolean,
+        default: true
+    }, mousewheel: Boolean, keyboard: Boolean, 'onUpdate:currentIndex': Function, onUpdateCurrentIndex: Function });
+// only one carousel is allowed to trigger touch globally
+let globalDragging = false;
 export default defineComponent({
     name: 'Carousel',
     props: carouselProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const currentRef = ref(1);
-        const lengthRef = { value: 1 };
-        const touchingRef = ref(false);
-        const dragOffsetRef = ref(0);
+        // Dom
         const selfElRef = ref(null);
-        const dotPlacementRef = toRef(props, 'dotPlacement');
-        let timerId = null;
-        let inTransition = false;
-        // current from 0 to length + 1
-        function next() {
-            if (lengthRef.value <= 1)
-                return;
-            if (inTransition)
-                return;
-            inTransition = true;
-            // no need for reset since transitionend handler will handle it
-            currentRef.value++;
+        const slidesElsRef = ref([]);
+        const slideVNodesRef = { 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);
+        // 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'));
+        const perViewSizeRef = ref({ width: 0, height: 0 });
+        const slideSizesRef = computed(() => {
+            const { value: slidesEls } = slidesElsRef;
+            const { length } = slidesEls;
+            if (!length)
+                return [];
+            if (autoSlideSizeRef.value) {
+                return slidesEls.map((slide) => calculateSize(slide));
+            }
+            const { value: slidesPerView } = realSlidesPerViewRef;
+            const { value: perViewSize } = perViewSizeRef;
+            const { value: axis } = sizeAxisRef;
+            let slideSize = perViewSize[axis];
+            if (slidesPerView !== 'auto') {
+                const { spaceBetween } = props;
+                const remaining = slideSize - (slidesPerView - 1) * spaceBetween;
+                const percentage = 1 / Math.max(1, slidesPerView);
+                slideSize = remaining * percentage;
+            }
+            return slidesEls.map(() => (Object.assign(Object.assign({}, perViewSize), { [axis]: slideSize })));
+        });
+        // The translate required to reach each slide
+        const slideTranlatesRef = computed(() => {
+            const { value: slideSizes } = slideSizesRef;
+            const { length } = slideSizes;
+            if (!length)
+                return [];
+            const { centeredSlides, spaceBetween } = props;
+            const { value: axis } = sizeAxisRef;
+            const { [axis]: perViewSize } = perViewSizeRef.value;
+            let previousTranslate = 0;
+            return slideSizes.map(({ [axis]: slideSize }) => {
+                let translate = previousTranslate;
+                if (centeredSlides) {
+                    translate += (slideSize - perViewSize) / 2;
+                }
+                previousTranslate += slideSize + spaceBetween;
+                return translate;
+            });
+        });
+        let isMounted = false;
+        const slideStylesRef = computed(() => {
+            const { value: slideSizes } = slideSizesRef;
+            const { length } = slideSizes;
+            if (!length)
+                return [];
+            const { value: axis } = sizeAxisRef;
+            // when user wants to control the transition animation, we center each slide
+            if (userWantsControlRef.value) {
+                return slideSizes.map((size) => ({
+                    [axis]: `${size[axis]}px`
+                }));
+            }
+            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')) {
+                    Object.assign(style, transitionStyleRef.value);
+                }
+                slideStyles.push(style);
+            }
+            return slideStyles;
+        });
+        // Total
+        const totalViewRef = computed(() => {
+            const { value: slidesPerView } = displaySlidesPerViewRef;
+            const { length: originLength } = slidesElsRef.value;
+            if (slidesPerView !== 'auto') {
+                return originLength - slidesPerView + 1;
+            }
+            else {
+                const { value: slideSizes } = slideSizesRef;
+                const { length } = slideSizes;
+                if (!length)
+                    return originLength;
+                const { value: translates } = slideTranlatesRef;
+                const { value: axis } = sizeAxisRef;
+                const perViewSize = perViewSizeRef.value[axis];
+                let lastViewSize = slideSizes[slideSizes.length - 1][axis];
+                let i = length;
+                while (i > 1 && lastViewSize < perViewSize) {
+                    i--;
+                    lastViewSize += translates[i] - translates[i - 1];
+                }
+                if (i !== length)
+                    i++;
+                if (i < 1)
+                    i = 1;
+                return i;
+            }
+        });
+        const displayTotalViewRef = computed(() => {
+            const { value: totalView } = totalViewRef;
+            return duplicatedableRef.value && totalView > 3
+                ? totalView - 2
+                : totalView;
+        });
+        // 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;
+        // Reality methods
+        function toRealIndex(index, speed = speedRef.value) {
+            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);
+                }
+            }
+        }
+        function getRealPrevIndex(index = realIndexRef.value) {
+            return getPrevIndex(index, totalViewRef.value, props.loop);
+        }
+        function getRealNextIndex(index = realIndexRef.value) {
+            return getNextIndex(index, totalViewRef.value, props.loop);
+        }
+        function isRealPrev(slideOrIndex) {
+            const index = getSlideIndex(slideOrIndex);
+            return index !== null && getRealPrevIndex() === index;
+        }
+        function isRealNext(slideOrIndex) {
+            const index = getSlideIndex(slideOrIndex);
+            return index !== null && getRealNextIndex() === index;
+        }
+        function isRealActive(slideOrIndex) {
+            return realIndexRef.value === getSlideIndex(slideOrIndex);
+        }
+        // Display methods
+        // They are used to deal with the actual values displayed on the UI
+        function isDisplayActive(index) {
+            return displayIndexRef.value === index;
+        }
+        function isPrevDisabled() {
+            return getRealPrevIndex() === null;
+        }
+        function isNextDisabled() {
+            return getRealNextIndex() === null;
+        }
+        // Slide to
+        function to(index) {
+            const realIndex = getRealIndex(index, duplicatedableRef.value);
+            if (index !== displayIndexRef.value || realIndex !== realIndexRef.value) {
+                toRealIndex(realIndex);
+            }
         }
         function prev() {
-            if (lengthRef.value <= 1)
-                return;
-            if (inTransition)
-                return;
-            inTransition = true;
-            // no need for reset since transitionend handler will handle it
-            currentRef.value--;
+            const prevIndex = getRealPrevIndex();
+            if (prevIndex !== null) {
+                toRealIndex(prevIndex);
+            }
         }
-        function setCurrent(value) {
-            if (lengthRef.value <= 1)
-                return;
-            if (inTransition)
-                return;
-            const { value: current } = currentRef;
-            if (value === current)
-                return;
-            inTransition = true;
-            if (current === 1 && value === lengthRef.value && value - current > 1) {
-                currentRef.value--;
+        function next() {
+            const nextIndex = getRealNextIndex();
+            if (nextIndex !== null) {
+                toRealIndex(nextIndex);
+            }
+        }
+        // Translate to
+        const translateStyleRef = ref({});
+        let inTransition = false;
+        function updateTranslate(translate, speed = 0) {
+            const isVersical = props.direction === 'vertical';
+            translateStyleRef.value = Object.assign({}, transitionStyleRef.value, {
+                transform: isVersical
+                    ? `translateY(${-translate}px)`
+                    : `translateX(${-translate}px)`,
+                transitionDuration: `${speed}ms`
+            });
+        }
+        function fixTranslate(speed = 0) {
+            if (translateableRef.value) {
+                translateTo(realIndexRef.value, speed);
+            }
+            else if (previousTranslate !== 0) {
+                updateTranslate((previousTranslate = 0), speed);
+            }
+        }
+        function translateTo(index, speed = speedRef.value) {
+            const translate = getTranslate(index);
+            if (translate !== previousTranslate && speed > 0) {
+                inTransition = true;
             }
-            else if (value === 1 &&
-                current === lengthRef.value &&
-                current - value > 1) {
-                currentRef.value++;
+            updateTranslate(translate, speed);
+            previousTranslate = getTranslate(realIndexRef.value);
+        }
+        function getTranslate(index) {
+            let translate;
+            // Deal with auto slides pre view
+            if (index >= totalViewRef.value - 1) {
+                translate = getLastViewTranslate();
             }
             else {
-                currentRef.value = value;
+                translate = slideTranlatesRef.value[index] || 0;
             }
-            if (props.autoplay) {
-                resetInterval();
+            return translate;
+        }
+        function getLastViewTranslate() {
+            if (displaySlidesPerViewRef.value === 'auto') {
+                const { value: axis } = sizeAxisRef;
+                const { [axis]: perViewSize } = perViewSizeRef.value;
+                const { value: translates } = slideTranlatesRef;
+                const lastTranslate = translates[translates.length - 1];
+                let overallSize;
+                if (lastTranslate === undefined) {
+                    overallSize = perViewSize;
+                }
+                else {
+                    const { value: slideSizes } = slideSizesRef;
+                    overallSize = lastTranslate + slideSizes[slideSizes.length - 1][axis];
+                }
+                // Bring the last slide to the edge
+                return overallSize - perViewSize;
+            }
+            else {
+                const { value: translates } = slideTranlatesRef;
+                return translates[totalViewRef.value - 1] || 0;
             }
         }
-        // slot    [ 0 1 2 ]
-        // index   0 1 2 3 4
-        // display 2 0 1 2 0
-        function handleTransitionEnd(e) {
-            const target = e.target;
-            if (target !== e.currentTarget)
+        // Provide
+        function addSlide(slide) {
+            if (!slide)
+                return;
+            slidesElsRef.value.push(slide);
+        }
+        function removeSlide(slide) {
+            if (!slide)
                 return;
-            const { value: current } = currentRef;
-            const { value: length } = lengthRef;
-            const nextCurrent = current === 0 ? length : current === length + 1 ? 1 : null;
-            if (nextCurrent !== null) {
-                currentRef.value = nextCurrent;
-                void nextTick(() => {
-                    target.style.transition = 'none';
-                    void target.offsetWidth;
-                    target.style.transition = '';
-                    inTransition = false;
-                });
+            const index = getSlideIndex(slide);
+            if (index !== -1) {
+                slidesElsRef.value.splice(index, 1);
             }
-            else {
-                inTransition = false;
+        }
+        function getSlideIndex(slideOrIndex) {
+            return typeof slideOrIndex === 'number'
+                ? slideOrIndex
+                : slidesElsRef.value.indexOf(slideOrIndex);
+        }
+        function getSlideStyle(slide) {
+            const index = getSlideIndex(slide);
+            if (index !== -1) {
+                return slideStylesRef.value[index];
             }
         }
-        function handleKeydown(e, current) {
-            switch (e.code) {
-                case 'Enter':
-                case 'NumpadEnter':
-                case 'Space':
-                    setCurrent(current);
+        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)) {
+                to(index);
+                allowClick = false;
+            }
+            if (!allowClick) {
+                event.preventDefault();
+                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
+        };
+        provide(carouselMethodsInjectionKey, carouselMethods);
+        // Autoplay
+        let autoplayTimer = null;
+        function resetAutoplay(cleanOnly) {
+            if (autoplayTimer) {
+                clearInterval(autoplayTimer);
+                autoplayTimer = null;
+            }
+            const { autoplay, interval } = props;
+            if (autoplay && interval && !cleanOnly) {
+                autoplayTimer = setInterval(next, interval);
+            }
+        }
+        function mesureAutoplay() {
+            const { autoplay } = props;
+            if (autoplay) {
+                resetAutoplay();
+            }
+            else if (displayTotalViewRef.value < 2) {
+                resetAutoplay(true);
+            }
+        }
+        // Drag
         let dragStartX = 0;
         let dragStartY = 0;
+        let dragOffset = 0;
         let dragStartTime = 0;
-        let memorizedContainerWidth = 0;
-        let memorizedContainerHeight = 0;
-        function handleTouchstart(e) {
-            if (timerId !== null) {
-                window.clearInterval(timerId);
-            }
-            e.preventDefault();
-            const { value: dotPlacement } = dotPlacementRef;
-            if (dotPlacement === 'left' || dotPlacement === 'right') {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                memorizedContainerHeight = selfElRef.value.offsetHeight;
-                touchingRef.value = true;
-                dragStartTime = Date.now();
-                dragStartY = e.touches[0].clientY;
+        let dragStatus = 1 /* NORMAL */;
+        function handleTouchstart(event) {
+            if (globalDragging)
+                return;
+            dragStartTime = Date.now();
+            dragStatus = 2 /* START */;
+            globalDragging = true;
+            resetAutoplay(true /** cleanOnly */);
+            if (event.type !== 'touchstart' &&
+                !event.target.isContentEditable) {
+                event.preventDefault();
             }
-            else {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                memorizedContainerWidth = selfElRef.value.offsetWidth;
-                touchingRef.value = true;
-                dragStartTime = Date.now();
-                dragStartX = e.touches[0].clientX;
-            }
-            on('touchmove', document, handleTouchmove);
-            on('touchend', document, handleTouchend);
-            on('touchcancel', document, handleTouchend);
-        }
-        function handleTouchmove(e) {
-            const { value: dotPlacement } = dotPlacementRef;
-            if (dotPlacement === 'left' || dotPlacement === 'right') {
-                const dragOffset = e.touches[0].clientY - dragStartY;
-                dragOffsetRef.value =
-                    dragOffset > memorizedContainerHeight
-                        ? memorizedContainerHeight
-                        : dragOffset < -memorizedContainerHeight
-                            ? -memorizedContainerHeight
-                            : dragOffset;
+            const touchEvent = isTouchEvent(event) ? event.touches[0] : event;
+            if (verticalRef.value) {
+                dragStartY = touchEvent.clientY;
             }
             else {
-                const dragOffset = e.touches[0].clientX - dragStartX;
-                dragOffsetRef.value =
-                    dragOffset > memorizedContainerWidth
-                        ? memorizedContainerWidth
-                        : dragOffset < -memorizedContainerWidth
-                            ? -memorizedContainerWidth
-                            : dragOffset;
+                dragStartX = touchEvent.clientX;
+            }
+            if (props.touchable) {
+                on('touchmove', document, handleTouchmove);
+                on('touchend', document, handleTouchend);
+                on('touchcancel', document, handleTouchend);
+            }
+            if (props.draggable) {
+                on('mousemove', document, handleTouchmove);
+                on('mouseup', document, handleTouchend);
+            }
+        }
+        function handleTouchmove(event) {
+            const { value: vertical } = verticalRef;
+            const axis = vertical ? 'height' : 'width';
+            const perViewSize = perViewSizeRef.value[axis];
+            const touchEvent = isTouchEvent(event) ? event.touches[0] : event;
+            const offset = vertical
+                ? touchEvent.clientY - dragStartY
+                : touchEvent.clientX - dragStartX;
+            dragOffset = clampValue(offset, -perViewSize, perViewSize);
+            dragStatus = 4 /* PROGRESS */;
+            if (translateableRef.value) {
+                updateTranslate(previousTranslate - dragOffset, 0);
             }
         }
         function handleTouchend() {
-            if (props.autoplay)
-                resetInterval();
-            void nextTick(() => {
-                touchingRef.value = false;
-            });
-            const { value: selfEl } = selfElRef;
-            if (selfEl) {
-                const { offsetWidth, offsetHeight } = selfEl;
-                const { value: dragOffset } = dragOffsetRef;
-                const duration = Date.now() - dragStartTime;
-                const { value: dotPlacement } = dotPlacementRef;
-                // more than 50% width or faster than 0.4px per ms
-                if (dotPlacement === 'left' || dotPlacement === 'right') {
-                    if (dragOffset > offsetHeight / 2 || dragOffset / duration > 0.4) {
-                        prev();
-                    }
-                    else if (dragOffset < -offsetHeight / 2 ||
-                        dragOffset / duration < -0.4) {
-                        next();
+            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) {
+                const currentTranslate = previousTranslate - dragOffset;
+                const translates = [
+                    ...slideTranlatesRef.value.slice(0, totalViewRef.value - 1),
+                    getLastViewTranslate()
+                ];
+                let prevOffset = null;
+                for (let i = 0; i < translates.length; i++) {
+                    const offset = Math.abs(translates[i] - currentTranslate);
+                    if (prevOffset !== null && prevOffset < offset) {
+                        break;
                     }
+                    prevOffset = offset;
+                    currentIndex = i;
+                }
+            }
+            if (currentIndex === realIndex) {
+                const perViewSize = perViewSizeRef.value[axis];
+                // more than 50% width or faster than 0.4px per ms
+                if (dragOffset > perViewSize / 2 || dragOffset / duration > 0.4) {
+                    currentIndex = getRealPrevIndex(realIndex);
+                }
+                else if (dragOffset < -perViewSize / 2 ||
+                    dragOffset / duration < -0.4) {
+                    currentIndex = getRealNextIndex(realIndex);
+                }
+            }
+            if (currentIndex !== null && currentIndex !== realIndex) {
+                dragStatus = 8 /* SUCCESS */;
+                toRealIndex(currentIndex);
+            }
+            else {
+                if (dragStatus & 4 /* PROGRESS */) {
+                    dragStatus = 16 /* FAIL */;
                 }
                 else {
-                    if (dragOffset > offsetWidth / 2 || dragOffset / duration > 0.4) {
-                        prev();
-                    }
-                    else if (dragOffset < -offsetWidth / 2 ||
-                        dragOffset / duration < -0.4) {
-                        next();
-                    }
+                    dragStatus = 32 /* END */;
+                }
+                fixTranslate(speedRef.value);
+            }
+            mesureAutoplay();
+            resetDragStatus();
+        }
+        function resetDragStatus() {
+            if (!(dragStatus & 1 /* NORMAL */)) {
+                globalDragging = false;
+                if (dragStatus & (2 /* START */ | 4 /* PROGRESS */)) {
+                    dragStatus = 1 /* NORMAL */;
                 }
             }
-            dragOffsetRef.value = 0;
+            dragStartX = 0;
+            dragStartY = 0;
+            dragOffset = 0;
+            dragStartTime = 0;
             off('touchmove', document, handleTouchmove);
             off('touchend', document, handleTouchend);
             off('touchcancel', document, handleTouchend);
+            off('mousemove', document, handleTouchmove);
+            off('mouseup', document, handleTouchend);
         }
-        function handleMouseenter(current) {
-            if (props.trigger === 'hover') {
-                setCurrent(current);
+        function handleTransitionEnd() {
+            const { value: virtualIndex } = virtualIndexRef;
+            const { value: realIndex } = realIndexRef;
+            if (inTransition && virtualIndex !== realIndex) {
+                translateTo(realIndex, 0);
             }
-        }
-        function resetInterval() {
-            if (timerId !== null) {
-                window.clearInterval(timerId);
+            else {
+                resetAutoplay();
+            }
+            if (translateableRef.value) {
+                translateStyleRef.value.transitionDuration = '0ms';
             }
-            timerId = window.setInterval(() => {
-                next();
-            }, props.interval);
+            inTransition = false;
         }
-        onMounted(() => {
-            watchEffect(() => {
-                if (props.autoplay) {
-                    resetInterval();
+        function handleMousewheel(event) {
+            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;
+            let rx = 0;
+            let ry = 0;
+            if (vertical) {
+                ry = MULTIPLIER;
+            }
+            else {
+                rx = MULTIPLIER;
+            }
+            const RESPONSE_STEP = 10;
+            if (ry * deltaY >= RESPONSE_STEP || rx * deltaX >= RESPONSE_STEP) {
+                if (MULTIPLIER === N_MULTIPLIER && !isNextDisabled()) {
+                    next();
                 }
-                else {
-                    if (timerId !== null) {
-                        window.clearInterval(timerId);
-                    }
+                else if (MULTIPLIER === P_MULTIPLIER && !isPrevDisabled()) {
+                    prev();
                 }
-            });
+            }
+        }
+        function handleResize() {
+            perViewSizeRef.value = calculateSize(selfElRef.value, true);
+            resetAutoplay();
+        }
+        function handleSlideResize() {
+            var _a, _b;
+            if (autoSlideSizeRef.value) {
+                (_b = (_a = slideSizesRef.effect).scheduler) === null || _b === void 0 ? void 0 : _b.call(_a);
+                slideSizesRef.effect.run();
+            }
+        }
+        onMounted(() => {
+            watchEffect(mesureAutoplay);
+            void nextTick(() => (isMounted = true));
         });
         onBeforeUnmount(() => {
-            if (timerId !== null) {
-                window.clearInterval(timerId);
+            resetDragStatus();
+            resetAutoplay(true);
+        });
+        // Fix index when remounting
+        onUpdated(() => {
+            const { value: slidesEls } = slidesElsRef;
+            const { value: slideVNodes } = slideVNodesRef;
+            const indexMap = new Map();
+            const getDisplayIndex = (el) => 
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            indexMap.has(el) ? indexMap.get(el) : -1;
+            let isChanged = false;
+            for (let i = 0; i < slidesEls.length; i++) {
+                const index = slideVNodes.findIndex((v) => v.el === slidesEls[i]);
+                if (index !== i) {
+                    isChanged = true;
+                }
+                indexMap.set(slidesEls[i], index);
+            }
+            if (isChanged) {
+                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(), {
+            deep: true
+        });
+        watch(translateableRef, (value) => {
+            if (!value) {
+                inTransition = false;
+                // if the current mode does not support translate, reset the position of the wrapper
+                updateTranslate((previousTranslate = 0));
+            }
+            else {
+                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 caroulseExposedMethod = {
+            getCurrentIndex: () => displayIndexRef.value,
+            to: to,
+            prev: prev,
+            next: next
+        };
         const themeRef = useTheme('Carousel', 'Carousel', style, carouselLight, props);
-        return {
-            selfElRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            current: currentRef,
-            lengthRef,
-            touching: touchingRef,
-            dragOffset: dragOffsetRef,
-            prev,
-            next,
-            setCurrent,
-            handleKeydown,
-            handleTouchstart,
+        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,
-            handleMouseenter,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { dotColor, dotColorActive, dotSize, arrowColor } } = themeRef.value;
+            handleMousewheel,
+            handleResize,
+            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { cssVars: computed(() => {
+                const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--dot-color': dotColor,
-                    '--dot-color-active': dotColorActive,
-                    '--dot-size': dotSize,
-                    '--arrow-color': arrowColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-dot-color': dotColor,
+                    '--n-dot-color-focus': dotColorFocus,
+                    '--n-dot-color-active': dotColorActive,
+                    '--n-dot-size': dotSize,
+                    '--n-dot-line-width': dotLineWidth,
+                    '--n-dot-line-width-active': dotLineWidthActive,
+                    '--n-arrow-color': arrowColor
                 };
-            })
-        };
+            }) });
     },
     render() {
-        const { showArrow, dotPlacement, mergedClsPrefix, current, lengthRef, autoplay, $slots: { default: defaultSlot } } = this;
-        const children = flatten((defaultSlot === null || defaultSlot === void 0 ? void 0 : defaultSlot()) || []);
-        const { length } = children;
-        lengthRef.value = length;
-        const leftOverflowVNode = length ? cloneVNode(children[length - 1]) : null;
-        const rightOverflowVNode = length ? cloneVNode(children[0]) : null;
-        const total = length + 2;
-        const vertical = dotPlacement === 'left' || dotPlacement === 'right';
-        return (h("div", { class: [
+        const { mergedClsPrefix, showArrow, userWantsControl, draggable, touchable, slideStyles, dotType, dotPlacement, transitionProps = {}, arrowSlotProps, dotSlotProps, $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot } } = this;
+        const children = (defaultSlot && flatten(defaultSlot())) || [];
+        let slides = filterCarouselItem(children);
+        if (!slides.length) {
+            slides = children.map((ch) => (h(NCarouselItem, null, {
+                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'));
+        }
+        this.slideVNodes.value = slides;
+        // When users need to customize the size of the slide,
+        // we listen to them to fix the current translate
+        if (this.autoSlideSize) {
+            slides = slides.map((slide) => (h(VResizeObserver, { onResize: this.handleSlideResize }, {
+                default: () => slide
+            })));
+        }
+        return (h("div", { ref: "selfElRef", class: [
                 `${mergedClsPrefix}-carousel`,
-                `${mergedClsPrefix}-carousel--${this.dotPlacement}`
-            ], style: this.cssVars, ref: "selfElRef" },
-            h("div", { class: `${mergedClsPrefix}-carousel__slides`, onTouchstart: this.handleTouchstart, style: {
-                    [vertical ? 'height' : 'width']: `${total}00%`,
-                    [vertical ? 'width' : 'height']: '100%',
-                    transition: this.touching ? 'none' : '',
-                    transform: vertical
-                        ? `translate3d(0, -${(100 / total) * (current % total)}%, 0)` +
-                            (this.touching ? `translateY(${this.dragOffset}px)` : '')
-                        : `translate3d(-${(100 / total) * (current % total)}%, 0, 0)` +
-                            (this.touching ? `translateX(${this.dragOffset}px)` : '')
-                }, onTransitionend: this.handleTransitionEnd, role: "listbox" }, [leftOverflowVNode, ...children, rightOverflowVNode].map((vNode, i) => (h("div", { "data-index": i, style: { [vertical ? 'height' : 'width']: `${100 / total}%` }, key: i, role: "option", "aria-hidden": i !== current }, vNode)))),
-            h("div", { class: `${mergedClsPrefix}-carousel__dots`, role: "tablist" }, indexMap(length, (i) => {
-                const selected = i + 1 === current;
-                return (h("div", { "aria-selected": selected, role: "button", tabindex: "0", class: [
-                        `${mergedClsPrefix}-carousel__dot`,
-                        selected && `${mergedClsPrefix}-carousel__dot--active`
-                    ], onClick: () => this.setCurrent(i + 1), onMouseenter: () => this.handleMouseenter(i + 1), onMousedown: autoplay
-                        ? (e) => {
-                            e.preventDefault();
-                        }
-                        : undefined, onKeydown: (e) => this.handleKeydown(e, i + 1) }));
-            })),
-            showArrow && [
-                h("div", { class: [
-                        `${mergedClsPrefix}-carousel__arrow`,
-                        `${mergedClsPrefix}-carousel__arrow--${vertical ? 'bottom' : 'right'}`
-                    ], role: "button", onClick: () => {
-                        this.next();
-                    } },
-                    h(ForwardIcon, null)),
-                h("div", { class: [
-                        `${mergedClsPrefix}-carousel__arrow`,
-                        `${mergedClsPrefix}-carousel__arrow--${vertical ? 'top' : 'left'}`
-                    ], role: "button", onClick: () => {
-                        this.prev();
-                    } },
-                    h(BackwardIcon, null))
-            ]));
+                `${mergedClsPrefix}-carousel--${dotPlacement}`,
+                `${mergedClsPrefix}-carousel--${this.direction}`,
+                `${mergedClsPrefix}-carousel--${this.effect}`,
+                userWantsControl && `${mergedClsPrefix}-carousel--usercontrol`
+            ], style: this.cssVars },
+            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
+                    ? 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 &&
+                (dotsSlot
+                    ? dotsSlot(dotSlotProps)
+                    : dotSlotProps.total > 1 && (h(NCarouselDots, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))),
+            showArrow &&
+                (arrowSlot ? arrowSlot(arrowSlotProps) : h(NCarouselArrow, null))));
     }
 });
+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}`
+    });
+}