vxe-pc-ui 3.20.5 → 3.20.7

package/lib/ui/src/dom.js

@@ -204,6 +204,7 @@ function isNodeElement(elem) {
  */
 function updatePanelPlacement(targetElem, panelElem, options) {
   var _Object$assign = Object.assign({
+      appendTo: '',
       teleportTo: false,
       marginSize: 18,
       isMinWidth: true
@@ -212,6 +213,7 @@ function updatePanelPlacement(targetElem, panelElem, options) {
     defaultLeft = _Object$assign.defaultLeft,
     placement = _Object$assign.placement,
     defaultPlacement = _Object$assign.defaultPlacement,
+    appendTo = _Object$assign.appendTo,
     teleportTo = _Object$assign.teleportTo,
     marginSize = _Object$assign.marginSize,
     isMinWidth = _Object$assign.isMinWidth;
@@ -224,7 +226,7 @@ function updatePanelPlacement(targetElem, panelElem, options) {
   var stys = {};
   if (panelElem && targetElem) {
     var bodyEl = document.body;
-    var parentWrapperEl = getPopupWrapperElement(panelElem);
+    var parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem);
     if (parentWrapperEl) {
       var targetWidth = targetElem.offsetWidth;
       var targetHeight = targetElem.offsetHeight;
@@ -235,14 +237,16 @@ function updatePanelPlacement(targetElem, panelElem, options) {
       var targetRect = targetElem.getBoundingClientRect();
       var visibleHeight = bodyEl.clientHeight;
       var visibleWidth = bodyEl.clientWidth;
-      var offsetLeft = parentWrapperRect.left;
-      var offsetTop = parentWrapperRect.top;
+      var parentWrapperScrollLeft = parentWrapperEl.scrollLeft;
+      var parentWrapperScrollTop = parentWrapperEl.scrollTop;
+      var parentWrapperOffsetLeft = parentWrapperRect.left;
+      var parentWrapperOffsetTop = parentWrapperRect.top;
       var targetLeft = targetRect.left;
       var 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;
@@ -284,8 +288,8 @@ function updatePanelPlacement(targetElem, panelElem, options) {
           left = marginSize;
         }
         // 偏移
-        top -= offsetTop;
-        left -= offsetLeft;
+        top -= parentWrapperOffsetTop;
+        left -= parentWrapperOffsetLeft;
       } else {
         if (placement === 'top') {
           panelPlacement = 'top';

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

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.addClass=addClass,exports.getAbsolutePos=getAbsolutePos,exports.getDomNode=getDomNode,exports.getEventTargetNode=getEventTargetNode,exports.getOffsetPos=getOffsetPos,exports.getPaddingLeftRightSize=getPaddingLeftRightSize,exports.getPaddingTopBottomSize=getPaddingTopBottomSize,exports.getPopupAppendElement=getPopupAppendElement,exports.getPopupContainer=getPopupContainer,exports.getPopupWrapperElement=getPopupWrapperElement,exports.getPropClass=getPropClass,exports.getTpImg=getTpImg,exports.hasClass=hasClass,exports.hasControlKey=hasControlKey,exports.initTpImg=initTpImg,exports.isNodeElement=isNodeElement,exports.isPx=isPx,exports.isScale=isScale,exports.removeClass=removeClass,exports.scrollToView=scrollToView,exports.toCssUnit=toCssUnit,exports.triggerEvent=triggerEvent,exports.updatePanelPlacement=updatePanelPlacement;var tpImgEl,_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function initTpImg(){return tpImgEl||((tpImgEl=new Image).src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="),tpImgEl}function getTpImg(){return tpImgEl||initTpImg()}function getPropClass(e,t){return e&&(_xeUtils.default.isFunction(e)?e(t):e)||""}var reClsMap={};function getClsRE(e){return reClsMap[e]||(reClsMap[e]=new RegExp("(?:^|\\s)".concat(e,"(?!\\S)"),"g")),reClsMap[e]}function getNodeOffset(e,t,o){if(e){var n=e.parentNode;if(o.top+=e.offsetTop,o.left+=e.offsetLeft,n&&n!==document.documentElement&&n!==document.body&&(o.top-=n.scrollTop,o.left-=n.scrollLeft),(!t||e!==t&&e.offsetParent!==t)&&e.offsetParent)return getNodeOffset(e.offsetParent,t,o)}return o}function isPx(e){return e&&/^\d+(\.\d+)?(px)?$/.test(e)}function isScale(e){return e&&/^\d+(\.\d+)?%$/.test(e)}function hasClass(e,t){return!!e&&(e.classList?e.classList.contains(t):!!(e.className&&e.className.match&&e.className.match(getClsRE(t))))}function removeClass(e,t){e&&hasClass(e,t)&&(e.className=e.className.replace(getClsRE(t),""))}function addClass(e,t){e&&!hasClass(e,t)&&(removeClass(e,t),e.className="".concat(e.className," ").concat(t))}function hasControlKey(e){return e.ctrlKey||e.metaKey}function toCssUnit(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"px";return _xeUtils.default.isNumber(e)||/^\d+$/.test("".concat(e))?"".concat(e).concat(t):"".concat(e||"")}function getDomNode(){var e=document.documentElement,t=document.body;return{scrollTop:e.scrollTop||t.scrollTop,scrollLeft:e.scrollLeft||t.scrollLeft,visibleHeight:e.clientHeight||t.clientHeight,visibleWidth:e.clientWidth||t.clientWidth}}function getEventTargetNode(e,t,o,n){for(var s,i=e.target.shadowRoot&&e.composed&&e.composedPath()[0]||e.target;i&&i.nodeType&&i!==document;){if(o&&hasClass(i,o)&&(!n||n(i)))s=i;else if(i===t)return{flag:!o||!!s,container:t,targetElem:s};i=i.parentNode}return{flag:!1}}function getOffsetPos(e,t){return getNodeOffset(e,t,{left:0,top:0})}function getAbsolutePos(e){var e=e.getBoundingClientRect(),t=e.top,e=e.left,o=getDomNode();return{boundingTop:t,top:o.scrollTop+t,boundingLeft:e,left:o.scrollLeft+e,visibleHeight:o.visibleHeight,visibleWidth:o.visibleWidth}}function getPaddingTopBottomSize(e){return e?(e=getComputedStyle(e),_xeUtils.default.toNumber(e.paddingTop)+_xeUtils.default.toNumber(e.paddingBottom)):0}function getPaddingLeftRightSize(e){return e?(e=getComputedStyle(e),_xeUtils.default.toNumber(e.paddingLeft)+_xeUtils.default.toNumber(e.paddingRight)):0}var scrollIntoViewIfNeeded="scrollIntoViewIfNeeded",scrollIntoView="scrollIntoView";function scrollToView(e){e&&(e[scrollIntoViewIfNeeded]?e[scrollIntoViewIfNeeded]():e[scrollIntoView]&&e[scrollIntoView]())}function triggerEvent(e,t){e&&e.dispatchEvent(new Event(t))}function isNodeElement(e){return e&&1===e.nodeType}function updatePanelPlacement(e,t,o){var n,s,i,l,r,a,p,d,u,c,o=Object.assign({teleportTo:!1,marginSize:18,isMinWidth:!0},o),g=o.defaultTop,f=o.defaultLeft,m=o.placement,C=o.defaultPlacement,x=o.teleportTo,h=o.marginSize,o=o.isMinWidth,P="bottom",A="",N="",E=0,b="",v="",T={};return t&&e&&(a=document.body,d=getPopupWrapperElement(t))&&(n=e.offsetWidth,s=e.offsetHeight,i=t.offsetWidth,l=t.offsetHeight,d=d.getBoundingClientRect(),t=t.getBoundingClientRect(),c=e.getBoundingClientRect(),r=a.clientHeight,a=a.clientWidth,p=d.left,d=d.top,u=c.left,c=c.top,b=e.offsetWidth,x?(A=g||c+s,"top"===m?(P="top",A=c-l):m||("top"===C?(P="top",(A=g?A:c-l)<h&&(P="bottom",A=c+s),r<A+l+h&&(P="top",A=c-l)):(r<A+l+h&&(P="top",A=c-l),A<h&&(P="bottom",A=c+s))),a<(E=f||u-(i-n)/2)+i+h&&(E-=E+i+h-a),E<h&&(E=h),A-=d,E-=p):("top"===m?(P="top",N=s):m||r<c+(A=s)+l+h&&h<c-s-l&&(P="top",A="",N=s),t.left+t.width+h>a&&(E=-(t.left+t.width+h-a))),_xeUtils.default.isNumber(A)&&(T.top=toCssUnit(A)),_xeUtils.default.isNumber(N)&&(T.bottom=toCssUnit(N)),_xeUtils.default.isNumber(E)&&(T.left=toCssUnit(E)),o&&_xeUtils.default.isNumber(b)&&(T.minWidth=toCssUnit(b)),E===u?n<=i&&(v=n/2):E<u&&(v=u+n<E+i?u-E+n/2:u-E+(i-(u-E))/2)),{top:A||0,bottom:N||0,left:E||0,arrowLeft:v||0,style:T,placement:P}}function getPopupWrapperElement(e){var t;return e&&(t=document.body,(e=e.parentElement)===t?document.documentElement:e)||null}function getPopupContainer(e){return(e&&_xeUtils.default.isFunction(e)?e({}):e)||"body"}function getPopupAppendElement(e){e=getPopupContainer(e);return _xeUtils.default.isString(e)?document.querySelector(e)||document.body:e}
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.addClass=addClass,exports.getAbsolutePos=getAbsolutePos,exports.getDomNode=getDomNode,exports.getEventTargetNode=getEventTargetNode,exports.getOffsetPos=getOffsetPos,exports.getPaddingLeftRightSize=getPaddingLeftRightSize,exports.getPaddingTopBottomSize=getPaddingTopBottomSize,exports.getPopupAppendElement=getPopupAppendElement,exports.getPopupContainer=getPopupContainer,exports.getPopupWrapperElement=getPopupWrapperElement,exports.getPropClass=getPropClass,exports.getTpImg=getTpImg,exports.hasClass=hasClass,exports.hasControlKey=hasControlKey,exports.initTpImg=initTpImg,exports.isNodeElement=isNodeElement,exports.isPx=isPx,exports.isScale=isScale,exports.removeClass=removeClass,exports.scrollToView=scrollToView,exports.toCssUnit=toCssUnit,exports.triggerEvent=triggerEvent,exports.updatePanelPlacement=updatePanelPlacement;var tpImgEl,_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function initTpImg(){return tpImgEl||((tpImgEl=new Image).src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="),tpImgEl}function getTpImg(){return tpImgEl||initTpImg()}function getPropClass(e,t){return e&&(_xeUtils.default.isFunction(e)?e(t):e)||""}var reClsMap={};function getClsRE(e){return reClsMap[e]||(reClsMap[e]=new RegExp("(?:^|\\s)".concat(e,"(?!\\S)"),"g")),reClsMap[e]}function getNodeOffset(e,t,o){if(e){var n=e.parentNode;if(o.top+=e.offsetTop,o.left+=e.offsetLeft,n&&n!==document.documentElement&&n!==document.body&&(o.top-=n.scrollTop,o.left-=n.scrollLeft),(!t||e!==t&&e.offsetParent!==t)&&e.offsetParent)return getNodeOffset(e.offsetParent,t,o)}return o}function isPx(e){return e&&/^\d+(\.\d+)?(px)?$/.test(e)}function isScale(e){return e&&/^\d+(\.\d+)?%$/.test(e)}function hasClass(e,t){return!!e&&(e.classList?e.classList.contains(t):!!(e.className&&e.className.match&&e.className.match(getClsRE(t))))}function removeClass(e,t){e&&hasClass(e,t)&&(e.className=e.className.replace(getClsRE(t),""))}function addClass(e,t){e&&!hasClass(e,t)&&(removeClass(e,t),e.className="".concat(e.className," ").concat(t))}function hasControlKey(e){return e.ctrlKey||e.metaKey}function toCssUnit(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"px";return _xeUtils.default.isNumber(e)||/^\d+$/.test("".concat(e))?"".concat(e).concat(t):"".concat(e||"")}function getDomNode(){var e=document.documentElement,t=document.body;return{scrollTop:e.scrollTop||t.scrollTop,scrollLeft:e.scrollLeft||t.scrollLeft,visibleHeight:e.clientHeight||t.clientHeight,visibleWidth:e.clientWidth||t.clientWidth}}function getEventTargetNode(e,t,o,n){for(var s,l=e.target.shadowRoot&&e.composed&&e.composedPath()[0]||e.target;l&&l.nodeType&&l!==document;){if(o&&hasClass(l,o)&&(!n||n(l)))s=l;else if(l===t)return{flag:!o||!!s,container:t,targetElem:s};l=l.parentNode}return{flag:!1}}function getOffsetPos(e,t){return getNodeOffset(e,t,{left:0,top:0})}function getAbsolutePos(e){var e=e.getBoundingClientRect(),t=e.top,e=e.left,o=getDomNode();return{boundingTop:t,top:o.scrollTop+t,boundingLeft:e,left:o.scrollLeft+e,visibleHeight:o.visibleHeight,visibleWidth:o.visibleWidth}}function getPaddingTopBottomSize(e){return e?(e=getComputedStyle(e),_xeUtils.default.toNumber(e.paddingTop)+_xeUtils.default.toNumber(e.paddingBottom)):0}function getPaddingLeftRightSize(e){return e?(e=getComputedStyle(e),_xeUtils.default.toNumber(e.paddingLeft)+_xeUtils.default.toNumber(e.paddingRight)):0}var scrollIntoViewIfNeeded="scrollIntoViewIfNeeded",scrollIntoView="scrollIntoView";function scrollToView(e){e&&(e[scrollIntoViewIfNeeded]?e[scrollIntoViewIfNeeded]():e[scrollIntoView]&&e[scrollIntoView]())}function triggerEvent(e,t){e&&e.dispatchEvent(new Event(t))}function isNodeElement(e){return e&&1===e.nodeType}function updatePanelPlacement(e,t,o){var n,s,l,i,r,a,p,d,u,c,g,o=Object.assign({appendTo:"",teleportTo:!1,marginSize:18,isMinWidth:!0},o),f=o.defaultTop,m=o.defaultLeft,C=o.placement,x=o.defaultPlacement,h=o.teleportTo,P=o.marginSize,A=o.isMinWidth,N="bottom",E="",b="",T=0,v="",I="",U={};return t&&e&&(a=document.body,o=getPopupWrapperElement(h?getPopupAppendElement(o.appendTo):t))&&(n=e.offsetWidth,s=e.offsetHeight,l=t.offsetWidth,i=t.offsetHeight,u=o.getBoundingClientRect(),t=t.getBoundingClientRect(),g=e.getBoundingClientRect(),r=a.clientHeight,a=a.clientWidth,p=o.scrollLeft,o=o.scrollTop,d=u.left,u=u.top,c=g.left,g=g.top,v=e.offsetWidth,h?(E=(f||g+s)-o,"top"===C?(N="top",E=g-i):C||("top"===x?(N="top",(E=f?E:g-i)<P&&(N="bottom",E=g+s),r<E+i+P&&(N="top",E=g-i)):(r<E+i+P&&(N="top",E=g-i),E<P&&(N="bottom",E=g+s))),a<(T=(m||c-(l-n)/2)-p)+l+P&&(T-=T+l+P-a),T<P&&(T=P),E-=u,T-=d):("top"===C?(N="top",b=s):C||r<g+(E=s)+i+P&&P<g-s-i&&(N="top",E="",b=s),t.left+t.width+P>a&&(T=-(t.left+t.width+P-a))),_xeUtils.default.isNumber(E)&&(U.top=toCssUnit(E)),_xeUtils.default.isNumber(b)&&(U.bottom=toCssUnit(b)),_xeUtils.default.isNumber(T)&&(U.left=toCssUnit(T)),A&&_xeUtils.default.isNumber(v)&&(U.minWidth=toCssUnit(v)),T===c?n<=l&&(I=n/2):T<c&&(I=c+n<T+l?c-T+n/2:c-T+(l-(c-T))/2)),{top:E||0,bottom:b||0,left:T||0,arrowLeft:I||0,style:U,placement:N}}function getPopupWrapperElement(e){var t;return e&&(t=document.body,(e=e.parentElement)===t?document.documentElement:e)||null}function getPopupContainer(e){return(e&&_xeUtils.default.isFunction(e)?e({}):e)||"body"}function getPopupAppendElement(e){e=getPopupContainer(e);return _xeUtils.default.isString(e)?document.querySelector(e)||document.body:e}

package/lib/ui/src/log.js

@@ -7,7 +7,7 @@ exports.createComponentLog = createComponentLog;
 exports.warnLog = exports.errLog = void 0;
 var _core = require("@vxe-ui/core");
 var log = _core.VxeUI.log;
-var uiVersion = "ui v".concat("3.20.5");
+var uiVersion = "ui v".concat("3.20.7");
 function createComponentLog(name) {
   var tableVersion = _core.VxeUI.tableVersion ? "table v".concat(_core.VxeUI.tableVersion) : '';
   var ganttVersion = _core.VxeUI.ganttVersion ? "gantt v".concat(_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"),log=_core.VxeUI.log,uiVersion="ui v".concat("3.20.5");function createComponentLog(e){var r=_core.VxeUI.tableVersion?"table v".concat(_core.VxeUI.tableVersion):"",o=_core.VxeUI.ganttVersion?"gantt v".concat(_core.VxeUI.ganttVersion):"",n=_core.VxeUI.designVersion?"design v".concat(_core.VxeUI.designVersion):"",r=[uiVersion,r,o,n].filter(function(e){return e}).join(" ");return{warnLog:log.create("warn",r+"] ["+e),errLog:log.create("error",r+"] ["+e)}}var 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"),log=_core.VxeUI.log,uiVersion="ui v".concat("3.20.7");function createComponentLog(e){var r=_core.VxeUI.tableVersion?"table v".concat(_core.VxeUI.tableVersion):"",o=_core.VxeUI.ganttVersion?"gantt v".concat(_core.VxeUI.ganttVersion):"",n=_core.VxeUI.designVersion?"design v".concat(_core.VxeUI.designVersion):"",r=[uiVersion,r,o,n].filter(function(e){return e}).join(" ");return{warnLog:log.create("warn",r+"] ["+e),errLog:log.create("error",r+"] ["+e)}}var warnLog=exports.warnLog=log.create("warn",uiVersion),errLog=exports.errLog=log.create("error",uiVersion);

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

@@ -142,4 +142,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;-ms-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;-ms-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": "3.20.5",
+  "version": "3.20.7",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -25,7 +25,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^3.4.31"
+    "@vxe-ui/core": "^3.4.33"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",

package/packages/button/src/button.ts

@@ -439,7 +439,8 @@ export default /* define-vxe-component start */ 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

@@ -918,6 +918,7 @@ export default /* define-vxe-component start */ 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

@@ -386,6 +386,7 @@ export default /* define-vxe-component start */ 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

@@ -1404,6 +1404,7 @@ export default /* define-vxe-component start */ 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

@@ -1180,6 +1180,7 @@ export default /* define-vxe-component start */ 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

@@ -369,6 +369,7 @@ export default /* define-vxe-component start */ 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

@@ -188,6 +188,7 @@ export default /* define-vxe-component start */ 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

@@ -37,6 +37,10 @@ export default /* define-vxe-component start */ 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>,
@@ -70,6 +74,10 @@ export default /* define-vxe-component start */ 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
@@ -180,7 +188,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeScrollbar
       const reactData = $xeScrollbar.reactData
 
-      const { native, className, padding } = props
+      const { native, theme, className, padding } = props
       const { yThumbHeight, xThumbWidth } = reactData
       const xToTop = ($xeScrollbar as any).computeXToTop as boolean
       const yToLeft = ($xeScrollbar as any).computeYToLeft as boolean
@@ -190,6 +198,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const yAutoHide = ($xeScrollbar as any).computeYAutoHide
       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'}`,
@@ -257,6 +266,18 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeScrollbar = this
       $xeScrollbar.$emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params))
     },
+    getViewElem () {
+      const $xeScrollbar = this
+
+      const viewEl = $xeScrollbar.$refs.refViewElem as HTMLDivElement
+      return viewEl || null
+    },
+    getViewInnerElem () {
+      const $xeScrollbar = this
+
+      const viewInnerEl = $xeScrollbar.$refs.refViewInnerElem as HTMLDivElement
+      return viewInnerEl || null
+    },
     scrollTo (left: ScrollToOptions | number, top?: number) {
       const $xeScrollbar = this
 
@@ -596,7 +617,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeScrollbar
       const slots = $xeScrollbar.$scopedSlots
 
-      const { id, native, loading, viewId, viewAttrs } = props
+      const { id, native, loading, viewId, viewAttrs, viewStyle } = props
       const wrapperStyle = $xeScrollbar.computeWrapperStyle
       const wrapperClss = $xeScrollbar.computeWrapperClss
       const viewClss = $xeScrollbar.computeViewClss
@@ -615,6 +636,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         h('div', {
           ref: 'refViewElem',
           class: viewClss,
+          style: viewStyle,
           attrs: {
             id: viewId || null,
             ...viewAttrs

package/packages/select/src/select.ts

@@ -827,6 +827,7 @@ export default /* define-vxe-component start */ 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

@@ -477,6 +477,7 @@ export default /* define-vxe-component start */ 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,16 +1,19 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { createEvent, getConfig, getIcon, globalEvents, globalMixins, permission, renderEmptyElement } from '../../ui'
+import { VxeUI, globalMixins } 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 VxeLoadingComponent from '../../loading'
 import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, VxeComponentSizeType, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, VxeComponentStyleType } from '../../../types'
 
+const { baseUtils, createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } = VxeUI
+const { getDefVal } = baseUtils
+
 const { warnLog, errLog } = createComponentLog('tabs')
 
 const scrollbarOffsetSize = 20
@@ -58,7 +61,7 @@ export default /* define-vxe-component start */ 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 { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent, globalMixins, globalEvents } from '../../ui'
+import { VxeUI, globalMixins } 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, VxeTooltipEmits, TooltipReactData, TooltipInternalData, VxeComponentSizeType, ValueOf, VxeComponentStyleType } from '../../../types'
+import type { VxeTooltipPropTypes, VxeTooltipEmits, TooltipReactData, TooltipInternalData, VxeComponentSizeType, ValueOf, VxeScrollbarInstance, VxeComponentStyleType } 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
   }
 }
@@ -118,7 +123,12 @@ export default /* define-vxe-component start */ 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>
   },
   data () {
     const xID = XEUtils.uniqueId()
@@ -234,7 +244,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeTooltip
       const reactData = $xeTooltip.reactData
 
-      const { placement, defaultPlacement, isArrow } = props
+      const { placement, defaultPlacement, appendTo, isArrow } = props
       const { tipTarget: targetElem, tipStore, tipPos, tipZindex } = reactData
       const panelElem = $xeTooltip.$refs.refElem as HTMLElement
       if (!targetElem || !panelElem) {
@@ -268,6 +278,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         defaultLeft: left,
         placement: placement,
         defaultPlacement: defaultPlacement,
+        appendTo: appendTo,
         isMinWidth: false,
         teleportTo: true
       })
@@ -393,7 +404,9 @@ export default /* define-vxe-component start */ 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()
+      })
     },
     handleDelayFn () {
       const $xeTooltip = this
@@ -482,7 +495,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const slots = $xeTooltip.$scopedSlots
       const reactData = $xeTooltip.reactData
 
-      const { useHtml, useHTML } = props
+      const { useHtml, theme, useScrollbar, useHTML } = props
       const { tipContent } = reactData
       const wrapperStyle = $xeTooltip.computeWrapperStyle
       const contentSlot = slots.content
@@ -507,9 +520,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
           key: 'cd'
         }, `${tipContent}`))
       }
+      if (useScrollbar) {
+        return h(VxeScrollbarComponent, {
+          key: 5,
+          ref: 'contentScrollbar',
+          class: 'vxe-tooltip--scrollbar-content',
+          props: {
+            theme,
+            viewClassName: 'vxe-tooltip--scrollbar-content-view',
+            viewInnerClassName: 'vxe-tooltip--scrollbar-content-inner',
+            viewStyle: wrapperStyle
+          },
+          scopedSlots: {
+            default: () => contVNs
+          }
+        })
+      }
       return h('div', {
         key: 3,
-        ref: 'contentWrapperfElem',
+        ref: 'contentWrapperElem',
         class: 'vxe-tooltip--content',
         style: wrapperStyle
       }, contVNs)
@@ -598,8 +627,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const $xeTooltip = this
     const props = $xeTooltip
     const reactData = $xeTooltip.reactData
+    const internalData = $xeTooltip.internalData
 
-    const contentWrapperfEl = $xeTooltip.$refs.contentWrapperfElem as HTMLElement
+    const $scrollbar = $xeTooltip.$refs.contentScrollbar as VxeScrollbarInstance
+    if ($scrollbar) {
+      const viewEl = $scrollbar.getViewElem()
+      if (viewEl) {
+        viewEl.addEventListener('wheel', $xeTooltip.wheelEvent, { passive: false })
+        internalData.scrollbarViewEl = viewEl
+      }
+    }
+    const contentWrapperfEl = $xeTooltip.$refs.contentWrapperElem as HTMLElement
     if (contentWrapperfEl) {
       contentWrapperfEl.addEventListener('wheel', $xeTooltip.wheelEvent, { passive: false })
     }
@@ -642,16 +680,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const internalData = $xeTooltip.internalData
 
     const { target } = reactData
+    const { scrollbarViewEl } = internalData
     const panelElem = $xeTooltip.$refs.refElem as HTMLElement
     if (target) {
       target.onmouseenter = null
       target.onmouseleave = null
       target.onclick = null
     }
-    const contentWrapperfEl = $xeTooltip.$refs.contentWrapperfElem as HTMLElement
+    const contentWrapperfEl = $xeTooltip.$refs.contentWrapperElem as HTMLElement
     if (contentWrapperfEl) {
       contentWrapperfEl.removeEventListener('wheel', $xeTooltip.wheelEvent)
     }
+    if (scrollbarViewEl) {
+      scrollbarViewEl.removeEventListener('wheel', $xeTooltip.wheelEvent)
+    }
     if (panelElem) {
       const parentNode = panelElem.parentNode
       if (parentNode) {

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

@@ -568,6 +568,7 @@ export default /* define-vxe-component start */ 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;