vxe-pc-ui 4.20.5 → 4.20.7

package/lib/ui/src/log.js

@@ -9,7 +9,7 @@ var _core = require("@vxe-ui/core");
 const {
   log
 } = _core.VxeUI;
-const uiVersion = `ui v${"4.20.5"}`;
+const uiVersion = `ui v${"4.20.7"}`;
 function createComponentLog(name) {
   const tableVersion = _core.VxeUI.tableVersion ? `table v${_core.VxeUI.tableVersion}` : '';
   const ganttVersion = _core.VxeUI.ganttVersion ? `gantt v${_core.VxeUI.ganttVersion}` : '';

package/lib/ui/src/log.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.createComponentLog=createComponentLog,exports.warnLog=exports.errLog=void 0;var _core=require("@vxe-ui/core");let log=_core.VxeUI.log,uiVersion="ui v4.20.5";function createComponentLog(e){var r=_core.VxeUI.tableVersion?"table v"+_core.VxeUI.tableVersion:"",o=_core.VxeUI.ganttVersion?"gantt v"+_core.VxeUI.ganttVersion:"",n=_core.VxeUI.designVersion?"design v"+_core.VxeUI.designVersion:"",r=[uiVersion,r,o,n].filter(e=>e).join(" ");return{warnLog:log.create("warn",r+"] ["+e),errLog:log.create("error",r+"] ["+e)}}let warnLog=exports.warnLog=log.create("warn",uiVersion),errLog=exports.errLog=log.create("error",uiVersion);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.createComponentLog=createComponentLog,exports.warnLog=exports.errLog=void 0;var _core=require("@vxe-ui/core");let log=_core.VxeUI.log,uiVersion="ui v4.20.7";function createComponentLog(e){var r=_core.VxeUI.tableVersion?"table v"+_core.VxeUI.tableVersion:"",o=_core.VxeUI.ganttVersion?"gantt v"+_core.VxeUI.ganttVersion:"",n=_core.VxeUI.designVersion?"design v"+_core.VxeUI.designVersion:"",r=[uiVersion,r,o,n].filter(e=>e).join(" ");return{warnLog:log.create("warn",r+"] ["+e),errLog:log.create("error",r+"] ["+e)}}let warnLog=exports.warnLog=log.create("warn",uiVersion),errLog=exports.errLog=log.create("error",uiVersion);

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

@@ -141,4 +141,15 @@
 .vxe-scrollbar--thumb-x:active,
 .vxe-scrollbar--thumb-y:active {
   background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
+}
+
+.vxe-scrollbar.theme--light {
+  --vxe-ui-scrollbar-thumb-background-color: rgba(0,0,0,0.4);
+  --vxe-ui-scrollbar-thumb-hover-background-color: rgba(0,0,0,0.5);
+  --vxe-ui-scrollbar-thumb-active-background-color: rgba(0,0,0,0.6);
+}
+.vxe-scrollbar.theme--dark {
+  --vxe-ui-scrollbar-thumb-background-color: rgba(255,255,255,0.4);
+  --vxe-ui-scrollbar-thumb-hover-background-color: rgba(255,255,255,0.5);
+  --vxe-ui-scrollbar-thumb-active-background-color: rgba(255,255,255,0.6);
 }

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

@@ -1 +1 @@
-.vxe-scrollbar{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);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar.overflow-x>.vxe-scrollbar--track-x{display:block}.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-y{display:block}.vxe-scrollbar--track-x{width:100%;left:0;height:var(--vxe-ui-scrollbar-x-height);padding:var(--vxe-ui-scrollbar-track-padding) 0}.vxe-scrollbar--track-y{height:100%;top:0;width:var(--vxe-ui-scrollbar-y-width);padding:0 var(--vxe-ui-scrollbar-track-padding)}.vxe-scrollbar.sx-pos--top>.vxe-scrollbar--track-x{top:0}.vxe-scrollbar.sx-pos--bottom>.vxe-scrollbar--track-x{bottom:0}.vxe-scrollbar.sy-pos--left>.vxe-scrollbar--track-y{left:0}.vxe-scrollbar.sy-pos--right>.vxe-scrollbar--track-y{right:0}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-x{width:calc(100% - var(--vxe-ui-scrollbar-x-height))}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-y{height:calc(100% - var(--vxe-ui-scrollbar-y-width))}.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--left>.vxe-scrollbar--track-y,.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--right>.vxe-scrollbar--track-y{top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--bottom>.vxe-scrollbar--track-x,.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--top>.vxe-scrollbar--track-x{left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--right{padding-right: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-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)}
+.vxe-scrollbar{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);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-scrollbar.overflow-x>.vxe-scrollbar--track-x{display:block}.vxe-scrollbar.overflow-y>.vxe-scrollbar--track-y{display:block}.vxe-scrollbar--track-x{width:100%;left:0;height:var(--vxe-ui-scrollbar-x-height);padding:var(--vxe-ui-scrollbar-track-padding) 0}.vxe-scrollbar--track-y{height:100%;top:0;width:var(--vxe-ui-scrollbar-y-width);padding:0 var(--vxe-ui-scrollbar-track-padding)}.vxe-scrollbar.sx-pos--top>.vxe-scrollbar--track-x{top:0}.vxe-scrollbar.sx-pos--bottom>.vxe-scrollbar--track-x{bottom:0}.vxe-scrollbar.sy-pos--left>.vxe-scrollbar--track-y{left:0}.vxe-scrollbar.sy-pos--right>.vxe-scrollbar--track-y{right:0}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-x{width:calc(100% - var(--vxe-ui-scrollbar-x-height))}.vxe-scrollbar.overflow-x.overflow-y>.vxe-scrollbar--track-y{height:calc(100% - var(--vxe-ui-scrollbar-y-width))}.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--left>.vxe-scrollbar--track-y,.vxe-scrollbar.overflow-x.overflow-y.sx-pos--top.sy-pos--right>.vxe-scrollbar--track-y{top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--bottom>.vxe-scrollbar--track-x,.vxe-scrollbar.overflow-x.overflow-y.sy-pos--left.sx-pos--top>.vxe-scrollbar--track-x{left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-scrollbar.is--padding.overflow-y.sy-pos--right{padding-right: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-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)}.vxe-scrollbar.theme--light{--vxe-ui-scrollbar-thumb-background-color:rgba(0,0,0,0.4);--vxe-ui-scrollbar-thumb-hover-background-color:rgba(0,0,0,0.5);--vxe-ui-scrollbar-thumb-active-background-color:rgba(0,0,0,0.6)}.vxe-scrollbar.theme--dark{--vxe-ui-scrollbar-thumb-background-color:rgba(255,255,255,0.4);--vxe-ui-scrollbar-thumb-hover-background-color:rgba(255,255,255,0.5);--vxe-ui-scrollbar-thumb-active-background-color:rgba(255,255,255,0.6)}

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

@@ -25,7 +25,8 @@
 .vxe-tooltip--wrapper.is--enterable .vxe-tooltip--body {
   pointer-events: all;
 }
-.vxe-tooltip--wrapper .vxe-tooltip--content {
+.vxe-tooltip--wrapper .vxe-tooltip--content,
+.vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view {
   padding: 8px 12px;
   max-width: 600px;
   max-height: 800px;

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{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;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.5",
+  "version": "4.20.7",
   "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.31"
+    "@vxe-ui/core": "^4.4.33"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",

package/packages/button/src/button.ts

@@ -311,7 +311,8 @@ const VxeButtonComponent = defineVxeComponent({
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
-          defaultPlacement: (popupOpts as any).defaultPlacement,
+          defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

package/packages/cascader/src/cascader.ts

@@ -816,6 +816,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer,
           isMinWidth: false
         })

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

@@ -333,6 +333,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

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

@@ -1244,6 +1244,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

package/packages/date-range-picker/src/date-range-picker.ts

@@ -1045,6 +1045,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

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

@@ -245,6 +245,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

package/packages/pulldown/src/pulldown.ts

@@ -155,6 +155,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

package/packages/scrollbar/src/scrollbar.ts

@@ -36,6 +36,10 @@ export default defineVxeComponent({
   props: {
     id: [String, Number] as PropType<VxeScrollbarPropTypes.Id>,
     viewId: [String, Number] as PropType<VxeScrollbarPropTypes.ViewId>,
+    theme: {
+      type: String as PropType<VxeScrollbarPropTypes.Theme>,
+      default: () => getConfig().scrollbar.theme
+    },
     width: [String, Number] as PropType<VxeScrollbarPropTypes.Width>,
     height: [String, Number] as PropType<VxeScrollbarPropTypes.Height>,
     minWidth: [String, Number] as PropType<VxeScrollbarPropTypes.MinWidth>,
@@ -69,6 +73,10 @@ export default defineVxeComponent({
       type: Object as PropType<VxeScrollbarPropTypes.ViewAttrs>,
       default: () => getConfig().scrollbar.viewAttrs
     },
+    viewStyle: {
+      type: Object as PropType<VxeScrollbarPropTypes.ViewStyle>,
+      default: () => getConfig().scrollbar.viewStyle
+    },
     viewClassName: {
       type: String as PropType<VxeScrollbarPropTypes.ViewClassName>,
       default: () => getConfig().scrollbar.viewClassName
@@ -169,7 +177,7 @@ export default defineVxeComponent({
     })
 
     const computeWrapperClss = computed(() => {
-      const { native, className, padding } = props
+      const { native, theme, className, padding } = props
       const { yThumbHeight, xThumbWidth } = reactData
       const xToTop = computeXToTop.value
       const yToLeft = computeYToLeft.value
@@ -179,6 +187,7 @@ export default defineVxeComponent({
       const yAutoHide = computeYAutoHide.value
       return domUtils.buildClass([
         'vxe-scrollbar',
+        theme ? `theme--${theme}` : '',
         `ov-x--${xVisible === false ? 'hidden' : 'visible'}`,
         `ov-y--${yVisible === false ? 'hidden' : 'visible'}`,
         `sx-pos--${xToTop ? 'top' : 'bottom'}`,
@@ -252,6 +261,14 @@ export default defineVxeComponent({
 
     const scrollbarMethods: ScrollbarMethods = {
       dispatchEvent,
+      getViewElem () {
+        const viewEl = refViewElem.value
+        return viewEl || null
+      },
+      getViewInnerElem () {
+        const viewInnerEl = refViewInnerElem.value
+        return viewInnerEl || null
+      },
       scrollTo (left: ScrollToOptions | number, top?: number) {
         const viewEl = refViewElem.value
         if (viewEl) {
@@ -557,7 +574,7 @@ export default defineVxeComponent({
     Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods)
 
     const renderVN = () => {
-      const { id, native, loading, viewId, viewAttrs } = props
+      const { id, native, loading, viewId, viewAttrs, viewStyle } = props
       const wrapperStyle = computeWrapperStyle.value
       const wrapperClss = computeWrapperClss.value
       const viewClss = computeViewClss.value
@@ -576,6 +593,7 @@ export default defineVxeComponent({
           class: viewClss,
           onScroll: scrollEvent,
           id: viewId || null,
+          style: viewStyle,
           ...viewAttrs
         }, [
           h('div', {

package/packages/select/src/select.ts

@@ -613,6 +613,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

package/packages/table-select/src/table-select.ts

@@ -444,6 +444,7 @@ export default defineVxeComponent({
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

package/packages/tabs/src/tabs.ts

@@ -1,9 +1,9 @@
 import { ref, h, reactive, inject, PropType, provide, computed, onUnmounted, watch, nextTick, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { createEvent, getConfig, getIcon, globalEvents, permission, useSize, renderEmptyElement } from '../../ui'
+import { VxeUI, useSize } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
-import { getDefaultConfig, isEnableConf } from '../../ui/src/utils'
+import { isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
 import VxeLoadingComponent from '../../loading'
@@ -11,6 +11,9 @@ import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods, VxeComponentStyleType } from '../../../types'
 
+const { baseUtils, createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } = VxeUI
+const { getDefVal } = baseUtils
+
 const { warnLog, errLog } = createComponentLog('tabs')
 
 const scrollbarOffsetSize = 20
@@ -55,7 +58,7 @@ export default defineVxeComponent({
     },
     useScrollbar: {
       type: Boolean as PropType<VxeTabsPropTypes.UseScrollbar>,
-      default: () => getDefaultConfig(getConfig().tabs.useScrollbar, getConfig().useScrollbar)
+      default: () => getDefVal(getConfig().tabs.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeTabsPropTypes.ScrollbarConfig>,
     // 已废弃

package/packages/tooltip/src/tooltip.ts

@@ -1,12 +1,16 @@
 import { h, ref, nextTick, onBeforeUnmount, onMounted, computed, reactive, watch, PropType, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent, useSize, globalEvents } from '../../ui'
+import { VxeUI, useSize } from '../../ui'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { getPopupAppendElement, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
+import VxeScrollbarComponent from '../../scrollbar'
 
-import type { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipInternalData, TooltipPrivateMethods, TooltipReactData, TooltipMethods, TooltipPrivateRef, VxeComponentStyleType, ValueOf } from '../../../types'
+import type { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipInternalData, TooltipPrivateMethods, TooltipReactData, TooltipMethods, TooltipPrivateRef, VxeComponentStyleType, ValueOf, VxeScrollbarInstance } from '../../../types'
+
+const { baseUtils, getConfig, createEvent, globalEvents } = VxeUI
+const { getDefVal } = baseUtils
 
 function createReactData (): TooltipReactData {
   return {
@@ -28,6 +32,7 @@ function createReactData (): TooltipReactData {
 
 function createInternalData (): TooltipInternalData {
   return {
+    // scrollbarViewEl: undefined,
     // showDelayTip: undefined
   }
 }
@@ -115,7 +120,12 @@ export default defineVxeComponent({
     appendTo: {
       type: [String, Function] as PropType<VxeTooltipPropTypes.AppendTo>,
       default: () => getConfig().tooltip.appendTo
-    }
+    },
+    useScrollbar: {
+      type: Boolean as PropType<VxeTooltipPropTypes.UseScrollbar>,
+      default: () => getDefVal(getConfig().tooltip.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeTooltipPropTypes.ScrollbarConfig>
   },
   emits: [
     'update:modelValue',
@@ -134,7 +144,8 @@ export default defineVxeComponent({
     const internalData = createInternalData()
 
     const refElem = ref<HTMLDivElement>()
-    const contentWrapperfElem = ref<HTMLDivElement>()
+    const contentScrollbar = ref<VxeScrollbarInstance>()
+    const contentWrapperElem = ref<HTMLDivElement>()
 
     const computeWrapperStyle = computed(() => {
       const { width, height, minHeight, minWidth, maxHeight, maxWidth } = props
@@ -251,7 +262,9 @@ export default defineVxeComponent({
       tipStore.placement = 'top'
       tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex }
       tipStore.arrowStyle = { left: '50%' }
-      return $xeTooltip.updatePlacement()
+      return $xeTooltip.updatePlacement().then(() => {
+        return $xeTooltip.updatePlacement()
+      })
     }
 
     const handleDelayFn = () => {
@@ -314,7 +327,7 @@ export default defineVxeComponent({
     }
 
     const updateTipStyle = () => {
-      const { placement, defaultPlacement, isArrow } = props
+      const { placement, defaultPlacement, appendTo, isArrow } = props
       const { tipTarget: targetElem, tipStore, tipPos, tipZindex } = reactData
       const panelElem = refElem.value
       if (!targetElem || !panelElem) {
@@ -348,6 +361,7 @@ export default defineVxeComponent({
         defaultLeft: left,
         placement: placement,
         defaultPlacement: defaultPlacement,
+        appendTo: appendTo,
         isMinWidth: false,
         teleportTo: true
       })
@@ -416,7 +430,7 @@ export default defineVxeComponent({
     Object.assign($xeTooltip, tooltipMethods, tooltipPrivateMethods)
 
     const renderContent = () => {
-      const { useHtml, useHTML } = props
+      const { useScrollbar, theme, useHtml, useHTML } = props
       const { tipContent } = reactData
       const wrapperStyle = computeWrapperStyle.value
       const contentSlot = slots.content
@@ -439,9 +453,22 @@ export default defineVxeComponent({
           key: 'cd'
         }, `${tipContent}`))
       }
+      if (useScrollbar) {
+        return h(VxeScrollbarComponent, {
+          key: 5,
+          ref: contentScrollbar,
+          class: 'vxe-tooltip--scrollbar-content',
+          theme,
+          viewClassName: 'vxe-tooltip--scrollbar-content-view',
+          viewInnerClassName: 'vxe-tooltip--scrollbar-content-inner',
+          viewStyle: wrapperStyle
+        }, {
+          default: () => contVNs
+        })
+      }
       return h('div', {
         key: 3,
-        ref: contentWrapperfElem,
+        ref: contentWrapperElem,
         class: 'vxe-tooltip--content',
         style: wrapperStyle
       }, contVNs)
@@ -508,7 +535,15 @@ export default defineVxeComponent({
     handleDelayFn()
 
     onMounted(() => {
-      const contentWrapperfEl = contentWrapperfElem.value
+      const $scrollbar = contentScrollbar.value
+      if ($scrollbar) {
+        const viewEl = $scrollbar.getViewElem()
+        if (viewEl) {
+          viewEl.addEventListener('wheel', wheelEvent, { passive: false })
+          internalData.scrollbarViewEl = viewEl
+        }
+      }
+      const contentWrapperfEl = contentWrapperElem.value
       if (contentWrapperfEl) {
         contentWrapperfEl.addEventListener('wheel', wheelEvent, { passive: false })
       }
@@ -550,16 +585,20 @@ export default defineVxeComponent({
 
     onBeforeUnmount(() => {
       const { target } = reactData
+      const { scrollbarViewEl } = internalData
       const panelElem = refElem.value
       if (target) {
         target.onmouseenter = null
         target.onmouseleave = null
         target.onclick = null
       }
-      const contentWrapperfEl = contentWrapperfElem.value
+      const contentWrapperfEl = contentWrapperElem.value
       if (contentWrapperfEl) {
         contentWrapperfEl.removeEventListener('wheel', wheelEvent)
       }
+      if (scrollbarViewEl) {
+        scrollbarViewEl.removeEventListener('wheel', wheelEvent)
+      }
       if (panelElem) {
         const parentNode = panelElem.parentNode
         if (parentNode) {

package/packages/tree-select/src/tree-select.ts

@@ -499,6 +499,7 @@ export default defineVxeComponent({
           isMinWidth: !popupOpts.width,
           placement: popupOpts.placement || placement,
           defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {

package/packages/ui/src/dom.ts

@@ -179,6 +179,7 @@ interface PanelPlacementOptions {
   defaultLeft?: number
   placement?: '' | 'top' | 'bottom' | null
   defaultPlacement?: '' | 'top' | 'bottom' | null
+  appendTo?: string | HTMLElement | ((params: any) => string | HTMLElement)
   teleportTo?: boolean
   marginSize?: number
   isMinWidth?: boolean
@@ -188,7 +189,8 @@ interface PanelPlacementOptions {
  * 通用定位计算
  */
 export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
-  const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+  const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+    appendTo: '',
     teleportTo: false,
     marginSize: 18,
     isMinWidth: true
@@ -202,7 +204,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
   const stys: Record<string, string> = {}
   if (panelElem && targetElem) {
     const bodyEl = document.body
-    const parentWrapperEl = getPopupWrapperElement(panelElem)
+    const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem)
     if (parentWrapperEl) {
       const targetWidth = targetElem.offsetWidth
       const targetHeight = targetElem.offsetHeight
@@ -215,16 +217,18 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
       const visibleHeight = bodyEl.clientHeight
       const visibleWidth = bodyEl.clientWidth
 
-      const offsetLeft = parentWrapperRect.left
-      const offsetTop = parentWrapperRect.top
+      const parentWrapperScrollLeft = parentWrapperEl.scrollLeft
+      const parentWrapperScrollTop = parentWrapperEl.scrollTop
+      const parentWrapperOffsetLeft = parentWrapperRect.left
+      const parentWrapperOffsetTop = parentWrapperRect.top
       const targetLeft = targetRect.left
       const targetTop = targetRect.top
 
       minWidth = targetElem.offsetWidth
 
       if (teleportTo) {
-        left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)
-        top = defaultTop || (targetTop + targetHeight)
+        left = (defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)) - parentWrapperScrollLeft
+        top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop
         if (placement === 'top') {
           panelPlacement = 'top'
           top = targetTop - panelHeight
@@ -267,8 +271,8 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
         }
 
         // 偏移
-        top -= offsetTop
-        left -= offsetLeft
+        top -= parentWrapperOffsetTop
+        left -= parentWrapperOffsetLeft
       } else {
         if (placement === 'top') {
           panelPlacement = 'top'

package/styles/components/scrollbar.scss

@@ -191,4 +191,18 @@
   &:active {
     background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
   }
-}
+}
+
+// 滚动条主题色
+.vxe-scrollbar {
+  &.theme--light {
+    --vxe-ui-scrollbar-thumb-background-color: rgba(0,0,0,0.4);
+    --vxe-ui-scrollbar-thumb-hover-background-color: rgba(0,0,0,0.5);
+    --vxe-ui-scrollbar-thumb-active-background-color: rgba(0,0,0,0.6);
+  }
+  &.theme--dark {
+    --vxe-ui-scrollbar-thumb-background-color: rgba(255,255,255,0.4);
+    --vxe-ui-scrollbar-thumb-hover-background-color: rgba(255,255,255,0.5);
+    --vxe-ui-scrollbar-thumb-active-background-color: rgba(255,255,255,0.6);
+  }
+}

package/styles/components/tooltip.scss

@@ -28,7 +28,8 @@
       pointer-events: all;
     }
   }
-  .vxe-tooltip--content {
+  .vxe-tooltip--content,
+  .vxe-tooltip--scrollbar-content-view {
     padding: 8px 12px;
     max-width: 600px;
     max-height: 800px;

package/types/components/button.d.ts

@@ -94,6 +94,10 @@ export namespace VxeButtonPropTypes {
 
   export type DestroyOnClose = boolean
   export interface PopupConfig {
+    /**
+     * 默认弹出面板方向
+     */
+    defaultPlacement?: 'top' | 'bottom' | '' | null
     /**
      * 设置弹出面板方向
      */

package/types/components/cascader.d.ts

@@ -150,6 +150,10 @@ export namespace VxeCascaderPropTypes {
      */
     defaultPlacement?: 'top' | 'bottom' | '' | null
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | ((params: {}) => string | HTMLElement)
     height?: number | string
     nodeWidth?: number | string
     nodeHeight?: number | string

package/types/components/scrollbar.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentStyleType } from '@vxe-ui/core'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -26,6 +26,7 @@ export interface VxeScrollbarPrivateRef extends ScrollbarPrivateRef { }
 export namespace VxeScrollbarPropTypes {
   export type Id = number | string
   export type ViewId = number | string
+  export type Theme = '' | 'light' | 'dark'
   export type Width = number | string
   export type Height = number | string
   export type MinWidth = number | string
@@ -73,6 +74,7 @@ export namespace VxeScrollbarPropTypes {
   }
   export type ClassName = string
   export type ViewAttrs = Record<string, any>
+  export type ViewStyle = VxeComponentStyleType
   export type ViewClassName = string
   export type ViewInnerClassName = string
   export type AutoResize = boolean
@@ -88,6 +90,10 @@ export interface VxeScrollbarProps {
    * View ID
    */
   viewId?: VxeScrollbarPropTypes.ViewId
+  /**
+   * 主题色
+   */
+  theme?: VxeScrollbarPropTypes.Theme
   /**
    * 容器宽度
    */
@@ -148,6 +154,10 @@ export interface VxeScrollbarProps {
    * 给视图元素附加属性
    */
   viewAttrs?: VxeScrollbarPropTypes.ViewAttrs
+  /**
+   * 给视图元素附加样式
+   */
+  viewStyle?: VxeScrollbarPropTypes.ViewStyle
   /**
    * 给视图元素附加 class
    */
@@ -215,6 +225,14 @@ export interface ScrollbarMethods {
    * 滚动元素到可见位置
    */
   scrollIntoView(): void
+  /**
+   * 获取滚动视图元素
+   */
+  getViewElem(): HTMLElement | null
+  /**
+   * 获取滚动视图内容包裹元素
+   */
+  getViewInnerElem(): HTMLElement | null
   /**
    * 重新计算样式
    * 对于某些特殊场景可能会用到，比如更新内容

package/types/components/table.d.ts

@@ -1598,6 +1598,7 @@ export namespace VxeTablePropTypes {
      */
     defaultPlacement?: VxeTooltipPropTypes.DefaultPlacement
     popupClassName?: VxeTooltipPropTypes.PopupClassName
+    useScrollbar?: VxeTooltipPropTypes.UseScrollbar
     /**
      * 该方法可以通过返回值来重写默认的提示内容，可以返回 null 使用默认的提示内容，可以返回空内容去掉指定单元格的提示内容
      */