naive-ui 2.30.7 → 2.32.0

package/es/avatar/src/Avatar.js

@@ -1,10 +1,12 @@
-import { h, ref, computed, defineComponent, inject, watch } from 'vue';
+import { h, ref, computed, defineComponent, inject, watch, watchEffect, onMounted, onBeforeUnmount } from 'vue';
 import { VResizeObserver } from 'vueuc';
-import { avatarGroupInjectionKey } from './context';
+import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load';
+import { observeIntersection } from '../../image/src/utils';
 import { tagInjectionKey } from '../../tag/src/Tag';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { avatarLight } from '../styles';
 import { createKey, color2Class, resolveWrappedSlot } from '../../_utils';
+import { avatarLight } from '../styles';
+import { avatarGroupInjectionKey } from './context';
 import style from './styles/index.cssr';
 export const avatarProps = Object.assign(Object.assign({}, useTheme.props), { size: [String, Number], src: String, circle: {
         type: Boolean,
@@ -15,7 +17,7 @@ export const avatarProps = Object.assign(Object.assign({}, useTheme.props), { si
     }, bordered: {
         type: Boolean,
         default: undefined
-    }, onError: Function, fallbackSrc: String, 
+    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, 
     /** @deprecated */
     color: String });
 export default defineComponent({
@@ -72,6 +74,8 @@ export default defineComponent({
             return props.bordered || false;
         });
         const handleError = (e) => {
+            if (!shouldStartLoadingRef.value)
+                return;
             hasLoadErrorRef.value = true;
             const { onError } = props;
             if (onError) {
@@ -130,6 +134,25 @@ export default defineComponent({
                 return hash;
             }), cssVarsRef, props)
             : undefined;
+        const shouldStartLoadingRef = ref(!props.lazy);
+        onMounted(() => {
+            if (isImageSupportNativeLazy) {
+                return;
+            }
+            let unobserve;
+            const stopWatchHandle = watchEffect(() => {
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                unobserve = undefined;
+                if (props.lazy) {
+                    unobserve = observeIntersection(selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                }
+            });
+            onBeforeUnmount(() => {
+                stopWatchHandle();
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+            });
+        });
+        const loadedRef = ref(!props.lazy);
         return {
             textRef,
             selfRef,
@@ -140,13 +163,22 @@ export default defineComponent({
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             hasLoadError: hasLoadErrorRef,
-            handleError
+            handleError,
+            shouldStartLoading: shouldStartLoadingRef,
+            loaded: loadedRef,
+            mergedOnLoad: (e) => {
+                const { onLoad } = props;
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+                loadedRef.value = true;
+            }
         };
     },
     render() {
-        const { $slots, src, mergedClsPrefix, onRender } = this;
+        var _a, _b;
+        const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded, hasLoadError } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         let img;
+        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 } });
         }
@@ -158,10 +190,33 @@ export default defineComponent({
                     }));
                 }
                 else if (src) {
-                    return (h("img", { src: src, onError: this.handleError, style: { objectFit: this.objectFit } }));
+                    return h('img', {
+                        loading: isImageSupportNativeLazy && lazy ? 'lazy' : 'eager',
+                        src: isImageSupportNativeLazy
+                            ? src
+                            : shouldStartLoading || loaded
+                                ? src
+                                : undefined,
+                        onLoad: mergedOnLoad,
+                        'data-image-src': src,
+                        onError: this.handleError,
+                        style: [
+                            { objectFit: this.objectFit },
+                            placeholderNode
+                                ? {
+                                    height: '0',
+                                    width: '0',
+                                    visibility: 'hidden',
+                                    position: 'absolute'
+                                }
+                                : ''
+                        ]
+                    });
                 }
             });
         }
-        return (h("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars }, img));
+        return (h("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars },
+            img,
+            lazy && placeholderNode));
     }
 });

package/es/avatar-group/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NAvatarGroup } from './src/AvatarGroup';
+export { default as NAvatarGroup, avatarGroupProps } from './src/AvatarGroup';
 export type { AvatarGroupProps } from './src/AvatarGroup';

package/es/avatar-group/index.js

@@ -1 +1 @@
-export { default as NAvatarGroup } from './src/AvatarGroup';
+export { default as NAvatarGroup, avatarGroupProps } from './src/AvatarGroup';

package/es/avatar-group/src/AvatarGroup.d.ts

@@ -7,7 +7,7 @@ export interface AvatarGroupInjection {
 interface AvatarOption {
     src: string;
 }
-declare const avatarGroupProps: {
+export declare const avatarGroupProps: {
     readonly max: NumberConstructor;
     readonly maxStyle: PropType<string | CSSProperties>;
     readonly options: {

package/es/avatar-group/src/AvatarGroup.js

@@ -3,9 +3,9 @@ import { avatarGroupInjectionKey } from '../../avatar/src/context';
 import NAvatar from '../../avatar/src/Avatar';
 import { useConfig, useTheme } from '../../_mixins';
 import style from './styles/avatar-group.cssr';
-import useRtl from '../../_mixins/use-rtl';
+import { useRtl } from '../../_mixins/use-rtl';
 import { avatarGroupLight } from '../styles';
-const avatarGroupProps = Object.assign(Object.assign({}, useTheme.props), { max: Number, maxStyle: [Object, String], options: {
+export const avatarGroupProps = Object.assign(Object.assign({}, useTheme.props), { max: Number, maxStyle: [Object, String], options: {
         type: Array,
         default: () => []
     }, vertical: Boolean, size: [String, Number] });

package/es/back-top/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NBackTop } from './src/BackTop';
+export { default as NBackTop, backTopProps } from './src/BackTop';
 export type { BackTopProps } from './src/BackTop';

package/es/back-top/index.js

@@ -1 +1 @@
-export { default as NBackTop } from './src/BackTop';
+export { default as NBackTop, backTopProps } from './src/BackTop';

package/es/back-top/src/BackTop.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const backTopProps: {
+export declare const backTopProps: {
     readonly show: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;

package/es/back-top/src/BackTop.js

@@ -8,7 +8,7 @@ import { lockHtmlScrollRightCompensationRef, formatLength, resolveSlot, isDocume
 import { backTopLight } from '../styles';
 import BackTopIcon from './BackTopIcon';
 import style from './styles/index.cssr';
-const backTopProps = Object.assign(Object.assign({}, useTheme.props), { show: {
+export const backTopProps = Object.assign(Object.assign({}, useTheme.props), { show: {
         type: Boolean,
         default: undefined
     }, right: {

package/es/badge/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NBadge } from './src/Badge';
+export { default as NBadge, badgeProps } from './src/Badge';
 export type { BadgeProps } from './src/Badge';

package/es/badge/index.js

@@ -1 +1 @@
-export { default as NBadge } from './src/Badge';
+export { default as NBadge, badgeProps } from './src/Badge';

package/es/badge/src/Badge.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const badgeProps: {
+export declare const badgeProps: {
     readonly value: PropType<string | number>;
     readonly max: NumberConstructor;
     readonly dot: BooleanConstructor;

package/es/badge/src/Badge.js

@@ -4,8 +4,8 @@ import { NBaseSlotMachine, NBaseWave } from '../../_internal';
 import { color2Class, createKey, getTitleAttribute, isSlotEmpty, resolveSlot } from '../../_utils';
 import { badgeLight } from '../styles';
 import style from './styles/index.cssr';
-import useRtl from '../../_mixins/use-rtl';
-const badgeProps = Object.assign(Object.assign({}, useTheme.props), { value: [String, Number], max: Number, dot: Boolean, type: {
+import { useRtl } from '../../_mixins/use-rtl';
+export const badgeProps = Object.assign(Object.assign({}, useTheme.props), { value: [String, Number], max: Number, dot: Boolean, type: {
         type: String,
         default: 'default'
     }, show: {

package/es/breadcrumb/index.d.ts

@@ -1,4 +1,4 @@
-export { default as NBreadcrumb } from './src/Breadcrumb';
-export { default as NBreadcrumbItem } from './src/BreadcrumbItem';
+export { default as NBreadcrumb, breadcrumbProps } from './src/Breadcrumb';
+export { default as NBreadcrumbItem, breadcrumbItemProps } from './src/BreadcrumbItem';
 export type { BreadcrumbProps } from './src/Breadcrumb';
 export type { BreadcrumbItemProps } from './src/BreadcrumbItem';

package/es/breadcrumb/index.js

@@ -1,2 +1,2 @@
-export { default as NBreadcrumb } from './src/Breadcrumb';
-export { default as NBreadcrumbItem } from './src/BreadcrumbItem';
+export { default as NBreadcrumb, breadcrumbProps } from './src/Breadcrumb';
+export { default as NBreadcrumbItem, breadcrumbItemProps } from './src/BreadcrumbItem';

package/es/breadcrumb/src/Breadcrumb.d.ts

@@ -5,7 +5,7 @@ export interface BreadcrumbInjection {
     mergedClsPrefixRef: Ref<string>;
 }
 export declare const breadcrumbInjectionKey: import("vue").InjectionKey<BreadcrumbInjection>;
-declare const breadcrumbProps: {
+export declare const breadcrumbProps: {
     readonly separator: {
         readonly type: StringConstructor;
         readonly default: "/";

package/es/breadcrumb/src/Breadcrumb.js

@@ -4,7 +4,7 @@ import { breadcrumbLight } from '../styles';
 import style from './styles/index.cssr';
 import { createInjectionKey } from '../../_utils';
 export const breadcrumbInjectionKey = createInjectionKey('n-breadcrumb');
-const breadcrumbProps = Object.assign(Object.assign({}, useTheme.props), { separator: {
+export const breadcrumbProps = Object.assign(Object.assign({}, useTheme.props), { separator: {
         type: String,
         default: '/'
     } });

package/es/breadcrumb/src/BreadcrumbItem.d.ts

@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-declare const breadcrumbItemProps: {
+export declare const breadcrumbItemProps: {
     readonly separator: StringConstructor;
     readonly href: StringConstructor;
     readonly clickable: {

package/es/breadcrumb/src/BreadcrumbItem.js

@@ -2,7 +2,7 @@ import { h, defineComponent, inject, computed } from 'vue';
 import { resolveSlot, warn } from '../../_utils';
 import { useBrowserLocation } from '../../_utils/composable/use-browser-location';
 import { breadcrumbInjectionKey } from './Breadcrumb';
-const breadcrumbItemProps = {
+export const breadcrumbItemProps = {
     separator: String,
     href: String,
     clickable: {

package/es/breadcrumb/src/styles/index.cssr.js

@@ -60,6 +60,7 @@ export default cB('breadcrumb', `
  color: var(--n-separator-color);
  transition: color .3s var(--n-bezier);
  user-select: none;
+ -webkit-user-select: none;
  `), c('&:last-child', [cE('link', `
  font-weight: var(--n-font-weight-active);
  cursor: unset;

package/es/button/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NButton, XButton as NxButton } from './src/Button';
+export { default as NButton, XButton as NxButton, buttonProps } from './src/Button';
 export type { ButtonProps } from './src/Button';

package/es/button/index.js

@@ -1 +1 @@
-export { default as NButton, XButton as NxButton } from './src/Button';
+export { default as NButton, XButton as NxButton, buttonProps } from './src/Button';

package/es/button/src/Button.d.ts

@@ -1,7 +1,7 @@
 import { PropType, ButtonHTMLAttributes, ExtractPropTypes } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { Type, Size } from './interface';
-declare const buttonProps: {
+export declare const buttonProps: {
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
     readonly text: BooleanConstructor;
@@ -46,7 +46,10 @@ declare const buttonProps: {
         readonly default: true;
     };
     readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    readonly nativeFocusBehavior: BooleanConstructor;
+    readonly nativeFocusBehavior: {
+        readonly type: BooleanConstructor;
+        readonly default: boolean;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -706,7 +709,10 @@ declare const Button: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    readonly nativeFocusBehavior: BooleanConstructor;
+    readonly nativeFocusBehavior: {
+        readonly type: BooleanConstructor;
+        readonly default: boolean;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -1420,7 +1426,10 @@ declare const Button: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    readonly nativeFocusBehavior: BooleanConstructor;
+    readonly nativeFocusBehavior: {
+        readonly type: BooleanConstructor;
+        readonly default: boolean;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;

package/es/button/src/Button.js

@@ -2,14 +2,15 @@ import { h, ref, computed, inject, defineComponent, watchEffect } from 'vue';
 import { useMemo } from 'vooks';
 import { changeColor } from 'seemly';
 import { createHoverColor, createPressedColor } from '../../_utils/color/index';
+import { buttonGroupInjectionKey } from '../../button-group/src/context';
+import { useRtl } from '../../_mixins/use-rtl';
+import { isSafari } from '../../_utils/env/browser';
 import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { NFadeInExpandTransition, NIconSwitchTransition, NBaseLoading, NBaseWave } from '../../_internal';
 import { call, color2Class, createKey, isSlotEmpty, resolveWrappedSlot, warnOnce } from '../../_utils';
 import { buttonLight } from '../styles';
-import { buttonGroupInjectionKey } from '../../button-group/src/context';
 import style from './styles/index.cssr';
-import useRtl from '../../_mixins/use-rtl';
-const buttonProps = Object.assign(Object.assign({}, useTheme.props), { color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String, ghost: Boolean, round: Boolean, secondary: Boolean, tertiary: Boolean, quaternary: Boolean, strong: Boolean, focusable: {
+export const buttonProps = Object.assign(Object.assign({}, useTheme.props), { color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String, ghost: Boolean, round: Boolean, secondary: Boolean, tertiary: Boolean, quaternary: Boolean, strong: Boolean, focusable: {
         type: Boolean,
         default: true
     }, keyboard: {
@@ -30,7 +31,10 @@ const buttonProps = Object.assign(Object.assign({}, useTheme.props), { color: St
     }, bordered: {
         type: Boolean,
         default: true
-    }, onClick: [Function, Array], nativeFocusBehavior: Boolean });
+    }, onClick: [Function, Array], nativeFocusBehavior: {
+        type: Boolean,
+        default: !isSafari
+    } });
 const Button = defineComponent({
     name: 'Button',
     props: buttonProps,
@@ -77,6 +81,9 @@ const Button = defineComponent({
         });
         const handleMousedown = (e) => {
             var _a;
+            if (!mergedFocusableRef.value) {
+                e.preventDefault();
+            }
             if (props.nativeFocusBehavior) {
                 return;
             }

package/es/button/src/styles/index.cssr.js

@@ -58,6 +58,7 @@ export default c([cB('button', `
  align-items: center;
  justify-content: center;
  user-select: none;
+ -webkit-user-select: none;
  text-align: center;
  cursor: pointer;
  text-decoration: none;

package/es/button-group/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NButtonGroup } from './src/ButtonGroup';
+export { default as NButtonGroup, buttonGroupProps } from './src/ButtonGroup';
 export type { ButtonGroupProps } from './src/ButtonGroup';

package/es/button-group/index.js

@@ -1 +1 @@
-export { default as NButtonGroup } from './src/ButtonGroup';
+export { default as NButtonGroup, buttonGroupProps } from './src/ButtonGroup';

package/es/button-group/src/ButtonGroup.d.ts

@@ -4,7 +4,7 @@ import type { ExtractPublicPropTypes } from '../../_utils';
 export interface ButtonGroupInjection {
     size?: Size | undefined;
 }
-declare const buttonGroupProps: {
+export declare const buttonGroupProps: {
     readonly size: {
         readonly type: PropType<Size | undefined>;
         readonly default: undefined;

package/es/button-group/src/ButtonGroup.js

@@ -1,9 +1,9 @@
 import { h, defineComponent, provide } from 'vue';
-import useRtl from '../../_mixins/use-rtl';
+import { useRtl } from '../../_mixins/use-rtl';
 import { useConfig, useStyle } from '../../_mixins';
 import { buttonGroupInjectionKey } from './context';
 import style from './styles/index.cssr';
-const buttonGroupProps = {
+export const buttonGroupProps = {
     size: {
         type: String,
         default: undefined

package/es/calendar/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NCalendar } from './src/Calendar';
+export { default as NCalendar, calendarProps } from './src/Calendar';
 export type { CalendarProps } from './src/Calendar';

package/es/calendar/index.js

@@ -1 +1 @@
-export { default as NCalendar } from './src/Calendar';
+export { default as NCalendar, calendarProps } from './src/Calendar';

package/es/calendar/src/Calendar.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { OnUpdateValue, DateItem, OnPanelChange } from './interface';
-declare const calendarProps: {
+export declare const calendarProps: {
     readonly isDateDisabled: PropType<(date: number) => boolean | undefined>;
     readonly value: NumberConstructor;
     readonly defaultValue: {

package/es/calendar/src/Calendar.js

@@ -10,7 +10,7 @@ import { NButtonGroup } from '../../button-group';
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { calendarLight } from '../styles';
 import style from './styles/index.cssr';
-const calendarProps = Object.assign(Object.assign({}, useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
+export const calendarProps = Object.assign(Object.assign({}, useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
         type: Number,
         default: null
     }, onPanelChange: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });

package/es/card/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NCard } from './src/Card';
+export { default as NCard, cardProps } from './src/Card';
 export type { CardProps } from './src/Card';

package/es/card/index.js

@@ -1 +1 @@
-export { default as NCard } from './src/Card';
+export { default as NCard, cardProps } from './src/Card';

package/es/card/src/Card.d.ts

@@ -32,8 +32,8 @@ export declare const cardBaseProps: {
     readonly role: StringConstructor;
     readonly onClose: PropType<MaybeArray<() => void>>;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "hoverable" | "headerExtraStyle" | "footerStyle" | "embedded" | "segmented")[];
-declare const cardProps: {
+export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "hoverable" | "headerExtraStyle" | "embedded" | "segmented")[];
+export declare const cardProps: {
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;

package/es/card/src/Card.js

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed } from 'vue';
 import { getPadding } from 'seemly';
-import useRtl from '../../_mixins/use-rtl';
+import { useRtl } from '../../_mixins/use-rtl';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call, createKey, keysOf, resolveWrappedSlot } from '../../_utils';
 import { NBaseClose } from '../../_internal';
@@ -34,7 +34,7 @@ export const cardBaseProps = {
     onClose: [Function, Array]
 };
 export const cardBasePropKeys = keysOf(cardBaseProps);
-const cardProps = Object.assign(Object.assign({}, useTheme.props), cardBaseProps);
+export const cardProps = Object.assign(Object.assign({}, useTheme.props), cardBaseProps);
 export default defineComponent({
     name: 'Card',
     props: cardProps,

package/es/carousel/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NCarousel } from './src/Carousel';
+export { default as NCarousel, carouselProps } from './src/Carousel';
 export { default as NCarouselItem } from './src/CarouselItem';
 export type { CarouselProps } from './src/Carousel';

package/es/carousel/index.js

@@ -1,2 +1,2 @@
-export { default as NCarousel } from './src/Carousel';
+export { default as NCarousel, carouselProps } from './src/Carousel';
 export { default as NCarouselItem } from './src/CarouselItem';

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

@@ -1,9 +1,9 @@
 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>>>;
-declare const carouselProps: {
+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;
         default: number;
@@ -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;