vxe-pc-ui 4.20.34 → 4.20.35

package/es/scrollbar/src/scrollbar.js

@@ -23,337 +23,357 @@ function createInternalData() {
     lastScrollLeft: 0
   };
 }
-var scrollbar_default = defineVxeComponent({
-  name: "VxeScrollbar",
-  props: {
-    id: [String, Number],
-    viewId: [String, Number],
-    theme: {
-      type: String,
-      default: () => getConfig().scrollbar.theme
-    },
-    width: [String, Number],
-    height: [String, Number],
-    minWidth: [String, Number],
-    minHeight: [String, Number],
-    maxWidth: [String, Number],
-    maxHeight: [String, Number],
-    loading: Boolean,
-    native: {
-      type: Boolean,
-      default: () => getConfig().scrollbar.native
-    },
-    fluentOverlay: {
-      type: Boolean,
-      default: () => getConfig().scrollbar.fluentOverlay
-    },
-    padding: {
-      type: Boolean,
-      default: () => getConfig().scrollbar.padding
-    },
-    autoHide: {
-      type: Boolean,
-      default: () => getConfig().scrollbar.autoHide
-    },
-    visible: {
-      type: Boolean,
-      default: () => getConfig().scrollbar.visible
-    },
-    xConfig: Object,
-    yConfig: Object,
-    className: {
-      type: String,
-      default: () => getConfig().scrollbar.className
-    },
-    viewAttrs: {
-      type: Object,
-      default: () => getConfig().scrollbar.viewAttrs
-    },
-    viewStyle: {
-      type: Object,
-      default: () => getConfig().scrollbar.viewStyle
-    },
-    viewClassName: {
-      type: String,
-      default: () => getConfig().scrollbar.viewClassName
-    },
-    viewInnerClassName: {
-      type: String,
-      default: () => getConfig().scrollbar.viewInnerClassName
-    },
-    size: {
-      type: String,
-      default: () => getConfig().scrollbar.size || getConfig().size
-    },
-    /**
-     * 已废弃
-     * @deprecated
-     */
-    autoResize: {
-      type: Boolean,
-      default: () => getConfig().scrollbar.autoResize
-    },
-    /**
-     * 已废弃
-     * @deprecated
-     */
-    syncResize: [Boolean, String, Number]
-  },
-  emits: ["scroll", "scroll-boundary"],
-  setup(props, context) {
-    const { emit, slots } = context;
-    const xID = XEUtils.uniqueId();
-    const refElem = ref();
-    const refViewElem = ref();
-    const refViewInnerElem = ref();
-    const reactData = reactive(createReactData());
-    const internalData = createInternalData();
-    const { computeSize } = useFns.useSize(props);
-    const computeWrapperStyle = computed(() => {
-      const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
-      const barWidth = computeYWidth.value;
-      const barHeight = computeXHeight.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 (barWidth || barHeight) {
-        stys["--vxe-ui-scrollbar-y-width"] = toCssUnit(barWidth || barHeight);
-        stys["--vxe-ui-scrollbar-x-height"] = toCssUnit(barHeight || barWidth);
-      }
-      return stys;
-    });
-    const computeXHeight = computed(() => {
-      const xOpts = computeXOpts.value;
-      return xOpts.height;
-    });
-    const computeYWidth = computed(() => {
-      const yOpts = computeYOpts.value;
-      return yOpts.width;
-    });
-    const computeXVisible = computed(() => {
-      const { visible } = props;
-      const xOpts = computeXOpts.value;
-      return getDefaultConfig(xOpts.visible, visible);
-    });
-    const computeYVisible = computed(() => {
-      const { visible } = props;
-      const yOpts = computeYOpts.value;
-      return getDefaultConfig(yOpts.visible, visible);
-    });
-    const computeXAutoHide = computed(() => {
-      const { autoHide } = props;
-      const xOpts = computeXOpts.value;
-      return getDefaultConfig(xOpts.autoHide, autoHide);
-    });
-    const computeYAutoHide = computed(() => {
-      const { autoHide } = props;
-      const yOpts = computeYOpts.value;
-      return getDefaultConfig(yOpts.autoHide, autoHide);
-    });
-    const computeWrapperClss = computed(() => {
-      const { native, theme, className, padding, fluentOverlay } = props;
-      const { yThumbHeight, xThumbWidth } = reactData;
-      const vSize = computeSize.value;
-      const xToTop = computeXToTop.value;
-      const yToLeft = computeYToLeft.value;
-      const xVisible = computeXVisible.value;
-      const yVisible = computeYVisible.value;
-      const xAutoHide = computeXAutoHide.value;
-      const yAutoHide = computeYAutoHide.value;
-      return domUtils.buildClass(
-        [
-          "vxe-scrollbar",
-          vSize ? `size--${vSize}` : "",
-          theme ? `theme--${theme}` : "",
-          fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
-          `ov-x--${xVisible === false ? "hidden" : "visible"}`,
-          `ov-y--${yVisible === false ? "hidden" : "visible"}`,
-          `sx-pos--${xToTop ? "top" : "bottom"}`,
-          `sy-pos--${yToLeft ? "left" : "right"}`,
-          native ? "is--native" : "is--virtual",
-          className
-        ],
-        {
-          "is--padding": padding,
-          "ov-x--auto-hide": xAutoHide,
-          "ov-y--auto-hide": yAutoHide,
-          "overflow-y": yThumbHeight,
-          "overflow-x": xThumbWidth
-        }
-      );
-    });
-    const computeViewClss = computed(() => {
-      const { viewClassName } = props;
-      return domUtils.buildClass(["vxe-scrollbar--view", viewClassName]);
-    });
-    const computeViewInnerClss = computed(() => {
-      const { viewInnerClassName } = props;
-      return domUtils.buildClass(["vxe-scrollbar--view-inner", viewInnerClassName]);
-    });
-    const computeXOpts = computed(() => {
-      return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
-    });
-    const computeYOpts = computed(() => {
-      return Object.assign({}, getConfig().scrollbar.yConfig, props.yConfig);
-    });
-    const computeXToTop = computed(() => {
-      const xOpts = computeXOpts.value;
-      return xOpts.position === "top";
-    });
-    const computeYToLeft = computed(() => {
-      const yOpts = computeYOpts.value;
-      return yOpts.position === "left";
-    });
-    const refMaps = {
-      refElem
-    };
-    const computeMaps = {};
-    const $xeScrollbar = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeScrollbar);
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
-    };
-    const scrollbarMethods = {
-      dispatchEvent,
-      getScrollViewElem() {
-        const viewEl = refViewElem.value;
-        return viewEl || null;
+var scrollbar_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeScrollbar",
+    props: {
+      id: [String, Number],
+      viewId: [String, Number],
+      theme: {
+        type: String,
+        default: () => getConfig().scrollbar.theme
       },
-      getScrollViewInnerElem() {
-        const viewInnerEl = refViewInnerElem.value;
-        return viewInnerEl || null;
+      width: [String, Number],
+      height: [String, Number],
+      minWidth: [String, Number],
+      minHeight: [String, Number],
+      maxWidth: [String, Number],
+      maxHeight: [String, Number],
+      loading: Boolean,
+      native: {
+        type: Boolean,
+        default: () => getConfig().scrollbar.native
       },
-      scrollTo(left, top) {
-        const viewEl = refViewElem.value;
-        if (viewEl) {
-          if (XEUtils.isNumber(left)) {
-            viewEl.scrollTo(left, top || 0);
-          } else {
-            viewEl.scrollTo(left);
-          }
-        }
+      fluentOverlay: {
+        type: Boolean,
+        default: () => getConfig().scrollbar.fluentOverlay
       },
-      scrollIntoView() {
-        const viewEl = refViewElem.value;
-        if (viewEl) {
-          viewEl.scrollIntoView();
-        }
+      padding: {
+        type: Boolean,
+        default: () => getConfig().scrollbar.padding
       },
-      setScrollTop(top) {
-        const viewEl = refViewElem.value;
-        if (viewEl) {
-          viewEl.scrollTop = top;
-        }
+      autoHide: {
+        type: Boolean,
+        default: () => getConfig().scrollbar.autoHide
       },
-      setScrollLeft(left) {
-        const viewEl = refViewElem.value;
-        if (viewEl) {
-          viewEl.scrollLeft = left;
-        }
+      visible: {
+        type: Boolean,
+        default: () => getConfig().scrollbar.visible
       },
-      getScrollTop() {
-        const viewEl = refViewElem.value;
-        if (viewEl) {
-          return viewEl.scrollTop;
-        }
-        return 0;
+      xConfig: Object,
+      yConfig: Object,
+      className: {
+        type: String,
+        default: () => getConfig().scrollbar.className
       },
-      getScrollLeft() {
-        const viewEl = refViewElem.value;
-        if (viewEl) {
-          return viewEl.scrollLeft;
-        }
-        return 0;
+      viewAttrs: {
+        type: Object,
+        default: () => getConfig().scrollbar.viewAttrs
       },
-      clearScroll() {
-        const viewEl = refViewElem.value;
-        if (viewEl) {
-          viewEl.scrollTop = 0;
-          viewEl.scrollLeft = 0;
-        }
+      viewStyle: {
+        type: Object,
+        default: () => getConfig().scrollbar.viewStyle
       },
-      recalculate() {
-        updateThumbSize();
-        updateThumbOffset();
-        return nextTick();
-      }
-    };
-    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 = XEUtils.toNumber(yOpts.threshold) || 1;
-        if (lastScrollTop < scrollTop) {
-          direction = "bottom";
-          if (yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight - yThreshold) {
-            isBottomBoundary = true;
+      viewClassName: {
+        type: String,
+        default: () => getConfig().scrollbar.viewClassName
+      },
+      viewInnerClassName: {
+        type: String,
+        default: () => getConfig().scrollbar.viewInnerClassName
+      },
+      size: {
+        type: String,
+        default: () => getConfig().scrollbar.size || getConfig().size
+      },
+      /**
+       * 已废弃
+       * @deprecated
+       */
+      autoResize: {
+        type: Boolean,
+        default: () => getConfig().scrollbar.autoResize
+      },
+      /**
+       * 已废弃
+       * @deprecated
+       */
+      syncResize: [Boolean, String, Number]
+    },
+    emits: ["scroll", "scroll-boundary"],
+    setup(props, context) {
+      const { emit, slots } = context;
+      const xID = XEUtils.uniqueId();
+      const refElem = ref();
+      const refViewElem = ref();
+      const refViewInnerElem = ref();
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const { computeSize } = useFns.useSize(props);
+      const computeWrapperStyle = computed(() => {
+        const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
+        const barWidth = computeYWidth.value;
+        const barHeight = computeXHeight.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 (barWidth || barHeight) {
+          stys["--vxe-ui-scrollbar-y-width"] = toCssUnit(barWidth || barHeight);
+          stys["--vxe-ui-scrollbar-x-height"] = toCssUnit(barHeight || barWidth);
+        }
+        return stys;
+      });
+      const computeXHeight = computed(() => {
+        const xOpts = computeXOpts.value;
+        return xOpts.height;
+      });
+      const computeYWidth = computed(() => {
+        const yOpts = computeYOpts.value;
+        return yOpts.width;
+      });
+      const computeXVisible = computed(() => {
+        const { visible } = props;
+        const xOpts = computeXOpts.value;
+        return getDefaultConfig(xOpts.visible, visible);
+      });
+      const computeYVisible = computed(() => {
+        const { visible } = props;
+        const yOpts = computeYOpts.value;
+        return getDefaultConfig(yOpts.visible, visible);
+      });
+      const computeXAutoHide = computed(() => {
+        const { autoHide } = props;
+        const xOpts = computeXOpts.value;
+        return getDefaultConfig(xOpts.autoHide, autoHide);
+      });
+      const computeYAutoHide = computed(() => {
+        const { autoHide } = props;
+        const yOpts = computeYOpts.value;
+        return getDefaultConfig(yOpts.autoHide, autoHide);
+      });
+      const computeWrapperClss = computed(() => {
+        const { native, theme, className, padding, fluentOverlay } = props;
+        const { yThumbHeight, xThumbWidth } = reactData;
+        const vSize = computeSize.value;
+        const xToTop = computeXToTop.value;
+        const yToLeft = computeYToLeft.value;
+        const xVisible = computeXVisible.value;
+        const yVisible = computeYVisible.value;
+        const xAutoHide = computeXAutoHide.value;
+        const yAutoHide = computeYAutoHide.value;
+        return domUtils.buildClass(
+          [
+            "vxe-scrollbar",
+            vSize ? `size--${vSize}` : "",
+            theme ? `theme--${theme}` : "",
+            fluentOverlay ? "is--fluent-overlay" : "is--default-mode",
+            `ov-x--${xVisible === false ? "hidden" : "visible"}`,
+            `ov-y--${yVisible === false ? "hidden" : "visible"}`,
+            `sx-pos--${xToTop ? "top" : "bottom"}`,
+            `sy-pos--${yToLeft ? "left" : "right"}`,
+            native ? "is--native" : "is--virtual",
+            className
+          ],
+          {
+            "is--padding": padding,
+            "ov-x--auto-hide": xAutoHide,
+            "ov-y--auto-hide": yAutoHide,
+            "overflow-y": yThumbHeight,
+            "overflow-x": xThumbWidth
+          }
+        );
+      });
+      const computeViewClss = computed(() => {
+        const { viewClassName } = props;
+        return domUtils.buildClass(["vxe-scrollbar--view", viewClassName]);
+      });
+      const computeViewInnerClss = computed(() => {
+        const { viewInnerClassName } = props;
+        return domUtils.buildClass(["vxe-scrollbar--view-inner", viewInnerClassName]);
+      });
+      const computeXOpts = computed(() => {
+        return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
+      });
+      const computeYOpts = computed(() => {
+        return Object.assign({}, getConfig().scrollbar.yConfig, props.yConfig);
+      });
+      const computeXToTop = computed(() => {
+        const xOpts = computeXOpts.value;
+        return xOpts.position === "top";
+      });
+      const computeYToLeft = computed(() => {
+        const yOpts = computeYOpts.value;
+        return yOpts.position === "left";
+      });
+      const refMaps = {
+        refElem
+      };
+      const computeMaps = {};
+      const $xeScrollbar = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns.useInitVScrollbar($xeScrollbar);
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
+      };
+      const scrollbarMethods = {
+        dispatchEvent,
+        getScrollViewElem() {
+          const viewEl = refViewElem.value;
+          return viewEl || null;
+        },
+        getScrollViewInnerElem() {
+          const viewInnerEl = refViewInnerElem.value;
+          return viewInnerEl || null;
+        },
+        scrollTo(left, top) {
+          const viewEl = refViewElem.value;
+          if (viewEl) {
+            if (XEUtils.isNumber(left)) {
+              viewEl.scrollTo(left, top || 0);
+            } else {
+              viewEl.scrollTo(left);
+            }
           }
-        } else {
-          direction = "top";
-          if (yThumbHeight > 0 && scrollTop <= yThreshold) {
-            isTopBoundary = true;
+        },
+        scrollIntoView() {
+          const viewEl = refViewElem.value;
+          if (viewEl) {
+            viewEl.scrollIntoView();
           }
+        },
+        setScrollTop(top) {
+          const viewEl = refViewElem.value;
+          if (viewEl) {
+            viewEl.scrollTop = top;
+          }
+        },
+        setScrollLeft(left) {
+          const viewEl = refViewElem.value;
+          if (viewEl) {
+            viewEl.scrollLeft = left;
+          }
+        },
+        getScrollTop() {
+          const viewEl = refViewElem.value;
+          if (viewEl) {
+            return viewEl.scrollTop;
+          }
+          return 0;
+        },
+        getScrollLeft() {
+          const viewEl = refViewElem.value;
+          if (viewEl) {
+            return viewEl.scrollLeft;
+          }
+          return 0;
+        },
+        clearScroll() {
+          const viewEl = refViewElem.value;
+          if (viewEl) {
+            viewEl.scrollTop = 0;
+            viewEl.scrollLeft = 0;
+          }
+        },
+        recalculate() {
+          updateThumbSize();
+          updateThumbOffset();
+          return nextTick();
         }
-      }
-      if (lastScrollLeft !== scrollLeft) {
-        const xThreshold = XEUtils.toNumber(xOpts.threshold) || 1;
-        if (lastScrollLeft < scrollLeft) {
-          direction = "right";
-          if (xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth - xThreshold) {
-            isRightBoundary = true;
+      };
+      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 = XEUtils.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;
+            }
           }
-        } else {
-          direction = "left";
-          if (xThumbWidth > 0 && scrollLeft <= xThreshold) {
-            isLeftBoundary = true;
+        }
+        if (lastScrollLeft !== scrollLeft) {
+          const xThreshold = XEUtils.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) {
+        updateThumbOffset();
+        internalData.lastScrollTop = scrollTop;
+        internalData.lastScrollLeft = scrollLeft;
+        if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+          dispatchEvent(
+            "scroll-boundary",
+            {
+              direction,
+              isTop: isTopBoundary,
+              isBottom: isBottomBoundary,
+              isLeft: isLeftBoundary,
+              isRight: isRightBoundary,
+              scrollTop,
+              scrollLeft,
+              clientWidth,
+              clientHeight,
+              scrollHeight,
+              scrollWidth
+            },
+            evnt
+          );
+        }
         dispatchEvent(
-          "scroll-boundary",
+          "scroll",
           {
             direction,
-            isTop: isTopBoundary,
-            isBottom: isBottomBoundary,
-            isLeft: isLeftBoundary,
-            isRight: isRightBoundary,
+            isTop: yThumbHeight > 0 && scrollTop <= 0,
+            isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
+            isLeft: xThumbWidth > 0 && scrollLeft <= 0,
+            isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
             scrollTop,
             scrollLeft,
             clientWidth,
@@ -363,219 +383,202 @@ var scrollbar_default = defineVxeComponent({
           },
           evnt
         );
-      }
-      dispatchEvent(
-        "scroll",
-        {
-          direction,
-          isTop: yThumbHeight > 0 && scrollTop <= 0,
-          isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
-          isLeft: xThumbWidth > 0 && scrollLeft <= 0,
-          isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
-          scrollTop,
-          scrollLeft,
-          clientWidth,
-          clientHeight,
-          scrollHeight,
-          scrollWidth
-        },
-        evnt
+      };
+      const scrollbarPrivateMethods = {};
+      Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
+      const renderVN = () => {
+        const { id, native, loading, viewId, viewAttrs, viewStyle } = props;
+        const wrapperStyle = computeWrapperStyle.value;
+        const wrapperClss = computeWrapperClss.value;
+        const viewClss = computeViewClss.value;
+        const viewInnerClss = computeViewInnerClss.value;
+        const xVisible = computeXVisible.value;
+        const yVisible = computeYVisible.value;
+        const defaultSlot = slots.default;
+        return h(
+          "div",
+          {
+            ref: refElem,
+            id: id || null,
+            class: wrapperClss,
+            style: wrapperStyle
+          },
+          [
+            h(
+              "div",
+              {
+                ref: refViewElem,
+                class: viewClss,
+                onScroll: scrollEvent,
+                id: viewId || null,
+                style: viewStyle,
+                ...viewAttrs
+              },
+              [
+                h(
+                  "div",
+                  {
+                    key: "vi",
+                    ref: refViewInnerElem,
+                    class: viewInnerClss
+                  },
+                  defaultSlot ? defaultSlot({}) : []
+                )
+              ]
+            ),
+            native || xVisible === false ? renderEmptyElement($xeScrollbar) : h(
+              "div",
+              {
+                ref: refTrackXElem,
+                class: "vxe-scrollbar--track-x",
+                onClick: clickTrackXEvent
+              },
+              [
+                h("div", {
+                  ref: refThumbXElem,
+                  class: "vxe-scrollbar--thumb-x",
+                  onPointerdown: pointerdownThumbXEvent,
+                  onPointermove: pointermoveThumbXEvent,
+                  onPointerup: cleatPointerThumbEvent,
+                  onPointercancel: cleatPointerThumbEvent,
+                  onLostpointercapture: cleatPointerThumbEvent
+                })
+              ]
+            ),
+            native || yVisible === false ? renderEmptyElement($xeScrollbar) : h(
+              "div",
+              {
+                ref: refTrackYElem,
+                class: "vxe-scrollbar--track-y",
+                onClick: clickTrackYEvent
+              },
+              [
+                h("div", {
+                  ref: refThumbYElem,
+                  class: "vxe-scrollbar--thumb-y",
+                  onPointerdown: pointerdownThumbYEvent,
+                  onPointermove: pointermoveThumbYEvent,
+                  onPointerup: cleatPointerThumbEvent,
+                  onPointercancel: cleatPointerThumbEvent,
+                  onLostpointercapture: cleatPointerThumbEvent
+                })
+              ]
+            ),
+            h(VxeLoadingComponent, {
+              class: "vxe-scrollbar--loading",
+              modelValue: loading
+            })
+          ]
+        );
+      };
+      const reFlag = ref(0);
+      watch(
+        () => props.height,
+        () => {
+          reFlag.value++;
+        }
       );
-    };
-    const scrollbarPrivateMethods = {};
-    Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
-    const renderVN = () => {
-      const { id, native, loading, viewId, viewAttrs, viewStyle } = props;
-      const wrapperStyle = computeWrapperStyle.value;
-      const wrapperClss = computeWrapperClss.value;
-      const viewClss = computeViewClss.value;
-      const viewInnerClss = computeViewInnerClss.value;
-      const xVisible = computeXVisible.value;
-      const yVisible = computeYVisible.value;
-      const defaultSlot = slots.default;
-      return h(
-        "div",
-        {
-          ref: refElem,
-          id: id || null,
-          class: wrapperClss,
-          style: wrapperStyle
-        },
-        [
-          h(
-            "div",
-            {
-              ref: refViewElem,
-              class: viewClss,
-              onScroll: scrollEvent,
-              id: viewId || null,
-              style: viewStyle,
-              ...viewAttrs
-            },
-            [
-              h(
-                "div",
-                {
-                  key: "vi",
-                  ref: refViewInnerElem,
-                  class: viewInnerClss
-                },
-                defaultSlot ? defaultSlot({}) : []
-              )
-            ]
-          ),
-          native || xVisible === false ? renderEmptyElement($xeScrollbar) : h(
-            "div",
-            {
-              ref: refTrackXElem,
-              class: "vxe-scrollbar--track-x",
-              onClick: clickTrackXEvent
-            },
-            [
-              h("div", {
-                ref: refThumbXElem,
-                class: "vxe-scrollbar--thumb-x",
-                onPointerdown: pointerdownThumbXEvent,
-                onPointermove: pointermoveThumbXEvent,
-                onPointerup: cleatPointerThumbEvent,
-                onPointercancel: cleatPointerThumbEvent,
-                onLostpointercapture: cleatPointerThumbEvent
-              })
-            ]
-          ),
-          native || yVisible === false ? renderEmptyElement($xeScrollbar) : h(
-            "div",
-            {
-              ref: refTrackYElem,
-              class: "vxe-scrollbar--track-y",
-              onClick: clickTrackYEvent
-            },
-            [
-              h("div", {
-                ref: refThumbYElem,
-                class: "vxe-scrollbar--thumb-y",
-                onPointerdown: pointerdownThumbYEvent,
-                onPointermove: pointermoveThumbYEvent,
-                onPointerup: cleatPointerThumbEvent,
-                onPointercancel: cleatPointerThumbEvent,
-                onLostpointercapture: cleatPointerThumbEvent
-              })
-            ]
-          ),
-          h(VxeLoadingComponent, {
-            class: "vxe-scrollbar--loading",
-            modelValue: loading
-          })
-        ]
+      watch(
+        () => props.width,
+        () => {
+          reFlag.value++;
+        }
       );
-    };
-    const reFlag = ref(0);
-    watch(
-      () => props.height,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(
-      () => props.width,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(
-      () => props.minHeight,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(
-      () => props.minWidth,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(
-      () => props.maxHeight,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(
-      () => props.maxWidth,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(
-      () => props.native,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(
-      () => props.syncResize,
-      () => {
-        reFlag.value++;
-      }
-    );
-    watch(computeYWidth, () => {
-      reFlag.value++;
-    });
-    watch(computeXHeight, () => {
-      reFlag.value++;
-    });
-    watch(computeXVisible, () => {
-      nextTick(() => {
+      watch(
+        () => props.minHeight,
+        () => {
+          reFlag.value++;
+        }
+      );
+      watch(
+        () => props.minWidth,
+        () => {
+          reFlag.value++;
+        }
+      );
+      watch(
+        () => props.maxHeight,
+        () => {
+          reFlag.value++;
+        }
+      );
+      watch(
+        () => props.maxWidth,
+        () => {
+          reFlag.value++;
+        }
+      );
+      watch(
+        () => props.native,
+        () => {
+          reFlag.value++;
+        }
+      );
+      watch(
+        () => props.syncResize,
+        () => {
+          reFlag.value++;
+        }
+      );
+      watch(computeYWidth, () => {
         reFlag.value++;
       });
-    });
-    watch(computeYVisible, () => {
-      nextTick(() => {
+      watch(computeXHeight, () => {
         reFlag.value++;
       });
-    });
-    watch(reFlag, () => {
-      $xeScrollbar.recalculate().then(() => {
-        $xeScrollbar.recalculate();
+      watch(computeXVisible, () => {
+        nextTick(() => {
+          reFlag.value++;
+        });
       });
-    });
-    onMounted(() => {
-      const { autoResize } = props;
-      const viewEl = refViewElem.value;
-      const viewInnerEl = refViewInnerElem.value;
-      if (autoResize) {
-        const scrollObserver = globalResize.create(() => {
-          if (props.autoResize) {
-            reFlag.value++;
-          }
+      watch(computeYVisible, () => {
+        nextTick(() => {
+          reFlag.value++;
         });
-        if (viewEl) {
-          scrollObserver.observe(viewEl);
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl);
+      });
+      watch(reFlag, () => {
+        $xeScrollbar.recalculate().then(() => {
+          $xeScrollbar.recalculate();
+        });
+      });
+      onMounted(() => {
+        const { autoResize } = props;
+        const viewEl = refViewElem.value;
+        const viewInnerEl = refViewInnerElem.value;
+        if (autoResize) {
+          const scrollObserver = globalResize.create(() => {
+            if (props.autoResize) {
+              reFlag.value++;
+            }
+          });
+          if (viewEl) {
+            scrollObserver.observe(viewEl);
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = scrollObserver;
         }
-        internalData.scrollObserver = scrollObserver;
-      }
-      reFlag.value++;
-      globalEvents.on($xeScrollbar, "resize", () => {
         reFlag.value++;
+        globalEvents.on($xeScrollbar, "resize", () => {
+          reFlag.value++;
+        });
+      });
+      onBeforeUnmount(() => {
+        const { scrollObserver } = internalData;
+        if (scrollObserver) {
+          scrollObserver.disconnect();
+        }
+        globalEvents.off($xeScrollbar, "resize");
       });
-    });
-    onBeforeUnmount(() => {
-      const { scrollObserver } = internalData;
-      if (scrollObserver) {
-        scrollObserver.disconnect();
-      }
-      globalEvents.off($xeScrollbar, "resize");
-    });
-    $xeScrollbar.renderVN = renderVN;
-    return $xeScrollbar;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      $xeScrollbar.renderVN = renderVN;
+      return $xeScrollbar;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   scrollbar_default as default
 };