vxe-pc-ui/lib/tooltip/src/tooltip.min.js

A vue based PC component library

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");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTooltip",props:{modelValue:Boolean,size:{type:String,default:()=>(0,_ui.getConfig)().tooltip.size||(0,_ui.getConfig)().size},selector:String,trigger:{type:String,default:()=>(0,_ui.getConfig)().tooltip.trigger||"hover"},theme:{type:String,default:()=>(0,_ui.getConfig)().tooltip.theme||"dark"},content:{type:[String,Number],default:null},useHtml:{type:Boolean,default:()=>_xeUtils.default.isBoolean((0,_ui.getConfig)().tooltip.useHtml)?(0,_ui.getConfig)().tooltip.useHtml:null},useHTML:{type:Boolean,default:()=>(0,_ui.getConfig)().tooltip.useHTML},zIndex:[String,Number],popupClassName:[String,Function],width:{type:[String,Number],default:()=>(0,_ui.getConfig)().tooltip.Width},height:{type:[String,Number],default:()=>(0,_ui.getConfig)().tooltip.height},minWidth:{type:[String,Number],default:()=>(0,_ui.getConfig)().tooltip.minWidth},minHeight:{type:[String,Number],default:()=>(0,_ui.getConfig)().tooltip.minHeight},maxWidth:{type:[String,Number],default:()=>(0,_ui.getConfig)().tooltip.maxWidth},maxHeight:{type:[String,Number],default:()=>(0,_ui.getConfig)().tooltip.maxHeight},placement:{type:String,default:()=>(0,_ui.getConfig)().tooltip.placement},defaultPlacement:{type:String,default:()=>(0,_ui.getConfig)().tooltip.defaultPlacement},isArrow:{type:Boolean,default:()=>(0,_ui.getConfig)().tooltip.isArrow},enterable:{type:Boolean,default:()=>(0,_ui.getConfig)().tooltip.enterable},enterDelay:{type:Number,default:()=>(0,_ui.getConfig)().tooltip.enterDelay},leaveDelay:{type:Number,default:()=>(0,_ui.getConfig)().tooltip.leaveDelay}},emits:["update:modelValue"],setup(_,e){let{slots:s,emit:l}=e;var t=_xeUtils.default.uniqueId();let d=(0,_ui.useSize)(_).computeSize,h=(0,_vue.reactive)({target:null,isUpdate:!1,visible:!1,tipPos:null,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:{}}}),r={},y=(0,_vue.ref)(),v=(0,_vue.ref)(),g=(0,_vue.computed)(()=>{var{width:e,height:t,minHeight:i,minWidth:l,maxHeight:o,maxWidth:n}=_,r={};return e&&(r.width=(0,_dom.toCssUnit)(e)),t&&(r.height=(0,_dom.toCssUnit)(t)),l&&(r.minWidth=(0,_dom.toCssUnit)(l)),i&&(r.minHeight=(0,_dom.toCssUnit)(i)),n&&(r.maxWidth=(0,_dom.toCssUnit)(n)),o&&(r.maxHeight=(0,_dom.toCssUnit)(o)),r}),i={refElem:y},c={xID:t,props:_,context:e,reactData:h,internalData:r,getRefMaps:()=>i},o={},n=()=>{var{isArrow:e,placement:t,defaultPlacement:i}=_,{tipTarget:l,tipStore:o,tipPos:n}=h;let r="",u="",a="bottom",p="";var s,d,v,g,c,f,m=y.value;m&&l&&(f=document.documentElement,s=document.body,d=l.offsetWidth,v=l.offsetHeight,g=m.offsetHeight,m=m.offsetWidth,l=l.getBoundingClientRect(),c=f.clientHeight||s.clientHeight,f=f.clientWidth||s.clientWidth,u=l.left,r=l.top+v,n&&(n.oLeft||n.oTop)?e?u=u+Math.max(8,Math.min(d-8,n.oLeft))-m/2:(u=n.x+1,r=n.y+1):u=l.left+(d-m)/2,"top"===t?(a="top",r=l.top-g):t||("top"===i?(a="top",(r=l.top-g)<6&&(a="bottom",r=l.top+v),r+g+6>c&&(a="top",r=l.top-g)):(r+g+6>c&&(a="top",r=l.top-g),r<6&&(a="bottom",r=l.top+v))),u+m+6>f&&(u-=u+m+6-f),(u=u<6?6:u)===l.left?d<=m&&(p=d/2):u<l.left&&(p=u+m>l.left+d?l.left-u+d/2:l.left-u+(m-(l.left-u))/2),o.placement=a,o.style.top=r+"px",o.style.left=u+"px",o.arrowStyle.left=p+"px")},u=e=>{e!==h.visible&&(h.visible=e,h.isUpdate=!0,l("update:modelValue",e))},a=()=>{h.tipZindex<(0,_utils.getLastZIndex)()&&(h.tipZindex=(0,_utils.nextZIndex)())},p=()=>{h.visible?o.close():w(h.target||T(),_.content)},f=()=>{w(h.target||T(),_.content)},m=()=>{var{trigger:e,enterable:t,leaveDelay:i}=_;h.tipActive=!1,t&&"hover"===e?setTimeout(()=>{h.tipActive||o.close()},i):o.close()},x=()=>{h.tipActive=!0},b=()=>{var{trigger:e,enterable:t,leaveDelay:i}=_;h.tipActive=!1,t&&"hover"===e&&setTimeout(()=>{h.tipActive||o.close()},i)},C=()=>{var e=h.tipStore,t=y.value;return t&&!t.parentNode&&document.body.appendChild(t),u(!0),a(),e.placement="top",e.style={width:"auto",left:0,top:0,zIndex:_.zIndex||h.tipZindex},e.arrowStyle={left:"50%"},o.updatePlacement()},S=()=>{r.showDelayTip=_xeUtils.default.debounce(()=>{h.tipActive&&C()},_.enterDelay,{leading:!1,trailing:!0})},w=(e,t,i)=>{var l=s.content;if((l||""!==t&&!_xeUtils.default.eqNull(t))&&e){var l=r.showDelayTip,{trigger:o,enterDelay:n}=_;if(h.tipPos=i?{x:i.clientX,y:i.clientY,oLeft:i.offsetX,oTop:i.offsetY}:null,h.tipActive=!0,h.tipTarget=e,h.tipContent=t,h.visible)return c.updatePlacement();if(!n||"hover"!==o)return C();l&&l()}return(0,_vue.nextTick)()},T=()=>{var e=_.selector;if(e){if(_xeUtils.default.isElement(e))return e;if(_xeUtils.default.isString(e))return document.querySelector(e)}return null},U=(o={dispatchEvent(e,t,i){l(e,(0,_ui.createEvent)(i,{$tooltip:c},t))},openByEvent(e,t,i){return w(t||h.target||T(),i,e)},open(e,t){return w(e||h.target||T(),t)},close(){return h.tipPos=null,h.tipTarget=null,h.tipActive=!1,Object.assign(h.tipStore,{style:{},placement:"",arrowStyle:null}),u(!1),(0,_vue.nextTick)()},toVisible(e,t){return w(e,t)},updatePlacement(){let{visible:e,tipTarget:t}=h,i=y.value;return e&&t&&i&&n(),(0,_vue.nextTick)().then(()=>{if(i=y.value,t&&i)return n(),(0,_vue.nextTick)().then(()=>{n()})})},isActived(){return h.tipActive},setActived(e){h.tipActive=!!e}},e=>{e.stopPropagation()});Object.assign(c,o);return(0,_vue.watch)(()=>_.enterDelay,()=>{S()}),(0,_vue.watch)(()=>_.content,e=>{h.tipContent=e}),(0,_vue.watch)(()=>_.modelValue,e=>{h.isUpdate||(e?w(h.target||T(),_.content):o.close()),h.isUpdate=!1}),(0,_vue.onMounted)(()=>{var e=v.value;e&&e.addEventListener("wheel",U,{passive:!1}),(0,_vue.nextTick)(()=>{var e,{trigger:t,content:l}=_;let o=y.value;if(o){let i=o.parentNode;i&&(h.tipContent=l,h.tipZindex=(0,_utils.nextZIndex)(),_xeUtils.default.arrayEach(o.children,(e,t)=>{t&&(i.insertBefore(e,o),h.target||(h.target=e))}),i.removeChild(o),e=h.target,e&&("hover"===t?(e.onmouseenter=f,e.onmouseleave=m):"click"===t&&(e.onclick=p)),_.modelValue)&&w(e||T(),l)}})}),(0,_vue.onBeforeUnmount)(()=>{var e=h.target,t=y.value,e=(e&&(e.onmouseenter=null,e.onmouseleave=null,e.onclick=null),v.value);e&&e.removeEventListener("wheel",U),t&&(e=t.parentNode)&&e.removeChild(t)}),S(),c.renderVN=()=>{var{popupClassName:e,theme:t,isArrow:i,enterable:l}=_,{tipActive:o,visible:n,tipStore:r}=h,u=s.default,a=d.value;let p;return l&&(p={onMouseenter:x,onMouseleave:b}),(0,_vue.h)("div",Object.assign({ref:y,class:["vxe-tooltip--wrapper","theme--"+t,e?_xeUtils.default.isFunction(e)?e({$tooltip:c}):e:"",{["size--"+a]:a,["placement--"+r.placement]:r.placement,"is--enterable":l,"is--visible":n,"is--arrow":i,"is--active":o}],style:r.style},p),[(0,_vue.h)("div",{key:"tby",class:"vxe-tooltip--body"},[(()=>{var{useHtml:e,useHTML:t}=_,i=h.tipContent,l=g.value,o=s.content,n=[];return o?n.push((0,_vue.h)("div",{key:"ct"},(0,_vn.getSlotVNs)(o({})))):(_xeUtils.default.isBoolean(e)?e:t)?n.push((0,_vue.h)("div",{key:"ch",innerHTML:i})):n.push((0,_vue.h)("span",{key:"cd"},""+i)),(0,_vue.h)("div",{key:3,ref:v,class:"vxe-tooltip--content",style:l},n)})(),(0,_vue.h)("div",{class:"vxe-tooltip--arrow",style:r.arrowStyle})]),...u?(0,_vn.getSlotVNs)(u({})):[]])},c},render(){return this.renderVN()}});