vxe-pc-ui 4.19.8 → 4.20.0

package/lib/index.umd.js

@@ -4745,7 +4745,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.19.8"}`;
+const uiVersion = `ui v${"4.20.0"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4763,7 +4763,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.19.8";
+const ui_version = "4.20.0";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -7412,6 +7412,15 @@ const Avatar = VxeAvatar;
 function isEnableConf(conf) {
   return conf && conf.enabled !== false;
 }
+/**
+ * 用于开关类型的配置项
+ * 局部启用规则：conf={}
+ * 局部禁用规则：conf={enabled:false}
+ * 全局默认启用规则：conf.enabled=true
+ */
+function hasEnableConf(conf, opts) {
+  return opts && (conf ? opts.enabled !== false : opts.enabled);
+}
 function nextZIndex() {
   return index_esm.getNext();
 }
@@ -13153,6 +13162,7 @@ function getItemCacheObj(item) {
 
 
 
+
 const {
   warnLog: list_warnLog,
   errLog: list_errLog
@@ -13183,6 +13193,9 @@ function list_createReactData() {
     updateCheckboxFlag: 1,
     isAllChecked: false,
     isAllIndeterminate: false,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
     insertRowFlag: 1,
     removeRowFlag: 1,
     dragRow: null,
@@ -13192,13 +13205,18 @@ function list_createReactData() {
 }
 function list_createInternalData() {
   return {
-    resizeObserver: undefined,
     fullData: [],
     afterList: [],
     fullKeyMaps: {},
     rowMaps: {},
-    lastScrollLeft: 0,
+    // 滚动条
+    // resizeObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -13252,7 +13270,12 @@ let crossListDragRowObj = null;
     dragConfig: Object,
     menuConfig: Object,
     virtualYConfig: Object,
-    scrollY: Object
+    scrollY: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getConfig().list.useScrollbar
+    },
+    scrollbarConfig: Object
   },
   emits: ['update:checkRowKey', 'update:checkRowKeys', 'row-click', 'row-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'checkbox-all', 'scroll', 'row-dragstart', 'row-dragover', 'row-dragend', 'row-remove-dragend', 'row-insert-dragend', 'row-menu', 'menu-click'],
   setup(props, context) {
@@ -13273,6 +13296,11 @@ let crossListDragRowObj = null;
     const refFooterElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualBody = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refViewInnerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDragRowLineElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refMaps = {
@@ -13331,11 +13359,19 @@ let crossListDragRowObj = null;
     });
     const computeWrapperStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const rowHeight = computeRowHeight.value;
-      const style = {};
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      const stys = {};
       if (rowHeight) {
-        style['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
+        stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
       }
-      return style;
+      if (scrollbarYOpts.width) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width);
+      }
+      if (scrollbarXOpts.height) {
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height);
+      }
+      return stys;
     });
     const computeVirtualStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
@@ -13357,6 +13393,46 @@ let crossListDragRowObj = null;
       }
       return style;
     });
+    const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarXOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig);
+    });
+    const computeScrollbarYOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    });
+    const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        padding
+      } = scrollbarOpts;
+      const {
+        yThumbHeight,
+        xThumbWidth
+      } = reactData;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollbarXOpts.visible || 'visible'}`, `ov-y--${scrollbarYOpts.visible || 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
+        'is--padding': padding,
+        'ov-x--auto-hide': scrollbarXOpts.autoHide,
+        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    });
+    const computeScrollbarXToTop = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return scrollbarXOpts.position === 'top';
+    });
+    const computeScrollbarYToLeft = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return scrollbarYOpts.position === 'left';
+    });
     const dispatchEvent = (type, params, evnt) => {
       emit(type, createEvent(evnt, {
         $list: $xeList
@@ -13534,6 +13610,7 @@ let crossListDragRowObj = null;
         lastScrollLeft,
         lastScrollTop
       } = internalData;
+      updateScrollbar();
       return clearScroll().then(() => {
         if (lastScrollLeft || lastScrollTop) {
           internalData.lastScrollLeft = 0;
@@ -13542,6 +13619,10 @@ let crossListDragRowObj = null;
         }
       });
     };
+    const updateScrollbar = () => {
+      updateThumbSize();
+      updateThumbOffset();
+    };
     /**
      * 重新计算列表
      */
@@ -13559,6 +13640,7 @@ let crossListDragRowObj = null;
           parentHeight = parentEl.clientHeight - Math.ceil(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingLeft) + external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingRight));
         }
         reactData.parentHeight = parentHeight;
+        updateScrollbar();
         updateHeight();
         if (el.clientWidth && el.clientHeight) {
           return computeScrollLoad();
@@ -13596,6 +13678,7 @@ let crossListDragRowObj = null;
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
       const isY = scrollTop !== internalData.lastScrollTop;
+      updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -15102,6 +15185,183 @@ let crossListDragRowObj = null;
         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 {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = refVirtualWrapper.value;
+        if (!viewEl) {
+          return;
+        }
+        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($xeList, listMethods, listPrivateMethods);
     const renderDragTip = () => {
       const {
@@ -15336,7 +15596,8 @@ let crossListDragRowObj = null;
       const {
         showCheckbox,
         className,
-        loading
+        loading,
+        useScrollbar
       } = props;
       const {
         bodyHeight,
@@ -15368,6 +15629,9 @@ let crossListDragRowObj = null;
         padding
       } = rowOpts;
       const isDrag = computeIsDrag.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
       const showDefChekboxHead = showCheckbox && showHeader !== false;
       const leOns = {};
       if (isCrossListDrag && !rowList.length) {
@@ -15379,6 +15643,9 @@ let crossListDragRowObj = null;
           $list: $xeList
         }) : className : '', {
           [`size--${vSize}`]: vSize,
+          'is--virtual-scrollbar': useScrollbar,
+          'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
+          'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
           'is--drag': isDrag,
           'is--loading': loading
         }],
@@ -15426,16 +15693,53 @@ let crossListDragRowObj = null;
         style: {
           marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
         }
+      }, useScrollbar ? defaultSlot ? defaultSlot({
+        items: rowList,
+        $list: $xeList
+      }) : rowList.map((row, i) => renderRow(row, i)) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'vi',
+        ref: refViewInnerElem,
+        class: 'vxe-scrollbar--view-inner'
       }, defaultSlot ? defaultSlot({
         items: rowList,
         $list: $xeList
-      }) : rowList.map((row, i) => renderRow(row, i)))]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }) : rowList.map((row, i) => renderRow(row, i)))])]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refFooterElem,
         class: 'vxe-list--footer-wrapper'
       }, footerSlot({
         items: rowList,
         $list: $xeList
       })) : renderEmptyElement($xeList),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: scrollbarWrapperClss
+      }, [scrollbarXOpts.visible === 'hidden' ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), scrollbarYOpts.visible === 'hidden' ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })])]) : renderEmptyElement($xeList),
       /**
        * 拖拽提示
        */
@@ -15490,7 +15794,9 @@ let crossListDragRowObj = null;
       updateCheckboxModeValue();
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onActivated)(() => {
-      recalculate().then(() => refreshScroll());
+      recalculate().then(() => {
+        refreshScroll();
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
       loadData(props.data || []);
@@ -15499,7 +15805,9 @@ let crossListDragRowObj = null;
       const {
         showSeq,
         showRadio,
-        showCheckbox
+        showCheckbox,
+        autoResize,
+        useScrollbar
       } = props;
       const rowOpts = computeRowOpts.value;
       const {
@@ -15524,17 +15832,27 @@ let crossListDragRowObj = null;
       if (useKey && !keyField) {
         list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
       }
-      if (props.autoResize) {
+      if (useScrollbar || autoResize) {
         const el = refElem.value;
-        const resizeObserver = globalResize.create(() => recalculate());
+        const viewInnerEl = refViewInnerElem.value;
+        const resizeObserver = globalResize.create(() => {
+          reFlag.value++;
+        });
         resizeObserver.observe(el);
-        if (el) {
-          resizeObserver.observe(el.parentElement);
+        if (autoResize) {
+          if (el) {
+            resizeObserver.observe(el.parentElement);
+          }
+        }
+        if (viewInnerEl) {
+          resizeObserver.observe(viewInnerEl);
         }
         internalData.resizeObserver = resizeObserver;
       }
-      recalculate();
-      globalEvents.on($xeList, 'resize', recalculate);
+      reFlag.value++;
+      globalEvents.on($xeList, 'resize', () => {
+        reFlag.value++;
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {