vxe-pc-ui 3.19.8 → 3.20.1

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(() => {

package/es/scrollbar/style.css

@@ -36,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;
 }