vxe-pc-ui 3.18.21 → 3.18.23

package/lib/scrollbar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeScrollbar = exports.Scrollbar = void 0;
+var _core = require("@vxe-ui/core");
+var _scrollbar = _interopRequireDefault(require("./src/scrollbar"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var VxeScrollbar = exports.VxeScrollbar = Object.assign({}, _scrollbar.default, {
+  install: function install(app) {
+    app.component(_scrollbar.default.name, _scrollbar.default);
+  }
+});
+_dynamics.dynamicApp.use(VxeScrollbar);
+_core.VxeUI.component(_scrollbar.default);
+var Scrollbar = exports.Scrollbar = VxeScrollbar;
+var _default = exports.default = VxeScrollbar;

package/lib/scrollbar/index.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeScrollbar=exports.Scrollbar=void 0;var _core=require("@vxe-ui/core"),_scrollbar=_interopRequireDefault(require("./src/scrollbar")),_dynamics=require("../dynamics");function _interopRequireDefault(r){return r&&r.__esModule?r:{default:r}}var VxeScrollbar=exports.VxeScrollbar=Object.assign({},_scrollbar.default,{install:function(r){r.component(_scrollbar.default.name,_scrollbar.default)}}),Scrollbar=(_dynamics.dynamicApp.use(VxeScrollbar),_core.VxeUI.component(_scrollbar.default),exports.Scrollbar=VxeScrollbar),_default=exports.default=VxeScrollbar;

package/lib/scrollbar/src/scrollbar.js

@@ -0,0 +1,584 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _util = require("./util");
+var _loading = _interopRequireDefault(require("../../loading"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var getConfig = _ui.VxeUI.getConfig,
+  createEvent = _ui.VxeUI.createEvent,
+  domUtils = _ui.VxeUI.domUtils,
+  globalResize = _ui.VxeUI.globalResize,
+  renderEmptyElement = _ui.VxeUI.renderEmptyElement;
+function createReactData() {
+  return {
+    yThumbHeight: 0,
+    xThumbWidth: 0
+  };
+}
+function createInternalData() {
+  return {
+    // resizeObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
+    lastScrollTop: 0,
+    lastScrollLeft: 0
+  };
+}
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeScrollbar',
+  props: {
+    width: [String, Number],
+    height: [String, Number],
+    minWidth: [String, Number],
+    minHeight: [String, Number],
+    maxWidth: [String, Number],
+    maxHeight: [String, Number],
+    loading: Boolean,
+    native: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().scrollbar.native;
+      }
+    },
+    xConfig: Object,
+    yConfig: Object,
+    className: String,
+    viewClassName: String,
+    autoResize: {
+      type: Boolean,
+      default: function _default() {
+        return getConfig().scrollbar.autoResize;
+      }
+    },
+    syncResize: [Boolean, String, Number]
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
+      xID: xID,
+      reactData: reactData,
+      reFlag: 0
+    });
+  },
+  computed: {
+    computeWrapperStyle: function computeWrapperStyle() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var width = props.width,
+        height = props.height,
+        minWidth = props.minWidth,
+        minHeight = props.minHeight,
+        maxWidth = props.maxWidth,
+        maxHeight = props.maxHeight;
+      var xOpts = $xeScrollbar.computeXOpts;
+      var yOpts = $xeScrollbar.computeYOpts;
+      var stys = {};
+      if (width) {
+        stys.width = (0, _dom.toCssUnit)(width);
+      }
+      if (height) {
+        stys.height = (0, _dom.toCssUnit)(height);
+      }
+      if (minWidth) {
+        stys.minWidth = (0, _dom.toCssUnit)(minWidth);
+      }
+      if (minHeight) {
+        stys.minHeight = (0, _dom.toCssUnit)(minHeight);
+      }
+      if (maxWidth) {
+        stys.maxWidth = (0, _dom.toCssUnit)(maxWidth);
+      }
+      if (maxHeight) {
+        stys.maxHeight = (0, _dom.toCssUnit)(maxHeight);
+      }
+      if (yOpts.width) {
+        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(yOpts.width);
+      }
+      if (xOpts.height) {
+        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(xOpts.height);
+      }
+      return stys;
+    },
+    computeWrapperClss: function computeWrapperClss() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var native = props.native,
+        className = props.className;
+      var xOpts = $xeScrollbar.computeXOpts;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return domUtils.buildClass(['vxe-scrollbar', "ov-x--".concat(xOpts.visible || 'visible'), "ov-y--".concat(yOpts.visible || 'visible'), native ? 'is--native' : 'is--virtual', className], {
+        'ov-x--auto-hide': xOpts.autoHide,
+        'ov-y--auto-hide': yOpts.autoHide
+      });
+    },
+    computeViewClss: function computeViewClss() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var viewClassName = props.viewClassName;
+      return domUtils.buildClass(['vxe-scrollbar--view', viewClassName]);
+    },
+    computeXOpts: function computeXOpts() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
+    },
+    computeYOpts: function computeYOpts() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      return Object.assign({}, getConfig().scrollbar.yConfig, props.yConfig);
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeScrollbar = this;
+      $xeScrollbar.$emit(type, createEvent(evnt, {
+        $scrollbar: $xeScrollbar
+      }, params));
+    },
+    scrollTo: function scrollTo(left, top) {
+      var $xeScrollbar = this;
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (viewEl) {
+        if (_xeUtils.default.isNumber(left)) {
+          viewEl.scrollTo(left, top || 0);
+        } else {
+          viewEl.scrollTo(left);
+        }
+      }
+    },
+    scrollIntoView: function scrollIntoView() {
+      var $xeScrollbar = this;
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (viewEl) {
+        viewEl.scrollIntoView();
+      }
+    },
+    recalculate: function recalculate() {
+      var $xeScrollbar = this;
+      $xeScrollbar.updateThumbSize();
+      $xeScrollbar.updateThumbOffset();
+      return $xeScrollbar.$nextTick();
+    },
+    updateThumbSize: function updateThumbSize() {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (!viewEl) {
+        return;
+      }
+      var trackXEl = $xeScrollbar.$refs.refTrackXElem;
+      var xThumbWidth = trackXEl ? (0, _util.getThumbSize)(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      var thumbXElem = $xeScrollbar.$refs.refThumbXElem;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      var trackYEl = $xeScrollbar.$refs.refTrackYElem;
+      var yThumbHeight = trackYEl ? (0, _util.getThumbSize)(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    },
+    updateThumbOffset: function updateThumbOffset() {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var internalData = $xeScrollbar.internalData;
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
+      var trackXEl = $xeScrollbar.$refs.refTrackXElem;
+      var thumbXElem = $xeScrollbar.$refs.refThumbXElem;
+      var 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(".concat(xThumbLeft, "px)");
+      }
+      var trackYEl = $xeScrollbar.$refs.refTrackYElem;
+      var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
+      var 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(".concat(yThumbTop, "px)");
+      }
+    },
+    scrollEvent: function scrollEvent(evnt) {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var internalData = $xeScrollbar.internalData;
+      var xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
+      var lastScrollTop = internalData.lastScrollTop,
+        lastScrollLeft = internalData.lastScrollLeft;
+      var xOpts = $xeScrollbar.computeXOpts;
+      var yOpts = $xeScrollbar.computeYOpts;
+      var viewEl = evnt.currentTarget;
+      var scrollTop = viewEl.scrollTop,
+        scrollLeft = viewEl.scrollLeft,
+        clientWidth = viewEl.clientWidth,
+        clientHeight = viewEl.clientHeight,
+        scrollHeight = viewEl.scrollHeight,
+        scrollWidth = viewEl.scrollWidth;
+      var direction = '';
+      var isTopBoundary = false;
+      var isBottomBoundary = false;
+      var isLeftBoundary = false;
+      var isRightBoundary = false;
+      if (lastScrollTop !== scrollTop) {
+        var yThreshold = _xeUtils.default.toNumber(yOpts.threshold) || 1;
+        if (lastScrollTop < scrollTop) {
+          direction = 'bottom';
+          if (yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight - yThreshold) {
+            isBottomBoundary = true;
+          }
+        } else {
+          direction = 'top';
+          if (yThumbHeight > 0 && scrollTop <= yThreshold) {
+            isTopBoundary = true;
+          }
+        }
+      }
+      if (lastScrollLeft !== scrollLeft) {
+        var xThreshold = _xeUtils.default.toNumber(xOpts.threshold) || 1;
+        if (lastScrollLeft < scrollLeft) {
+          direction = 'right';
+          if (xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth - xThreshold) {
+            isRightBoundary = true;
+          }
+        } else {
+          direction = 'left';
+          if (xThumbWidth > 0 && scrollLeft <= xThreshold) {
+            isLeftBoundary = true;
+          }
+        }
+      }
+      $xeScrollbar.updateThumbOffset();
+      internalData.lastScrollTop = scrollTop;
+      internalData.lastScrollLeft = scrollLeft;
+      if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+        $xeScrollbar.dispatchEvent('scroll-boundary', {
+          direction: direction,
+          isTop: isTopBoundary,
+          isBottom: isBottomBoundary,
+          isLeft: isLeftBoundary,
+          isRight: isRightBoundary,
+          scrollTop: scrollTop,
+          scrollLeft: scrollLeft,
+          clientWidth: clientWidth,
+          clientHeight: clientHeight,
+          scrollHeight: scrollHeight,
+          scrollWidth: scrollWidth
+        }, evnt);
+      }
+      $xeScrollbar.dispatchEvent('scroll', {
+        direction: direction,
+        isTop: yThumbHeight > 0 && scrollTop <= 0,
+        isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
+        isLeft: xThumbWidth > 0 && scrollLeft <= 0,
+        isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
+        scrollTop: scrollTop,
+        scrollLeft: scrollLeft,
+        clientWidth: clientWidth,
+        clientHeight: clientHeight,
+        scrollHeight: scrollHeight,
+        scrollWidth: scrollWidth
+      }, evnt);
+    },
+    clickTrackXEvent: function clickTrackXEvent(evnt) {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: (0, _util.getScrollFromClick)(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    },
+    clickTrackYEvent: function clickTrackYEvent(evnt) {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: (0, _util.getScrollFromClick)(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    },
+    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var internalData = $xeScrollbar.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var internalData = $xeScrollbar.internalData;
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeScrollbar.$refs.refViewElem;
+        if (!viewEl) {
+          return;
+        }
+        var xThumbWidth = reactData.xThumbWidth;
+        var thumbEl = evnt.currentTarget;
+        var trackEl = thumbEl.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = (0, _util.getScrollFromDrag)(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    },
+    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
+      var $xeScrollbar = this;
+      var internalData = $xeScrollbar.internalData;
+      var thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    },
+    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var internalData = $xeScrollbar.internalData;
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
+      var $xeScrollbar = this;
+      var reactData = $xeScrollbar.reactData;
+      var internalData = $xeScrollbar.internalData;
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeScrollbar.$refs.refViewElem;
+        if (!viewEl) {
+          return;
+        }
+        var yThumbHeight = reactData.yThumbHeight;
+        var thumbEl = evnt.currentTarget;
+        var trackEl = thumbEl.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = (0, _util.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    },
+    //
+    // Render
+    //
+    renderVN: function renderVN(h) {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var slots = $xeScrollbar.$scopedSlots;
+      var native = props.native,
+        loading = props.loading,
+        autoResize = props.autoResize;
+      var wrapperStyle = $xeScrollbar.computeWrapperStyle;
+      var wrapperClss = $xeScrollbar.computeWrapperClss;
+      var viewClss = $xeScrollbar.computeViewClss;
+      var xOpts = $xeScrollbar.computeXOpts;
+      var yOpts = $xeScrollbar.computeYOpts;
+      var defaultSlot = slots.default;
+      return h('div', {
+        ref: 'refElem',
+        class: wrapperClss,
+        style: wrapperStyle
+      }, [h('div', {
+        ref: 'refViewElem',
+        class: viewClss,
+        on: {
+          scroll: $xeScrollbar.scrollEvent
+        }
+      }, [h('div', {
+        ref: 'refViewInnerElem',
+        class: 'vxe-scrollbar--view-inner'
+      }, autoResize ? [h('div', {
+        key: 'vi',
+        ref: 'refViewInnerElem',
+        class: 'vxe-scrollbar--view-inner'
+      }, defaultSlot ? defaultSlot({}) : [])] : defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : h('div', {
+        ref: 'refTrackXElem',
+        class: 'vxe-scrollbar--track-x',
+        on: {
+          click: $xeScrollbar.clickTrackXEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbXElem',
+        class: 'vxe-scrollbar--thumb-x',
+        on: {
+          pointerdown: $xeScrollbar.pointerdownThumbXEvent,
+          pointermove: $xeScrollbar.pointermoveThumbXEvent,
+          pointerup: $xeScrollbar.cleatPointerThumbEvent,
+          pointercancel: $xeScrollbar.cleatPointerThumbEvent,
+          lostpointercapture: $xeScrollbar.cleatPointerThumbEvent
+        }
+      })]), native || yOpts.visible === 'hidden' ? renderEmptyElement($xeScrollbar) : h('div', {
+        ref: 'refTrackYElem',
+        class: 'vxe-scrollbar--track-y',
+        on: {
+          click: $xeScrollbar.clickTrackYEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbYElem',
+        class: 'vxe-scrollbar--thumb-y',
+        on: {
+          pointerdown: $xeScrollbar.pointerdownThumbYEvent,
+          pointermove: $xeScrollbar.pointermoveThumbYEvent,
+          pointerup: $xeScrollbar.cleatPointerThumbEvent,
+          pointercancel: $xeScrollbar.cleatPointerThumbEvent,
+          lostpointercapture: $xeScrollbar.cleatPointerThumbEvent
+        }
+      })]), h(_loading.default, {
+        class: 'vxe-scrollbar--loading',
+        props: {
+          value: loading
+        }
+      })]);
+    }
+  },
+  watch: {
+    height: function height() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    width: function width() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    minHeight: function minHeight() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    minWidth: function minWidth() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    maxHeight: function maxHeight() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    maxWidth: function maxWidth() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    native: function native() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    syncResize: function syncResize() {
+      var $xeScrollbar = this;
+      $xeScrollbar.reFlag++;
+    },
+    reFlag: function reFlag() {
+      var $xeScrollbar = this;
+      $xeScrollbar.recalculate().then(function () {
+        $xeScrollbar.recalculate();
+      });
+    }
+  },
+  created: function created() {
+    var $xeScrollbar = this;
+    $xeScrollbar.internalData = createInternalData();
+  },
+  mounted: function mounted() {
+    var $xeScrollbar = this;
+    var props = $xeScrollbar;
+    var internalData = $xeScrollbar.internalData;
+    var autoResize = props.autoResize;
+    var viewEl = $xeScrollbar.$refs.refViewElem;
+    var viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
+    if (autoResize) {
+      var resizeObserver = globalResize.create(function () {
+        if (props.autoResize) {
+          $xeScrollbar.reFlag++;
+        }
+      });
+      if (viewEl) {
+        resizeObserver.observe(viewEl);
+      }
+      if (viewInnerEl) {
+        resizeObserver.observe(viewInnerEl);
+      }
+      internalData.resizeObserver = resizeObserver;
+    }
+    $xeScrollbar.reFlag++;
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeScrollbar = this;
+    var internalData = $xeScrollbar.internalData;
+    var resizeObserver = internalData.resizeObserver;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    }
+  },
+  destroyed: function destroyed() {
+    var $xeScrollbar = this;
+    var reactData = $xeScrollbar.reactData;
+    var internalData = $xeScrollbar.internalData;
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */

package/lib/scrollbar/src/scrollbar.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var getConfig=_ui.VxeUI.getConfig,createEvent=_ui.VxeUI.createEvent,domUtils=_ui.VxeUI.domUtils,globalResize=_ui.VxeUI.globalResize,renderEmptyElement=_ui.VxeUI.renderEmptyElement;function createReactData(){return{yThumbHeight:0,xThumbWidth:0}}function createInternalData(){return{thumbDragOffset:0,yThumbTop:0,xThumbLeft:0,lastScrollTop:0,lastScrollLeft:0}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeScrollbar",props:{width:[String,Number],height:[String,Number],minWidth:[String,Number],minHeight:[String,Number],maxWidth:[String,Number],maxHeight:[String,Number],loading:Boolean,native:{type:Boolean,default:function(){return getConfig().scrollbar.native}},xConfig:Object,yConfig:Object,className:String,viewClassName:String,autoResize:{type:Boolean,default:function(){return getConfig().scrollbar.autoResize}},syncResize:[Boolean,String,Number]},data:function(){var e=_xeUtils.default.uniqueId(),t=createReactData();return Object.assign(Object.assign({},{}),{xID:e,reactData:t,reFlag:0})},computed:{computeWrapperStyle:function(){var e=this,t=e.width,i=e.height,r=e.minWidth,l=e.minHeight,n=e.maxWidth,a=e.maxHeight,o=e.computeXOpts,e=e.computeYOpts,s={};return t&&(s.width=(0,_dom.toCssUnit)(t)),i&&(s.height=(0,_dom.toCssUnit)(i)),r&&(s.minWidth=(0,_dom.toCssUnit)(r)),l&&(s.minHeight=(0,_dom.toCssUnit)(l)),n&&(s.maxWidth=(0,_dom.toCssUnit)(n)),a&&(s.maxHeight=(0,_dom.toCssUnit)(a)),e.width&&(s["--vxe-ui-scrollbar-y-width"]=(0,_dom.toCssUnit)(e.width)),o.height&&(s["--vxe-ui-scrollbar-x-height"]=(0,_dom.toCssUnit)(o.height)),s},computeWrapperClss:function(){var e=this,t=e.native,i=e.className,r=e.computeXOpts,e=e.computeYOpts;return domUtils.buildClass(["vxe-scrollbar","ov-x--".concat(r.visible||"visible"),"ov-y--".concat(e.visible||"visible"),t?"is--native":"is--virtual",i],{"ov-x--auto-hide":r.autoHide,"ov-y--auto-hide":e.autoHide})},computeViewClss:function(){var e=this.viewClassName;return domUtils.buildClass(["vxe-scrollbar--view",e])},computeXOpts:function(){return Object.assign({},getConfig().scrollbar.xConfig,this.xConfig)},computeYOpts:function(){return Object.assign({},getConfig().scrollbar.yConfig,this.yConfig)}},methods:{dispatchEvent:function(e,t,i){this.$emit(e,createEvent(i,{$scrollbar:this},t))},scrollTo:function(e,t){var i=this.$refs.refViewElem;i&&(_xeUtils.default.isNumber(e)?i.scrollTo(e,t||0):i.scrollTo(e))},scrollIntoView:function(){var e=this.$refs.refViewElem;e&&e.scrollIntoView()},recalculate:function(){var e=this;return e.updateThumbSize(),e.updateThumbOffset(),e.$nextTick()},updateThumbSize:function(){var e,t,i=this,r=i.reactData,l=i.$refs.refViewElem;l&&(t=(t=i.$refs.refTrackXElem)?(0,_util.getThumbSize)(l.clientWidth,l.scrollWidth,t.clientWidth):0,(e=i.$refs.refThumbXElem)&&(e.style.width=t+"px"),r.xThumbWidth=t,t=(e=i.$refs.refTrackYElem)?(0,_util.getThumbSize)(l.clientHeight,l.scrollHeight,e.clientHeight):0,(l=i.$refs.refThumbYElem)&&(l.style.height=t+"px"),r.yThumbHeight=t)},updateThumbOffset:function(){var e,t,i,r=this,l=r.reactData,n=r.internalData,a=r.$refs.refViewElem;a&&(e=l.xThumbWidth,l=l.yThumbHeight,i=r.$refs.refTrackXElem,t=r.$refs.refThumbXElem,i=i&&e?(0,_util.getThumbOffsetSize)(a.scrollLeft,a.clientWidth,a.scrollWidth,i.clientWidth,e):0,n.xThumbLeft=i,t&&e&&(t.style.width=e+"px",t.style.transform="translateX(".concat(i,"px)")),e=r.$refs.refTrackYElem,t=r.$refs.refThumbYElem,i=e&&l?(0,_util.getThumbOffsetSize)(a.scrollTop,a.clientHeight,a.scrollHeight,e.clientHeight,l):0,n.yThumbTop=i,t)&&l&&(t.style.height=l+"px",t.style.transform="translateY(".concat(i,"px)"))},scrollEvent:function(e){var t,i=this,r=i.reactData,l=i.internalData,n=r.xThumbWidth,r=r.yThumbHeight,a=l.lastScrollTop,o=l.lastScrollLeft,s=i.computeXOpts,c=e.currentTarget,u=c.scrollTop,h=c.scrollLeft,m=c.clientWidth,f=c.clientHeight,d=c.scrollHeight,c=c.scrollWidth,g="",p=!1,b=!1,v=!1,T=!1;a!==u&&(t=_xeUtils.default.toNumber(i.computeYOpts.threshold)||1,a<u?(g="bottom",0<r&&d-t<=u+f&&(b=!0)):(g="top",0<r&&u<=t&&(p=!0))),o!==h&&(a=_xeUtils.default.toNumber(s.threshold)||1,o<h?(g="right",0<n&&c-a<=h+m&&(T=!0)):(g="left",0<n&&h<=a&&(v=!0))),i.updateThumbOffset(),l.lastScrollTop=u,l.lastScrollLeft=h,(b||p||T||v)&&i.dispatchEvent("scroll-boundary",{direction:g,isTop:p,isBottom:b,isLeft:v,isRight:T,scrollTop:u,scrollLeft:h,clientWidth:m,clientHeight:f,scrollHeight:d,scrollWidth:c},e),i.dispatchEvent("scroll",{direction:g,isTop:0<r&&u<=0,isBottom:0<r&&d<=u+f,isLeft:0<n&&h<=0,isRight:0<n&&c<=h+m,scrollTop:u,scrollLeft:h,clientWidth:m,clientHeight:f,scrollHeight:d,scrollWidth:c},e)},clickTrackXEvent:function(e){var t,i,r=this.reactData,l=e.currentTarget;l===e.target&&(t=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=l.getBoundingClientRect(),t.scrollTo({left:(0,_util.getScrollFromClick)(e.clientX-i.left,t.clientWidth,t.scrollWidth,l.clientWidth,r),behavior:"auto"}))},clickTrackYEvent:function(e){var t,i,r=this.reactData,l=e.currentTarget;l===e.target&&(t=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=l.getBoundingClientRect(),t.scrollTo({top:(0,_util.getScrollFromClick)(e.clientY-i.top,t.clientHeight,t.scrollHeight,l.clientHeight,r),behavior:"auto"}))},pointerdownThumbXEvent:function(e){var t,i=this.reactData,r=this.internalData,l=e.currentTarget,n=(r.isThumbDrag=!0,l.setPointerCapture(e.pointerId),this.$refs.refViewElem);n&&(i=i.xThumbWidth,t=(l=l.parentElement).getBoundingClientRect(),e=e.clientX-t.left,t=(0,_util.getThumbOffsetSize)(n.scrollLeft,n.clientWidth,n.scrollWidth,l.clientWidth,i),r.thumbDragOffset=e-t)},pointermoveThumbXEvent:function(e){var t,i,r=this.reactData,l=this.internalData,n=l.isThumbDrag,l=l.thumbDragOffset;n&&(n=this.$refs.refViewElem)&&(r=r.xThumbWidth,i=(t=e.currentTarget.parentElement).getBoundingClientRect(),n.scrollLeft=(0,_util.getScrollFromDrag)(e.clientX-i.left,l,n.clientWidth,n.scrollWidth,t.clientWidth,r))},cleatPointerThumbEvent:function(e){var t=this.internalData;e.currentTarget.releasePointerCapture(e.pointerId),t.isThumbDrag=!1},pointerdownThumbYEvent:function(e){var t,i=this.reactData,r=this.internalData,l=e.currentTarget,n=(r.isThumbDrag=!0,l.setPointerCapture(e.pointerId),this.$refs.refViewElem);n&&(i=i.yThumbHeight,t=(l=l.parentElement).getBoundingClientRect(),e=e.clientY-t.top,t=(0,_util.getThumbOffsetSize)(n.scrollTop,n.clientHeight,n.scrollHeight,l.clientHeight,i),r.thumbDragOffset=e-t)},pointermoveThumbYEvent:function(e){var t,i,r=this.reactData,l=this.internalData,n=l.isThumbDrag,l=l.thumbDragOffset;n&&(n=this.$refs.refViewElem)&&(r=r.yThumbHeight,i=(t=e.currentTarget.parentElement).getBoundingClientRect(),n.scrollTop=(0,_util.getScrollFromDrag)(e.clientY-i.top,l,n.clientHeight,n.scrollHeight,t.clientHeight,r))},renderVN:function(e){var t=this,i=t.$scopedSlots,r=t.native,l=t.loading,n=t.computeXOpts,a=t.computeYOpts,i=i.default;return e("div",{ref:"refElem",class:t.computeWrapperClss,style:t.computeWrapperStyle},[e("div",{ref:"refViewElem",class:t.computeViewClss,on:{scroll:t.scrollEvent}},[e("div",{ref:"refViewInnerElem",class:"vxe-scrollbar--view-inner"},t.autoResize?[e("div",{key:"vi",ref:"refViewInnerElem",class:"vxe-scrollbar--view-inner"},i?i({}):[])]:i?i({}):[])]),r||"hidden"===n.visible?renderEmptyElement(t):e("div",{ref:"refTrackXElem",class:"vxe-scrollbar--track-x",on:{click:t.clickTrackXEvent}},[e("div",{ref:"refThumbXElem",class:"vxe-scrollbar--thumb-x",on:{pointerdown:t.pointerdownThumbXEvent,pointermove:t.pointermoveThumbXEvent,pointerup:t.cleatPointerThumbEvent,pointercancel:t.cleatPointerThumbEvent,lostpointercapture:t.cleatPointerThumbEvent}})]),r||"hidden"===a.visible?renderEmptyElement(t):e("div",{ref:"refTrackYElem",class:"vxe-scrollbar--track-y",on:{click:t.clickTrackYEvent}},[e("div",{ref:"refThumbYElem",class:"vxe-scrollbar--thumb-y",on:{pointerdown:t.pointerdownThumbYEvent,pointermove:t.pointermoveThumbYEvent,pointerup:t.cleatPointerThumbEvent,pointercancel:t.cleatPointerThumbEvent,lostpointercapture:t.cleatPointerThumbEvent}})]),e(_loading.default,{class:"vxe-scrollbar--loading",props:{value:l}})])}},watch:{height:function(){this.reFlag++},width:function(){this.reFlag++},minHeight:function(){this.reFlag++},minWidth:function(){this.reFlag++},maxHeight:function(){this.reFlag++},maxWidth:function(){this.reFlag++},native:function(){this.reFlag++},syncResize:function(){this.reFlag++},reFlag:function(){var e=this;e.recalculate().then(function(){e.recalculate()})}},created:function(){this.internalData=createInternalData()},mounted:function(){var e=this,t=e,i=e.internalData,r=t.autoResize,l=e.$refs.refViewElem,n=e.$refs.refViewInnerElem;r&&(r=globalResize.create(function(){t.autoResize&&e.reFlag++}),l&&r.observe(l),n&&r.observe(n),i.resizeObserver=r),e.reFlag++},beforeDestroy:function(){var e=this.internalData.resizeObserver;e&&e.disconnect()},destroyed:function(){var e=this.reactData,t=this.internalData;_xeUtils.default.assign(e,createReactData()),_xeUtils.default.assign(t,createInternalData())},render:function(e){return this.renderVN(e)}});

package/lib/scrollbar/src/util.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScrollFromClick = getScrollFromClick;
+exports.getScrollFromDrag = getScrollFromDrag;
+exports.getThumbOffsetSize = getThumbOffsetSize;
+exports.getThumbSize = getThumbSize;
+/**
+ * 计算滚动条滑块的长度
+ */
+function getThumbSize(viewportSize, contentSize, trackSize) {
+  if (contentSize <= viewportSize) {
+    return 0;
+  }
+  var ratio = viewportSize / contentSize;
+  var ideal = trackSize * ratio;
+  return Math.max(20, Math.min(ideal, trackSize));
+}
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+  var maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0) {
+    return 0;
+  }
+  var maxThumbOffset = trackSize - thumbSize;
+  if (maxThumbOffset <= 0) {
+    return 0;
+  }
+  var clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+  var ratio = clamped / maxScroll;
+  return ratio * maxThumbOffset;
+}
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+  var maxThumbOffset = trackSize - thumbSize;
+  var maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  var thumbOffset = clickPosition - thumbSize / 2;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  var scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
+  return scrollOffset;
+}
+/**
+ * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+ */
+function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+  var maxScroll = contentSize - viewportSize;
+  var maxThumbOffset = trackSize - thumbSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  var thumbOffset = pointerPosition - dragOffset;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  return thumbOffset / maxThumbOffset * maxScroll;
+}