bkui-vue 2.0.1-beta.39.table.2 → 2.0.1-beta.40

package/lib/tree/tree.variable.css

@@ -535,118 +535,111 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-scrollbar {
-  overflow: hidden !important;
-  overflow-anchor: none;
-  touch-action: auto;
-  /*
- * Scrollbar rail styles
- */
-  /*
- * Scrollbar thumb styles
- */
-}
-.bk-scrollbar.bk--active-x > .bk__rail-x,
-.bk-scrollbar.bk--active-y > .bk__rail-y {
-  display: block;
-}
-.bk-scrollbar .bk__rail-x:hover,
-.bk-scrollbar .bk__rail-y:hover,
-.bk-scrollbar .bk__rail-x:focus,
-.bk-scrollbar .bk__rail-y:focus,
-.bk-scrollbar .bk__rail-x.bk--clicking,
-.bk-scrollbar .bk__rail-y.bk--clicking {
-  background-color: #f0f1f5;
-}
-.bk-scrollbar .bk__rail-x {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  height: 10px;
-  bottom: 0px;
-  position: absolute;
-}
-.bk-scrollbar .bk__rail-x.bk-size-small {
-  height: 8px;
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
-  height: 6px;
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
 }
-.bk-scrollbar .bk__rail-y {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  width: 10px;
-  right: 0px;
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
   position: absolute;
-  margin-right: 2px;
-}
-.bk-scrollbar .bk__rail-y.bk-size-small {
-  width: 8px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
   width: 6px;
 }
-.bk-scrollbar:hover > .bk__rail-x,
-.bk-scrollbar:hover > .bk__rail-y,
-.bk-scrollbar.bk--focus > .bk__rail-x,
-.bk-scrollbar.bk--focus > .bk__rail-y,
-.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
-.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
-  opacity: 0.9;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
+  width: 8px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
+  height: 6px;
 }
-.bk-scrollbar .bk__thumb-x {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
   height: 8px;
-  bottom: 0px;
-  position: absolute;
 }
-.bk-scrollbar .bk__thumb-y {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, width 0.2s ease-in-out;
-  width: 8px;
-  right: 0px;
-  position: absolute;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #f0f1f5;
+  cursor: pointer;
 }
-.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
-.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
-.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
   background-color: #979ba5;
-  height: 10px;
 }
-.bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
-.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
-.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
-  background-color: #979ba5;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 10px;
 }
-.bk-scrollbar .bk-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
   height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
-.bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
-.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
-  width: 8px;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+  height: 10px;
 }
-/* MS supports */
-@supports (-ms-overflow-style: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 8px;
+  width: auto;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.bk-scrollbar-wrapper .bk-scrollbar-dragging {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.bk-scrollbar-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #dcdee5;
+  border-radius: 6px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.2s 0.9s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
 }
 .bk-virtual-render {
   position: relative;
 }
+.bk-virtual-render .bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;

package/lib/virtual-render/index.d.ts

@@ -89,6 +89,11 @@ declare const BkVirtualRender: {
         } & {
             default: string;
         };
+        contentAs: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
         scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -225,6 +230,11 @@ declare const BkVirtualRender: {
         } & {
             default: string;
         };
+        contentAs: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
         scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -292,6 +302,7 @@ declare const BkVirtualRender: {
         groupItemCount: number;
         preloadItemCount: number;
         renderAs: string;
+        contentAs: string;
         scrollOffsetTop: number;
         scrollPosition: string;
         abosuteHeight: string | number;
@@ -402,6 +413,11 @@ declare const BkVirtualRender: {
         } & {
             default: string;
         };
+        contentAs: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
         scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -471,6 +487,7 @@ declare const BkVirtualRender: {
         groupItemCount: number;
         preloadItemCount: number;
         renderAs: string;
+        contentAs: string;
         scrollOffsetTop: number;
         scrollPosition: string;
         abosuteHeight: string | number;
@@ -573,6 +590,11 @@ declare const BkVirtualRender: {
     } & {
         default: string;
     };
+    contentAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -642,6 +664,7 @@ declare const BkVirtualRender: {
     groupItemCount: number;
     preloadItemCount: number;
     renderAs: string;
+    contentAs: string;
     scrollOffsetTop: number;
     scrollPosition: string;
     abosuteHeight: string | number;

package/lib/virtual-render/index.js

@@ -3,8 +3,8 @@ import "./virtual-render.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__ from "../scrollbar";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__ from "../scrollbar";
 /******/ var __webpack_modules__ = ({
 
 /***/ 6635:
@@ -17388,10 +17388,6 @@ const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBP
 var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var config_provider_y = x => () => x
 const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
-;// CONCATENATED MODULE: external "../scrollbar"
-var scrollbar_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var scrollbar_y = x => () => x
-const scrollbar_namespaceObject = scrollbar_x({ ["VirtualElement"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__.VirtualElement, ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__["default"] });
 ;// CONCATENATED MODULE: external "vue-types"
 var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_types_y = x => () => x
@@ -17485,6 +17481,8 @@ var virtualRenderProps = _objectSpread({
   preloadItemCount: shared_namespaceObject.PropTypes.number.def(1),
   /** 外层Dom元素需要渲染成的目标元素 */
   renderAs: shared_namespaceObject.PropTypes.string.def('div'),
+  /** 内容层渲染成目标元素 */
+  contentAs: shared_namespaceObject.PropTypes.string.def('div'),
   /** top 滚动填充 */
   scrollOffsetTop: shared_namespaceObject.PropTypes.number.def(0),
   /**
@@ -17587,6 +17585,10 @@ var virtualRenderProps = _objectSpread({
     fixToTop: fixToTop
   };
 });
+;// CONCATENATED MODULE: external "../scrollbar"
+var scrollbar_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var scrollbar_y = x => () => x
+const scrollbar_namespaceObject = scrollbar_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__["default"] });
 ;// CONCATENATED MODULE: ../../packages/virtual-render/src/use-scrollbar.tsx
 /*
  * Tencent is pleased to support the open source community by making
@@ -17614,32 +17616,67 @@ var virtualRenderProps = _objectSpread({
  * IN THE SOFTWARE.
  */
 
-/* harmony default export */ const use_scrollbar = (function (props) {
+
+/* harmony default export */ const use_scrollbar = (function (target, props) {
+  var _props$scrollbar$size, _props$scrollbar;
   var instance = null;
-  var init = function init(target) {
-    var _props$scrollbar;
+  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    resolveClassName = _usePrefix.resolveClassName;
+  var classNames = {
+    contentEl: resolveClassName('scrollbar-content-el'),
+    wrapper: resolveClassName('scrollbar-wrapper'),
+    scrollbar: resolveClassName('scrollbar'),
+    track: "".concat(resolveClassName('scrollbar-track'), " track-").concat((_props$scrollbar$size = (_props$scrollbar = props.scrollbar) === null || _props$scrollbar === void 0 ? void 0 : _props$scrollbar.size) !== null && _props$scrollbar$size !== void 0 ? _props$scrollbar$size : 'normal'),
+    visible: resolveClassName('scrollbar-visible'),
+    horizontal: resolveClassName('scrollbar-horizontal'),
+    vertical: resolveClassName('scrollbar-vertical'),
+    hover: resolveClassName('scrollbar-hover'),
+    dragging: resolveClassName('scrollbar-dragging'),
+    scrolling: resolveClassName('scrollbar-scrolling'),
+    scrollable: resolveClassName('scrollbar-scrollable'),
+    mouseEntered: resolveClassName('scrollbar-mouse-entered')
+  };
+  var init = function init(scrollFn, delegateXContent, delegateYContent) {
     instance = new scrollbar_namespaceObject["default"](target.value, {
-      scrollingThreshold: 120,
-      scrollSize: (_props$scrollbar = props.scrollbar) === null || _props$scrollbar === void 0 ? void 0 : _props$scrollbar.size
+      classNames: classNames,
+      wrapperNode: target.value,
+      scrollDelegate: {
+        scrollHeight: null,
+        scrollWidth: null
+      },
+      useSystemScrollYBehavior: !props.enabled,
+      useSystemScrollXBehavior: true,
+      delegateXContent: delegateXContent,
+      delegateYContent: delegateYContent,
+      onScrollCallback: scrollFn
     });
   };
   var scrollTo = function scrollTo(x, y) {
-    instance.scrollTo({
-      x: x,
-      y: y
-    });
+    var _props$scrollbar2;
+    if ((_props$scrollbar2 = props.scrollbar) !== null && _props$scrollbar2 !== void 0 && _props$scrollbar2.enabled) {
+      instance.scrollTo({
+        left: x,
+        top: y
+      });
+      return;
+    }
+    target.value.scrollTo(x, y);
   };
   var updateScrollHeight = function updateScrollHeight(height) {
-    var _instance;
-    if ((_instance = instance) !== null && _instance !== void 0 && _instance.element) {
-      instance.element.scrollHeight = height;
-      instance.update();
-    }
+    var _instance, _instance2;
+    (_instance = instance) === null || _instance === void 0 || _instance.setOptions({
+      scrollDelegate: {
+        scrollHeight: height,
+        scrollWidth: null
+      }
+    });
+    (_instance2 = instance) === null || _instance2 === void 0 || _instance2.recalculate();
   };
   return {
     init: init,
     instance: instance,
     scrollTo: scrollTo,
+    classNames: classNames,
     updateScrollHeight: updateScrollHeight
   };
 });
@@ -17774,10 +17811,7 @@ var VisibleRender = /*#__PURE__*/function () {
       if (scrollbar.enabled) {
         var _event$offset;
         return {
-          offset: (_event$offset = event.offset) !== null && _event$offset !== void 0 ? _event$offset : {
-            x: event.target.scrollLeft,
-            y: event.target.scrollTop
-          }
+          offset: (_event$offset = event.offset) !== null && _event$offset !== void 0 ? _event$offset : event
         };
       }
       if (event !== null && event !== void 0 && event.offset) {
@@ -17915,15 +17949,21 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 /* harmony default export */ const use_tag_render = (function (props, ctx) {
-  var renderAs = props.renderAs;
+  var renderAs = props.renderAs,
+    contentAs = props.contentAs;
   var refRoot = (0,external_vue_namespaceObject.ref)(null);
-  var _useScrollbar = use_scrollbar(props),
+  var refContent = (0,external_vue_namespaceObject.ref)(null);
+  var _useScrollbar = use_scrollbar(refRoot, props),
     init = _useScrollbar.init,
-    scrollTo = _useScrollbar.scrollTo;
+    scrollTo = _useScrollbar.scrollTo,
+    classNames = _useScrollbar.classNames;
   var contentStyle = (0,external_vue_namespaceObject.reactive)({
     x: 0,
     y: 0
   });
+  var computedStyle = (0,external_vue_namespaceObject.computed)(function () {
+    return use_tag_render_objectSpread({}, props.contentStyle);
+  });
   /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
   var handleScrollCallback = function handleScrollCallback(event, _startIndex, _endIndex, _scrollTop, translateY, scrollLeft, pos) {
     var scrollbar = pos.scrollbar;
@@ -17965,13 +18005,14 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     scrollTo: scrollTo,
     fixToTop: fixToTop,
     refRoot: refRoot,
-    refContent: refRoot
+    refContent: refContent
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
     var _props$scrollbar;
     renderInstance = new VisibleRender(binding, refRoot.value);
     if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
-      init(refRoot);
+      init(renderInstance.executeThrottledRender.bind(renderInstance));
+      return;
     }
     renderInstance.install();
   });
@@ -17981,10 +18022,16 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
   });
   var wrapperClassNames = (0,external_vue_namespaceObject.computed)(function () {
     if (props.scrollbar.enabled) {
-      return [props.className];
+      return [props.className, classNames.wrapper];
     }
     return [props.className];
   });
+  var contentClassNames = (0,external_vue_namespaceObject.computed)(function () {
+    if (props.scrollbar.enabled) {
+      return [props.contentClassName, classNames.contentEl];
+    }
+    return [props.contentClassName];
+  });
   return {
     rendAsTag: function rendAsTag() {
       var _ctx$slots$beforeCont, _ctx$slots$beforeCont2, _ctx$slots, _ctx$slots$default, _ctx$slots$default2, _ctx$slots2, _ctx$slots$afterConte, _ctx$slots$afterConte2, _ctx$slots3, _ctx$slots$afterSecti, _ctx$slots$afterSecti2, _ctx$slots4;
@@ -17994,9 +18041,13 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         "class": wrapperClassNames.value,
         style: wrapperStyle.value,
         ref: refRoot
-      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
+      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (0,external_vue_namespaceObject.h)(contentAs, {
+        "class": contentClassNames.value,
+        style: computedStyle.value,
+        ref: refContent
+      }, [(_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
         data: props.list
-      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '', (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
+      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '']), (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
     }
   };
 });
@@ -18043,7 +18094,6 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 
-
 /* harmony default export */ const virtual_render = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'VirtualRender',
   directives: {
@@ -18054,7 +18104,8 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
   slots: Object,
   setup: function setup(props, ctx) {
     var _this = this;
-    var renderAs = props.renderAs;
+    var renderAs = props.renderAs,
+      contentAs = props.contentAs;
     var resolvePropClassName = function resolvePropClassName(prop) {
       if (typeof prop === 'string') {
         return [prop];
@@ -18079,14 +18130,11 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       };
     });
     var refRoot = (0,external_vue_namespaceObject.ref)(null);
-    /** 如果有分组状态，计算总行数 */
-    var listLength = (0,external_vue_namespaceObject.ref)(0);
-    /** 实际高度，根据行高和总行数计算出来的实际高度 */
-    var innerHeight = (0,external_vue_namespaceObject.ref)(0);
-    var virtualRoot = (0,external_vue_namespaceObject.ref)(null);
-    var _useScrollbar = use_scrollbar(props),
+    var refContent = (0,external_vue_namespaceObject.ref)(null);
+    var _useScrollbar = use_scrollbar(refRoot, props),
       init = _useScrollbar.init,
       scrollTo = _useScrollbar.scrollTo,
+      classNames = _useScrollbar.classNames,
       updateScrollHeight = _useScrollbar.updateScrollHeight;
     var instance = null;
     var pagination = (0,external_vue_namespaceObject.reactive)({
@@ -18118,12 +18166,12 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       var total = localList.value.length;
       if (total < end) {
         end = total;
-        start = end - Math.floor(refRoot.value.offsetHeight / props.lineHeight);
+        start = end - Math.floor(refContent.value.offsetHeight / props.lineHeight);
         start = start < 0 ? 0 : start;
       }
       if (end > total) {
         end = total;
-        start = end - Math.floor(refRoot.value.offsetHeight / props.lineHeight);
+        start = end - Math.floor(refContent.value.offsetHeight / props.lineHeight);
       }
       var value = localList.value.slice(start, end);
       calcList.value = value;
@@ -18135,12 +18183,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       var _props$scrollbar;
       instance = new VisibleRender(binding, refRoot.value);
       if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
-        virtualRoot.value = new scrollbar_namespaceObject.VirtualElement({
-          delegateElement: refRoot.value,
-          scrollHeight: innerHeight.value,
-          onScollCallback: handleScrollBarCallback
-        });
-        init(virtualRoot);
+        init(instance.executeThrottledRender.bind(instance));
         updateScrollHeight(contentHeight.value);
         instance.executeThrottledRender.call(instance, {
           offset: {
@@ -18160,6 +18203,10 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       /** 数据改变时激活当前表单，使其渲染DOM */
       handleListChanged(props.list);
     };
+    /** 如果有分组状态，计算总行数 */
+    var listLength = (0,external_vue_namespaceObject.ref)(0);
+    /** 实际高度，根据行高和总行数计算出来的实际高度 */
+    var innerHeight = (0,external_vue_namespaceObject.ref)(0);
     /**
      * 列表数据改变时，处理相关参数
      */
@@ -18229,6 +18276,10 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     var wrapperClass = (0,external_vue_namespaceObject.computed)(function () {
       return [resolveClassName('virtual-render')].concat(_toConsumableArray(resolvePropClassName(props.className)), [props.scrollPosition === 'container' ? resolveClassName('virtual-content') : '']);
     });
+    /** 内容区域样式列表 */
+    var innerClass = (0,external_vue_namespaceObject.computed)(function () {
+      return [props.scrollPosition === 'content' ? resolveClassName('virtual-content') : ''].concat(_toConsumableArray(resolvePropClassName(props.contentClassName)));
+    });
     /**
      * 重置当前配置
      * @param keepLastPostion
@@ -18272,22 +18323,23 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       scrollTo: scrollTo,
       fixToTop: fixToTop,
       refRoot: refRoot,
-      refContent: refRoot
+      refContent: refContent
     });
-    var handleScrollBarCallback = function handleScrollBarCallback(args) {
-      instance.executeThrottledRender.call(instance, args);
-    };
     return function () {
       var _ctx$slots$beforeCont, _ctx$slots$beforeCont2, _ctx$slots, _ctx$slots$default, _ctx$slots$default2, _ctx$slots2, _ctx$slots$afterConte, _ctx$slots$afterConte2, _ctx$slots3, _ctx$slots$afterSecti, _ctx$slots$afterSecti2, _ctx$slots4;
       return (0,external_vue_namespaceObject.h)(
       // @ts-ignore:next-line
       renderAs || 'div', {
         ref: refRoot,
-        "class": _toConsumableArray(wrapperClass.value),
+        "class": [].concat(_toConsumableArray(wrapperClass.value), [classNames.wrapper]),
         style: wrapperStyle.value
-      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
+      }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (0,external_vue_namespaceObject.h)(contentAs || 'div', {
+        ref: refContent,
+        "class": [].concat(_toConsumableArray(innerClass.value), [classNames.contentEl]),
+        style: virtual_render_objectSpread(virtual_render_objectSpread({}, innerContentStyle.value), props.contentStyle)
+      }, [(_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
         data: calcList.value
-      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '', (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
+      })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '']), (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
     };
   }
 }));

package/lib/virtual-render/props.d.ts

@@ -131,6 +131,12 @@ export declare const virtualRenderProps: {
     } & {
         default: string;
     };
+    /** 内容层渲染成目标元素 */
+    contentAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     /** top 滚动填充 */
     scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
         default: number;

package/lib/virtual-render/use-scrollbar.d.ts

@@ -1,10 +1,24 @@
 import { Ref } from 'vue';
-import BkScrollbar, { VirtualElement } from '../scrollbar';
+import BkScrollbar from '../scrollbar';
 import { VirtualRenderProps } from './props';
-declare const _default: (props: VirtualRenderProps) => {
-    init: (target: Ref<Partial<Element> & Partial<VirtualElement>>) => void;
+declare const _default: (target: Ref<HTMLElement>, props: VirtualRenderProps) => {
+    init: (scrollFn?: any, delegateXContent?: any, delegateYContent?: any) => void;
     instance: BkScrollbar;
     scrollTo: (x: any, y: any) => void;
+    classNames: {
+        contentEl: string;
+        wrapper: string;
+        scrollbar: string;
+        track: string;
+        visible: string;
+        horizontal: string;
+        vertical: string;
+        hover: string;
+        dragging: string;
+        scrolling: string;
+        scrollable: string;
+        mouseEntered: string;
+    };
     updateScrollHeight: (height: number) => void;
 };
 export default _default;