vxe-pc-ui 4.18.23 → 4.19.1

package/dist/all.esm.js

@@ -101,7 +101,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.18.23"}`;
+const uiVersion = `ui v${"4.19.1"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -115,7 +115,7 @@ function createComponentLog(name) {
 const warnLog$i = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.18.23";
+const version = "4.19.1";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -326,7 +326,13 @@ setConfig$1({
         digits: 2,
         controls: true
     },
-    layoutAside: {},
+    layoutAside: {
+        scrollbarConfig: {
+            yConfig: {
+                autoHide: true
+            }
+        }
+    },
     layoutBody: {
         backtopConfig: {}
     },
@@ -6115,7 +6121,7 @@ var VxeCalendarComponent = defineVxeComponent({
                         class: 'vxe-calendar--type-wrapper'
                     }, [
                         datePanelType === 'year'
-                            ? h(VxeButtonComponent, {
+                            ? h(VxeButton, {
                                 class: 'vxe-calendar--date-picker-label',
                                 disabled: datePanelType === 'year',
                                 content: selectDatePanelObj.y
@@ -6123,13 +6129,13 @@ var VxeCalendarComponent = defineVxeComponent({
                             : h('span', {
                                 class: 'vxe-calendar--date-picker-btns'
                             }, [
-                                h(VxeButtonComponent, {
+                                h(VxeButton, {
                                     class: 'vxe-calendar--date-picker-btn',
                                     content: selectDatePanelObj.y,
                                     onClick: dateToggleYearTypeEvent
                                 }),
                                 selectDatePanelObj.m
-                                    ? h(VxeButtonComponent, {
+                                    ? h(VxeButton, {
                                         class: 'vxe-calendar--date-picker-btn',
                                         content: selectDatePanelObj.m,
                                         onClick: dateToggleMonthTypeEvent
@@ -6140,16 +6146,16 @@ var VxeCalendarComponent = defineVxeComponent({
                     h('div', {
                         class: 'vxe-calendar--btn-wrapper'
                     }, [
-                        h(VxeButtonComponent, {
+                        h(VxeButton, {
                             disabled: isDisabledPrevDateBtn,
                             icon: 'vxe-icon-caret-left',
                             onClick: datePrevEvent
                         }),
-                        h(VxeButtonComponent, {
+                        h(VxeButton, {
                             icon: 'vxe-icon-dot',
                             onClick: dateTodayMonthEvent
                         }),
-                        h(VxeButtonComponent, {
+                        h(VxeButton, {
                             disabled: isDisabledNextDateBtn,
                             icon: 'vxe-icon-caret-right',
                             onClick: dateNextEvent
@@ -6370,6 +6376,32 @@ var VxeLoadingComponent = defineVxeComponent({
     }
 });
 
+const VxeLoading = Object.assign({}, VxeLoadingComponent, {
+    install(app) {
+        app.component(VxeLoadingComponent.name, VxeLoadingComponent);
+    }
+});
+const LoadingController = {
+    open(options) {
+        const opts = Object.assign({}, options);
+        dynamicStore.globalLoading = Object.assign({
+            modelValue: true,
+            text: opts.text,
+            icon: opts.icon
+        }, { key: 'gl' });
+        checkDynamic();
+        return Promise.resolve();
+    },
+    close() {
+        dynamicStore.globalLoading = null;
+        return Promise.resolve();
+    }
+};
+dynamicApp.use(VxeLoading);
+VxeUI.component(VxeLoadingComponent);
+VxeUI.loading = LoadingController;
+const Loading = VxeLoading;
+
 var VxeCardComponent = defineVxeComponent({
     name: 'VxeCard',
     props: {
@@ -6502,7 +6534,7 @@ var VxeCardComponent = defineVxeComponent({
                 /**
                  * 加载中
                  */
-                h(VxeLoadingComponent, {
+                h(VxeLoading, {
                     class: 'vxe-card--loading',
                     modelValue: loading
                 })
@@ -6848,7 +6880,7 @@ var VxeCarouselComponent = defineVxeComponent({
                 /**
                  * 加载中
                  */
-                h(VxeLoadingComponent, {
+                h(VxeLoading, {
                     class: 'vxe-carousel--loading',
                     modelValue: loading
                 })
@@ -9038,7 +9070,7 @@ var VxeListComponent = defineVxeComponent({
                 /**
                  * 加载中
                  */
-                h(VxeLoadingComponent, {
+                h(VxeLoading, {
                     class: 'vxe-list--loading',
                     modelValue: loading
                 })
@@ -18444,6 +18476,15 @@ var VxeTextComponent = defineVxeComponent({
     }
 });
 
+const VxeText = Object.assign({}, VxeTextComponent, {
+    install(app) {
+        app.component(VxeTextComponent.name, VxeTextComponent);
+    }
+});
+dynamicApp.use(VxeText);
+VxeUI.component(VxeTextComponent);
+const Text = VxeText;
+
 var VxeCountdownComponent = defineVxeComponent({
     name: 'VxeCountdown',
     props: {
@@ -18618,7 +18659,7 @@ var VxeCountdownComponent = defineVxeComponent({
                     }, prefixSlot
                         ? getSlotVNs(prefixSlot({ currentValue: currNum, diffConf }))
                         : [
-                            h(VxeTextComponent, {
+                            h(VxeText, {
                                 content: prefixOpts.content,
                                 icon: prefixOpts.icon,
                                 status: prefixOpts.status
@@ -18636,7 +18677,7 @@ var VxeCountdownComponent = defineVxeComponent({
                     }, suffixSlot
                         ? getSlotVNs(suffixSlot({ currentValue: currNum, diffConf }))
                         : [
-                            h(VxeTextComponent, {
+                            h(VxeText, {
                                 content: suffixOpts.content,
                                 icon: suffixOpts.icon,
                                 status: suffixOpts.status
@@ -21792,7 +21833,7 @@ var VxeDatePickerComponent = defineVxeComponent({
                 return h('div', {
                     class: `vxe-date-picker--layout-${pos}-wrapper`
                 }, [
-                    h(VxeButtonGroupComponent, {
+                    h(VxeButtonGroup, {
                         options: shortcutList,
                         mode,
                         align,
@@ -21881,7 +21922,7 @@ var VxeDatePickerComponent = defineVxeComponent({
                                     h('div', {
                                         class: 'vxe-date-picker--layout-body-wrapper'
                                     }, [
-                                        h(VxeDatePanelComponent, {
+                                        h(VxeDatePanel, {
                                             ref: refDatePanel,
                                             modelValue: reactData.inputValue,
                                             type: props.type,
@@ -21918,7 +21959,7 @@ var VxeDatePickerComponent = defineVxeComponent({
                                                 class: 'vxe-date-picker--layout-footer-btns'
                                             }, [
                                                 showClearBtn
-                                                    ? h(VxeButtonComponent, {
+                                                    ? h(VxeButton, {
                                                         size: 'mini',
                                                         disabled: inputValue === '' || XEUtils.eqNull(inputValue),
                                                         content: getI18n$2('vxe.button.clear'),
@@ -21926,7 +21967,7 @@ var VxeDatePickerComponent = defineVxeComponent({
                                                     })
                                                     : renderEmptyElement$1($xeDatePicker),
                                                 showConfirmBtn
-                                                    ? h(VxeButtonComponent, {
+                                                    ? h(VxeButton, {
                                                         size: 'mini',
                                                         status: 'primary',
                                                         content: getI18n$2('vxe.button.confirm'),
@@ -23733,32 +23774,6 @@ const Divider = VxeDivider;
 
 const allActiveDrawers = [];
 
-const VxeLoading = Object.assign({}, VxeLoadingComponent, {
-    install(app) {
-        app.component(VxeLoadingComponent.name, VxeLoadingComponent);
-    }
-});
-const LoadingController = {
-    open(options) {
-        const opts = Object.assign({}, options);
-        dynamicStore.globalLoading = Object.assign({
-            modelValue: true,
-            text: opts.text,
-            icon: opts.icon
-        }, { key: 'gl' });
-        checkDynamic();
-        return Promise.resolve();
-    },
-    close() {
-        dynamicStore.globalLoading = null;
-        return Promise.resolve();
-    }
-};
-dynamicApp.use(VxeLoading);
-VxeUI.component(VxeLoadingComponent);
-VxeUI.loading = LoadingController;
-const Loading = VxeLoading;
-
 var VxeDrawerComponent = defineVxeComponent({
     name: 'VxeDrawer',
     props: {
@@ -27595,7 +27610,7 @@ var VxeIconPickerComponent = defineVxeComponent({
                                     ? h('div', {
                                         class: 'vxe-ico-picker--panel-search'
                                     }, [
-                                        h(VxeInputComponent, {
+                                        h(VxeInput, {
                                             ref: refInpSearch,
                                             class: 'vxe-ico-picker-search--input',
                                             modelValue: reactData.searchValue,
@@ -28766,282 +28781,927 @@ dynamicApp.use(VxeImagePreview);
 VxeUI.component(VxeImagePreviewComponent);
 const ImagePreview = VxeImagePreview;
 
-var VxeLayoutAsideComponent = defineVxeComponent({
-    name: 'VxeLayoutAside',
-    props: {
-        width: [String, Number],
-        collapsed: Boolean,
-        collapseWidth: [String, Number],
-        loading: Boolean,
-        padding: Boolean,
-        collapseConfig: Object,
-        size: {
-            type: String,
-            default: () => getConfig$4().layoutAside.size || getConfig$4().size
-        }
-    },
-    emits: [],
-    setup(props, context) {
-        const { slots, emit } = context;
-        const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const { computeSize } = useSize(props);
-        const reactData = reactive({});
-        const refMaps = {
-            refElem
-        };
-        const computeCollapseOpts = computed(() => {
-            return Object.assign({}, getConfig$4().layoutAside.collapseConfig, props.collapseConfig);
-        });
-        const computeVarStyle = computed(() => {
-            const { width, collapseWidth } = props;
-            const stys = {};
-            if (collapseWidth) {
-                stys['--vxe-ui-layout-aside-collapse-width'] = toCssUnit(collapseWidth);
-            }
-            if (width) {
-                stys['--vxe-ui-layout-aside-default-width'] = toCssUnit(width);
-            }
-            return stys;
-        });
-        const computeMaps = {
-            computeSize,
-            computeVarStyle
-        };
-        const $xeLayoutAside = {
-            xID,
-            props,
-            context,
-            reactData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $layoutAside: $xeLayoutAside }, params));
-        };
-        const layoutAsideMethods = {
-            dispatchEvent
-        };
-        const layoutAsidePrivateMethods = {};
-        Object.assign($xeLayoutAside, layoutAsideMethods, layoutAsidePrivateMethods);
-        const renderVN = () => {
-            const { collapsed, loading, padding } = props;
-            const varStyle = computeVarStyle.value;
-            const vSize = computeSize.value;
-            const collapseOpts = computeCollapseOpts.value;
-            const defaultSlot = slots.default;
-            return h('aside', {
-                ref: refElem,
-                class: ['vxe-layout-aside', {
-                        [`size--${vSize}`]: vSize,
-                        'is--animat': collapseOpts.animation !== false,
-                        'is--padding': padding,
-                        'is--collapse': collapsed,
-                        'is--loading': loading
-                    }],
-                style: varStyle
-            }, [
-                h('div', {
-                    class: 'vxe-layout-aside--inner'
-                }, defaultSlot ? defaultSlot({}) : []),
-                /**
-                 * 加载中
-                 */
-                h(VxeLoading, {
-                    class: 'vxe-list-view--loading',
-                    modelValue: loading
-                })
-            ]);
-        };
-        provide('$xeLayoutAside', $xeLayoutAside);
-        $xeLayoutAside.renderVN = renderVN;
-        return $xeLayoutAside;
-    },
-    render() {
-        return this.renderVN();
+/**
+ * 计算滚动条滑块的长度
+ */
+function getThumbSize(viewportSize, contentSize, trackSize) {
+    if (contentSize <= viewportSize) {
+        return 0;
     }
-});
-
-const VxeLayoutAside = Object.assign({}, VxeLayoutAsideComponent, {
-    install(app) {
-        app.component(VxeLayoutAsideComponent.name, VxeLayoutAsideComponent);
+    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;
     }
-});
-dynamicApp.use(VxeLayoutAside);
-VxeUI.component(VxeLayoutAsideComponent);
-const LayoutAside = VxeLayoutAside;
-
-function createInternalData$c() {
-    return {};
+    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;
 }
+
+const { getConfig: getConfig$2, createEvent, domUtils, globalResize, renderEmptyElement } = VxeUI;
 function createReactData$d() {
-    return {};
+    return {
+        yThumbHeight: 0,
+        xThumbWidth: 0
+    };
 }
-var VxeLayoutBodyComponent = defineVxeComponent({
-    name: 'VxeLayoutBody',
+function createInternalData$c() {
+    return {
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
+        lastScrollTop: 0,
+        lastScrollLeft: 0
+    };
+}
+var VxeScrollbarComponent = defineVxeComponent({
+    name: 'VxeScrollbar',
     props: {
+        id: [String, Number],
+        width: [String, Number],
+        height: [String, Number],
+        minWidth: [String, Number],
+        minHeight: [String, Number],
+        maxWidth: [String, Number],
+        maxHeight: [String, Number],
         loading: Boolean,
-        padding: Boolean,
-        showBacktop: {
+        native: {
             type: Boolean,
-            default: () => getConfig$4().layoutBody.showBacktop
+            default: () => getConfig$2().scrollbar.native
         },
-        backtopConfig: Object,
-        size: {
+        xConfig: Object,
+        yConfig: Object,
+        className: {
             type: String,
-            default: () => getConfig$4().layoutBody.size || getConfig$4().size
-        }
+            default: () => getConfig$2().scrollbar.className
+        },
+        viewAttrs: {
+            type: Object,
+            default: () => getConfig$2().scrollbar.viewAttrs
+        },
+        viewClassName: {
+            type: String,
+            default: () => getConfig$2().scrollbar.viewClassName
+        },
+        viewInnerClassName: {
+            type: String,
+            default: () => getConfig$2().scrollbar.viewInnerClassName
+        },
+        autoResize: {
+            type: Boolean,
+            default: () => getConfig$2().scrollbar.autoResize
+        },
+        syncResize: [Boolean, String, Number]
     },
-    emits: [],
+    emits: [
+        'scroll',
+        'scroll-boundary'
+    ],
     setup(props, context) {
-        const { slots, emit } = context;
+        const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
-        const backtopId = `vxe_layout_body_backtop_${xID}`;
         const refElem = ref();
-        const { computeSize } = useSize(props);
-        const internalData = createInternalData$c();
+        const refViewElem = ref();
+        const refViewInnerElem = ref();
+        const refTrackXElem = ref();
+        const refTrackYElem = ref();
+        const refThumbXElem = ref();
+        const refThumbYElem = ref();
         const reactData = reactive(createReactData$d());
-        const refMaps = {
-            refElem
-        };
-        const computeBacktopOpts = computed(() => {
-            return Object.assign({}, getConfig$4().layoutBody.backtopConfig, props.backtopConfig, {
-                target: '#' + backtopId
-            });
-        });
-        const computeMaps = {
-            computeSize
-        };
-        const $xeLayoutBody = {
-            xID,
-            props,
-            context,
-            internalData,
-            reactData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $layoutBody: $xeLayoutBody }, params));
-        };
-        const layoutBodyMethods = {
-            dispatchEvent
-        };
-        const layoutBodyPrivateMethods = {};
-        Object.assign($xeLayoutBody, layoutBodyMethods, layoutBodyPrivateMethods);
-        const renderVN = () => {
-            const { loading, padding, showBacktop } = props;
-            const backtopOpts = computeBacktopOpts.value;
-            const vSize = computeSize.value;
-            const defaultSlot = slots.default;
-            const backtopSlot = slots.backtop;
-            const backtopTopSlot = slots.backtopTop || slots['backtop-top'];
-            const backtopBottomSlot = slots.backtopBottom || slots['backtop-bottom'];
-            const backtopScopeSlots = {};
-            if (backtopSlot) {
-                backtopScopeSlots.default = backtopSlot;
+        const internalData = createInternalData$c();
+        const computeWrapperStyle = 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 (backtopTopSlot) {
-                backtopScopeSlots.top = backtopTopSlot;
+            if (height) {
+                stys.height = toCssUnit(height);
             }
-            if (backtopBottomSlot) {
-                backtopScopeSlots.bottom = backtopBottomSlot;
+            if (minWidth) {
+                stys.minWidth = toCssUnit(minWidth);
             }
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-layout-body', {
-                        [`size--${vSize}`]: vSize,
-                        'is--loading': loading,
-                        'is--padding': padding
-                    }]
-            }, [
-                h('div', {
-                    id: showBacktop ? backtopId : '',
-                    class: 'vxe-layout-body--inner'
-                }, defaultSlot ? defaultSlot({}) : []),
-                /**
-                 * 加载中
-                 */
-                h(VxeLoading, {
-                    class: 'vxe-list-view--loading',
-                    modelValue: loading
-                }),
-                /**
-                 * 回到顶部
-                 */
-                showBacktop
-                    ? h(VxeBacktop, backtopOpts, backtopScopeSlots)
-                    : renderEmptyElement$1($xeLayoutBody)
+            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 = computed(() => {
+            const { native, className } = props;
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            return 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,
+                'overflow-y': yThumbHeight,
+                'overflow-x': xThumbWidth
+            });
+        });
+        const computeViewClss = computed(() => {
+            const { viewClassName } = props;
+            return domUtils.buildClass([
+                'vxe-scrollbar--view',
+                viewClassName
             ]);
-        };
-        $xeLayoutBody.renderVN = renderVN;
-        return $xeLayoutBody;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
-const VxeLayoutBody = Object.assign({}, VxeLayoutBodyComponent, {
-    install(app) {
-        app.component(VxeLayoutBodyComponent.name, VxeLayoutBodyComponent);
-    }
-});
-dynamicApp.use(VxeLayoutBody);
-VxeUI.component(VxeLayoutBodyComponent);
-const LayoutBody = VxeLayoutBody;
-
-var VxeLayoutContainerComponent = defineVxeComponent({
-    name: 'VxeLayoutContainer',
-    props: {
-        vertical: Boolean,
-        size: {
-            type: String,
-            default: () => getConfig$4().layoutContainer.size || getConfig$4().size
-        }
-    },
-    emits: [],
-    setup(props, context) {
-        const { slots, emit } = context;
-        const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const { computeSize } = useSize(props);
-        const reactData = reactive({});
+        });
+        const computeViewInnerClss = computed(() => {
+            const { viewInnerClassName } = props;
+            return domUtils.buildClass([
+                'vxe-scrollbar--view-inner',
+                viewInnerClassName
+            ]);
+        });
+        const computeXOpts = computed(() => {
+            return Object.assign({}, getConfig$2().scrollbar.xConfig, props.xConfig);
+        });
+        const computeYOpts = computed(() => {
+            return Object.assign({}, getConfig$2().scrollbar.yConfig, props.yConfig);
+        });
         const refMaps = {
             refElem
         };
-        const computeMaps = {
-            computeSize
-        };
-        const $xeLayoutContainer = {
+        const computeMaps = {};
+        const $xeScrollbar = {
             xID,
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
         const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $layoutContainer: $xeLayoutContainer }, params));
+            emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
         };
-        const layoutContainerMethods = {
-            dispatchEvent
+        const scrollbarMethods = {
+            dispatchEvent,
+            scrollTo(left, top) {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    if (XEUtils.isNumber(left)) {
+                        viewEl.scrollTo(left, top || 0);
+                    }
+                    else {
+                        viewEl.scrollTo(left);
+                    }
+                }
+            },
+            scrollIntoView() {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    viewEl.scrollIntoView();
+                }
+            },
+            recalculate() {
+                updateThumbSize();
+                updateThumbOffset();
+                return nextTick();
+            }
         };
-        const layoutContainerPrivateMethods = {};
-        Object.assign($xeLayoutContainer, layoutContainerMethods, layoutContainerPrivateMethods);
-        const renderVN = () => {
-            const { vertical } = props;
-            const vSize = computeSize.value;
-            const defaultSlot = slots.default;
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-layout-container', {
-                        [`size--${vSize}`]: vSize,
-                        'is--vertical': vertical
-                    }]
-            }, defaultSlot ? defaultSlot({}) : []);
+        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;
         };
-        $xeLayoutContainer.renderVN = renderVN;
+        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 = 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;
+                    }
+                }
+            }
+            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) {
+                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 { id, native, loading, viewAttrs } = props;
+            const wrapperStyle = computeWrapperStyle.value;
+            const wrapperClss = computeWrapperClss.value;
+            const viewClss = computeViewClss.value;
+            const viewInnerClss = computeViewInnerClss.value;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                id: id || null,
+                class: wrapperClss,
+                style: wrapperStyle
+            }, [
+                h('div', Object.assign({ ref: refViewElem, class: viewClss, onScroll: scrollEvent }, viewAttrs), [
+                    h('div', {
+                        key: 'vi',
+                        ref: refViewInnerElem,
+                        class: viewInnerClss
+                    }, defaultSlot ? defaultSlot({}) : [])
+                ]),
+                native || xOpts.visible === 'hidden'
+                    ? 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 || yOpts.visible === 'hidden'
+                    ? 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(VxeLoading, {
+                    class: 'vxe-scrollbar--loading',
+                    modelValue: loading
+                })
+            ]);
+        };
+        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(reFlag, () => {
+            $xeScrollbar.recalculate().then(() => {
+                $xeScrollbar.recalculate();
+            });
+        });
+        onMounted(() => {
+            const { autoResize } = props;
+            const viewEl = refViewElem.value;
+            const viewInnerEl = refViewInnerElem.value;
+            if (autoResize) {
+                const resizeObserver = globalResize.create(() => {
+                    if (props.autoResize) {
+                        reFlag.value++;
+                    }
+                });
+                if (viewEl) {
+                    resizeObserver.observe(viewEl);
+                }
+                if (viewInnerEl) {
+                    resizeObserver.observe(viewInnerEl);
+                }
+                internalData.resizeObserver = resizeObserver;
+            }
+            reFlag.value++;
+        });
+        onBeforeUnmount(() => {
+            const { resizeObserver } = internalData;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        });
+        $xeScrollbar.renderVN = renderVN;
+        return $xeScrollbar;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeScrollbar = Object.assign({}, VxeScrollbarComponent, {
+    install(app) {
+        app.component(VxeScrollbarComponent.name, VxeScrollbarComponent);
+    }
+});
+dynamicApp.use(VxeScrollbar);
+VxeUI.component(VxeScrollbarComponent);
+const Scrollbar = VxeScrollbar;
+
+var VxeLayoutAsideComponent = defineVxeComponent({
+    name: 'VxeLayoutAside',
+    props: {
+        width: [String, Number],
+        collapsed: Boolean,
+        collapseWidth: [String, Number],
+        loading: Boolean,
+        padding: Boolean,
+        collapseConfig: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$4().layoutAside.useScrollbar
+        },
+        scrollbarConfig: Object,
+        size: {
+            type: String,
+            default: () => getConfig$4().layoutAside.size || getConfig$4().size
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const { computeSize } = useSize(props);
+        const reactData = reactive({});
+        const refMaps = {
+            refElem
+        };
+        const computeCollapseOpts = computed(() => {
+            return Object.assign({}, getConfig$4().layoutAside.collapseConfig, props.collapseConfig);
+        });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().layoutAside.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeVarStyle = computed(() => {
+            const { width, collapseWidth } = props;
+            const stys = {};
+            if (collapseWidth) {
+                stys['--vxe-ui-layout-aside-collapse-width'] = toCssUnit(collapseWidth);
+            }
+            if (width) {
+                stys['--vxe-ui-layout-aside-default-width'] = toCssUnit(width);
+            }
+            return stys;
+        });
+        const computeMaps = {
+            computeSize,
+            computeVarStyle
+        };
+        const $xeLayoutAside = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent$1(evnt, { $layoutAside: $xeLayoutAside }, params));
+        };
+        const layoutAsideMethods = {
+            dispatchEvent
+        };
+        const layoutAsidePrivateMethods = {};
+        Object.assign($xeLayoutAside, layoutAsideMethods, layoutAsidePrivateMethods);
+        const renderVN = () => {
+            const { collapsed, loading, padding, useScrollbar } = props;
+            const varStyle = computeVarStyle.value;
+            const vSize = computeSize.value;
+            const collapseOpts = computeCollapseOpts.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { native, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts;
+            const defaultSlot = slots.default;
+            return h('aside', {
+                ref: refElem,
+                class: ['vxe-layout-aside', {
+                        [`size--${vSize}`]: vSize,
+                        'is--animat': collapseOpts.animation !== false,
+                        'is--padding': padding,
+                        'is--collapse': collapsed,
+                        'is--loading': loading
+                    }],
+                style: varStyle
+            }, [
+                useScrollbar
+                    ? h(VxeScrollbar, {
+                        native,
+                        xConfig: {
+                            visible: 'hidden'
+                        },
+                        yConfig,
+                        className: 'vxe-layout-aside--scrollbar' + (className ? (' ' + className) : ''),
+                        viewAttrs,
+                        viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                        viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
+                    }, {
+                        default: () => defaultSlot ? defaultSlot({}) : []
+                    })
+                    : h('div', {
+                        class: 'vxe-layout-aside--inner'
+                    }, defaultSlot ? defaultSlot({}) : []),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoading, {
+                    class: 'vxe-layout-aside--loading',
+                    modelValue: loading
+                })
+            ]);
+        };
+        provide('$xeLayoutAside', $xeLayoutAside);
+        $xeLayoutAside.renderVN = renderVN;
+        return $xeLayoutAside;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeLayoutAside = Object.assign({}, VxeLayoutAsideComponent, {
+    install(app) {
+        app.component(VxeLayoutAsideComponent.name, VxeLayoutAsideComponent);
+    }
+});
+dynamicApp.use(VxeLayoutAside);
+VxeUI.component(VxeLayoutAsideComponent);
+const LayoutAside = VxeLayoutAside;
+
+function createInternalData$b() {
+    return {};
+}
+function createReactData$c() {
+    return {};
+}
+var VxeLayoutBodyComponent = defineVxeComponent({
+    name: 'VxeLayoutBody',
+    props: {
+        loading: Boolean,
+        padding: Boolean,
+        showBacktop: {
+            type: Boolean,
+            default: () => getConfig$4().layoutBody.showBacktop
+        },
+        backtopConfig: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$4().layoutBody.useScrollbar
+        },
+        scrollbarConfig: Object,
+        size: {
+            type: String,
+            default: () => getConfig$4().layoutBody.size || getConfig$4().size
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const backtopId = `vxe_layout_body_backtop_${xID}`;
+        const refElem = ref();
+        const { computeSize } = useSize(props);
+        const internalData = createInternalData$b();
+        const reactData = reactive(createReactData$c());
+        const refMaps = {
+            refElem
+        };
+        const computeBacktopOpts = computed(() => {
+            return Object.assign({}, getConfig$4().layoutBody.backtopConfig, props.backtopConfig, {
+                target: '#' + backtopId
+            });
+        });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().layoutBody.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeMaps = {
+            computeSize
+        };
+        const $xeLayoutBody = {
+            xID,
+            props,
+            context,
+            internalData,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent$1(evnt, { $layoutBody: $xeLayoutBody }, params));
+        };
+        const layoutBodyMethods = {
+            dispatchEvent
+        };
+        const layoutBodyPrivateMethods = {};
+        Object.assign($xeLayoutBody, layoutBodyMethods, layoutBodyPrivateMethods);
+        const renderVN = () => {
+            const { loading, padding, showBacktop, useScrollbar } = props;
+            const backtopOpts = computeBacktopOpts.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { native, xConfig, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts;
+            const vSize = computeSize.value;
+            const defaultSlot = slots.default;
+            const backtopSlot = slots.backtop;
+            const backtopTopSlot = slots.backtopTop || slots['backtop-top'];
+            const backtopBottomSlot = slots.backtopBottom || slots['backtop-bottom'];
+            const backtopScopeSlots = {};
+            if (backtopSlot) {
+                backtopScopeSlots.default = backtopSlot;
+            }
+            if (backtopTopSlot) {
+                backtopScopeSlots.top = backtopTopSlot;
+            }
+            if (backtopBottomSlot) {
+                backtopScopeSlots.bottom = backtopBottomSlot;
+            }
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-layout-body', {
+                        [`size--${vSize}`]: vSize,
+                        'is--loading': loading,
+                        'is--padding': padding
+                    }]
+            }, [
+                useScrollbar
+                    ? h(VxeScrollbar, {
+                        native,
+                        xConfig,
+                        yConfig,
+                        className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
+                        viewAttrs: Object.assign(Object.assign({}, viewAttrs), { id: showBacktop ? (backtopId || null) : null }),
+                        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
+                    }, {
+                        default: () => defaultSlot ? defaultSlot({}) : []
+                    })
+                    : h('div', {
+                        id: showBacktop ? backtopId : '',
+                        class: 'vxe-layout-body--inner'
+                    }, defaultSlot ? defaultSlot({}) : []),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoading, {
+                    class: 'vxe-list-view--loading',
+                    modelValue: loading
+                }),
+                /**
+                 * 回到顶部
+                 */
+                showBacktop
+                    ? h(VxeBacktop, backtopOpts, backtopScopeSlots)
+                    : renderEmptyElement$1($xeLayoutBody)
+            ]);
+        };
+        $xeLayoutBody.renderVN = renderVN;
+        return $xeLayoutBody;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeLayoutBody = Object.assign({}, VxeLayoutBodyComponent, {
+    install(app) {
+        app.component(VxeLayoutBodyComponent.name, VxeLayoutBodyComponent);
+    }
+});
+dynamicApp.use(VxeLayoutBody);
+VxeUI.component(VxeLayoutBodyComponent);
+const LayoutBody = VxeLayoutBody;
+
+var VxeLayoutContainerComponent = defineVxeComponent({
+    name: 'VxeLayoutContainer',
+    props: {
+        vertical: Boolean,
+        size: {
+            type: String,
+            default: () => getConfig$4().layoutContainer.size || getConfig$4().size
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const { computeSize } = useSize(props);
+        const reactData = reactive({});
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {
+            computeSize
+        };
+        const $xeLayoutContainer = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent$1(evnt, { $layoutContainer: $xeLayoutContainer }, params));
+        };
+        const layoutContainerMethods = {
+            dispatchEvent
+        };
+        const layoutContainerPrivateMethods = {};
+        Object.assign($xeLayoutContainer, layoutContainerMethods, layoutContainerPrivateMethods);
+        const renderVN = () => {
+            const { vertical } = props;
+            const vSize = computeSize.value;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-layout-container', {
+                        [`size--${vSize}`]: vSize,
+                        'is--vertical': vertical
+                    }]
+            }, defaultSlot ? defaultSlot({}) : []);
+        };
+        $xeLayoutContainer.renderVN = renderVN;
         return $xeLayoutContainer;
     },
     render() {
@@ -29316,8 +29976,8 @@ VxeUI.component(VxeLinkComponent);
 const Link = VxeLink;
 
 const { errLog: errLog$a } = createComponentLog('menu');
-const { menus: menus$1, getConfig: getConfig$2, getIcon: getIcon$1 } = VxeUI;
-function createInternalData$b() {
+const { menus: menus$1, getConfig: getConfig$1, getIcon: getIcon$1 } = VxeUI;
+function createInternalData$a() {
     return {
         lastActiveTime: 0,
         menuInitMaps: {},
@@ -29326,7 +29986,7 @@ function createInternalData$b() {
         menuEffectMaps: {}
     };
 }
-function createReactData$c() {
+function createReactData$b() {
     return {
         initialized: false,
         isEnterCollapse: false,
@@ -29346,15 +30006,15 @@ var VxeMenuComponent = defineVxeComponent({
         expandKeys: Array,
         accordion: {
             type: Boolean,
-            default: () => getConfig$2().menu.accordion
+            default: () => getConfig$1().menu.accordion
         },
         border: {
             type: [Boolean, String],
-            default: () => getConfig$2().menu.border
+            default: () => getConfig$1().menu.border
         },
         optionProps: {
             type: Object,
-            default: () => getConfig$2().menu.optionProps
+            default: () => getConfig$1().menu.optionProps
         },
         collapsed: {
             type: Boolean,
@@ -29368,12 +30028,17 @@ var VxeMenuComponent = defineVxeComponent({
         },
         size: {
             type: String,
-            default: () => getConfig$2().menu.size || getConfig$2().size
+            default: () => getConfig$1().menu.size || getConfig$1().size
         },
         menuConfig: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$1().menu.useScrollbar
+        },
+        scrollbarConfig: Object,
         appendTo: {
             type: [String, Function],
-            default: () => getConfig$2().menu.appendTo
+            default: () => getConfig$1().menu.appendTo
         }
     },
     emits: [
@@ -29389,16 +30054,16 @@ var VxeMenuComponent = defineVxeComponent({
         const refElem = ref();
         const refCollapseElem = ref();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$c());
-        const internalData = createInternalData$b();
+        const reactData = reactive(createReactData$b());
+        const internalData = createInternalData$a();
         const refMaps = {
             refElem
         };
         const computeMenuOpts = computed(() => {
-            return Object.assign({}, getConfig$2().menu.menuConfig, props.menuConfig);
+            return Object.assign({}, getConfig$1().menu.menuConfig, props.menuConfig);
         });
         const computePropsOpts = computed(() => {
-            return Object.assign({}, getConfig$2().menu.optionProps, props.optionProps);
+            return Object.assign({}, getConfig$1().menu.optionProps, props.optionProps);
         });
         const computeTitleField = computed(() => {
             const propsOpts = computePropsOpts.value;
@@ -29420,6 +30085,9 @@ var VxeMenuComponent = defineVxeComponent({
             const propsOpts = computePropsOpts.value;
             return propsOpts.routerLink || 'routerLink';
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$1().menu.scrollbarConfig, props.scrollbarConfig);
+        });
         const computeCurrBorder = computed(() => {
             const { border } = props;
             if (border) {
@@ -29903,12 +30571,14 @@ var VxeMenuComponent = defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { loading, collapseFixed, appendTo } = props;
+            const { loading, collapseFixed, appendTo, useScrollbar } = props;
             const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData;
             const vSize = computeSize.value;
             const isCollapsed = computeIsCollapsed.value;
             const currBorder = computeCurrBorder.value;
             const varStyle = computeVarStyle.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { viewClassName, viewInnerClassName } = scrollbarOpts;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             let ons = {};
@@ -29957,9 +30627,13 @@ var VxeMenuComponent = defineVxeComponent({
                                     class: 'vxe-menu--header'
                                 }, headerSlot(stParams))
                                 : renderEmptyElement$1($xeMenu),
-                            h('div', {
-                                class: 'vxe-menu--body'
-                            }, menuList.map(child => renderDefaultChildren(child, menuList))),
+                            useScrollbar
+                                ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-menu--scrollbar-body' }, scrollbarOpts), { viewClassName: 'vxe-menu--body-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-menu--body-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
+                                    default: () => menuList.map(child => renderDefaultChildren(child, menuList))
+                                })
+                                : h('div', {
+                                    class: 'vxe-menu--body'
+                                }, menuList.map(child => renderDefaultChildren(child, menuList))),
                             footerSlot
                                 ? h('div', {
                                     class: 'vxe-menu--footer'
@@ -29972,7 +30646,7 @@ var VxeMenuComponent = defineVxeComponent({
                  * 加载中
                  */
                 h(VxeLoading, {
-                    class: 'vxe-list-view--loading',
+                    class: 'vxe-menu-view--loading',
                     modelValue: loading
                 })
             ]);
@@ -30014,8 +30688,8 @@ var VxeMenuComponent = defineVxeComponent({
         });
         onBeforeUnmount(() => {
             globalEvents.off($xeMenu, 'resize');
-            XEUtils.assign(reactData, createReactData$c());
-            XEUtils.assign(internalData, createInternalData$b());
+            XEUtils.assign(reactData, createReactData$b());
+            XEUtils.assign(internalData, createInternalData$a());
         });
         reactData.initialized = !!props.collapsed;
         reactData.activeName = props.modelValue;
@@ -30041,13 +30715,13 @@ const Menu = VxeMenu;
 const allActiveModals = [];
 
 const { warnLog: warnLog$a, errLog: errLog$9 } = createComponentLog('modal');
-function createInternalData$a() {
+function createInternalData$9() {
     return {
         // msgTimeout: undefined,
         isMoveStatus: false
     };
 }
-function createReactData$b() {
+function createReactData$a() {
     return {
         initialized: false,
         visible: false,
@@ -30279,8 +30953,8 @@ var VxeModalComponent = defineVxeComponent({
         const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$b());
-        const internalData = createInternalData$a();
+        const reactData = reactive(createReactData$a());
+        const internalData = createInternalData$9();
         const refElem = ref();
         const refModalBox = ref();
         const refHeaderElem = ref();
@@ -31548,8 +32222,8 @@ var VxeModalComponent = defineVxeComponent({
             removeMsgQueue();
             removeActiveQueue();
             removeBodyLockScroll();
-            XEUtils.assign(reactData, createReactData$b());
-            XEUtils.assign(internalData, createInternalData$a());
+            XEUtils.assign(reactData, createReactData$a());
+            XEUtils.assign(internalData, createInternalData$9());
         });
         provide('$xeModal', $xeModal);
         return $xeModal;
@@ -31988,7 +32662,7 @@ function isOptionVisible(option) {
 function getOptUniqueId$1() {
     return XEUtils.uniqueId('opt_');
 }
-function createReactData$a() {
+function createReactData$9() {
     return {
         initialized: false,
         scrollYLoad: false,
@@ -32009,7 +32683,7 @@ function createReactData$a() {
         isActivated: false
     };
 }
-function createInternalData$9() {
+function createInternalData$8() {
     return {
         // isLoaded: false,
         synchData: [],
@@ -32190,8 +32864,8 @@ var VxeSelectComponent = defineVxeComponent({
         const refOptionPanel = ref();
         const refVirtualBody = ref();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$a());
-        const internalData = createInternalData$9();
+        const reactData = reactive(createReactData$9());
+        const internalData = createInternalData$8();
         const refMaps = {
             refElem
         };
@@ -33534,7 +34208,7 @@ var VxeSelectComponent = defineVxeComponent({
                     class: 'vxe-select-slots',
                     ref: 'hideOption'
                 }, defaultSlot ? defaultSlot({}) : []),
-                h(VxeInputComponent, {
+                h(VxeInput, {
                     ref: refInput,
                     clearable: props.clearable,
                     placeholder: inpPlaceholder,
@@ -33580,7 +34254,7 @@ var VxeSelectComponent = defineVxeComponent({
                                     ? h('div', {
                                         class: 'vxe-select--panel-search'
                                     }, [
-                                        h(VxeInputComponent, {
+                                        h(VxeInput, {
                                             ref: refInpSearch,
                                             class: 'vxe-select-search--input',
                                             modelValue: reactData.searchValue,
@@ -33610,14 +34284,14 @@ var VxeSelectComponent = defineVxeComponent({
                                                     class: 'vxe-select--header-btns'
                                                 }, [
                                                     (showCheckedButton && multiple)
-                                                        ? h(VxeButtonComponent, {
+                                                        ? h(VxeButton, {
                                                             content: getI18n$2('vxe.select.allChecked'),
                                                             mode: 'text',
                                                             onClick: allCheckedPanelEvent
                                                         })
                                                         : renderEmptyElement$1($xeSelect),
                                                     showClearButton
-                                                        ? h(VxeButtonComponent, {
+                                                        ? h(VxeButton, {
                                                             content: getI18n$2('vxe.select.clear'),
                                                             mode: 'text',
                                                             onClick: clearCheckedPanelEvent
@@ -33668,7 +34342,7 @@ var VxeSelectComponent = defineVxeComponent({
                                                     ? h('div', {
                                                         class: 'vxe-select--oper-btns'
                                                     }, [
-                                                        h(VxeButtonComponent, {
+                                                        h(VxeButton, {
                                                             content: getI18n$2('vxe.select.close'),
                                                             mode: 'text',
                                                             onClick: closePanelEvent
@@ -33715,8 +34389,8 @@ var VxeSelectComponent = defineVxeComponent({
             globalEvents.off($xeSelect, 'blur');
             globalEvents.off($xeSelect, 'resize');
             globalEvents.off($xeSelect, 'scroll');
-            XEUtils.assign(reactData, createReactData$a());
-            XEUtils.assign(internalData, createInternalData$9());
+            XEUtils.assign(reactData, createReactData$9());
+            XEUtils.assign(internalData, createInternalData$8());
         });
         provide('$xeSelect', $xeSelect);
         $xeSelect.renderVN = renderVN;
@@ -36335,10 +37009,10 @@ dynamicApp.use(VxeRadioButton);
 VxeUI.component(VxeRadioButtonComponent);
 const RadioButton = VxeRadioButton;
 
-function createReactData$9() {
+function createReactData$8() {
     return {};
 }
-function createInternalData$8() {
+function createInternalData$7() {
     return {
     // isLoaded: false
     };
@@ -36383,8 +37057,8 @@ var VxeRadioGroupComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$9());
-        const internalData = createInternalData$8();
+        const reactData = reactive(createReactData$8());
+        const internalData = createInternalData$7();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -36533,8 +37207,8 @@ var VxeRadioGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
-            XEUtils.assign(reactData, createReactData$9());
-            XEUtils.assign(internalData, createInternalData$8());
+            XEUtils.assign(reactData, createReactData$8());
+            XEUtils.assign(internalData, createInternalData$7());
         });
         provide('$xeRadioGroup', $xeRadioGroup);
         $xeRadioGroup.renderVN = renderVN;
@@ -36718,684 +37392,106 @@ const VxeRate = Object.assign({}, VxeRateComponent, {
         app.component(VxeRateComponent.name, VxeRateComponent);
     }
 });
-dynamicApp.use(VxeRate);
-VxeUI.component(VxeRateComponent);
-const Rate = VxeRate;
-
-var VxeResultComponent = defineVxeComponent({
-    name: 'VxeResult',
-    props: {
-        imageUrl: String,
-        imageStyle: Object,
-        icon: String,
-        type: [String, Number],
-        status: [String, Number],
-        title: [String, Number],
-        content: [String, Number]
-    },
-    emits: [],
-    setup(props, context) {
-        const { emit, slots } = context;
-        const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const reactData = reactive({});
-        const refMaps = {
-            refElem
-        };
-        const computeMaps = {};
-        const $xeResult = {
-            xID,
-            props,
-            context,
-            reactData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $result: $xeResult }, params));
-        };
-        const resultMethods = {
-            dispatchEvent
-        };
-        const resultPrivateMethods = {};
-        Object.assign($xeResult, resultMethods, resultPrivateMethods);
-        const renderVN = () => {
-            const { imageUrl, imageStyle, icon, title, type, content } = props;
-            const status = props.status || type;
-            const slotExtra = slots.extra;
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-result', {
-                        [`theme--${status}`]: status
-                    }]
-            }, [
-                h('div', {
-                    class: 'vxe-result--inner'
-                }, [
-                    imageUrl
-                        ? h('div', {
-                            class: 'vxe-result--img-wrapper'
-                        }, [
-                            h('img', {
-                                src: imageUrl,
-                                style: imageStyle
-                            })
-                        ])
-                        : h('div', {
-                            class: 'vxe-result--icon-wrapper'
-                        }, [
-                            h('i', {
-                                class: [icon, type ? getIcon$2()[`RESULT_${type}`.toLocaleUpperCase()] : '']
-                            })
-                        ]),
-                    h('div', {
-                        class: 'vxe-result--title-wrapper'
-                    }, `${title || ''}`),
-                    h('div', {
-                        class: 'vxe-result--content-wrapper'
-                    }, `${content || ''}`),
-                    slotExtra
-                        ? h('div', {
-                            class: 'vxe-result--extra-wrapper'
-                        }, slotExtra({}))
-                        : renderEmptyElement$1($xeResult)
-                ])
-            ]);
-        };
-        $xeResult.renderVN = renderVN;
-        return $xeResult;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
-const VxeResult = Object.assign({}, VxeResultComponent, {
-    install(app) {
-        app.component(VxeResultComponent.name, VxeResultComponent);
-    }
-});
-dynamicApp.use(VxeResult);
-VxeUI.component(VxeResultComponent);
-const Result = VxeResult;
-
-/**
- * 计算滚动条滑块的长度
- */
-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;
-}
-
-const { getConfig: getConfig$1, createEvent, domUtils, globalResize, renderEmptyElement } = VxeUI;
-function createReactData$8() {
-    return {
-        yThumbHeight: 0,
-        xThumbWidth: 0
-    };
-}
-function createInternalData$7() {
-    return {
-        // resizeObserver: undefined,
-        // isThumbDrag: false,
-        thumbDragOffset: 0,
-        yThumbTop: 0,
-        xThumbLeft: 0,
-        lastScrollTop: 0,
-        lastScrollLeft: 0
-    };
-}
-var VxeScrollbarComponent = 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: () => getConfig$1().scrollbar.native
-        },
-        xConfig: Object,
-        yConfig: Object,
-        className: String,
-        viewClassName: String,
-        autoResize: {
-            type: Boolean,
-            default: () => getConfig$1().scrollbar.autoResize
-        },
-        syncResize: [Boolean, String, Number]
+dynamicApp.use(VxeRate);
+VxeUI.component(VxeRateComponent);
+const Rate = VxeRate;
+
+var VxeResultComponent = defineVxeComponent({
+    name: 'VxeResult',
+    props: {
+        imageUrl: String,
+        imageStyle: Object,
+        icon: String,
+        type: [String, Number],
+        status: [String, Number],
+        title: [String, Number],
+        content: [String, Number]
     },
-    emits: [
-        'scroll',
-        'scroll-boundary'
-    ],
+    emits: [],
     setup(props, context) {
         const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
         const refElem = ref();
-        const refViewElem = ref();
-        const refViewInnerElem = ref();
-        const refTrackXElem = ref();
-        const refTrackYElem = ref();
-        const refThumbXElem = ref();
-        const refThumbYElem = ref();
-        const reactData = reactive(createReactData$8());
-        const internalData = createInternalData$7();
-        const computeWrapperStyle = 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 = computed(() => {
-            const { native, className } = props;
-            const xOpts = computeXOpts.value;
-            const yOpts = computeYOpts.value;
-            return 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 = computed(() => {
-            const { viewClassName } = props;
-            return domUtils.buildClass([
-                'vxe-scrollbar--view',
-                viewClassName
-            ]);
-        });
-        const computeXOpts = computed(() => {
-            return Object.assign({}, getConfig$1().scrollbar.xConfig, props.xConfig);
-        });
-        const computeYOpts = computed(() => {
-            return Object.assign({}, getConfig$1().scrollbar.yConfig, props.yConfig);
-        });
+        const reactData = reactive({});
         const refMaps = {
             refElem
         };
         const computeMaps = {};
-        const $xeScrollbar = {
+        const $xeResult = {
             xID,
             props,
             context,
             reactData,
-            internalData,
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
         const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
-        };
-        const scrollbarMethods = {
-            dispatchEvent,
-            scrollTo(left, top) {
-                const viewEl = refViewElem.value;
-                if (viewEl) {
-                    if (XEUtils.isNumber(left)) {
-                        viewEl.scrollTo(left, top || 0);
-                    }
-                    else {
-                        viewEl.scrollTo(left);
-                    }
-                }
-            },
-            scrollIntoView() {
-                const viewEl = refViewElem.value;
-                if (viewEl) {
-                    viewEl.scrollIntoView();
-                }
-            },
-            recalculate() {
-                updateThumbSize();
-                updateThumbOffset();
-                return 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 = 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;
-                    }
-                }
-            }
-            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) {
-                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;
+            emit(type, createEvent$1(evnt, { $result: $xeResult }, params));
         };
-        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 resultMethods = {
+            dispatchEvent
         };
-        const scrollbarPrivateMethods = {};
-        Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
+        const resultPrivateMethods = {};
+        Object.assign($xeResult, resultMethods, resultPrivateMethods);
         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;
+            const { imageUrl, imageStyle, icon, title, type, content } = props;
+            const status = props.status || type;
+            const slotExtra = slots.extra;
             return h('div', {
                 ref: refElem,
-                class: wrapperClss,
-                style: wrapperStyle
+                class: ['vxe-result', {
+                        [`theme--${status}`]: status
+                    }]
             }, [
                 h('div', {
-                    ref: refViewElem,
-                    class: viewClss,
-                    onScroll: scrollEvent
-                }, autoResize
-                    ? [
-                        h('div', {
-                            key: 'vi',
-                            ref: refViewInnerElem,
-                            class: 'vxe-scrollbar--view-inner'
-                        }, defaultSlot ? defaultSlot({}) : [])
-                    ]
-                    : defaultSlot ? defaultSlot({}) : []),
-                native || xOpts.visible === 'hidden'
-                    ? renderEmptyElement($xeScrollbar)
-                    : h('div', {
-                        ref: refTrackXElem,
-                        class: 'vxe-scrollbar--track-x',
-                        onClick: clickTrackXEvent
-                    }, [
-                        h('div', {
-                            ref: refThumbXElem,
-                            class: 'vxe-scrollbar--thumb-x',
-                            onPointerdown: pointerdownThumbXEvent,
-                            onPointermove: pointermoveThumbXEvent,
-                            onPointerup: cleatPointerThumbEvent,
-                            onPointercancel: cleatPointerThumbEvent,
-                            onLostpointercapture: cleatPointerThumbEvent
-                        })
-                    ]),
-                native || yOpts.visible === 'hidden'
-                    ? 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(VxeLoading, {
-                    class: 'vxe-scrollbar--loading',
-                    modelValue: loading
-                })
+                    class: 'vxe-result--inner'
+                }, [
+                    imageUrl
+                        ? h('div', {
+                            class: 'vxe-result--img-wrapper'
+                        }, [
+                            h('img', {
+                                src: imageUrl,
+                                style: imageStyle
+                            })
+                        ])
+                        : h('div', {
+                            class: 'vxe-result--icon-wrapper'
+                        }, [
+                            h('i', {
+                                class: [icon, type ? getIcon$2()[`RESULT_${type}`.toLocaleUpperCase()] : '']
+                            })
+                        ]),
+                    h('div', {
+                        class: 'vxe-result--title-wrapper'
+                    }, `${title || ''}`),
+                    h('div', {
+                        class: 'vxe-result--content-wrapper'
+                    }, `${content || ''}`),
+                    slotExtra
+                        ? h('div', {
+                            class: 'vxe-result--extra-wrapper'
+                        }, slotExtra({}))
+                        : renderEmptyElement$1($xeResult)
+                ])
             ]);
         };
-        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(reFlag, () => {
-            $xeScrollbar.recalculate().then(() => {
-                $xeScrollbar.recalculate();
-            });
-        });
-        onMounted(() => {
-            const { autoResize } = props;
-            const viewEl = refViewElem.value;
-            const viewInnerEl = refViewInnerElem.value;
-            if (autoResize) {
-                const resizeObserver = globalResize.create(() => {
-                    if (props.autoResize) {
-                        reFlag.value++;
-                    }
-                });
-                if (viewEl) {
-                    resizeObserver.observe(viewEl);
-                }
-                if (viewInnerEl) {
-                    resizeObserver.observe(viewInnerEl);
-                }
-                internalData.resizeObserver = resizeObserver;
-            }
-            reFlag.value++;
-        });
-        onBeforeUnmount(() => {
-            const { resizeObserver } = internalData;
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-        });
-        $xeScrollbar.renderVN = renderVN;
-        return $xeScrollbar;
+        $xeResult.renderVN = renderVN;
+        return $xeResult;
     },
     render() {
         return this.renderVN();
     }
 });
 
-const VxeScrollbar = Object.assign({}, VxeScrollbarComponent, {
+const VxeResult = Object.assign({}, VxeResultComponent, {
     install(app) {
-        app.component(VxeScrollbarComponent.name, VxeScrollbarComponent);
+        app.component(VxeResultComponent.name, VxeResultComponent);
     }
 });
-dynamicApp.use(VxeScrollbar);
-VxeUI.component(VxeScrollbarComponent);
-const Scrollbar = VxeScrollbar;
+dynamicApp.use(VxeResult);
+VxeUI.component(VxeResultComponent);
+const Result = VxeResult;
 
 var VxeRowComponent = defineVxeComponent({
     name: 'VxeRow',
@@ -41474,7 +41570,7 @@ var VxeTabsComponent = defineVxeComponent({
                     : renderEmptyElement$1($xeTabs),
                 showLoading && isLoading
                     ? renderEmptyElement$1($xeTabs)
-                    : h(VxeLoadingComponent, {
+                    : h(VxeLoading, {
                         class: 'vxe-tabs--loading',
                         modelValue: isLoading
                     })
@@ -42002,15 +42098,6 @@ dynamicApp.use(VxeTextEllipsis);
 VxeUI.component(VxeTextEllipsisComponent);
 const TextEllipsis = VxeTextEllipsis;
 
-const VxeText = Object.assign({}, VxeTextComponent, {
-    install(app) {
-        app.component(VxeTextComponent.name, VxeTextComponent);
-    }
-});
-dynamicApp.use(VxeText);
-VxeUI.component(VxeTextComponent);
-const Text = VxeText;
-
 const { warnLog: warnLog$3 } = createComponentLog('textarea');
 let autoTxtElem;
 var VxeTextareaComponent = defineVxeComponent({
@@ -48798,7 +48885,7 @@ var VxeUploadComponent = defineVxeComponent({
                             ? h('div', {
                                 class: 'vxe-upload--file-item-rebtn'
                             }, [
-                                h(VxeButtonComponent, {
+                                h(VxeButton, {
                                     icon: isError ? getIcon$2().UPLOAD_IMAGE_RE_UPLOAD : getIcon$2().UPLOAD_IMAGE_UPLOAD,
                                     mode: 'text',
                                     status: 'primary',
@@ -48871,7 +48958,7 @@ var VxeUploadComponent = defineVxeComponent({
                     }, defaultSlot
                         ? getSlotVNs(defaultSlot({ isMoreView, options: fileList, $upload: $xeUpload }))
                         : [
-                            h(VxeButtonComponent, {
+                            h(VxeButton, {
                                 class: 'vxe-upload--file-action-button',
                                 content: (isMoreView || showButtonText) ? (buttonText ? `${XEUtils.isFunction(buttonText) ? buttonText({}) : buttonText}` : getI18n$2('vxe.upload.fileBtnText')) : '',
                                 icon: showButtonIcon ? (buttonIcon || getIcon$2().UPLOAD_FILE_ADD) : '',
@@ -48934,7 +49021,7 @@ var VxeUploadComponent = defineVxeComponent({
                             }, moreBtnSlot
                                 ? getSlotVNs(moreBtnSlot({ options: fileList }))
                                 : [
-                                    h(VxeButtonComponent, {
+                                    h(VxeButton, {
                                         mode: 'text',
                                         content: moreButtonText ? (XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length])) : getI18n$2(isMoreMax && isMiniMore ? 'vxe.upload.moreFileBtnText' : 'vxe.upload.moreBtnText', [fileList.length]),
                                         status: 'primary',
@@ -49029,7 +49116,7 @@ var VxeUploadComponent = defineVxeComponent({
                                 ? h('div', {
                                     class: 'vxe-upload--image-item-rebtn'
                                 }, [
-                                    h(VxeButtonComponent, {
+                                    h(VxeButton, {
                                         icon: isError ? getIcon$2().UPLOAD_IMAGE_RE_UPLOAD : getIcon$2().UPLOAD_IMAGE_UPLOAD,
                                         mode: 'text',
                                         status: 'primary',
@@ -49156,7 +49243,7 @@ var VxeUploadComponent = defineVxeComponent({
                                     }, moreBtnSlot
                                         ? getSlotVNs(moreBtnSlot({ options: fileList }))
                                         : [
-                                            h(VxeButtonComponent, {
+                                            h(VxeButton, {
                                                 mode: 'text',
                                                 content: moreButtonText ? (XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length])) : getI18n$2(isMoreMax && isMiniMore ? 'vxe.upload.moreImgBtnText' : 'vxe.upload.moreBtnText', [fileList.length]),
                                                 status: 'primary',
@@ -49176,7 +49263,7 @@ var VxeUploadComponent = defineVxeComponent({
                                 }, moreBtnSlot
                                     ? getSlotVNs(moreBtnSlot({ options: fileList }))
                                     : [
-                                        h(VxeButtonComponent, {
+                                        h(VxeButton, {
                                             mode: 'text',
                                             content: moreButtonText ? (XEUtils.isFunction(moreButtonText) ? moreButtonText({ $upload: $xeUpload, options: fileList }) : XEUtils.toFormatString(moreButtonText, [fileList.length])) : getI18n$2(isMoreMax && isMiniMore ? 'vxe.upload.moreImgBtnText' : 'vxe.upload.moreBtnText', [fileList.length]),
                                             status: 'primary',