vxe-pc-ui 3.19.8 → 3.20.0

package/lib/index.umd.js

@@ -13347,7 +13347,7 @@ var es_array_filter = __webpack_require__(2008);
 
 
 var log_log = VxeUI.log;
-var uiVersion = "ui v".concat("3.19.8");
+var uiVersion = "ui v".concat("3.20.0");
 function createComponentLog(name) {
   var tableVersion = VxeUI.tableVersion ? "table v".concat(VxeUI.tableVersion) : '';
   var ganttVersion = VxeUI.ganttVersion ? "gantt v".concat(VxeUI.ganttVersion) : '';
@@ -13367,7 +13367,7 @@ var errLog = log_log.create('error', uiVersion);
 
 
 
-var ui_version = "3.19.8";
+var ui_version = "3.20.0";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -16188,6 +16188,15 @@ var 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();
 }
@@ -22572,6 +22581,7 @@ function getItemCacheObj(item) {
 
 
 
+
 
 
 var list_createComponentLog = createComponentLog('tree'),
@@ -22607,6 +22617,9 @@ function list_createReactData() {
     updateCheckboxFlag: 1,
     isAllChecked: false,
     isAllIndeterminate: false,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
     insertRowFlag: 1,
     removeRowFlag: 1,
     dragRow: null,
@@ -22616,13 +22629,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,
@@ -22686,7 +22704,14 @@ function list_createInternalData() {
     dragConfig: Object,
     menuConfig: Object,
     virtualYConfig: Object,
-    scrollY: Object
+    scrollY: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().list.useScrollbar;
+      }
+    },
+    scrollbarConfig: Object
   },
   data: function data() {
     var xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
@@ -22755,11 +22780,19 @@ function list_createInternalData() {
     computeWrapperStyles: function computeWrapperStyles() {
       var $xeList = this;
       var rowHeight = $xeList.computeRowHeight;
-      var style = {};
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var 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;
     },
     computeVirtualStyles: function computeVirtualStyles() {
       var $xeList = this;
@@ -22779,6 +22812,50 @@ function list_createInternalData() {
         style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight));
       }
       return style;
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeList = this;
+      var props = $xeList;
+      return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarXOpts: function computeScrollbarXOpts() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig);
+    },
+    computeScrollbarYOpts: function computeScrollbarYOpts() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    },
+    computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var padding = scrollbarOpts.padding;
+      var yThumbHeight = reactData.yThumbHeight,
+        xThumbWidth = reactData.xThumbWidth;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var scrollbarXToTop = $xeList.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollbarXOpts.visible || 'visible'), "ov-y--".concat(scrollbarYOpts.visible || 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
+        'is--padding': padding,
+        'ov-x--auto-hide': scrollbarXOpts.autoHide,
+        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    },
+    computeScrollbarXToTop: function computeScrollbarXToTop() {
+      var $xeList = this;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return scrollbarXOpts.position === 'top';
+    },
+    computeScrollbarYToLeft: function computeScrollbarYToLeft() {
+      var $xeList = this;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return scrollbarYOpts.position === 'left';
     }
   }),
   methods: {
@@ -23117,6 +23194,11 @@ function list_createInternalData() {
         }
       });
     },
+    updateScrollbar: function updateScrollbar() {
+      var $xeList = this;
+      $xeList.updateThumbSize();
+      $xeList.updateThumbOffset();
+    },
     /**
      * 重新计算列表
      */
@@ -23136,6 +23218,7 @@ function list_createInternalData() {
           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;
+        $xeList.updateScrollbar();
         $xeList.updateHeight();
         if (el.clientWidth && el.clientHeight) {
           return $xeList.computeScrollLoad();
@@ -23174,6 +23257,7 @@ function list_createInternalData() {
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
       var isY = scrollTop !== internalData.lastScrollTop;
+      $xeList.updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -24533,6 +24617,189 @@ function list_createInternalData() {
         row: row
       }, evnt);
     },
+    // 滚动条
+    updateThumbSize: function updateThumbSize() {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var trackXEl = $xeList.$refs.refTrackXElem;
+      var xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      var thumbXElem = $xeList.$refs.refThumbXElem;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      var trackYEl = $xeList.$refs.refTrackYElem;
+      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      var thumbYElem = $xeList.$refs.refThumbYElem;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    },
+    updateThumbOffset: function updateThumbOffset() {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
+      var trackXEl = $xeList.$refs.refTrackXElem;
+      var thumbXElem = $xeList.$refs.refThumbXElem;
+      var 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(".concat(xThumbLeft, "px)");
+      }
+      var trackYEl = $xeList.$refs.refTrackYElem;
+      var thumbYElem = $xeList.$refs.refThumbYElem;
+      var 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(".concat(yThumbTop, "px)");
+      }
+    },
+    clickTrackXEvent: function clickTrackXEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    },
+    clickTrackYEvent: function clickTrackYEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    },
+    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeList.$refs.refVirtualWrapper;
+        if (!viewEl) {
+          return;
+        }
+        var xThumbWidth = reactData.xThumbWidth;
+        var _thumbEl = evnt.currentTarget;
+        var trackEl = _thumbEl.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    },
+    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
+      var $xeList = this;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    },
+    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
+      var $xeList = this;
+      var reactData = $xeList.reactData;
+      var internalData = $xeList.internalData;
+      var thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeList.$refs.refVirtualWrapper;
+        if (!viewEl) {
+          return;
+        }
+        var yThumbHeight = reactData.yThumbHeight;
+        var _thumbEl2 = evnt.currentTarget;
+        var trackEl = _thumbEl2.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    },
     //
     // Render
     //
@@ -24769,7 +25036,8 @@ function list_createInternalData() {
       var slots = $xeList.$scopedSlots;
       var showCheckbox = props.showCheckbox,
         className = props.className,
-        loading = props.loading;
+        loading = props.loading,
+        useScrollbar = props.useScrollbar;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         rowList = reactData.rowList,
@@ -24789,6 +25057,10 @@ function list_createInternalData() {
       var rowOpts = $xeList.computeRowOpts;
       var isHover = rowOpts.isHover,
         padding = rowOpts.padding;
+      var isDrag = $xeList.computeIsDrag;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss;
       var showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
       var leOns = {};
       if (isCrossListDrag && !rowList.length) {
@@ -24798,7 +25070,7 @@ function list_createInternalData() {
         ref: 'refElem',
         class: ['vxe-list', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
           $list: $xeList
-        }) : className : '', _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--loading', loading)],
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(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)],
         on: leOns,
         style: wrapperStyles
       }, [headerSlot || showDefChekboxHead ? h('div', {
@@ -24845,18 +25117,65 @@ function list_createInternalData() {
         style: {
           marginTop: topSpaceHeight ? "".concat(topSpaceHeight, "px") : ''
         }
+      }, useScrollbar ? defaultSlot ? defaultSlot({
+        items: rowList,
+        $list: $xeList
+      }) : rowList.map(function (row, i) {
+        return $xeList.renderRow(h, row, i);
+      }) : [h('div', {
+        key: 'vi',
+        ref: 'refViewInnerElem',
+        class: 'vxe-scrollbar--view-inner'
       }, defaultSlot ? defaultSlot({
         items: rowList,
         $list: $xeList
       }) : rowList.map(function (row, i) {
         return $xeList.renderRow(h, row, i);
-      }))]), footerSlot ? h('div', {
+      }))])]), footerSlot ? h('div', {
         ref: 'refFooterElem',
         class: 'vxe-list--footer-wrapper'
       }, footerSlot({
         items: rowList,
         $list: $xeList
       })) : renderEmptyElement($xeList),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? h('div', {
+        class: scrollbarWrapperClss
+      }, [scrollbarXOpts.visible === 'hidden' ? renderEmptyElement($xeList) : h('div', {
+        ref: 'refTrackXElem',
+        class: 'vxe-scrollbar--track-x',
+        on: {
+          click: $xeList.clickTrackXEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbXElem',
+        class: 'vxe-scrollbar--thumb-x',
+        on: {
+          pointerdown: $xeList.pointerdownThumbXEvent,
+          pointermove: $xeList.pointermoveThumbXEvent,
+          pointerup: $xeList.cleatPointerThumbEvent,
+          pointercancel: $xeList.cleatPointerThumbEvent,
+          lostpointercapture: $xeList.cleatPointerThumbEvent
+        }
+      })]), scrollbarYOpts.visible === 'hidden' ? renderEmptyElement($xeList) : h('div', {
+        ref: 'refTrackYElem',
+        class: 'vxe-scrollbar--track-y',
+        on: {
+          click: $xeList.clickTrackYEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbYElem',
+        class: 'vxe-scrollbar--thumb-y',
+        on: {
+          pointerdown: $xeList.pointerdownThumbYEvent,
+          pointermove: $xeList.pointermoveThumbYEvent,
+          pointerup: $xeList.cleatPointerThumbEvent,
+          pointercancel: $xeList.cleatPointerThumbEvent,
+          lostpointercapture: $xeList.cleatPointerThumbEvent
+        }
+      })])]) : renderEmptyElement($xeList),
       /**
        * 拖拽提示
        */
@@ -24922,7 +25241,9 @@ function list_createInternalData() {
     var internalData = $xeList.internalData;
     var showSeq = props.showSeq,
       showRadio = props.showRadio,
-      showCheckbox = props.showCheckbox;
+      showCheckbox = props.showCheckbox,
+      autoResize = props.autoResize,
+      useScrollbar = props.useScrollbar;
     var rowOpts = $xeList.computeRowOpts;
     var useKey = rowOpts.useKey,
       keyField = rowOpts.keyField;
@@ -24944,24 +25265,32 @@ function list_createInternalData() {
     if (useKey && !keyField) {
       list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
     }
-    if (props.autoResize) {
+    if (useScrollbar || autoResize) {
       var el = $xeList.$refs.refElem;
+      var viewInnerEl = $xeList.$refs.refViewInnerElem;
       var resizeObserver = globalResize.create(function () {
-        return $xeList.recalculate();
+        $xeList.reFlag++;
       });
       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;
     }
-    $xeList.recalculate();
-    globalEvents.on($xeList, 'resize', $xeList.recalculate);
+    $xeList.reFlag++;
+    globalEvents.on($xeList, 'resize', function () {
+      $xeList.reFlag++;
+    });
   },
   activated: function activated() {
     var $xeList = this;
     $xeList.recalculate().then(function () {
-      return $xeList.refreshScroll();
+      $xeList.refreshScroll();
     });
   },
   beforeDestroy: function beforeDestroy() {