@uzum-tech/ui 1.10.0 → 1.11.0

package/lib/chat/src/interface.d.ts

@@ -67,7 +67,7 @@ export interface ChatMessageData {
     timestamp?: string | number | Date | (() => VNodeChild);
     status?: MessageStatus;
     date?: string;
-    attachment?: ChatAttachment | ChatAttachment[];
+    attachment?: ChatAttachment[];
     uploadProps?: Partial<UploadProps>;
     senderAvatar?: string | (() => VNodeChild);
     senderName?: string | (() => VNodeChild);
@@ -80,7 +80,7 @@ export interface ChatMessageProps {
     content?: string;
     timestamp?: string | number | Date | (() => VNodeChild);
     status?: MessageStatus;
-    attachment?: ChatAttachment | ChatAttachment[];
+    attachment?: ChatAttachment[];
     uploadProps?: Partial<UploadProps>;
     senderAvatar?: string | (() => VNodeChild);
     senderName?: string | (() => VNodeChild);
@@ -165,6 +165,7 @@ export interface ChatProps {
     onMessageSend?: OnMessageSend;
     onMessageRetry?: (message: ChatMessageData) => void;
     onAttachmentUpload?: OnAttachmentUpload;
+    onAttachmentDownload?: OnAttachmentDownload;
     onFilterChange?: OnFilterChange;
     onFooterInputChange?: (value: string, chatId: ChatId) => void;
     onNetworkError?: OnNetworkError;
@@ -225,6 +226,7 @@ export interface ChatFooterProps {
 export type OnChatSelect = (key: ChatId, item: ChatListItemData) => void;
 export type OnMessageSend = (content: string, attachments?: ChatAttachment[]) => void;
 export type OnAttachmentUpload = (file: File) => Promise<ChatAttachment>;
+export type OnAttachmentDownload = (attachment: ChatAttachment) => Promise<void>;
 export type OnFilterChange = (filter: {
     type: string;
     value: any;
@@ -311,6 +313,8 @@ export declare const chatInjectionKey: InjectionKey<{
         message: string;
         content: string;
     }) => void;
+    onAttachmentUpload?: Ref<OnAttachmentUpload | undefined>;
+    onAttachmentDownload?: Ref<OnAttachmentDownload | undefined>;
     onChatClose?: Ref<(() => void) | undefined>;
     onChatShare?: Ref<(() => void) | undefined>;
     onUserProfile?: Ref<(() => void) | undefined>;

package/lib/components.d.ts

@@ -69,6 +69,7 @@ export * from './radio';
 export * from './rate';
 export * from './result';
 export * from './scrollbar';
+export * from './safe-top-scrollbar';
 export * from './select';
 export * from './skeleton';
 export * from './slider';

package/lib/components.js

@@ -85,6 +85,7 @@ __exportStar(require("./radio"), exports);
 __exportStar(require("./rate"), exports);
 __exportStar(require("./result"), exports);
 __exportStar(require("./scrollbar"), exports);
+__exportStar(require("./safe-top-scrollbar"), exports);
 __exportStar(require("./select"), exports);
 __exportStar(require("./skeleton"), exports);
 __exportStar(require("./slider"), exports);

package/lib/config-provider/src/internal-interface.d.ts

@@ -104,6 +104,7 @@ import { ActionCardTheme } from '../../action-card';
 import { ChatTheme } from '../../chat/styles';
 import { ModalFullscreenTheme } from '../../modal-fullscreen/styles';
 import { CropTheme } from '../../crop/styles';
+import { SafeTopScrollbarTheme } from '../../_internal/safe-top-scrollbar/styles';
 export interface GlobalThemeWithoutCommon {
     Alert?: AlertTheme;
     Anchor?: AnchorTheme;
@@ -165,6 +166,7 @@ export interface GlobalThemeWithoutCommon {
     Rate?: RateTheme;
     Result?: ResultTheme;
     Scrollbar?: ScrollbarTheme;
+    SafeTopScrollbar?: SafeTopScrollbarTheme;
     Select?: SelectTheme;
     Skeleton?: SkeletonTheme;
     Slider?: SliderTheme;

package/lib/drawer/src/Drawer.d.ts

@@ -65,6 +65,12 @@ export declare const drawerProps: {
     readonly minHeight: NumberConstructor;
     readonly resizable: BooleanConstructor;
     readonly fullscreen: BooleanConstructor;
+    readonly defaultWidth: {
+        readonly type: PropType<string | number>;
+    };
+    readonly defaultHeight: {
+        readonly type: PropType<string | number>;
+    };
     readonly onUpdateWidth: PropType<MaybeArray<(value: number) => void>>;
     readonly onUpdateHeight: PropType<MaybeArray<(value: number) => void>>;
     readonly 'onUpdate:width': PropType<MaybeArray<(value: number) => void>>;
@@ -282,6 +288,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly minHeight: NumberConstructor;
     readonly resizable: BooleanConstructor;
     readonly fullscreen: BooleanConstructor;
+    readonly defaultWidth: {
+        readonly type: PropType<string | number>;
+    };
+    readonly defaultHeight: {
+        readonly type: PropType<string | number>;
+    };
     readonly onUpdateWidth: PropType<MaybeArray<(value: number) => void>>;
     readonly onUpdateHeight: PropType<MaybeArray<(value: number) => void>>;
     readonly 'onUpdate:width': PropType<MaybeArray<(value: number) => void>>;
@@ -597,6 +609,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly minHeight: NumberConstructor;
     readonly resizable: BooleanConstructor;
     readonly fullscreen: BooleanConstructor;
+    readonly defaultWidth: {
+        readonly type: PropType<string | number>;
+    };
+    readonly defaultHeight: {
+        readonly type: PropType<string | number>;
+    };
     readonly onUpdateWidth: PropType<MaybeArray<(value: number) => void>>;
     readonly onUpdateHeight: PropType<MaybeArray<(value: number) => void>>;
     readonly 'onUpdate:width': PropType<MaybeArray<(value: number) => void>>;

package/lib/drawer/src/Drawer.js

@@ -57,7 +57,11 @@ exports.drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, blockScroll: {
         type: Boolean,
         default: true
-    }, maxWidth: Number, maxHeight: Number, minWidth: Number, minHeight: Number, resizable: Boolean, fullscreen: Boolean, onUpdateWidth: [Function, Array], onUpdateHeight: [Function, Array], 'onUpdate:width': [Function, Array], 'onUpdate:height': [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onAfterEnter: Function, onAfterLeave: Function, 
+    }, maxWidth: Number, maxHeight: Number, minWidth: Number, minHeight: Number, resizable: Boolean, fullscreen: Boolean, defaultWidth: {
+        type: [Number, String]
+    }, defaultHeight: {
+        type: [Number, String]
+    }, onUpdateWidth: [Function, Array], onUpdateHeight: [Function, Array], 'onUpdate:width': [Function, Array], 'onUpdate:height': [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onAfterEnter: Function, onAfterLeave: Function, 
     /** @deprecated */
     drawerStyle: [String, Object], 
     /** @deprecated */
@@ -95,8 +99,8 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const isMountedRef = (0, vooks_1.useIsMounted)();
         const themeRef = (0, _mixins_1.useTheme)('Drawer', '-drawer', index_cssr_1.default, styles_1.drawerLight, props, mergedClsPrefixRef);
-        const uncontrolledWidthRef = (0, vue_1.ref)(sizesWidth[props.size]);
-        const uncontrolledHeightRef = (0, vue_1.ref)(sizesHeight[props.size]);
+        const uncontrolledWidthRef = (0, vue_1.ref)(props.defaultWidth || sizesWidth[props.size]);
+        const uncontrolledHeightRef = (0, vue_1.ref)(props.defaultHeight || sizesHeight[props.size]);
         const mergedWidthRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'width'), uncontrolledWidthRef);
         const mergedHeightRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'height'), uncontrolledHeightRef);
         const styleWidthRef = (0, vue_1.computed)(() => {
@@ -115,31 +119,29 @@ exports.default = (0, vue_1.defineComponent)({
                 return '';
             return (0, _utils_1.formatLength)(mergedHeightRef.value);
         });
-        const doUpdate = (isHeight, value) => {
-            let { onUpdateWidth: onUpdate, 'onUpdate:width': _onUpdate, maxWidth: max, minWidth: min } = props;
-            let _ref = uncontrolledWidthRef;
-            if (isHeight) {
-                onUpdate = props.onUpdateHeight;
-                _onUpdate = props['onUpdate:height'];
-                max = props.maxHeight;
-                min = props.minHeight;
-                _ref = uncontrolledHeightRef;
+        const doUpdateWidth = (value) => {
+            const { onUpdateWidth, 'onUpdate:width': _onUpdateWidth } = props;
+            if (onUpdateWidth) {
+                (0, _utils_1.call)(onUpdateWidth, value);
             }
-            if (max && value > max)
-                value = max;
-            if (min && value < min)
-                value = min;
-            if (onUpdate)
-                (0, _utils_1.call)(onUpdate, value);
-            if (_onUpdate)
-                (0, _utils_1.call)(_onUpdate, value);
-            _ref.value = value;
+            if (_onUpdateWidth) {
+                (0, _utils_1.call)(_onUpdateWidth, value);
+            }
+            uncontrolledWidthRef.value = value;
+        };
+        const doUpdateHeight = (value) => {
+            const { onUpdateHeight, 'onUpdate:width': _onUpdateHeight } = props;
+            if (onUpdateHeight) {
+                (0, _utils_1.call)(onUpdateHeight, value);
+            }
+            if (_onUpdateHeight) {
+                (0, _utils_1.call)(_onUpdateHeight, value);
+            }
+            uncontrolledHeightRef.value = value;
         };
-        const doUpdateWidth = doUpdate.bind(null, false);
-        const doUpdateHeight = doUpdate.bind(null, true);
         (0, vue_1.watchEffect)(() => {
-            doUpdateWidth(sizesWidth[props.size]);
-            doUpdateHeight(sizesHeight[props.size]);
+            doUpdateWidth(Number(props.defaultWidth || sizesWidth[props.size]));
+            doUpdateHeight(Number(props.defaultHeight || sizesHeight[props.size]));
         });
         const mergedBodyStyleRef = (0, vue_1.computed)(() => {
             return [
@@ -268,7 +270,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     `${mergedClsPrefix}-drawer-mask--invisible`
                             ], onClick: this.handleMaskClick })) : null
                     })) : null,
-                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], blockScroll: this.blockScroll, contentStyle: this.contentStyle, placement: this.placement, rounded: this.rounded, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, resizable: this.resizable, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleMaskClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
+                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], blockScroll: this.blockScroll, contentStyle: this.contentStyle, placement: this.placement, rounded: this.rounded, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, resizable: this.resizable, maxHeight: this.maxHeight, minHeight: this.minHeight, maxWidth: this.maxWidth, minWidth: this.minWidth, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleMaskClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

package/lib/drawer/src/DrawerBodyWrapper.d.ts

@@ -37,6 +37,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | "transparent">;
         required: true;
     };
+    maxWidth: NumberConstructor;
+    maxHeight: NumberConstructor;
+    minWidth: NumberConstructor;
+    minHeight: NumberConstructor;
     resizable: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
@@ -148,6 +152,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | "transparent">;
         required: true;
     };
+    maxWidth: NumberConstructor;
+    maxHeight: NumberConstructor;
+    minWidth: NumberConstructor;
+    minHeight: NumberConstructor;
     resizable: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -48,6 +48,10 @@ exports.default = (0, vue_1.defineComponent)({
             type: [Boolean, String],
             required: true
         },
+        maxWidth: Number,
+        maxHeight: Number,
+        minWidth: Number,
+        minHeight: Number,
         resizable: Boolean,
         onClickoutside: Function,
         onAfterLeave: Function,
@@ -74,9 +78,9 @@ exports.default = (0, vue_1.defineComponent)({
             startPosition = isVertical.value ? e.clientY : e.clientX;
             memoizedBodyStyleCursor = document.body.style.cursor;
             document.body.style.cursor = isVertical.value ? 'ns-resize' : 'ew-resize';
-            window.addEventListener('mousemove', handleBodyMousemove);
-            window.addEventListener('mouseleave', handleBodyMouseleave);
-            window.addEventListener('mouseup', handleBodyMouseup);
+            document.body.addEventListener('mousemove', handleBodyMousemove);
+            document.body.addEventListener('mouseleave', handleBodyMouseleave);
+            document.body.addEventListener('mouseup', handleBodyMouseup);
         };
         const handleMouseenterResizeTrigger = () => {
             if (hoverTimerId !== null) {
@@ -100,13 +104,36 @@ exports.default = (0, vue_1.defineComponent)({
             isHoverOnResizeTriggerRef.value = false;
         };
         const { doUpdateHeight, doUpdateWidth } = UDrawer;
-        const handleBodyMousemove = (e) => {
+        const regulateWidth = (size) => {
+            const { maxWidth } = props;
+            if (maxWidth && size > maxWidth) {
+                return maxWidth;
+            }
+            const { minWidth } = props;
+            if (minWidth && size < minWidth) {
+                return minWidth;
+            }
+            return size;
+        };
+        const regulateHeight = (size) => {
+            const { maxHeight } = props;
+            if (maxHeight && size > maxHeight) {
+                return maxHeight;
+            }
+            const { minHeight } = props;
+            if (minHeight && size < minHeight) {
+                return minHeight;
+            }
+            return size;
+        };
+        function handleBodyMousemove(e) {
             var _a, _b;
             if (isDraggingRef.value) {
                 if (isVertical.value) {
                     let height = ((_a = bodyRef.value) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
                     const increment = startPosition - e.clientY;
                     height += props.placement === 'bottom' ? increment : -increment;
+                    height = regulateHeight(height);
                     doUpdateHeight(height);
                     startPosition = e.clientY;
                 }
@@ -114,19 +141,20 @@ exports.default = (0, vue_1.defineComponent)({
                     let width = ((_b = bodyRef.value) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
                     const increment = startPosition - e.clientX;
                     width += props.placement === 'right' ? increment : -increment;
+                    width = regulateWidth(width);
                     doUpdateWidth(width);
                     startPosition = e.clientX;
                 }
             }
-        };
+        }
         const handleBodyMouseup = () => {
             if (isDraggingRef.value) {
                 startPosition = 0;
                 isDraggingRef.value = false;
                 document.body.style.cursor = memoizedBodyStyleCursor;
-                window.removeEventListener('mousemove', handleBodyMousemove);
-                window.removeEventListener('mouseup', handleBodyMouseup);
-                window.removeEventListener('mouseleave', handleBodyMouseleave);
+                document.body.removeEventListener('mousemove', handleBodyMousemove);
+                document.body.removeEventListener('mouseup', handleBodyMouseup);
+                document.body.removeEventListener('mouseleave', handleBodyMouseleave);
             }
         };
         const handleBodyMouseleave = handleBodyMouseup;

package/lib/infinite-scroll/src/InfiniteScroll.d.ts

@@ -6,7 +6,12 @@ export declare const infiniteScrollProps: {
         readonly type: NumberConstructor;
         readonly default: 0;
     };
+    readonly topDistance: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly onLoad: PropType<() => Promise<void> | void>;
+    readonly onLoadTop: PropType<() => Promise<void> | void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
 };
 export type InfiniteScrollProps = ExtractPublicPropTypes<typeof infiniteScrollProps>;
@@ -15,7 +20,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 0;
     };
+    readonly topDistance: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly onLoad: PropType<() => Promise<void> | void>;
+    readonly onLoadTop: PropType<() => Promise<void> | void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
 }, {
     scrollbarInstRef: import("vue").Ref<{
@@ -37,9 +47,15 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 0;
     };
+    readonly topDistance: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly onLoad: PropType<() => Promise<void> | void>;
+    readonly onLoadTop: PropType<() => Promise<void> | void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
 }>>, {
     readonly distance: number;
+    readonly topDistance: number;
 }, {}>;
 export default _default;

package/lib/infinite-scroll/src/InfiniteScroll.js

@@ -18,7 +18,12 @@ exports.infiniteScrollProps = {
         type: Number,
         default: 0
     },
+    topDistance: {
+        type: Number,
+        default: 0
+    },
     onLoad: Function,
+    onLoadTop: Function,
     scrollbarProps: Object
 };
 exports.default = (0, vue_1.defineComponent)({
@@ -26,7 +31,8 @@ exports.default = (0, vue_1.defineComponent)({
     props: exports.infiniteScrollProps,
     setup(props) {
         const scrollbarInstRef = (0, vue_1.ref)(null);
-        let loading = false;
+        let loadingBottom = false;
+        let loadingTop = false;
         const handleCheckBottom = () => __awaiter(this, void 0, void 0, function* () {
             var _a;
             const { value: scrollbarInst } = scrollbarInstRef;
@@ -40,27 +46,57 @@ exports.default = (0, vue_1.defineComponent)({
                     clientHeight !== undefined &&
                     scrollTop !== undefined) {
                     if (scrollTop + clientHeight >= scrollHeight - props.distance) {
-                        loading = true;
+                        loadingBottom = true;
                         try {
                             yield ((_a = props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props));
                         }
                         catch (_b) { }
-                        loading = false;
+                        loadingBottom = false;
+                    }
+                }
+            }
+        });
+        const handleCheckTop = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const { value: scrollbarInst } = scrollbarInstRef;
+            if (scrollbarInst) {
+                const { containerRef } = scrollbarInst;
+                const scrollTop = containerRef === null || containerRef === void 0 ? void 0 : containerRef.scrollTop;
+                if (containerRef && scrollTop !== undefined) {
+                    if (scrollTop <= props.topDistance) {
+                        loadingTop = true;
+                        const oldScrollHeight = containerRef.scrollHeight;
+                        const oldScrollTop = containerRef.scrollTop;
+                        try {
+                            yield ((_a = props.onLoadTop) === null || _a === void 0 ? void 0 : _a.call(props));
+                            yield (0, vue_1.nextTick)();
+                            const newScrollHeight = containerRef.scrollHeight;
+                            const heightDiff = newScrollHeight - oldScrollHeight;
+                            if (heightDiff > 0) {
+                                containerRef.scrollTop = oldScrollTop + heightDiff;
+                            }
+                        }
+                        catch (_b) { }
+                        loadingTop = false;
                     }
                 }
             }
         });
         const handleScroll = () => {
-            if (loading)
-                return;
-            void handleCheckBottom();
+            if (!loadingBottom) {
+                void handleCheckBottom();
+            }
+            if (!loadingTop) {
+                void handleCheckTop();
+            }
         };
         const handleWheel = (e) => {
-            if (e.deltaY <= 0)
-                return;
-            if (loading)
-                return;
-            void handleCheckBottom();
+            if (e.deltaY > 0 && !loadingBottom) {
+                void handleCheckBottom();
+            }
+            if (e.deltaY < 0 && !loadingTop) {
+                void handleCheckTop();
+            }
         };
         return {
             scrollbarInstRef,

package/lib/safe-top-scrollbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as USafeTopScrollbar, safeTopScrollbarProps } from './src/SafeTopScrollbar';
+export type { SafeTopScrollbarInst, SafeTopScrollbarProps } from './src/SafeTopScrollbar';

package/lib/safe-top-scrollbar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.safeTopScrollbarProps = exports.USafeTopScrollbar = void 0;
+var SafeTopScrollbar_1 = require("./src/SafeTopScrollbar");
+Object.defineProperty(exports, "USafeTopScrollbar", { enumerable: true, get: function () { return __importDefault(SafeTopScrollbar_1).default; } });
+Object.defineProperty(exports, "safeTopScrollbarProps", { enumerable: true, get: function () { return SafeTopScrollbar_1.safeTopScrollbarProps; } });

package/lib/safe-top-scrollbar/src/SafeTopScrollbar.d.ts

@@ -0,0 +1,177 @@
+import { type PropType } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+export interface ScrollTo {
+    (x: number, y: number): void;
+    (options: {
+        left?: number;
+        top?: number;
+        behavior?: ScrollBehavior;
+    }): void;
+}
+export type ScrollBy = ScrollTo;
+export interface SafeTopScrollbarInst {
+    scrollTo: ScrollTo;
+    scrollBy: ScrollBy;
+    getScrollState: () => {
+        scrollHeight: number;
+        scrollTop: number;
+        clientHeight: number;
+    };
+    adjustScrollTop: (heightDiff: number) => void;
+}
+export declare const safeTopScrollbarProps: {
+    readonly trigger: PropType<"none" | "hover">;
+    readonly xScrollable: BooleanConstructor;
+    readonly onScroll: PropType<(e: Event) => void>;
+    readonly size: NumberConstructor;
+    readonly theme: PropType<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>>;
+};
+export type SafeTopScrollbarProps = ExtractPublicPropTypes<typeof safeTopScrollbarProps>;
+declare const SafeTopScrollbar: import("vue").DefineComponent<{
+    readonly trigger: PropType<"none" | "hover">;
+    readonly xScrollable: BooleanConstructor;
+    readonly onScroll: PropType<(e: Event) => void>;
+    readonly size: NumberConstructor;
+    readonly theme: PropType<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>>;
+}, {
+    scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/safe-top-scrollbar/src/SafeTopScrollbar").ScrollTo;
+        scrollBy: import("../../_internal/safe-top-scrollbar/src/SafeTopScrollbar").ScrollBy;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
+        getScrollState: () => {
+            scrollHeight: number;
+            scrollTop: number;
+            clientHeight: number;
+        };
+        adjustScrollTop: (heightDiff: number) => void;
+    } | null>;
+    scrollTo: ScrollTo;
+    scrollBy: ScrollBy;
+    getScrollState: () => {
+        scrollHeight: number;
+        scrollTop: number;
+        clientHeight: number;
+    };
+    adjustScrollTop: (heightDiff: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly trigger: PropType<"none" | "hover">;
+    readonly xScrollable: BooleanConstructor;
+    readonly onScroll: PropType<(e: Event) => void>;
+    readonly size: NumberConstructor;
+    readonly theme: PropType<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"SafeTopScrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>>>;
+}>>, {
+    readonly xScrollable: boolean;
+}, {}>;
+export default SafeTopScrollbar;