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

A vue based PC component library

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