vxe-pc-ui 4.19.8 → 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.8"}`;
+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.8";
+const version = "4.20.0";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -7787,6 +7787,9 @@ function createReactData$m() {
         updateCheckboxFlag: 1,
         isAllChecked: false,
         isAllIndeterminate: false,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
         insertRowFlag: 1,
         removeRowFlag: 1,
         dragRow: null,
@@ -7796,13 +7799,18 @@ function createReactData$m() {
 }
 function createInternalData$l() {
     return {
-        resizeObserver: undefined,
         fullData: [],
         afterList: [],
         fullKeyMaps: {},
         rowMaps: {},
-        lastScrollLeft: 0,
+        // 滚动条
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
         lastScrollTop: 0,
+        lastScrollLeft: 0,
         scrollYStore: {
             startIndex: 0,
             endIndex: 0,
@@ -7856,7 +7864,12 @@ var VxeListComponent = defineVxeComponent({
         dragConfig: Object,
         menuConfig: Object,
         virtualYConfig: Object,
-        scrollY: Object
+        scrollY: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$4().list.useScrollbar
+        },
+        scrollbarConfig: Object
     },
     emits: [
         'update:checkRowKey',
@@ -7889,6 +7902,11 @@ var VxeListComponent = defineVxeComponent({
         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 = {
@@ -7937,11 +7955,19 @@ var VxeListComponent = defineVxeComponent({
         });
         const computeWrapperStyles = computed(() => {
             const rowHeight = computeRowHeight.value;
-            const style = {};
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const stys = {};
             if (rowHeight) {
-                style['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
+                stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
             }
-            return style;
+            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;
@@ -7956,6 +7982,47 @@ var VxeListComponent = defineVxeComponent({
             }
             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));
         };
@@ -8112,6 +8179,7 @@ var VxeListComponent = defineVxeComponent({
          */
         const refreshScroll = () => {
             const { lastScrollLeft, lastScrollTop } = internalData;
+            updateScrollbar();
             return clearScroll().then(() => {
                 if (lastScrollLeft || lastScrollTop) {
                     internalData.lastScrollLeft = 0;
@@ -8120,6 +8188,10 @@ var VxeListComponent = defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            updateThumbSize();
+            updateThumbOffset();
+        };
         /**
          * 重新计算列表
          */
@@ -8137,6 +8209,7 @@ var VxeListComponent = 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();
@@ -8166,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) {
@@ -9462,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;
@@ -9658,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;
@@ -9674,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) {
@@ -9681,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), [
@@ -9740,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', {
@@ -9748,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),
                 /**
                  * 拖拽提示
                  */
@@ -9803,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;
@@ -9831,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;