vxe-pc-ui 4.20.7 → 4.20.9

package/es/list/src/list.js

@@ -1,7 +1,7 @@
 import { h, ref, computed, onBeforeUnmount, watch, reactive, nextTick, onActivated, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, useSize, createEvent, renderEmptyElement } from '../../ui';
+import { VxeUI, createEvent, renderEmptyElement } from '../../ui';
 import { getCrossListDragRowInfo } from './store';
 import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom';
 import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils';
@@ -9,7 +9,7 @@ import { createComponentLog } from '../../ui/src/log';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
 import { getItemCacheObj } from './util';
 import VxeLoadingComponent from '../../loading';
-const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, menus, globalEvents, globalResize } = VxeUI;
+const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, useFns, menus, globalEvents, globalResize } = VxeUI;
 const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
 const { warnLog, errLog } = createComponentLog('tree');
 function getRowKeyByField(row, keyField) {
@@ -145,7 +145,8 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const crossListDragRowInfo = getCrossListDragRowInfo();
@@ -153,6 +154,7 @@ export default defineVxeComponent({
         const refHeaderElem = ref();
         const refFooterElem = ref();
         const refVirtualWrapper = ref();
+        const refVirtualSpaceElem = ref();
         const refVirtualBody = ref();
         const refTrackXElem = ref();
         const refTrackYElem = ref();
@@ -457,7 +459,6 @@ export default defineVxeComponent({
          */
         const refreshScroll = () => {
             const { lastScrollLeft, lastScrollTop } = internalData;
-            updateScrollbar();
             return clearScroll().then(() => {
                 if (lastScrollLeft || lastScrollTop) {
                     internalData.lastScrollLeft = 0;
@@ -467,8 +468,14 @@ export default defineVxeComponent({
             });
         };
         const updateScrollbar = () => {
-            updateThumbSize();
-            updateThumbOffset();
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                return nextTick().then(() => {
+                    updateThumbSize();
+                    updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
         };
         /**
          * 重新计算列表
@@ -487,10 +494,11 @@ export default defineVxeComponent({
                     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();
+                    return computeScrollLoad().then(() => {
+                        updateScrollbar();
+                    });
                 }
             }
             return nextTick();
@@ -498,7 +506,7 @@ export default defineVxeComponent({
         const loadYData = (evnt) => {
             const { scrollYStore } = internalData;
             const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore;
-            const scrollBodyElem = evnt.target;
+            const scrollBodyElem = evnt.currentTarget;
             const scrollTop = scrollBodyElem.scrollTop;
             const toVisibleIndex = Math.floor(scrollTop / rowHeight);
             const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
@@ -512,7 +520,7 @@ export default defineVxeComponent({
             }
         };
         const scrollEvent = (evnt) => {
-            const scrollBodyElem = evnt.target;
+            const scrollBodyElem = evnt.currentTarget;
             const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -1814,6 +1822,26 @@ export default defineVxeComponent({
                 hideDropTip();
             }
         };
+        const bindScrollbarResize = () => {
+            const { scrollObserver } = internalData;
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = refElem.value;
+                    const viewInnerEl = refVirtualSpaceElem.value;
+                    const scrollObserver = globalResize.create(() => {
+                        reScrollFlag.value++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerEl) {
+                        scrollObserver.observe(viewInnerEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
+                }
+            }
+        };
         const updateThumbSize = () => {
             const viewEl = refVirtualWrapper.value;
             if (!viewEl) {
@@ -2166,12 +2194,13 @@ export default defineVxeComponent({
                     }], rowid: hasKey && keyField ? rowid : undefined }, rowOns), ctVNs);
         };
         const renderVN = () => {
-            const { showCheckbox, className, loading, useScrollbar } = props;
+            const { showCheckbox, className, loading } = props;
             const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             const vSize = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const wrapperStyles = computeWrapperStyles.value;
             const virtualStyles = computeVirtualStyles.value;
             const radioOpts = computeRadioOpts.value;
@@ -2197,17 +2226,17 @@ export default defineVxeComponent({
             }
             return h('div', Object.assign({ ref: refElem, class: [
                     'vxe-list',
-                    useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
-                    useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
-                    useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
-                    useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+                    isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+                    isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+                    isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+                    isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
                     className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '',
                     {
                         [`size--${vSize}`]: vSize,
-                        'is--virtual-scrollbar': useScrollbar,
-                        'ov-padding': useScrollbar && scrollbarOpts.padding,
-                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'is--virtual-scrollbar': isVScrollbar,
+                        'ov-padding': isVScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
                         'overflow-y': yThumbHeight,
                         'overflow-x': xThumbWidth,
                         'is--drag': isDrag,
@@ -2253,6 +2282,7 @@ export default defineVxeComponent({
                     onScroll: scrollEvent
                 }, [
                     h('div', {
+                        ref: refVirtualSpaceElem,
                         class: 'vxe-list--y-space',
                         style: {
                             height: bodyHeight ? `${bodyHeight}px` : ''
@@ -2281,7 +2311,7 @@ export default defineVxeComponent({
                 /**
                  * 滚动条
                  */
-                useScrollbar
+                isVScrollbar
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
@@ -2344,43 +2374,54 @@ export default defineVxeComponent({
         watch(dataFlag, () => {
             loadData(props.data || []);
         });
-        const reFlag = ref(0);
+        const reScrollFlag = ref(0);
+        const reLayoutFlag = ref(0);
         watch(() => props.height, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.maxHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.syncResize, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
-        watch(() => props.useScrollbar, () => {
-            reFlag.value++;
+        watch(computeIsVScrollbar, () => {
+            nextTick(() => {
+                bindScrollbarResize();
+                nextTick(() => {
+                    reLayoutFlag.value++;
+                });
+            });
         });
         watch(computeRowHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(computeScrollYWidth, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(computeScrollXHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(computeScrollXVisible, () => {
             nextTick(() => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
         watch(computeScrollYVisible, () => {
             nextTick(() => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
-        watch(reFlag, () => {
+        watch(reLayoutFlag, () => {
             recalculate().then(() => {
                 recalculate();
             });
         });
+        watch(reScrollFlag, () => {
+            updateScrollbar().then(() => {
+                updateScrollbar();
+            });
+        });
         watch(() => props.checkRowKey, () => {
             updateRadioModeValue();
         });
@@ -2403,7 +2444,7 @@ export default defineVxeComponent({
             loadData(props.data || []);
         });
         onMounted(() => {
-            const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props;
+            const { showSeq, showRadio, showCheckbox, autoResize } = props;
             const rowOpts = computeRowOpts.value;
             const { useKey } = rowOpts;
             const isDrag = computeIsDrag.value;
@@ -2425,25 +2466,12 @@ export default defineVxeComponent({
             if (useKey && !keyField) {
                 errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
             }
-            const el = refElem.value;
-            if (useScrollbar) {
-                const viewInnerEl = refVirtualBody.value;
-                const scrollObserver = globalResize.create(() => {
-                    reFlag.value++;
-                });
-                if (el) {
-                    scrollObserver.observe(el);
-                }
-                if (viewInnerEl) {
-                    scrollObserver.observe(viewInnerEl);
-                }
-                internalData.scrollObserver = scrollObserver;
-            }
             if (autoResize) {
+                const el = refElem.value;
                 const parentEl = getParentElem();
                 const resizeObserver = globalResize.create(() => {
                     if (props.autoResize) {
-                        reFlag.value++;
+                        reLayoutFlag.value++;
                     }
                 });
                 if (el) {
@@ -2454,9 +2482,10 @@ export default defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            reFlag.value++;
+            reLayoutFlag.value++;
+            bindScrollbarResize();
             globalEvents.on($xeList, 'resize', () => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
         onBeforeUnmount(() => {

package/es/menu/src/menu.js

@@ -1,7 +1,7 @@
 import { ref, h, reactive, Teleport, inject, resolveComponent, watch, computed, nextTick, onBeforeUnmount, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, createEvent, permission, useSize, globalEvents, renderEmptyElement } from '../../ui';
+import { VxeUI, createEvent, permission, globalEvents, renderEmptyElement } from '../../ui';
 import { getPopupContainer, scrollToView, toCssUnit } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, isEnableConf, getDefaultConfig } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -9,7 +9,7 @@ import { createComponentLog } from '../../ui/src/log';
 import VxeLoadingComponent from '../../loading';
 import VxeScrollbarComponent from '../../scrollbar';
 const { errLog } = createComponentLog('menu');
-const { menus, getConfig, getIcon } = VxeUI;
+const { menus, useFns, getConfig, getIcon } = VxeUI;
 function createInternalData() {
     return {
         lastActiveTime: 0,
@@ -88,7 +88,8 @@ export default defineVxeComponent({
         const refCollapseElem = ref();
         const refCollapseBodyElem = ref();
         const refCollapseBodyScrollbar = ref();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refMaps = {
@@ -619,9 +620,10 @@ export default defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { loading, collapseFixed, appendTo, useScrollbar } = props;
+            const { loading, collapseFixed, appendTo } = props;
             const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData;
             const vSize = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const isCollapsed = computeIsCollapsed.value;
             const currBorder = computeCurrBorder.value;
             const varStyle = computeVarStyle.value;
@@ -675,7 +677,7 @@ export default defineVxeComponent({
                                     class: 'vxe-menu--header'
                                 }, headerSlot(stParams))
                                 : renderEmptyElement($xeMenu),
-                            useScrollbar && isEnterCollapse
+                            isVScrollbar && isEnterCollapse
                                 ? h(VxeScrollbarComponent, Object.assign(Object.assign({ ref: refCollapseBodyScrollbar, class: 'vxe-menu--scrollbar-body' }, scrollbarOpts), { viewClassName: 'vxe-menu--scrollbar-body-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-menu--scrollbar-body-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
                                     default: () => menuList.map(child => renderDefaultChildren(child, menuList))
                                 })

package/es/modal/src/modal.js

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getEventTargetNode, getPopupContainer, getPopupWrapperElement, isScale, toCssUnit } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue, getDefaultConfig } from '../../ui/src/utils';
-import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui';
+import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import { allActiveModals } from './store';
@@ -253,7 +253,8 @@ export default defineVxeComponent({
         const $xeDrawer = inject('$xeDrawer', null);
         const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
@@ -1330,8 +1331,9 @@ export default defineVxeComponent({
             return renderEmptyElement($xeModal);
         };
         const renderBody = () => {
-            const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props;
+            const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props;
             const content = props.content || message;
+            const isVScrollbar = computeIsVScrollbar.value;
             const isMsg = computeIsMsg.value;
             const scrollbarProps = computeScrollbarProps.value;
             const defaultSlot = slots.default || propSlots.default;
@@ -1348,7 +1350,7 @@ export default defineVxeComponent({
                 ]));
             }
             if (useHtml && !defaultSlot) {
-                contVNs.push(useScrollbar
+                contVNs.push(isVScrollbar
                     ? h(VxeScrollbarComponent, Object.assign({ key: 'shc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
                         default() {
                             return [
@@ -1366,7 +1368,7 @@ export default defineVxeComponent({
                     }));
             }
             else {
-                contVNs.push(useScrollbar
+                contVNs.push(isVScrollbar
                     ? h(VxeScrollbarComponent, Object.assign({ key: 'sdc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
                         default: () => defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
                     })

package/es/scrollbar/src/scrollbar.js

@@ -78,10 +78,18 @@ export default defineVxeComponent({
             type: String,
             default: () => getConfig().scrollbar.viewInnerClassName
         },
+        /**
+         * 已废弃
+         * @deprecated
+         */
         autoResize: {
             type: Boolean,
             default: () => getConfig().scrollbar.autoResize
         },
+        /**
+         * 已废弃
+         * @deprecated
+         */
         syncResize: [Boolean, String, Number]
     },
     emits: [