vxe-pc-ui 4.18.21 → 4.18.23

package/lib/index.umd.js

@@ -2904,6 +2904,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; },
@@ -2999,6 +3000,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; },
@@ -3030,6 +3032,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; },
@@ -3038,6 +3041,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; },
@@ -3157,6 +3161,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; },
@@ -3252,6 +3257,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; },
@@ -3283,6 +3289,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; },
@@ -3290,6 +3297,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; },
@@ -3356,7 +3364,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-const coreVersion = "4.4.24";
+const coreVersion = "4.4.27";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3984,7 +3992,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "4.4.24";
+const version = "4.4.27";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -4427,6 +4435,50 @@ const permission = {
     return permissionInfo.disabled;
   }
 };
+;// ./node_modules/@vxe-ui/core/es/src/base-utils.js
+
+const baseUtils = {
+  /**
+   * 转成字符串
+   */
+  toString(content) {
+    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(content)) {
+      return '';
+    }
+    return '' + content;
+  },
+  /**
+   * 判断值为：'' | null | undefined 时都属于空值
+   */
+  isEmpty(value) {
+    return value === null || value === undefined || value === '';
+  }
+};
+;// ./node_modules/@vxe-ui/core/es/src/dom-utils.js
+
+
+const domUtils = {
+  /**
+   * 生成 className
+   */
+  buildClass(staticClassNames, mapClassName) {
+    const parts = [];
+    if (staticClassNames) {
+      for (let i = 0; i < staticClassNames.length; i++) {
+        const val = staticClassNames[i];
+        if (val) {
+          parts.push(val);
+        }
+      }
+    }
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(mapClassName, (val, key) => {
+      if (val) {
+        parts.push(key);
+      }
+    });
+    return parts.join(' ');
+  }
+};
 ;// ./node_modules/@vxe-ui/core/es/src/hooks.js
 
 const hooks = new store();
@@ -4477,6 +4529,8 @@ const useFns = {
 
 
 
+
+
 
 
 
@@ -4548,6 +4602,8 @@ const VxeUI = Object.assign(VxeCore, {
   clipboard: clipboard,
   log: log,
   permission: permission,
+  baseUtils: baseUtils,
+  domUtils: domUtils,
   globalStore: globalStore,
   hooks: hooks,
   component,
@@ -4577,6 +4633,8 @@ setTheme();
 
 
 
+
+
 
 
 /* harmony default export */ var es_index_esm = ((/* unused pure expression or super */ null && (VxeUI)));
@@ -4687,7 +4745,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.18.21"}`;
+const uiVersion = `ui v${"4.18.23"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4705,7 +4763,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.18.21";
+const ui_version = "4.18.23";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -5047,6 +5105,15 @@ setConfig({
   rate: {},
   result: {},
   row: {},
+  scrollbar: {
+    autoResize: true,
+    xConfig: {
+      // visible: 'visible'
+    },
+    yConfig: {
+      // visible: 'visible'
+    }
+  },
   segmented: {},
   select: {
     emptyValue: null,
@@ -45413,7 +45480,7 @@ const Rate = VxeRate;
       const status = props.status || type;
       const slotExtra = slots.extra;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: 'refElem',
+        ref: refElem,
         class: ['vxe-result', {
           [`theme--${status}`]: status
         }]
@@ -45456,6 +45523,628 @@ dynamicApp.use(VxeResult);
 VxeUI.component(result);
 const Result = VxeResult;
 /* harmony default export */ var packages_result = (VxeResult);
+;// ./packages/scrollbar/src/util.ts
+/**
+ * 计算滚动条滑块的长度
+ */
+function getThumbSize(viewportSize, contentSize, trackSize) {
+  if (contentSize <= viewportSize) {
+    return 0;
+  }
+  const ratio = viewportSize / contentSize;
+  const ideal = trackSize * ratio;
+  return Math.max(20, Math.min(ideal, trackSize));
+}
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0) {
+    return 0;
+  }
+  const maxThumbOffset = trackSize - thumbSize;
+  if (maxThumbOffset <= 0) {
+    return 0;
+  }
+  const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+  const ratio = clamped / maxScroll;
+  return ratio * maxThumbOffset;
+}
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxThumbOffset = trackSize - thumbSize;
+  const maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  let thumbOffset = clickPosition - thumbSize / 2;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  const scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
+  return scrollOffset;
+}
+/**
+ * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+ */
+function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxScroll = contentSize - viewportSize;
+  const maxThumbOffset = trackSize - thumbSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  let thumbOffset = pointerPosition - dragOffset;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  return thumbOffset / maxThumbOffset * maxScroll;
+}
+;// ./packages/scrollbar/src/scrollbar.ts
+
+
+
+
+
+
+
+const {
+  getConfig: scrollbar_getConfig,
+  createEvent: scrollbar_createEvent,
+  domUtils: scrollbar_domUtils,
+  globalResize: scrollbar_globalResize,
+  renderEmptyElement: scrollbar_renderEmptyElement
+} = VxeUI;
+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 = (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: () => scrollbar_getConfig().scrollbar.native
+    },
+    xConfig: Object,
+    yConfig: Object,
+    className: String,
+    viewClassName: String,
+    autoResize: {
+      type: Boolean,
+      default: () => scrollbar_getConfig().scrollbar.autoResize
+    },
+    syncResize: [Boolean, String, Number]
+  },
+  emits: ['scroll', 'scroll-boundary'],
+  setup(props, context) {
+    const {
+      emit,
+      slots
+    } = context;
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refViewElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refViewInnerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(scrollbar_createReactData());
+    const internalData = scrollbar_createInternalData();
+    const computeWrapperStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight
+      } = props;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      const 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;
+    });
+    const computeWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        native,
+        className
+      } = props;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      return scrollbar_domUtils.buildClass(['vxe-scrollbar', `ov-x--${xOpts.visible || 'visible'}`, `ov-y--${yOpts.visible || 'visible'}`, native ? 'is--native' : 'is--virtual', className], {
+        'ov-x--auto-hide': xOpts.autoHide,
+        'ov-y--auto-hide': yOpts.autoHide
+      });
+    });
+    const computeViewClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        viewClassName
+      } = props;
+      return scrollbar_domUtils.buildClass(['vxe-scrollbar--view', viewClassName]);
+    });
+    const computeXOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, scrollbar_getConfig().scrollbar.xConfig, props.xConfig);
+    });
+    const computeYOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, scrollbar_getConfig().scrollbar.yConfig, props.yConfig);
+    });
+    const refMaps = {
+      refElem
+    };
+    const computeMaps = {};
+    const $xeScrollbar = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, scrollbar_createEvent(evnt, {
+        $scrollbar: $xeScrollbar
+      }, params));
+    };
+    const scrollbarMethods = {
+      dispatchEvent,
+      scrollTo(left, top) {
+        const viewEl = refViewElem.value;
+        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() {
+        const viewEl = refViewElem.value;
+        if (viewEl) {
+          viewEl.scrollIntoView();
+        }
+      },
+      recalculate() {
+        updateThumbSize();
+        updateThumbOffset();
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      }
+    };
+    const updateThumbSize = () => {
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const trackXEl = refTrackXElem.value;
+      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      const thumbXElem = refThumbXElem.value;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      const trackYEl = refTrackYElem.value;
+      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      const thumbYElem = refThumbYElem.value;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    };
+    const updateThumbOffset = () => {
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth,
+        yThumbHeight
+      } = reactData;
+      const trackXEl = refTrackXElem.value;
+      const thumbXElem = refThumbXElem.value;
+      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      internalData.xThumbLeft = xThumbLeft;
+      if (thumbXElem && xThumbWidth) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+      }
+      const trackYEl = refTrackYElem.value;
+      const thumbYElem = refThumbYElem.value;
+      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      internalData.yThumbTop = yThumbTop;
+      if (thumbYElem && yThumbHeight) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+        thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+      }
+    };
+    const scrollEvent = evnt => {
+      const {
+        xThumbWidth,
+        yThumbHeight
+      } = reactData;
+      const {
+        lastScrollTop,
+        lastScrollLeft
+      } = internalData;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      const viewEl = evnt.currentTarget;
+      const {
+        scrollTop,
+        scrollLeft,
+        clientWidth,
+        clientHeight,
+        scrollHeight,
+        scrollWidth
+      } = viewEl;
+      let direction = '';
+      let isTopBoundary = false;
+      let isBottomBoundary = false;
+      let isLeftBoundary = false;
+      let isRightBoundary = false;
+      if (lastScrollTop !== scrollTop) {
+        const 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) {
+        const 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;
+          }
+        }
+      }
+      updateThumbOffset();
+      internalData.lastScrollTop = scrollTop;
+      internalData.lastScrollLeft = scrollLeft;
+      if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+        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);
+      }
+      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);
+    };
+    const clickTrackXEvent = evnt => {
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    };
+    const clickTrackYEvent = evnt => {
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    };
+    const pointerdownThumbXEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbXEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = refViewElem.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          xThumbWidth
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    };
+    const cleatPointerThumbEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    };
+    const pointerdownThumbYEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = refViewElem.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbYEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = refViewElem.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          yThumbHeight
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    };
+    const scrollbarPrivateMethods = {};
+    Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
+    const renderVN = () => {
+      const {
+        native,
+        loading,
+        autoResize
+      } = props;
+      const wrapperStyle = computeWrapperStyle.value;
+      const wrapperClss = computeWrapperClss.value;
+      const viewClss = computeViewClss.value;
+      const xOpts = computeXOpts.value;
+      const yOpts = computeYOpts.value;
+      const defaultSlot = slots.default;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        class: wrapperClss,
+        style: wrapperStyle
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refViewElem,
+        class: viewClss,
+        onScroll: scrollEvent
+      }, autoResize ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'vi',
+        ref: refViewInnerElem,
+        class: 'vxe-scrollbar--view-inner'
+      }, defaultSlot ? defaultSlot({}) : [])] : defaultSlot ? defaultSlot({}) : []), native || xOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), native || yOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_loading, {
+        class: 'vxe-scrollbar--loading',
+        modelValue: loading
+      })]);
+    };
+    const reFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.height, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.width, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.minHeight, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.minWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxHeight, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.native, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+      $xeScrollbar.recalculate().then(() => {
+        $xeScrollbar.recalculate();
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      const {
+        autoResize
+      } = props;
+      const viewEl = refViewElem.value;
+      const viewInnerEl = refViewInnerElem.value;
+      if (autoResize) {
+        const resizeObserver = scrollbar_globalResize.create(() => {
+          if (props.autoResize) {
+            reFlag.value++;
+          }
+        });
+        if (viewEl) {
+          resizeObserver.observe(viewEl);
+        }
+        if (viewInnerEl) {
+          resizeObserver.observe(viewInnerEl);
+        }
+        internalData.resizeObserver = resizeObserver;
+      }
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      const {
+        resizeObserver
+      } = internalData;
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+    $xeScrollbar.renderVN = renderVN;
+    return $xeScrollbar;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// ./packages/scrollbar/index.ts
+
+
+
+const VxeScrollbar = Object.assign({}, scrollbar, {
+  install(app) {
+    app.component(scrollbar.name, scrollbar);
+  }
+});
+dynamicApp.use(VxeScrollbar);
+VxeUI.component(scrollbar);
+const Scrollbar = VxeScrollbar;
+/* harmony default export */ var packages_scrollbar = (VxeScrollbar);
 ;// ./packages/row/src/row.ts
 
 
@@ -59287,6 +59976,7 @@ const Watermark = VxeWatermark;
 
 
 
+
 
 
 const {
@@ -59295,7 +59985,7 @@ const {
   setTheme: components_setTheme,
   setConfig: components_setConfig
 } = VxeUI;
-const 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];
+const 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_scrollbar, 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];
 function install(app, options) {
   components_setConfig(options);
   components_components.forEach(component => app.use(component));
@@ -59433,6 +60123,7 @@ const readFile = readLocalFile;
 
 
 
+
 
 
 ;// ./index.ts