vxe-pc-ui 4.20.8 → 4.20.10

package/lib/vxe-select/style/style.min.css

@@ -1 +1 @@
-.vxe-select,.vxe-select--panel{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--xlarge,.vxe-select.size--xlarge{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-xlarge)}.vxe-select--panel.size--large,.vxe-select.size--large{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-large)}.vxe-select--panel.size--medium,.vxe-select.size--medium{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-mini)}.vxe-select,.vxe-select--panel{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel.size--mini,.vxe-select--panel.size--small,.vxe-select.size--mini,.vxe-select.size--small{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-select{position:relative;display:inline-block;width:180px;font-size:var(--vxe-ui-select-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-select>.vxe-input{width:100%}.vxe-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-select-slots{display:none}.vxe-select--panel{font-size:var(--vxe-ui-select-current-font-size);display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-select--panel:not(.is--transfer){min-width:100%}.vxe-select--panel.is--transfer{position:fixed}.vxe-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-select--panel.ani--enter>div::after{display:none}.vxe-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel-search .vxe-select-search--input{width:100%}.vxe-select--panel-wrapper{display:flex;flex-direction:column;position:relative;max-height:18em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-select--panel-body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-select--header-button{display:flex;flex-direction:row}.vxe-select--footer-button,.vxe-select--header-button{display:flex;flex-direction:row;white-space:nowrap;align-items:center;min-height:2em}.vxe-select--total-btns{padding-left:var(--vxe-ui-select-current-padding);flex-grow:1}.vxe-select--oper-btns,.vxe-select--total-btns{display:flex;flex-direction:row;align-items:center}.vxe-select--oper-btns{flex-shrink:0}.vxe-select--footer-button{display:flex;flex-direction:row}.vxe-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer,.vxe-select--panel-header{flex-shrink:0;padding:4px 0}.vxe-select-option--wrapper{flex-grow:1;position:relative;overflow-x:hidden;overflow-y:auto}.vxe-select--y-space{width:0;float:left}.vxe-select--body,.vxe-select-option--wrapper{padding:0;margin:0;border:0;outline:0}.vxe-select-option{position:relative;flex-direction:row;display:flex;padding:0 .6em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.vxe-select-option.is--add{padding-right:2em}.vxe-select-option.is--add:hover .vxe-select-option--add-icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option.is--add .vxe-select-option--add-icon{display:block}.vxe-select-option.is--selected{color:var(--vxe-ui-font-primary-color)}.vxe-select-option:not(.is--disabled).is--hover{background-color:var(--vxe-ui-select-option-hover-background-color)}.vxe-select-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-select-optgroup{color:var(--vxe-ui-select-title-color);font-size:12px;cursor:default}.vxe-select-option--label{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-select-option--add-icon{display:none;position:absolute;top:0;right:.6em}.vxe-select-option--checkbox{padding-right:.4em}.vxe-select-option--checkbox{cursor:pointer}.vxe-select-option--checkbox .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-select-option--checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select-option--checkbox.is--checked,.vxe-select-option--checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--checked .vxe-checkbox--icon,.vxe-select-option--checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--hidden{cursor:default}.vxe-select-option--checkbox.is--readonly{cursor:auto}.vxe-select-option--checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--checkbox .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-select-option--radio{padding-right:.4em}.vxe-select-option--radio{cursor:pointer}.vxe-select-option--radio .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-select-option--radio .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;user-select:none}.vxe-select-option--radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--readonly{cursor:auto}.vxe-select-option--radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--radio .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-select--search-icon{margin-right:.5em}.vxe-select--empty-placeholder,.vxe-select--search-loading{padding:0 .6em;text-align:center;color:var(--vxe-ui-select-empty-color)}.vxe-select-option{height:var(--vxe-ui-select-current-option-height)}.vxe-select--empty-placeholder,.vxe-select--search-loading,.vxe-select-option{line-height:var(--vxe-ui-select-current-option-height)}
+.vxe-select,.vxe-select--panel{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--xlarge,.vxe-select.size--xlarge{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-xlarge)}.vxe-select--panel.size--large,.vxe-select.size--large{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-large)}.vxe-select--panel.size--medium,.vxe-select.size--medium{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-mini)}.vxe-select,.vxe-select--panel{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel.size--mini,.vxe-select--panel.size--small,.vxe-select.size--mini,.vxe-select.size--small{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-select{position:relative;display:inline-block;width:180px;font-size:var(--vxe-ui-select-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-select>.vxe-input{width:100%}.vxe-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-select-slots{display:none}.vxe-select--panel{font-size:var(--vxe-ui-select-current-font-size);display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-select--panel:not(.is--transfer){min-width:100%}.vxe-select--panel.is--transfer{position:fixed}.vxe-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-select--panel.ani--enter>div::after{display:none}.vxe-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel-search .vxe-select-search--input{width:100%}.vxe-select--panel-wrapper{display:flex;flex-direction:column;position:relative;max-height:18em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-select--panel-body{position:relative;display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-select--header-button{display:flex;flex-direction:row}.vxe-select--footer-button,.vxe-select--header-button{display:flex;flex-direction:row;white-space:nowrap;align-items:center;min-height:2em}.vxe-select--total-btns{padding-left:var(--vxe-ui-select-current-padding);flex-grow:1}.vxe-select--oper-btns,.vxe-select--total-btns{display:flex;flex-direction:row;align-items:center}.vxe-select--oper-btns{flex-shrink:0}.vxe-select--footer-button{display:flex;flex-direction:row}.vxe-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer,.vxe-select--panel-header{flex-shrink:0;padding:4px 0}.vxe-select-option--wrapper{flex-grow:1;position:relative;overflow-x:hidden;overflow-y:auto}.vxe-select--y-space{width:0;float:left}.vxe-select--body,.vxe-select-option--wrapper{padding:0;margin:0;border:0;outline:0}.vxe-select-option{position:relative;flex-direction:row;display:flex;padding:0 .6em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.vxe-select-option.is--add{padding-right:2em}.vxe-select-option.is--add:hover .vxe-select-option--add-icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option.is--add .vxe-select-option--add-icon{display:block}.vxe-select-option.is--selected{color:var(--vxe-ui-font-primary-color)}.vxe-select-option:not(.is--disabled).is--hover{background-color:var(--vxe-ui-select-option-hover-background-color)}.vxe-select-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-select-optgroup{color:var(--vxe-ui-select-title-color);font-size:12px;cursor:default}.vxe-select-option--label{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-select-option--add-icon{display:none;position:absolute;top:0;right:.6em}.vxe-select-option--checkbox{padding-right:.4em}.vxe-select-option--checkbox{cursor:pointer}.vxe-select-option--checkbox .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-select-option--checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select-option--checkbox.is--checked,.vxe-select-option--checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--checked .vxe-checkbox--icon,.vxe-select-option--checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--hidden{cursor:default}.vxe-select-option--checkbox.is--readonly{cursor:auto}.vxe-select-option--checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--checkbox .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-select-option--radio{padding-right:.4em}.vxe-select-option--radio{cursor:pointer}.vxe-select-option--radio .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-select-option--radio .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;user-select:none}.vxe-select-option--radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--readonly{cursor:auto}.vxe-select-option--radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--radio .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-select--search-icon{margin-right:.5em}.vxe-select--empty-placeholder,.vxe-select--search-loading{padding:0 .6em;text-align:center;color:var(--vxe-ui-select-empty-color)}.vxe-select-option{height:var(--vxe-ui-select-current-option-height)}.vxe-select--empty-placeholder,.vxe-select--search-loading,.vxe-select-option{line-height:var(--vxe-ui-select-current-option-height)}.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--right{padding-right:var(--vxe-ui-scrollbar-y-width)}.vxe-select--panel-body.ov-x--hidden>.vxe-select-option--wrapper{overflow-x:hidden}.vxe-select--panel-body.ov-y--hidden>.vxe-select-option--wrapper{overflow-y:hidden}.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:1}.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:1}.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-select--panel-body>.vxe-scrollbar{position:unset}.vxe-select--panel-body.is--virtual-scrollbar>.vxe-select-option--wrapper{scrollbar-width:none;-ms-overflow-style:none}.vxe-select--panel-body.is--virtual-scrollbar>.vxe-select-option--wrapper::-webkit-scrollbar{display:none}

package/lib/vxe-tooltip/style/style.css

@@ -28,6 +28,8 @@
 .vxe-tooltip--wrapper .vxe-tooltip--content,
 .vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view {
   padding: 8px 12px;
+  width: -moz-max-content;
+  width: max-content;
   max-width: 600px;
   max-height: 800px;
   white-space: pre-line;

package/lib/vxe-tooltip/style/style.min.css

@@ -1 +1 @@
-.vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:inline-block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper.is--enterable .vxe-tooltip--body{pointer-events:all}.vxe-tooltip--wrapper .vxe-tooltip--content,.vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view{padding:8px 12px;max-width:600px;max-height:800px;white-space:pre-line;border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--arrow{padding-bottom:6px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--arrow{padding-top:6px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-11px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-3px}.vxe-tooltip--body{position:relative;border-radius:var(--vxe-ui-base-border-radius);white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2)}.vxe-tooltip--wrapper.theme--light .vxe-tooltip--body{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark .vxe-tooltip--body{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}
+.vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:inline-block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper.is--enterable .vxe-tooltip--body{pointer-events:all}.vxe-tooltip--wrapper .vxe-tooltip--content,.vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view{padding:8px 12px;width:-moz-max-content;width:max-content;max-width:600px;max-height:800px;white-space:pre-line;border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--arrow{padding-bottom:6px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--arrow{padding-top:6px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-11px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-3px}.vxe-tooltip--body{position:relative;border-radius:var(--vxe-ui-base-border-radius);white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2)}.vxe-tooltip--wrapper.theme--light .vxe-tooltip--body{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark .vxe-tooltip--body{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.20.8",
+  "version": "4.20.10",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -27,7 +27,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^4.4.33"
+    "@vxe-ui/core": "^4.4.36"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",

package/packages/card/src/card.ts

@@ -2,7 +2,7 @@ import { ref, h, reactive, PropType, computed } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
-import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { getConfig, createEvent, useFns, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import { getDefaultConfig } from '../../ui/src/utils'
 import VxeLoadingComponent from '../../loading'
@@ -52,7 +52,8 @@ export default defineVxeComponent({
 
     const refElem = ref<HTMLDivElement>()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive<CardReactData>({
     })
@@ -119,7 +120,7 @@ export default defineVxeComponent({
     Object.assign($xeCard, cardMethods, cardPrivateMethods)
 
     const renderVN = () => {
-      const { title, border, shadow, padding, loading, showTitleOverflow, useScrollbar } = props
+      const { title, border, shadow, padding, loading, showTitleOverflow } = props
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const titleSlot = slots.title
@@ -128,6 +129,7 @@ export default defineVxeComponent({
       const leftSlot = slots.left
       const rightSlot = slots.right
       const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
       const cardStyle = computeCardStyle.value
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarProps = computeScrollbarProps.value
@@ -166,7 +168,7 @@ export default defineVxeComponent({
         }, [
           leftSlot
             ? (
-                useScrollbar
+                isVScrollbar
                   ? h(VxeScrollbarComponent, {
                     class: 'vxe-card--body-scrollbar-left',
                     ...scrollbarProps,
@@ -180,7 +182,7 @@ export default defineVxeComponent({
                   }, getSlotVNs(leftSlot({})))
               )
             : renderEmptyElement($xeCard),
-          useScrollbar
+          isVScrollbar
             ? h(VxeScrollbarComponent, {
               class: 'vxe-card--body-scrollbar-content',
               ...scrollbarProps,
@@ -194,7 +196,7 @@ export default defineVxeComponent({
             }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
           rightSlot
             ? (
-                useScrollbar
+                isVScrollbar
                   ? h(VxeScrollbarComponent, {
                     class: 'vxe-card--body-scrollbar-right',
                     ...scrollbarProps,

package/packages/date-panel/src/date-panel.ts

@@ -4,6 +4,7 @@ import XEUtils from 'xe-utils'
 import { getConfig, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { toStringTimeDate, getDateQuarter, parseDateValue, parseDateObj, handleValueFormat, hasDateValueType, hasTimestampValueType } from './util'
 import { createComponentLog } from '../../ui/src/log'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeDatePanelConstructor, DatePanelInternalData, DatePanelReactData, VxeDatePanelPropTypes, VxeDatePanelPrivateComputed, DatePanelMethods, ValueOf, VxeDatePanelEmits, VxeDatePanelDefines } from '../../../types'
 
@@ -1746,45 +1747,66 @@ export default defineVxeComponent({
           ref: refInputTimeBody,
           class: 'vxe-date-panel--time-body'
         }, [
-          h('ul', {
-            class: 'vxe-date-panel--time-hour-list'
-          }, hourList.map((item, index) => {
-            return h('li', {
-              key: index,
-              class: {
-                'is--disabled': item.disabled,
-                'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
-              },
-              onClick: (evnt: MouseEvent) => dateHourEvent(evnt, item)
-            }, item.label)
-          })),
+          h(VxeScrollbarComponent, {
+            autoHide: true,
+            class: 'vxe-date-panel--time-hour-list',
+            viewClassName: 'vxe-date-panel--time-list-view',
+            viewInnerClassName: 'vxe-date-panel--time-list-inner'
+          }, {
+            default: () => {
+              return hourList.map((item, index) => {
+                return h('div', {
+                  key: index,
+                  class: ['vxe-date-panel--time-item', {
+                    'is--disabled': item.disabled,
+                    'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
+                  }],
+                  onClick: (evnt: MouseEvent) => dateHourEvent(evnt, item)
+                }, item.label)
+              })
+            }
+          }),
           hasTimeMinute
-            ? h('ul', {
-              class: 'vxe-date-panel--time-minute-list'
-            }, minuteList.map((item, index) => {
-              return h('li', {
-                key: index,
-                class: {
-                  'is--disabled': item.disabled,
-                  'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
-                },
-                onClick: (evnt: MouseEvent) => dateMinuteEvent(evnt, item)
-              }, item.label)
-            }))
+            ? h(VxeScrollbarComponent, {
+              autoHide: true,
+              class: 'vxe-date-panel--time-minute-list',
+              viewClassName: 'vxe-date-panel--time-list-view',
+              viewInnerClassName: 'vxe-date-panel--time-list-inner'
+            }, {
+              default: () => {
+                return minuteList.map((item, index) => {
+                  return h('div', {
+                    key: index,
+                    class: ['vxe-date-panel--time-item', {
+                      'is--disabled': item.disabled,
+                      'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+                    }],
+                    onClick: (evnt: MouseEvent) => dateMinuteEvent(evnt, item)
+                  }, item.label)
+                })
+              }
+            })
             : renderEmptyElement($xeDatePanel),
           hasTimeMinute && hasTimeSecond
-            ? h('ul', {
-              class: 'vxe-date-panel--time-second-list'
-            }, secondList.map((item, index) => {
-              return h('li', {
-                key: index,
-                class: {
-                  'is--disabled': item.disabled,
-                  'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
-                },
-                onClick: (evnt: MouseEvent) => dateSecondEvent(evnt, item)
-              }, item.label)
-            }))
+            ? h(VxeScrollbarComponent, {
+              autoHide: true,
+              class: 'vxe-date-panel--time-second-list',
+              viewClassName: 'vxe-date-panel--time-list-view',
+              viewInnerClassName: 'vxe-date-panel--time-list-inner'
+            }, {
+              default: () => {
+                return secondList.map((item, index) => {
+                  return h('div', {
+                    key: index,
+                    class: ['vxe-date-panel--time-item', {
+                      'is--disabled': item.disabled,
+                      'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+                    }],
+                    onClick: (evnt: MouseEvent) => dateSecondEvent(evnt, item)
+                  }, item.label)
+                })
+              }
+            })
             : renderEmptyElement($xeDatePanel)
         ])
       ]

package/packages/drawer/src/drawer.ts

@@ -1,7 +1,7 @@
 import { h, Teleport, ref, Ref, inject, reactive, nextTick, provide, watch, PropType, onMounted, onUnmounted, computed, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { useSize, getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, renderEmptyElement } from '../../ui'
+import { useFns, getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, renderEmptyElement } from '../../ui'
 import { getLastZIndex, nextZIndex, getFuncText, getDefaultConfig } from '../../ui/src/utils'
 import { getPopupContainer, getPopupWrapperElement, toCssUnit } from '../../ui/src/dom'
 import { allActiveDrawers } from './store'
@@ -172,7 +172,8 @@ export default defineVxeComponent({
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null)
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const refElem = ref<HTMLDivElement>()
     const refDrawerBox = ref() as Ref<HTMLDivElement>
@@ -564,7 +565,8 @@ export default defineVxeComponent({
     }
 
     const renderBody = () => {
-      const { slots: propSlots = {}, content, useScrollbar, useHtml } = props
+      const { slots: propSlots = {}, content, useHtml } = props
+      const isVScrollbar = computeIsVScrollbar.value
       const scrollbarProps = computeScrollbarProps.value
       const defaultSlot = slots.default || propSlots.default
       const leftSlot = slots.left || propSlots.left
@@ -572,7 +574,7 @@ export default defineVxeComponent({
       const contVNs: VNode[] = []
       if (useHtml && !defaultSlot) {
         contVNs.push(
-          useScrollbar
+          isVScrollbar
             ? h(VxeScrollbarComponent, {
               key: 'shc',
               class: 'vxe-drawer--scrollbar-content',
@@ -595,7 +597,7 @@ export default defineVxeComponent({
         )
       } else {
         contVNs.push(
-          useScrollbar
+          isVScrollbar
             ? h(VxeScrollbarComponent, {
               key: 'sdc',
               class: 'vxe-drawer--scrollbar-content',

package/packages/icon-picker/src/icon-picker.ts

@@ -1,15 +1,19 @@
 import { h, Teleport, PropType, ref, inject, watch, computed, provide, onBeforeUnmount, reactive, nextTick, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, globalEvents, createEvent, renderer, useSize, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui'
+import { VxeUI } from '../../ui'
 import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import VxeInputComponent from '../../input'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeIconPickerPropTypes, VxeIconPickerConstructor, IconPickerInternalData, VxeInputConstructor, ValueOf, IconPickerReactData, VxeIconPickerEmits, IconPickerMethods, IconPickerPrivateRef, VxeIconPickerMethods, VxeIconPickerDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeComponentStyleType } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
+const { getConfig, getIcon, getI18n, baseUtils, globalEvents, createEvent, renderer, useFns, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
+const { getDefVal } = baseUtils
+
 function createReactData (): IconPickerReactData {
   return {
     initialized: false,
@@ -72,7 +76,12 @@ export default defineVxeComponent({
     transfer: {
       type: Boolean as PropType<VxeIconPickerPropTypes.Transfer>,
       default: null
-    }
+    },
+    useScrollbar: {
+      type: Boolean as PropType<VxeIconPickerPropTypes.UseScrollbar>,
+      default: () => getDefVal(getConfig().iconPicker.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeIconPickerPropTypes.ScrollbarConfig>
   },
   emits: [
     'update:modelValue',
@@ -91,7 +100,8 @@ export default defineVxeComponent({
 
     const xID = XEUtils.uniqueId()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
 
@@ -227,6 +237,27 @@ export default defineVxeComponent({
       return selectIcon ? iconList.find(item => item.icon === selectIcon) : null
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().iconPicker.scrollbarConfig, props.scrollbarConfig)
+    })
+
+    const computeScrollbarProps = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-ico-picker--scrollbar-list-wrapper-view' + (viewClassName ? (' ' + viewClassName) : ''),
+        viewInnerClassName: 'vxe-ico-picker--scrollbar-list-wrapper-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+      }
+    })
+
     const updateZindex = () => {
       if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
@@ -533,52 +564,63 @@ export default defineVxeComponent({
     const renderIconWrapper = () => {
       const { showIconTitle } = props
       const { selectIcon, iconList } = reactData
+      const isVScrollbar = computeIsVScrollbar.value
+      const scrollbarProps = computeScrollbarProps.value
 
       if (!iconList.length) {
         return h('div', {
           class: 'vxe-ico-picker--empty-placeholder'
         }, getI18n('vxe.iconPicker.emptyText'))
       }
+      const iconVNs = iconList.map(item => {
+        const { iconRender } = item
+        const compConf = iconRender ? renderer.get(iconRender.name) : null
+        const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
+        return h('div', {
+          class: ['vxe-ico-picker--item', {
+            'is--selected': selectIcon === item.icon
+          }]
+        }, [
+          h('div', {
+            class: 'vxe-ico-picker--item-inner',
+            onClick (evnt) {
+              const isDisabled = computeIsDisabled.value
+              if (!isDisabled) {
+                handleClickIconEvent(evnt, item)
+              }
+            }
+          }, [
+            h('div', {
+              class: 'vxe-ico-picker--item-icon'
+            }, iconMethod && iconRender
+              ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
+              : [
+                  h('i', {
+                    class: item.icon || ''
+                  })
+                ]),
+            showIconTitle
+              ? h('div', {
+                class: 'vxe-ico-picker--item-title'
+              }, `${item.title || ''}`)
+              : renderEmptyElement($xeIconPicker)
+          ])
+        ])
+      })
+      if (isVScrollbar) {
+        return h(VxeScrollbarComponent, {
+          class: 'vxe-ico-picker--scrollbar-list-wrapper',
+          ...scrollbarProps
+        }, {
+          default: () => iconVNs
+        })
+      }
       return h('div', {
         class: 'vxe-ico-picker--list-wrapper'
       }, [
         h('div', {
           class: 'vxe-ico-picker--list'
-        }, iconList.map(item => {
-          const { iconRender } = item
-          const compConf = iconRender ? renderer.get(iconRender.name) : null
-          const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
-          return h('div', {
-            class: ['vxe-ico-picker--item', {
-              'is--selected': selectIcon === item.icon
-            }]
-          }, [
-            h('div', {
-              class: 'vxe-ico-picker--item-inner',
-              onClick (evnt) {
-                const isDisabled = computeIsDisabled.value
-                if (!isDisabled) {
-                  handleClickIconEvent(evnt, item)
-                }
-              }
-            }, [
-              h('div', {
-                class: 'vxe-ico-picker--item-icon'
-              }, iconMethod && iconRender
-                ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
-                : [
-                    h('i', {
-                      class: item.icon || ''
-                    })
-                  ]),
-              showIconTitle
-                ? h('div', {
-                  class: 'vxe-ico-picker--item-title'
-                }, `${item.title || ''}`)
-                : renderEmptyElement($xeIconPicker)
-            ])
-          ])
-        }))
+        }, iconVNs)
       ])
     }
 

package/packages/layout-aside/src/layout-aside.ts

@@ -1,7 +1,7 @@
 import { ref, h, reactive, computed, provide, PropType } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { toCssUnit } from '../../ui/src/dom'
-import { getConfig, useSize, createEvent } from '../../ui'
+import { getConfig, useFns, createEvent } from '../../ui'
 import { getDefaultConfig } from '../../ui/src/utils'
 import XEUtils from 'xe-utils'
 import VxeLoadingComponent from '../../loading'
@@ -36,7 +36,8 @@ export default defineVxeComponent({
 
     const refElem = ref<HTMLDivElement>()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive<LayoutAsideReactData>({})
 
@@ -93,9 +94,10 @@ export default defineVxeComponent({
     Object.assign($xeLayoutAside, layoutAsideMethods, layoutAsidePrivateMethods)
 
     const renderVN = () => {
-      const { collapsed, loading, padding, useScrollbar } = props
+      const { collapsed, loading, padding } = props
       const varStyle = computeVarStyle.value
       const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
       const collapseOpts = computeCollapseOpts.value
       const scrollbarOpts = computeScrollbarOpts.value
       const { className, viewClassName, viewInnerClassName } = scrollbarOpts
@@ -112,7 +114,7 @@ export default defineVxeComponent({
         }],
         style: varStyle
       }, [
-        useScrollbar
+        isVScrollbar
           ? h(VxeScrollbarComponent, {
             width: scrollbarOpts.width,
             height: scrollbarOpts.height,

package/packages/layout-body/src/layout-body.ts

@@ -1,6 +1,6 @@
 import { ref, h, reactive, PropType, computed } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { getConfig, useSize, createEvent, renderEmptyElement } from '../../ui'
+import { getConfig, useFns, createEvent, renderEmptyElement } from '../../ui'
 import XEUtils from 'xe-utils'
 import { getDefaultConfig } from '../../ui/src/utils'
 import VxeLoadingComponent from '../../loading'
@@ -46,7 +46,8 @@ export default defineVxeComponent({
 
     const refElem = ref<HTMLDivElement>()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const internalData = createInternalData()
     const reactData = reactive(createReactData())
@@ -115,7 +116,8 @@ export default defineVxeComponent({
     Object.assign($xeLayoutBody, layoutBodyMethods, layoutBodyPrivateMethods)
 
     const renderVN = () => {
-      const { loading, padding, showBacktop, useScrollbar } = props
+      const { loading, padding, showBacktop } = props
+      const isVScrollbar = computeIsVScrollbar.value
       const backtopOpts = computeBacktopOpts.value
       const scrollbarProps = computeScrollbarProps.value
       const vSize = computeSize.value
@@ -145,7 +147,7 @@ export default defineVxeComponent({
           'is--padding': padding
         }]
       }, [
-        useScrollbar
+        isVScrollbar
           ? h(VxeScrollbarComponent, scrollbarProps, {
             default: () => defaultSlot ? defaultSlot({}) : []
           })

package/packages/layout-container/src/layout-container.ts

@@ -1,14 +1,22 @@
 import { ref, h, reactive, PropType } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { getConfig, useSize, createEvent } from '../../ui'
+import { VxeUI, useFns } from '../../ui'
 import XEUtils from 'xe-utils'
 
 import type { VxeLayoutContainerPropTypes, LayoutContainerReactData, LayoutContainerPrivateMethods, VxeLayoutContainerEmits, LayoutContainerMethods, LayoutContainerPrivateRef, VxeLayoutContainerPrivateComputed, VxeLayoutContainerConstructor, VxeLayoutContainerPrivateMethods, ValueOf } from '../../../types'
 
+const { getConfig, baseUtils, createEvent } = VxeUI
+
+const { getDefVal } = baseUtils
+
 export default defineVxeComponent({
   name: 'VxeLayoutContainer',
   props: {
     vertical: Boolean as PropType<VxeLayoutContainerPropTypes.Vertical>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeLayoutContainerPropTypes.UseScrollbar>,
+      default: () => getDefVal(getConfig().layoutContainer.useScrollbar, getConfig().useScrollbar)
+    },
     size: {
       type: String as PropType<VxeLayoutContainerPropTypes.Size>,
       default: () => getConfig().layoutContainer.size || getConfig().size
@@ -22,7 +30,8 @@ export default defineVxeComponent({
 
     const refElem = ref<HTMLDivElement>()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive<LayoutContainerReactData>({
     })
@@ -32,7 +41,8 @@ export default defineVxeComponent({
     }
 
     const computeMaps: VxeLayoutContainerPrivateComputed = {
-      computeSize
+      computeSize,
+      computeIsVScrollbar
     }
 
     const $xeLayoutContainer = {