vxe-pc-ui 4.20.8 → 4.20.10

package/lib/tree/src/tree.js

@@ -24,17 +24,14 @@ const {
 } = (0, _log.createComponentLog)('tree');
 const {
   menus,
-  scrollbarUtils,
   getConfig,
   getI18n,
-  getIcon
+  getIcon,
+  baseUtils
 } = _ui.VxeUI;
 const {
-  getThumbOffsetSize,
-  getThumbSize,
-  getScrollFromClick,
-  getScrollFromDrag
-} = scrollbarUtils;
+  getDefVal
+} = baseUtils;
 /**
  * 生成节点的唯一主键
  */
@@ -239,7 +236,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     virtualYConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => (0, _utils.getDefaultConfig)(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+      default: () => getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -250,24 +247,24 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       slots
     } = context;
     const xID = _xeUtils.default.uniqueId();
-    const {
-      computeSize
-    } = (0, _ui.useSize)(props);
     const refElem = (0, _vue.ref)();
     const refHeaderWrapperElem = (0, _vue.ref)();
     const refFooterWrapperElem = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
+    const refVirtualSpaceElem = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
-    const refTrackXElem = (0, _vue.ref)();
-    const refTrackYElem = (0, _vue.ref)();
-    const refThumbXElem = (0, _vue.ref)();
-    const refThumbYElem = (0, _vue.ref)();
     const refDragNodeLineElem = (0, _vue.ref)();
     const refDragTipElem = (0, _vue.ref)();
     const refTooltip = (0, _vue.ref)();
     const crossTreeDragNodeInfo = (0, _store.getCrossTreeDragNodeInfo)();
     const internalData = createInternalData();
     const reactData = (0, _vue.reactive)(createReactData());
+    const {
+      computeSize
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const refMaps = {
       refElem
     };
@@ -410,32 +407,32 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeScrollXHeight = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
     });
     const computeScrollYWidth = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
     });
     const computeScrollXVisible = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
-      return (0, _utils.getDefaultConfig)(scrollbarXOpts.visible, scrollbarOpts.visible);
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
     });
     const computeScrollYVisible = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
-      return (0, _utils.getDefaultConfig)(scrollbarYOpts.visible, scrollbarOpts.visible);
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
     });
     const computeScrollXAutoHide = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     });
     const computeScrollYAutoHide = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     });
     const computeScrollbarWrapperClss = (0, _vue.computed)(() => {
       const {
@@ -478,6 +475,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
+    const {
+      refTrackXElem,
+      refTrackYElem,
+      refThumbXElem,
+      refThumbYElem,
+      updateThumbSize,
+      updateThumbOffset,
+      clickTrackXEvent,
+      clickTrackYEvent,
+      pointerdownThumbXEvent,
+      pointermoveThumbXEvent,
+      cleatPointerThumbEvent,
+      pointerdownThumbYEvent,
+      pointermoveThumbYEvent
+    } = _ui.useFns.useInitVScrollbar($xeTree);
     const getNodeId = node => {
       if (!node) {
         return '';
@@ -1054,8 +1066,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       });
     };
     const updateScrollbar = () => {
-      updateThumbSize();
-      updateThumbOffset();
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        return (0, _vue.nextTick)().then(() => {
+          updateThumbSize();
+          updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     };
     /**
      * 重新计算列表
@@ -1082,11 +1100,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           const parentPaddingSize = (0, _dom.getPaddingTopBottomSize)(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
-        updateScrollbar();
         updateHeight();
         return computeScrollLoad().then(() => {
           updateHeight();
           updateYSpace();
+          updateScrollbar();
         });
       }
       return (0, _vue.nextTick)();
@@ -1119,7 +1137,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const scrollEvent = evnt => {
-      const scrollBodyElem = evnt.target;
+      const scrollBodyElem = evnt.currentTarget;
       const scrollTop = scrollBodyElem.scrollTop;
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -2021,6 +2039,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const treeMethods = {
       dispatchEvent,
+      getScrollViewElem() {
+        const viewEl = refVirtualWrapper.value;
+        return viewEl || null;
+      },
       getNodeId,
       getNodeById(nodeid) {
         const {
@@ -3462,181 +3484,26 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         hideDropTip();
       }
     };
-    const updateThumbSize = () => {
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const trackXEl = refTrackXElem.value;
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      const thumbXElem = refThumbXElem.value;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      const trackYEl = refTrackYElem.value;
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      const thumbYElem = refThumbYElem.value;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    };
-    const updateThumbOffset = () => {
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const {
-        xThumbWidth,
-        yThumbHeight
-      } = reactData;
-      const trackXEl = refTrackXElem.value;
-      const thumbXElem = refThumbXElem.value;
-      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-      internalData.xThumbLeft = xThumbLeft;
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-      }
-      const trackYEl = refTrackYElem.value;
-      const thumbYElem = refThumbYElem.value;
-      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-      internalData.yThumbTop = yThumbTop;
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-        thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-      }
-    };
-    const clickTrackXEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    };
-    const clickTrackYEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    };
-    const pointerdownThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      const {
-        isThumbDrag,
-        thumbDragOffset
-      } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value;
-        if (!viewEl) {
-          return;
-        }
-        const {
-          xThumbWidth
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    };
-    const cleatPointerThumbEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    };
-    const pointerdownThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
+    const bindScrollbarResize = () => {
+      const isVScrollbar = computeIsVScrollbar.value;
       const {
-        isThumbDrag,
-        thumbDragOffset
+        scrollObserver
       } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value;
-        if (!viewEl) {
-          return;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value;
+          const viewInnerEl = refVirtualSpaceElem.value;
+          const scrollObserver = _ui.globalResize.create(() => {
+            reScrollFlag.value++;
+          });
+          if (el) {
+            scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = scrollObserver;
         }
-        const {
-          yThumbHeight
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     };
     Object.assign($xeTree, treeMethods, treePrivateMethods);
@@ -3981,8 +3848,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         loading,
         trigger,
-        showLine,
-        useScrollbar
+        showLine
       } = props;
       const {
         bodyHeight,
@@ -3993,6 +3859,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         yThumbHeight
       } = reactData;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const radioOpts = computeRadioOpts.value;
       const checkboxOpts = computeCheckboxOpts.value;
       const loadingOpts = computeLoadingOpts.value;
@@ -4019,13 +3886,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return (0, _vue.h)('div', Object.assign({
         ref: refElem,
-        class: ['vxe-tree', useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '', {
+        class: ['vxe-tree', isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '', {
           [`size--${vSize}`]: vSize,
           'show--line': showLine,
-          'is--virtual-scrollbar': useScrollbar,
-          'ov-padding': useScrollbar && scrollbarOpts.padding,
-          'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-          'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+          'is--virtual-scrollbar': isVScrollbar,
+          'ov-padding': isVScrollbar && scrollbarOpts.padding,
+          'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+          'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
           'overflow-y': yThumbHeight,
           'overflow-x': xThumbWidth,
           'checkbox--highlight': checkboxOpts.highlight,
@@ -4046,6 +3913,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: treeStyle,
         onScroll: scrollEvent
       }, [(0, _vue.h)('div', {
+        ref: refVirtualSpaceElem,
         class: 'vxe-tree--y-space',
         style: {
           height: bodyHeight ? `${bodyHeight}px` : ''
@@ -4065,7 +3933,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       /**
        * 滚动条
        */
-      useScrollbar ? (0, _vue.h)('div', {
+      isVScrollbar ? (0, _vue.h)('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? (0, _ui.renderEmptyElement)($xeTree) : (0, _vue.h)('div', {
         ref: refTrackXElem,
@@ -4175,40 +4043,51 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(() => props.filterValue, () => {
       triggerSearchEvent(new Event('filter'));
     });
-    const reFlag = (0, _vue.ref)(0);
+    const reScrollFlag = (0, _vue.ref)(0);
+    const reLayoutFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.height, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(() => props.minHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(() => props.maxHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
-    (0, _vue.watch)(() => props.useScrollbar, () => {
-      reFlag.value++;
+    (0, _vue.watch)(computeIsVScrollbar, () => {
+      (0, _vue.nextTick)(() => {
+        bindScrollbarResize();
+        (0, _vue.nextTick)(() => {
+          reLayoutFlag.value++;
+        });
+      });
     });
     (0, _vue.watch)(computeScrollYWidth, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(computeScrollXHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0, _vue.watch)(computeScrollXVisible, () => {
       (0, _vue.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0, _vue.watch)(computeScrollYVisible, () => {
       (0, _vue.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
-    (0, _vue.watch)(reFlag, () => {
+    (0, _vue.watch)(reLayoutFlag, () => {
       recalculate().then(() => {
         recalculate();
       });
     });
+    (0, _vue.watch)(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar();
+      });
+    });
     (0, _vue.onMounted)(() => {
       const {
         transform,
@@ -4217,8 +4096,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         showOverflow,
         lazy,
         loadMethod,
-        autoResize,
-        useScrollbar
+        autoResize
       } = props;
       const dragOpts = computeDragOpts.value;
       if (!showOverflow) {
@@ -4240,25 +4118,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (menuConfig && !VxeUIContextMenu) {
         errLog('vxe.error.reqComp', ['vxe-context-menu']);
       }
-      const el = refElem.value;
-      if (useScrollbar || autoResize) {
-        const viewInnerEl = refVirtualBody.value;
-        const scrollObserver = _ui.globalResize.create(() => {
-          updateScrollbar();
-        });
-        if (el) {
-          scrollObserver.observe(el);
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl);
-        }
-        internalData.scrollObserver = scrollObserver;
-      }
       if (autoResize) {
+        const el = refElem.value;
         const parentEl = getParentElem();
         const resizeObserver = _ui.globalResize.create(() => {
           if (props.autoResize) {
-            reFlag.value++;
+            reLayoutFlag.value++;
           }
         });
         if (el) {
@@ -4269,9 +4134,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
         internalData.resizeObserver = resizeObserver;
       }
-      reFlag.value++;
+      reLayoutFlag.value++;
+      bindScrollbarResize();
       _ui.globalEvents.on($xeTree, 'resize', () => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0, _vue.onBeforeUnmount)(() => {