bkui-vue 1.0.3-beta.65.dialog.1 → 1.0.3-beta.66.dialog.1

package/lib/modal/hooks.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from 'vue';
 import type { ModalProps } from './modal';
-export declare const useContentResize: (root: Ref<HTMLElement>, resizeTarget: Ref<HTMLElement>, props: ModalProps) => {
+export declare const useContentResize: (root: Ref<HTMLElement | undefined>, resizeTarget: Ref<HTMLElement | undefined>, props: ModalProps) => {
     contentStyles: Ref<{}>;
     isContentScroll: Ref<boolean>;
 };

package/lib/modal/index.d.ts

@@ -56,25 +56,7 @@ declare const BkModal: {
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
         "onQuick-close"?: (...args: any[]) => any;
-    }, {
-        rootRef: import("vue").Ref<HTMLElement>;
-        maskRef: import("vue").Ref<HTMLElement>;
-        localShow: import("vue").Ref<boolean>;
-        initRendered: import("vue").Ref<boolean>;
-        zIndex: import("vue").Ref<string | number>;
-        contentStyles: import("vue").Ref<{}>;
-        isContentScroll: import("vue").Ref<boolean>;
-        modalWrapperStyles: import("vue").ComputedRef<{
-            zIndex: string | number;
-            width: string | number;
-            left: string;
-            top: string;
-        }>;
-        resolveClassName: (cls: string) => string;
-        resizeTargetRef: import("vue").Ref<HTMLElement>;
-        handleClose: () => void;
-        handleClickOutSide: (e: MouseEvent) => void;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quick-close")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quick-close")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -205,25 +187,7 @@ declare const BkModal: {
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
         "onQuick-close"?: (...args: any[]) => any;
-    }, {
-        rootRef: import("vue").Ref<HTMLElement>;
-        maskRef: import("vue").Ref<HTMLElement>;
-        localShow: import("vue").Ref<boolean>;
-        initRendered: import("vue").Ref<boolean>;
-        zIndex: import("vue").Ref<string | number>;
-        contentStyles: import("vue").Ref<{}>;
-        isContentScroll: import("vue").Ref<boolean>;
-        modalWrapperStyles: import("vue").ComputedRef<{
-            zIndex: string | number;
-            width: string | number;
-            left: string;
-            top: string;
-        }>;
-        resolveClassName: (cls: string) => string;
-        resizeTargetRef: import("vue").Ref<HTMLElement>;
-        handleClose: () => void;
-        handleClickOutSide: (e: MouseEvent) => void;
-    }, {}, {}, {}, {
+    }, () => JSX.Element, {}, {}, {}, {
         top: string;
         left: string;
         isShow: boolean;
@@ -295,25 +259,7 @@ declare const BkModal: {
     onHidden?: (...args: any[]) => any;
     onShown?: (...args: any[]) => any;
     "onQuick-close"?: (...args: any[]) => any;
-}, {
-    rootRef: import("vue").Ref<HTMLElement>;
-    maskRef: import("vue").Ref<HTMLElement>;
-    localShow: import("vue").Ref<boolean>;
-    initRendered: import("vue").Ref<boolean>;
-    zIndex: import("vue").Ref<string | number>;
-    contentStyles: import("vue").Ref<{}>;
-    isContentScroll: import("vue").Ref<boolean>;
-    modalWrapperStyles: import("vue").ComputedRef<{
-        zIndex: string | number;
-        width: string | number;
-        left: string;
-        top: string;
-    }>;
-    resolveClassName: (cls: string) => string;
-    resizeTargetRef: import("vue").Ref<HTMLElement>;
-    handleClose: () => void;
-    handleClickOutSide: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quick-close")[], "close" | "hidden" | "shown" | "quick-close", {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quick-close")[], "close" | "hidden" | "shown" | "quick-close", {
     top: string;
     left: string;
     isShow: boolean;

package/lib/modal/index.js

@@ -87,7 +87,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Teleport"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Teleport, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+const external_vue_namespaceObject = external_vue_x({ ["Teleport"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Teleport, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["useAttrs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useAttrs, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
 ;// CONCATENATED MODULE: external "../config-provider"
 var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var config_provider_y = x => () => x
@@ -346,6 +346,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
   props: _objectSpread({}, propsMixin),
   emits: ['quick-close', 'hidden', 'shown', 'close'],
   setup: function setup(props, ctx) {
+    var slots = (0,external_vue_namespaceObject.useSlots)();
+    var attrs = (0,external_vue_namespaceObject.useAttrs)();
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
     var rootRef = (0,external_vue_namespaceObject.ref)();
     var maskRef = (0,external_vue_namespaceObject.ref)();
     var resizeTargetRef = (0,external_vue_namespaceObject.ref)();
@@ -363,8 +367,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         top: props.top
       };
     });
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
     (0,external_vue_namespaceObject.watch)(function () {
       return props.isShow;
     }, function () {
@@ -412,85 +414,70 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       mask.destroyMask(maskRef.value);
       ctx.emit('hidden');
     });
-    return {
-      rootRef: rootRef,
-      maskRef: maskRef,
-      localShow: localShow,
-      initRendered: initRendered,
-      zIndex: zIndex,
-      contentStyles: contentStyles,
-      isContentScroll: isContentScroll,
-      modalWrapperStyles: modalWrapperStyles,
-      resolveClassName: resolveClassName,
-      resizeTargetRef: resizeTargetRef,
-      handleClose: handleClose,
-      handleClickOutSide: handleClickOutSide
-    };
-  },
-  render: function render() {
-    var _this = this;
-    if (!this.initRendered) {
-      return null;
-    }
-    var renderContent = function renderContent() {
-      var _this$$slots$header, _this$$slots, _this$$slots$default, _this$$slots2, _this$$slots$footer, _this$$slots3, _this$$slots$close, _this$$slots4;
-      // v-if 模式渲染，如果 isShow 为 false 销毁 DOM
-      if (_this.renderDirective === 'if' && !_this.localShow) {
+    return function () {
+      if (!initRendered.value) {
         return null;
       }
-      return (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _this.resolveClassName('modal-body')
-      }, [(0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _this.resolveClassName('modal-header')
-      }, [(_this$$slots$header = (_this$$slots = _this.$slots).header) === null || _this$$slots$header === void 0 ? void 0 : _this$$slots$header.call(_this$$slots)]), (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _this.resolveClassName('modal-content'),
-        "style": _this.contentStyles
-      }, [(0,external_vue_namespaceObject.createVNode)("div", {
-        "style": "position: relative; display: inline-block; width: 100%;"
-      }, [(_this$$slots$default = (_this$$slots2 = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots2), (0,external_vue_namespaceObject.createVNode)("div", {
-        "ref": "resizeTargetRef",
-        "style": "position: absolute; top: 0; bottom: 0;"
-      }, null)])]), (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _defineProperty(_defineProperty({}, _this.resolveClassName('modal-footer'), true), 'is-fixed', _this.isContentScroll)
-      }, [(_this$$slots$footer = (_this$$slots3 = _this.$slots).footer) === null || _this$$slots$footer === void 0 ? void 0 : _this$$slots$footer.call(_this$$slots3)]), _this.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _this.resolveClassName('modal-close'),
-        "onClick": _this.handleClose
-      }, [(_this$$slots$close = (_this$$slots4 = _this.$slots).close) === null || _this$$slots$close === void 0 ? void 0 : _this$$slots$close.call(_this$$slots4)])]);
+      var renderContent = function renderContent() {
+        var _slots$header, _slots$default, _slots$footer, _slots$close;
+        // v-if 模式渲染，如果 isShow 为 false 销毁 DOM
+        if (props.renderDirective === 'if' && !localShow.value) {
+          return null;
+        }
+        return (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": resolveClassName('modal-body')
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "class": resolveClassName('modal-header')
+        }, [(_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots)]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": resolveClassName('modal-content'),
+          "style": contentStyles.value
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "style": "position: relative; display: inline-block; width: 100%;"
+        }, [(_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), (0,external_vue_namespaceObject.createVNode)("div", {
+          "ref": resizeTargetRef,
+          "style": "position: absolute; top: 0; bottom: 0;"
+        }, null)])]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _defineProperty(_defineProperty({}, resolveClassName('modal-footer'), true), 'is-fixed', isContentScroll.value)
+        }, [(_slots$footer = slots.footer) === null || _slots$footer === void 0 ? void 0 : _slots$footer.call(slots)]), props.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": resolveClassName('modal-close'),
+          "onClick": handleClose
+        }, [(_slots$close = slots.close) === null || _slots$close === void 0 ? void 0 : _slots$close.call(slots)])]);
+      };
+      return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
+        "to": "body",
+        "disabled": !props.transfer
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_namespaceObject.createVNode)("div", (0,external_vue_namespaceObject.mergeProps)({
+            "ref": rootRef
+          }, attrs, {
+            "class": resolveClassName('modal')
+          }), [props.showMask && (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
+            "name": mask.getMaskCount() > 0 ? 'fadein' : ''
+          }, {
+            "default": function _default() {
+              return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
+                "ref": maskRef,
+                "class": _defineProperty({}, resolveClassName('modal-mask'), true),
+                "style": {
+                  zIndex: zIndex.value
+                },
+                "onClick": handleClickOutSide
+              }, null), [[external_vue_namespaceObject.vShow, localShow.value]])];
+            }
+          }), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
+            "name": "modal-".concat(props.animateType)
+          }, {
+            "default": function _default() {
+              return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
+                "class": resolveClassName('modal-wrapper'),
+                "style": modalWrapperStyles.value
+              }, [renderContent()]), [[external_vue_namespaceObject.vShow, localShow.value]])];
+            }
+          })])];
+        }
+      });
     };
-    return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
-      "to": "body",
-      "disabled": !this.transfer
-    }, {
-      "default": function _default() {
-        return [(0,external_vue_namespaceObject.createVNode)("div", (0,external_vue_namespaceObject.mergeProps)({
-          "ref": "rootRef"
-        }, _this.$attrs, {
-          "class": _this.resolveClassName('modal')
-        }), [_this.showMask && (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
-          "name": mask.getMaskCount() > 0 ? 'fadein' : ''
-        }, {
-          "default": function _default() {
-            return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
-              "ref": "maskRef",
-              "class": _defineProperty({}, _this.resolveClassName('modal-ctx-mask'), true),
-              "style": {
-                zIndex: _this.zIndex
-              },
-              "onClick": _this.handleClickOutSide
-            }, null), [[external_vue_namespaceObject.vShow, _this.localShow]])];
-          }
-        }), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
-          "name": "modal-".concat(_this.animateType)
-        }, {
-          "default": function _default() {
-            return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
-              "class": _this.resolveClassName('modal-wrapper'),
-              "style": _this.modalWrapperStyles
-            }, [renderContent()]), [[external_vue_namespaceObject.vShow, _this.localShow]])];
-          }
-        })])];
-      }
-    });
   }
 }));
 ;// CONCATENATED MODULE: ../../packages/modal/src/index.ts

package/lib/modal/modal.css

@@ -67,7 +67,7 @@
 .bk-infobox-footer .bk-button ~ .bk-button {
   margin-left: 8px;
 }
-.bk-modal-ctx-mask {
+.bk-modal-mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -77,7 +77,6 @@
 }
 .bk-modal-wrapper {
   position: fixed;
-  border-radius: 2px;
 }
 .bk-modal-body {
   height: 100%;

package/lib/modal/modal.d.ts

@@ -52,25 +52,7 @@ declare const _default: import("vue").DefineComponent<{
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
-}, {
-    rootRef: import("vue").Ref<HTMLElement>;
-    maskRef: import("vue").Ref<HTMLElement>;
-    localShow: import("vue").Ref<boolean>;
-    initRendered: import("vue").Ref<boolean>;
-    zIndex: import("vue").Ref<string | number>;
-    contentStyles: import("vue").Ref<{}>;
-    isContentScroll: import("vue").Ref<boolean>;
-    modalWrapperStyles: import("vue").ComputedRef<{
-        zIndex: string | number;
-        width: string | number;
-        left: string;
-        top: string;
-    }>;
-    resolveClassName: (cls: string) => string;
-    resizeTargetRef: import("vue").Ref<HTMLElement>;
-    handleClose: () => void;
-    handleClickOutSide: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quick-close")[], "close" | "hidden" | "shown" | "quick-close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quick-close")[], "close" | "hidden" | "shown" | "quick-close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {

package/lib/modal/modal.less

@@ -1,7 +1,7 @@
 @import '../styles/themes/themes.less';
 @import '../info-box/info-box.less';
 
-.@{bk-prefix}-modal-ctx-mask {
+.@{bk-prefix}-modal-mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -12,7 +12,6 @@
 
 .@{bk-prefix}-modal-wrapper {
   position: fixed;
-  border-radius: 2px;
 }
 
 .@{bk-prefix}-modal-body {

package/lib/modal/modal.variable.css

@@ -196,7 +196,7 @@
 .bk-infobox-footer .bk-button ~ .bk-button {
   margin-left: 8px;
 }
-.bk-modal-ctx-mask {
+.bk-modal-mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -206,7 +206,6 @@
 }
 .bk-modal-wrapper {
   position: fixed;
-  border-radius: 2px;
 }
 .bk-modal-body {
   height: 100%;

package/lib/radio/index.js

@@ -309,8 +309,8 @@ var useRadio = function useRadio() {
 
 var radioProps = {
   name: shared_namespaceObject.PropTypes.string.def(''),
-  label: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).isRequired,
-  modelValue: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).def(''),
+  label: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.bool, shared_namespaceObject.PropTypes.string, shared_namespaceObject.PropTypes.number]).isRequired,
+  modelValue: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.bool, shared_namespaceObject.PropTypes.string, shared_namespaceObject.PropTypes.number]).def(''),
   checked: shared_namespaceObject.PropTypes.bool.def(false),
   disabled: shared_namespaceObject.PropTypes.bool.def(false)
 };
@@ -414,8 +414,8 @@ var radioProps = {
 
 var radioButtonProps = {
   name: shared_namespaceObject.PropTypes.string.def(''),
-  label: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).isRequired,
-  modelValue: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).def(''),
+  label: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.bool, shared_namespaceObject.PropTypes.string, shared_namespaceObject.PropTypes.number]).isRequired,
+  modelValue: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.bool, shared_namespaceObject.PropTypes.string, shared_namespaceObject.PropTypes.number]).def(''),
   checked: shared_namespaceObject.PropTypes.bool.def(false),
   disabled: shared_namespaceObject.PropTypes.bool.def(false),
   size: shared_namespaceObject.PropTypes.size()
@@ -518,7 +518,7 @@ var radioButtonProps = {
 
 var radioGroupProps = {
   name: shared_namespaceObject.PropTypes.string.def(''),
-  modelValue: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
+  modelValue: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.bool, shared_namespaceObject.PropTypes.string, shared_namespaceObject.PropTypes.number]),
   disabled: shared_namespaceObject.PropTypes.bool,
   withValidate: shared_namespaceObject.PropTypes.bool.def(true),
   type: shared_namespaceObject.PropTypes.oneOf(['tab', 'capsule', 'card']).def('tab'),

package/lib/scrollbar/index.d.ts

@@ -1,4 +1,4 @@
-import BkScrollbarCore from './scrollbar-core';
+import BkScrollbarCore, { Options } from './scrollbar-core';
 export default class BkScrollBar extends BkScrollbarCore {
     static globalObserver: MutationObserver;
     static instances: WeakMap<object, any>;
@@ -10,5 +10,6 @@ export default class BkScrollBar extends BkScrollbarCore {
         left?: number;
         top?: number;
     }): void;
+    setOptions(options: Partial<Options>): void;
     private createScrollElement;
 }

package/lib/scrollbar/index.js

@@ -17913,11 +17913,11 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       _this.scrollToAxisPosition(scrollPos, _this.draggedAxis);
     });
     _defineProperty(this, "getPointerPosition", function (dragPos, axis) {
-      var _track$rect$_this$axi3, _track$rect3, _this$wrapperEl$_this, _this$wrapperEl, _this$elStyles$_this$, _this$elStyles;
+      var _track$rect$_this$axi3, _track$rect3, _this$getWrapperElScr, _this$elStyles$_this$, _this$elStyles;
       var track = _this.axis[axis].track;
       var trackSize = (_track$rect$_this$axi3 = (_track$rect3 = track.rect) === null || _track$rect3 === void 0 ? void 0 : _track$rect3[_this.axis[axis].sizeAttr]) !== null && _track$rect$_this$axi3 !== void 0 ? _track$rect$_this$axi3 : 0;
       var scrollbar = _this.axis[axis].scrollbar;
-      var contentSize = (_this$wrapperEl$_this = (_this$wrapperEl = _this.wrapperEl) === null || _this$wrapperEl === void 0 ? void 0 : _this$wrapperEl[_this.axis[axis].scrollSizeAttr]) !== null && _this$wrapperEl$_this !== void 0 ? _this$wrapperEl$_this : 0;
+      var contentSize = (_this$getWrapperElScr = _this.getWrapperElScrollSize(_this.axis[axis].scrollSizeAttr)) !== null && _this$getWrapperElScr !== void 0 ? _this$getWrapperElScr : 0;
       var hostSize = parseInt((_this$elStyles$_this$ = (_this$elStyles = _this.elStyles) === null || _this$elStyles === void 0 ? void 0 : _this$elStyles[_this.axis[axis].sizeAttr]) !== null && _this$elStyles$_this$ !== void 0 ? _this$elStyles$_this$ : '0px', 10);
       // Convert the mouse position into a percentage of the scrollbar height/width.
       var dragPerc = dragPos / (trackSize - scrollbar.size);
@@ -17937,10 +17937,10 @@ var BkScrollbarCore = /*#__PURE__*/function () {
           return 0;
         }
         if (axisValue === 'y') {
-          var diffHeight = _this.wrapperEl.scrollHeight - _this.wrapperEl.offsetHeight;
+          var diffHeight = _this.getWrapperElScrollSize('scrollHeight') - _this.wrapperEl.offsetHeight;
           return scrollPos >= diffHeight ? diffHeight : scrollPos;
         }
-        var diffWidth = _this.wrapperEl.scrollWidth - _this.wrapperEl.offsetWidth;
+        var diffWidth = _this.getWrapperElScrollSize('scrollWidth') - _this.wrapperEl.offsetWidth;
         return scrollPos >= diffWidth ? diffWidth : scrollPos;
       };
       var scrollAttr = _this.axis[axisValue].scrollOffsetAttr;
@@ -18226,6 +18226,16 @@ var BkScrollbarCore = /*#__PURE__*/function () {
         characterData: true
       });
     }
+  }, {
+    key: "getWrapperElScrollSize",
+    value: function getWrapperElScrollSize(attrName) {
+      var _target$attrName;
+      var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.wrapperEl;
+      if (this.options.scrollDelegate[attrName]) {
+        return this.options.scrollDelegate[attrName];
+      }
+      return (_target$attrName = target === null || target === void 0 ? void 0 : target[attrName]) !== null && _target$attrName !== void 0 ? _target$attrName : 0;
+    }
   }, {
     key: "recalculate",
     value: function recalculate() {
@@ -18235,8 +18245,8 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       this.isRtl = this.elStyles.direction === 'rtl';
       var wrapperOffsetWidth = this.wrapperEl.offsetWidth;
       var wrapperOffsetHeight = this.wrapperEl.offsetHeight;
-      var wrapperScrollHeight = this.wrapperEl.scrollHeight;
-      var wrapperScrollWidth = this.wrapperEl.scrollWidth;
+      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.forceVisible = this.options.forceVisible === 'x' || this.options.forceVisible === true;
@@ -18276,7 +18286,7 @@ var BkScrollbarCore = /*#__PURE__*/function () {
         }
         return (_this3$options$delega2 = _this3.options.delegateYContent) !== null && _this3$options$delega2 !== void 0 ? _this3$options$delega2 : _this3.contentEl;
       };
-      var contentSize = getContentTarget()[this.axis[axis].scrollSizeAttr];
+      var contentSize = this.getWrapperElScrollSize(this.axis[axis].scrollSizeAttr, getContentTarget());
       var trackSize = (_this$axis$axis$track = (_this$axis$axis$track2 = this.axis[axis].track.el) === null || _this$axis$axis$track2 === void 0 ? void 0 : _this$axis$axis$track2[this.axis[axis].offsetSizeAttr]) !== null && _this$axis$axis$track !== void 0 ? _this$axis$axis$track : 0;
       var scrollbarRatio = trackSize / contentSize;
       var scrollbarSize;
@@ -18296,7 +18306,7 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       if (!this.axis[axis].isOverflowing || !this.wrapperEl || !scrollbar.el || !this.elStyles) {
         return;
       }
-      var contentSize = this.wrapperEl[this.axis[axis].scrollSizeAttr];
+      var contentSize = this.getWrapperElScrollSize(this.axis[axis].scrollSizeAttr);
       var trackSize = ((_this$axis$axis$track3 = this.axis[axis].track.el) === null || _this$axis$axis$track3 === void 0 ? void 0 : _this$axis$axis$track3[this.axis[axis].offsetSizeAttr]) || 0;
       var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
       var scrollOffset = this.wrapperScrollValue[this.axis[axis].scrollOffsetAttr];
@@ -18321,11 +18331,9 @@ var BkScrollbarCore = /*#__PURE__*/function () {
       if (!track || !scrollbar || !this.wrapperEl) return;
       if (this.axis[axis].isOverflowing || this.axis[axis].forceVisible) {
         track.style.visibility = 'visible';
-        // this.wrapperEl.style[this.axis[axis].overflowAttr] = 'scroll';
         this.el.classList.add("".concat(this.classNames.scrollable, "-").concat(axis));
       } else {
         track.style.visibility = 'hidden';
-        // this.wrapperEl.style[this.axis[axis].overflowAttr] = 'hidden';
         this.el.classList.remove("".concat(this.classNames.scrollable, "-").concat(axis));
       }
       // Even if forceVisible is enabled, scrollbar itself should be hidden
@@ -18600,7 +18608,6 @@ _defineProperty(BkScrollbarCore, "defaultOptions", {
     scrollable: 'bk-scrollable',
     mouseEntered: 'bk-mouse-entered'
   },
-  scrollableNode: null,
   contentNode: null,
   wrapperNode: null,
   /**
@@ -18614,7 +18621,11 @@ _defineProperty(BkScrollbarCore, "defaultOptions", {
    */
   useSystemScrollXBehavior: true,
   useSystemScrollYBehavior: true,
-  onScrollCallback: null
+  onScrollCallback: null,
+  scrollDelegate: {
+    scrollHeight: null,
+    scrollWidth: null
+  }
 });
 /**
  * Static functions
@@ -18712,6 +18723,11 @@ var BkScrollBar = /*#__PURE__*/function (_BkScrollbarCore) {
       this.scrollToAxisPosition(left, 'x');
       this.scrollToAxisPosition(top, 'y');
     }
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      Object.assign(this.options, options);
+    }
   }, {
     key: "createScrollElement",
     value: function createScrollElement(className) {

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

@@ -23,14 +23,13 @@ interface DebouncedFunc<T extends (...args: any[]) => any> {
      */
     flush(): ReturnType<T> | undefined;
 }
-interface Options {
+export interface Options {
     forceVisible: boolean | Axis;
     clickOnTrack: boolean;
     scrollbarMinSize: number;
     scrollbarMaxSize: number;
     classNames: Partial<ClassNames>;
     ariaLabel: string;
-    scrollableNode: HTMLElement | null;
     contentNode: HTMLElement | null;
     delegateYContent: HTMLElement | null;
     delegateXContent: HTMLElement | null;
@@ -38,6 +37,10 @@ interface Options {
     autoHide: boolean;
     useSystemScrollXBehavior?: boolean;
     useSystemScrollYBehavior?: boolean;
+    scrollDelegate: {
+        scrollHeight?: number;
+        scrollWidth?: number;
+    };
     onScrollCallback?: (args: {
         x: number;
         y: number;
@@ -166,6 +169,7 @@ export default class BkScrollbarCore {
     init(): void;
     initDOM(): void;
     initListeners(): void;
+    getWrapperElScrollSize(attrName: string, target?: HTMLElement): any;
     recalculate(): void;
     /**
      * Calculate scrollbar size