vxe-pc-ui 3.20.0 → 3.20.1

package/es/list/src/list.js

@@ -3,7 +3,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui';
 import { crossListDragRowGlobal, getCrossListDragRowInfo } from './store';
 import { addClass, getTpImg, hasClass, isScale, removeClass, toCssUnit } from '../../ui/src/dom';
-import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils';
+import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
@@ -185,17 +185,18 @@ export default {
         computeWrapperStyles() {
             const $xeList = this;
             const rowHeight = $xeList.computeRowHeight;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
             const scrollbarXOpts = $xeList.computeScrollbarXOpts;
             const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
             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);
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
             }
             return stys;
         },
@@ -230,26 +231,52 @@ export default {
             const scrollbarOpts = $xeList.computeScrollbarOpts;
             return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
         },
+        computeScrollXVisible() {
+            const $xeList = this;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            const scrollbarXOpts = $xeList.computeScrollbarXOpts;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollYVisible() {
+            const $xeList = this;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollXAutoHide() {
+            const $xeList = this;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            const scrollbarXOpts = $xeList.computeScrollbarXOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        },
+        computeScrollYAutoHide() {
+            const $xeList = this;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        },
         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;
+            const scrollXVisible = $xeList.computeScrollXVisible;
+            const scrollYVisible = $xeList.computeScrollYVisible;
+            const scrollXAutoHide = $xeList.computeScrollXAutoHide;
+            const scrollYAutoHide = $xeList.computeScrollYAutoHide;
             return domUtils.buildClass([
                 'vxe-scrollbar is--virtual',
-                `ov-x--${scrollbarXOpts.visible || 'visible'}`,
-                `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+                `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : '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,
+                'ov-x--auto-hide': scrollXAutoHide,
+                'ov-y--auto-hide': scrollYAutoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             });
@@ -2315,7 +2342,7 @@ export default {
             const reactData = $xeList.reactData;
             const slots = $xeList.$scopedSlots;
             const { showCheckbox, className, loading, useScrollbar } = props;
-            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData;
+            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -2329,8 +2356,13 @@ export default {
             const rowOpts = $xeList.computeRowOpts;
             const { isHover, padding } = rowOpts;
             const isDrag = $xeList.computeIsDrag;
-            const scrollbarXOpts = $xeList.computeScrollbarXOpts;
-            const scrollbarYOpts = $xeList.computeScrollbarYOpts;
+            const scrollbarOpts = $xeList.computeScrollbarOpts;
+            const scrollXVisible = $xeList.computeScrollXVisible;
+            const scrollYVisible = $xeList.computeScrollYVisible;
+            const scrollbarXToTop = $xeList.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
+            const scrollXAutoHide = $xeList.computeScrollXAutoHide;
+            const scrollYAutoHide = $xeList.computeScrollYAutoHide;
             const scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss;
             const showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
             const leOns = {};
@@ -2339,14 +2371,25 @@ export default {
             }
             return h('div', {
                 ref: 'refElem',
-                class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
+                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'}` : '',
+                    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,
+                        'ov-padding': useScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'overflow-y': yThumbHeight,
+                        'overflow-x': xThumbWidth,
                         'is--drag': isDrag,
                         'is--loading': loading
-                    }],
+                    }
+                ],
                 on: leOns,
                 style: wrapperStyles
             }, [
@@ -2407,15 +2450,7 @@ export default {
                         style: {
                             marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
                         }
-                    }, 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)))
-                        ])
+                    }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
                 ]),
                 footerSlot
                     ? h('div', {
@@ -2430,7 +2465,7 @@ export default {
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
-                        scrollbarXOpts.visible === 'hidden'
+                        scrollXVisible === false
                             ? renderEmptyElement($xeList)
                             : h('div', {
                                 ref: 'refTrackXElem',
@@ -2451,7 +2486,7 @@ export default {
                                     }
                                 })
                             ]),
-                        scrollbarYOpts.visible === 'hidden'
+                        scrollYVisible === false
                             ? renderEmptyElement($xeList)
                             : h('div', {
                                 ref: 'refTrackYElem',
@@ -2508,13 +2543,29 @@ export default {
             const $xeList = this;
             $xeList.reFlag++;
         },
+        useScrollbar() {
+            const $xeList = this;
+            $xeList.reFlag++;
+        },
         computeRowHeight() {
             const $xeList = this;
             $xeList.reFlag++;
         },
-        reFlag() {
+        computeScrollXVisible() {
             const $xeList = this;
             $xeList.$nextTick(() => {
+                $xeList.reFlag++;
+            });
+        },
+        computeScrollYVisible() {
+            const $xeList = this;
+            $xeList.$nextTick(() => {
+                $xeList.reFlag++;
+            });
+        },
+        reFlag() {
+            const $xeList = this;
+            $xeList.recalculate().then(() => {
                 $xeList.recalculate();
             });
         },
@@ -2561,13 +2612,13 @@ export default {
         }
         if (useScrollbar || autoResize) {
             const el = $xeList.$refs.refElem;
-            const viewInnerEl = $xeList.$refs.refViewInnerElem;
+            const viewInnerEl = $xeList.$refs.refVirtualBody;
             const resizeObserver = globalResize.create(() => {
                 $xeList.reFlag++;
             });
-            resizeObserver.observe(el);
-            if (autoResize) {
-                if (el) {
+            if (el) {
+                resizeObserver.observe(el);
+                if (autoResize) {
                     resizeObserver.observe(el.parentElement);
                 }
             }

package/es/list/style.css

@@ -381,17 +381,24 @@
   vertical-align: middle;
 }
 
-.vxe-list > .vxe-scrollbar {
-  position: unset;
+.vxe-list.ov-padding.overflow-x.sx-pos--top {
+  padding-top: var(--vxe-ui-scrollbar-x-height);
 }
-.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.vxe-list.ov-padding.overflow-x.sx-pos--bottom {
+  padding-bottom: var(--vxe-ui-scrollbar-x-height);
 }
-.vxe-list.is--virtual-scrollbar > .vxe-list--virtual-wrapper::-webkit-scrollbar {
-  display: none;
+.vxe-list.ov-padding.overflow-y.sy-pos--left {
+  padding-left: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-list.ov-padding.overflow-y.sy-pos--right {
+  padding-right: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-list.ov-x--hidden > .vxe-list--virtual-wrapper {
+  overflow-x: hidden;
+}
+.vxe-list.ov-y--hidden > .vxe-list--virtual-wrapper {
+  overflow-y: hidden;
 }
-
 .vxe-list.is--virtual-scrollbar.ov-x--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-x {
   opacity: 1;
 }
@@ -405,4 +412,14 @@
 .vxe-list.is--virtual-scrollbar.ov-y--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-y {
   opacity: 0;
   transition: opacity 0.8s ease-in-out;
+}
+.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;
 }

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}.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}
+@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.ov-padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-list.ov-padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-list.ov-padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-list.ov-padding.overflow-y.sy-pos--right{padding-right:var(--vxe-ui-scrollbar-y-width)}.vxe-list.ov-x--hidden>.vxe-list--virtual-wrapper{overflow-x:hidden}.vxe-list.ov-y--hidden>.vxe-list--virtual-wrapper{overflow-y:hidden}.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}.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}

package/es/scrollbar/src/scrollbar.js

@@ -3,6 +3,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { toCssUnit } from '../../ui/src/dom';
 import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './util';
+import { getDefaultConfig } from '../../ui/src/utils';
 import VxeLoadingComponent from '../../loading';
 const { getConfig, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
 function createReactData() {
@@ -26,6 +27,7 @@ export default {
     name: 'VxeScrollbar',
     props: {
         id: [String, Number],
+        viewId: [String, Number],
         width: [String, Number],
         height: [String, Number],
         minWidth: [String, Number],
@@ -41,6 +43,14 @@ export default {
             type: Boolean,
             default: () => getConfig().scrollbar.padding
         },
+        autoHide: {
+            type: Boolean,
+            default: () => getConfig().scrollbar.autoHide
+        },
+        visible: {
+            type: Boolean,
+            default: () => getConfig().scrollbar.visible
+        },
         xConfig: Object,
         yConfig: Object,
         className: {
@@ -78,6 +88,8 @@ export default {
             const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
             const xOpts = $xeScrollbar.computeXOpts;
             const yOpts = $xeScrollbar.computeYOpts;
+            const barWidth = yOpts.width;
+            const barHeight = xOpts.height;
             const stys = {};
             if (width) {
                 stys.width = toCssUnit(width);
@@ -97,36 +109,64 @@ export default {
             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);
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
             }
             return stys;
         },
+        computeXVisible() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { visible } = props;
+            const xOpts = $xeScrollbar.computeXOpts;
+            return getDefaultConfig(xOpts.visible, visible);
+        },
+        computeYVisible() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { visible } = props;
+            const yOpts = $xeScrollbar.computeYOpts;
+            return getDefaultConfig(yOpts.visible, visible);
+        },
+        computeXAutoHide() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { autoHide } = props;
+            const xOpts = $xeScrollbar.computeXOpts;
+            return getDefaultConfig(xOpts.autoHide, autoHide);
+        },
+        computeYAutoHide() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { autoHide } = props;
+            const yOpts = $xeScrollbar.computeYOpts;
+            return getDefaultConfig(yOpts.autoHide, autoHide);
+        },
         computeWrapperClss() {
             const $xeScrollbar = this;
             const props = $xeScrollbar;
             const reactData = $xeScrollbar.reactData;
             const { native, className, padding } = props;
             const { yThumbHeight, xThumbWidth } = reactData;
-            const xOpts = $xeScrollbar.computeXOpts;
-            const yOpts = $xeScrollbar.computeYOpts;
             const xToTop = $xeScrollbar.computeXToTop;
             const yToLeft = $xeScrollbar.computeYToLeft;
+            const xVisible = $xeScrollbar.computeXVisible;
+            const yVisible = $xeScrollbar.computeYVisible;
+            const xAutoHide = $xeScrollbar.computeXAutoHide;
+            const yAutoHide = $xeScrollbar.computeYAutoHide;
             return domUtils.buildClass([
                 'vxe-scrollbar',
-                `ov-x--${xOpts.visible || 'visible'}`,
-                `ov-y--${yOpts.visible || 'visible'}`,
+                `ov-x--${xVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${yVisible === false ? 'hidden' : '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,
+                'ov-x--auto-hide': xAutoHide,
+                'ov-y--auto-hide': yAutoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             });
@@ -496,13 +536,13 @@ export default {
             const $xeScrollbar = this;
             const props = $xeScrollbar;
             const slots = $xeScrollbar.$scopedSlots;
-            const { id, native, loading, viewAttrs } = props;
+            const { id, native, loading, viewId, viewAttrs } = props;
             const wrapperStyle = $xeScrollbar.computeWrapperStyle;
             const wrapperClss = $xeScrollbar.computeWrapperClss;
             const viewClss = $xeScrollbar.computeViewClss;
             const viewInnerClss = $xeScrollbar.computeViewInnerClss;
-            const xOpts = $xeScrollbar.computeXOpts;
-            const yOpts = $xeScrollbar.computeYOpts;
+            const xVisible = $xeScrollbar.computeXVisible;
+            const yVisible = $xeScrollbar.computeYVisible;
             const defaultSlot = slots.default;
             return h('div', {
                 ref: 'refElem',
@@ -515,7 +555,7 @@ export default {
                 h('div', {
                     ref: 'refViewElem',
                     class: viewClss,
-                    attrs: viewAttrs,
+                    attrs: Object.assign({ id: viewId || null }, viewAttrs),
                     on: {
                         scroll: $xeScrollbar.scrollEvent
                     }
@@ -526,7 +566,7 @@ export default {
                         class: viewInnerClss
                     }, defaultSlot ? defaultSlot({}) : [])
                 ]),
-                native || xOpts.visible === 'hidden'
+                native || xVisible === false
                     ? renderEmptyElement($xeScrollbar)
                     : h('div', {
                         ref: 'refTrackXElem',
@@ -547,7 +587,7 @@ export default {
                             }
                         })
                     ]),
-                native || yOpts.visible === 'hidden'
+                native || yVisible === false
                     ? renderEmptyElement($xeScrollbar)
                     : h('div', {
                         ref: 'refTrackYElem',
@@ -610,6 +650,18 @@ export default {
             const $xeScrollbar = this;
             $xeScrollbar.reFlag++;
         },
+        computeXVisible() {
+            const $xeScrollbar = this;
+            $xeScrollbar.$nextTick(() => {
+                $xeScrollbar.reFlag++;
+            });
+        },
+        computeYVisible() {
+            const $xeScrollbar = this;
+            $xeScrollbar.$nextTick(() => {
+                $xeScrollbar.reFlag++;
+            });
+        },
         reFlag() {
             const $xeScrollbar = this;
             $xeScrollbar.recalculate().then(() => {