vxe-pc-ui 4.20.9 → 4.20.11

package/lib/tooltip/src/tooltip.js

@@ -438,9 +438,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return updateTipStyle().then(() => {
           return updateTipStyle();
         }).then(() => {
-          setTimeout(() => {
-            updateTipStyle();
-          }, 15);
+          return updateTipStyle();
         });
       },
       isActived() {
@@ -574,7 +572,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.onMounted)(() => {
       const $scrollbar = contentScrollbar.value;
       if ($scrollbar) {
-        const viewEl = $scrollbar.getViewElem();
+        const viewEl = $scrollbar.getScrollViewElem();
         if (viewEl) {
           viewEl.addEventListener('wheel', wheelEvent, {
             passive: false

package/lib/tooltip/src/tooltip.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{baseUtils,getConfig,createEvent,globalEvents}=_ui.VxeUI,getDefVal=baseUtils.getDefVal;function createReactData(){return{target:null,isUpdate:!1,visible:!1,tipPos:null,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:{}}}}function createInternalData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTooltip",props:{modelValue:Boolean,size:{type:String,default:()=>getConfig().tooltip.size||getConfig().size},selector:[String,Element],trigger:{type:String,default:()=>getConfig().tooltip.trigger||"hover"},theme:{type:String,default:()=>getConfig().tooltip.theme||"dark"},content:{type:[String,Number],default:null},useHtml:{type:Boolean,default:()=>_xeUtils.default.isBoolean(getConfig().tooltip.useHtml)?getConfig().tooltip.useHtml:null},useHTML:{type:Boolean,default:()=>getConfig().tooltip.useHTML},zIndex:[String,Number],popupClassName:[String,Function],width:{type:[String,Number],default:()=>getConfig().tooltip.Width},height:{type:[String,Number],default:()=>getConfig().tooltip.height},minWidth:{type:[String,Number],default:()=>getConfig().tooltip.minWidth},minHeight:{type:[String,Number],default:()=>getConfig().tooltip.minHeight},maxWidth:{type:[String,Number],default:()=>getConfig().tooltip.maxWidth},maxHeight:{type:[String,Number],default:()=>getConfig().tooltip.maxHeight},placement:{type:String,default:()=>getConfig().tooltip.placement},defaultPlacement:{type:String,default:()=>getConfig().tooltip.defaultPlacement},isArrow:{type:Boolean,default:()=>getConfig().tooltip.isArrow},enterable:{type:Boolean,default:()=>getConfig().tooltip.enterable},enterDelay:{type:Number,default:()=>getConfig().tooltip.enterDelay},leaveDelay:{type:Number,default:()=>getConfig().tooltip.leaveDelay},appendTo:{type:[String,Function],default:()=>getConfig().tooltip.appendTo},useScrollbar:{type:Boolean,default:()=>getDefVal(getConfig().tooltip.useScrollbar,getConfig().useScrollbar)},scrollbarConfig:Object},emits:["update:modelValue","show","hide"],setup(m,e){let{slots:p,emit:i}=e;var t=_xeUtils.default.uniqueId();let d=_ui.useFns.useSize(m).computeSize,c=_ui.useFns.useVScrollbar(m).computeIsVScrollbar,h=(0,_vue.reactive)(createReactData()),a=createInternalData(),_=(0,_vue.ref)(),v=(0,_vue.ref)(),g=(0,_vue.ref)(),f=(0,_vue.computed)(()=>{var{width:e,height:t,minHeight:l,minWidth:i,maxHeight:n,maxWidth:o}=m,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height=(0,_dom.toCssUnit)(t)),i&&(a.minWidth=(0,_dom.toCssUnit)(i)),l&&(a.minHeight=(0,_dom.toCssUnit)(l)),o&&(a.maxWidth=(0,_dom.toCssUnit)(o)),n&&(a.maxHeight=(0,_dom.toCssUnit)(n)),a}),l={refElem:_},x={xID:t,props:m,context:e,reactData:h,internalData:a,getRefMaps:()=>l},r=(e,t,l)=>{i(e,createEvent(l,{$tooltip:x},t))},n=e=>{e!==h.visible&&(h.visible=e,h.isUpdate=!0,i("update:modelValue",e))},o=()=>{var e=m.zIndex;e?h.tipZindex=_xeUtils.default.toNumber(e):h.tipZindex<(0,_utils.getLastZIndex)()&&(h.tipZindex=(0,_utils.nextZIndex)())},u=()=>{h.visible?x.close():T(h.target||U(),m.content)},s=()=>{T(h.target||U(),m.content)},y=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e?setTimeout(()=>{h.tipActive||x.close()},l):x.close()},b=()=>{h.tipActive=!0},C=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e&&setTimeout(()=>{h.tipActive||x.close()},l)},S=()=>{var e=m.appendTo,t=h.tipStore,l=_.value;return l&&!l.parentNode&&(0,_dom.getPopupAppendElement)(e).appendChild(l),n(!0),o(),t.placement="top",t.style={width:"auto",left:0,top:0,zIndex:m.zIndex||h.tipZindex},t.arrowStyle={left:"50%"},x.updatePlacement().then(()=>x.updatePlacement())},w=()=>{a.showDelayTip=_xeUtils.default.debounce(()=>{h.tipActive&&S()},m.enterDelay,{leading:!1,trailing:!0})},T=(e,t,l)=>{var i=p.content;if((i||""!==t&&!_xeUtils.default.eqNull(t))&&e){var i=a.showDelayTip,{trigger:n,enterDelay:o}=m;if(h.tipPos=l?{x:l.clientX,y:l.clientY,oLeft:l.offsetX,oTop:l.offsetY}:null,h.tipActive=!0,h.tipTarget=e,h.tipContent=t,h.visible)return x.updatePlacement();if(!o||"hover"!==n)return e=S(),r("show",{},l||null),e;i&&i(),r("show",{},l||null)}return(0,_vue.nextTick)()},U=()=>{var e=m.selector;if(e){if(_xeUtils.default.isElement(e))return e;if(_xeUtils.default.isString(e))return document.querySelector(e)}return null},D=()=>{var{placement:l,defaultPlacement:i,appendTo:n,isArrow:o}=m,{tipTarget:a,tipStore:r,tipPos:u,tipZindex:s}=h,p=_.value;if(a&&p){var d=a.getBoundingClientRect(),c=a.offsetWidth,v=a.offsetHeight,g=p.offsetWidth,f=d.left;let e=0,t=0;u&&(u.oLeft||u.oTop)&&(e=f,t=d.top+v,o?e=e+Math.max(8,Math.min(c-8,u.oLeft))-g/2:(e=u.x+1,t=u.y+1));f=(0,_dom.updatePanelPlacement)(a,p,{defaultTop:t,defaultLeft:e,placement:l,defaultPlacement:i,appendTo:n,isMinWidth:!1,teleportTo:!0}),d=Object.assign(f.style,{zIndex:s});r.placement=f.placement,r.style=d,r.arrowStyle.left=f.arrowLeft?f.arrowLeft+"px":""}return(0,_vue.nextTick)()};t={dispatchEvent:r,openByEvent(e,t,l){return T(t||h.target||U(),l,e)},open(e,t){return T(e||h.target||U(),t)},close(){return h.tipPos=null,h.tipTarget=null,h.tipActive=!1,Object.assign(h.tipStore,{style:{},placement:"",arrowStyle:null}),n(!1),r("hide",{},null),(0,_vue.nextTick)()},toVisible(e,t){return T(e,t)},updatePlacement(){return D().then(()=>D()).then(()=>{setTimeout(()=>{D()},15)})},isActived(){return h.tipActive},setActived(e){h.tipActive=!!e}};let N=e=>{e.stopPropagation()},E=()=>{h.visible&&x.updatePlacement()},V=()=>{x.close()};e={handleCloseEvent:y};Object.assign(x,t,e);return(0,_vue.watch)(()=>m.enterDelay,()=>{w()}),(0,_vue.watch)(()=>m.content,e=>{h.tipContent=e}),(0,_vue.watch)(()=>m.modelValue,e=>{h.isUpdate||(e?T(h.target||U(),m.content):x.close()),h.isUpdate=!1}),w(),(0,_vue.onMounted)(()=>{var e=v.value,e=(e&&(e=e.getViewElem())&&(e.addEventListener("wheel",N,{passive:!1}),a.scrollbarViewEl=e),g.value);e&&e.addEventListener("wheel",N,{passive:!1}),(0,_vue.nextTick)(()=>{var e,{trigger:t,content:i}=m;let n=_.value;if(n){let l=n.parentNode;l&&(h.tipContent=i,h.tipZindex=(0,_utils.nextZIndex)(),_xeUtils.default.arrayEach(n.children,(e,t)=>{t&&(l.insertBefore(e,n),h.target||(h.target=e))}),l.removeChild(n),e=h.target,e&&("hover"===t?(e.onmouseenter=s,e.onmouseleave=y):"click"===t&&(e.onclick=u)),m.modelValue)&&T(e||U(),i)}}),globalEvents.on(x,"blur",V),globalEvents.on(x,"scroll",E)}),(0,_vue.onBeforeUnmount)(()=>{var e=h.target,t=a.scrollbarViewEl,l=_.value,e=(e&&(e.onmouseenter=null,e.onmouseleave=null,e.onclick=null),g.value);e&&e.removeEventListener("wheel",N),t&&t.removeEventListener("wheel",N),l&&(e=l.parentNode)&&e.removeChild(l),globalEvents.off(x,"blur"),globalEvents.off(x,"scroll"),_xeUtils.default.assign(h,createReactData()),_xeUtils.default.assign(a,createInternalData())}),x.renderVN=()=>{var{popupClassName:e,theme:t,isArrow:l,enterable:i}=m,{tipActive:n,visible:o,tipStore:a}=h,r=p.default,u=d.value;let s;return i&&(s={onMouseenter:b,onMouseleave:C}),(0,_vue.h)("div",Object.assign({ref:_,class:["vxe-tooltip--wrapper","theme--"+t,e?_xeUtils.default.isFunction(e)?e({$tooltip:x}):e:"",{["size--"+u]:u,["placement--"+a.placement]:a.placement,"is--enterable":i,"is--visible":o,"is--arrow":l,"is--active":n}],style:a.style},s),[(0,_vue.h)("div",{key:"tby",class:"vxe-tooltip--body"},[(()=>{var{theme:e,useHtml:t,useHTML:l}=m,i=h.tipContent,n=c.value,o=f.value,a=p.content;let r=[];return a?r.push((0,_vue.h)("div",{key:"ct"},(0,_vn.getSlotVNs)(a({})))):(_xeUtils.default.isBoolean(t)?t:l)?r.push((0,_vue.h)("div",{key:"ch",innerHTML:i})):r.push((0,_vue.h)("span",{key:"cd"},""+i)),n?(0,_vue.h)(_scrollbar.default,{key:5,ref:v,class:"vxe-tooltip--scrollbar-content",theme:e,viewClassName:"vxe-tooltip--scrollbar-content-view",viewInnerClassName:"vxe-tooltip--scrollbar-content-inner",viewStyle:o},{default:()=>r}):(0,_vue.h)("div",{key:3,ref:g,class:"vxe-tooltip--content",style:o},r)})(),(0,_vue.h)("div",{class:"vxe-tooltip--arrow",style:a.arrowStyle})]),...r?(0,_vn.getSlotVNs)(r({})):[]])},x},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{baseUtils,getConfig,createEvent,globalEvents}=_ui.VxeUI,getDefVal=baseUtils.getDefVal;function createReactData(){return{target:null,isUpdate:!1,visible:!1,tipPos:null,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:{}}}}function createInternalData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTooltip",props:{modelValue:Boolean,size:{type:String,default:()=>getConfig().tooltip.size||getConfig().size},selector:[String,Element],trigger:{type:String,default:()=>getConfig().tooltip.trigger||"hover"},theme:{type:String,default:()=>getConfig().tooltip.theme||"dark"},content:{type:[String,Number],default:null},useHtml:{type:Boolean,default:()=>_xeUtils.default.isBoolean(getConfig().tooltip.useHtml)?getConfig().tooltip.useHtml:null},useHTML:{type:Boolean,default:()=>getConfig().tooltip.useHTML},zIndex:[String,Number],popupClassName:[String,Function],width:{type:[String,Number],default:()=>getConfig().tooltip.Width},height:{type:[String,Number],default:()=>getConfig().tooltip.height},minWidth:{type:[String,Number],default:()=>getConfig().tooltip.minWidth},minHeight:{type:[String,Number],default:()=>getConfig().tooltip.minHeight},maxWidth:{type:[String,Number],default:()=>getConfig().tooltip.maxWidth},maxHeight:{type:[String,Number],default:()=>getConfig().tooltip.maxHeight},placement:{type:String,default:()=>getConfig().tooltip.placement},defaultPlacement:{type:String,default:()=>getConfig().tooltip.defaultPlacement},isArrow:{type:Boolean,default:()=>getConfig().tooltip.isArrow},enterable:{type:Boolean,default:()=>getConfig().tooltip.enterable},enterDelay:{type:Number,default:()=>getConfig().tooltip.enterDelay},leaveDelay:{type:Number,default:()=>getConfig().tooltip.leaveDelay},appendTo:{type:[String,Function],default:()=>getConfig().tooltip.appendTo},useScrollbar:{type:Boolean,default:()=>getDefVal(getConfig().tooltip.useScrollbar,getConfig().useScrollbar)},scrollbarConfig:Object},emits:["update:modelValue","show","hide"],setup(m,e){let{slots:p,emit:i}=e;var t=_xeUtils.default.uniqueId();let d=_ui.useFns.useSize(m).computeSize,c=_ui.useFns.useVScrollbar(m).computeIsVScrollbar,h=(0,_vue.reactive)(createReactData()),a=createInternalData(),_=(0,_vue.ref)(),v=(0,_vue.ref)(),g=(0,_vue.ref)(),f=(0,_vue.computed)(()=>{var{width:e,height:t,minHeight:l,minWidth:i,maxHeight:n,maxWidth:o}=m,a={};return e&&(a.width=(0,_dom.toCssUnit)(e)),t&&(a.height=(0,_dom.toCssUnit)(t)),i&&(a.minWidth=(0,_dom.toCssUnit)(i)),l&&(a.minHeight=(0,_dom.toCssUnit)(l)),o&&(a.maxWidth=(0,_dom.toCssUnit)(o)),n&&(a.maxHeight=(0,_dom.toCssUnit)(n)),a}),l={refElem:_},x={xID:t,props:m,context:e,reactData:h,internalData:a,getRefMaps:()=>l},r=(e,t,l)=>{i(e,createEvent(l,{$tooltip:x},t))},n=e=>{e!==h.visible&&(h.visible=e,h.isUpdate=!0,i("update:modelValue",e))},o=()=>{var e=m.zIndex;e?h.tipZindex=_xeUtils.default.toNumber(e):h.tipZindex<(0,_utils.getLastZIndex)()&&(h.tipZindex=(0,_utils.nextZIndex)())},u=()=>{h.visible?x.close():U(h.target||D(),m.content)},s=()=>{U(h.target||D(),m.content)},y=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e?setTimeout(()=>{h.tipActive||x.close()},l):x.close()},b=()=>{h.tipActive=!0},C=()=>{var{trigger:e,enterable:t,leaveDelay:l}=m;h.tipActive=!1,t&&"hover"===e&&setTimeout(()=>{h.tipActive||x.close()},l)},S=()=>{var e=m.appendTo,t=h.tipStore,l=_.value;return l&&!l.parentNode&&(0,_dom.getPopupAppendElement)(e).appendChild(l),n(!0),o(),t.placement="top",t.style={width:"auto",left:0,top:0,zIndex:m.zIndex||h.tipZindex},t.arrowStyle={left:"50%"},x.updatePlacement().then(()=>x.updatePlacement())},w=()=>{a.showDelayTip=_xeUtils.default.debounce(()=>{h.tipActive&&S()},m.enterDelay,{leading:!1,trailing:!0})},U=(e,t,l)=>{var i=p.content;if((i||""!==t&&!_xeUtils.default.eqNull(t))&&e){var i=a.showDelayTip,{trigger:n,enterDelay:o}=m;if(h.tipPos=l?{x:l.clientX,y:l.clientY,oLeft:l.offsetX,oTop:l.offsetY}:null,h.tipActive=!0,h.tipTarget=e,h.tipContent=t,h.visible)return x.updatePlacement();if(!o||"hover"!==n)return e=S(),r("show",{},l||null),e;i&&i(),r("show",{},l||null)}return(0,_vue.nextTick)()},D=()=>{var e=m.selector;if(e){if(_xeUtils.default.isElement(e))return e;if(_xeUtils.default.isString(e))return document.querySelector(e)}return null},T=()=>{var{placement:l,defaultPlacement:i,appendTo:n,isArrow:o}=m,{tipTarget:a,tipStore:r,tipPos:u,tipZindex:s}=h,p=_.value;if(a&&p){var d=a.getBoundingClientRect(),c=a.offsetWidth,v=a.offsetHeight,g=p.offsetWidth,f=d.left;let e=0,t=0;u&&(u.oLeft||u.oTop)&&(e=f,t=d.top+v,o?e=e+Math.max(8,Math.min(c-8,u.oLeft))-g/2:(e=u.x+1,t=u.y+1));f=(0,_dom.updatePanelPlacement)(a,p,{defaultTop:t,defaultLeft:e,placement:l,defaultPlacement:i,appendTo:n,isMinWidth:!1,teleportTo:!0}),d=Object.assign(f.style,{zIndex:s});r.placement=f.placement,r.style=d,r.arrowStyle.left=f.arrowLeft?f.arrowLeft+"px":""}return(0,_vue.nextTick)()};t={dispatchEvent:r,openByEvent(e,t,l){return U(t||h.target||D(),l,e)},open(e,t){return U(e||h.target||D(),t)},close(){return h.tipPos=null,h.tipTarget=null,h.tipActive=!1,Object.assign(h.tipStore,{style:{},placement:"",arrowStyle:null}),n(!1),r("hide",{},null),(0,_vue.nextTick)()},toVisible(e,t){return U(e,t)},updatePlacement(){return T().then(()=>T()).then(()=>T())},isActived(){return h.tipActive},setActived(e){h.tipActive=!!e}};let N=e=>{e.stopPropagation()},E=()=>{h.visible&&x.updatePlacement()},V=()=>{x.close()};e={handleCloseEvent:y};Object.assign(x,t,e);return(0,_vue.watch)(()=>m.enterDelay,()=>{w()}),(0,_vue.watch)(()=>m.content,e=>{h.tipContent=e}),(0,_vue.watch)(()=>m.modelValue,e=>{h.isUpdate||(e?U(h.target||D(),m.content):x.close()),h.isUpdate=!1}),w(),(0,_vue.onMounted)(()=>{var e=v.value,e=(e&&(e=e.getScrollViewElem())&&(e.addEventListener("wheel",N,{passive:!1}),a.scrollbarViewEl=e),g.value);e&&e.addEventListener("wheel",N,{passive:!1}),(0,_vue.nextTick)(()=>{var e,{trigger:t,content:i}=m;let n=_.value;if(n){let l=n.parentNode;l&&(h.tipContent=i,h.tipZindex=(0,_utils.nextZIndex)(),_xeUtils.default.arrayEach(n.children,(e,t)=>{t&&(l.insertBefore(e,n),h.target||(h.target=e))}),l.removeChild(n),e=h.target,e&&("hover"===t?(e.onmouseenter=s,e.onmouseleave=y):"click"===t&&(e.onclick=u)),m.modelValue)&&U(e||D(),i)}}),globalEvents.on(x,"blur",V),globalEvents.on(x,"scroll",E)}),(0,_vue.onBeforeUnmount)(()=>{var e=h.target,t=a.scrollbarViewEl,l=_.value,e=(e&&(e.onmouseenter=null,e.onmouseleave=null,e.onclick=null),g.value);e&&e.removeEventListener("wheel",N),t&&t.removeEventListener("wheel",N),l&&(e=l.parentNode)&&e.removeChild(l),globalEvents.off(x,"blur"),globalEvents.off(x,"scroll"),_xeUtils.default.assign(h,createReactData()),_xeUtils.default.assign(a,createInternalData())}),x.renderVN=()=>{var{popupClassName:e,theme:t,isArrow:l,enterable:i}=m,{tipActive:n,visible:o,tipStore:a}=h,r=p.default,u=d.value;let s;return i&&(s={onMouseenter:b,onMouseleave:C}),(0,_vue.h)("div",Object.assign({ref:_,class:["vxe-tooltip--wrapper","theme--"+t,e?_xeUtils.default.isFunction(e)?e({$tooltip:x}):e:"",{["size--"+u]:u,["placement--"+a.placement]:a.placement,"is--enterable":i,"is--visible":o,"is--arrow":l,"is--active":n}],style:a.style},s),[(0,_vue.h)("div",{key:"tby",class:"vxe-tooltip--body"},[(()=>{var{theme:e,useHtml:t,useHTML:l}=m,i=h.tipContent,n=c.value,o=f.value,a=p.content;let r=[];return a?r.push((0,_vue.h)("div",{key:"ct"},(0,_vn.getSlotVNs)(a({})))):(_xeUtils.default.isBoolean(t)?t:l)?r.push((0,_vue.h)("div",{key:"ch",innerHTML:i})):r.push((0,_vue.h)("span",{key:"cd"},""+i)),n?(0,_vue.h)(_scrollbar.default,{key:5,ref:v,class:"vxe-tooltip--scrollbar-content",theme:e,viewClassName:"vxe-tooltip--scrollbar-content-view",viewInnerClassName:"vxe-tooltip--scrollbar-content-inner",viewStyle:o},{default:()=>r}):(0,_vue.h)("div",{key:3,ref:g,class:"vxe-tooltip--content",style:o},r)})(),(0,_vue.h)("div",{class:"vxe-tooltip--arrow",style:a.arrowStyle})]),...r?(0,_vn.getSlotVNs)(r({})):[]])},x},render(){return this.renderVN()}});

package/lib/tooltip/style/style.css

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

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

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

package/lib/tree/src/tree.js

@@ -24,17 +24,14 @@ const {
 } = (0, _log.createComponentLog)('tree');
 const {
   menus,
-  scrollbarUtils,
   getConfig,
   getI18n,
-  getIcon
+  getIcon,
+  baseUtils
 } = _ui.VxeUI;
 const {
-  getThumbOffsetSize,
-  getThumbSize,
-  getScrollFromClick,
-  getScrollFromDrag
-} = scrollbarUtils;
+  getDefVal
+} = baseUtils;
 /**
  * 生成节点的唯一主键
  */
@@ -239,7 +236,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     virtualYConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => (0, _utils.getDefaultConfig)(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+      default: () => getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -250,28 +247,24 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       slots
     } = context;
     const xID = _xeUtils.default.uniqueId();
-    const {
-      computeSize
-    } = _ui.useFns.useSize(props);
-    const {
-      computeIsVScrollbar
-    } = _ui.useFns.useVScrollbar(props);
     const refElem = (0, _vue.ref)();
     const refHeaderWrapperElem = (0, _vue.ref)();
     const refFooterWrapperElem = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
     const refVirtualSpaceElem = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
-    const refTrackXElem = (0, _vue.ref)();
-    const refTrackYElem = (0, _vue.ref)();
-    const refThumbXElem = (0, _vue.ref)();
-    const refThumbYElem = (0, _vue.ref)();
     const refDragNodeLineElem = (0, _vue.ref)();
     const refDragTipElem = (0, _vue.ref)();
     const refTooltip = (0, _vue.ref)();
     const crossTreeDragNodeInfo = (0, _store.getCrossTreeDragNodeInfo)();
     const internalData = createInternalData();
     const reactData = (0, _vue.reactive)(createReactData());
+    const {
+      computeSize
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const refMaps = {
       refElem
     };
@@ -414,32 +407,32 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeScrollXHeight = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
     });
     const computeScrollYWidth = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
     });
     const computeScrollXVisible = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
-      return (0, _utils.getDefaultConfig)(scrollbarXOpts.visible, scrollbarOpts.visible);
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
     });
     const computeScrollYVisible = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
-      return (0, _utils.getDefaultConfig)(scrollbarYOpts.visible, scrollbarOpts.visible);
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
     });
     const computeScrollXAutoHide = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     });
     const computeScrollYAutoHide = (0, _vue.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     });
     const computeScrollbarWrapperClss = (0, _vue.computed)(() => {
       const {
@@ -482,6 +475,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
+    const {
+      refTrackXElem,
+      refTrackYElem,
+      refThumbXElem,
+      refThumbYElem,
+      updateThumbSize,
+      updateThumbOffset,
+      clickTrackXEvent,
+      clickTrackYEvent,
+      pointerdownThumbXEvent,
+      pointermoveThumbXEvent,
+      cleatPointerThumbEvent,
+      pointerdownThumbYEvent,
+      pointermoveThumbYEvent
+    } = _ui.useFns.useInitVScrollbar($xeTree);
     const getNodeId = node => {
       if (!node) {
         return '';
@@ -1134,7 +1142,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
       const isY = scrollTop !== internalData.lastScrollTop;
-      updateThumbOffset();
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        updateThumbOffset();
+      }
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -2031,6 +2042,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const treeMethods = {
       dispatchEvent,
+      getScrollViewElem() {
+        const viewEl = refVirtualWrapper.value;
+        return viewEl || null;
+      },
       getNodeId,
       getNodeById(nodeid) {
         const {
@@ -3494,183 +3509,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       }
     };
-    const updateThumbSize = () => {
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const trackXEl = refTrackXElem.value;
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      const thumbXElem = refThumbXElem.value;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      const trackYEl = refTrackYElem.value;
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      const thumbYElem = refThumbYElem.value;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    };
-    const updateThumbOffset = () => {
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      const {
-        xThumbWidth,
-        yThumbHeight
-      } = reactData;
-      const trackXEl = refTrackXElem.value;
-      const thumbXElem = refThumbXElem.value;
-      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-      internalData.xThumbLeft = xThumbLeft;
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-      }
-      const trackYEl = refTrackYElem.value;
-      const thumbYElem = refThumbYElem.value;
-      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-      internalData.yThumbTop = yThumbTop;
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-        thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-      }
-    };
-    const clickTrackXEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    };
-    const clickTrackYEvent = evnt => {
-      const trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    };
-    const pointerdownThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        xThumbWidth
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbXEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      const {
-        isThumbDrag,
-        thumbDragOffset
-      } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value;
-        if (!viewEl) {
-          return;
-        }
-        const {
-          xThumbWidth
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    };
-    const cleatPointerThumbEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    };
-    const pointerdownThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      const viewEl = refVirtualWrapper.value;
-      if (!viewEl) {
-        return;
-      }
-      const {
-        yThumbHeight
-      } = reactData;
-      const trackEl = thumbEl.parentElement;
-      const trackRect = trackEl.getBoundingClientRect();
-      const pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    };
-    const pointermoveThumbYEvent = evnt => {
-      const thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      const {
-        isThumbDrag,
-        thumbDragOffset
-      } = internalData;
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value;
-        if (!viewEl) {
-          return;
-        }
-        const {
-          yThumbHeight
-        } = reactData;
-        const thumbEl = evnt.currentTarget;
-        const trackEl = thumbEl.parentElement;
-        const trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      }
-    };
     Object.assign($xeTree, treeMethods, treePrivateMethods);
     const renderDragIcon = (node, nodeid) => {
       const {