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(),V=r.toRef(e,"placement"),l=r.ref(e.visible),d=r.ref(e.visible),B=r.toRef(e,"transfer"),k=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),S=r.computed(()=>typeof e.delay=="number"?new Array(2).fill(Math.max(e.delay,0)):e.delay.map(t=>Math.max(t,0))),L=r.ref(),m=r.computed(()=>{var t;return(t=L.value)==null?void 0:t.wrapper}),P=r.ref(),D=r.computed(()=>{if(!e.shift)return{mainAxis:!1,crossAxis:!1};if(e.shift===!0||e.shift==="both")return{mainAxis:!0,crossAxis:!0};const t=V.value.split("-")[0];return e.shift===(t==="top"||t==="bottom"?"vertical":"horizontal")?{mainAxis:!1,crossAxis:!0}:{mainAxis:!0,crossAxis:!1}}),{transferTo:I,updatePopper:h}=i.usePopper({placement:V,transfer:B,arrow:P,reference:N,shift:D,wrapper:p,popper:m});i.useClickOutside(H,p),i.useClickOutside(()=>{l.value&&!p.value&&H()},m);const M=r.computed(()=>e.width==="auto"?e.tipStyle:e.width==="trigger"?[{width:`${k.value}px`},e.tipStyle]:[{width:`${e.width}px`},e.tipStyle]),O=r.shallowReadonly({toggleVisible:n,updatePopper:h});i.useListener(a,"mouseenter",q),i.useListener(a,"mouseleave",R),i.useListener(a,"click",z),i.useListener(a,"focus",X),i.useListener(a,"blur",G),i.useListener(m,"mouseenter",q),i.useListener(m,"mouseleave",R),r.watch(()=>e.visible,t=>{l.value=t,t&&(d.value=!0,h())}),r.watch(()=>e.disabled,t=>{t&&n(!1)}),j({rendering:d,trigger:a,toggleVisible:n,updatePopper:h});function n(t=!l.value){l.value!==t&&(l.value=t,t&&(_(),d.value=!0,h()),$("update:visible",t),u.emitEvent(e.onToggle,t))}function _(){a.value&&(k.value=a.value.offsetWidth)}function b(){return A.value&&T||C.value&&x}function q(){e.disabled||(A.value&&(clearTimeout(g.hover),g.hover=setTimeout(()=>{T=!0,n(b())},S.value[0]??E.value)),u.emitEvent(e.onTipEnter))}function R(){e.disabled||(A.value&&(clearTimeout(g.hover),g.hover=setTimeout(()=>{T=!1,n(b())},S.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 H(){e.disabled||(u.emitEvent(e.onClickOutside),e.outsideClose&&e.trigger!=="custom"&&l.value&&(n(!1),u.emitEvent(e.onOutsideClose)))}function J(t){t?p.value=t.nextElementSibling:p.value=void 0}function W(){d.value=l.value}function K(t){t.stopPropagation()}return()=>{var F;const t=e.wrapper?e.wrapper===!0?"span":e.wrapper:null,c=(F=v.trigger)==null?void 0:F.call(v,O),s=c?c[0]:null,Q=()=>s?s.type===te||s.type===r.Fragment?t?r.createVNode("span",null,[s]):r.createVNode("span",y,[s]):(t||(s.props=r.mergeProps(s.props||{},y,{"aria-describedby":w.value})),s):null;return[s&&(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:L,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:W,onTransitionend:W},{default:()=>[r.createVNode("div",{class:[!e.raw&&o.be("tip"),e.tipClass],style:M.value},[r.renderSlot(v,"default",O)]),!e.raw&&!e.noArrow&&r.createVNode("div",{ref:P,class:o.be("arrow")},null)]})]}}});module.exports=re;
//# sourceMappingURL=tooltip.cjs.map