@uzum-tech/ui 1.10.1 → 1.11.1

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/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/lib/modal-fullscreen/src/ModalFull.js

@@ -39,7 +39,7 @@ exports.modalFullscreenProps = Object.assign(Object.assign({}, _mixins_1.useThem
     }, 
     // events
     onEsc: Function, onClose: Function, onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array] });
-exports.default = (0, vue_1.defineComponent)({
+const ModalFullscreen = (0, vue_1.defineComponent)({
     name: 'ModalFullscreen',
     inheritAttrs: false,
     props: exports.modalFullscreenProps,
@@ -194,42 +194,25 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc, handleCloseClick } = this;
-        const headerLeftSlot = (0, _utils_1.resolveWrappedSlot)(this.$slots.headerLeft, (children) => children);
-        const bodySlot = (0, _utils_1.resolveWrappedSlot)(this.$slots.body || this.$slots.default, (children) => children);
-        const footerSlot = (0, _utils_1.resolveWrappedSlot)(this.$slots.footer, (children) => children);
+        const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc } = this;
         return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
                 var _a;
                 (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
                 return (0, vue_1.withDirectives)((0, vue_1.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
-                    ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
-                        (0, vue_1.h)(_internal_1.UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
+                    ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-fullscreen-body-wrapper` },
+                        (0, vue_1.h)(_internal_1.UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-fullscreen-scroll-content` }, {
                             default: () => ((0, vue_1.h)(vueuc_1.VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: handleEsc, autoFocus: this.autoFocus }, {
                                 default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
                                     default: () => {
                                         const dirs = [
                                             [vue_1.vShow, this.show]
                                         ];
-                                        return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal` },
-                                            (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: [0, 0], class: [
-                                                    `${mergedClsPrefix}-modal-content`,
-                                                    this.fixed &&
-                                                        `${mergedClsPrefix}-modal-content--fixed`
-                                                ] },
-                                                (0, vue_1.h)(flex_1.UFlex, { align: "center", size: [0, 0], wrap: false, class: `${mergedClsPrefix}-modal-header` },
-                                                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-header__left` }, headerLeftSlot),
-                                                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-header__center` },
-                                                        this.title ? ((0, vue_1.h)(typography_1.UText, { variant: "body-l-semi-bold", class: `${mergedClsPrefix}-modal-header__title` }, this.title)) : null,
-                                                        this.subtitle ? ((0, vue_1.h)(typography_1.UText, { variant: "body-m-medium", class: `${mergedClsPrefix}-modal-header__subtitle` }, this.subtitle)) : null),
-                                                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-header__right` },
-                                                        (0, vue_1.h)(_internal_1.UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-modal__close`, onClick: handleCloseClick }))),
-                                                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-body` }, bodySlot),
-                                                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-modal-footer` }, footerSlot))), dirs);
+                                        return (0, vue_1.withDirectives)(modalFullscreenContent(this), dirs);
                                     }
                                 }))
                             }))
@@ -254,3 +237,27 @@ exports.default = (0, vue_1.defineComponent)({
         }));
     }
 });
+exports.default = ModalFullscreen;
+const modalFullscreenContent = (_) => {
+    const headerLeftSlot = (0, _utils_1.resolveWrappedSlot)(_.$slots.headerLeft, (children) => children);
+    const bodySlot = (0, _utils_1.resolveWrappedSlot)(_.$slots.body || _.$slots.default, (children) => children);
+    const footerSlot = (0, _utils_1.resolveWrappedSlot)(_.$slots.footer, (children) => children);
+    return ((0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen` },
+        (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: [0, 0], class: [
+                `${_.mergedClsPrefix}-modal-fullscreen-content`,
+                _.fixed && `${_.mergedClsPrefix}-modal-fullscreen-content--fixed`
+            ] }, {
+            default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                (0, vue_1.h)(flex_1.UFlex, { align: "center", size: [0, 0], wrap: false, class: `${_.mergedClsPrefix}-modal-fullscreen-header` }, {
+                    defaul: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                        (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__left` }, headerLeftSlot),
+                        (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__center` },
+                            _.title ? ((0, vue_1.h)(typography_1.UText, { variant: "body-l-semi-bold", class: `${_.mergedClsPrefix}-modal-fullscreen-header__title` }, _.title)) : null,
+                            _.subtitle ? ((0, vue_1.h)(typography_1.UText, { variant: "body-m-medium", class: `${_.mergedClsPrefix}-modal-fullscreen-header__subtitle` }, _.subtitle)) : null),
+                        (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-header__right` },
+                            (0, vue_1.h)(_internal_1.UBaseClose, { clsPrefix: _.mergedClsPrefix, class: `${_.mergedClsPrefix}-modal-fullscreen__close`, onClick: _.handleCloseClick }))))
+                }),
+                (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-body` }, bodySlot),
+                (0, vue_1.h)("div", { class: `${_.mergedClsPrefix}-modal-fullscreen-footer` }, footerSlot)))
+        })));
+};

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

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

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;

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.safeTopScrollbarProps = void 0;
+const vue_1 = require("vue");
+const _internal_1 = require("../../_internal");
+const _mixins_1 = require("../../_mixins");
+exports.safeTopScrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { trigger: String, xScrollable: Boolean, onScroll: Function, size: Number });
+const SafeTopScrollbar = (0, vue_1.defineComponent)({
+    name: 'SafeTopScrollbar',
+    props: exports.safeTopScrollbarProps,
+    setup() {
+        const scrollbarInstRef = (0, vue_1.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 ((0, vue_1.h)(_internal_1.USafeTopScrollbar, Object.assign({ ref: "scrollbarInstRef" }, this.$props), this.$slots));
+    }
+});
+exports.default = SafeTopScrollbar;

package/lib/themes/dark.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.darkTheme = void 0;
 const common_1 = require("../_styles/common");
@@ -93,6 +96,7 @@ const styles_88 = require("../styles");
 const styles_89 = require("../chat/styles");
 const styles_90 = require("../modal-fullscreen/styles");
 const styles_91 = require("../crop/styles");
+const dark_1 = __importDefault(require("../_internal/safe-top-scrollbar/styles/dark"));
 exports.darkTheme = {
     name: 'dark',
     common: common_1.commonDark,
@@ -160,6 +164,7 @@ exports.darkTheme = {
     Result: styles_59.resultDark,
     Row: styles_60.rowDark,
     Scrollbar: styles_61.scrollbarDark,
+    SafeTopScrollbar: dark_1.default,
     Select: styles_62.selectDark,
     Skeleton: styles_63.skeletonDark,
     Slider: styles_64.sliderDark,

package/lib/themes/light.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.lightTheme = void 0;
 // The file is for internal usage, do not export it, since all the components
@@ -95,6 +98,7 @@ const styles_88 = require("../input-otp/styles");
 const styles_89 = require("../chat/styles");
 const styles_90 = require("../modal-fullscreen/styles");
 const styles_91 = require("../crop/styles");
+const light_1 = __importDefault(require("../_internal/safe-top-scrollbar/styles/light"));
 exports.lightTheme = {
     name: 'light',
     common: common_1.commonLight,
@@ -162,6 +166,7 @@ exports.lightTheme = {
     Row: styles_60.rowLight,
     Result: styles_59.resultLight,
     Scrollbar: styles_61.scrollbarLight,
+    SafeTopScrollbar: light_1.default,
     Skeleton: styles_63.skeletonLight,
     Select: styles_62.selectLight,
     Slider: styles_64.sliderLight,

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.10.1";
+declare const _default: "1.11.1";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.10.1';
+exports.default = '1.11.1';