vxe-pc-ui 4.19.7 → 4.20.0

package/dist/all.esm.js

@@ -1,5 +1,5 @@
 import * as core from '@vxe-ui/core';
-import { VxeUI, setConfig as setConfig$1, setIcon, getConfig as getConfig$4, createEvent as createEvent$1, getIcon as getIcon$2, renderEmptyElement as renderEmptyElement$1, useSize, globalEvents as globalEvents$1, usePermission, permission, renderer, getI18n as getI18n$2, globalResize as globalResize$1, menus as menus$3, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
+import { VxeUI, setConfig as setConfig$1, setIcon, getConfig as getConfig$4, createEvent as createEvent$1, getIcon as getIcon$2, renderEmptyElement as renderEmptyElement$1, useSize, globalEvents as globalEvents$1, usePermission, permission, renderer, getI18n as getI18n$2, domUtils as domUtils$1, globalResize as globalResize$1, menus as menus$3, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
 export * from '@vxe-ui/core';
 import { defineComponent, ref, reactive, h, createCommentVNode, createApp, inject, computed, watch, onMounted, onUnmounted, provide, nextTick, onBeforeUnmount, resolveComponent, Teleport, onActivated, onDeactivated, TransitionGroup } from 'vue';
 import XEUtils from 'xe-utils';
@@ -101,7 +101,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.19.7"}`;
+const uiVersion = `ui v${"4.20.0"}`;
 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$j = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.19.7";
+const version = "4.20.0";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -6402,235 +6402,225 @@ VxeUI.component(VxeLoadingComponent);
 VxeUI.loading = LoadingController;
 const Loading = VxeLoading;
 
-var VxeCardComponent = defineVxeComponent({
-    name: 'VxeCard',
+/**
+ * 计算滚动条滑块的长度
+ */
+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$2, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
+function createReactData$n() {
+    return {
+        yThumbHeight: 0,
+        xThumbWidth: 0
+    };
+}
+function createInternalData$m() {
+    return {
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
+        lastScrollTop: 0,
+        lastScrollLeft: 0
+    };
+}
+var VxeScrollbarComponent = defineVxeComponent({
+    name: 'VxeScrollbar',
     props: {
-        title: String,
-        showTitleOverflow: {
-            type: Boolean,
-            default: () => getConfig$4().card.showTitleOverflow
-        },
+        id: [String, Number],
         width: [String, Number],
         height: [String, Number],
-        border: {
-            type: Boolean,
-            default: () => getConfig$4().card.border
-        },
+        minWidth: [String, Number],
+        minHeight: [String, Number],
+        maxWidth: [String, Number],
+        maxHeight: [String, Number],
         loading: Boolean,
-        shadow: {
+        native: {
             type: Boolean,
-            default: () => getConfig$4().card.shadow
+            default: () => getConfig$2().scrollbar.native
         },
         padding: {
             type: Boolean,
-            default: () => getConfig$4().card.padding
+            default: () => getConfig$2().scrollbar.padding
         },
-        size: {
+        xConfig: Object,
+        yConfig: Object,
+        className: {
             type: String,
-            default: () => getConfig$4().card.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 computeCardStyle = computed(() => {
-            const { height, width } = props;
-            const stys = {};
-            if (width) {
-                stys.width = toCssUnit(width);
-            }
-            if (height) {
-                stys.height = toCssUnit(height);
-            }
-            return stys;
-        });
-        const computeMaps = {
-            computeSize
-        };
-        const $xeCard = {
-            xID,
-            props,
-            context,
-            reactData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $card: $xeCard }, params));
-        };
-        const cardMethods = {
-            dispatchEvent
-        };
-        const cardPrivateMethods = {};
-        Object.assign($xeCard, cardMethods, cardPrivateMethods);
-        const renderVN = () => {
-            const { title, border, shadow, padding, loading, showTitleOverflow } = props;
-            const defaultSlot = slots.default;
-            const headerSlot = slots.header;
-            const titleSlot = slots.title;
-            const extraSlot = slots.extra;
-            const footerSlot = slots.footer;
-            const leftSlot = slots.left;
-            const rightSlot = slots.right;
-            const vSize = computeSize.value;
-            const cardStyle = computeCardStyle.value;
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-card', {
-                        [`size--${vSize}`]: vSize,
-                        'is--border': border,
-                        'is--shadow': shadow,
-                        'is--padding': padding
-                    }],
-                style: cardStyle
-            }, [
-                title || titleSlot || headerSlot
-                    ? h('div', {
-                        class: 'vxe-card--header'
-                    }, headerSlot
-                        ? getSlotVNs(headerSlot({}))
-                        : [
-                            h('div', {
-                                class: ['vxe-card--header-title', {
-                                        'is--ellipsis': showTitleOverflow
-                                    }]
-                            }, titleSlot ? getSlotVNs(titleSlot({})) : `${title || ''}`),
-                            extraSlot
-                                ? h('div', {
-                                    class: 'vxe-card--header-extra'
-                                }, getSlotVNs(extraSlot({})))
-                                : renderEmptyElement$1($xeCard)
-                        ])
-                    : renderEmptyElement$1($xeCard),
-                h('div', {
-                    class: 'vxe-card--body'
-                }, [
-                    leftSlot
-                        ? h('div', {
-                            class: 'vxe-card--body-left'
-                        }, getSlotVNs(leftSlot({})))
-                        : renderEmptyElement$1($xeCard),
-                    h('div', {
-                        class: 'vxe-card--body-content'
-                    }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
-                    rightSlot
-                        ? h('div', {
-                            class: 'vxe-card--body-right'
-                        }, getSlotVNs(rightSlot({})))
-                        : renderEmptyElement$1($xeCard)
-                ]),
-                footerSlot
-                    ? h('div', {
-                        class: 'vxe-card--footer'
-                    }, getSlotVNs(footerSlot({})))
-                    : renderEmptyElement$1($xeCard),
-                /**
-                 * 加载中
-                 */
-                h(VxeLoading, {
-                    class: 'vxe-card--loading',
-                    modelValue: loading
-                })
-            ]);
-        };
-        $xeCard.renderVN = renderVN;
-        return $xeCard;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
-const VxeCard = Object.assign({}, VxeCardComponent, {
-    install(app) {
-        app.component(VxeCardComponent.name, VxeCardComponent);
-    }
-});
-dynamicApp.use(VxeCard);
-VxeUI.component(VxeCardComponent);
-const Card = VxeCard;
-
-var VxeCarouselComponent = defineVxeComponent({
-    name: 'VxeCarousel',
-    props: {
-        modelValue: [String, Number],
-        options: Array,
-        loading: Boolean,
-        height: {
-            type: [Number, String],
-            default: () => getConfig$4().carousel.height
-        },
-        width: {
-            type: [Number, String],
-            default: () => getConfig$4().carousel.width
+            default: () => getConfig$2().scrollbar.className
         },
-        autoPlay: {
-            type: Boolean,
-            default: () => getConfig$4().carousel.autoPlay
+        viewAttrs: {
+            type: Object,
+            default: () => getConfig$2().scrollbar.viewAttrs
         },
-        interval: {
-            type: [Number, String],
-            default: () => getConfig$4().carousel.interval
+        viewClassName: {
+            type: String,
+            default: () => getConfig$2().scrollbar.viewClassName
         },
-        loop: {
-            type: Boolean,
-            default: () => getConfig$4().carousel.loop
+        viewInnerClassName: {
+            type: String,
+            default: () => getConfig$2().scrollbar.viewInnerClassName
         },
-        vertical: {
+        autoResize: {
             type: Boolean,
-            default: () => getConfig$4().carousel.vertical
+            default: () => getConfig$2().scrollbar.autoResize
         },
-        showIndicators: {
-            type: Boolean,
-            default: () => getConfig$4().carousel.showIndicators
-        }
+        syncResize: [Boolean, String, Number]
     },
     emits: [
-        'update:modelValue',
-        'change'
+        'scroll',
+        'scroll-boundary'
     ],
     setup(props, context) {
         const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
         const refElem = ref();
-        const refWrapperElem = ref();
-        const reactData = reactive({
-            activeName: '',
-            staticItems: [],
-            itemWidth: 0,
-            itemHeight: 0
-        });
-        const internalData = {
-            apTimeout: undefined,
-            stopFlag: false
-        };
-        const refMaps = {
-            refElem
-        };
-        const computeListStyle = computed(() => {
-            const { vertical, options } = props;
-            const { activeName, itemWidth, itemHeight, staticItems } = reactData;
-            const list = (staticItems && staticItems.length ? staticItems : options) || [];
-            const activeIndex = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName));
+        const refViewElem = ref();
+        const refViewInnerElem = ref();
+        const refTrackXElem = ref();
+        const refTrackYElem = ref();
+        const refThumbXElem = ref();
+        const refThumbYElem = ref();
+        const reactData = reactive(createReactData$n());
+        const internalData = createInternalData$m();
+        const computeWrapperStyle = computed(() => {
+            const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
             const stys = {};
-            if (vertical) {
-                stys.transform = `translateY(-${activeIndex * itemHeight}px)`;
+            if (width) {
+                stys.width = toCssUnit(width);
             }
-            else {
-                stys.width = `${itemWidth * list.length}px`;
-                stys.transform = `translateX(-${activeIndex * itemWidth}px)`;
+            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, padding } = props;
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            const xToTop = computeXToTop.value;
+            const yToLeft = computeYToLeft.value;
+            return domUtils.buildClass([
+                'vxe-scrollbar',
+                `ov-x--${xOpts.visible || 'visible'}`,
+                `ov-y--${yOpts.visible || 'visible'}`,
+                `sx-pos--${xToTop ? 'top' : 'bottom'}`,
+                `sy-pos--${yToLeft ? 'left' : 'right'}`,
+                native ? 'is--native' : 'is--virtual',
+                className
+            ], {
+                'is--padding': padding,
+                '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
+            ]);
+        });
+        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 computeXToTop = computed(() => {
+            const xOpts = computeXOpts.value;
+            return xOpts.position === 'top';
+        });
+        const computeYToLeft = computed(() => {
+            const yOpts = computeYOpts.value;
+            return yOpts.position === 'left';
+        });
+        const refMaps = {
+            refElem
+        };
         const computeMaps = {};
-        const $xeCarousel = {
+        const $xeScrollbar = {
             xID,
             props,
             context,
@@ -6639,675 +6629,1433 @@ var VxeCarouselComponent = defineVxeComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
-        const updateStyle = () => {
-            nextTick(() => {
-                const wrapperElem = refWrapperElem.value;
-                if (wrapperElem) {
-                    reactData.itemWidth = wrapperElem.clientWidth;
-                    reactData.itemHeight = wrapperElem.clientHeight;
-                }
-            });
-        };
-        const clickItemEvent = (evnt, item) => {
-            const value = item.name;
-            reactData.activeName = item.name;
-            emit('update:modelValue', value);
-            emit('change', { value }, evnt);
-            updateStyle();
-        };
-        const initDefaultActive = (list) => {
-            let activeName = null;
-            if (list && list.length) {
-                let validVal = false;
-                activeName = props.modelValue;
-                list.forEach((item) => {
-                    if (activeName === item.name) {
-                        validVal = true;
-                    }
-                });
-                if (!validVal) {
-                    activeName = list[0].name;
-                    emit('update:modelValue', activeName);
-                }
-            }
-            reactData.activeName = activeName;
-        };
         const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $carousel: $xeCarousel }, params));
+            emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
         };
-        const handlePrevNext = (isNext) => {
-            const { options, loop } = props;
-            const { activeName, staticItems } = reactData;
-            const list = (staticItems && staticItems.length ? staticItems : options) || [];
-            const index = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName));
-            if (index > -1) {
-                let item = null;
-                if (isNext) {
-                    if (index < list.length - 1) {
-                        item = list[index + 1];
+        const scrollbarMethods = {
+            dispatchEvent,
+            scrollTo(left, top) {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    if (XEUtils.isNumber(left)) {
+                        viewEl.scrollTo(left, top || 0);
                     }
                     else {
-                        if (loop) {
-                            item = list[0];
-                        }
+                        viewEl.scrollTo(left);
                     }
                 }
-                else {
-                    if (index > 0) {
-                        item = list[index - 1];
-                    }
-                    else {
-                        if (loop) {
-                            item = list[list.length - 1];
-                        }
-                    }
+            },
+            scrollIntoView() {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    viewEl.scrollIntoView();
                 }
-                if (item) {
-                    const name = item.name;
-                    const value = name;
-                    reactData.activeName = name;
-                    emit('update:modelValue', value);
-                    return true;
+            },
+            setScrollTop(top) {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    viewEl.scrollTop = top;
                 }
-            }
-            return false;
-        };
-        const carouselMethods = {
-            dispatchEvent,
-            prev() {
-                if (handlePrevNext(false)) {
-                    handleAutoPlay();
+            },
+            setScrollLeft(left) {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    viewEl.scrollLeft = left;
                 }
-                return nextTick();
             },
-            next() {
-                if (handlePrevNext(true)) {
-                    handleAutoPlay();
+            getScrollTop() {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    return viewEl.scrollTop;
+                }
+                return 0;
+            },
+            getScrollLeft() {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    return viewEl.scrollLeft;
+                }
+                return 0;
+            },
+            clearScroll() {
+                const viewEl = refViewElem.value;
+                if (viewEl) {
+                    viewEl.scrollTop = 0;
+                    viewEl.scrollLeft = 0;
                 }
+            },
+            recalculate() {
+                updateThumbSize();
+                updateThumbOffset();
                 return nextTick();
             }
         };
-        const prevEvent = (evnt) => {
-            if (handlePrevNext(false)) {
-                const value = reactData.activeName;
-                emit('change', { value }, evnt);
+        const updateThumbSize = () => {
+            const viewEl = refViewElem.value;
+            if (!viewEl) {
+                return;
             }
-        };
-        const nextEvent = (evnt) => {
-            if (handlePrevNext(true)) {
-                const value = reactData.activeName;
-                emit('change', { value }, evnt);
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                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 stopAutoPlay = () => {
-            const { apTimeout } = internalData;
-            internalData.stopFlag = true;
-            if (apTimeout) {
-                clearTimeout(apTimeout);
-                internalData.apTimeout = undefined;
+        const updateThumbOffset = () => {
+            const viewEl = refViewElem.value;
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                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 handleAutoPlay = () => {
-            const { autoPlay, interval } = props;
-            const { stopFlag } = internalData;
-            stopAutoPlay();
-            if (autoPlay) {
-                internalData.stopFlag = false;
-                internalData.apTimeout = setTimeout(() => {
-                    if (!stopFlag) {
-                        handlePrevNext(true);
+        const scrollEvent = (evnt) => {
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const { lastScrollTop, lastScrollLeft } = internalData;
+            const xOpts = computeXOpts.value;
+            const yOpts = computeYOpts.value;
+            const viewEl = evnt.currentTarget;
+            const { scrollTop, scrollLeft, clientWidth, clientHeight, scrollHeight, scrollWidth } = viewEl;
+            let direction = '';
+            let isTopBoundary = false;
+            let isBottomBoundary = false;
+            let isLeftBoundary = false;
+            let isRightBoundary = false;
+            if (lastScrollTop !== scrollTop) {
+                const yThreshold = XEUtils.toNumber(yOpts.threshold) || 1;
+                if (lastScrollTop < scrollTop) {
+                    direction = 'bottom';
+                    if (yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight - yThreshold) {
+                        isBottomBoundary = true;
                     }
-                }, XEUtils.toNumber(interval) || 300);
+                }
+                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 mouseenterEvent = () => {
-            stopAutoPlay();
+        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 mouseleaveEvent = () => {
-            handleAutoPlay();
+        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 carouselPrivateMethods = {};
-        const callSlot = (slotFunc, params) => {
-            if (slotFunc) {
-                if (XEUtils.isString(slotFunc)) {
-                    slotFunc = slots[slotFunc] || null;
-                }
-                if (XEUtils.isFunction(slotFunc)) {
-                    return getSlotVNs(slotFunc(params));
+        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);
             }
-            return [];
         };
-        Object.assign($xeCarousel, carouselMethods, carouselPrivateMethods);
-        const renderItemWrapper = (list) => {
-            const { height } = props;
-            const { activeName } = reactData;
-            const listStyle = computeListStyle.value;
-            return h('div', {
-                class: 'vxe-carousel--list',
-                style: listStyle
-            }, list.map(item => {
-                const { name, url, slots } = item;
-                const defaultSlot = slots ? slots.default : null;
-                return h('div', {
-                    key: `${name}`,
-                    class: ['vxe-carousel--item-inner', {
-                            'is--active': activeName === name
-                        }],
-                    style: height
-                        ? {
-                            height: toCssUnit(height)
-                        }
-                        : null
-                }, defaultSlot
-                    ? callSlot(defaultSlot, {})
-                    : [
-                        h('img', {
-                            class: 'vxe-carousel--item-img',
-                            src: url
-                        })
-                    ]);
-            }));
+        const cleatPointerThumbEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
         };
-        const renderIndicators = (list) => {
-            const { activeName } = reactData;
-            return h('div', {
-                class: 'vxe-carousel--indicators'
-            }, list.map((item) => {
-                const { name } = item;
-                return h('div', {
-                    key: `${name}`,
-                    class: ['vxe-carousel--indicators-item', {
-                            'is--active': activeName === name
-                        }],
-                    onClick(evnt) {
-                        clickItemEvent(evnt, item);
-                    }
-                });
-            }));
+        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 { loading, height, width, showIndicators, vertical, options } = props;
-            const { staticItems } = reactData;
+            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;
-            const list = (staticItems && staticItems.length ? staticItems : options) || [];
             return h('div', {
                 ref: refElem,
-                class: ['vxe-carousel', `is--${vertical ? 'vertical' : 'horizontal'}`],
-                style: width
-                    ? {
-                        width: toCssUnit(width)
-                    }
-                    : null,
-                onMouseenter: mouseenterEvent,
-                onMouseleave: mouseleaveEvent
+                id: id || null,
+                class: wrapperClss,
+                style: wrapperStyle
             }, [
-                h('div', {
-                    class: 'vxe-carousel--slots'
-                }, defaultSlot ? defaultSlot({}) : []),
-                h('div', {
-                    ref: refWrapperElem,
-                    class: 'vxe-carousel--item-wrapper',
-                    style: height
-                        ? {
-                            height: toCssUnit(height)
-                        }
-                        : null
-                }, [
-                    renderItemWrapper(list)
-                ]),
-                showIndicators ? renderIndicators(list) : renderEmptyElement$1($xeCarousel),
-                h('div', {
-                    class: 'vxe-carousel--btn-wrapper'
-                }, [
+                h('div', Object.assign({ ref: refViewElem, class: viewClss, onScroll: scrollEvent }, viewAttrs), [
                     h('div', {
-                        class: 'vxe-carousel--previous-btn',
-                        onClick: prevEvent
+                        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('i', {
-                            class: vertical ? getIcon$2().CAROUSEL_VERTICAL_PREVIOUS : getIcon$2().CAROUSEL_HORIZONTAL_PREVIOUS
+                        h('div', {
+                            ref: refThumbXElem,
+                            class: 'vxe-scrollbar--thumb-x',
+                            onPointerdown: pointerdownThumbXEvent,
+                            onPointermove: pointermoveThumbXEvent,
+                            onPointerup: cleatPointerThumbEvent,
+                            onPointercancel: cleatPointerThumbEvent,
+                            onLostpointercapture: cleatPointerThumbEvent
                         })
                     ]),
-                    h('div', {
-                        class: 'vxe-carousel--next-btn',
-                        onClick: nextEvent
+                native || yOpts.visible === 'hidden'
+                    ? renderEmptyElement($xeScrollbar)
+                    : h('div', {
+                        ref: refTrackYElem,
+                        class: 'vxe-scrollbar--track-y',
+                        onClick: clickTrackYEvent
                     }, [
-                        h('i', {
-                            class: vertical ? getIcon$2().CAROUSEL_VERTICAL_NEXT : getIcon$2().CAROUSEL_HORIZONTAL_NEXT
+                        h('div', {
+                            ref: refThumbYElem,
+                            class: 'vxe-scrollbar--thumb-y',
+                            onPointerdown: pointerdownThumbYEvent,
+                            onPointermove: pointermoveThumbYEvent,
+                            onPointerup: cleatPointerThumbEvent,
+                            onPointercancel: cleatPointerThumbEvent,
+                            onLostpointercapture: cleatPointerThumbEvent
                         })
-                    ])
-                ]),
-                /**
-                 * 加载中
-                 */
+                    ]),
                 h(VxeLoading, {
-                    class: 'vxe-carousel--loading',
+                    class: 'vxe-scrollbar--loading',
                     modelValue: loading
                 })
             ]);
         };
-        const optsFlag = ref(0);
-        watch(() => props.options ? props.options.length : -1, () => {
-            optsFlag.value++;
+        const reFlag = ref(0);
+        watch(() => props.height, () => {
+            reFlag.value++;
         });
-        watch(() => props.options, () => {
-            optsFlag.value++;
+        watch(() => props.width, () => {
+            reFlag.value++;
         });
-        watch(optsFlag, () => {
-            initDefaultActive(props.options);
+        watch(() => props.minHeight, () => {
+            reFlag.value++;
         });
-        const stFlag = ref(0);
-        watch(() => reactData.staticItems ? reactData.staticItems.length : -1, () => {
-            stFlag.value++;
+        watch(() => props.minWidth, () => {
+            reFlag.value++;
         });
-        watch(() => reactData.staticItems, () => {
-            stFlag.value++;
+        watch(() => props.maxHeight, () => {
+            reFlag.value++;
         });
-        watch(stFlag, () => {
-            initDefaultActive(reactData.staticItems);
+        watch(() => props.maxWidth, () => {
+            reFlag.value++;
         });
-        watch(() => props.autoPlay, () => {
-            handleAutoPlay();
+        watch(() => props.native, () => {
+            reFlag.value++;
+        });
+        watch(() => props.syncResize, () => {
+            reFlag.value++;
+        });
+        watch(reFlag, () => {
+            $xeScrollbar.recalculate().then(() => {
+                $xeScrollbar.recalculate();
+            });
         });
-        initDefaultActive(reactData.staticItems.length ? reactData.staticItems : props.options);
         onMounted(() => {
-            handleAutoPlay();
-            updateStyle();
+            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++;
+            globalEvents.on($xeScrollbar, 'resize', () => {
+                reFlag.value++;
+            });
         });
-        onUnmounted(() => {
-            stopAutoPlay();
+        onBeforeUnmount(() => {
+            const { resizeObserver } = internalData;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            globalEvents.off($xeScrollbar, 'resize');
         });
-        provide('$xeCarousel', $xeCarousel);
-        $xeCarousel.renderVN = renderVN;
-        return $xeCarousel;
+        $xeScrollbar.renderVN = renderVN;
+        return $xeScrollbar;
     },
     render() {
         return this.renderVN();
     }
 });
 
-const VxeCarousel = Object.assign({}, VxeCarouselComponent, {
+const VxeScrollbar = Object.assign({}, VxeScrollbarComponent, {
     install(app) {
-        app.component(VxeCarouselComponent.name, VxeCarouselComponent);
+        app.component(VxeScrollbarComponent.name, VxeScrollbarComponent);
     }
 });
-dynamicApp.use(VxeCarousel);
-VxeUI.component(VxeCarouselComponent);
-const Carousel = VxeCarousel;
-
-function assembleCarouselItem($xeCarousel, elem, itemConfig) {
-    const staticItems = $xeCarousel.reactData.staticItems;
-    const parentElem = elem.parentNode;
-    if (parentElem) {
-        staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, itemConfig);
-    }
-    $xeCarousel.reactData.staticItems = staticItems.slice(0);
-}
-function destroyCarouselItem($xeCarousel, itemConfig) {
-    const staticItems = $xeCarousel.reactData.staticItems;
-    const index = XEUtils.findIndexOf(staticItems, item => item.id === itemConfig.id);
-    if (index > -1) {
-        staticItems.splice(index, 1);
-    }
-    $xeCarousel.reactData.staticItems = staticItems.slice(0);
-}
+dynamicApp.use(VxeScrollbar);
+VxeUI.component(VxeScrollbarComponent);
+const Scrollbar = VxeScrollbar;
 
-var VxeCarouselItemComponent = defineVxeComponent({
-    name: 'VxeCarouselItem',
+var VxeCardComponent = defineVxeComponent({
+    name: 'VxeCard',
     props: {
-        name: [String, Number],
-        className: String,
-        url: String
-    },
-    emits: [],
-    setup(props, context) {
-        const { slots, emit } = context;
-        const $xeCarousel = inject('$xeCarousel', null);
-        const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const reactData = reactive({});
-        const itemConfig = reactive({
-            id: xID,
-            name: props.name,
-            url: props.url,
-            className: props.className,
-            slots
-        });
-        const refMaps = {
-            refElem
-        };
-        const computeMaps = {};
-        const $xeCarouselItem = {
-            xID,
-            props,
-            context,
+        title: String,
+        showTitleOverflow: {
+            type: Boolean,
+            default: () => getConfig$4().card.showTitleOverflow
+        },
+        width: [String, Number],
+        height: [String, Number],
+        border: {
+            type: Boolean,
+            default: () => getConfig$4().card.border
+        },
+        loading: Boolean,
+        shadow: {
+            type: Boolean,
+            default: () => getConfig$4().card.shadow
+        },
+        padding: {
+            type: Boolean,
+            default: () => getConfig$4().card.padding
+        },
+        size: {
+            type: String,
+            default: () => getConfig$4().card.size || getConfig$4().size
+        },
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$4().card.useScrollbar
+        },
+        scrollbarConfig: Object
+    },
+    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 computeCardStyle = computed(() => {
+            const { height, width } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            return stys;
+        });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().card.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeMaps = {
+            computeSize
+        };
+        const $xeCard = {
+            xID,
+            props,
+            context,
             reactData,
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
         const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $carouselItem: $xeCarouselItem }, params));
+            emit(type, createEvent$1(evnt, { $card: $xeCard }, params));
         };
-        const carouselItemMethods = {
+        const cardMethods = {
             dispatchEvent
         };
-        const carouselItemPrivateMethods = {};
-        Object.assign($xeCarouselItem, carouselItemMethods, carouselItemPrivateMethods);
+        const cardPrivateMethods = {};
+        Object.assign($xeCard, cardMethods, cardPrivateMethods);
         const renderVN = () => {
+            const { title, border, shadow, padding, loading, showTitleOverflow, useScrollbar } = props;
+            const defaultSlot = slots.default;
+            const headerSlot = slots.header;
+            const titleSlot = slots.title;
+            const extraSlot = slots.extra;
+            const footerSlot = slots.footer;
+            const leftSlot = slots.left;
+            const rightSlot = slots.right;
+            const vSize = computeSize.value;
+            const cardStyle = computeCardStyle.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { viewClassName, viewInnerClassName } = scrollbarOpts;
             return h('div', {
-                ref: refElem
-            });
+                ref: refElem,
+                class: ['vxe-card', {
+                        [`size--${vSize}`]: vSize,
+                        'is--border': border,
+                        'is--shadow': shadow,
+                        'is--padding': padding
+                    }],
+                style: cardStyle
+            }, [
+                title || titleSlot || headerSlot
+                    ? h('div', {
+                        class: 'vxe-card--header'
+                    }, headerSlot
+                        ? getSlotVNs(headerSlot({}))
+                        : [
+                            h('div', {
+                                class: ['vxe-card--header-title', {
+                                        'is--ellipsis': showTitleOverflow
+                                    }]
+                            }, titleSlot ? getSlotVNs(titleSlot({})) : `${title || ''}`),
+                            extraSlot
+                                ? h('div', {
+                                    class: 'vxe-card--header-extra'
+                                }, getSlotVNs(extraSlot({})))
+                                : renderEmptyElement$1($xeCard)
+                        ])
+                    : renderEmptyElement$1($xeCard),
+                h('div', {
+                    class: 'vxe-card--body'
+                }, [
+                    leftSlot
+                        ? (useScrollbar
+                            ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-left' }, scrollbarOpts), { viewClassName: 'vxe-card--body-scrollbar-left-view', viewInnerClassName: 'vxe-card--body-scrollbar-left-inner' }), {
+                                default: () => getSlotVNs(leftSlot({}))
+                            })
+                            : h('div', {
+                                class: 'vxe-card--body-left'
+                            }, getSlotVNs(leftSlot({}))))
+                        : renderEmptyElement$1($xeCard),
+                    useScrollbar
+                        ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-content' }, scrollbarOpts), { viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
+                            default: () => defaultSlot ? getSlotVNs(defaultSlot({})) : []
+                        })
+                        : h('div', {
+                            class: 'vxe-card--body-content'
+                        }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
+                    rightSlot
+                        ? (useScrollbar
+                            ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-right' }, scrollbarOpts), { viewClassName: 'vxe-card--body-scrollbar-right-view', viewInnerClassName: 'vxe-card--body-scrollbar-right-inner' }), {
+                                default: () => getSlotVNs(rightSlot({}))
+                            })
+                            : h('div', {
+                                class: 'vxe-card--body-right'
+                            }, getSlotVNs(rightSlot({}))))
+                        : renderEmptyElement$1($xeCard)
+                ]),
+                footerSlot
+                    ? h('div', {
+                        class: 'vxe-card--footer'
+                    }, getSlotVNs(footerSlot({})))
+                    : renderEmptyElement$1($xeCard),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoading, {
+                    class: 'vxe-card--loading',
+                    modelValue: loading
+                })
+            ]);
         };
-        watch(() => props.name, (val) => {
-            itemConfig.name = val;
-        });
-        watch(() => props.url, (val) => {
-            itemConfig.url = val;
-        });
-        onMounted(() => {
-            const elem = refElem.value;
-            if ($xeCarousel && elem) {
-                assembleCarouselItem($xeCarousel, elem, itemConfig);
-            }
-        });
-        onUnmounted(() => {
-            if ($xeCarousel) {
-                destroyCarouselItem($xeCarousel, itemConfig);
-            }
-        });
-        $xeCarouselItem.renderVN = renderVN;
-        return $xeCarouselItem;
+        $xeCard.renderVN = renderVN;
+        return $xeCard;
     },
     render() {
         return this.renderVN();
     }
 });
 
-const VxeCarouselItem = Object.assign({}, VxeCarouselItemComponent, {
+const VxeCard = Object.assign({}, VxeCardComponent, {
     install(app) {
-        app.component(VxeCarouselItemComponent.name, VxeCarouselItemComponent);
+        app.component(VxeCardComponent.name, VxeCardComponent);
     }
 });
-dynamicApp.use(VxeCarouselItem);
-VxeUI.component(VxeCarouselItemComponent);
-const CarouselItem = VxeCarouselItem;
-
-function enNodeValue(nodeid) {
-    return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(`${nodeid}`);
-}
-function deNodeValue(nodeid) {
-    return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
-}
-
-// 跨列表拖拽
-const crossListDragRowInfo = reactive({
-    row: null
-});
-function getCrossListDragRowInfo() {
-    return crossListDragRowInfo;
-}
-
-const rowMoveCls = 'row--drag-move';
-/**
- * 上下拖拽
- */
-function moveRowAnimateToTb(elemList, offsetTop) {
-    XEUtils.arrayEach(elemList, trEl => {
-        trEl.style.transform = `translateY(${offsetTop}px)`;
-    });
-    requestAnimationFrame(() => {
-        XEUtils.arrayEach(elemList, trEl => {
-            addClass(trEl, rowMoveCls);
-            trEl.style.transform = '';
-        });
-    });
-}
-function clearRowAnimate(elem, clss) {
-    setTimeout(() => {
-        if (elem) {
-            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls));
-        }
-    }, 500);
-}
-
-function getItemCacheObj$1(item) {
-    return {
-        item,
-        index: -1,
-        $index: -1,
-        _index: -1
-    };
-}
+dynamicApp.use(VxeCard);
+VxeUI.component(VxeCardComponent);
+const Card = VxeCard;
 
-const { warnLog: warnLog$h, errLog: errLog$j } = createComponentLog('tree');
-function getRowKeyByField(row, keyField) {
-    return row ? ('' + (row[keyField] || '')) : '';
-}
-function getRowIdByField(row, keyField) {
-    if (!row) {
-        return '';
-    }
-    const rowKey = getRowKeyByField(row, keyField);
-    return enModelValue(rowKey);
-}
-function createReactData$n() {
-    return {
-        scrollYLoad: false,
-        bodyHeight: 0,
-        headHeight: 0,
-        footHeight: 0,
-        customHeight: 0,
-        customMaxHeight: 0,
-        parentHeight: 0,
-        topSpaceHeight: 0,
-        rowList: [],
-        selectRadioRow: null,
-        currRowFlag: 1,
-        updateCheckboxFlag: 1,
-        isAllChecked: false,
-        isAllIndeterminate: false,
-        insertRowFlag: 1,
-        removeRowFlag: 1,
-        dragRow: null,
-        dragTipText: '',
-        isCrossDragRow: false
-    };
-}
-function createInternalData$m() {
-    return {
-        resizeObserver: undefined,
-        fullData: [],
-        afterList: [],
-        fullKeyMaps: {},
-        rowMaps: {},
-        lastScrollLeft: 0,
-        lastScrollTop: 0,
-        scrollYStore: {
-            startIndex: 0,
-            endIndex: 0,
-            visibleSize: 0,
-            offsetSize: 0,
-            rowHeight: 0
-        },
-        currentRow: null,
-        selectCheckboxMaps: {},
-        insertRowMaps: {},
-        removeRowMaps: {}
-        // prevDragRow: null,
-        // prevDragPos: ''
-    };
-}
-let crossListDragRowObj = null;
-var VxeListComponent = defineVxeComponent({
-    name: 'VxeList',
+var VxeCarouselComponent = defineVxeComponent({
+    name: 'VxeCarousel',
     props: {
-        data: Array,
-        height: [Number, String],
-        maxHeight: [Number, String],
+        modelValue: [String, Number],
+        options: Array,
         loading: Boolean,
-        className: [String, Function],
-        size: {
-            type: String,
-            default: () => getConfig$4().list.size || getConfig$4().size
+        height: {
+            type: [Number, String],
+            default: () => getConfig$4().carousel.height
         },
-        autoResize: {
-            type: Boolean,
-            default: () => getConfig$4().list.autoResize
+        width: {
+            type: [Number, String],
+            default: () => getConfig$4().carousel.width
         },
-        syncResize: [Boolean, String, Number],
-        showSeq: {
+        autoPlay: {
             type: Boolean,
-            default: () => getConfig$4().list.showSeq
+            default: () => getConfig$4().carousel.autoPlay
         },
-        showRadio: {
+        interval: {
+            type: [Number, String],
+            default: () => getConfig$4().carousel.interval
+        },
+        loop: {
             type: Boolean,
-            default: () => getConfig$4().list.showRadio
+            default: () => getConfig$4().carousel.loop
         },
-        checkRowKey: [String, Number],
-        radioConfig: Object,
-        showCheckbox: {
+        vertical: {
             type: Boolean,
-            default: () => getConfig$4().list.showCheckbox
+            default: () => getConfig$4().carousel.vertical
         },
-        checkRowKeys: Array,
-        checkboxConfig: Object,
-        rowConfig: Object,
-        dragConfig: Object,
-        menuConfig: Object,
-        virtualYConfig: Object,
-        scrollY: Object
+        showIndicators: {
+            type: Boolean,
+            default: () => getConfig$4().carousel.showIndicators
+        }
     },
     emits: [
-        'update:checkRowKey',
-        'update:checkRowKeys',
-        'row-click',
-        'row-dblclick',
-        'current-change',
-        'radio-change',
-        'checkbox-change',
-        'checkbox-all',
-        'scroll',
-        'row-dragstart',
-        'row-dragover',
-        'row-dragend',
-        'row-remove-dragend',
-        'row-insert-dragend',
-        'row-menu',
-        'menu-click'
+        'update:modelValue',
+        'change'
     ],
     setup(props, context) {
-        const { slots, emit } = context;
+        const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
-        const browseObj = XEUtils.browse();
-        const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$n());
-        const internalData = createInternalData$m();
-        const crossListDragRowInfo = getCrossListDragRowInfo();
         const refElem = ref();
-        const refHeaderElem = ref();
-        const refFooterElem = ref();
-        const refVirtualWrapper = ref();
-        const refVirtualBody = ref();
-        const refDragRowLineElem = ref();
-        const refDragTipElem = ref();
+        const refWrapperElem = ref();
+        const reactData = reactive({
+            activeName: '',
+            staticItems: [],
+            itemWidth: 0,
+            itemHeight: 0
+        });
+        const internalData = {
+            apTimeout: undefined,
+            stopFlag: false
+        };
         const refMaps = {
             refElem
         };
-        const $xeList = {
+        const computeListStyle = computed(() => {
+            const { vertical, options } = props;
+            const { activeName, itemWidth, itemHeight, staticItems } = reactData;
+            const list = (staticItems && staticItems.length ? staticItems : options) || [];
+            const activeIndex = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName));
+            const stys = {};
+            if (vertical) {
+                stys.transform = `translateY(-${activeIndex * itemHeight}px)`;
+            }
+            else {
+                stys.width = `${itemWidth * list.length}px`;
+                stys.transform = `translateX(-${activeIndex * itemWidth}px)`;
+            }
+            return stys;
+        });
+        const computeMaps = {};
+        const $xeCarousel = {
             xID,
             props,
             context,
             reactData,
             internalData,
-            getRefMaps: () => refMaps
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
         };
-        const computeRowOpts = computed(() => {
-            return Object.assign({}, getConfig$4().list.rowConfig, props.rowConfig);
-        });
-        const computeDragOpts = computed(() => {
-            return Object.assign({}, getConfig$4().list.dragConfig, props.dragConfig);
-        });
-        const computeSYOpts = computed(() => {
-            return Object.assign({}, getConfig$4().list.virtualYConfig || getConfig$4().list.scrollY, props.virtualYConfig || props.scrollY);
-        });
-        const computeKeyField = computed(() => {
-            const rowOpts = computeRowOpts.value;
-            const { keyField } = rowOpts;
-            return keyField || '';
-        });
-        const computeIsDrag = computed(() => {
-            const { dragConfig } = props;
-            const dragOpts = computeDragOpts.value;
-            return dragConfig && isEnableConf(dragOpts);
-        });
-        const computeRowHeight = computed(() => {
-            const rowOpts = computeRowOpts.value;
-            const { height } = rowOpts;
-            return height;
-        });
-        const computeRadioOpts = computed(() => {
-            return Object.assign({ showIcon: true }, getConfig$4().list.radioConfig, props.radioConfig);
-        });
-        const computeCheckboxOpts = computed(() => {
-            return Object.assign({ showIcon: true }, getConfig$4().list.checkboxConfig, props.checkboxConfig);
-        });
-        const computeMenuOpts = computed(() => {
-            return Object.assign({}, getConfig$4().list.menuConfig, props.menuConfig);
-        });
-        const computeWrapperStyles = computed(() => {
-            const rowHeight = computeRowHeight.value;
-            const style = {};
-            if (rowHeight) {
-                style['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
-            }
-            return style;
-        });
-        const computeVirtualStyles = computed(() => {
-            const { height, maxHeight } = props;
-            const { customHeight, customMaxHeight, headHeight, footHeight } = reactData;
-            const style = {};
-            if (height) {
-                style.height = toCssUnit(Math.max(20, customHeight - headHeight - footHeight));
-            }
-            else if (maxHeight) {
-                style.height = 'auto';
-                style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight));
-            }
-            return style;
-        });
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $list: $xeList }, params));
+        const updateStyle = () => {
+            nextTick(() => {
+                const wrapperElem = refWrapperElem.value;
+                if (wrapperElem) {
+                    reactData.itemWidth = wrapperElem.clientWidth;
+                    reactData.itemHeight = wrapperElem.clientHeight;
+                }
+            });
         };
-        const emitCheckboxMode = (value) => {
-            emit('update:checkRowKeys', value);
+        const clickItemEvent = (evnt, item) => {
+            const value = item.name;
+            reactData.activeName = item.name;
+            emit('update:modelValue', value);
+            emit('change', { value }, evnt);
+            updateStyle();
         };
-        const emitRadioMode = (value) => {
-            emit('update:checkRowKey', value);
+        const initDefaultActive = (list) => {
+            let activeName = null;
+            if (list && list.length) {
+                let validVal = false;
+                activeName = props.modelValue;
+                list.forEach((item) => {
+                    if (activeName === item.name) {
+                        validVal = true;
+                    }
+                });
+                if (!validVal) {
+                    activeName = list[0].name;
+                    emit('update:modelValue', activeName);
+                }
+            }
+            reactData.activeName = activeName;
         };
-        const getRowId = (row) => {
-            const keyField = computeKeyField.value;
-            return getRowIdByField(row, keyField);
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent$1(evnt, { $carousel: $xeCarousel }, params));
         };
-        const calcTableHeight = (key) => {
-            const { parentHeight } = reactData;
-            const val = props[key];
-            let num = 0;
-            if (val) {
-                if (val === '100%' || val === 'auto') {
-                    num = parentHeight;
+        const handlePrevNext = (isNext) => {
+            const { options, loop } = props;
+            const { activeName, staticItems } = reactData;
+            const list = (staticItems && staticItems.length ? staticItems : options) || [];
+            const index = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName));
+            if (index > -1) {
+                let item = null;
+                if (isNext) {
+                    if (index < list.length - 1) {
+                        item = list[index + 1];
+                    }
+                    else {
+                        if (loop) {
+                            item = list[0];
+                        }
+                    }
                 }
                 else {
-                    if (isScale(val)) {
-                        num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
+                    if (index > 0) {
+                        item = list[index - 1];
                     }
                     else {
-                        num = XEUtils.toNumber(val);
+                        if (loop) {
+                            item = list[list.length - 1];
+                        }
                     }
-                    num = Math.max(40, num);
                 }
-            }
-            return num;
-        };
+                if (item) {
+                    const name = item.name;
+                    const value = name;
+                    reactData.activeName = name;
+                    emit('update:modelValue', value);
+                    return true;
+                }
+            }
+            return false;
+        };
+        const carouselMethods = {
+            dispatchEvent,
+            prev() {
+                if (handlePrevNext(false)) {
+                    handleAutoPlay();
+                }
+                return nextTick();
+            },
+            next() {
+                if (handlePrevNext(true)) {
+                    handleAutoPlay();
+                }
+                return nextTick();
+            }
+        };
+        const prevEvent = (evnt) => {
+            if (handlePrevNext(false)) {
+                const value = reactData.activeName;
+                emit('change', { value }, evnt);
+            }
+        };
+        const nextEvent = (evnt) => {
+            if (handlePrevNext(true)) {
+                const value = reactData.activeName;
+                emit('change', { value }, evnt);
+            }
+        };
+        const stopAutoPlay = () => {
+            const { apTimeout } = internalData;
+            internalData.stopFlag = true;
+            if (apTimeout) {
+                clearTimeout(apTimeout);
+                internalData.apTimeout = undefined;
+            }
+        };
+        const handleAutoPlay = () => {
+            const { autoPlay, interval } = props;
+            const { stopFlag } = internalData;
+            stopAutoPlay();
+            if (autoPlay) {
+                internalData.stopFlag = false;
+                internalData.apTimeout = setTimeout(() => {
+                    if (!stopFlag) {
+                        handlePrevNext(true);
+                    }
+                }, XEUtils.toNumber(interval) || 300);
+            }
+        };
+        const mouseenterEvent = () => {
+            stopAutoPlay();
+        };
+        const mouseleaveEvent = () => {
+            handleAutoPlay();
+        };
+        const carouselPrivateMethods = {};
+        const callSlot = (slotFunc, params) => {
+            if (slotFunc) {
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = slots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc(params));
+                }
+            }
+            return [];
+        };
+        Object.assign($xeCarousel, carouselMethods, carouselPrivateMethods);
+        const renderItemWrapper = (list) => {
+            const { height } = props;
+            const { activeName } = reactData;
+            const listStyle = computeListStyle.value;
+            return h('div', {
+                class: 'vxe-carousel--list',
+                style: listStyle
+            }, list.map(item => {
+                const { name, url, slots } = item;
+                const defaultSlot = slots ? slots.default : null;
+                return h('div', {
+                    key: `${name}`,
+                    class: ['vxe-carousel--item-inner', {
+                            'is--active': activeName === name
+                        }],
+                    style: height
+                        ? {
+                            height: toCssUnit(height)
+                        }
+                        : null
+                }, defaultSlot
+                    ? callSlot(defaultSlot, {})
+                    : [
+                        h('img', {
+                            class: 'vxe-carousel--item-img',
+                            src: url
+                        })
+                    ]);
+            }));
+        };
+        const renderIndicators = (list) => {
+            const { activeName } = reactData;
+            return h('div', {
+                class: 'vxe-carousel--indicators'
+            }, list.map((item) => {
+                const { name } = item;
+                return h('div', {
+                    key: `${name}`,
+                    class: ['vxe-carousel--indicators-item', {
+                            'is--active': activeName === name
+                        }],
+                    onClick(evnt) {
+                        clickItemEvent(evnt, item);
+                    }
+                });
+            }));
+        };
+        const renderVN = () => {
+            const { loading, height, width, showIndicators, vertical, options } = props;
+            const { staticItems } = reactData;
+            const defaultSlot = slots.default;
+            const list = (staticItems && staticItems.length ? staticItems : options) || [];
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-carousel', `is--${vertical ? 'vertical' : 'horizontal'}`],
+                style: width
+                    ? {
+                        width: toCssUnit(width)
+                    }
+                    : null,
+                onMouseenter: mouseenterEvent,
+                onMouseleave: mouseleaveEvent
+            }, [
+                h('div', {
+                    class: 'vxe-carousel--slots'
+                }, defaultSlot ? defaultSlot({}) : []),
+                h('div', {
+                    ref: refWrapperElem,
+                    class: 'vxe-carousel--item-wrapper',
+                    style: height
+                        ? {
+                            height: toCssUnit(height)
+                        }
+                        : null
+                }, [
+                    renderItemWrapper(list)
+                ]),
+                showIndicators ? renderIndicators(list) : renderEmptyElement$1($xeCarousel),
+                h('div', {
+                    class: 'vxe-carousel--btn-wrapper'
+                }, [
+                    h('div', {
+                        class: 'vxe-carousel--previous-btn',
+                        onClick: prevEvent
+                    }, [
+                        h('i', {
+                            class: vertical ? getIcon$2().CAROUSEL_VERTICAL_PREVIOUS : getIcon$2().CAROUSEL_HORIZONTAL_PREVIOUS
+                        })
+                    ]),
+                    h('div', {
+                        class: 'vxe-carousel--next-btn',
+                        onClick: nextEvent
+                    }, [
+                        h('i', {
+                            class: vertical ? getIcon$2().CAROUSEL_VERTICAL_NEXT : getIcon$2().CAROUSEL_HORIZONTAL_NEXT
+                        })
+                    ])
+                ]),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoading, {
+                    class: 'vxe-carousel--loading',
+                    modelValue: loading
+                })
+            ]);
+        };
+        const optsFlag = ref(0);
+        watch(() => props.options ? props.options.length : -1, () => {
+            optsFlag.value++;
+        });
+        watch(() => props.options, () => {
+            optsFlag.value++;
+        });
+        watch(optsFlag, () => {
+            initDefaultActive(props.options);
+        });
+        const stFlag = ref(0);
+        watch(() => reactData.staticItems ? reactData.staticItems.length : -1, () => {
+            stFlag.value++;
+        });
+        watch(() => reactData.staticItems, () => {
+            stFlag.value++;
+        });
+        watch(stFlag, () => {
+            initDefaultActive(reactData.staticItems);
+        });
+        watch(() => props.autoPlay, () => {
+            handleAutoPlay();
+        });
+        initDefaultActive(reactData.staticItems.length ? reactData.staticItems : props.options);
+        onMounted(() => {
+            handleAutoPlay();
+            updateStyle();
+        });
+        onUnmounted(() => {
+            stopAutoPlay();
+        });
+        provide('$xeCarousel', $xeCarousel);
+        $xeCarousel.renderVN = renderVN;
+        return $xeCarousel;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeCarousel = Object.assign({}, VxeCarouselComponent, {
+    install(app) {
+        app.component(VxeCarouselComponent.name, VxeCarouselComponent);
+    }
+});
+dynamicApp.use(VxeCarousel);
+VxeUI.component(VxeCarouselComponent);
+const Carousel = VxeCarousel;
+
+function assembleCarouselItem($xeCarousel, elem, itemConfig) {
+    const staticItems = $xeCarousel.reactData.staticItems;
+    const parentElem = elem.parentNode;
+    if (parentElem) {
+        staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, itemConfig);
+    }
+    $xeCarousel.reactData.staticItems = staticItems.slice(0);
+}
+function destroyCarouselItem($xeCarousel, itemConfig) {
+    const staticItems = $xeCarousel.reactData.staticItems;
+    const index = XEUtils.findIndexOf(staticItems, item => item.id === itemConfig.id);
+    if (index > -1) {
+        staticItems.splice(index, 1);
+    }
+    $xeCarousel.reactData.staticItems = staticItems.slice(0);
+}
+
+var VxeCarouselItemComponent = defineVxeComponent({
+    name: 'VxeCarouselItem',
+    props: {
+        name: [String, Number],
+        className: String,
+        url: String
+    },
+    emits: [],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const $xeCarousel = inject('$xeCarousel', null);
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive({});
+        const itemConfig = reactive({
+            id: xID,
+            name: props.name,
+            url: props.url,
+            className: props.className,
+            slots
+        });
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeCarouselItem = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent$1(evnt, { $carouselItem: $xeCarouselItem }, params));
+        };
+        const carouselItemMethods = {
+            dispatchEvent
+        };
+        const carouselItemPrivateMethods = {};
+        Object.assign($xeCarouselItem, carouselItemMethods, carouselItemPrivateMethods);
+        const renderVN = () => {
+            return h('div', {
+                ref: refElem
+            });
+        };
+        watch(() => props.name, (val) => {
+            itemConfig.name = val;
+        });
+        watch(() => props.url, (val) => {
+            itemConfig.url = val;
+        });
+        onMounted(() => {
+            const elem = refElem.value;
+            if ($xeCarousel && elem) {
+                assembleCarouselItem($xeCarousel, elem, itemConfig);
+            }
+        });
+        onUnmounted(() => {
+            if ($xeCarousel) {
+                destroyCarouselItem($xeCarousel, itemConfig);
+            }
+        });
+        $xeCarouselItem.renderVN = renderVN;
+        return $xeCarouselItem;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeCarouselItem = Object.assign({}, VxeCarouselItemComponent, {
+    install(app) {
+        app.component(VxeCarouselItemComponent.name, VxeCarouselItemComponent);
+    }
+});
+dynamicApp.use(VxeCarouselItem);
+VxeUI.component(VxeCarouselItemComponent);
+const CarouselItem = VxeCarouselItem;
+
+function enNodeValue(nodeid) {
+    return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(`${nodeid}`);
+}
+function deNodeValue(nodeid) {
+    return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
+}
+
+// 跨列表拖拽
+const crossListDragRowInfo = reactive({
+    row: null
+});
+function getCrossListDragRowInfo() {
+    return crossListDragRowInfo;
+}
+
+const rowMoveCls = 'row--drag-move';
+/**
+ * 上下拖拽
+ */
+function moveRowAnimateToTb(elemList, offsetTop) {
+    XEUtils.arrayEach(elemList, trEl => {
+        trEl.style.transform = `translateY(${offsetTop}px)`;
+    });
+    requestAnimationFrame(() => {
+        XEUtils.arrayEach(elemList, trEl => {
+            addClass(trEl, rowMoveCls);
+            trEl.style.transform = '';
+        });
+    });
+}
+function clearRowAnimate(elem, clss) {
+    setTimeout(() => {
+        if (elem) {
+            XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls));
+        }
+    }, 500);
+}
+
+function getItemCacheObj$1(item) {
+    return {
+        item,
+        index: -1,
+        $index: -1,
+        _index: -1
+    };
+}
+
+const { warnLog: warnLog$h, errLog: errLog$j } = createComponentLog('tree');
+function getRowKeyByField(row, keyField) {
+    return row ? ('' + (row[keyField] || '')) : '';
+}
+function getRowIdByField(row, keyField) {
+    if (!row) {
+        return '';
+    }
+    const rowKey = getRowKeyByField(row, keyField);
+    return enModelValue(rowKey);
+}
+function createReactData$m() {
+    return {
+        scrollYLoad: false,
+        bodyHeight: 0,
+        headHeight: 0,
+        footHeight: 0,
+        customHeight: 0,
+        customMaxHeight: 0,
+        parentHeight: 0,
+        topSpaceHeight: 0,
+        rowList: [],
+        selectRadioRow: null,
+        currRowFlag: 1,
+        updateCheckboxFlag: 1,
+        isAllChecked: false,
+        isAllIndeterminate: false,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
+        insertRowFlag: 1,
+        removeRowFlag: 1,
+        dragRow: null,
+        dragTipText: '',
+        isCrossDragRow: false
+    };
+}
+function createInternalData$l() {
+    return {
+        fullData: [],
+        afterList: [],
+        fullKeyMaps: {},
+        rowMaps: {},
+        // 滚动条
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
+        lastScrollTop: 0,
+        lastScrollLeft: 0,
+        scrollYStore: {
+            startIndex: 0,
+            endIndex: 0,
+            visibleSize: 0,
+            offsetSize: 0,
+            rowHeight: 0
+        },
+        currentRow: null,
+        selectCheckboxMaps: {},
+        insertRowMaps: {},
+        removeRowMaps: {}
+        // prevDragRow: null,
+        // prevDragPos: ''
+    };
+}
+let crossListDragRowObj = null;
+var VxeListComponent = defineVxeComponent({
+    name: 'VxeList',
+    props: {
+        data: Array,
+        height: [Number, String],
+        maxHeight: [Number, String],
+        loading: Boolean,
+        className: [String, Function],
+        size: {
+            type: String,
+            default: () => getConfig$4().list.size || getConfig$4().size
+        },
+        autoResize: {
+            type: Boolean,
+            default: () => getConfig$4().list.autoResize
+        },
+        syncResize: [Boolean, String, Number],
+        showSeq: {
+            type: Boolean,
+            default: () => getConfig$4().list.showSeq
+        },
+        showRadio: {
+            type: Boolean,
+            default: () => getConfig$4().list.showRadio
+        },
+        checkRowKey: [String, Number],
+        radioConfig: Object,
+        showCheckbox: {
+            type: Boolean,
+            default: () => getConfig$4().list.showCheckbox
+        },
+        checkRowKeys: Array,
+        checkboxConfig: Object,
+        rowConfig: Object,
+        dragConfig: Object,
+        menuConfig: Object,
+        virtualYConfig: Object,
+        scrollY: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$4().list.useScrollbar
+        },
+        scrollbarConfig: Object
+    },
+    emits: [
+        'update:checkRowKey',
+        'update:checkRowKeys',
+        'row-click',
+        'row-dblclick',
+        'current-change',
+        'radio-change',
+        'checkbox-change',
+        'checkbox-all',
+        'scroll',
+        'row-dragstart',
+        'row-dragover',
+        'row-dragend',
+        'row-remove-dragend',
+        'row-insert-dragend',
+        'row-menu',
+        'menu-click'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const browseObj = XEUtils.browse();
+        const { computeSize } = useSize(props);
+        const reactData = reactive(createReactData$m());
+        const internalData = createInternalData$l();
+        const crossListDragRowInfo = getCrossListDragRowInfo();
+        const refElem = ref();
+        const refHeaderElem = ref();
+        const refFooterElem = ref();
+        const refVirtualWrapper = ref();
+        const refVirtualBody = ref();
+        const refViewInnerElem = ref();
+        const refTrackXElem = ref();
+        const refTrackYElem = ref();
+        const refThumbXElem = ref();
+        const refThumbYElem = ref();
+        const refDragRowLineElem = ref();
+        const refDragTipElem = ref();
+        const refMaps = {
+            refElem
+        };
+        const $xeList = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps
+        };
+        const computeRowOpts = computed(() => {
+            return Object.assign({}, getConfig$4().list.rowConfig, props.rowConfig);
+        });
+        const computeDragOpts = computed(() => {
+            return Object.assign({}, getConfig$4().list.dragConfig, props.dragConfig);
+        });
+        const computeSYOpts = computed(() => {
+            return Object.assign({}, getConfig$4().list.virtualYConfig || getConfig$4().list.scrollY, props.virtualYConfig || props.scrollY);
+        });
+        const computeKeyField = computed(() => {
+            const rowOpts = computeRowOpts.value;
+            const { keyField } = rowOpts;
+            return keyField || '';
+        });
+        const computeIsDrag = computed(() => {
+            const { dragConfig } = props;
+            const dragOpts = computeDragOpts.value;
+            return dragConfig && isEnableConf(dragOpts);
+        });
+        const computeRowHeight = computed(() => {
+            const rowOpts = computeRowOpts.value;
+            const { height } = rowOpts;
+            return height;
+        });
+        const computeRadioOpts = computed(() => {
+            return Object.assign({ showIcon: true }, getConfig$4().list.radioConfig, props.radioConfig);
+        });
+        const computeCheckboxOpts = computed(() => {
+            return Object.assign({ showIcon: true }, getConfig$4().list.checkboxConfig, props.checkboxConfig);
+        });
+        const computeMenuOpts = computed(() => {
+            return Object.assign({}, getConfig$4().list.menuConfig, props.menuConfig);
+        });
+        const computeWrapperStyles = computed(() => {
+            const rowHeight = computeRowHeight.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const stys = {};
+            if (rowHeight) {
+                stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
+            }
+            if (scrollbarYOpts.width) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width);
+            }
+            if (scrollbarXOpts.height) {
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height);
+            }
+            return stys;
+        });
+        const computeVirtualStyles = computed(() => {
+            const { height, maxHeight } = props;
+            const { customHeight, customMaxHeight, headHeight, footHeight } = reactData;
+            const style = {};
+            if (height) {
+                style.height = toCssUnit(Math.max(20, customHeight - headHeight - footHeight));
+            }
+            else if (maxHeight) {
+                style.height = 'auto';
+                style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight));
+            }
+            return style;
+        });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().list.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarXOpts = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return Object.assign({}, getConfig$4().scrollbar.xConfig, scrollbarOpts.xConfig);
+        });
+        const computeScrollbarYOpts = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return Object.assign({}, getConfig$4().scrollbar.yConfig, scrollbarOpts.yConfig);
+        });
+        const computeScrollbarWrapperClss = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { padding } = scrollbarOpts;
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            return domUtils$1.buildClass([
+                'vxe-scrollbar is--virtual',
+                `ov-x--${scrollbarXOpts.visible || 'visible'}`,
+                `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+                `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
+                `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
+            ], {
+                'is--padding': padding,
+                'ov-x--auto-hide': scrollbarXOpts.autoHide,
+                'ov-y--auto-hide': scrollbarYOpts.autoHide,
+                'overflow-y': yThumbHeight,
+                'overflow-x': xThumbWidth
+            });
+        });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return scrollbarXOpts.position === 'top';
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return scrollbarYOpts.position === 'left';
+        });
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent$1(evnt, { $list: $xeList }, params));
+        };
+        const emitCheckboxMode = (value) => {
+            emit('update:checkRowKeys', value);
+        };
+        const emitRadioMode = (value) => {
+            emit('update:checkRowKey', value);
+        };
+        const getRowId = (row) => {
+            const keyField = computeKeyField.value;
+            return getRowIdByField(row, keyField);
+        };
+        const calcTableHeight = (key) => {
+            const { parentHeight } = reactData;
+            const val = props[key];
+            let num = 0;
+            if (val) {
+                if (val === '100%' || val === 'auto') {
+                    num = parentHeight;
+                }
+                else {
+                    if (isScale(val)) {
+                        num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
+                    }
+                    else {
+                        num = XEUtils.toNumber(val);
+                    }
+                    num = Math.max(40, num);
+                }
+            }
+            return num;
+        };
         const updateHeight = () => {
             const headEl = refHeaderElem.value;
             const footEl = refFooterElem.value;
@@ -7431,6 +8179,7 @@ var VxeListComponent = defineVxeComponent({
          */
         const refreshScroll = () => {
             const { lastScrollLeft, lastScrollTop } = internalData;
+            updateScrollbar();
             return clearScroll().then(() => {
                 if (lastScrollLeft || lastScrollTop) {
                     internalData.lastScrollLeft = 0;
@@ -7439,19 +8188,28 @@ var VxeListComponent = defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            updateThumbSize();
+            updateThumbOffset();
+        };
         /**
          * 重新计算列表
          */
         const recalculate = () => {
             const el = refElem.value;
             if (el) {
-                const parentEl = el.parentElement;
+                let parentEl = el.parentElement;
                 let parentHeight = 0;
+                // 如果是虚拟滚动条
+                if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+                    parentEl = parentEl.parentElement;
+                }
                 if (parentEl) {
                     const parentStyle = getComputedStyle(parentEl);
                     parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight));
                 }
                 reactData.parentHeight = parentHeight;
+                updateScrollbar();
                 updateHeight();
                 if (el.clientWidth && el.clientHeight) {
                     return computeScrollLoad();
@@ -7481,6 +8239,7 @@ var VxeListComponent = defineVxeComponent({
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
             const isY = scrollTop !== internalData.lastScrollTop;
+            updateThumbOffset();
             internalData.lastScrollTop = scrollTop;
             internalData.lastScrollLeft = scrollLeft;
             if (reactData.scrollYLoad) {
@@ -8777,6 +9536,162 @@ var VxeListComponent = defineVxeComponent({
                 hideDropTip();
             }
         };
+        const updateThumbSize = () => {
+            const viewEl = refVirtualWrapper.value;
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                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 = refVirtualWrapper.value;
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                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 clickTrackXEvent = (evnt) => {
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = refVirtualWrapper.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 = refVirtualWrapper.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 = refVirtualWrapper.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 = refVirtualWrapper.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 = refVirtualWrapper.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 = refVirtualWrapper.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);
+            }
+        };
         Object.assign($xeList, listMethods, listPrivateMethods);
         const renderDragTip = () => {
             const { dragRow, dragTipText } = reactData;
@@ -8973,7 +9888,7 @@ var VxeListComponent = defineVxeComponent({
                     }], rowid: hasKey && keyField ? rowid : undefined }, rowOns), ctVNs);
         };
         const renderVN = () => {
-            const { showCheckbox, className, loading } = props;
+            const { showCheckbox, className, loading, useScrollbar } = props;
             const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
@@ -8989,6 +9904,9 @@ var VxeListComponent = defineVxeComponent({
             const rowOpts = computeRowOpts.value;
             const { isHover, padding } = rowOpts;
             const isDrag = computeIsDrag.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
             const showDefChekboxHead = showCheckbox && showHeader !== false;
             const leOns = {};
             if (isCrossListDrag && !rowList.length) {
@@ -8996,6 +9914,9 @@ var VxeListComponent = defineVxeComponent({
             }
             return h('div', Object.assign({ ref: refElem, class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
                         [`size--${vSize}`]: vSize,
+                        'is--virtual-scrollbar': useScrollbar,
+                        'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
+                        'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
                         'is--drag': isDrag,
                         'is--loading': loading
                     }], style: wrapperStyles }, leOns), [
@@ -9055,7 +9976,15 @@ var VxeListComponent = defineVxeComponent({
                         style: {
                             marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
                         }
-                    }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
+                    }, useScrollbar
+                        ? (defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
+                        : [
+                            h('div', {
+                                key: 'vi',
+                                ref: refViewInnerElem,
+                                class: 'vxe-scrollbar--view-inner'
+                            }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
+                        ])
                 ]),
                 footerSlot
                     ? h('div', {
@@ -9063,6 +9992,49 @@ var VxeListComponent = defineVxeComponent({
                         class: 'vxe-list--footer-wrapper'
                     }, footerSlot({ items: rowList, $list: $xeList }))
                     : renderEmptyElement$1($xeList),
+                /**
+                 * 滚动条
+                 */
+                useScrollbar
+                    ? h('div', {
+                        class: scrollbarWrapperClss
+                    }, [
+                        scrollbarXOpts.visible === 'hidden'
+                            ? renderEmptyElement$1($xeList)
+                            : 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
+                                })
+                            ]),
+                        scrollbarYOpts.visible === 'hidden'
+                            ? renderEmptyElement$1($xeList)
+                            : 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
+                                })
+                            ])
+                    ])
+                    : renderEmptyElement$1($xeList),
                 /**
                  * 拖拽提示
                  */
@@ -9118,13 +10090,15 @@ var VxeListComponent = defineVxeComponent({
             updateCheckboxModeValue();
         });
         onActivated(() => {
-            recalculate().then(() => refreshScroll());
+            recalculate().then(() => {
+                refreshScroll();
+            });
         });
         nextTick(() => {
             loadData(props.data || []);
         });
         onMounted(() => {
-            const { showSeq, showRadio, showCheckbox } = props;
+            const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props;
             const rowOpts = computeRowOpts.value;
             const { useKey } = rowOpts;
             const isDrag = computeIsDrag.value;
@@ -9146,17 +10120,27 @@ var VxeListComponent = defineVxeComponent({
             if (useKey && !keyField) {
                 errLog$j('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
             }
-            if (props.autoResize) {
+            if (useScrollbar || autoResize) {
                 const el = refElem.value;
-                const resizeObserver = globalResize$1.create(() => recalculate());
+                const viewInnerEl = refViewInnerElem.value;
+                const resizeObserver = globalResize$1.create(() => {
+                    reFlag.value++;
+                });
                 resizeObserver.observe(el);
-                if (el) {
-                    resizeObserver.observe(el.parentElement);
+                if (autoResize) {
+                    if (el) {
+                        resizeObserver.observe(el.parentElement);
+                    }
+                }
+                if (viewInnerEl) {
+                    resizeObserver.observe(viewInnerEl);
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            recalculate();
-            globalEvents$1.on($xeList, 'resize', recalculate);
+            reFlag.value++;
+            globalEvents$1.on($xeList, 'resize', () => {
+                reFlag.value++;
+            });
         });
         onBeforeUnmount(() => {
             const { resizeObserver } = internalData;
@@ -9164,8 +10148,8 @@ var VxeListComponent = defineVxeComponent({
                 resizeObserver.disconnect();
             }
             globalEvents$1.off($xeList, 'resize');
-            XEUtils.assign(reactData, createReactData$n());
-            XEUtils.assign(internalData, createInternalData$m());
+            XEUtils.assign(reactData, createReactData$m());
+            XEUtils.assign(internalData, createInternalData$l());
         });
         $xeList.renderVN = renderVN;
         return $xeList;
@@ -11965,7 +12949,7 @@ const Input = VxeInput;
 function getNodeUniqueId$1() {
     return XEUtils.uniqueId('node_');
 }
-function createReactData$m() {
+function createReactData$l() {
     return {
         initialized: false,
         searchValue: '',
@@ -11988,7 +12972,7 @@ function createReactData$m() {
         lazyOptFlag: 1
     };
 }
-function createInternalData$l() {
+function createInternalData$k() {
     return {
         // hpTimeout: undefined,
         listVirtualYOpts: {
@@ -12116,8 +13100,8 @@ var VxeCascaderComponent = defineVxeComponent({
         const refInpSearch = ref();
         const refChunkWrapper = ref();
         const refOptionPanel = ref();
-        const reactData = reactive(createReactData$m());
-        const internalData = createInternalData$l();
+        const reactData = reactive(createReactData$l());
+        const internalData = createInternalData$k();
         const refMaps = {
             refElem
         };
@@ -13718,8 +14702,8 @@ var VxeCascaderComponent = defineVxeComponent({
             globalEvents$1.off($xeCascader, 'blur');
             globalEvents$1.off($xeCascader, 'resize');
             globalEvents$1.off($xeCascader, 'scroll');
-            XEUtils.assign(reactData, createReactData$m());
-            XEUtils.assign(internalData, createInternalData$l());
+            XEUtils.assign(reactData, createReactData$l());
+            XEUtils.assign(internalData, createInternalData$k());
         });
         provide('$xeCascader', $xeCascader);
         $xeCascader.renderVN = renderVN;
@@ -14123,10 +15107,10 @@ dynamicApp.use(VxeCheckboxButton);
 VxeUI.component(VxeCheckboxButtonComponent);
 const CheckboxButton = VxeCheckboxButton;
 
-function createReactData$l() {
+function createReactData$k() {
     return {};
 }
-function createInternalData$k() {
+function createInternalData$j() {
     return {
     // isLoaded: false
     };
@@ -14170,8 +15154,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
-        const reactData = reactive(createReactData$l());
-        const internalData = createInternalData$k();
+        const reactData = reactive(createReactData$k());
+        const internalData = createInternalData$j();
         const computeIsReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -14344,8 +15328,8 @@ var VxeCheckboxGroupComponent = defineVxeComponent({
             });
         });
         onUnmounted(() => {
-            XEUtils.assign(reactData, createReactData$l());
-            XEUtils.assign(internalData, createInternalData$k());
+            XEUtils.assign(reactData, createReactData$k());
+            XEUtils.assign(internalData, createInternalData$j());
         });
         provide('$xeCheckboxGroup', $xeCheckboxGroup);
         $xeCheckboxGroup.renderVN = renderVN;
@@ -14498,7 +15482,7 @@ dynamicApp.use(VxeCol);
 VxeUI.component(VxeColComponent);
 const Col = VxeCol;
 
-function createReactData$k() {
+function createReactData$j() {
     return {
         staticPanes: [],
         cachePaneMaps: {},
@@ -14506,7 +15490,7 @@ function createReactData$k() {
         openKeyFlag: 0
     };
 }
-function createInternalData$j() {
+function createInternalData$i() {
     return {
         // esTime: null,
         activeKeyMaps: {},
@@ -14543,8 +15527,8 @@ var VxeCollapseComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
         const refElem = ref();
-        const reactData = reactive(createReactData$k());
-        const internalData = createInternalData$j();
+        const reactData = reactive(createReactData$j());
+        const internalData = createInternalData$i();
         const refMaps = {
             refElem
         };
@@ -14823,8 +15807,8 @@ var VxeCollapseComponent = defineVxeComponent({
             if (esTime) {
                 clearTimeout(esTime);
             }
-            XEUtils.assign(reactData, createReactData$k());
-            XEUtils.assign(internalData, createInternalData$j());
+            XEUtils.assign(reactData, createReactData$j());
+            XEUtils.assign(internalData, createInternalData$i());
         });
         provide('$xeCollapse', $xeCollapse);
         $xeCollapse.renderVN = renderVN;
@@ -17606,12 +18590,12 @@ VxeUI.color = {
 };
 const ColorPicker = VxeColorPicker;
 
-function createInternalData$i() {
+function createInternalData$h() {
     return {
     // leaveTime: null
     };
 }
-function createReactData$j() {
+function createReactData$i() {
     return {
         visible: false,
         activeOption: null,
@@ -17666,8 +18650,8 @@ var VxeContextMenuComponent = defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const { computeSize } = useSize(props);
-        const internalData = createInternalData$i();
-        const reactData = reactive(createReactData$j());
+        const internalData = createInternalData$h();
+        const reactData = reactive(createReactData$i());
         const refMaps = {
             refElem
         };
@@ -18222,8 +19206,8 @@ var VxeContextMenuComponent = defineVxeComponent({
             globalEvents$1.off($xeContextMenu, 'keydown');
             globalEvents$1.off($xeContextMenu, 'mousedown');
             globalEvents$1.off($xeContextMenu, 'blur');
-            XEUtils.assign(reactData, createReactData$j());
-            XEUtils.assign(internalData, createInternalData$i());
+            XEUtils.assign(reactData, createReactData$i());
+            XEUtils.assign(internalData, createInternalData$h());
         });
         $xeContextMenu.renderVN = renderVN;
         return $xeContextMenu;
@@ -20553,7 +21537,7 @@ const parseInputKayMaps = {};
 inputMaskedKeys.forEach(key => {
     parseInputKayMaps[key] = true;
 });
-function createReactData$i() {
+function createReactData$h() {
     return {
         initialized: false,
         panelIndex: 0,
@@ -20566,7 +21550,7 @@ function createReactData$i() {
         labelFlag: 0
     };
 }
-function createInternalData$h() {
+function createInternalData$g() {
     return {
         // hpTimeout: undefined,
         // fsTimeout: undefined,
@@ -20718,8 +21702,8 @@ var VxeDatePickerComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$i());
-        const internalData = createInternalData$h();
+        const reactData = reactive(createReactData$h());
+        const internalData = createInternalData$g();
         const defaultFuncProps = {
             parseInputMethod: getConfig$4().datePicker.parseInputMethod,
             festivalMethod: getConfig$4().datePicker.festivalMethod,
@@ -22173,8 +23157,8 @@ var VxeDatePickerComponent = defineVxeComponent({
             globalEvents$1.off($xeDatePicker, 'blur');
             globalEvents$1.off($xeDatePicker, 'resize');
             globalEvents$1.off($xeDatePicker, 'scroll');
-            XEUtils.assign(reactData, createReactData$i());
-            XEUtils.assign(internalData, createInternalData$h());
+            XEUtils.assign(reactData, createReactData$h());
+            XEUtils.assign(internalData, createInternalData$g());
         });
         provide('$xeDatePicker', $xeDatePicker);
         $xeDatePicker.renderVN = renderVN;
@@ -22195,7 +23179,7 @@ VxeUI.component(VxeDatePickerComponent);
 const DatePicker = VxeDatePicker;
 
 const { errLog: errLog$e } = createComponentLog('date-range-picker');
-function createReactData$h() {
+function createReactData$g() {
     return {
         initialized: false,
         panelIndex: 0,
@@ -22210,7 +23194,7 @@ function createReactData$h() {
         paneEndVal: []
     };
 }
-function createInternalData$g() {
+function createInternalData$f() {
     return {
     // selectStatus: false
     // hpTimeout: undefined
@@ -22360,8 +23344,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$h());
-        const internalData = createInternalData$g();
+        const reactData = reactive(createReactData$g());
+        const internalData = createInternalData$f();
         const defaultFuncProps = {
             festivalMethod: getConfig$4().dateRangePicker.festivalMethod,
             disabledMethod: getConfig$4().dateRangePicker.disabledMethod
@@ -23692,8 +24676,8 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             globalEvents$1.off($xeDateRangePicker, 'blur');
             globalEvents$1.off($xeDateRangePicker, 'resize');
             globalEvents$1.off($xeDateRangePicker, 'scroll');
-            XEUtils.assign(reactData, createReactData$h());
-            XEUtils.assign(internalData, createInternalData$g());
+            XEUtils.assign(reactData, createReactData$g());
+            XEUtils.assign(internalData, createInternalData$f());
         });
         provide('$xeDateRangePicker', $xeDateRangePicker);
         $xeDateRangePicker.renderVN = renderVN;
@@ -26017,7 +27001,7 @@ function checkRuleStatus(rule, data, val) {
     }
     return true;
 }
-function createReactData$g() {
+function createReactData$f() {
     return {
         collapseAll: false,
         staticItems: [],
@@ -26025,7 +27009,7 @@ function createReactData$g() {
         itemWidth: 0
     };
 }
-function createInternalData$f() {
+function createInternalData$e() {
     return {
         meTimeout: undefined,
         stTimeout: undefined,
@@ -26135,8 +27119,8 @@ var VxeFormComponent = defineVxeComponent({
         const $xeGrid = inject('$xeGrid', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$g());
-        const internalData = createInternalData$f();
+        const reactData = reactive(createReactData$f());
+        const internalData = createInternalData$e();
         const refElem = ref();
         const refTooltip = ref();
         const computeValidOpts = computed(() => {
@@ -26860,8 +27844,8 @@ var VxeFormComponent = defineVxeComponent({
         });
         onUnmounted(() => {
             globalEvents$1.off($xeForm, 'resize');
-            XEUtils.assign(reactData, createReactData$g());
-            XEUtils.assign(internalData, createInternalData$f());
+            XEUtils.assign(reactData, createReactData$f());
+            XEUtils.assign(internalData, createInternalData$e());
         });
         reactData.collapseAll = !!props.collapseStatus;
         if (props.items) {
@@ -26988,7 +27972,7 @@ dynamicApp.use(VxeFormItem);
 VxeUI.component(VxeFormItemComponent);
 const FormItem = VxeFormItem;
 
-function createReactData$f() {
+function createReactData$e() {
     return {
         initialized: false,
         selectIcon: '',
@@ -27002,7 +27986,7 @@ function createReactData$f() {
         iconList: []
     };
 }
-function createInternalData$e() {
+function createInternalData$d() {
     return {
         fullList: []
         // hpTimeout: undefined
@@ -27065,8 +28049,8 @@ var VxeIconPickerComponent = defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive(createReactData$f());
-        const internalData = createInternalData$e();
+        const reactData = reactive(createReactData$e());
+        const internalData = createInternalData$d();
         const refElem = ref();
         const refInput = ref();
         const refOptionPanel = ref();
@@ -27676,8 +28660,8 @@ var VxeIconPickerComponent = defineVxeComponent({
             globalEvents$1.off($xeIconPicker, 'blur');
             globalEvents$1.off($xeIconPicker, 'resize');
             globalEvents$1.off($xeIconPicker, 'scroll');
-            XEUtils.assign(reactData, createReactData$f());
-            XEUtils.assign(internalData, createInternalData$e());
+            XEUtils.assign(reactData, createReactData$e());
+            XEUtils.assign(internalData, createInternalData$d());
         });
         provide('$xeIconPicker', $xeIconPicker);
         $xeIconPicker.renderVN = renderVN;
@@ -28342,1115 +29326,464 @@ const openPreviewImage = (options) => {
             height: '100%',
             showHeader: false,
             showFooter: false,
-            padding: false,
-            escClosable: opts.escClosable,
-            zIndex,
-            className: 'vxe-image-preview-popup-wrapper',
-            slots: {
-                default() {
-                    return h(VxeImagePreviewComponent, {
-                        modelValue: activeIndex,
-                        urlList,
-                        urlField: opts.urlField,
-                        marginSize: opts.marginSize,
-                        maskClosable: opts.maskClosable,
-                        toolbarConfig: opts.toolbarConfig,
-                        showPrintButton: opts.showPrintButton,
-                        showDownloadButton: opts.showDownloadButton,
-                        beforeDownloadMethod: opts.beforeDownloadMethod,
-                        downloadMethod: opts.downloadMethod,
-                        onClose() {
-                            VxeUI.modal.close(modalId);
-                        },
-                        onChange(eventParams) {
-                            if (change) {
-                                change.call(this, eventParams);
-                            }
-                        },
-                        onRotate(eventParams) {
-                            if (rotate) {
-                                rotate.call(this, eventParams);
-                            }
-                        }
-                    });
-                }
-            }
-        });
-    }
-    return Promise.resolve();
-};
-
-function createInternalData$d() {
-    return {
-    // dgTime: 0,
-    // mdTime: 0
-    };
-}
-function createReactData$e() {
-    return {};
-}
-var VxeImageComponent = defineVxeComponent({
-    name: 'VxeImage',
-    props: {
-        src: [String, Array],
-        alt: [String, Number],
-        loading: String,
-        title: [String, Number],
-        width: [String, Number],
-        height: [String, Number],
-        minWidth: [String, Number],
-        minHeight: [String, Number],
-        maxWidth: [String, Number],
-        maxHeight: [String, Number],
-        circle: Boolean,
-        draggable: {
-            type: Boolean,
-            default: () => getConfig$4().image.draggable
-        },
-        zIndex: Number,
-        maskClosable: {
-            type: Boolean,
-            default: () => getConfig$4().image.maskClosable
-        },
-        toolbarConfig: Object,
-        showPreview: {
-            type: Boolean,
-            default: () => getConfig$4().image.showPreview
-        },
-        showPrintButton: {
-            type: Boolean,
-            default: () => getConfig$4().image.showPrintButton
-        },
-        showDownloadButton: {
-            type: Boolean,
-            default: () => getConfig$4().image.showDownloadButton
-        },
-        size: {
-            type: String,
-            default: () => getConfig$4().image.size || getConfig$4().size
-        },
-        getThumbnailUrlMethod: Function
-    },
-    emits: [
-        'click',
-        'change',
-        'rotate',
-        'dragstart',
-        'drag',
-        'dragend'
-    ],
-    setup(props, context) {
-        const { emit } = context;
-        const xID = XEUtils.uniqueId();
-        const $xeImageGroup = inject('$xeImageGroup', null);
-        const refElem = ref();
-        const { computeSize } = useSize(props);
-        const internalData = createInternalData$d();
-        const reactData = reactive(createReactData$e());
-        const refMaps = {
-            refElem
-        };
-        const computeWrapperStyle = computed(() => {
-            const { width, height, circle } = props;
-            const stys = {};
-            if (circle) {
-                // 圆形只能生效一个
-                if (width) {
-                    stys.width = toCssUnit(width);
-                    stys.height = toCssUnit(width);
-                }
-                else if (height) {
-                    stys.width = toCssUnit(height);
-                    stys.height = toCssUnit(height);
-                }
-            }
-            else {
-                if (width) {
-                    stys.width = toCssUnit(width);
-                }
-                if (height) {
-                    stys.height = toCssUnit(height);
-                }
-            }
-            return stys;
-        });
-        const computeImgStyle = computed(() => {
-            const { width, height, minWidth, minHeight, maxHeight, maxWidth } = props;
-            const stys = {};
-            if (width && height) {
-                stys.maxWidth = toCssUnit(width);
-                stys.maxHeight = toCssUnit(height);
-            }
-            else {
-                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);
-                }
-            }
-            return stys;
-        });
-        const computeImgList = computed(() => {
-            const { src } = props;
-            if (src) {
-                return (XEUtils.isArray(src) ? src : [src]).map(item => {
-                    if (XEUtils.isString(item)) {
-                        return {
-                            url: item,
-                            alt: ''
-                        };
-                    }
-                    return {
-                        url: item.url,
-                        alt: item.alt
-                    };
-                });
-            }
-            return [];
-        });
-        const computeImgItem = computed(() => {
-            const imgList = computeImgList.value;
-            return imgList[0];
-        });
-        const computeImgUrl = computed(() => {
-            const imgItem = computeImgItem.value;
-            return imgItem ? `${imgItem.url || ''}` : '';
-        });
-        const computeImgThumbnailUrl = computed(() => {
-            const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig$4().image.getThumbnailUrlMethod;
-            const imgUrl = computeImgUrl.value;
-            return getThumbnailUrlFn ? getThumbnailUrlFn({ url: imgUrl, $image: $xeImage }) : '';
-        });
-        const computeMaps = {
-            computeSize
-        };
-        const $xeImage = {
-            xID,
-            props,
-            context,
-            reactData,
-            internalData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent$1(evnt, { $image: $xeImage }, params));
-        };
-        const imageMethods = {
-            dispatchEvent
-        };
-        const clickEvent = (evnt) => {
-            const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props;
-            const { mdTime, dgTime } = internalData;
-            if (mdTime && dgTime && dgTime > mdTime) {
-                return;
-            }
-            const imgList = computeImgList.value;
-            const imgUrl = computeImgUrl.value;
-            if ($xeImageGroup) {
-                $xeImageGroup.handleClickImgEvent(evnt, { url: imgUrl });
-            }
-            else {
-                if (showPreview && imgUrl) {
-                    openPreviewImage({
-                        urlList: imgList,
-                        toolbarConfig,
-                        showPrintButton,
-                        showDownloadButton,
-                        maskClosable,
-                        zIndex,
-                        events: {
-                            change(eventParams) {
-                                dispatchEvent('change', eventParams, eventParams.$event);
-                            },
-                            rotate(eventParams) {
-                                dispatchEvent('rotate', eventParams, eventParams.$event);
-                            }
-                        }
-                    });
-                }
-                dispatchEvent('click', { url: imgUrl }, evnt);
-            }
-        };
-        const mousedownEvent = () => {
-            internalData.mdTime = Date.now();
-        };
-        const handleDragstartEvent = (evnt) => {
-            internalData.dgTime = Date.now();
-            dispatchEvent('dragstart', {}, evnt);
-        };
-        const handleDragEvent = (evnt) => {
-            dispatchEvent(evnt.type, {}, evnt);
-        };
-        const imagePrivateMethods = {};
-        Object.assign($xeImage, imageMethods, imagePrivateMethods);
-        const renderVN = () => {
-            const { alt, loading, circle, draggable } = props;
-            const wrapperStyle = computeWrapperStyle.value;
-            const imgStyle = computeImgStyle.value;
-            const imgUrl = computeImgUrl.value;
-            const imgThumbnailUrl = computeImgThumbnailUrl.value;
-            const vSize = computeSize.value;
-            let imgDrag;
-            if (!XEUtils.eqNull(draggable)) {
-                imgDrag = !!(draggable === true || draggable === 'true');
-            }
-            return h('div', {
-                class: ['vxe-image', {
-                        [`size--${vSize}`]: vSize,
-                        'is--circle': circle
-                    }],
-                style: wrapperStyle
-            }, [
-                h('img', {
-                    ref: refElem,
-                    class: 'vxe-image-img',
-                    src: imgThumbnailUrl || imgUrl,
-                    alt,
-                    loading,
-                    draggable: imgDrag,
-                    style: imgStyle,
-                    onMousedown: mousedownEvent,
-                    onClick: clickEvent,
-                    onDragstart: handleDragstartEvent,
-                    onDrag: handleDragEvent,
-                    onDragend: handleDragEvent
-                })
-            ]);
-        };
-        onBeforeUnmount(() => {
-            XEUtils.assign(reactData, createReactData$e());
-            XEUtils.assign(internalData, createInternalData$d());
-        });
-        $xeImage.renderVN = renderVN;
-        return $xeImage;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
-const VxeImage = Object.assign({}, VxeImageComponent, {
-    install(app) {
-        app.component(VxeImageComponent.name, VxeImageComponent);
-    }
-});
-dynamicApp.use(VxeImage);
-VxeUI.component(VxeImageComponent);
-const Image$1 = VxeImage;
-
-var VxeImageGroupComponent = defineVxeComponent({
-    name: 'VxeImageGroup',
-    props: {
-        urlList: [Array, String],
-        showPreview: {
-            type: Boolean,
-            default: () => getConfig$4().imageGroup.showPreview
-        },
-        imageStyle: Object,
-        zIndex: Number,
-        size: {
-            type: String,
-            default: () => getConfig$4().imageGroup.size || getConfig$4().size
-        },
-        toolbarConfig: Object,
-        showPrintButton: {
-            type: Boolean,
-            default: () => getConfig$4().imageGroup.showPrintButton
-        },
-        showDownloadButton: {
-            type: Boolean,
-            default: () => getConfig$4().imageGroup.showDownloadButton
-        },
-        getThumbnailUrlMethod: Function
-    },
-    emits: [
-        'click',
-        'change',
-        'rotate'
-    ],
-    setup(props, context) {
-        const { emit } = context;
-        const xID = XEUtils.uniqueId();
-        const { computeSize } = useSize(props);
-        const computeImgList = computed(() => {
-            const { urlList } = props;
-            if (urlList) {
-                return (XEUtils.isArray(urlList) ? urlList : [urlList]).map(item => {
-                    if (XEUtils.isString(item)) {
-                        return {
-                            url: item,
-                            alt: ''
-                        };
-                    }
-                    return {
-                        url: item.url,
-                        alt: item.alt
-                    };
-                });
-            }
-            return [];
-        });
-        const computeImgStyleOpts = computed(() => {
-            return Object.assign({}, getConfig$4().imageGroup.imageStyle, props.imageStyle);
-        });
-        const computeGetThumbnailUrlMethod = computed(() => {
-            return props.getThumbnailUrlMethod || getConfig$4().imageGroup.getThumbnailUrlMethod;
-        });
-        const computeMaps = {
-            computeSize
-        };
-        const $xeImageGroup = {
-            xID,
-            props,
-            context,
-            getComputeMaps: () => computeMaps
-        };
-        const imageGroupMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent$1(evnt, { $imageGroup: $xeImageGroup }, params));
-            }
-        };
-        const imageGroupPrivateMethods = {
-            handleClickImgEvent(evnt, params) {
-                const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, zIndex } = props;
-                const { url } = params;
-                const imgList = computeImgList.value;
-                if (showPreview && url) {
-                    openPreviewImage({
-                        activeIndex: Math.max(0, XEUtils.findIndexOf(imgList, item => item.url === url)),
-                        urlList: imgList,
-                        toolbarConfig,
-                        showPrintButton,
-                        showDownloadButton,
-                        zIndex,
-                        events: {
-                            change(eventParams) {
-                                $xeImageGroup.dispatchEvent('change', eventParams, eventParams.$event);
-                            },
-                            rotate(eventParams) {
-                                $xeImageGroup.dispatchEvent('rotate', eventParams, eventParams.$event);
+            padding: false,
+            escClosable: opts.escClosable,
+            zIndex,
+            className: 'vxe-image-preview-popup-wrapper',
+            slots: {
+                default() {
+                    return h(VxeImagePreviewComponent, {
+                        modelValue: activeIndex,
+                        urlList,
+                        urlField: opts.urlField,
+                        marginSize: opts.marginSize,
+                        maskClosable: opts.maskClosable,
+                        toolbarConfig: opts.toolbarConfig,
+                        showPrintButton: opts.showPrintButton,
+                        showDownloadButton: opts.showDownloadButton,
+                        beforeDownloadMethod: opts.beforeDownloadMethod,
+                        downloadMethod: opts.downloadMethod,
+                        onClose() {
+                            VxeUI.modal.close(modalId);
+                        },
+                        onChange(eventParams) {
+                            if (change) {
+                                change.call(this, eventParams);
+                            }
+                        },
+                        onRotate(eventParams) {
+                            if (rotate) {
+                                rotate.call(this, eventParams);
                             }
                         }
                     });
                 }
-                $xeImageGroup.dispatchEvent('click', { url, urlList: imgList }, evnt);
             }
-        };
-        Object.assign($xeImageGroup, imageGroupMethods, imageGroupPrivateMethods);
-        const renderVN = () => {
-            const imgList = computeImgList.value;
-            const vSize = computeSize.value;
-            const imgStyleOpts = computeImgStyleOpts.value;
-            const getThumbnailUrlMethod = computeGetThumbnailUrlMethod.value;
-            return h('div', {
-                class: ['vxe-image-group', {
-                        [`size--${vSize}`]: vSize
-                    }]
-            }, imgList
-                ? imgList.map((item, index) => {
-                    return h(VxeImageComponent, {
-                        key: index,
-                        src: item.url,
-                        alt: item.alt,
-                        width: imgStyleOpts.width,
-                        height: imgStyleOpts.height,
-                        getThumbnailUrlMethod
-                    });
-                })
-                : []);
-        };
-        $xeImageGroup.renderVN = renderVN;
-        provide('$xeImageGroup', $xeImageGroup);
-        return $xeImageGroup;
-    },
-    render() {
-        return this.renderVN();
-    }
-});
-
-const VxeImageGroup = Object.assign({}, VxeImageGroupComponent, {
-    install(app) {
-        app.component(VxeImageGroupComponent.name, VxeImageGroupComponent);
-    }
-});
-dynamicApp.use(VxeImageGroup);
-VxeUI.component(VxeImageGroupComponent);
-const ImageGroup = VxeImageGroup;
-
-const VxeImagePreview = Object.assign(VxeImagePreviewComponent, {
-    install(app) {
-        app.component(VxeImagePreviewComponent.name, VxeImagePreviewComponent);
-    }
-});
-VxeUI.previewImage = openPreviewImage;
-dynamicApp.use(VxeImagePreview);
-VxeUI.component(VxeImagePreviewComponent);
-const ImagePreview = VxeImagePreview;
-
-/**
- * 计算滚动条滑块的长度
- */
-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;
-}
+    return Promise.resolve();
+};
 
-const { getConfig: getConfig$2, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
-function createReactData$d() {
-    return {
-        yThumbHeight: 0,
-        xThumbWidth: 0
-    };
-}
 function createInternalData$c() {
     return {
-        // resizeObserver: undefined,
-        // isThumbDrag: false,
-        thumbDragOffset: 0,
-        yThumbTop: 0,
-        xThumbLeft: 0,
-        lastScrollTop: 0,
-        lastScrollLeft: 0
+    // dgTime: 0,
+    // mdTime: 0
     };
 }
-var VxeScrollbarComponent = defineVxeComponent({
-    name: 'VxeScrollbar',
+function createReactData$d() {
+    return {};
+}
+var VxeImageComponent = defineVxeComponent({
+    name: 'VxeImage',
     props: {
-        id: [String, Number],
+        src: [String, Array],
+        alt: [String, Number],
+        loading: String,
+        title: [String, Number],
         width: [String, Number],
         height: [String, Number],
         minWidth: [String, Number],
         minHeight: [String, Number],
         maxWidth: [String, Number],
         maxHeight: [String, Number],
-        loading: Boolean,
-        native: {
+        circle: Boolean,
+        draggable: {
             type: Boolean,
-            default: () => getConfig$2().scrollbar.native
+            default: () => getConfig$4().image.draggable
         },
-        padding: {
+        zIndex: Number,
+        maskClosable: {
             type: Boolean,
-            default: () => getConfig$2().scrollbar.padding
+            default: () => getConfig$4().image.maskClosable
         },
-        xConfig: Object,
-        yConfig: Object,
-        className: {
-            type: String,
-            default: () => getConfig$2().scrollbar.className
+        toolbarConfig: Object,
+        showPreview: {
+            type: Boolean,
+            default: () => getConfig$4().image.showPreview
         },
-        viewAttrs: {
-            type: Object,
-            default: () => getConfig$2().scrollbar.viewAttrs
+        showPrintButton: {
+            type: Boolean,
+            default: () => getConfig$4().image.showPrintButton
         },
-        viewClassName: {
-            type: String,
-            default: () => getConfig$2().scrollbar.viewClassName
+        showDownloadButton: {
+            type: Boolean,
+            default: () => getConfig$4().image.showDownloadButton
         },
-        viewInnerClassName: {
+        size: {
             type: String,
-            default: () => getConfig$2().scrollbar.viewInnerClassName
-        },
-        autoResize: {
-            type: Boolean,
-            default: () => getConfig$2().scrollbar.autoResize
+            default: () => getConfig$4().image.size || getConfig$4().size
         },
-        syncResize: [Boolean, String, Number]
+        getThumbnailUrlMethod: Function
     },
     emits: [
-        'scroll',
-        'scroll-boundary'
+        'click',
+        'change',
+        'rotate',
+        'dragstart',
+        'drag',
+        'dragend'
     ],
     setup(props, context) {
-        const { emit, slots } = context;
+        const { emit } = context;
         const xID = XEUtils.uniqueId();
+        const $xeImageGroup = inject('$xeImageGroup', null);
         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$d());
+        const { computeSize } = useSize(props);
         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 (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, padding } = props;
-            const { yThumbHeight, xThumbWidth } = reactData;
-            const xOpts = computeXOpts.value;
-            const yOpts = computeYOpts.value;
-            const xToTop = computeXToTop.value;
-            const yToLeft = computeYToLeft.value;
-            return domUtils.buildClass([
-                'vxe-scrollbar',
-                `ov-x--${xOpts.visible || 'visible'}`,
-                `ov-y--${yOpts.visible || 'visible'}`,
-                `sx-pos--${xToTop ? 'top' : 'bottom'}`,
-                `sy-pos--${yToLeft ? 'left' : 'right'}`,
-                native ? 'is--native' : 'is--virtual',
-                className
-            ], {
-                'is--padding': padding,
-                '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
-            ]);
-        });
-        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 computeXToTop = computed(() => {
-            const xOpts = computeXOpts.value;
-            return xOpts.position === 'top';
-        });
-        const computeYToLeft = computed(() => {
-            const yOpts = computeYOpts.value;
-            return yOpts.position === 'left';
-        });
+        const reactData = reactive(createReactData$d());
         const refMaps = {
             refElem
         };
-        const computeMaps = {};
-        const $xeScrollbar = {
-            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();
-                }
-            },
-            setScrollTop(top) {
-                const viewEl = refViewElem.value;
-                if (viewEl) {
-                    viewEl.scrollTop = top;
-                }
-            },
-            setScrollLeft(left) {
-                const viewEl = refViewElem.value;
-                if (viewEl) {
-                    viewEl.scrollLeft = left;
-                }
-            },
-            getScrollTop() {
-                const viewEl = refViewElem.value;
-                if (viewEl) {
-                    return viewEl.scrollTop;
-                }
-                return 0;
-            },
-            getScrollLeft() {
-                const viewEl = refViewElem.value;
-                if (viewEl) {
-                    return viewEl.scrollLeft;
-                }
-                return 0;
-            },
-            clearScroll() {
-                const viewEl = refViewElem.value;
-                if (viewEl) {
-                    viewEl.scrollTop = 0;
-                    viewEl.scrollLeft = 0;
-                }
-            },
-            recalculate() {
-                updateThumbSize();
-                updateThumbOffset();
-                return nextTick();
-            }
-        };
-        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;
-                    }
+        const computeWrapperStyle = computed(() => {
+            const { width, height, circle } = props;
+            const stys = {};
+            if (circle) {
+                // 圆形只能生效一个
+                if (width) {
+                    stys.width = toCssUnit(width);
+                    stys.height = toCssUnit(width);
                 }
-                else {
-                    direction = 'top';
-                    if (yThumbHeight > 0 && scrollTop <= yThreshold) {
-                        isTopBoundary = true;
-                    }
+                else if (height) {
+                    stys.width = toCssUnit(height);
+                    stys.height = toCssUnit(height);
                 }
             }
-            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;
-                    }
+            else {
+                if (width) {
+                    stys.width = toCssUnit(width);
+                }
+                if (height) {
+                    stys.height = toCssUnit(height);
                 }
             }
-            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;
+            return stys;
+        });
+        const computeImgStyle = computed(() => {
+            const { width, height, minWidth, minHeight, maxHeight, maxWidth } = props;
+            const stys = {};
+            if (width && height) {
+                stys.maxWidth = toCssUnit(width);
+                stys.maxHeight = toCssUnit(height);
             }
-            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;
+            else {
+                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);
+                }
             }
-            const viewEl = refViewElem.value;
-            if (!viewEl) {
-                return;
+            return stys;
+        });
+        const computeImgList = computed(() => {
+            const { src } = props;
+            if (src) {
+                return (XEUtils.isArray(src) ? src : [src]).map(item => {
+                    if (XEUtils.isString(item)) {
+                        return {
+                            url: item,
+                            alt: ''
+                        };
+                    }
+                    return {
+                        url: item.url,
+                        alt: item.alt
+                    };
+                });
             }
-            const { yThumbHeight } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-                behavior: 'auto'
-            });
+            return [];
+        });
+        const computeImgItem = computed(() => {
+            const imgList = computeImgList.value;
+            return imgList[0];
+        });
+        const computeImgUrl = computed(() => {
+            const imgItem = computeImgItem.value;
+            return imgItem ? `${imgItem.url || ''}` : '';
+        });
+        const computeImgThumbnailUrl = computed(() => {
+            const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig$4().image.getThumbnailUrlMethod;
+            const imgUrl = computeImgUrl.value;
+            return getThumbnailUrlFn ? getThumbnailUrlFn({ url: imgUrl, $image: $xeImage }) : '';
+        });
+        const computeMaps = {
+            computeSize
         };
-        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 $xeImage = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
         };
-        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 dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent$1(evnt, { $image: $xeImage }, params));
         };
-        const cleatPointerThumbEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            thumbEl.releasePointerCapture(evnt.pointerId);
-            internalData.isThumbDrag = false;
+        const imageMethods = {
+            dispatchEvent
         };
-        const pointerdownThumbYEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const viewEl = refViewElem.value;
-            if (!viewEl) {
+        const clickEvent = (evnt) => {
+            const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props;
+            const { mdTime, dgTime } = internalData;
+            if (mdTime && dgTime && dgTime > mdTime) {
                 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 imgList = computeImgList.value;
+            const imgUrl = computeImgUrl.value;
+            if ($xeImageGroup) {
+                $xeImageGroup.handleClickImgEvent(evnt, { url: imgUrl });
             }
-            const { isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = refViewElem.value;
-                if (!viewEl) {
-                    return;
+            else {
+                if (showPreview && imgUrl) {
+                    openPreviewImage({
+                        urlList: imgList,
+                        toolbarConfig,
+                        showPrintButton,
+                        showDownloadButton,
+                        maskClosable,
+                        zIndex,
+                        events: {
+                            change(eventParams) {
+                                dispatchEvent('change', eventParams, eventParams.$event);
+                            },
+                            rotate(eventParams) {
+                                dispatchEvent('rotate', eventParams, eventParams.$event);
+                            }
+                        }
+                    });
                 }
-                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);
+                dispatchEvent('click', { url: imgUrl }, evnt);
             }
         };
-        const scrollbarPrivateMethods = {};
-        Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
+        const mousedownEvent = () => {
+            internalData.mdTime = Date.now();
+        };
+        const handleDragstartEvent = (evnt) => {
+            internalData.dgTime = Date.now();
+            dispatchEvent('dragstart', {}, evnt);
+        };
+        const handleDragEvent = (evnt) => {
+            dispatchEvent(evnt.type, {}, evnt);
+        };
+        const imagePrivateMethods = {};
+        Object.assign($xeImage, imageMethods, imagePrivateMethods);
         const renderVN = () => {
-            const { id, native, loading, viewAttrs } = props;
+            const { alt, loading, circle, draggable } = 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;
+            const imgStyle = computeImgStyle.value;
+            const imgUrl = computeImgUrl.value;
+            const imgThumbnailUrl = computeImgThumbnailUrl.value;
+            const vSize = computeSize.value;
+            let imgDrag;
+            if (!XEUtils.eqNull(draggable)) {
+                imgDrag = !!(draggable === true || draggable === 'true');
+            }
             return h('div', {
-                ref: refElem,
-                id: id || null,
-                class: wrapperClss,
+                class: ['vxe-image', {
+                        [`size--${vSize}`]: vSize,
+                        'is--circle': circle
+                    }],
                 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
+                h('img', {
+                    ref: refElem,
+                    class: 'vxe-image-img',
+                    src: imgThumbnailUrl || imgUrl,
+                    alt,
+                    loading,
+                    draggable: imgDrag,
+                    style: imgStyle,
+                    onMousedown: mousedownEvent,
+                    onClick: clickEvent,
+                    onDragstart: handleDragstartEvent,
+                    onDrag: handleDragEvent,
+                    onDragend: handleDragEvent
                 })
             ]);
         };
-        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();
+        onBeforeUnmount(() => {
+            XEUtils.assign(reactData, createReactData$d());
+            XEUtils.assign(internalData, createInternalData$c());
         });
-        onMounted(() => {
-            const { autoResize } = props;
-            const viewEl = refViewElem.value;
-            const viewInnerEl = refViewInnerElem.value;
-            if (autoResize) {
-                const resizeObserver = globalResize.create(() => {
-                    if (props.autoResize) {
-                        reFlag.value++;
+        $xeImage.renderVN = renderVN;
+        return $xeImage;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+
+const VxeImage = Object.assign({}, VxeImageComponent, {
+    install(app) {
+        app.component(VxeImageComponent.name, VxeImageComponent);
+    }
+});
+dynamicApp.use(VxeImage);
+VxeUI.component(VxeImageComponent);
+const Image$1 = VxeImage;
+
+var VxeImageGroupComponent = defineVxeComponent({
+    name: 'VxeImageGroup',
+    props: {
+        urlList: [Array, String],
+        showPreview: {
+            type: Boolean,
+            default: () => getConfig$4().imageGroup.showPreview
+        },
+        imageStyle: Object,
+        zIndex: Number,
+        size: {
+            type: String,
+            default: () => getConfig$4().imageGroup.size || getConfig$4().size
+        },
+        toolbarConfig: Object,
+        showPrintButton: {
+            type: Boolean,
+            default: () => getConfig$4().imageGroup.showPrintButton
+        },
+        showDownloadButton: {
+            type: Boolean,
+            default: () => getConfig$4().imageGroup.showDownloadButton
+        },
+        getThumbnailUrlMethod: Function
+    },
+    emits: [
+        'click',
+        'change',
+        'rotate'
+    ],
+    setup(props, context) {
+        const { emit } = context;
+        const xID = XEUtils.uniqueId();
+        const { computeSize } = useSize(props);
+        const computeImgList = computed(() => {
+            const { urlList } = props;
+            if (urlList) {
+                return (XEUtils.isArray(urlList) ? urlList : [urlList]).map(item => {
+                    if (XEUtils.isString(item)) {
+                        return {
+                            url: item,
+                            alt: ''
+                        };
                     }
+                    return {
+                        url: item.url,
+                        alt: item.alt
+                    };
                 });
-                if (viewEl) {
-                    resizeObserver.observe(viewEl);
-                }
-                if (viewInnerEl) {
-                    resizeObserver.observe(viewInnerEl);
-                }
-                internalData.resizeObserver = resizeObserver;
             }
-            reFlag.value++;
-            globalEvents.on($xeScrollbar, 'resize', () => {
-                reFlag.value++;
-            });
+            return [];
         });
-        onBeforeUnmount(() => {
-            const { resizeObserver } = internalData;
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-            globalEvents.off($xeScrollbar, 'resize');
+        const computeImgStyleOpts = computed(() => {
+            return Object.assign({}, getConfig$4().imageGroup.imageStyle, props.imageStyle);
         });
-        $xeScrollbar.renderVN = renderVN;
-        return $xeScrollbar;
+        const computeGetThumbnailUrlMethod = computed(() => {
+            return props.getThumbnailUrlMethod || getConfig$4().imageGroup.getThumbnailUrlMethod;
+        });
+        const computeMaps = {
+            computeSize
+        };
+        const $xeImageGroup = {
+            xID,
+            props,
+            context,
+            getComputeMaps: () => computeMaps
+        };
+        const imageGroupMethods = {
+            dispatchEvent(type, params, evnt) {
+                emit(type, createEvent$1(evnt, { $imageGroup: $xeImageGroup }, params));
+            }
+        };
+        const imageGroupPrivateMethods = {
+            handleClickImgEvent(evnt, params) {
+                const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, zIndex } = props;
+                const { url } = params;
+                const imgList = computeImgList.value;
+                if (showPreview && url) {
+                    openPreviewImage({
+                        activeIndex: Math.max(0, XEUtils.findIndexOf(imgList, item => item.url === url)),
+                        urlList: imgList,
+                        toolbarConfig,
+                        showPrintButton,
+                        showDownloadButton,
+                        zIndex,
+                        events: {
+                            change(eventParams) {
+                                $xeImageGroup.dispatchEvent('change', eventParams, eventParams.$event);
+                            },
+                            rotate(eventParams) {
+                                $xeImageGroup.dispatchEvent('rotate', eventParams, eventParams.$event);
+                            }
+                        }
+                    });
+                }
+                $xeImageGroup.dispatchEvent('click', { url, urlList: imgList }, evnt);
+            }
+        };
+        Object.assign($xeImageGroup, imageGroupMethods, imageGroupPrivateMethods);
+        const renderVN = () => {
+            const imgList = computeImgList.value;
+            const vSize = computeSize.value;
+            const imgStyleOpts = computeImgStyleOpts.value;
+            const getThumbnailUrlMethod = computeGetThumbnailUrlMethod.value;
+            return h('div', {
+                class: ['vxe-image-group', {
+                        [`size--${vSize}`]: vSize
+                    }]
+            }, imgList
+                ? imgList.map((item, index) => {
+                    return h(VxeImageComponent, {
+                        key: index,
+                        src: item.url,
+                        alt: item.alt,
+                        width: imgStyleOpts.width,
+                        height: imgStyleOpts.height,
+                        getThumbnailUrlMethod
+                    });
+                })
+                : []);
+        };
+        $xeImageGroup.renderVN = renderVN;
+        provide('$xeImageGroup', $xeImageGroup);
+        return $xeImageGroup;
     },
     render() {
         return this.renderVN();
     }
 });
 
-const VxeScrollbar = Object.assign({}, VxeScrollbarComponent, {
+const VxeImageGroup = Object.assign({}, VxeImageGroupComponent, {
     install(app) {
-        app.component(VxeScrollbarComponent.name, VxeScrollbarComponent);
+        app.component(VxeImageGroupComponent.name, VxeImageGroupComponent);
     }
 });
-dynamicApp.use(VxeScrollbar);
-VxeUI.component(VxeScrollbarComponent);
-const Scrollbar = VxeScrollbar;
+dynamicApp.use(VxeImageGroup);
+VxeUI.component(VxeImageGroupComponent);
+const ImageGroup = VxeImageGroup;
+
+const VxeImagePreview = Object.assign(VxeImagePreviewComponent, {
+    install(app) {
+        app.component(VxeImagePreviewComponent.name, VxeImagePreviewComponent);
+    }
+});
+VxeUI.previewImage = openPreviewImage;
+dynamicApp.use(VxeImagePreview);
+VxeUI.component(VxeImagePreviewComponent);
+const ImagePreview = VxeImagePreview;
 
 var VxeLayoutAsideComponent = defineVxeComponent({
     name: 'VxeLayoutAside',
@@ -40943,6 +41276,11 @@ var VxeTabsComponent = defineVxeComponent({
             type: String,
             default: () => getConfig$4().tabs.size || getConfig$4().size
         },
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$4().tabs.useScrollbar
+        },
+        scrollbarConfig: Object,
         // 已废弃
         beforeCloseMethod: Function
     },
@@ -41038,6 +41376,9 @@ var VxeTabsComponent = defineVxeComponent({
         const computeParentTabsResizeFlag = computed(() => {
             return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null;
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().tabs.scrollbarConfig, props.scrollbarConfig);
+        });
         const computeMaps = {};
         const $xeTabs = {
             xID,
@@ -41613,17 +41954,27 @@ var VxeTabsComponent = defineVxeComponent({
             ]);
         };
         const renderTabPane = (item) => {
+            const { useScrollbar } = props;
             const { initNames, activeName } = reactData;
             const { name, slots } = item;
             const defaultSlot = slots ? slots.default : null;
-            return name && initNames.includes(name)
-                ? h('div', {
-                    key: `${name}`,
-                    class: ['vxe-tabs-pane--item', {
-                            'is--visible': activeName === name
-                        }]
-                }, defaultSlot ? callSlot(defaultSlot, { name }) : [])
-                : renderEmptyElement$1($xeTabs);
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { viewClassName, viewInnerClassName } = scrollbarOpts;
+            if (name && initNames.includes(name)) {
+                return useScrollbar
+                    ? h(VxeScrollbar, Object.assign(Object.assign({ key: `${name}`, class: ['vxe-tabs-pane--scrollbar-item', {
+                                'is--visible': activeName === name
+                            }] }, scrollbarOpts), { viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
+                        default: () => defaultSlot ? callSlot(defaultSlot, { name }) : []
+                    })
+                    : h('div', {
+                        key: `${name}`,
+                        class: ['vxe-tabs-pane--item', {
+                                'is--visible': activeName === name
+                            }]
+                    }, defaultSlot ? callSlot(defaultSlot, { name }) : []);
+            }
+            return renderEmptyElement$1($xeTabs);
         };
         const renderTabContent = (tabList) => {
             const { destroyOnClose } = props;
@@ -43950,11 +44301,15 @@ var VxeTreeComponent = defineVxeComponent({
             const { rowHeight } = scrollYStore;
             const el = refElem.value;
             if (el && el.clientWidth && el.clientHeight) {
-                const parentEl = getParentElem();
+                let parentEl = getParentElem();
                 const headerWrapperEl = refHeaderWrapperElem.value;
                 const footerWrapperEl = refFooterWrapperElem.value;
                 const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0;
                 const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0;
+                // 如果是虚拟滚动条
+                if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+                    parentEl = parentEl.parentElement;
+                }
                 if (parentEl) {
                     const parentPaddingSize = getPaddingTopBottomSize(parentEl);
                     reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);