bkui-vue 1.0.3-beta.9 → 2.0.1-beta.1

package/lib/virtual-render/index.js

@@ -3,6 +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_vue_types_22de060a__ from "vue-types";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_scrollbar_918447d0__ from "../scrollbar";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/throttle";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
@@ -122,11 +124,15 @@ 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({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watchEffect"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watchEffect });
 ;// 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
 const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// 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
+const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
 ;// CONCATENATED MODULE: ../../packages/virtual-render/src/props.ts
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -157,6 +163,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * IN THE SOFTWARE.
  */
 
+
 var EventProps = {
   onContentScroll: Function
 };
@@ -241,23 +248,52 @@ var virtualRenderProps = _objectSpread({
    * 保持滚动条位置、当前渲染区间
    */
   keepAlive: shared_namespaceObject.PropTypes.bool.def(false),
+  /**
+   * 是否允许滚动条改变原有DOM结构
+   */
+  scrollbar: (0,external_vue_types_namespaceObject.toType)('IScrollbarOption', {
+    "default": {
+      enabled: true
+    }
+  }),
   /**
    * 数据监听改变时，是否自动重置位置到[0, 0]
    */
   autoReset: shared_namespaceObject.PropTypes.bool.def(true),
-  wrapperStyle: shared_namespaceObject.PropTypes.any.def({})
+  wrapperStyle: shared_namespaceObject.PropTypes.any.def({}),
+  /**
+   * 传入数据如果没有设置rowKey，是否自动生成$index作为唯一ID
+   * $index的值默认为index
+   */
+  autoIndex: shared_namespaceObject.PropTypes.bool.def(true)
 }, EventProps);
 ;// CONCATENATED MODULE: ../../packages/virtual-render/src/use-fix-top.tsx
-/* harmony default export */ const use_fix_top = (function (props, refRoot) {
-  var scrollTo = function scrollTo() {
-    var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      left: 0,
-      top: 0
-    };
-    var left = option.left,
-      top = option.top;
-    refRoot.value.scrollTo(left, top);
-  };
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+/* harmony default export */ const use_fix_top = (function (props, scrollTo) {
   /**
    * 指定元素滚动到顶部
    * @param param0
@@ -282,15 +318,106 @@ var virtualRenderProps = _objectSpread({
     if (typeof targetIndex === 'number') {
       var resolvedIndex = targetIndex >= 0 ? targetIndex : 0;
       var offsetY = resolvedIndex * props.lineHeight;
-      scrollTo({
-        left: 0,
-        top: offsetY
+      scrollTo(0, offsetY);
+    }
+    return null;
+  };
+  return {
+    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
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+/* harmony default export */ const use_scrollbar = (function (target, props) {
+  var instance = null;
+  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: resolveClassName('scrollbar-track'),
+    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, {
+      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) {
+    var _props$scrollbar;
+    if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
+      instance.scrollTo({
+        left: x,
+        top: y
       });
+      return;
     }
+    target.value.scrollTo(x, y);
+  };
+  var updateScrollHeight = function updateScrollHeight(height) {
+    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 {
-    fixToTop: fixToTop,
-    scrollTo: scrollTo
+    init: init,
+    instance: instance,
+    scrollTo: scrollTo,
+    classNames: classNames,
+    updateScrollHeight: updateScrollHeight
   };
 });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/classCallCheck.js
@@ -325,6 +452,7 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
 ;// CONCATENATED MODULE: ../../packages/virtual-render/src/v-virtual-render.ts
 
 
+
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -375,14 +503,14 @@ function getMatchedIndex(maxCount, maxHeight, groupItemCount, callback) {
     diffHeight: diffHeight
   };
 }
-function computedVirtualIndex(lineHeight, callback, pagination, _el, event) {
-  if (!event.target) {
+function computedVirtualIndex(lineHeight, callback, pagination, wrapper, event) {
+  if (!wrapper || !event.offset) {
     return;
   }
-  var elScrollTop = event.target.scrollTop;
-  var elScrollLeft = event.target.scrollLeft;
-  var elScrollHeight = event.target.scrollHeight;
-  var elOffsetHeight = event.target.offsetHeight;
+  var elScrollTop = event.offset.y;
+  var elScrollLeft = event.offset.x;
+  var elScrollHeight = wrapper.scrollHeight;
+  var elOffsetHeight = wrapper.offsetHeight;
   var count = pagination.count,
     groupItemCount = pagination.groupItemCount;
   var targetStartIndex = 0;
@@ -401,8 +529,9 @@ function computedVirtualIndex(lineHeight, callback, pagination, _el, event) {
     targetEndIndex = endValue.startIndex + targetStartIndex;
   }
   var bottom = elScrollHeight - elOffsetHeight - elScrollTop;
-  typeof callback === 'function' && callback(event, targetStartIndex, targetEndIndex, elScrollTop, translateY, elScrollLeft, {
-    bottom: bottom >= 0 ? bottom : 0
+  typeof callback === 'function' && callback(event, targetStartIndex, targetEndIndex, elScrollTop, elScrollTop, elScrollLeft, {
+    bottom: bottom >= 0 ? bottom : 0,
+    scrollbar: event
   });
   return {
     targetStartIndex: targetStartIndex,
@@ -414,7 +543,33 @@ function computedVirtualIndex(lineHeight, callback, pagination, _el, event) {
 }
 var VisibleRender = /*#__PURE__*/function () {
   function VisibleRender(binding, el) {
+    var _this = this;
     _classCallCheck(this, VisibleRender);
+    _defineProperty(this, "getEvent", function (event) {
+      var _this$binding$value$s = _this.binding.value.scrollbar,
+        scrollbar = _this$binding$value$s === void 0 ? {
+          enabled: false
+        } : _this$binding$value$s;
+      if (scrollbar.enabled) {
+        var _event$offset;
+        return {
+          offset: (_event$offset = event.offset) !== null && _event$offset !== void 0 ? _event$offset : event
+        };
+      }
+      if (event !== null && event !== void 0 && event.offset) {
+        return {
+          offset: event === null || event === void 0 ? void 0 : event.offset
+        };
+      }
+      var elScrollTop = event.target.scrollTop;
+      var elScrollLeft = event.target.scrollLeft;
+      return {
+        offset: {
+          x: elScrollLeft,
+          y: elScrollTop
+        }
+      };
+    });
     this.binding = binding;
     this.wrapper = el;
     var throttleDelay = binding.value.throttleDelay;
@@ -431,11 +586,13 @@ var VisibleRender = /*#__PURE__*/function () {
         pagination = _this$binding$value$p === void 0 ? {} : _this$binding$value$p,
         onlyScroll = _this$binding$value.onlyScroll;
       if (onlyScroll) {
-        var elScrollTop = this.wrapper.scrollTop;
-        var elScrollLeft = this.wrapper.scrollLeft;
-        var bottom = this.wrapper.scrollHeight - this.wrapper.offsetHeight - this.wrapper.scrollTop;
+        var _e$offset, _e$offset$x, _e$offset2;
+        var elScrollTop = (_e$offset = e.offset) === null || _e$offset === void 0 ? void 0 : _e$offset.y;
+        var elScrollLeft = (_e$offset$x = (_e$offset2 = e.offset) === null || _e$offset2 === void 0 ? void 0 : _e$offset2.x) !== null && _e$offset$x !== void 0 ? _e$offset$x : 0;
+        var bottom = this.wrapper.scrollHeight - this.wrapper.offsetHeight - elScrollTop;
         handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft, {
-          bottom: bottom >= 0 ? bottom : 0
+          bottom: bottom >= 0 ? bottom : 0,
+          scrollbar: e
         });
         return;
       }
@@ -457,7 +614,7 @@ var VisibleRender = /*#__PURE__*/function () {
   }, {
     key: "executeThrottledRender",
     value: function executeThrottledRender(e) {
-      (0,throttle_namespaceObject["default"])(this.render.bind(this), this.delay)(e);
+      (0,throttle_namespaceObject["default"])(this.render.bind(this), this.delay)(this.getEvent(e));
     }
   }, {
     key: "install",
@@ -532,28 +689,47 @@ 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,
     contentAs = props.contentAs;
+  var refRoot = (0,external_vue_namespaceObject.ref)(null);
+  var refContent = (0,external_vue_namespaceObject.ref)(null);
+  var _useScrollbar = use_scrollbar(refRoot, props),
+    init = _useScrollbar.init,
+    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;
+    if (scrollbar !== null && scrollbar !== void 0 && scrollbar.offset) {
+      var _scrollbar$offset;
+      Object.assign(contentStyle, (_scrollbar$offset = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.offset) !== null && _scrollbar$offset !== void 0 ? _scrollbar$offset : {});
+    }
     ctx.emit('content-scroll', [event, {
       translateY: translateY,
       translateX: scrollLeft,
       pos: pos
     }]);
   };
-  var instance = null;
+  var renderInstance = null;
   var binding = (0,external_vue_namespaceObject.computed)(function () {
     return {
       lineHeight: props.lineHeight,
+      scrollbar: props.scrollbar,
       handleScrollCallback: handleScrollCallback,
       pagination: {},
       throttleDelay: props.throttleDelay,
       onlyScroll: props.scrollEvent
     };
   });
-  var refRoot = (0,external_vue_namespaceObject.ref)(null);
   /** 虚拟渲染外层容器样式 */
   var wrapperStyle = (0,external_vue_namespaceObject.computed)(function () {
     var _props$maxHeight;
@@ -565,20 +741,38 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       maxHeight: (_props$maxHeight = props.maxHeight) !== null && _props$maxHeight !== void 0 ? _props$maxHeight : height
     }, props.wrapperStyle);
   });
-  var _useFixTop = use_fix_top(props, refRoot),
-    scrollTo = _useFixTop.scrollTo,
+  var _useFixTop = use_fix_top(props, scrollTo),
     fixToTop = _useFixTop.fixToTop;
   ctx.expose({
     scrollTo: scrollTo,
-    fixToTop: fixToTop
+    fixToTop: fixToTop,
+    refRoot: refRoot,
+    refContent: refContent
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
-    instance = new VisibleRender(binding, refRoot.value);
-    instance.install();
+    var _props$scrollbar;
+    renderInstance = new VisibleRender(binding, refRoot.value);
+    if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
+      init(renderInstance.executeThrottledRender.bind(renderInstance));
+      return;
+    }
+    renderInstance.install();
   });
   (0,external_vue_namespaceObject.onUnmounted)(function () {
-    var _instance;
-    (_instance = instance) === null || _instance === void 0 || _instance.uninstall();
+    var _renderInstance;
+    (_renderInstance = renderInstance) === null || _renderInstance === void 0 || _renderInstance.uninstall();
+  });
+  var wrapperClassNames = (0,external_vue_namespaceObject.computed)(function () {
+    if (props.scrollbar.enabled) {
+      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() {
@@ -586,12 +780,13 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       return (0,external_vue_namespaceObject.h)(
       // @ts-ignore:next-line
       renderAs, {
-        "class": props.className,
+        "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 : '', (0,external_vue_namespaceObject.h)(contentAs, {
-        "class": props.contentClassName,
-        style: props.contentStyle
+        "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 : '']);
@@ -640,6 +835,7 @@ 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: {
@@ -671,10 +867,17 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         lineHeight: props.lineHeight,
         handleScrollCallback: handleScrollCallback,
         pagination: pagination,
-        throttleDelay: props.throttleDelay
+        throttleDelay: props.throttleDelay,
+        scrollbar: props.scrollbar
       };
     });
     var refRoot = (0,external_vue_namespaceObject.ref)(null);
+    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)({
       startIndex: 0,
@@ -704,20 +907,31 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       var end = (pagination.endIndex + props.preloadItemCount) * props.groupItemCount;
       var total = localList.value.length;
       if (total < end) {
-        var contentLength = end - start;
         calcList.value = localList.value.slice(start, total);
-        end = total + 1;
-        start = end - contentLength;
+        end = total;
+        start = end - Math.floor(refContent.value.offsetHeight / props.lineHeight);
         start = start < 0 ? 0 : start;
       }
-      var value = localList.value.slice(start, end + 10);
+      var value = localList.value.slice(start, end);
       calcList.value = value;
       if (event) {
-        ctx.emit('content-scroll', [event, pagination]);
+        ctx.emit('content-scroll', [event, pagination, value]);
       }
     };
     (0,external_vue_namespaceObject.onMounted)(function () {
+      var _props$scrollbar;
       instance = new VisibleRender(binding, refRoot.value);
+      if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
+        init(instance.executeThrottledRender.bind(instance));
+        updateScrollHeight(contentHeight.value);
+        instance.executeThrottledRender.call(instance, {
+          offset: {
+            x: 0,
+            y: 0
+          }
+        });
+        return;
+      }
       instance.install();
     });
     (0,external_vue_namespaceObject.onUnmounted)(function () {
@@ -770,7 +984,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     };
     /** 映射传入的数组为新的数组，增加 $index属性，用来处理唯一Index */
     var localList = (0,external_vue_namespaceObject.computed)(function () {
-      if (props.rowKey !== undefined) {
+      if (props.rowKey !== undefined || !props.autoIndex) {
         return props.list;
       }
       return (props.list || []).map(function (item, index) {
@@ -781,35 +995,27 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     });
     /** 展示列表内容区域样式 */
     var innerContentStyle = (0,external_vue_namespaceObject.computed)(function () {
-      return props.scrollPosition === 'content' ? {
-        top: "".concat(pagination.scrollTop + props.scrollOffsetTop, "px"),
-        transform: "translateY(-".concat(pagination.translateY, "px)")
-      } : {};
+      return props.scrollPosition === 'content' ? {} : {};
     });
     /** 虚拟渲染外层容器样式 */
     var wrapperStyle = (0,external_vue_namespaceObject.computed)(function () {
-      var _props$maxHeight;
       var height = typeof props.height === 'number' ? "".concat(props.height, "px") : props.height;
       return virtual_render_objectSpread(virtual_render_objectSpread({
         height: height,
         width: typeof props.width === 'number' ? "".concat(props.width, "px") : props.width,
         display: 'inline-block',
-        maxHeight: (_props$maxHeight = props.maxHeight) !== null && _props$maxHeight !== void 0 ? _props$maxHeight : height
+        maxHeight: props.maxHeight ? "".concat(props.maxHeight, "px") : false,
+        minHeight: props.minHeight ? "".concat(props.minHeight, "px") : false
       }, props.scrollPosition === 'container' ? innerContentStyle.value : {}), props.wrapperStyle);
     });
-    /** 虚拟渲染区域内置占位区域样式，用来撑起总高度，出现滚动条 */
-    var innerStyle = (0,external_vue_namespaceObject.computed)(function () {
-      var isHidden = typeof props.abosuteHeight === 'number' && props.abosuteHeight === 0;
-      return {
-        height: "".concat(innerHeight.value < props.minHeight ? props.minHeight : innerHeight.value, "px"),
-        display: isHidden ? 'none' : 'block'
-      };
+    var contentHeight = (0,external_vue_namespaceObject.computed)(function () {
+      return innerHeight.value < props.minHeight ? props.minHeight : innerHeight.value;
     });
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     /** 外层样式列表 */
     var wrapperClass = (0,external_vue_namespaceObject.computed)(function () {
-      return [resolveClassName('virtual-render'), props.scrollXName, props.scrollYName].concat(_toConsumableArray(resolvePropClassName(props.className)), [props.scrollPosition === 'container' ? resolveClassName('virtual-content') : '']);
+      return [resolveClassName('virtual-render')].concat(_toConsumableArray(resolvePropClassName(props.className)), [props.scrollPosition === 'container' ? resolveClassName('virtual-content') : '']);
     });
     /** 内容区域样式列表 */
     var innerClass = (0,external_vue_namespaceObject.computed)(function () {
@@ -820,29 +1026,40 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
      * @param keepLastPostion
      */
     var reset = function reset() {
+      var _instance2;
       handleChangeListConfig();
       afterListDataReset();
+      (_instance2 = instance) === null || _instance2 === void 0 || _instance2.executeThrottledRender.call(instance, {
+        offset: {
+          x: 0,
+          y: 0
+        }
+      });
     };
-    var _useFixTop = use_fix_top(props, refRoot),
-      scrollTo = _useFixTop.scrollTo,
+    var _useFixTop = use_fix_top(props, scrollTo),
       fixToTop = _useFixTop.fixToTop;
-    (0,external_vue_namespaceObject.watch)(function () {
-      return [props.lineHeight, props.height, props.list, props.maxHeight];
-    }, function () {
-      var _instance2;
-      (_instance2 = instance) === null || _instance2 === void 0 || _instance2.setBinding(binding);
+    (0,external_vue_namespaceObject.watchEffect)(function () {
+      var _instance3;
+      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.setBinding(binding);
       handleChangeListConfig();
+      updateScrollHeight(contentHeight.value);
       (0,external_vue_namespaceObject.nextTick)(function () {
+        var _instance4;
         afterListDataReset();
+        (_instance4 = instance) === null || _instance4 === void 0 || _instance4.executeThrottledRender.call(instance, {
+          offset: {
+            x: pagination.scrollLeft,
+            y: pagination.scrollTop
+          }
+        });
       });
-    }, {
-      deep: true,
-      immediate: true
     });
     ctx.expose({
       reset: reset,
       scrollTo: scrollTo,
-      fixToTop: fixToTop
+      fixToTop: fixToTop,
+      refRoot: refRoot,
+      refContent: refContent
     });
     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;
@@ -850,17 +1067,15 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       // @ts-ignore:next-line
       renderAs || 'div', {
         ref: refRoot,
-        "class": 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 : '', (0,external_vue_namespaceObject.h)(contentAs || 'div', {
-        "class": innerClass.value,
+        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 : '', (0,external_vue_namespaceObject.h)('div', {
-        "class": [resolveClassName('virtual-section')],
-        style: innerStyle.value
-      }), (_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

@@ -1,4 +1,7 @@
 import { ExtractPropTypes } from 'vue';
+export type IScrollbarOption = {
+    enabled: boolean;
+};
 export declare const virtualRenderProps: {
     onContentScroll: FunctionConstructor;
     /** 传入原始数据源 */
@@ -181,6 +184,10 @@ export declare const virtualRenderProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否允许滚动条改变原有DOM结构
+     */
+    scrollbar: import("vue-types").VueTypeDef<IScrollbarOption>;
     /**
      * 数据监听改变时，是否自动重置位置到[0, 0]
      */
@@ -192,5 +199,14 @@ export declare const virtualRenderProps: {
     wrapperStyle: import("vue-types").VueTypeValidableDef<any> & {
         default: any;
     };
+    /**
+     * 传入数据如果没有设置rowKey，是否自动生成$index作为唯一ID
+     * $index的值默认为index
+     */
+    autoIndex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 };
 export type VirtualRenderProps = Readonly<ExtractPropTypes<typeof virtualRenderProps>>;

package/lib/virtual-render/use-fix-top.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from 'vue';
 import { VirtualRenderProps } from './props';
 type IFixToTopParams = {
     index?: number;
@@ -8,11 +7,7 @@ type IFixToTopParams = {
     };
     position: number[];
 };
-declare const _default: (props: VirtualRenderProps, refRoot: Ref<HTMLElement>) => {
-    fixToTop: (params: IFixToTopParams) => void;
-    scrollTo: (option?: {
-        left: number;
-        top: number;
-    }) => void;
+declare const _default: (props: VirtualRenderProps, scrollTo: (x: any, y: any) => void) => {
+    fixToTop: (params: IFixToTopParams) => any;
 };
 export default _default;