@uzum-tech/ui 1.10.0 → 1.11.0

package/es/components.js

@@ -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/es/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/es/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/es/drawer/src/Drawer.js

@@ -51,7 +51,11 @@ export const drawerProps = Object.assign(Object.assign({}, useTheme.props), { sh
     }, 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 */
@@ -89,8 +93,8 @@ export default defineComponent({
         const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const isMountedRef = useIsMounted();
         const themeRef = useTheme('Drawer', '-drawer', style, drawerLight, props, mergedClsPrefixRef);
-        const uncontrolledWidthRef = ref(sizesWidth[props.size]);
-        const uncontrolledHeightRef = ref(sizesHeight[props.size]);
+        const uncontrolledWidthRef = ref(props.defaultWidth || sizesWidth[props.size]);
+        const uncontrolledHeightRef = ref(props.defaultHeight || sizesHeight[props.size]);
         const mergedWidthRef = useMergedState(toRef(props, 'width'), uncontrolledWidthRef);
         const mergedHeightRef = useMergedState(toRef(props, 'height'), uncontrolledHeightRef);
         const styleWidthRef = computed(() => {
@@ -109,31 +113,29 @@ export default defineComponent({
                 return '';
             return 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) {
+                call(onUpdateWidth, value);
             }
-            if (max && value > max)
-                value = max;
-            if (min && value < min)
-                value = min;
-            if (onUpdate)
-                call(onUpdate, value);
-            if (_onUpdate)
-                call(_onUpdate, value);
-            _ref.value = value;
+            if (_onUpdateWidth) {
+                call(_onUpdateWidth, value);
+            }
+            uncontrolledWidthRef.value = value;
+        };
+        const doUpdateHeight = (value) => {
+            const { onUpdateHeight, 'onUpdate:width': _onUpdateHeight } = props;
+            if (onUpdateHeight) {
+                call(onUpdateHeight, value);
+            }
+            if (_onUpdateHeight) {
+                call(_onUpdateHeight, value);
+            }
+            uncontrolledHeightRef.value = value;
         };
-        const doUpdateWidth = doUpdate.bind(null, false);
-        const doUpdateHeight = doUpdate.bind(null, true);
         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 = computed(() => {
             return [
@@ -262,7 +264,7 @@ export default defineComponent({
                                     `${mergedClsPrefix}-drawer-mask--invisible`
                             ], onClick: this.handleMaskClick })) : null
                     })) : null,
-                    h(UDrawerBodyWrapper, 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)), [[zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
+                    h(UDrawerBodyWrapper, 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)), [[zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

package/es/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/es/drawer/src/DrawerBodyWrapper.js

@@ -46,6 +46,10 @@ export default defineComponent({
             type: [Boolean, String],
             required: true
         },
+        maxWidth: Number,
+        maxHeight: Number,
+        minWidth: Number,
+        minHeight: Number,
         resizable: Boolean,
         onClickoutside: Function,
         onAfterLeave: Function,
@@ -72,9 +76,9 @@ export default 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) {
@@ -98,13 +102,36 @@ export default 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;
                 }
@@ -112,19 +139,20 @@ export default 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/es/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/es/infinite-scroll/src/InfiniteScroll.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { defineComponent, h, ref } from 'vue';
+import { defineComponent, h, ref, nextTick } from 'vue';
 import { UxScrollbar } from '../../_internal';
 import { resolveSlot } from '../../_utils';
 export const infiniteScrollProps = {
@@ -15,7 +15,12 @@ export const infiniteScrollProps = {
         type: Number,
         default: 0
     },
+    topDistance: {
+        type: Number,
+        default: 0
+    },
     onLoad: Function,
+    onLoadTop: Function,
     scrollbarProps: Object
 };
 export default defineComponent({
@@ -23,7 +28,8 @@ export default defineComponent({
     props: infiniteScrollProps,
     setup(props) {
         const scrollbarInstRef = 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;
@@ -37,27 +43,57 @@ export default 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 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/es/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/es/safe-top-scrollbar/index.js

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

package/es/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;

package/es/safe-top-scrollbar/src/SafeTopScrollbar.js

@@ -0,0 +1,38 @@
+import { h, defineComponent, ref } from 'vue';
+import { USafeTopScrollbar } from '../../_internal';
+import { useTheme } from '../../_mixins';
+export const safeTopScrollbarProps = Object.assign(Object.assign({}, useTheme.props), { trigger: String, xScrollable: Boolean, onScroll: Function, size: Number });
+const SafeTopScrollbar = defineComponent({
+    name: 'SafeTopScrollbar',
+    props: safeTopScrollbarProps,
+    setup() {
+        const scrollbarInstRef = ref(null);
+        const exposedMethods = {
+            scrollTo: (...args) => {
+                var _a;
+                (_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(args[0], args[1]);
+            },
+            scrollBy: (...args) => {
+                var _a;
+                (_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollBy(args[0], args[1]);
+            },
+            getScrollState: () => {
+                var _a;
+                return (((_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.getScrollState()) || {
+                    scrollHeight: 0,
+                    scrollTop: 0,
+                    clientHeight: 0
+                });
+            },
+            adjustScrollTop: (heightDiff) => {
+                var _a;
+                (_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.adjustScrollTop(heightDiff);
+            }
+        };
+        return Object.assign(Object.assign({}, exposedMethods), { scrollbarInstRef });
+    },
+    render() {
+        return (h(USafeTopScrollbar, Object.assign({ ref: "scrollbarInstRef" }, this.$props), this.$slots));
+    }
+});
+export default SafeTopScrollbar;

package/es/themes/dark.js

@@ -90,6 +90,7 @@ import { inputOtpDark } from '../styles';
 import { chatDark } from '../chat/styles';
 import { modalFullscreenDark } from '../modal-fullscreen/styles';
 import { cropDark } from '../crop/styles';
+import safeTopScrollbarDark from '../_internal/safe-top-scrollbar/styles/dark';
 export const darkTheme = {
     name: 'dark',
     common: commonDark,
@@ -157,6 +158,7 @@ export const darkTheme = {
     Result: resultDark,
     Row: rowDark,
     Scrollbar: scrollbarDark,
+    SafeTopScrollbar: safeTopScrollbarDark,
     Select: selectDark,
     Skeleton: skeletonDark,
     Slider: sliderDark,

package/es/themes/light.js

@@ -92,6 +92,7 @@ import { inputOtpLight } from '../input-otp/styles';
 import { chatLight } from '../chat/styles';
 import { modalFullscreenLight } from '../modal-fullscreen/styles';
 import { cropLight } from '../crop/styles';
+import safeTopScrollbarLight from '../_internal/safe-top-scrollbar/styles/light';
 export const lightTheme = {
     name: 'light',
     common: commonLight,
@@ -159,6 +160,7 @@ export const lightTheme = {
     Row: rowLight,
     Result: resultLight,
     Scrollbar: scrollbarLight,
+    SafeTopScrollbar: safeTopScrollbarLight,
     Skeleton: skeletonLight,
     Select: selectLight,
     Slider: sliderLight,

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.10.0";
+declare const _default: "1.11.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.10.0';
+export default '1.11.0';