@uzum-tech/ui 1.9.1 → 1.10.1

package/lib/crop/src/styles/index.cssr.js

@@ -0,0 +1,338 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-wrapper-border-radius
+// --u-wrapper-bg-color
+// --u-wrapper-width
+// --u-wrapper-height
+// --u-cropper-theme-color
+// --u-wrapper-margin
+exports.default = (0, cssr_1.c)([(0, cssr_1.c)([(0, cssr_1.c)('.cropper-container', {
+  direction: 'ltr',
+  fontSize: '0',
+  lineHeight: '0',
+  position: 'relative',
+  msTouchAction: 'none',
+  touchAction: 'none',
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  MozUserSelect: 'none',
+  msUserSelect: 'none',
+  userSelect: 'none'
+}, [(0, cssr_1.c)('img', {
+  backfaceVisibility: 'hidden',
+  display: 'block',
+  height: '100%',
+  imageOrientation: '0deg',
+  maxHeight: 'none !important',
+  maxWidth: 'none !important',
+  minHeight: '0 !important',
+  minWidth: '0 !important',
+  width: '100%'
+})]), (0, cssr_1.c)('.cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal', {
+  bottom: '0',
+  left: '0',
+  position: 'absolute',
+  right: '0',
+  top: '0'
+}), (0, cssr_1.c)('.cropper-wrap-box, .cropper-canvas', {
+  overflow: 'hidden'
+}), (0, cssr_1.c)('.cropper-drag-box', {
+  backgroundColor: '#fff',
+  opacity: '0'
+}), (0, cssr_1.c)('.cropper-modal', {
+  backgroundColor: '#000',
+  opacity: '0.5'
+}), (0, cssr_1.c)('.cropper-view-box', {
+  display: 'block',
+  height: '100%',
+  outline: '1px solid #39f',
+  outlineColor: 'rgba(51, 153, 255, 0.75)',
+  overflow: 'hidden',
+  width: '100%'
+}), (0, cssr_1.c)('.cropper-dashed', {
+  border: '0 dashed #eee',
+  display: 'block',
+  opacity: '0.5',
+  position: 'absolute'
+}, [(0, cssr_1.c)('&.dashed-h', {
+  borderBottomWidth: '1px',
+  borderTopWidth: '1px',
+  height: 'calc(100% / 3)',
+  left: '0',
+  top: 'calc(100% / 3)',
+  width: '100%'
+}), (0, cssr_1.c)('&.dashed-v', {
+  borderLeftWidth: '1px',
+  borderRightWidth: '1px',
+  height: '100%',
+  left: 'calc(100% / 3)',
+  top: '0',
+  width: 'calc(100% / 3)'
+})]), (0, cssr_1.c)('.cropper-center', {
+  display: 'block',
+  height: '0',
+  left: '50%',
+  opacity: '0.75',
+  position: 'absolute',
+  top: '50%',
+  width: '0'
+}, [(0, cssr_1.c)('&::before, &::after', {
+  backgroundColor: '#eee',
+  content: '" "',
+  display: 'block',
+  position: 'absolute'
+}), (0, cssr_1.c)('&::before', {
+  height: '1px',
+  left: '-3px',
+  top: '0',
+  width: '7px'
+}), (0, cssr_1.c)('&::after', {
+  height: '7px',
+  left: '0',
+  top: '-3px',
+  width: '1px'
+})]), (0, cssr_1.c)('.cropper-face, .cropper-line, .cropper-point', {
+  display: 'block',
+  height: '100%',
+  opacity: '0.1',
+  position: 'absolute',
+  width: '100%'
+}), (0, cssr_1.c)('.cropper-face', {
+  backgroundColor: '#fff',
+  left: '0',
+  top: '0'
+}), (0, cssr_1.c)('.cropper-line', {
+  backgroundColor: '#39f'
+}, [(0, cssr_1.c)('&.line-e', {
+  cursor: 'ew-resize',
+  right: '-3px',
+  top: '0',
+  width: '5px'
+}), (0, cssr_1.c)('&.line-n', {
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0',
+  top: '-3px'
+}), (0, cssr_1.c)('&.line-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  top: '0',
+  width: '5px'
+}), (0, cssr_1.c)('&.line-s', {
+  bottom: '-3px',
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0'
+})]), (0, cssr_1.c)('.cropper-point', {
+  backgroundColor: '#39f',
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+}, [(0, cssr_1.c)('&.point-e', {
+  cursor: 'ew-resize',
+  marginTop: '-3px',
+  right: '-3px',
+  top: '50%'
+}), (0, cssr_1.c)('&.point-n', {
+  cursor: 'ns-resize',
+  left: '50%',
+  marginLeft: '-3px',
+  top: '-3px'
+}), (0, cssr_1.c)('&.point-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  marginTop: '-3px',
+  top: '50%'
+}), (0, cssr_1.c)('&.point-s', {
+  bottom: '-3px',
+  cursor: 's-resize',
+  left: '50%',
+  marginLeft: '-3px'
+}), (0, cssr_1.c)('&.point-ne', {
+  cursor: 'nesw-resize',
+  right: '-3px',
+  top: '-3px'
+}), (0, cssr_1.c)('&.point-nw', {
+  cursor: 'nwse-resize',
+  left: '-3px',
+  top: '-3px'
+}), (0, cssr_1.c)('&.point-sw', {
+  bottom: '-3px',
+  cursor: 'nesw-resize',
+  left: '-3px'
+}), (0, cssr_1.c)('&.point-se', {
+  bottom: '-3px',
+  cursor: 'nwse-resize',
+  height: '20px',
+  opacity: '1',
+  right: '-3px',
+  width: '20px'
+}, [(0, cssr_1.c)('&::before', {
+  backgroundColor: '#39f',
+  bottom: '-50%',
+  content: '" "',
+  display: 'block',
+  height: '200%',
+  opacity: '0',
+  position: 'absolute',
+  right: '-50%',
+  width: '200%'
+})])]), (0, cssr_1.c)('@media (min-width: 768px)', [(0, cssr_1.c)('.cropper-point.point-se', {
+  height: '15px',
+  width: '15px'
+})]), (0, cssr_1.c)('@media (min-width: 992px)', [(0, cssr_1.c)('.cropper-point.point-se', {
+  height: '10px',
+  width: '10px'
+})]), (0, cssr_1.c)('@media (min-width: 1200px)', [(0, cssr_1.c)('.cropper-point.point-se', {
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+})]), (0, cssr_1.c)('.cropper-invisible', {
+  opacity: '0'
+}), (0, cssr_1.c)('.cropper-bg', {
+  backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")'
+}), (0, cssr_1.c)('.cropper-hide', {
+  display: 'block',
+  height: '0',
+  position: 'absolute',
+  width: '0'
+}), (0, cssr_1.c)('.cropper-hidden', {
+  display: 'none !important'
+}), (0, cssr_1.c)('.cropper-move', {
+  cursor: 'move'
+}), (0, cssr_1.c)('.cropper-crop', {
+  cursor: 'crosshair'
+}), (0, cssr_1.c)('.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point', {
+  cursor: 'not-allowed'
+})]), (0, cssr_1.cB)('crop-wrapper', `
+ overflow: hidden;
+ background-color: var(--u-wrapper-bg-color);
+ border-radius: var(--u-wrapper-border-radius);
+ width: var(--u-wrapper-width);
+ height: var(--u-wrapper-height);
+ margin: var(--u-wrapper-margin);
+ `, [(0, cssr_1.cM)('circle', '', [(0, cssr_1.c)(`.cropper-view-box, 
+ .cropper-face`, `
+ border-radius: 50%;
+ `)]), (0, cssr_1.c)('.cropper-view-box', `
+ outline: 0;
+ box-shadow: 0 0 0 1px var(--u-cropper-theme-color);
+ `), (0, cssr_1.c)(`.cropper-line,
+ .cropper-point`, `
+ background-color: var(--u-cropper-theme-color);
+ `), (0, cssr_1.c)(`
+ .point-e,
+ .point-n,
+ .point-w,
+ .point-s
+ `, `
+ display: none;
+ `), (0, cssr_1.c)('.point-se', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), (0, cssr_1.c)('.point-sw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), (0, cssr_1.c)('.point-nw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), (0, cssr_1.c)('.point-ne', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)])]), (0, cssr_1.cB)('crop-img', `
+ display: block;
+ max-width: 100%;
+ `)]);

package/lib/crop/styles/_common.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    wrapperMargin: string;
+};
+export default _default;

package/lib/crop/styles/_common.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    wrapperMargin: '0 0 20px'
+};

package/lib/crop/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import { type CropTheme } from './light';
+declare const cropDark: CropTheme;
+export default cropDark;

package/lib/crop/styles/dark.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
+const cropDark = {
+    name: 'Crop',
+    common: common_1.commonDark,
+    peers: {},
+    self: light_1.self
+};
+exports.default = cropDark;

package/lib/crop/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as cropDark } from './dark';
+export { default as cropLight } from './light';
+export type { CropTheme, CropThemeVars } from './light';

package/lib/crop/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cropLight = exports.cropDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "cropDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "cropLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/crop/styles/light.d.ts

@@ -0,0 +1,14 @@
+import { ThemeCommonVars } from '../../config-provider';
+export declare const self: (vars: ThemeCommonVars) => {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+};
+export type CropThemeVars = ReturnType<typeof self>;
+declare const cropLight: import("../../_mixins").Theme<"Crop", {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+}, {}>;
+export default cropLight;
+export type CropTheme = typeof cropLight;

package/lib/crop/styles/light.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const _mixins_1 = require("../../_mixins");
+const common_1 = require("../../_styles/common");
+const _common_1 = __importDefault(require("./_common"));
+const self = (vars) => {
+    const { elementsSenary, borderRadiusLarge } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { wrapperBg: elementsSenary, wrapperBorderRadius: borderRadiusLarge });
+};
+exports.self = self;
+const cropLight = (0, _mixins_1.createTheme)({
+    name: 'Crop',
+    common: common_1.commonLight,
+    peers: {},
+    self: exports.self
+});
+exports.default = cropLight;

package/lib/date-picker/src/panel/panelMonth.d.ts

@@ -51,8 +51,8 @@ declare const _default: import("vue").DefineComponent<{
             readonly onRender?: (() => void) | undefined;
             readonly onTabOut?: Function | undefined;
             readonly onClose?: import("../interface").OnClose | undefined;
-            readonly onClear?: Function | undefined;
             readonly onUpdateValue: OnPanelUpdateValue;
+            readonly onClear?: Function | undefined;
             readonly onConfirm?: ((value: import("../interface").Value | null) => void) | undefined;
             readonly timeFormat?: string | undefined;
             readonly shortcuts?: import("../interface").Shortcuts | undefined;

package/lib/date-picker/src/panel/panelYear.d.ts

@@ -51,8 +51,8 @@ declare const _default: import("vue").DefineComponent<{
             readonly onRender?: (() => void) | undefined;
             readonly onTabOut?: Function | undefined;
             readonly onClose?: import("../interface").OnClose | undefined;
-            readonly onClear?: Function | undefined;
             readonly onUpdateValue: OnPanelUpdateValue;
+            readonly onClear?: Function | undefined;
             readonly onConfirm?: ((value: import("../interface").Value | null) => void) | undefined;
             readonly timeFormat?: string | undefined;
             readonly shortcuts?: import("../interface").Shortcuts | undefined;

package/lib/dynamic-tags/src/DynamicTags.d.ts

@@ -325,6 +325,9 @@ export declare const dynamicTagsProps: {
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -676,6 +679,9 @@ export declare const dynamicTagsProps: {
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -1027,6 +1033,9 @@ export declare const dynamicTagsProps: {
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -1416,6 +1425,9 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -1767,6 +1779,9 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -2118,6 +2133,9 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -2502,6 +2520,9 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Tag: import("../../_mixins").Theme<"Tag", {
+                gapSmall: string;
+                gapMedium: string;
+                gapLarge: string;
                 closeIconSizeTiny: string;
                 closeIconSizeSmall: string;
                 closeIconSizeMedium: string;
@@ -2918,6 +2939,9 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -3269,6 +3293,9 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;
@@ -3620,6 +3647,9 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Tag: import("../../_mixins").Theme<"Tag", {
+            gapSmall: string;
+            gapMedium: string;
+            gapLarge: string;
             closeIconSizeTiny: string;
             closeIconSizeSmall: string;
             closeIconSizeMedium: string;

package/lib/dynamic-tags/styles/light.d.ts

@@ -285,6 +285,9 @@ declare const dynamicTagsLight: import("../../_mixins").Theme<"DynamicTags", {
         rippleDuration: string;
     }, any>;
     Tag: import("../../_mixins").Theme<"Tag", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
         closeIconSizeTiny: string;
         closeIconSizeSmall: string;
         closeIconSizeMedium: string;

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

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

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

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