vxe-pc-ui 3.19.7 → 3.20.0

package/es/list/src/list.js

@@ -1,12 +1,13 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, getConfig, getIcon, getI18n, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui';
 import { crossListDragRowGlobal, getCrossListDragRowInfo } from './store';
-import { addClass, getTpImg, isScale, removeClass, toCssUnit } from '../../ui/src/dom';
+import { addClass, getTpImg, hasClass, isScale, removeClass, toCssUnit } from '../../ui/src/dom';
 import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
+import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from '../../scrollbar/src/util';
 import { getItemCacheObj } from './util';
 import VxeLoadingComponent from '../../loading';
 const { warnLog, errLog } = createComponentLog('tree');
@@ -40,6 +41,9 @@ function createReactData() {
         updateCheckboxFlag: 1,
         isAllChecked: false,
         isAllIndeterminate: false,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
         insertRowFlag: 1,
         removeRowFlag: 1,
         dragRow: null,
@@ -49,13 +53,18 @@ function createReactData() {
 }
 function createInternalData() {
     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,
@@ -111,7 +120,12 @@ export default {
         dragConfig: Object,
         menuConfig: Object,
         virtualYConfig: Object,
-        scrollY: Object
+        scrollY: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig().list.useScrollbar
+        },
+        scrollbarConfig: Object
     },
     data() {
         const xID = XEUtils.uniqueId();
@@ -171,11 +185,19 @@ export default {
         computeWrapperStyles() {
             const $xeList = this;
             const rowHeight = $xeList.computeRowHeight;
-            const style = {};
+            const scrollbarXOpts = $xeList.computeScrollbarXOpts;
+            const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            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;
         },
         computeVirtualStyles() {
             const $xeList = this;
@@ -192,6 +214,55 @@ export default {
                 style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight));
             }
             return style;
+        },
+        computeScrollbarOpts() {
+            const $xeList = this;
+            const props = $xeList;
+            return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig);
+        },
+        computeScrollbarXOpts() {
+            const $xeList = this;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig);
+        },
+        computeScrollbarYOpts() {
+            const $xeList = this;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+        },
+        computeScrollbarWrapperClss() {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            const { padding } = scrollbarOpts;
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXOpts = $xeList.computeScrollbarXOpts;
+            const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            const scrollbarXToTop = $xeList.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
+            return domUtils.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
+            });
+        },
+        computeScrollbarXToTop() {
+            const $xeList = this;
+            const scrollbarXOpts = $xeList.computeScrollbarXOpts;
+            return scrollbarXOpts.position === 'top';
+        },
+        computeScrollbarYToLeft() {
+            const $xeList = this;
+            const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            return scrollbarYOpts.position === 'left';
         } }),
     methods: {
         //
@@ -518,6 +589,11 @@ export default {
                 }
             });
         },
+        updateScrollbar() {
+            const $xeList = this;
+            $xeList.updateThumbSize();
+            $xeList.updateThumbOffset();
+        },
         /**
          * 重新计算列表
          */
@@ -526,13 +602,18 @@ export default {
             const reactData = $xeList.reactData;
             const el = $xeList.$refs.refElem;
             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;
+                $xeList.updateScrollbar();
                 $xeList.updateHeight();
                 if (el.clientWidth && el.clientHeight) {
                     return $xeList.computeScrollLoad();
@@ -567,6 +648,7 @@ export default {
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
             const isY = scrollTop !== internalData.lastScrollTop;
+            $xeList.updateThumbOffset();
             internalData.lastScrollTop = scrollTop;
             internalData.lastScrollLeft = scrollLeft;
             if (reactData.scrollYLoad) {
@@ -1823,6 +1905,186 @@ export default {
             }
             $xeList.dispatchEvent('row-menu', { row }, evnt);
         },
+        // 滚动条
+        updateThumbSize() {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const viewEl = $xeList.$refs.refVirtualWrapper;
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const trackXEl = $xeList.$refs.refTrackXElem;
+            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+            const thumbXElem = $xeList.$refs.refThumbXElem;
+            if (thumbXElem) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+            }
+            reactData.xThumbWidth = xThumbWidth;
+            const trackYEl = $xeList.$refs.refTrackYElem;
+            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+            const thumbYElem = $xeList.$refs.refThumbYElem;
+            if (thumbYElem) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+            }
+            reactData.yThumbHeight = yThumbHeight;
+        },
+        updateThumbOffset() {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const viewEl = $xeList.$refs.refVirtualWrapper;
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const trackXEl = $xeList.$refs.refTrackXElem;
+            const thumbXElem = $xeList.$refs.refThumbXElem;
+            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 = $xeList.$refs.refTrackYElem;
+            const thumbYElem = $xeList.$refs.refThumbYElem;
+            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)`;
+            }
+        },
+        clickTrackXEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeList.$refs.refVirtualWrapper;
+            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'
+            });
+        },
+        clickTrackYEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeList.$refs.refVirtualWrapper;
+            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'
+            });
+        },
+        pointerdownThumbXEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeList.$refs.refVirtualWrapper;
+            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;
+        },
+        pointermoveThumbXEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeList.$refs.refVirtualWrapper;
+                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);
+            }
+        },
+        cleatPointerThumbEvent(evnt) {
+            const $xeList = this;
+            const internalData = $xeList.internalData;
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        },
+        pointerdownThumbYEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeList.$refs.refVirtualWrapper;
+            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;
+        },
+        pointermoveThumbYEvent(evnt) {
+            const $xeList = this;
+            const reactData = $xeList.reactData;
+            const internalData = $xeList.internalData;
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeList.$refs.refVirtualWrapper;
+                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);
+            }
+        },
         //
         // Render
         //
@@ -2052,7 +2314,7 @@ export default {
             const props = $xeList;
             const reactData = $xeList.reactData;
             const slots = $xeList.$scopedSlots;
-            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;
@@ -2066,6 +2328,10 @@ export default {
             const { trigger, isCrossListDrag } = dragOpts;
             const rowOpts = $xeList.computeRowOpts;
             const { isHover, padding } = rowOpts;
+            const isDrag = $xeList.computeIsDrag;
+            const scrollbarXOpts = $xeList.computeScrollbarXOpts;
+            const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            const scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss;
             const showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
             const leOns = {};
             if (isCrossListDrag && !rowList.length) {
@@ -2075,6 +2341,10 @@ export default {
                 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
                     }],
                 on: leOns,
@@ -2137,7 +2407,15 @@ export default {
                         style: {
                             marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
                         }
-                    }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
+                    }, useScrollbar
+                        ? (defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
+                        : [
+                            h('div', {
+                                key: 'vi',
+                                ref: 'refViewInnerElem',
+                                class: 'vxe-scrollbar--view-inner'
+                            }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
+                        ])
                 ]),
                 footerSlot
                     ? h('div', {
@@ -2145,6 +2423,57 @@ export default {
                         class: 'vxe-list--footer-wrapper'
                     }, footerSlot({ items: rowList, $list: $xeList }))
                     : renderEmptyElement($xeList),
+                /**
+                 * 滚动条
+                 */
+                useScrollbar
+                    ? h('div', {
+                        class: scrollbarWrapperClss
+                    }, [
+                        scrollbarXOpts.visible === 'hidden'
+                            ? renderEmptyElement($xeList)
+                            : h('div', {
+                                ref: 'refTrackXElem',
+                                class: 'vxe-scrollbar--track-x',
+                                on: {
+                                    click: $xeList.clickTrackXEvent
+                                }
+                            }, [
+                                h('div', {
+                                    ref: 'refThumbXElem',
+                                    class: 'vxe-scrollbar--thumb-x',
+                                    on: {
+                                        pointerdown: $xeList.pointerdownThumbXEvent,
+                                        pointermove: $xeList.pointermoveThumbXEvent,
+                                        pointerup: $xeList.cleatPointerThumbEvent,
+                                        pointercancel: $xeList.cleatPointerThumbEvent,
+                                        lostpointercapture: $xeList.cleatPointerThumbEvent
+                                    }
+                                })
+                            ]),
+                        scrollbarYOpts.visible === 'hidden'
+                            ? renderEmptyElement($xeList)
+                            : h('div', {
+                                ref: 'refTrackYElem',
+                                class: 'vxe-scrollbar--track-y',
+                                on: {
+                                    click: $xeList.clickTrackYEvent
+                                }
+                            }, [
+                                h('div', {
+                                    ref: 'refThumbYElem',
+                                    class: 'vxe-scrollbar--thumb-y',
+                                    on: {
+                                        pointerdown: $xeList.pointerdownThumbYEvent,
+                                        pointermove: $xeList.pointermoveThumbYEvent,
+                                        pointerup: $xeList.cleatPointerThumbEvent,
+                                        pointercancel: $xeList.cleatPointerThumbEvent,
+                                        lostpointercapture: $xeList.cleatPointerThumbEvent
+                                    }
+                                })
+                            ])
+                    ])
+                    : renderEmptyElement($xeList),
                 /**
                  * 拖拽提示
                  */
@@ -2209,7 +2538,7 @@ export default {
         const $xeList = this;
         const props = $xeList;
         const internalData = $xeList.internalData;
-        const { showSeq, showRadio, showCheckbox } = props;
+        const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props;
         const rowOpts = $xeList.computeRowOpts;
         const { useKey, keyField } = rowOpts;
         const isDrag = $xeList.computeIsDrag;
@@ -2230,21 +2559,33 @@ export default {
         if (useKey && !keyField) {
             errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
         }
-        if (props.autoResize) {
+        if (useScrollbar || autoResize) {
             const el = $xeList.$refs.refElem;
-            const resizeObserver = globalResize.create(() => $xeList.recalculate());
+            const viewInnerEl = $xeList.$refs.refViewInnerElem;
+            const resizeObserver = globalResize.create(() => {
+                $xeList.reFlag++;
+            });
             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;
         }
-        $xeList.recalculate();
-        globalEvents.on($xeList, 'resize', $xeList.recalculate);
+        $xeList.reFlag++;
+        globalEvents.on($xeList, 'resize', () => {
+            $xeList.reFlag++;
+        });
     },
     activated() {
         const $xeList = this;
-        $xeList.recalculate().then(() => $xeList.refreshScroll());
+        $xeList.recalculate().then(() => {
+            $xeList.refreshScroll();
+        });
     },
     beforeDestroy() {
         const $xeList = this;

package/es/list/style.css

@@ -379,4 +379,30 @@
 .vxe-list--radio-option .vxe-radio--label {
   padding-left: 0.4em;
   vertical-align: middle;
+}
+
+.vxe-list > .vxe-scrollbar {
+  position: unset;
+}
+.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.vxe-list.is--virtual-scrollbar.ov-x--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-x {
+  opacity: 1;
+}
+.vxe-list.is--virtual-scrollbar.ov-x--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-x {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+.vxe-list.is--virtual-scrollbar.ov-y--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-y {
+  opacity: 1;
+}
+.vxe-list.is--virtual-scrollbar.ov-y--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-y {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
 }

package/es/list/style.min.css

@@ -1 +1 @@
-@charset "UTF-8";.vxe-list{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-list.size--medium{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-medium)}.vxe-list.size--small{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-small)}.vxe-list.size--mini{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-mini)}.vxe-list{position:relative;display:block;padding:0;font-size:var(--vxe-ui-list-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);direction:ltr}.vxe-list .vxe-list--virtual-wrapper{position:relative;overflow-x:auto;overflow-y:auto;outline:0}.vxe-list .vxe-list--y-space{width:0;float:left}.vxe-list .vxe-list--body,.vxe-list .vxe-list--virtual-wrapper{padding:0;margin:0;border:0;outline:0}.vxe-list--header-wrapper{display:flex;flex-direction:row;align-items:center;min-height:var(--vxe-ui-list-row-height)}.vxe-list--header-left{display:flex;flex-direction:row;align-items:center;flex-shrink:0}.vxe-list--header-content{flex-grow:1;overflow:auto}.vxe-list--body.trigger--row>.vxe-list--row:not(.is--drag-disabled):active{cursor:grabbing}.vxe-list--body.is--padding>.vxe-list--row{padding:0 var(--vxe-ui-list-current-padding)}.vxe-list--body.checkbox--highlight .vxe-list--row.is-checkbox--checked{background-color:var(--vxe-ui-list-row-checkbox-checked-background-color)}.vxe-list--body.radio--highlight .vxe-list--row.is-radio--checked{background-color:var(--vxe-ui-list-row-radio-checked-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover{background-color:var(--vxe-ui-list-row-hover-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover.is--current{background-color:var(--vxe-ui-list-row-hover-current-background-color)}.vxe-list--body.row--hover.radio--highlight .vxe-list--row.is-radio--checked:hover{background-color:var(--vxe-ui-list-row-hover-radio-checked-background-color)}.vxe-list--body.row--hover.checkbox--highlight .vxe-list--row.is-checkbox--checked:hover{background-color:var(--vxe-ui-list-row-hover-checkbox-checked-background-color)}.vxe-list--row.is--current{background-color:var(--vxe-ui-list-row-current-background-color)}.vxe-list--virtual-wrapper{height:100px}.vxe-list--row{display:flex;flex-direction:row;align-items:center}.vxe-list--row-content,.vxe-list--row-drag,.vxe-list--row-extra{display:flex;flex-direction:row;align-items:center}.vxe-list--row-drag{flex-shrink:0;padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--row-content{flex-grow:1;height:var(--vxe-ui-list-row-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--row-extra{flex-shrink:0}.vxe-list--drag-handle:not(.is--disabled){cursor:grab}.vxe-list--drag-handle:not(.is--disabled):active{cursor:grabbing}.vxe-list--drag-handle:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-handle.is--disabled{color:var(--vxe-ui-input-disabled-color);cursor:not-allowed}.vxe-list--row.row--drag-move{transition:transform .5s ease}.vxe-list--row.row--drag-origin{opacity:.3}.vxe-list--drag-row-line{display:none;position:absolute;top:0;left:0;z-index:11;pointer-events:none}.vxe-list--drag-row-line{width:100%;height:1px;border:2px solid transparent}.vxe-list--drag-row-line[drag-pos=top]{border-top-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-pos=bottom]{border-bottom-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-to-child=y]{border-top-color:transparent;border-bottom-color:transparent;border-left-color:var(--vxe-ui-status-success-color)}.vxe-list--drag-row-line.is--guides{background-color:var(--vxe-ui-list-drag-over-background-color)}.vxe-body--row-list-move{transition-property:transform;transition-duration:.35s}.vxe-list--drag-sort-tip{display:none;position:absolute;top:0;left:0;padding:.6em 1.4em;max-width:50%;min-width:100px;border-radius:var(--vxe-ui-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;background-color:var(--vxe-ui-layout-background-color);box-shadow:0 0 10px 0 rgba(0,0,0,.2);z-index:33}.vxe-list--drag-sort-tip[drag-status=normal] .vxe-list--drag-sort-tip-normal-status{display:block}.vxe-list--drag-sort-tip[drag-status=sub] .vxe-list--drag-sort-tip-sub-status{display:block}.vxe-list--drag-sort-tip[drag-status=disabled] .vxe-list--drag-sort-tip-disabled-status{display:block}.vxe-list--drag-sort-tip-wrapper{display:flex;flex-direction:row;align-items:center}.vxe-list--drag-sort-tip-status{padding-right:.4em}.vxe-list--drag-sort-tip-disabled-status{display:none;flex-shrink:0;color:var(--vxe-ui-status-error-color)}.vxe-list--drag-sort-tip-normal-status,.vxe-list--drag-sort-tip-sub-status{display:none}.vxe-list--drag-sort-tip-content{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--checkbox-header{padding-right:var(--vxe-ui-list-current-padding);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--checkbox-header{cursor:pointer}.vxe-list--checkbox-header .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-header .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--checkbox-header.is--checked,.vxe-list--checkbox-header.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-header.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--hidden{cursor:default}.vxe-list--checkbox-header.is--readonly{cursor:auto}.vxe-list--checkbox-header.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-header.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-header .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--checkbox-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--checkbox-option{cursor:pointer}.vxe-list--checkbox-option .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-option .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--checkbox-option.is--checked,.vxe-list--checkbox-option.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-option.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--hidden{cursor:default}.vxe-list--checkbox-option.is--readonly{cursor:auto}.vxe-list--checkbox-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-option.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-option .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--radio-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--radio-option{cursor:pointer}.vxe-list--radio-option .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-list--radio-option .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--radio-option.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--readonly{cursor:auto}.vxe-list--radio-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--radio-option.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--radio-option .vxe-radio--label{padding-left:.4em;vertical-align:middle}
+@charset "UTF-8";.vxe-list{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-list.size--medium{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-medium)}.vxe-list.size--small{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-small)}.vxe-list.size--mini{--vxe-ui-list-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-list-current-padding:var(--vxe-ui-layout-padding-mini)}.vxe-list{position:relative;display:block;padding:0;font-size:var(--vxe-ui-list-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);direction:ltr}.vxe-list .vxe-list--virtual-wrapper{position:relative;overflow-x:auto;overflow-y:auto;outline:0}.vxe-list .vxe-list--y-space{width:0;float:left}.vxe-list .vxe-list--body,.vxe-list .vxe-list--virtual-wrapper{padding:0;margin:0;border:0;outline:0}.vxe-list--header-wrapper{display:flex;flex-direction:row;align-items:center;min-height:var(--vxe-ui-list-row-height)}.vxe-list--header-left{display:flex;flex-direction:row;align-items:center;flex-shrink:0}.vxe-list--header-content{flex-grow:1;overflow:auto}.vxe-list--body.trigger--row>.vxe-list--row:not(.is--drag-disabled):active{cursor:grabbing}.vxe-list--body.is--padding>.vxe-list--row{padding:0 var(--vxe-ui-list-current-padding)}.vxe-list--body.checkbox--highlight .vxe-list--row.is-checkbox--checked{background-color:var(--vxe-ui-list-row-checkbox-checked-background-color)}.vxe-list--body.radio--highlight .vxe-list--row.is-radio--checked{background-color:var(--vxe-ui-list-row-radio-checked-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover{background-color:var(--vxe-ui-list-row-hover-background-color)}.vxe-list--body.row--hover .vxe-list--row:hover.is--current{background-color:var(--vxe-ui-list-row-hover-current-background-color)}.vxe-list--body.row--hover.radio--highlight .vxe-list--row.is-radio--checked:hover{background-color:var(--vxe-ui-list-row-hover-radio-checked-background-color)}.vxe-list--body.row--hover.checkbox--highlight .vxe-list--row.is-checkbox--checked:hover{background-color:var(--vxe-ui-list-row-hover-checkbox-checked-background-color)}.vxe-list--row.is--current{background-color:var(--vxe-ui-list-row-current-background-color)}.vxe-list--virtual-wrapper{height:100px}.vxe-list--row{display:flex;flex-direction:row;align-items:center}.vxe-list--row-content,.vxe-list--row-drag,.vxe-list--row-extra{display:flex;flex-direction:row;align-items:center}.vxe-list--row-drag{flex-shrink:0;padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--row-content{flex-grow:1;height:var(--vxe-ui-list-row-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--row-extra{flex-shrink:0}.vxe-list--drag-handle:not(.is--disabled){cursor:grab}.vxe-list--drag-handle:not(.is--disabled):active{cursor:grabbing}.vxe-list--drag-handle:not(.is--disabled):hover{color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-handle.is--disabled{color:var(--vxe-ui-input-disabled-color);cursor:not-allowed}.vxe-list--row.row--drag-move{transition:transform .5s ease}.vxe-list--row.row--drag-origin{opacity:.3}.vxe-list--drag-row-line{display:none;position:absolute;top:0;left:0;z-index:11;pointer-events:none}.vxe-list--drag-row-line{width:100%;height:1px;border:2px solid transparent}.vxe-list--drag-row-line[drag-pos=top]{border-top-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-pos=bottom]{border-bottom-color:var(--vxe-ui-font-primary-color)}.vxe-list--drag-row-line[drag-to-child=y]{border-top-color:transparent;border-bottom-color:transparent;border-left-color:var(--vxe-ui-status-success-color)}.vxe-list--drag-row-line.is--guides{background-color:var(--vxe-ui-list-drag-over-background-color)}.vxe-body--row-list-move{transition-property:transform;transition-duration:.35s}.vxe-list--drag-sort-tip{display:none;position:absolute;top:0;left:0;padding:.6em 1.4em;max-width:50%;min-width:100px;border-radius:var(--vxe-ui-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;background-color:var(--vxe-ui-layout-background-color);box-shadow:0 0 10px 0 rgba(0,0,0,.2);z-index:33}.vxe-list--drag-sort-tip[drag-status=normal] .vxe-list--drag-sort-tip-normal-status{display:block}.vxe-list--drag-sort-tip[drag-status=sub] .vxe-list--drag-sort-tip-sub-status{display:block}.vxe-list--drag-sort-tip[drag-status=disabled] .vxe-list--drag-sort-tip-disabled-status{display:block}.vxe-list--drag-sort-tip-wrapper{display:flex;flex-direction:row;align-items:center}.vxe-list--drag-sort-tip-status{padding-right:.4em}.vxe-list--drag-sort-tip-disabled-status{display:none;flex-shrink:0;color:var(--vxe-ui-status-error-color)}.vxe-list--drag-sort-tip-normal-status,.vxe-list--drag-sort-tip-sub-status{display:none}.vxe-list--drag-sort-tip-content{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-list--checkbox-header{padding-right:var(--vxe-ui-list-current-padding);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--checkbox-header{cursor:pointer}.vxe-list--checkbox-header .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-header .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--checkbox-header.is--checked,.vxe-list--checkbox-header.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-header.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-header.is--hidden{cursor:default}.vxe-list--checkbox-header.is--readonly{cursor:auto}.vxe-list--checkbox-header.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-header.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-header .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--checkbox-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--checkbox-option{cursor:pointer}.vxe-list--checkbox-option .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-list--checkbox-option .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--checkbox-option.is--checked,.vxe-list--checkbox-option.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--checked .vxe-checkbox--icon,.vxe-list--checkbox-option.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--checkbox-option.is--hidden{cursor:default}.vxe-list--checkbox-option.is--readonly{cursor:auto}.vxe-list--checkbox-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--checkbox-option.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--checkbox-option .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-list--radio-option{padding-right:var(--vxe-ui-list-current-padding)}.vxe-list--radio-option{cursor:pointer}.vxe-list--radio-option .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-list--radio-option .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-list--radio-option.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-list--radio-option.is--readonly{cursor:auto}.vxe-list--radio-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-list--radio-option.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-list--radio-option .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-list>.vxe-scrollbar{position:unset}.vxe-list.is--virtual-scrollbar>.vxe-list--virtual-wrapper{scrollbar-width:none;-ms-overflow-style:none}.vxe-list.is--virtual-scrollbar>.vxe-list--virtual-wrapper::-webkit-scrollbar{display:none}.vxe-list.is--virtual-scrollbar.ov-x--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:1}.vxe-list.is--virtual-scrollbar.ov-x--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-list.is--virtual-scrollbar.ov-y--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:1}.vxe-list.is--virtual-scrollbar.ov-y--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}

package/es/scrollbar/src/scrollbar.js

@@ -248,6 +248,9 @@ export default {
             if (!viewEl) {
                 return;
             }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
             const trackXEl = $xeScrollbar.$refs.refTrackXElem;
             const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
             const thumbXElem = $xeScrollbar.$refs.refThumbXElem;
@@ -270,6 +273,9 @@ export default {
             const viewEl = $xeScrollbar.$refs.refViewElem;
             if (!viewEl) {
                 return;
+                if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                    return;
+                }
             }
             const { xThumbWidth, yThumbHeight } = reactData;
             const trackXEl = $xeScrollbar.$refs.refTrackXElem;

package/es/scrollbar/style.css

@@ -1,5 +1,4 @@
 .vxe-scrollbar {
-  width: 100%;
   position: relative;
 }
 .vxe-scrollbar.is--virtual > .vxe-scrollbar--view {
@@ -37,6 +36,7 @@
 .vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar-thumb:active {
   background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
 }
+
 .vxe-scrollbar.ov-x--hidden > .vxe-scrollbar--view {
   overflow-x: hidden;
 }
@@ -56,6 +56,7 @@
   display: none;
   position: absolute;
   background-color: var(--vxe-ui-scrollbar-track-background-color);
+  overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -108,16 +109,16 @@
   left: var(--vxe-ui-scrollbar-y-width);
 }
 
-.vxe-scrollbar.is--padding.sx-pos--top {
+.vxe-scrollbar.is--padding.overflow-x.sx-pos--top {
   padding-top: var(--vxe-ui-scrollbar-x-height);
 }
-.vxe-scrollbar.is--padding.sx-pos--bottom {
+.vxe-scrollbar.is--padding.overflow-x.sx-pos--bottom {
   padding-bottom: var(--vxe-ui-scrollbar-x-height);
 }
-.vxe-scrollbar.is--padding.sy-pos--left {
+.vxe-scrollbar.is--padding.overflow-y.sy-pos--left {
   padding-left: var(--vxe-ui-scrollbar-y-width);
 }
-.vxe-scrollbar.is--padding.sy-pos--right {
+.vxe-scrollbar.is--padding.overflow-y.sy-pos--right {
   padding-right: var(--vxe-ui-scrollbar-y-width);
 }