bkui-vue 2.0.1-beta.3 → 2.0.1-beta.30

package/lib/resize-layout/resize-layout.variable.css

@@ -1,3 +1,263 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: var(--popover-max-height);
+  --primary-color: var(--primary-color);
+  --success-color: var(--success-color);
+  --warning-color: var(--warning-color);
+  --danger-color: var(--danger-color);
+  --default-color: var(--default-color);
+  --gray-color: var(--gray-color);
+  --light-gray: var(--light-gray);
+  --white-color: var(--white-color);
+  --whitesmoke-color: var(--whitesmoke-color);
+  --disable-color: var(--disable-color);
+  --disable-bg-color: var(--disable-bg-color);
+  --border-color: var(--border-color);
+  --font-size-base: var(--font-size-base);
+  --font-size-medium: var(--font-size-medium);
+  --font-size-large: var(--font-size-large);
+  --line-height-base: var(--line-height-base);
+  --line-height-medium: var(--line-height-medium);
+  --line-height-large: var(--line-height-large);
+  --component-size-small: var(--component-size-small);
+  --component-size-base: var(--component-size-base);
+  --component-size-large: var(--component-size-large);
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
+  --border-width-base: var(--border-width-base);
+  --border-style-base: var(--border-style-base);
+  --border-radius-base: var(--border-radius-base);
+  --border-style-color: var(--border-style-color);
+  --input-disabled-bg: var(--input-disabled-bg);
+  --input-disabled-border: var(--input-disabled-border);
+  --input-height-base: var(--input-height-base);
+  --input-color: var(--input-color);
+  --input-bg: var(--input-bg);
+  --input-border-color: var(--input-border-color);
+  --input-broder-radius: var(--input-broder-radius);
+  --input-shadow-color: var(--input-shadow-color);
+  --input-horizontal-padding: var(--input-horizontal-padding);
+  --input-block-color: var(--input-block-color);
+  --input-block-hover-color: var(--input-block-hover-color);
+  --input-icon-size: var(--input-icon-size);
+  --input-maxlength-color: var(--input-maxlength-color);
+  --button-primary-hover-color: var(--button-primary-hover-color);
+  --button-danger-hover-color: var(--button-danger-hover-color);
+  --button-success-hover-color: var(--button-success-hover-color);
+  --button-warning-hover-color: var(--button-warning-hover-color);
+  --button-default-hover-border-color: var(--button-default-hover-border-color);
+  --button-primary-active-color: var(--button-primary-active-color);
+  --button-danger-active-color: var(--button-danger-active-color);
+  --button-success-active-color: var(--button-success-active-color);
+  --button-warning-active-color: var(--button-warning-active-color);
+  --button-selected-bg-color: var(--button-selected-bg-color);
+  --button-disabled-selected-bg-color: var(--button-disabled-selected-bg-color);
+  --radio-font-color: var(--radio-font-color);
+  --radio-active-color: var(--radio-active-color);
+  --radio-hover-border-color: var(--radio-hover-border-color);
+  --radio-disabled-border: var(--radio-disabled-border);
+  --radio-disabled-font-color: var(--radio-disabled-font-color);
+  --radio-disabled-checked-bg: var(--radio-disabled-checked-bg);
+  --radio-button-checked-bg: var(--radio-button-checked-bg);
+  --radio-button-disabled-checked-bg: var(--radio-button-disabled-checked-bg);
+  --checkbox-disabled-checked-bg: var(--checkbox-disabled-checked-bg);
+  --fixed-navbar-background: var(--fixed-navbar-background);
+  --fixed-navbar-boxshadow-color: var(--fixed-navbar-boxshadow-color);
+  --switch-default-color: var(--switch-default-color);
+  --switch-grey-color: var(--switch-grey-color);
+  --breadcrumb-black-color: var(--breadcrumb-black-color);
+  --breadcrumb-primary-hover-color: var(--breadcrumb-primary-hover-color);
+  --breadcrumb-fn-main-color: var(--breadcrumb-fn-main-color);
+  --link-default-hover-color: var(--link-default-hover-color);
+  --link-primary-hover-color: var(--link-primary-hover-color);
+  --link-success-hover-color: var(--link-success-hover-color);
+  --link-warning-hover-color: var(--link-warning-hover-color);
+  --link-danger-hover-color: var(--link-danger-hover-color);
+  --link-default-disabled-color: var(--link-default-disabled-color);
+  --link-primary-disabled-color: var(--link-primary-disabled-color);
+  --link-success-disabled-color: var(--link-success-disabled-color);
+  --link-warning-disabled-color: var(--link-warning-disabled-color);
+  --link-danger-disabled-color: var(--link-danger-disabled-color);
+  --message-color: var(--message-color);
+  --message-primary-bg-color: var(--message-primary-bg-color);
+  --message-primary-border-color: var(--message-primary-border-color);
+  --message-primary-shadow-color: var(--message-primary-shadow-color);
+  --message-warning-bg-color: var(--message-warning-bg-color);
+  --message-warning-border-color: var(--message-warning-border-color);
+  --message-warning-shadow-color: var(--message-warning-shadow-color);
+  --message-success-bg-color: var(--message-success-bg-color);
+  --message-success-border-color: var(--message-success-border-color);
+  --message-success-shadow-color: var(--message-success-shadow-color);
+  --message-danger-bg-color: var(--message-danger-bg-color);
+  --message-danger-border-color: var(--message-danger-border-color);
+  --message-danger-shadow-color: var(--message-danger-shadow-color);
+  --slider-default-bg: var(--slider-default-bg);
+  --slider-disable-bar-bg: var(--slider-disable-bar-bg);
+  --menu-bg-color: var(--menu-bg-color);
+  --submenu-bg-color: var(--submenu-bg-color);
+  --menu-active-bg-color: var(--menu-active-bg-color);
+  --menu-color: var(--menu-color);
+  --menu-group-color: var(--menu-group-color);
+  --menu-width: var(--menu-width);
+  --menu-collapse-width: var(--menu-collapse-width);
+  --menu-active-color: var(--menu-active-color);
+  --nav-header-bg-color: var(--nav-header-bg-color);
+  --nav-bg-color: var(--nav-bg-color);
+  --date-picker-disabled-bg: var(--date-picker-disabled-bg);
+  --date-picker-dropdown-mb: var(--date-picker-dropdown-mb);
+  --date-picker-dropdown-bg: var(--date-picker-dropdown-bg);
+  --table-bg-color: var(--table-bg-color);
+  --table-border-color: var(--table-border-color);
+  --table-strip-color: var(--table-strip-color);
+  --table-head-bg-color: var(--table-head-bg-color);
+  --table-head-font-color: var(--table-head-font-color);
+  --table-body-font-color: var(--table-body-font-color);
+  --table-row-hover-bg-color: var(--table-row-hover-bg-color);
+  --table-row-active-bg-color: var(--table-row-active-bg-color);
+  --cascader-panel-border-color: var(--cascader-panel-border-color);
+  --cascader-panel-hover: var(--cascader-panel-hover);
+  --cascader-panel-active: var(--cascader-panel-active);
+  --cascader-panel-disabled-bg: var(--cascader-panel-disabled-bg);
+  --search-select-focus-border-color: var(--search-select-focus-border-color);
+  --search-select-focus-color: var(--search-select-focus-color);
+  --search-select-font-color: var(--search-select-font-color);
+  --search-select-placeholder-color: var(--search-select-placeholder-color);
+  --search-select-message-color: var(--search-select-message-color);
+  --search-select-menu-border-color: var(--search-select-menu-border-color);
+  --select-active-color: var(--select-active-color);
+  --select-hover-color: var(--select-hover-color);
+}
+:root :root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --whitesmoke-color: #fafbfd;
+  --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 8px;
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #3a84ff;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-disabled-checked-bg: #a3c5fd;
+  --radio-button-checked-bg: #e1ecff;
+  --radio-button-disabled-checked-bg: #fafbfd;
+  --checkbox-disabled-checked-bg: #a3c5fd;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #63656e;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
+}
 :root {
   --bk-prefix: bk;
   --popover-max-height: 216px;
@@ -109,9 +369,10 @@
   --date-picker-dropdown-bg: #fff;
   --table-bg-color: var(--white-color);
   --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;

package/lib/scrollbar/index.js

@@ -17627,6 +17627,7 @@ function classNamesToQuery(classNames) {
   var getDeltaMode = function getDeltaMode(mode) {
     return DELTA_MODE[mode] || DELTA_MODE[0];
   };
+  var targetDom = null;
   var normalizeDelta = function normalizeDelta(evt) {
     if ('deltaX' in evt) {
       var mode = getDeltaMode(evt.deltaMode);
@@ -17652,13 +17653,31 @@ function classNamesToQuery(classNames) {
   };
   var eventName = 'onwheel' in window || document.implementation.hasFeature('Events.wheel', '3.0') ? 'wheel' : 'mousewheel';
   var resolveEventResponse = function resolveEventResponse(e) {
-    fn(normalizeDelta(e));
+    var _targetDom;
+    var result = normalizeDelta(e);
+    var _ref = (_targetDom = targetDom) !== null && _targetDom !== void 0 ? _targetDom : {},
+      _ref$scrollTop = _ref.scrollTop,
+      scrollTop = _ref$scrollTop === void 0 ? 0 : _ref$scrollTop,
+      _ref$offsetHeight = _ref.offsetHeight,
+      offsetHeight = _ref$offsetHeight === void 0 ? 0 : _ref$offsetHeight,
+      _ref$scrollHeight = _ref.scrollHeight,
+      scrollHeight = _ref$scrollHeight === void 0 ? 0 : _ref$scrollHeight;
+    var isWheelDown = result.y > 0 && scrollTop + offsetHeight + 2 < scrollHeight;
+    var isWheelUp = result.y < 0 && scrollTop > 0;
+    if (isWheelUp || isWheelDown) {
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    fn(result);
   };
   var addWheelEvent = function addWheelEvent(target) {
+    targetDom = target;
     target.addEventListener(eventName, resolveEventResponse);
   };
   var removeWheelEvent = function removeWheelEvent(target) {
     target.removeEventListener(eventName, resolveEventResponse);
+    targetDom = null;
   };
   return {
     addWheelEvent: addWheelEvent,
@@ -18010,6 +18029,7 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       e.preventDefault();
       e.stopPropagation();
       scrollbar_core_removeClasses(_this.el, _this.classNames.dragging);
+      document.body.style.setProperty('user-select', _this.el.getAttribute('data-user-select'));
       _this.onStopScrolling();
       elDocument.removeEventListener('mousemove', _this.drag, true);
       elDocument.removeEventListener('mouseup', _this.onEndDrag, true);
@@ -18044,7 +18064,7 @@ var BkScrollbarCore = /*#__PURE__*/function () {
         }
         _this.mouseWeelTimer = setTimeout(function () {
           _this.hideScrollbar('y');
-          _this.showScrollbar('x');
+          _this.hideScrollbar('x');
         }, 200);
       }
     });
@@ -18133,11 +18153,9 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       throw new Error("Argument passed to SimpleBar must be an HTML element instead of ".concat(this.el));
     }
     this.onMouseMove = (0,lodash.throttle)(this.mOnMouseMove, 64);
-    this.onWindowResize = (0,lodash.debounce)(this.mOnWindowResize, 64, {
-      leading: true
-    });
-    this.onStopScrolling = (0,lodash.debounce)(this.mOnStopScrolling, this.stopScrollDelay);
-    this.onMouseEntered = (0,lodash.debounce)(this.mOnMouseEntered, this.stopScrollDelay);
+    this.onWindowResize = (0,lodash.debounce)(this.mOnWindowResize, 64);
+    this.onStopScrolling = (0,lodash.debounce)(this.mOnStopScrolling, 64);
+    this.onMouseEntered = (0,lodash.debounce)(this.mOnMouseEntered, 64);
     this.mouseWheelInstance = mouse_wheel(this.mOnMouseWheel);
     this.init();
   }
@@ -18202,7 +18220,6 @@ var BkScrollbarCore = /*#__PURE__*/function () {
         // Hack for https://github.com/WICG/ResizeObserver/issues/38
         var resizeObserverStarted = false;
         var resizeObserver = elWindow.ResizeObserver || ResizeObserver;
-        // eslint-disable-next-line new-cap
         this.resizeObserver = new resizeObserver(function () {
           if (!resizeObserverStarted) return;
           elWindow.requestAnimationFrame(function () {
@@ -18254,8 +18271,8 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       var wrapperOffsetHeight = this.wrapperEl.offsetHeight;
       var wrapperScrollHeight = this.getWrapperElScrollSize('scrollHeight'); // this.wrapperEl.scrollHeight;
       var wrapperScrollWidth = this.getWrapperElScrollSize('scrollWidth'); // this.wrapperEl.scrollWidth;
-      this.axis.x.isOverflowing = wrapperOffsetWidth !== 0 && wrapperScrollWidth > wrapperOffsetWidth;
-      this.axis.y.isOverflowing = wrapperScrollHeight > wrapperOffsetHeight;
+      this.axis.x.isOverflowing = wrapperOffsetWidth !== 0 && wrapperScrollWidth - wrapperOffsetWidth > 2;
+      this.axis.y.isOverflowing = wrapperScrollHeight - wrapperOffsetHeight > 2;
       this.axis.x.forceVisible = this.options.forceVisible === 'x' || this.options.forceVisible === true;
       this.axis.y.forceVisible = this.options.forceVisible === 'y' || this.options.forceVisible === true;
       // Set isOverflowing to false if scrollbar is not necessary (content is shorter than offset)
@@ -18328,6 +18345,37 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       var scrollAttr = this.axis[axis].scrollOffsetAttr;
       Object.assign(this.wrapperScrollMap, _defineProperty({}, scrollAttr, handleOffset));
       scrollbar.el.style.transform = axis === 'x' ? "translate3d(".concat(handleOffset, "px, 0, 0)") : "translate3d(0, ".concat(handleOffset, "px, 0)");
+      // const translateAxis = axis === 'x' ? 'translateX' : 'translateY';
+      // anime({
+      //   targets: scrollbar.el,
+      //   [translateAxis]: handleOffset,
+      //   duration: 300,
+      //   easing: 'easeOutQuad',
+      //   complete: () => {
+      //     this.options?.onScrollCallback?.({
+      //       x: this.wrapperScrollValue.scrollLeft,
+      //       y: this.wrapperScrollValue.scrollTop,
+      //     });
+      //   },
+      // });
+      // if (!this.isDragging) {
+      //   const translateAxis = axis === 'x' ? 'translateX' : 'translateY';
+      //   anime({
+      //     targets: scrollbar.el,
+      //     [translateAxis]: handleOffset,
+      //     duration: 300,
+      //     easing: 'easeOutQuad',
+      //     complete: () => {
+      //       this.options?.onScrollCallback?.({
+      //         x: this.wrapperScrollValue.scrollLeft,
+      //         y: this.wrapperScrollValue.scrollTop,
+      //       });
+      //     },
+      //   });
+      // } else {
+      //   scrollbar.el.style.transform =
+      //     axis === 'x' ? `translate3d(${handleOffset}px, 0, 0)` : `translate3d(0, ${handleOffset}px, 0)`;
+      // }
     }
   }, {
     key: "toggleTrackVisibility",
@@ -18427,6 +18475,8 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       this.axis[axis].dragOffset = eventOffset - (((_scrollbar$rect = scrollbar.rect) === null || _scrollbar$rect === void 0 ? void 0 : _scrollbar$rect[this.axis[axis].offsetAttr]) || 0);
       this.draggedAxis = axis;
       scrollbar_core_addClasses(this.el, this.classNames.dragging);
+      document.body.setAttribute('data-user-select', this.el.style.getPropertyValue('user-select'));
+      document.body.style.setProperty('user-select', 'none');
       elDocument.addEventListener('mousemove', this.drag, true);
       elDocument.addEventListener('mouseup', this.onEndDrag, true);
       if (this.removePreventClickId === null) {
@@ -18543,6 +18593,7 @@ var BkScrollbarCore = /*#__PURE__*/function () {
   }, {
     key: "findChild",
     value: function findChild(el, query) {
+      // @ts-ignore
       var matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
       return Array.prototype.filter.call(el.children, function (child) {
         return matches.call(child, query);
@@ -18601,6 +18652,7 @@ _defineProperty(BkScrollbarCore, "defaultOptions", {
   scrollbarMinSize: 25,
   scrollbarMaxSize: 0,
   ariaLabel: 'scrollable content',
+  size: 'default',
   classNames: {
     contentEl: 'bk-content',
     wrapper: 'bk-wrapper',
@@ -18687,7 +18739,7 @@ var BkScrollBar = /*#__PURE__*/function (_BkScrollbarCore) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, BkScrollBar, [].concat(args));
-    // // Save a reference to the instance, so we know this DOM node has already been instancied
+    // Save a reference to the instance, so we know this DOM node has already been instancied
     BkScrollBar.instances.set(args[0], _assertThisInitialized(_this));
     return _this;
   }

package/lib/scrollbar/scrollbar-core/index.d.ts

@@ -1,5 +1,5 @@
 import * as helpers from './helpers';
-interface DebouncedFunc<T extends (...args: any[]) => any> {
+interface DebouncedFunc<T extends (...args: any[]) => void> {
     /**
      * Call the original function, but applying the debounce rules.
      *
@@ -24,7 +24,7 @@ interface DebouncedFunc<T extends (...args: any[]) => any> {
     flush(): ReturnType<T> | undefined;
 }
 export interface Options {
-    forceVisible: boolean | Axis;
+    forceVisible: Axis | boolean;
     clickOnTrack: boolean;
     scrollbarMinSize: number;
     scrollbarMaxSize: number;
@@ -37,6 +37,7 @@ export interface Options {
     autoHide: boolean;
     useSystemScrollXBehavior?: boolean;
     useSystemScrollYBehavior?: boolean;
+    size: 'default' | 'small';
     scrollDelegate: {
         scrollHeight?: number;
         scrollWidth?: number;
@@ -46,7 +47,7 @@ export interface Options {
         y: number;
     }) => void;
 }
-export type SimpleBarOptions = Partial<Options>;
+export type BkScrollBarOptions = Partial<Options>;
 type ClassNames = {
     contentEl: string;
     offset: string;
@@ -67,22 +68,22 @@ type ClassNames = {
 type Axis = 'x' | 'y';
 type AxisProps = {
     scrollOffsetAttr: 'scrollLeft' | 'scrollTop';
-    sizeAttr: 'width' | 'height';
-    scrollSizeAttr: 'scrollWidth' | 'scrollHeight';
-    offsetSizeAttr: 'offsetWidth' | 'offsetHeight';
+    sizeAttr: 'height' | 'width';
+    scrollSizeAttr: 'scrollHeight' | 'scrollWidth';
+    offsetSizeAttr: 'offsetHeight' | 'offsetWidth';
     offsetAttr: 'left' | 'top';
     overflowAttr: 'overflowX' | 'overflowY';
     dragOffset: number;
     isOverflowing: boolean;
     forceVisible: boolean;
     track: {
-        size: any;
+        size: number;
         el: HTMLElement | null;
         rect: DOMRect | null;
         isVisible: boolean;
     };
     scrollbar: {
-        size: any;
+        size: number;
         el: HTMLElement | null;
         rect: DOMRect | null;
         isVisible: boolean;
@@ -160,11 +161,11 @@ export default class BkScrollbarCore {
      * 模拟滚动条内部缩略滚动器滚动位置缓存器
      */
     wrapperScrollMap: {};
-    onMouseMove: DebouncedFunc<any> | (() => void);
-    onWindowResize: DebouncedFunc<any> | (() => void);
-    onStopScrolling: DebouncedFunc<any> | (() => void);
-    onMouseEntered: DebouncedFunc<any> | (() => void);
-    onMouseWheel: DebouncedFunc<any> | (() => void);
+    onMouseMove: (() => void) | DebouncedFunc<(...args: any[]) => void>;
+    onWindowResize: (() => void) | DebouncedFunc<(...args: any[]) => void>;
+    onStopScrolling: (() => void) | DebouncedFunc<(...args: any[]) => void>;
+    onMouseEntered: (() => void) | DebouncedFunc<(...args: any[]) => void>;
+    onMouseWheel: (() => void) | DebouncedFunc<(...args: any[]) => void>;
     constructor(element: HTMLElement, options?: Partial<Options>);
     getScrollbarWidth(): number;
     init(): void;
@@ -190,27 +191,27 @@ export default class BkScrollbarCore {
     onMouseMoveForAxis(axis?: Axis): void;
     onMouseLeave: () => void;
     onMouseLeaveForAxis(axis?: Axis): void;
-    onPointerEvent: (e: any) => void;
+    onPointerEvent: (e: PointerEvent) => void;
     /**
      * on scrollbar handle drag movement starts
      */
-    onDragStart(e: any, axis?: Axis): void;
+    onDragStart(e: MouseEvent, axis?: Axis): void;
     /**
      * Drag scrollbar handle
      */
-    drag: (e: any) => void;
+    drag: (e: MouseEvent) => void;
     getPointerPosition: (dragPos: number, axis: Axis) => number;
     scrollToAxisPosition: (scrollPos: number, axisValue: Axis) => boolean;
     fixedScrollTo: (axisValue: Axis, resolvedValue: number) => void;
     /**
      * End scroll handle drag
      */
-    onEndDrag: (e: any) => void;
+    onEndDrag: (e: MouseEvent) => void;
     /**
      * Handler to ignore click events during drag
      */
-    preventClick: (e: any) => void;
-    onTrackClick(e: any, axis?: Axis): void;
+    preventClick: (e: MouseEvent) => void;
+    onTrackClick(e: MouseEvent, axis?: Axis): void;
     /**
      * Getter for content element
      */
@@ -231,7 +232,7 @@ export default class BkScrollbarCore {
     /**
      * Find element children matches query
      */
-    findChild(el: any, query: any): any;
+    findChild(el: HTMLElement, query: string): any;
     private mOnMouseWheel;
     private mOnStopScrolling;
     private mOnMouseEntered;