vexip-ui/lib/components/tooltip/tooltip.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const r=require("vue");require("../popper/index.cjs");const u=require("@vexip-ui/config"),i=require("@vexip-ui/hooks"),U=require("@vexip-ui/utils"),Y=require("./props.cjs"),Z=require("../popper/popper.vue.cjs");function ee(f){return typeof f=="function"||Object.prototype.toString.call(f)==="[object Object]"&&!r.isVNode(f)}const te=r.createTextVNode("").type,re=r.defineComponent({name:"Tooltip",inheritAttrs:!0,props:Y.tooltipProps,emits:["clickoutside","update:visible"],setup(f,{attrs:y,slots:v,emit:$,expose:j}){const o=u.useNameHelper("tooltip"),e=u.useProps("tooltip",f,{trigger:{default:"hover",validator:t=>["hover","click","focus","hover-focus","custom"].includes(t)},wrapper:!1,noArrow:!1,transitionName:()=>o.ns("fade"),visible:!1,placement:{default:"top",validator:t=>i.placementWhileList.includes(t)},outsideClose:!0,noHover:!1,tipClass:null,tipStyle:null,transfer:!1,disabled:!1,raw:!1,delay:250,tipAlive:!1,reverse:!1,width:"auto",virtual:null,shift:!1}),w=u.useId(),E=u.useHoverDelay(),{timer:g}=i.useSetTimeout(),B=r.toRef(e,"placement"),s=r.ref(e.visible),d=r.ref(e.visible),D=r.toRef(e,"transfer"),V=r.ref(100);let T=!1,x=!1;const A=r.computed(()=>e.trigger==="hover"||e.trigger==="hover-focus"),C=r.computed(()=>e.trigger==="focus"||e.trigger==="hover-focus"),p=r.ref(),N=r.computed(()=>{var a;const t=((a=e.virtual)==null?void 0:a.$el)??e.virtual;if(t){if("getBoundingClientRect"in t)return t;if("x"in t&&"y"in t)return{getBoundingClientRect:()=>({x:t.x,y:t.y,left:t.x,top:t.y,width:0,height:0})}}return p.value}),l=r.computed(()=>U.isElement(N.value)?N.value:null),k=r.computed(()=>typeof e.delay=="number"?new Array(2).fill(Math.max(e.delay,0)):e.delay.map(t=>Math.max(t,0))),S=r.ref(),m=r.computed(()=>{var t;return(t=S.value)==null?void 0:t.wrapper}),L=r.ref(),F=r.computed(()=>e.shift?e.shift===!0||e.shift==="both"?{crossAxis:!0}:e.shift==="horizontal"?{mainAxis:!1,crossAxis:!0}:{}:{mainAxis:!1}),{transferTo:I,updatePopper:h}=i.usePopper({placement:B,transfer:D,arrow:L,reference:N,shift:F,wrapper:p,popper:m});i.useClickOutside(R,p),i.useClickOutside(()=>{s.value&&!p.value&&R()},m);const M=r.computed(()=>e.width==="auto"?e.tipStyle:e.width==="trigger"?[{width:`${V.value}px`},e.tipStyle]:[{width:`${e.width}px`},e.tipStyle]),P=r.shallowReadonly({toggleVisible:n,updatePopper:h});i.useListener(l,"mouseenter",O),i.useListener(l,"mouseleave",q),i.useListener(l,"click",z),i.useListener(l,"focus",X),i.useListener(l,"blur",G),i.useListener(m,"mouseenter",O),i.useListener(m,"mouseleave",q),r.watch(()=>e.visible,t=>{s.value=t,t&&(d.value=!0,h())}),r.watch(()=>e.disabled,t=>{t&&n(!1)}),j({rendering:d,trigger:l,toggleVisible:n,updatePopper:h});function n(t=!s.value){s.value!==t&&(s.value=t,t&&(_(),d.value=!0,h()),$("update:visible",t),u.emitEvent(e.onToggle,t))}function _(){l.value&&(V.value=l.value.offsetWidth)}function b(){return A.value&&T||C.value&&x}function O(){e.disabled||(A.value&&(clearTimeout(g.hover),g.hover=setTimeout(()=>{T=!0,n(b())},k.value[0]??E.value)),u.emitEvent(e.onTipEnter))}function q(){e.disabled||(A.value&&(clearTimeout(g.hover),g.hover=setTimeout(()=>{T=!1,n(b())},k.value[1]??E.value)),u.emitEvent(e.onTipLeave))}function z(){e.disabled||e.trigger==="click"&&n()}function X(){e.disabled||C.value&&(x=!0,n(b()))}function G(){e.disabled||C.value&&(x=!1,n(b()))}function R(){e.disabled||(u.emitEvent(e.onClickOutside),e.outsideClose&&e.trigger!=="custom"&&s.value&&(n(!1),u.emitEvent(e.onOutsideClose)))}function J(t){t?p.value=t.nextElementSibling:p.value=void 0}function H(){d.value=s.value}function K(t){t.stopPropagation()}return()=>{var W;const t=e.wrapper?e.wrapper===!0?"span":e.wrapper:null,a=(W=v.trigger)==null?void 0:W.call(v,P),c=a?a[0]:null,Q=()=>c?c.type===te?t?r.createVNode("span",null,[c]):r.createVNode("span",y,[c]):(t||(c.props=r.mergeProps(c.props||{},y,{"aria-describedby":w.value})),c):null;return[c&&(t?r.createVNode(t,r.mergeProps(y,{ref:p,class:[o.b(),o.bs("vars"),e.inherit&&o.bm("inherit")],"aria-describedby":w.value}),ee(a)?a:{default:()=>[a]}):r.createVNode(r.Fragment,{ref:J},[Q()])),!e.disabled&&(e.tipAlive||d.value)&&r.createVNode(Z,{ref:S,id:w.value,class:{[o.be("popper")]:!0,[o.bs("vars")]:!0,[o.bem("popper",e.reverse?"dark":"light")]:!0,[o.bem("popper","no-hover")]:e.noHover,[o.bem("popper","no-arrow")]:e.noArrow},appear:!0,visible:s.value,alive:e.tipAlive,to:I.value,transition:e.transitionName,role:"tooltip",tabindex:-1,onClick:K,onAnimationend:H,onTransitionend:H},{default:()=>[r.createVNode("div",{class:[!e.raw&&o.be("tip"),e.tipClass],style:M.value},[r.renderSlot(v,"default",P)]),!e.raw&&!e.noArrow&&r.createVNode("div",{ref:L,class:o.be("arrow")},null)]})]}}});module.exports=re;
//# sourceMappingURL=tooltip.cjs.map