bkui-vue 2.0.1-beta.58 → 2.0.1-beta.59

package/lib/virtual-render/index.js

@@ -17624,22 +17624,28 @@ var virtualRenderProps = _objectSpread({
     });
   };
   var scrollTo = function scrollTo(x, y) {
-    instance.scrollTo({
+    var _instance;
+    (_instance = instance) === null || _instance === void 0 || _instance.scrollTo({
       x: x,
       y: y
     });
   };
   var updateScrollHeight = function updateScrollHeight(height) {
-    var _instance;
-    if ((_instance = instance) !== null && _instance !== void 0 && _instance.element) {
-      instance.element.scrollHeight = height;
-      instance.update();
+    var _instance2;
+    if ((_instance2 = instance) !== null && _instance2 !== void 0 && _instance2.element) {
+      var _instance3, _instance4;
+      ((_instance3 = instance) === null || _instance3 === void 0 ? void 0 : _instance3.element).scrollHeight = height;
+      (_instance4 = instance) === null || _instance4 === void 0 || _instance4.update();
     }
   };
   return {
     init: init,
     instance: instance,
     scrollTo: scrollTo,
+    update: function update() {
+      var _instance5;
+      return (_instance5 = instance) === null || _instance5 === void 0 ? void 0 : _instance5.update();
+    },
     updateScrollHeight: updateScrollHeight
   };
 });
@@ -17802,10 +17808,29 @@ var VisibleRender = /*#__PURE__*/function () {
     this.wrapper = el;
     var throttleDelay = binding.value.throttleDelay;
     this.delay = throttleDelay;
+    this.delegateWrapper = undefined;
   }
   _createClass(VisibleRender, [{
+    key: "scrollHeight",
+    get: function get() {
+      var _this$delegateWrapper, _this$delegateWrapper2, _this$wrapper;
+      return (_this$delegateWrapper = (_this$delegateWrapper2 = this.delegateWrapper) === null || _this$delegateWrapper2 === void 0 ? void 0 : _this$delegateWrapper2.scrollHeight) !== null && _this$delegateWrapper !== void 0 ? _this$delegateWrapper : (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.scrollHeight;
+    }
+  }, {
+    key: "offsetHeight",
+    get: function get() {
+      var _this$delegateWrapper3, _this$delegateWrapper4, _this$wrapper2;
+      return (_this$delegateWrapper3 = (_this$delegateWrapper4 = this.delegateWrapper) === null || _this$delegateWrapper4 === void 0 ? void 0 : _this$delegateWrapper4.offsetHeight) !== null && _this$delegateWrapper3 !== void 0 ? _this$delegateWrapper3 : (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.offsetHeight;
+    }
+  }, {
+    key: "setDelegateWrapper",
+    value: function setDelegateWrapper(el) {
+      this.delegateWrapper = el;
+    }
+  }, {
     key: "render",
     value: function render(e) {
+      var _this$delegateWrapper5;
       var _this$binding$value = this.binding.value,
         _this$binding$value$l = _this$binding$value.lineHeight,
         lineHeight = _this$binding$value$l === void 0 ? 30 : _this$binding$value$l,
@@ -17817,7 +17842,7 @@ var VisibleRender = /*#__PURE__*/function () {
         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;
+        var bottom = this.scrollHeight - this.offsetHeight - elScrollTop;
         handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft, {
           bottom: bottom >= 0 ? bottom : 0,
           scrollbar: e
@@ -17837,7 +17862,7 @@ var VisibleRender = /*#__PURE__*/function () {
         groupItemCount: groupItemCount,
         count: count,
         scrollLeft: scrollLeft
-      }, this.wrapper, e);
+      }, (_this$delegateWrapper5 = this.delegateWrapper) !== null && _this$delegateWrapper5 !== void 0 ? _this$delegateWrapper5 : this.wrapper, e);
     }
   }, {
     key: "executeThrottledRender",
@@ -17847,14 +17872,14 @@ var VisibleRender = /*#__PURE__*/function () {
   }, {
     key: "install",
     value: function install() {
-      var _this$wrapper;
-      (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || _this$wrapper.addEventListener('scroll', this.executeThrottledRender.bind(this));
+      var _this$wrapper3;
+      (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 || _this$wrapper3.addEventListener('scroll', this.executeThrottledRender.bind(this));
     }
   }, {
     key: "uninstall",
     value: function uninstall() {
-      var _this$wrapper2, _this$wrapper2$remove;
-      (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2$remove = _this$wrapper2.removeListener) === null || _this$wrapper2$remove === void 0 || _this$wrapper2$remove.call(_this$wrapper2, 'scroll', this.executeThrottledRender.bind(this));
+      var _this$wrapper4, _this$wrapper4$remove;
+      (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 || (_this$wrapper4$remove = _this$wrapper4.removeListener) === null || _this$wrapper4$remove === void 0 || _this$wrapper4$remove.call(_this$wrapper4, 'scroll', this.executeThrottledRender.bind(this));
     }
   }, {
     key: "setBinding",
@@ -18073,11 +18098,23 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         rendAsTag = _useTagRender.rendAsTag;
       return rendAsTag;
     }
+    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 contentHeight = (0,external_vue_namespaceObject.ref)(0);
+    var virtualRoot = (0,external_vue_namespaceObject.ref)(null);
     var getRowHeightArgs = function getRowHeightArgs(startIndex) {
       var start = startIndex * props.groupItemCount;
       var end = (startIndex + 1) * props.groupItemCount;
+      if (end > listLength.value) {
+        var count = end - start;
+        end = listLength.value;
+        start = end - count;
+      }
       return {
-        index: startIndex,
+        index: start,
         rows: props.list.slice(start, end),
         items: [start, end],
         type: 'virtual'
@@ -18101,17 +18138,11 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         scrollbar: props.scrollbar
       };
     });
-    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 contentHeight = (0,external_vue_namespaceObject.ref)(0);
-    var virtualRoot = (0,external_vue_namespaceObject.ref)(null);
     var _useScrollbar = use_scrollbar(props),
       init = _useScrollbar.init,
       scrollTo = _useScrollbar.scrollTo,
-      updateScrollHeight = _useScrollbar.updateScrollHeight;
+      updateScrollHeight = _useScrollbar.updateScrollHeight,
+      update = _useScrollbar.update;
     var instance = null;
     var pagination = (0,external_vue_namespaceObject.reactive)({
       startIndex: 0,
@@ -18125,9 +18156,15 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       groupItemCount: props.groupItemCount
     });
     var calcList = (0,external_vue_namespaceObject.ref)([]);
-    var getLastPageIndex = function getLastPageIndex() {
+    var getOffsetHeight = function getOffsetHeight() {
+      if (typeof props.height === 'number') {
+        return props.height;
+      }
       // @ts-ignore
-      var elHeight = virtualRoot.value.offsetHeight;
+      return virtualRoot.value.offsetHeight;
+    };
+    var getLastPageIndex = function getLastPageIndex() {
+      var elHeight = getOffsetHeight();
       var startIndex = Math.ceil(listLength.value / props.groupItemCount);
       var rowsHeight = 0;
       var lastHeight = 0;
@@ -18236,7 +18273,11 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         top: 0
       };
       var el = refRoot.value;
-      computedVirtualIndex(props.lineHeight, handleScrollCallback, pagination, el, {
+      var container = typeof props.height === 'number' ? {
+        scrollHeight: innerHeight.value,
+        offsetHeight: props.height
+      } : el;
+      computedVirtualIndex(props.lineHeight, handleScrollCallback, pagination, container, {
         target: el
       });
     };
@@ -18292,31 +18333,50 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     };
     var _useFixTop = use_fix_top(props, scrollTo),
       fixToTop = _useFixTop.fixToTop;
-    (0,external_vue_namespaceObject.watch)(function () {
-      return [props.list];
-    }, function () {
+    var setDelegateEl = function setDelegateEl() {
       var _instance3;
-      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.setBinding(binding);
+      var el = refRoot.value;
+      var container = typeof props.height === 'number' ? {
+        scrollHeight: innerHeight.value,
+        offsetHeight: props.height
+      } : el;
+      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.setDelegateWrapper(container);
+    };
+    var updateVirtualInstance = function updateVirtualInstance() {
+      var _instance4;
+      (_instance4 = instance) === null || _instance4 === void 0 || _instance4.setBinding(binding);
       handleChangeListConfig();
       updateScrollHeight(contentHeight.value);
+      setDelegateEl();
+      update();
       afterListDataReset();
       (0,external_vue_namespaceObject.nextTick)(function () {
-        var _instance4;
-        (_instance4 = instance) === null || _instance4 === void 0 || _instance4.executeThrottledRender.call(instance, {
+        var _instance5;
+        (_instance5 = instance) === null || _instance5 === void 0 || _instance5.executeThrottledRender.call(instance, {
           offset: {
             x: pagination.scrollLeft,
             y: pagination.scrollTop
           }
         });
       });
+    };
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.height;
+    }, function () {
+      updateVirtualInstance();
+    });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return [props.list, props.list.length];
+    }, function () {
+      updateVirtualInstance();
     }, {
-      immediate: true,
-      deep: true
+      immediate: true
     });
     ctx.expose({
       reset: reset,
       scrollTo: scrollTo,
       fixToTop: fixToTop,
+      updateScroll: update,
       refRoot: refRoot,
       refContent: refRoot
     });

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

@@ -5,6 +5,7 @@ declare const _default: (props: VirtualRenderProps) => {
     init: (target: Ref<Partial<Element> & Partial<VirtualElement>>) => void;
     instance: BkScrollbar;
     scrollTo: (x: any, y: any) => void;
+    update: () => void;
     updateScrollHeight: (height: number) => void;
 };
 export default _default;

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

@@ -16,7 +16,11 @@ export declare class VisibleRender {
     private binding;
     private wrapper;
     private delay;
+    private delegateWrapper;
     constructor(binding: any, el: any);
+    get scrollHeight(): any;
+    get offsetHeight(): any;
+    setDelegateWrapper(el: any): void;
     render(e: any): void;
     executeThrottledRender(e: any): void;
     install(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.0.1-beta.58",
+  "version": "2.0.1-beta.59",
   "workspaces": [
     "packages/**",
     "scripts/cli",