@uzum-tech/ui 1.10.1 → 1.11.1

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/modal-fullscreen/src/ModalFull.d.ts

@@ -269,7 +269,7 @@ export declare const modalFullscreenProps: {
     }>>>;
 };
 export type ModalFullscreenProps = ExtractPublicPropTypes<typeof modalFullscreenProps>;
-declare const _default: import("vue").DefineComponent<{
+declare const ModalFullscreen: import("vue").DefineComponent<{
     to: PropType<string | HTMLElement>;
     show: BooleanConstructor;
     zIndex: NumberConstructor;
@@ -950,4 +950,4 @@ declare const _default: import("vue").DefineComponent<{
     blockScroll: boolean;
     closeOnEsc: boolean;
 }, {}>;
-export default _default;
+export default ModalFullscreen;

package/es/modal-fullscreen/src/ModalFull.js

@@ -1,5 +1,5 @@
 import { zindexable } from 'vdirs';
-import { h, ref, vShow, toRef, watch, computed, nextTick, Transition, withDirectives, defineComponent } from 'vue';
+import { h, ref, vShow, toRef, watch, computed, nextTick, Transition, withDirectives, defineComponent, Fragment } from 'vue';
 import { VFocusTrap, VLazyTeleport } from 'vueuc';
 import { useClicked, useClickPosition, useIsMounted } from 'vooks';
 import { call, eventEffectNotPerformed, resolveWrappedSlot, useIsComposing } from '../../_utils';
@@ -33,7 +33,7 @@ export const modalFullscreenProps = Object.assign(Object.assign({}, useTheme.pro
     }, 
     // events
     onEsc: Function, onClose: Function, onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array] });
-export default defineComponent({
+const ModalFullscreen = defineComponent({
     name: 'ModalFullscreen',
     inheritAttrs: false,
     props: modalFullscreenProps,
@@ -188,42 +188,25 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc, handleCloseClick } = this;
-        const headerLeftSlot = resolveWrappedSlot(this.$slots.headerLeft, (children) => children);
-        const bodySlot = resolveWrappedSlot(this.$slots.body || this.$slots.default, (children) => children);
-        const footerSlot = resolveWrappedSlot(this.$slots.footer, (children) => children);
+        const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc } = this;
         return (h(VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
                 var _a;
                 (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
                 return withDirectives(h("div", { role: "none", ref: "containerRef", class: [
-                        `${mergedClsPrefix}-modal-container`,
+                        `${mergedClsPrefix}-modal-fullscreen-container`,
                         this.themeClass,
                         this.namespace
                     ], style: this.cssVars }, this.displayDirective === 'show' || isDisplayed || this.show
-                    ? withDirectives(h("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
-                        h(UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
+                    ? withDirectives(h("div", { role: "none", class: `${mergedClsPrefix}-modal-fullscreen-body-wrapper` },
+                        h(UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-fullscreen-scroll-content` }, {
                             default: () => (h(VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: handleEsc, autoFocus: this.autoFocus }, {
                                 default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
                                     default: () => {
                                         const dirs = [
                                             [vShow, this.show]
                                         ];
-                                        return withDirectives(h("div", { class: `${mergedClsPrefix}-modal` },
-                                            h(UFlex, { vertical: true, size: [0, 0], class: [
-                                                    `${mergedClsPrefix}-modal-content`,
-                                                    this.fixed &&
-                                                        `${mergedClsPrefix}-modal-content--fixed`
-                                                ] },
-                                                h(UFlex, { align: "center", size: [0, 0], wrap: false, class: `${mergedClsPrefix}-modal-header` },
-                                                    h("div", { class: `${mergedClsPrefix}-modal-header__left` }, headerLeftSlot),
-                                                    h("div", { class: `${mergedClsPrefix}-modal-header__center` },
-                                                        this.title ? (h(UText, { variant: "body-l-semi-bold", class: `${mergedClsPrefix}-modal-header__title` }, this.title)) : null,
-                                                        this.subtitle ? (h(UText, { variant: "body-m-medium", class: `${mergedClsPrefix}-modal-header__subtitle` }, this.subtitle)) : null),
-                                                    h("div", { class: `${mergedClsPrefix}-modal-header__right` },
-                                                        h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-modal__close`, onClick: handleCloseClick }))),
-                                                h("div", { class: `${mergedClsPrefix}-modal-body` }, bodySlot),
-                                                h("div", { class: `${mergedClsPrefix}-modal-footer` }, footerSlot))), dirs);
+                                        return withDirectives(modalFullscreenContent(this), dirs);
                                     }
                                 }))
                             }))
@@ -248,3 +231,27 @@ export default defineComponent({
         }));
     }
 });
+export default ModalFullscreen;
+const modalFullscreenContent = (_) => {
+    const headerLeftSlot = resolveWrappedSlot(_.$slots.headerLeft, (children) => children);
+    const bodySlot = resolveWrappedSlot(_.$slots.body || _.$slots.default, (children) => children);
+    const footerSlot = resolveWrappedSlot(_.$slots.footer, (children) => children);
+    return (h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen` },
+        h(UFlex, { vertical: true, size: [0, 0], class: [
+                `${_.mergedClsPrefix}-modal-fullscreen-content`,
+                _.fixed && `${_.mergedClsPrefix}-modal-fullscreen-content--fixed`
+            ] }, {
+            default: () => (h(Fragment, null,
+                h(UFlex, { align: "center", size: [0, 0], wrap: false, class: `${_.mergedClsPrefix}-modal-fullscreen-header` }, {
+                    defaul: () => (h(Fragment, null,
+                        h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__left` }, headerLeftSlot),
+                        h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__center` },
+                            _.title ? (h(UText, { variant: "body-l-semi-bold", class: `${_.mergedClsPrefix}-modal-fullscreen-header__title` }, _.title)) : null,
+                            _.subtitle ? (h(UText, { variant: "body-m-medium", class: `${_.mergedClsPrefix}-modal-fullscreen-header__subtitle` }, _.subtitle)) : null),
+                        h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__right` },
+                            h(UBaseClose, { clsPrefix: _.mergedClsPrefix, class: `${_.mergedClsPrefix}-modal-fullscreen__close`, onClick: _.handleCloseClick }))))
+                }),
+                h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-body` }, bodySlot),
+                h("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-footer` }, footerSlot)))
+        })));
+};

package/es/modal-fullscreen/src/styles/index.cssr.js

@@ -19,24 +19,24 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // --u-header-bg
 // --u-body-bg
 // --u-footer-bg
-export default c([cB('modal-container', `
+export default c([cB('modal-fullscreen-container', `
  position: fixed;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  display: flex;
- `), cB('modal-body-wrapper', `
+ `), cB('modal-fullscreen-body-wrapper', `
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: visible;
- `, [cB('modal-scroll-content', `
+ `), cB('modal-fullscreen-scroll-content', `
  min-height: 100%;
  position: relative;
- `)]), cB('modal', `
+ `), cB('modal-fullscreen', `
  position: relative;
  color: var(--u-text-color);
  margin: auto;
@@ -54,22 +54,22 @@ export default c([cB('modal-container', `
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier);
  z-index: 1;
- `)]), cB('modal-content', `
+ `)]), cB('modal-fullscreen-content', `
  height: 100%;
- `, [cM('fixed', '', [cB('modal-header', `
+ `, [cM('fixed', '', [cB('modal-fullscreen-header', `
  flex: 0 0 auto;
- `), cB('modal-body', `
+ `), cB('modal-fullscreen-body', `
  flex: 1 1 100%;
- `), cB('modal-footer', `
+ `), cB('modal-fullscreen-footer', `
  flex: 0 0 auto;
- `)])]), cB('modal-body', `
+ `)])]), cB('modal-fullscreen-body', `
  padding: var(--u-body-padding);
  background: var(--u-body-bg);
  overflow-y: auto;
- `), cB('modal-footer', `
+ `), cB('modal-fullscreen-footer', `
  padding: var(--u-footer-padding);
  background: var(--u-footer-bg);
- `), cB('modal-header', `
+ `), cB('modal-fullscreen-header', `
  padding: var(--u-header-padding);
  background: var(--u-header-bg);
  `, [cE('left', `

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.1";
+declare const _default: "1.11.1";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.10.1';
+export default '1.11.1';

package/lib/_internal/index.d.ts

@@ -18,6 +18,8 @@ export { default as UBaseClear } from './clear';
 export { default as UBaseSuffix } from './suffix';
 export { UScrollbar, UxScrollbar } from './scrollbar';
 export type { ScrollbarInst, ScrollbarProps } from './scrollbar';
+export { USafeTopScrollbar, UxSafeTopScrollbar } from './safe-top-scrollbar';
+export type { SafeTopScrollbarInst, SafeTopScrollbarProps } from './safe-top-scrollbar';
 export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './checkbox';
 export type { CheckboxBaseProps, UseCheckbox, OnUpdateChecked, OnUpdateCheckedImpl, CheckboxInst } from './checkbox';
 export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';