vxe-pc-ui 3.18.20 → 3.18.22

package/lib/index.umd.js

@@ -11223,6 +11223,7 @@ __webpack_require__.d(__webpack_exports__, {
   Rate: function() { return /* reexport */ Rate; },
   Result: function() { return /* reexport */ Result; },
   Row: function() { return /* reexport */ Row; },
+  Scrollbar: function() { return /* reexport */ Scrollbar; },
   Segmented: function() { return /* reexport */ Segmented; },
   Select: function() { return /* reexport */ Select; },
   Slider: function() { return /* reexport */ Slider; },
@@ -11318,6 +11319,7 @@ __webpack_require__.d(__webpack_exports__, {
   VxeRate: function() { return /* reexport */ VxeRate; },
   VxeResult: function() { return /* reexport */ VxeResult; },
   VxeRow: function() { return /* reexport */ VxeRow; },
+  VxeScrollbar: function() { return /* reexport */ VxeScrollbar; },
   VxeSegmented: function() { return /* reexport */ VxeSegmented; },
   VxeSelect: function() { return /* reexport */ VxeSelect; },
   VxeSlider: function() { return /* reexport */ VxeSlider; },
@@ -11349,6 +11351,7 @@ __webpack_require__.d(__webpack_exports__, {
   VxeWatermark: function() { return /* reexport */ VxeWatermark; },
   Watermark: function() { return /* reexport */ Watermark; },
   WatermarkController: function() { return /* reexport */ WatermarkController; },
+  baseUtils: function() { return /* reexport */ baseUtils; },
   checkVersion: function() { return /* reexport */ checkVersion; },
   clipboard: function() { return /* reexport */ clipboard; },
   commands: function() { return /* reexport */ commands; },
@@ -11357,6 +11360,7 @@ __webpack_require__.d(__webpack_exports__, {
   coreVersion: function() { return /* reexport */ coreVersion; },
   createEvent: function() { return /* reexport */ createEvent; },
   "default": function() { return /* binding */ entry_lib; },
+  domUtils: function() { return /* reexport */ domUtils; },
   drawer: function() { return /* reexport */ components_drawer; },
   formats: function() { return /* reexport */ formats; },
   getComponent: function() { return /* reexport */ getComponent; },
@@ -11475,6 +11479,7 @@ __webpack_require__.d(components_namespaceObject, {
   Rate: function() { return Rate; },
   Result: function() { return Result; },
   Row: function() { return Row; },
+  Scrollbar: function() { return Scrollbar; },
   Segmented: function() { return Segmented; },
   Select: function() { return Select; },
   Slider: function() { return Slider; },
@@ -11570,6 +11575,7 @@ __webpack_require__.d(components_namespaceObject, {
   VxeRate: function() { return VxeRate; },
   VxeResult: function() { return VxeResult; },
   VxeRow: function() { return VxeRow; },
+  VxeScrollbar: function() { return VxeScrollbar; },
   VxeSegmented: function() { return VxeSegmented; },
   VxeSelect: function() { return VxeSelect; },
   VxeSlider: function() { return VxeSlider; },
@@ -11601,6 +11607,7 @@ __webpack_require__.d(components_namespaceObject, {
   VxeWatermark: function() { return VxeWatermark; },
   Watermark: function() { return Watermark; },
   WatermarkController: function() { return WatermarkController; },
+  baseUtils: function() { return baseUtils; },
   checkVersion: function() { return checkVersion; },
   clipboard: function() { return clipboard; },
   commands: function() { return commands; },
@@ -11608,6 +11615,7 @@ __webpack_require__.d(components_namespaceObject, {
   config: function() { return config; },
   coreVersion: function() { return coreVersion; },
   createEvent: function() { return createEvent; },
+  domUtils: function() { return domUtils; },
   drawer: function() { return components_drawer; },
   formats: function() { return formats; },
   getComponent: function() { return getComponent; },
@@ -11690,7 +11698,7 @@ var es_regexp_exec = __webpack_require__(7495);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.match.js
 var es_string_match = __webpack_require__(1761);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-var coreVersion = "3.4.24";
+var coreVersion = "3.4.27";
 var VxeCore = {
   coreVersion: coreVersion,
   uiVersion: '',
@@ -12451,7 +12459,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-var version = "3.4.24";
+var version = "3.4.27";
 var log = {
   create: createLog,
   warn: createLog('warn', "v".concat(version)),
@@ -12988,6 +12996,53 @@ var permission = {
     return permissionInfo.disabled;
   }
 };
+;// ./node_modules/@vxe-ui/core/es/src/base-utils.js
+
+var baseUtils = {
+  /**
+   * 转成字符串
+   */
+  toString: function toString(content) {
+    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(content)) {
+      return '';
+    }
+    return '' + content;
+  },
+  /**
+   * 判断值为：'' | null | undefined 时都属于空值
+   */
+  isEmpty: function isEmpty(value) {
+    return value === null || value === undefined || value === '';
+  }
+};
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.join.js
+var es_array_join = __webpack_require__(8598);
+;// ./node_modules/@vxe-ui/core/es/src/dom-utils.js
+
+
+
+var domUtils = {
+  /**
+   * 生成 className
+   */
+  buildClass: function buildClass(staticClassNames, mapClassName) {
+    var parts = [];
+    if (staticClassNames) {
+      for (var i = 0; i < staticClassNames.length; i++) {
+        var val = staticClassNames[i];
+        if (val) {
+          parts.push(val);
+        }
+      }
+    }
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(mapClassName, function (val, key) {
+      if (val) {
+        parts.push(key);
+      }
+    });
+    return parts.join(' ');
+  }
+};
 ;// ./node_modules/@vxe-ui/core/es/src/mixins.js
 
 
@@ -13049,6 +13104,8 @@ var globalMixins = {
 
 
 
+
+
 
 
 
@@ -13121,6 +13178,8 @@ var VxeUI = Object.assign(VxeCore, {
   clipboard: clipboard,
   log: log,
   permission: permission,
+  baseUtils: baseUtils,
+  domUtils: domUtils,
   globalStore: globalStore,
   component: component,
   getComponent: getComponent,
@@ -13149,6 +13208,8 @@ setTheme();
 
 
 
+
+
 
 /* harmony default export */ var es_index_esm = ((/* unused pure expression or super */ null && (VxeUI)));
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
@@ -13280,15 +13341,13 @@ function checkDynamic() {
 }
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
 var es_array_filter = __webpack_require__(2008);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.join.js
-var es_array_join = __webpack_require__(8598);
 ;// ./packages/ui/src/log.ts
 
 
 
 
 var log_log = VxeUI.log;
-var uiVersion = "ui v".concat("3.18.20");
+var uiVersion = "ui v".concat("3.18.22");
 function createComponentLog(name) {
   var tableVersion = VxeUI.tableVersion ? "table v".concat(VxeUI.tableVersion) : '';
   var ganttVersion = VxeUI.ganttVersion ? "gantt v".concat(VxeUI.ganttVersion) : '';
@@ -13308,7 +13367,7 @@ var errLog = log_log.create('error', uiVersion);
 
 
 
-var ui_version = "3.18.20";
+var ui_version = "3.18.22";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -13649,6 +13708,15 @@ setConfig({
   rate: {},
   result: {},
   row: {},
+  scrollbar: {
+    autoResize: true,
+    xConfig: {
+      // visible: 'visible'
+    },
+    yConfig: {
+      // visible: 'visible'
+    }
+  },
   segmented: {},
   select: {
     emptyValue: null,
@@ -57608,6 +57676,623 @@ dynamicApp.use(VxeRow);
 VxeUI.component(row);
 var Row = VxeRow;
 /* harmony default export */ var packages_row = (VxeRow);
+;// ./packages/scrollbar/src/util.ts
+/**
+ * 计算滚动条滑块的长度
+ */
+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;
+}
+;// ./packages/scrollbar/src/scrollbar.ts
+
+
+
+
+
+
+
+
+
+var scrollbar_getConfig = VxeUI.getConfig,
+  scrollbar_createEvent = VxeUI.createEvent,
+  scrollbar_domUtils = VxeUI.domUtils,
+  scrollbar_globalResize = VxeUI.globalResize,
+  scrollbar_renderEmptyElement = VxeUI.renderEmptyElement;
+function scrollbar_createReactData() {
+  return {
+    yThumbHeight: 0,
+    xThumbWidth: 0
+  };
+}
+function scrollbar_createInternalData() {
+  return {
+    // resizeObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
+    lastScrollTop: 0,
+    lastScrollLeft: 0
+  };
+}
+/* harmony default export */ var scrollbar = (/* define-vxe-component start */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 scrollbar_getConfig().scrollbar.native;
+      }
+    },
+    xConfig: Object,
+    yConfig: Object,
+    className: String,
+    viewClassName: String,
+    autoResize: {
+      type: Boolean,
+      default: function _default() {
+        return scrollbar_getConfig().scrollbar.autoResize;
+      }
+    },
+    syncResize: [Boolean, String, Number]
+  },
+  data: function data() {
+    var xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    var reactData = scrollbar_createReactData();
+    return _objectSpread2(_objectSpread2({}, {}), {}, {
+      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 = toCssUnit(width);
+      }
+      if (height) {
+        stys.height = toCssUnit(height);
+      }
+      if (minWidth) {
+        stys.minWidth = toCssUnit(minWidth);
+      }
+      if (minHeight) {
+        stys.minHeight = toCssUnit(minHeight);
+      }
+      if (maxWidth) {
+        stys.maxWidth = toCssUnit(maxWidth);
+      }
+      if (maxHeight) {
+        stys.maxHeight = toCssUnit(maxHeight);
+      }
+      if (yOpts.width) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width);
+      }
+      if (xOpts.height) {
+        stys['--vxe-ui-scrollbar-x-height'] = 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 scrollbar_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 scrollbar_domUtils.buildClass(['vxe-scrollbar--view', viewClassName]);
+    },
+    computeXOpts: function computeXOpts() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      return Object.assign({}, scrollbar_getConfig().scrollbar.xConfig, props.xConfig);
+    },
+    computeYOpts: function computeYOpts() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      return Object.assign({}, scrollbar_getConfig().scrollbar.yConfig, props.yConfig);
+    }
+  },
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeScrollbar = this;
+      $xeScrollbar.$emit(type, scrollbar_createEvent(evnt, {
+        $scrollbar: $xeScrollbar
+      }, params));
+    },
+    scrollTo: function scrollTo(left, top) {
+      var $xeScrollbar = this;
+      var viewEl = $xeScrollbar.$refs.refViewElem;
+      if (viewEl) {
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 ? 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 ? 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 ? 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 ? 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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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: 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: 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 = 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 = 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 = 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 = 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;
+      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'
+      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? scrollbar_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' ? scrollbar_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(packages_loading, {
+        class: 'vxe-scrollbar--loading',
+        props: {
+          value: loading
+        }
+      })]);
+    }
+  },
+  watch: {
+    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 = scrollbar_createInternalData();
+  },
+  mounted: function mounted() {
+    var $xeScrollbar = this;
+    var props = $xeScrollbar;
+    var internalData = $xeScrollbar.internalData;
+    var autoResize = props.autoResize;
+    var viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
+    if (autoResize && viewInnerEl) {
+      var resizeObserver = scrollbar_globalResize.create(function () {
+        if (props.autoResize) {
+          $xeScrollbar.reFlag++;
+        }
+      });
+      resizeObserver.observe(viewInnerEl);
+      internalData.resizeObserver = resizeObserver;
+    }
+    $xeScrollbar.$nextTick(function () {
+      $xeScrollbar.recalculate();
+    });
+  },
+  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;
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, scrollbar_createReactData());
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, scrollbar_createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+})); /* define-vxe-component end */
+;// ./packages/scrollbar/index.ts
+
+
+
+
+
+var VxeScrollbar = Object.assign({}, scrollbar, {
+  install: function install(app) {
+    app.component(scrollbar.name, scrollbar);
+  }
+});
+dynamicApp.use(VxeScrollbar);
+VxeUI.component(scrollbar);
+var Scrollbar = VxeScrollbar;
+/* harmony default export */ var packages_scrollbar = (VxeScrollbar);
 ;// ./packages/segmented/src/segmented.ts
 
 
@@ -72089,13 +72774,14 @@ var Watermark = VxeWatermark;
 
 
 
+
 
 
 var components_setI18n = VxeUI.setI18n,
   components_setLanguage = VxeUI.setLanguage,
   components_setTheme = VxeUI.setTheme,
   components_setConfig = VxeUI.setConfig;
-var components_components = [packages_alert, packages_anchor, packages_anchor_link, packages_avatar, packages_backtop, packages_badge, packages_breadcrumb, packages_breadcrumb_item, packages_button, packages_button_group, packages_calendar, packages_card, packages_carousel, packages_carousel_item, packages_cascader, packages_checkbox, checkbox_button, checkbox_group, packages_col, packages_collapse, packages_collapse_pane, packages_color_picker, packages_context_menu, packages_countdown, packages_date_panel, packages_date_picker, packages_date_range_picker, packages_divider, packages_drawer, packages_empty, packages_form, form_gather, packages_form_group, packages_form_item, packages_icon, packages_icon_picker, packages_image, image_group, image_preview, packages_input, packages_layout_aside, packages_layout_body, packages_layout_container, packages_layout_footer, packages_layout_header, packages_link, packages_list, packages_loading, packages_menu, packages_modal, packages_notice_bar, packages_number_input, packages_optgroup, packages_option, packages_pager, packages_password_input, print_page_break, packages_print, packages_pulldown, packages_radio, radio_button, radio_group, packages_rate, packages_result, packages_row, packages_segmented, packages_select, packages_splitter, packages_splitter_panel, split, split_pane, packages_slider, packages_space, packages_steps, packages_switch, packages_tab_pane, packages_table_select, packages_table_transfer, packages_tabs, packages_tag, packages_text_ellipsis, packages_text, packages_textarea, packages_timeline, packages_timeline_item, packages_tip, packages_tooltip, packages_tour, packages_transfer, packages_tree, packages_tree_select, packages_upload, packages_watermark];
+var components_components = [packages_alert, packages_anchor, packages_anchor_link, packages_avatar, packages_backtop, packages_badge, packages_breadcrumb, packages_breadcrumb_item, packages_button, packages_button_group, packages_calendar, packages_card, packages_carousel, packages_carousel_item, packages_cascader, packages_checkbox, checkbox_button, checkbox_group, packages_col, packages_collapse, packages_collapse_pane, packages_color_picker, packages_context_menu, packages_countdown, packages_date_panel, packages_date_picker, packages_date_range_picker, packages_divider, packages_drawer, packages_empty, packages_form, form_gather, packages_form_group, packages_form_item, packages_icon, packages_icon_picker, packages_image, image_group, image_preview, packages_input, packages_layout_aside, packages_layout_body, packages_layout_container, packages_layout_footer, packages_layout_header, packages_link, packages_list, packages_loading, packages_menu, packages_modal, packages_notice_bar, packages_number_input, packages_optgroup, packages_option, packages_pager, packages_password_input, print_page_break, packages_print, packages_pulldown, packages_radio, radio_button, radio_group, packages_rate, packages_result, packages_row, packages_scrollbar, packages_segmented, packages_select, packages_splitter, packages_splitter_panel, split, split_pane, packages_slider, packages_space, packages_steps, packages_switch, packages_tab_pane, packages_table_select, packages_table_transfer, packages_tabs, packages_tag, packages_text_ellipsis, packages_text, packages_textarea, packages_timeline, packages_timeline_item, packages_tip, packages_tooltip, packages_tour, packages_transfer, packages_tree, packages_tree_select, packages_upload, packages_watermark];
 function install(app, options) {
   components_setConfig(options);
   components_components.forEach(function (component) {
@@ -72235,6 +72921,7 @@ var readFile = readLocalFile;
 
 
 
+
 
 
 ;// ./index.ts