vxe-pc-ui 4.18.22 → 4.19.0

package/es/scrollbar/src/scrollbar.js

@@ -26,6 +26,7 @@ function createInternalData() {
 export default defineVxeComponent({
     name: 'VxeScrollbar',
     props: {
+        id: [String, Number],
         width: [String, Number],
         height: [String, Number],
         minWidth: [String, Number],
@@ -39,8 +40,22 @@ export default defineVxeComponent({
         },
         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
@@ -96,6 +111,7 @@ export default defineVxeComponent({
         });
         const computeWrapperClss = computed(() => {
             const { native, className } = props;
+            const { yThumbHeight, xThumbWidth } = reactData;
             const xOpts = computeXOpts.value;
             const yOpts = computeYOpts.value;
             return domUtils.buildClass([
@@ -106,7 +122,9 @@ export default defineVxeComponent({
                 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
             });
         });
         const computeViewClss = computed(() => {
@@ -116,6 +134,13 @@ export default defineVxeComponent({
                 viewClassName
             ]);
         });
+        const computeViewInnerClss = computed(() => {
+            const { viewInnerClassName } = props;
+            return domUtils.buildClass([
+                'vxe-scrollbar--view-inner',
+                viewInnerClassName
+            ]);
+        });
         const computeXOpts = computed(() => {
             return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
         });
@@ -390,26 +415,25 @@ export default defineVxeComponent({
         const scrollbarPrivateMethods = {};
         Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
         const renderVN = () => {
-            const { native, loading } = props;
+            const { id, native, loading, viewAttrs } = props;
             const wrapperStyle = computeWrapperStyle.value;
             const wrapperClss = computeWrapperClss.value;
             const viewClss = computeViewClss.value;
+            const viewInnerClss = computeViewInnerClss.value;
             const xOpts = computeXOpts.value;
             const yOpts = computeYOpts.value;
             const defaultSlot = slots.default;
             return h('div', {
                 ref: refElem,
+                id: id || null,
                 class: wrapperClss,
                 style: wrapperStyle
             }, [
-                h('div', {
-                    ref: refViewElem,
-                    class: viewClss,
-                    onScroll: scrollEvent
-                }, [
+                h('div', Object.assign({ ref: refViewElem, class: viewClss, onScroll: scrollEvent }, viewAttrs), [
                     h('div', {
+                        key: 'vi',
                         ref: refViewInnerElem,
-                        class: 'vxe-scrollbar--view-inner'
+                        class: viewInnerClss
                     }, defaultSlot ? defaultSlot({}) : [])
                 ]),
                 native || xOpts.visible === 'hidden'
@@ -453,6 +477,24 @@ export default defineVxeComponent({
             ]);
         };
         const reFlag = ref(0);
+        watch(() => props.height, () => {
+            reFlag.value++;
+        });
+        watch(() => props.width, () => {
+            reFlag.value++;
+        });
+        watch(() => props.minHeight, () => {
+            reFlag.value++;
+        });
+        watch(() => props.minWidth, () => {
+            reFlag.value++;
+        });
+        watch(() => props.maxHeight, () => {
+            reFlag.value++;
+        });
+        watch(() => props.maxWidth, () => {
+            reFlag.value++;
+        });
         watch(() => props.native, () => {
             reFlag.value++;
         });
@@ -466,19 +508,23 @@ export default defineVxeComponent({
         });
         onMounted(() => {
             const { autoResize } = props;
+            const viewEl = refViewElem.value;
             const viewInnerEl = refViewInnerElem.value;
-            if (autoResize && viewInnerEl) {
+            if (autoResize) {
                 const resizeObserver = globalResize.create(() => {
                     if (props.autoResize) {
                         reFlag.value++;
                     }
                 });
-                resizeObserver.observe(viewInnerEl);
+                if (viewEl) {
+                    resizeObserver.observe(viewEl);
+                }
+                if (viewInnerEl) {
+                    resizeObserver.observe(viewInnerEl);
+                }
                 internalData.resizeObserver = resizeObserver;
             }
-            nextTick(() => {
-                $xeScrollbar.recalculate();
-            });
+            reFlag.value++;
         });
         onBeforeUnmount(() => {
             const { resizeObserver } = internalData;

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;
@@ -64,11 +61,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 {
@@ -76,6 +78,7 @@
   right: 0;
   top: 0;
   width: var(--vxe-ui-scrollbar-y-width);
+  padding: 0 var(--vxe-ui-scrollbar-track-padding);
 }
 
 .vxe-scrollbar--thumb-y {
@@ -88,7 +91,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;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;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

@@ -6,8 +6,8 @@ import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement
 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;