vxe-pc-ui 4.19.7 → 4.20.0

package/lib/list/src/list.js

@@ -13,7 +13,8 @@ var _dom = require("../../ui/src/dom");
 var _utils = require("../../ui/src/utils");
 var _log = require("../../ui/src/log");
 var _anime = require("../../ui/src/anime");
-var _util = require("./util");
+var _util = require("../../scrollbar/src/util");
+var _util2 = require("./util");
 var _loading = _interopRequireDefault(require("../../loading"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
@@ -46,6 +47,9 @@ function createReactData() {
     updateCheckboxFlag: 1,
     isAllChecked: false,
     isAllIndeterminate: false,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
     insertRowFlag: 1,
     removeRowFlag: 1,
     dragRow: null,
@@ -55,13 +59,18 @@ function createReactData() {
 }
 function 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,
@@ -115,7 +124,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     dragConfig: Object,
     menuConfig: Object,
     virtualYConfig: Object,
-    scrollY: Object
+    scrollY: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => (0, _ui.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) {
@@ -136,6 +150,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refFooterElem = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
+    const refViewInnerElem = (0, _vue.ref)();
+    const refTrackXElem = (0, _vue.ref)();
+    const refTrackYElem = (0, _vue.ref)();
+    const refThumbXElem = (0, _vue.ref)();
+    const refThumbYElem = (0, _vue.ref)();
     const refDragRowLineElem = (0, _vue.ref)();
     const refDragTipElem = (0, _vue.ref)();
     const refMaps = {
@@ -194,11 +213,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     });
     const computeWrapperStyles = (0, _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'] = (0, _dom.toCssUnit)(rowHeight);
+        stys['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
       }
-      return style;
+      if (scrollbarYOpts.width) {
+        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(scrollbarYOpts.width);
+      }
+      if (scrollbarXOpts.height) {
+        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(scrollbarXOpts.height);
+      }
+      return stys;
     });
     const computeVirtualStyles = (0, _vue.computed)(() => {
       const {
@@ -220,6 +247,46 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return style;
     });
+    const computeScrollbarOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().list.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarXOpts = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, (0, _ui.getConfig)().scrollbar.xConfig, scrollbarOpts.xConfig);
+    });
+    const computeScrollbarYOpts = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, (0, _ui.getConfig)().scrollbar.yConfig, scrollbarOpts.yConfig);
+    });
+    const computeScrollbarWrapperClss = (0, _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 _ui.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, _vue.computed)(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return scrollbarXOpts.position === 'top';
+    });
+    const computeScrollbarYToLeft = (0, _vue.computed)(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return scrollbarYOpts.position === 'left';
+    });
     const dispatchEvent = (type, params, evnt) => {
       emit(type, (0, _ui.createEvent)(evnt, {
         $list: $xeList
@@ -397,6 +464,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         lastScrollLeft,
         lastScrollTop
       } = internalData;
+      updateScrollbar();
       return clearScroll().then(() => {
         if (lastScrollLeft || lastScrollTop) {
           internalData.lastScrollLeft = 0;
@@ -405,19 +473,28 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       });
     };
+    const updateScrollbar = () => {
+      updateThumbSize();
+      updateThumbOffset();
+    };
     /**
      * 重新计算列表
      */
     const recalculate = () => {
       const el = refElem.value;
       if (el) {
-        const parentEl = el.parentElement;
+        let parentEl = el.parentElement;
         let parentHeight = 0;
+        // 如果是虚拟滚动条
+        if (parentEl && (0, _dom.hasClass)(parentEl, 'vxe-scrollbar--view-inner')) {
+          parentEl = parentEl.parentElement;
+        }
         if (parentEl) {
           const parentStyle = getComputedStyle(parentEl);
           parentHeight = parentEl.clientHeight - Math.ceil(_xeUtils.default.toNumber(parentStyle.paddingLeft) + _xeUtils.default.toNumber(parentStyle.paddingRight));
         }
         reactData.parentHeight = parentHeight;
+        updateScrollbar();
         updateHeight();
         if (el.clientWidth && el.clientHeight) {
           return computeScrollLoad();
@@ -455,6 +532,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
       const isY = scrollTop !== internalData.lastScrollTop;
+      updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -1442,7 +1520,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const funcName = isAppend ? 'push' : 'unshift';
       newRecords.forEach(item => {
         const rowid = getRowIdByField(item, keyField);
-        const rowRest = (0, _util.getItemCacheObj)(item);
+        const rowRest = (0, _util2.getItemCacheObj)(item);
         fullData[funcName](item);
         rowMaps[rowid] = rowRest;
       });
@@ -1489,7 +1567,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           if (rowIndex > -1) {
             newRecords.forEach(item => {
               const rowid = getRowIdByField(item, keyField);
-              const rowRest = (0, _util.getItemCacheObj)(item);
+              const rowRest = (0, _util2.getItemCacheObj)(item);
               rowMaps[rowid] = rowRest;
             });
             let targetIndex = rowIndex;
@@ -1961,6 +2039,183 @@ 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 ? (0, _util.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 ? (0, _util.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 ? (0, _util.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 ? (0, _util.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: (0, _util.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: (0, _util.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 = (0, _util.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 = (0, _util.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 = (0, _util.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 = (0, _util.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    };
     Object.assign($xeList, listMethods, listPrivateMethods);
     const renderDragTip = () => {
       const {
@@ -2193,7 +2448,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         showCheckbox,
         className,
-        loading
+        loading,
+        useScrollbar
       } = props;
       const {
         bodyHeight,
@@ -2225,6 +2481,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         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) {
@@ -2236,6 +2495,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           $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
         }],
@@ -2282,16 +2544,53 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         style: {
           marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
         }
+      }, useScrollbar ? defaultSlot ? defaultSlot({
+        items: rowList,
+        $list: $xeList
+      }) : rowList.map((row, i) => renderRow(row, i)) : [(0, _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, _vue.h)('div', {
+      }) : rowList.map((row, i) => renderRow(row, i)))])]), footerSlot ? (0, _vue.h)('div', {
         ref: refFooterElem,
         class: 'vxe-list--footer-wrapper'
       }, footerSlot({
         items: rowList,
         $list: $xeList
       })) : (0, _ui.renderEmptyElement)($xeList),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? (0, _vue.h)('div', {
+        class: scrollbarWrapperClss
+      }, [scrollbarXOpts.visible === 'hidden' ? (0, _ui.renderEmptyElement)($xeList) : (0, _vue.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), scrollbarYOpts.visible === 'hidden' ? (0, _ui.renderEmptyElement)($xeList) : (0, _vue.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })])]) : (0, _ui.renderEmptyElement)($xeList),
       /**
        * 拖拽提示
        */
@@ -2346,7 +2645,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       updateCheckboxModeValue();
     });
     (0, _vue.onActivated)(() => {
-      recalculate().then(() => refreshScroll());
+      recalculate().then(() => {
+        refreshScroll();
+      });
     });
     (0, _vue.nextTick)(() => {
       loadData(props.data || []);
@@ -2355,7 +2656,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         showSeq,
         showRadio,
-        showCheckbox
+        showCheckbox,
+        autoResize,
+        useScrollbar
       } = props;
       const rowOpts = computeRowOpts.value;
       const {
@@ -2380,17 +2683,27 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (useKey && !keyField) {
         errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
       }
-      if (props.autoResize) {
+      if (useScrollbar || autoResize) {
         const el = refElem.value;
-        const resizeObserver = _ui.globalResize.create(() => recalculate());
+        const viewInnerEl = refViewInnerElem.value;
+        const resizeObserver = _ui.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();
-      _ui.globalEvents.on($xeList, 'resize', recalculate);
+      reFlag.value++;
+      _ui.globalEvents.on($xeList, 'resize', () => {
+        reFlag.value++;
+      });
     });
     (0, _vue.onBeforeUnmount)(() => {
       const {