naive-ui 2.31.0 → 2.32.0

package/es/_internal/scrollbar/src/Scrollbar.d.ts

@@ -79,6 +79,7 @@ declare const scrollbarProps: {
     readonly onWheel: PropType<(e: WheelEvent) => void>;
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
+    readonly internalHoistYRail: BooleanConstructor;
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -126,6 +127,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onWheel: PropType<(e: WheelEvent) => void>;
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
+    readonly internalHoistYRail: BooleanConstructor;
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -140,6 +142,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
+    rtlEnabled: import("vue").Ref<import("../../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     containerScrollTop: import("vue").Ref<number>;
     wrapperRef: import("vue").Ref<HTMLElement | null>;
     containerRef: import("vue").Ref<HTMLElement | null>;
@@ -208,6 +211,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onWheel: PropType<(e: WheelEvent) => void>;
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
+    readonly internalHoistYRail: BooleanConstructor;
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -228,6 +232,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly trigger: "none" | "hover";
     readonly useUnifiedContainer: boolean;
     readonly triggerDisplayManually: boolean;
+    readonly internalHoistYRail: boolean;
 }>;
 declare type NativeScrollbarProps = Omit<HTMLAttributes, keyof ScrollbarInternalProps>;
 declare type MergedProps = Partial<ScrollbarInternalProps & NativeScrollbarProps>;

package/es/_internal/scrollbar/src/Scrollbar.js

@@ -1,8 +1,8 @@
-import { h, ref, defineComponent, computed, onMounted, onBeforeUnmount, mergeProps, Transition, watchEffect } from 'vue';
+import { h, ref, defineComponent, computed, onMounted, onBeforeUnmount, mergeProps, Transition, watchEffect, Fragment } from 'vue';
 import { on, off } from 'evtd';
 import { VResizeObserver } from 'vueuc';
 import { useIsIos } from 'vooks';
-import { useConfig, useTheme, useThemeClass } from '../../../_mixins';
+import { useConfig, useTheme, useThemeClass, useRtl } from '../../../_mixins';
 import { useReactivated, Wrapper } from '../../../_utils';
 import { scrollbarLight } from '../styles';
 import style from './styles/index.cssr';
@@ -20,13 +20,14 @@ const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { size:
         default: 'hover'
     }, useUnifiedContainer: Boolean, triggerDisplayManually: Boolean, 
     // If container is set, resize observer won't not attached
-    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function });
+    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function, internalHoistYRail: Boolean });
 const Scrollbar = defineComponent({
     name: 'Scrollbar',
     props: scrollbarProps,
     inheritAttrs: false,
     setup(props) {
-        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
+        const rtlEnabledRef = useRtl('Scrollbar', mergedRtlRef, mergedClsPrefixRef);
         // dom ref
         const wrapperRef = ref(null);
         const containerRef = ref(null);
@@ -297,7 +298,8 @@ const Scrollbar = defineComponent({
             const { value: container } = mergedContainerRef;
             if (container) {
                 containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value = container.scrollLeft;
+                containerScrollLeftRef.value =
+                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
             }
         }
         function syncPositionState() {
@@ -330,7 +332,8 @@ const Scrollbar = defineComponent({
             const { value: container } = mergedContainerRef;
             if (container) {
                 containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value = container.scrollLeft;
+                containerScrollLeftRef.value =
+                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
                 containerHeightRef.value = container.offsetHeight;
                 containerWidthRef.value = container.offsetWidth;
                 contentHeightRef.value = container.scrollHeight;
@@ -367,7 +370,9 @@ const Scrollbar = defineComponent({
             on('mousemove', window, handleXScrollMouseMove, true);
             on('mouseup', window, handleXScrollMouseUp, true);
             memoXLeft = containerScrollLeftRef.value;
-            memoMouseX = e.clientX;
+            memoMouseX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? window.innerWidth - e.clientX
+                : e.clientX;
         }
         function handleXScrollMouseMove(e) {
             if (!xBarPressed)
@@ -383,7 +388,9 @@ const Scrollbar = defineComponent({
             const { value: xBarSize } = xBarSizeRef;
             if (containerWidth === null || contentWidth === null)
                 return;
-            const dX = e.clientX - memoMouseX;
+            const dX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? window.innerWidth - e.clientX - memoMouseX
+                : e.clientX - memoMouseX;
             const dScrollLeft = (dX * (contentWidth - containerWidth)) / (containerWidth - xBarSize);
             const toScrollLeftUpperBound = contentWidth - containerWidth;
             let toScrollLeft = memoXLeft + dScrollLeft;
@@ -391,7 +398,7 @@ const Scrollbar = defineComponent({
             toScrollLeft = Math.max(toScrollLeft, 0);
             const { value: container } = mergedContainerRef;
             if (container) {
-                container.scrollLeft = toScrollLeft;
+                container.scrollLeft = toScrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
                 const { internalOnUpdateScrollLeft } = props;
                 if (internalOnUpdateScrollLeft)
                     internalOnUpdateScrollLeft(toScrollLeft);
@@ -522,7 +529,7 @@ const Scrollbar = defineComponent({
             handleMouseEnterWrapper,
             handleMouseLeaveWrapper
         };
-        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, containerScrollTop: containerScrollTopRef, wrapperRef,
+        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, rtlEnabled: rtlEnabledRef, containerScrollTop: containerScrollTopRef, wrapperRef,
             containerRef,
             contentRef,
             yRailRef,
@@ -535,17 +542,32 @@ const Scrollbar = defineComponent({
     },
     render() {
         var _a;
-        const { $slots, mergedClsPrefix, triggerDisplayManually } = this;
+        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail } = this;
         if (!this.scrollable)
             return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
+        const triggerIsNone = this.trigger === 'none';
+        const createYRail = () => {
+            return (h("div", { ref: "yRailRef", class: [
+                    `${mergedClsPrefix}-scrollbar-rail`,
+                    `${mergedClsPrefix}-scrollbar-rail--vertical`
+                ], "data-scrollbar-rail": true, style: this.verticalRailStyle, "aria-hidden": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                default: () => this.needYBar && this.isShowYBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
+                        height: this.yBarSizePx,
+                        top: this.yBarTopPx
+                    }, onMousedown: this.handleYScrollMouseDown })) : null
+            })));
+        };
         const createChildren = () => {
             var _a, _b;
             (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-            const triggerIsNone = this.trigger === 'none';
             return h('div', mergeProps(this.$attrs, {
                 role: 'none',
                 ref: 'wrapperRef',
-                class: [`${mergedClsPrefix}-scrollbar`, this.themeClass],
+                class: [
+                    `${mergedClsPrefix}-scrollbar`,
+                    this.themeClass,
+                    rtlEnabled && `${mergedClsPrefix}-scrollbar--rtl`
+                ],
                 style: this.cssVars,
                 onMouseenter: triggerDisplayManually
                     ? undefined
@@ -569,29 +591,30 @@ const Scrollbar = defineComponent({
                                 this.contentClass
                             ] }, $slots))
                     }))),
-                h("div", { ref: "yRailRef", class: [
-                        `${mergedClsPrefix}-scrollbar-rail`,
-                        `${mergedClsPrefix}-scrollbar-rail--vertical`
-                    ], "data-scrollbar-rail": true, style: this.verticalRailStyle, "aria-hidden": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
-                    default: () => this.needYBar && this.isShowYBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
-                            height: this.yBarSizePx,
-                            top: this.yBarTopPx
-                        }, onMousedown: this.handleYScrollMouseDown })) : null
-                })),
-                h("div", { ref: "xRailRef", class: [
+                internalHoistYRail ? null : createYRail(),
+                this.xScrollable && (h("div", { ref: "xRailRef", class: [
                         `${mergedClsPrefix}-scrollbar-rail`,
                         `${mergedClsPrefix}-scrollbar-rail--horizontal`
                     ], style: this.horizontalRailStyle, "data-scrollbar-rail": true, "aria-hidden": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                     default: () => this.needXBar && this.isShowXBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             width: this.xBarSizePx,
-                            left: this.xBarLeftPx
+                            right: rtlEnabled ? this.xBarLeftPx : undefined,
+                            left: rtlEnabled ? undefined : this.xBarLeftPx
                         }, onMousedown: this.handleXScrollMouseDown })) : null
-                }))
+                })))
             ]);
         };
-        return this.container ? (createChildren()) : (h(VResizeObserver, { onResize: this.handleContainerResize }, {
+        const scrollbarNode = this.container ? (createChildren()) : (h(VResizeObserver, { onResize: this.handleContainerResize }, {
             default: createChildren
         }));
+        if (internalHoistYRail) {
+            return (h(Fragment, null,
+                scrollbarNode,
+                createYRail()));
+        }
+        else {
+            return scrollbarNode;
+        }
     }
 });
 export default Scrollbar;

package/es/_internal/scrollbar/src/styles/index.cssr.js

@@ -26,7 +26,7 @@ export default cB('scrollbar', `
  `), c('>', [cB('scrollbar-content', `
  box-sizing: border-box;
  min-width: 100%;
- `)])]), cB('scrollbar-rail', `
+ `)])])]), c('>, +', [cB('scrollbar-rail', `
  position: absolute;
  pointer-events: none;
  user-select: none;

package/es/_internal/scrollbar/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/_internal/scrollbar/src/styles/rtl.cssr.js

@@ -0,0 +1,10 @@
+import { cB, c, cM, cE } from '../../../../_utils/cssr';
+export default cB('scrollbar', [cM('rtl', `
+ direction: rtl;
+ `, [c('>', [cB('scrollbar-rail', [cM('horizontal', [c('>', [cE('scrollbar', `
+ left: 0;
+ right: unset;
+ `)])]), cM('vertical', `
+ left: 4px;
+ right: unset;
+ `)])])])]);

package/es/_internal/scrollbar/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as scrollbarDark } from './dark';
 export { default as scrollbarLight } from './light';
+export { default as scrollbarRtl } from './rtl';
 export type { ScrollbarTheme, ScrollbarThemeVars } from './light';

package/es/_internal/scrollbar/styles/index.js

@@ -1,2 +1,3 @@
 export { default as scrollbarDark } from './dark';
 export { default as scrollbarLight } from './light';
+export { default as scrollbarRtl } from './rtl';

package/es/_internal/scrollbar/styles/rtl.d.ts

@@ -0,0 +1,3 @@
+import { RtlItem } from '../../../config-provider/src/internal-interface';
+export declare const scrollbarRtl: RtlItem;
+export default scrollbarRtl;

package/es/_internal/scrollbar/styles/rtl.js

@@ -0,0 +1,6 @@
+import rtlStyle from '../src/styles/rtl.cssr';
+export const scrollbarRtl = {
+    name: 'Scrollbar',
+    style: rtlStyle
+};
+export default scrollbarRtl;

package/es/_internal/selection/src/Selection.js

@@ -501,7 +501,8 @@ export default defineComponent({
                 : this.active
                     ? !this.pattern && !this.isCompositing
                     : true;
-            const placeholder = showPlaceholder ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
+            const placeholder = showPlaceholder ? (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` },
+                h("div", { class: `${clsPrefix}-base-selection-placeholder__inner` }, this.placeholder))) : null;
             const popoverTrigger = filterable ? (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-tags` },
                 tags,
                 maxTagCountResponsive ? null : input,
@@ -545,7 +546,8 @@ export default defineComponent({
                             })
                             : renderLabel
                                 ? renderLabel(this.selectedOption, true)
-                                : render(this.label, this.selectedOption, true)))) : (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" }, this.placeholder)),
+                                : render(this.label, this.selectedOption, true)))) : (h("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
+                        h("div", { class: `${clsPrefix}-base-selection-placeholder__inner` }, this.placeholder))),
                     suffix));
             }
         }

package/es/_internal/selection/src/styles/index.cssr.js

@@ -84,7 +84,10 @@ export default c([cB('base-selection', `
  text-overflow: ellipsis;
  `)]), cB('base-selection-placeholder', `
  color: var(--n-placeholder-color);
- `), cB('base-selection-tags', `
+ `, [cE('inner', `
+ max-width: 100%;
+ overflow: hidden;
+ `)]), cB('base-selection-tags', `
  cursor: pointer;
  outline: none;
  box-sizing: border-box;

package/es/_mixins/index.d.ts

@@ -7,3 +7,4 @@ export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
 export type { Hljs } from './use-hljs';
 export { useThemeClass } from './use-css-vars-class';
+export { useRtl } from './use-rtl';

package/es/_mixins/index.js

@@ -5,3 +5,4 @@ export { default as useLocale } from './use-locale';
 export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
 export { useThemeClass } from './use-css-vars-class';
+export { useRtl } from './use-rtl';

package/es/_utils/naive/extract-public-props.d.ts

@@ -1,6 +1,9 @@
 import { ExtractPropTypes } from 'vue';
 import { useTheme } from '../../_mixins';
 declare type themePropKeys = keyof typeof useTheme.props;
-export declare type ExtractPublicPropTypes<T> = Omit<Partial<ExtractPropTypes<T>>, Exclude<themePropKeys, 'themeOverrides'> | Extract<keyof T, `internal${string}`>>;
+declare type RemoveReadonly<T> = {
+    -readonly [key in keyof T]: T[key];
+};
+export declare type ExtractPublicPropTypes<T> = Omit<Partial<RemoveReadonly<ExtractPropTypes<T>>>, Exclude<themePropKeys, 'themeOverrides'> | Extract<keyof T, `internal${string}`>>;
 export declare type ExtractInternalPropTypes<T> = Partial<ExtractPropTypes<T>>;
 export {};

package/es/auto-complete/src/AutoComplete.d.ts

@@ -824,6 +824,7 @@ declare const _default: import("vue").DefineComponent<{
         select: () => void;
         activate: () => void;
         deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
     } | null>;
     uncontrolledValue: import("vue").Ref<string | null>;
     mergedValue: import("vue").ComputedRef<string | null>;

package/es/avatar/src/Avatar.d.ts

@@ -146,7 +146,6 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
     hasLoadError: import("vue").Ref<boolean>;
     handleError: (e: Event) => void;
-    imageRef: import("vue").Ref<HTMLImageElement | null>;
     shouldStartLoading: import("vue").Ref<boolean>;
     loaded: import("vue").Ref<boolean>;
     mergedOnLoad: (e: Event) => void;

package/es/avatar/src/Avatar.js

@@ -134,7 +134,6 @@ export default defineComponent({
                 return hash;
             }), cssVarsRef, props)
             : undefined;
-        const imageRef = ref(null);
         const shouldStartLoadingRef = ref(!props.lazy);
         onMounted(() => {
             if (isImageSupportNativeLazy) {
@@ -145,7 +144,7 @@ export default defineComponent({
                 unobserve === null || unobserve === void 0 ? void 0 : unobserve();
                 unobserve = undefined;
                 if (props.lazy) {
-                    unobserve = observeIntersection(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                    unobserve = observeIntersection(selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
                 }
             });
             onBeforeUnmount(() => {
@@ -165,7 +164,6 @@ export default defineComponent({
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             hasLoadError: hasLoadErrorRef,
             handleError,
-            imageRef,
             shouldStartLoading: shouldStartLoadingRef,
             loaded: loadedRef,
             mergedOnLoad: (e) => {
@@ -177,10 +175,10 @@ export default defineComponent({
     },
     render() {
         var _a, _b;
-        const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded } = this;
+        const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded, hasLoadError } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         let img;
-        const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const placeholderNode = !loaded && !hasLoadError && ((_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a));
         if (this.hasLoadError) {
             img = h("img", { src: this.fallbackSrc, style: { objectFit: this.objectFit } });
         }
@@ -193,8 +191,7 @@ export default defineComponent({
                 }
                 else if (src) {
                     return h('img', {
-                        loading: lazy ? 'lazy' : 'eager',
-                        ref: 'imageRef',
+                        loading: isImageSupportNativeLazy && lazy ? 'lazy' : 'eager',
                         src: isImageSupportNativeLazy
                             ? src
                             : shouldStartLoading || loaded
@@ -205,8 +202,13 @@ export default defineComponent({
                         onError: this.handleError,
                         style: [
                             { objectFit: this.objectFit },
-                            placeholderNode && !loaded
-                                ? { height: '0', width: '0', visibility: 'hidden' }
+                            placeholderNode
+                                ? {
+                                    height: '0',
+                                    width: '0',
+                                    visibility: 'hidden',
+                                    position: 'absolute'
+                                }
                                 : ''
                         ]
                     });
@@ -215,6 +217,6 @@ export default defineComponent({
         }
         return (h("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars },
             img,
-            lazy && !loaded && placeholderNode));
+            lazy && placeholderNode));
     }
 });

package/es/button/src/Button.js

@@ -81,6 +81,9 @@ const Button = defineComponent({
         });
         const handleMousedown = (e) => {
             var _a;
+            if (!mergedFocusableRef.value) {
+                e.preventDefault();
+            }
             if (props.nativeFocusBehavior) {
                 return;
             }

package/es/carousel/src/Carousel.d.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties, PropType, Ref, TransitionProps, VNode } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-import type { ElementOf } from './interface';
-declare const transitionProperties: ["transitionDuration", "transitionTimingFunction"];
-declare type TransitionStyle = Partial<Pick<CSSProperties, ElementOf<typeof transitionProperties>>>;
+import type { ArrowScopedSlotProps, DotScopedSlotProps, Size } from './interface';
+declare const transitionProperties: readonly ["transitionDuration", "transitionTimingFunction"];
+declare type TransitionStyle = Partial<Pick<CSSProperties, typeof transitionProperties[number]>>;
 export declare const carouselProps: {
     defaultIndex: {
         type: NumberConstructor;
@@ -206,35 +206,9 @@ declare const _default: import("vue").DefineComponent<{
     to: (index: number) => void;
     prev: () => void;
     next: () => void;
-    arrowSlotProps: import("vue").ComputedRef<{
-        to: (index: number) => void;
-        prev: () => void;
-        next: () => void;
-        isVertical: () => boolean;
-        isPrevDisabled: () => boolean;
-        isNextDisabled: () => boolean;
-        isPrev: (slideOrIndex: HTMLElement | number) => boolean;
-        isNext: (slideOrIndex: HTMLElement | number) => boolean;
-        isActive: (slideOrIndex: HTMLElement | number) => boolean;
-        isHorizontal: () => boolean;
-        getCurrentIndex: () => number;
-        getSlideIndex: (slideOrIndex: HTMLElement | number) => number;
-        getSlideStyle: (slide: HTMLElement | number) => any;
-        addSlide: (slide?: HTMLElement | undefined) => void;
-        removeSlide: (slide?: HTMLElement | undefined) => void;
-        onCarouselItemClick: (index: number, event: MouseEvent) => void;
-        prevSlideStyleRef: Ref<string | CSSProperties | undefined>;
-        nextSlideStyleRef: Ref<string | CSSProperties | undefined>;
-        total: number;
-        currentIndex: number;
-    }>;
-    dotSlotProps: import("vue").ComputedRef<{
-        total: number;
-        currentIndex: number;
-        to: (index: number) => void;
-    }>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     selfElRef: Ref<HTMLDivElement | null>;
+    slidesElRef: Ref<HTMLDivElement | null>;
     slideVNodes: {
         value: VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
@@ -243,18 +217,23 @@ declare const _default: import("vue").DefineComponent<{
     duplicatedable: import("vue").ComputedRef<boolean>;
     userWantsControl: import("vue").ComputedRef<boolean>;
     autoSlideSize: import("vue").ComputedRef<boolean>;
-    displayIndex: Ref<number>;
-    realIndex: Ref<number>;
-    slideStyles: import("vue").ComputedRef<CSSProperties[] | {
-        [x: string]: string;
-    }[]>;
+    displayIndex: import("vue").ComputedRef<number>;
+    realIndex: import("vue").ComputedRef<number>;
+    slideStyles: import("vue").ComputedRef<CSSProperties[] | (Partial<Size> | undefined)[]>;
     translateStyle: Ref<CSSProperties>;
-    handleTouchstart: (event: MouseEvent | TouchEvent) => void;
+    slidesControlListeners: import("vue").ComputedRef<{
+        onTouchstartPassive: ((event: MouseEvent | TouchEvent) => void) | undefined;
+        onMousedown: ((event: MouseEvent | TouchEvent) => void) | undefined;
+        onWheel: ((event: WheelEvent) => void) | undefined;
+    }>;
     handleTransitionEnd: () => void;
-    handleMousewheel: (event: WheelEvent) => void;
     handleResize: () => void;
     handleSlideResize: () => void;
+    handleMouseenter: () => void;
+    handleMouseleave: () => void;
     isActive: (index: number) => boolean;
+    arrowSlotProps: import("vue").ComputedRef<ArrowScopedSlotProps>;
+    dotSlotProps: import("vue").ComputedRef<DotScopedSlotProps>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     defaultIndex: {
         type: NumberConstructor;