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