vxe-pc-ui 3.18.22 → 3.19.0

package/es/scrollbar/src/scrollbar.js

@@ -25,6 +25,7 @@ function createInternalData() {
 export default {
     name: 'VxeScrollbar',
     props: {
+        id: [String, Number],
         width: [String, Number],
         height: [String, Number],
         minWidth: [String, Number],
@@ -38,8 +39,22 @@ export default {
         },
         xConfig: Object,
         yConfig: Object,
-        className: String,
-        viewClassName: String,
+        className: {
+            type: String,
+            default: () => getConfig().scrollbar.className
+        },
+        viewAttrs: {
+            type: Object,
+            default: () => getConfig().scrollbar.viewAttrs
+        },
+        viewClassName: {
+            type: String,
+            default: () => getConfig().scrollbar.viewClassName
+        },
+        viewInnerClassName: {
+            type: String,
+            default: () => getConfig().scrollbar.viewInnerClassName
+        },
         autoResize: {
             type: Boolean,
             default: () => getConfig().scrollbar.autoResize
@@ -89,7 +104,9 @@ export default {
         computeWrapperClss() {
             const $xeScrollbar = this;
             const props = $xeScrollbar;
+            const reactData = $xeScrollbar.reactData;
             const { native, className } = props;
+            const { yThumbHeight, xThumbWidth } = reactData;
             const xOpts = $xeScrollbar.computeXOpts;
             const yOpts = $xeScrollbar.computeYOpts;
             return domUtils.buildClass([
@@ -100,7 +117,9 @@ export default {
                 className
             ], {
                 'ov-x--auto-hide': xOpts.autoHide,
-                'ov-y--auto-hide': yOpts.autoHide
+                'ov-y--auto-hide': yOpts.autoHide,
+                'overflow-y': yThumbHeight,
+                'overflow-x': xThumbWidth
             });
         },
         computeViewClss() {
@@ -112,6 +131,15 @@ export default {
                 viewClassName
             ]);
         },
+        computeViewInnerClss() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { viewInnerClassName } = props;
+            return domUtils.buildClass([
+                'vxe-scrollbar--view-inner',
+                viewInnerClassName
+            ]);
+        },
         computeXOpts() {
             const $xeScrollbar = this;
             const props = $xeScrollbar;
@@ -405,28 +433,34 @@ export default {
             const $xeScrollbar = this;
             const props = $xeScrollbar;
             const slots = $xeScrollbar.$scopedSlots;
-            const { native, loading } = props;
+            const { id, native, loading, 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 defaultSlot = slots.default;
             return h('div', {
                 ref: 'refElem',
+                attrs: {
+                    id: id || null
+                },
                 class: wrapperClss,
                 style: wrapperStyle
             }, [
                 h('div', {
                     ref: 'refViewElem',
                     class: viewClss,
+                    attrs: viewAttrs,
                     on: {
                         scroll: $xeScrollbar.scrollEvent
                     }
                 }, [
                     h('div', {
+                        key: 'vi',
                         ref: 'refViewInnerElem',
-                        class: 'vxe-scrollbar--view-inner'
+                        class: viewInnerClss
                     }, defaultSlot ? defaultSlot({}) : [])
                 ]),
                 native || xOpts.visible === 'hidden'
@@ -481,6 +515,30 @@ export default {
         }
     },
     watch: {
+        height() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
+        width() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
+        minHeight() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
+        minWidth() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
+        maxHeight() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
+        maxWidth() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
         native() {
             const $xeScrollbar = this;
             $xeScrollbar.reFlag++;
@@ -505,19 +563,23 @@ export default {
         const props = $xeScrollbar;
         const internalData = $xeScrollbar.internalData;
         const { autoResize } = props;
+        const viewEl = $xeScrollbar.$refs.refViewElem;
         const viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
-        if (autoResize && viewInnerEl) {
+        if (autoResize) {
             const resizeObserver = globalResize.create(() => {
                 if (props.autoResize) {
                     $xeScrollbar.reFlag++;
                 }
             });
-            resizeObserver.observe(viewInnerEl);
+            if (viewEl) {
+                resizeObserver.observe(viewEl);
+            }
+            if (viewInnerEl) {
+                resizeObserver.observe(viewInnerEl);
+            }
             internalData.resizeObserver = resizeObserver;
         }
-        $xeScrollbar.$nextTick(() => {
-            $xeScrollbar.recalculate();
-        });
+        $xeScrollbar.reFlag++;
     },
     beforeDestroy() {
         const $xeScrollbar = this;

package/es/scrollbar/style.css

@@ -5,8 +5,6 @@
 .vxe-scrollbar.is--virtual > .vxe-scrollbar--view {
   scrollbar-width: none;
   -ms-overflow-style: none;
-  overflow-x: auto;
-  overflow-y: auto;
 }
 .vxe-scrollbar.is--virtual > .vxe-scrollbar--view::-webkit-scrollbar {
   display: none;
@@ -16,24 +14,14 @@
 }
 .vxe-scrollbar.is--virtual.ov-x--auto-hide > .vxe-scrollbar--track-x {
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.8s ease-in-out;
 }
 .vxe-scrollbar.is--virtual.ov-y--auto-hide:hover > .vxe-scrollbar--track-y {
   opacity: 1;
 }
 .vxe-scrollbar.is--virtual.ov-y--auto-hide > .vxe-scrollbar--track-y {
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-}
-.vxe-scrollbar.is--native > .vxe-scrollbar--view {
-  overflow-x: auto;
-  overflow-y: auto;
-}
-.vxe-scrollbar.is--native.ov-x--hidden > .vxe-scrollbar--view {
-  overflow-x: hidden;
-}
-.vxe-scrollbar.is--native.ov-y--hidden > .vxe-scrollbar--view {
-  overflow-y: hidden;
+  transition: opacity 0.8s ease-in-out;
 }
 .vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar {
   width: var(--vxe-ui-scrollbar-y-width);
@@ -49,14 +37,23 @@
 .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;
+}
+.vxe-scrollbar.ov-y--hidden > .vxe-scrollbar--view {
+  overflow-y: hidden;
+}
 
 .vxe-scrollbar--view {
   height: 100%;
   width: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
 }
 
 .vxe-scrollbar--track-x,
 .vxe-scrollbar--track-y {
+  display: none;
   position: absolute;
   background-color: var(--vxe-ui-scrollbar-track-background-color);
   -webkit-user-select: none;
@@ -65,11 +62,16 @@
           user-select: none;
 }
 
+.vxe-scrollbar.overflow-y > .vxe-scrollbar--track-x, .vxe-scrollbar.overflow-y > .vxe-scrollbar--track-y {
+  display: block;
+}
+
 .vxe-scrollbar--track-x {
   width: 100%;
   bottom: 0;
   left: 0;
   height: var(--vxe-ui-scrollbar-x-height);
+  padding: var(--vxe-ui-scrollbar-track-padding) 0;
 }
 
 .vxe-scrollbar--track-y {
@@ -77,6 +79,7 @@
   right: 0;
   top: 0;
   width: var(--vxe-ui-scrollbar-y-width);
+  padding: 0 var(--vxe-ui-scrollbar-track-padding);
 }
 
 .vxe-scrollbar--thumb-y {
@@ -89,7 +92,7 @@
 
 .vxe-scrollbar--thumb-x,
 .vxe-scrollbar--thumb-y {
-  border-radius: var(--vxe-ui-base-border-radius);
+  border-radius: var(--vxe-ui-scrollbar-thumb-border-radius);
   background-color: var(--vxe-ui-scrollbar-thumb-background-color);
 }
 .vxe-scrollbar--thumb-x:hover,

package/es/scrollbar/style.min.css

@@ -1 +1 @@
-.vxe-scrollbar{width:100%;position:relative}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view{scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view::-webkit-scrollbar{display:none}.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover>.vxe-scrollbar--track-x{opacity:1}.vxe-scrollbar.is--virtual.ov-x--auto-hide>.vxe-scrollbar--track-x{opacity:0;transition:opacity .3s ease-in-out}.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover>.vxe-scrollbar--track-y{opacity:1}.vxe-scrollbar.is--virtual.ov-y--auto-hide>.vxe-scrollbar--track-y{opacity:0;transition:opacity .3s ease-in-out}.vxe-scrollbar.is--native>.vxe-scrollbar--view{overflow-x:auto;overflow-y:auto}.vxe-scrollbar.is--native.ov-x--hidden>.vxe-scrollbar--view{overflow-x:hidden}.vxe-scrollbar.is--native.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar{width:var(--vxe-ui-scrollbar-y-width);height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}.vxe-scrollbar--view{height:100%;width:100%}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-scrollbar--track-x{width:100%;bottom:0;left:0;height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar--track-y{height:100%;right:0;top:0;width:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar--thumb-y{width:100%}.vxe-scrollbar--thumb-x{height:100%}.vxe-scrollbar--thumb-x,.vxe-scrollbar--thumb-y{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar--thumb-x:hover,.vxe-scrollbar--thumb-y:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar--thumb-x:active,.vxe-scrollbar--thumb-y:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}
+.vxe-scrollbar{width:100%;position:relative}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view{scrollbar-width:none;-ms-overflow-style:none}.vxe-scrollbar.is--virtual>.vxe-scrollbar--view::-webkit-scrollbar{display:none}.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover>.vxe-scrollbar--track-x{opacity:1}.vxe-scrollbar.is--virtual.ov-x--auto-hide>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover>.vxe-scrollbar--track-y{opacity:1}.vxe-scrollbar.is--virtual.ov-y--auto-hide>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar{width:var(--vxe-ui-scrollbar-y-width);height:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb{border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar.is--native>.vxe-scrollbar--view::-webkit-scrollbar-thumb:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.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}.vxe-scrollbar.ov-y--hidden>.vxe-scrollbar--view{overflow-y:hidden}.vxe-scrollbar--view{height:100%;width:100%;overflow-x:auto;overflow-y:auto}.vxe-scrollbar--track-x,.vxe-scrollbar--track-y{display:none;position:absolute;background-color:var(--vxe-ui-scrollbar-track-background-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-x,.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-y{display:block}.vxe-scrollbar--track-x{width:100%;bottom:0;left:0;height:var(--vxe-ui-scrollbar-x-height);padding:var(--vxe-ui-scrollbar-track-padding) 0}.vxe-scrollbar--track-y{height:100%;right:0;top:0;width:var(--vxe-ui-scrollbar-y-width);padding:0 var(--vxe-ui-scrollbar-track-padding)}.vxe-scrollbar--thumb-y{width:100%}.vxe-scrollbar--thumb-x{height:100%}.vxe-scrollbar--thumb-x,.vxe-scrollbar--thumb-y{border-radius:var(--vxe-ui-scrollbar-thumb-border-radius);background-color:var(--vxe-ui-scrollbar-thumb-background-color)}.vxe-scrollbar--thumb-x:hover,.vxe-scrollbar--thumb-y:hover{background-color:var(--vxe-ui-scrollbar-thumb-hover-background-color)}.vxe-scrollbar--thumb-x:active,.vxe-scrollbar--thumb-y:active{background-color:var(--vxe-ui-scrollbar-thumb-active-background-color)}

package/es/select/src/select.js

@@ -5,8 +5,8 @@ import { getEventTargetNode, getPopupAppendElement, toCssUnit, updatePanelPlacem
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
-import VxeInputComponent from '../../input/src/input';
-import VxeButtonComponent from '../../button/src/button';
+import VxeInputComponent from '../../input';
+import VxeButtonComponent from '../../button';
 const { errLog } = createComponentLog('select');
 function isOptionVisible(option) {
     return option.visible !== false;