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 s=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:F,expose:$}){const o=s.useNameHelper("tooltip"),e=s.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=s.useId(),E=s.useHoverDelay(),{timer:g}=i.useSetTimeout(),j=r.toRef(e,"placement"),l=r.ref(e.visible),d=r.ref(e.visible),B=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 c;const t=((c=e.virtual)==null?void 0:c.$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}),a=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(),D=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:j,transfer:B,arrow:L,reference:N,shift:D,wrapper:p,popper:m});i.useClickOutside(R,p),i.useClickOutside(()=>{l.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(a,"mouseenter",O),i.useListener(a,"mouseleave",q),i.useListener(a,"click",z),i.useListener(a,"focus",X),i.useListener(a,"blur",G),i.useListener(m,"mouseenter",O),i.useListener(m,"mouseleave",q),r.watch(()=>e.visible,t=>{l.value=t,t&&(d.value=!0,h())}),r.watch(()=>e.disabled,t=>{t&&n(!1)}),$({rendering:d,trigger:a,toggleVisible:n,updatePopper:h});function n(t=!l.value){l.value!==t&&(l.value=t,t&&(_(),d.value=!0,h()),F("update:visible",t),s.emitEvent(e.onToggle,t))}function _(){a.value&&(V.value=a.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)),s.emitEvent(e.onTipEnter))}function q(){e.disabled||(A.value&&(clearTimeout(g.hover),g.hover=setTimeout(()=>{T=!1,n(b())},k.value[1]??E.value)),s.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||(s.emitEvent(e.onClickOutside),e.outsideClose&&e.trigger!=="custom"&&l.value&&(n(!1),s.emitEvent(e.onOutsideClose)))}function J(t){t?p.value=t.nextElementSibling:p.value=void 0}function H(){d.value=l.value}function K(t){t.stopPropagation()}return()=>{var W;const t=e.wrapper?e.wrapper===!0?"span":e.wrapper:null,c=(W=v.trigger)==null?void 0:W.call(v,P),u=c?c[0]:null,Q=()=>u?u.type===te||u.type===r.Fragment?t?r.createVNode("span",null,[u]):r.createVNode("span",y,[u]):(t||(u.props=r.mergeProps(u.props||{},y,{"aria-describedby":w.value})),u):null;return[u&&(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(c)?c:{default:()=>[c]}):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:l.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