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"),_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,_vue.defineComponent)({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],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(p,e){const{slots:v,emit:l}=e;var t=_xeUtils.default.uniqueId();const c=(0,_ui.useSize)(p)["computeSize"],d=(0,_vue.reactive)({target:null,isUpdate:!1,visible:!1,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:{}}}),o={},f=(0,_vue.ref)(),i={refElem:f},g={xID:t,props:p,context:e,reactData:d,internalData:o,getRefMaps:()=>i};let r={};const n=()=>{var{tipTarget:i,tipStore:l}=d;if(i){var{scrollTop:r,scrollLeft:o,visibleWidth:n}=(0,_dom.getDomNode)(),{top:a,left:u}=(0,_dom.getAbsolutePos)(i),s=f.value,p=s.offsetHeight,s=s.offsetWidth;let e=u,t=a-p-6;(e=Math.max(6,u+Math.floor((i.offsetWidth-s)/2)))+s+6>o+n&&(e=o+n-s-6),a-p<r+6&&(l.placement="bottom",t=a+i.offsetHeight+6),l.style.top=t+"px",l.style.left=e+"px",l.arrowStyle.left=u-e+i.offsetWidth/2+"px"}},a=e=>{e!==d.visible&&(d.visible=e,d.isUpdate=!0,l("update:modelValue",e))},u=()=>{d.tipZindex<(0,_utils.getLastZIndex)()&&(d.tipZindex=(0,_utils.nextZIndex)())},s=()=>{d.visible?r.close():S(d.target||C(),p.content)},_=()=>{S(d.target||C(),p.content)},m=()=>{var{trigger:e,enterable:t,leaveDelay:i}=p;d.tipActive=!1,t&&"hover"===e?setTimeout(()=>{d.tipActive||r.close()},i):r.close()},x=()=>{d.tipActive=!0},y=()=>{var{trigger:e,enterable:t,leaveDelay:i}=p;d.tipActive=!1,t&&"hover"===e&&setTimeout(()=>{d.tipActive||r.close()},i)},h=()=>{var e=d["tipStore"],t=f.value;return t&&!t.parentNode&&document.body.appendChild(t),a(!0),u(),e.placement="top",e.style={width:"auto",left:0,top:0,zIndex:p.zIndex||d.tipZindex},e.arrowStyle={left:"50%"},r.updatePlacement()},b=()=>{o.showDelayTip=_xeUtils.default.debounce(()=>{d.tipActive&&h()},p.enterDelay,{leading:!1,trailing:!0})},S=(e,t)=>{var i=v.content;if((i||""!==t&&!_xeUtils.default.eqNull(t))&&e){var i=o["showDelayTip"],{trigger:l,enterDelay:r}=p;if(d.tipActive=!0,d.tipTarget=e,d.tipContent=t,!r||"hover"!==l)return h();i&&i()}return(0,_vue.nextTick)()},C=()=>{var e=p["selector"];if(e){if(_xeUtils.default.isElement(e))return e;if(_xeUtils.default.isString(e))return document.querySelector(e)}return null};r={dispatchEvent(e,t,i){l(e,(0,_ui.createEvent)(i,{$tooltip:g},t))},open(e,t){return S(e||d.target||C(),t)},close(){return d.tipTarget=null,d.tipActive=!1,Object.assign(d.tipStore,{style:{},placement:"",arrowStyle:null}),a(!1),(0,_vue.nextTick)()},toVisible(e,t){return S(e,t)},updatePlacement(){return(0,_vue.nextTick)().then(()=>{var e=d["tipTarget"],t=f.value;if(e&&t)return n(),(0,_vue.nextTick)().then(()=>{n()})})},isActived(){return d.tipActive},setActived(e){d.tipActive=!!e}},Object.assign(g,r);return(0,_vue.watch)(()=>p.enterDelay,()=>{b()}),(0,_vue.watch)(()=>p.content,e=>{d.tipContent=e}),(0,_vue.watch)(()=>p.modelValue,e=>{d.isUpdate||(e?S(d.target||C(),p.content):r.close()),d.isUpdate=!1}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e,{trigger:t,content:i}=p;const l=f.value;if(l){const r=l.parentNode;r&&(d.tipContent=i,d.tipZindex=(0,_utils.nextZIndex)(),_xeUtils.default.arrayEach(l.children,(e,t)=>{1<t&&(r.insertBefore(e,l),d.target||(d.target=e))}),r.removeChild(l),e=d["target"],e&&("hover"===t?(e.onmouseenter=_,e.onmouseleave=m):"click"===t&&(e.onclick=s)),p.modelValue)&&S(e||C(),i)}})}),(0,_vue.onBeforeUnmount)(()=>{var e=d["target"],t=f.value;e&&(e.onmouseenter=null,e.onmouseleave=null,e.onclick=null),t&&(e=t.parentNode)&&e.removeChild(t)}),b(),g.renderVN=()=>{var{popupClassName:e,theme:t,isArrow:i,enterable:l}=p,{tipActive:r,visible:o,tipStore:n}=d,a=v.default,u=c.value;let s;return l&&(s={onMouseenter:x,onMouseleave:y}),(0,_vue.h)("div",Object.assign({ref:f,class:["vxe-tooltip--wrapper","theme--"+t,e?_xeUtils.default.isFunction(e)?e({$tooltip:g}):e:"",{["size--"+u]:u,["placement--"+n.placement]:n.placement,"is--enterable":l,"is--visible":o,"is--arrow":i,"is--active":r}],style:n.style},s),[(t=p.useHTML,e=d.tipContent,(u=v.content)?(0,_vue.h)("div",{key:1,class:"vxe-tooltip--content"},(0,_vn.getSlotVNs)(u({}))):t?(0,_vue.h)("div",{key:2,class:"vxe-tooltip--content",innerHTML:e}):(0,_vue.h)("div",{key:3,class:"vxe-tooltip--content"},""+e)),(0,_vue.h)("div",{class:"vxe-tooltip--arrow",style:n.arrowStyle}),...a?(0,_vn.getSlotVNs)(a({})):[]])},g},render(){return this.renderVN()}});