UNPKG

ts-tooltip

Version:

tooltip package

2 lines (1 loc) 3.31 kB
(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("lodash-es"),require("@popperjs/core"),require("classnames")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es","@popperjs/core","classnames"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.index={},s.vue,s.lodashEs,s.core,s.classNames))})(this,function(s,e,j,T,$){"use strict";function M(r,p){const i=t=>{r.value&&t.target&&(r.value.contains(t.target)||p(t))};e.onMounted(()=>{document.addEventListener("click",i)}),e.onUnmounted(()=>{document.removeEventListener("click",i)})}function w(r){const i=`ts-${r}`;return{c:(...n)=>n.length?n.reduce((c,o)=>{if(Array.isArray(o)){const a=o[0],f=o[1];if(f==="E")return`${c}__${a}`;if(f==="M")return`${c}--${a}`}return`${c}-${o}`},i):i,ce:n=>[n,"E"],cm:n=>[n,"M"],cx:n=>e.computed(()=>$(n()))}}const d=e.defineComponent({name:"Tooltip",__name:"tooltip",props:{content:{},trigger:{default:"hover"},options:{},placement:{default:"top"},transition:{default:"fade"},openDelay:{default:0},closeDelay:{default:0},manual:{type:Boolean}},emits:["on-change","click-outside"],setup(r,{expose:p,emit:i}){const t=r,u=i,y=e.ref(),m=e.ref(),n=e.ref(),c=e.ref(!1);let o=null;const a=e.reactive({}),f=e.reactive({}),D=e.computed(()=>({placement:t.placement,modifiers:[{name:"offset",options:{offset:[0,7]}}],...t.options}));function N(){c.value=!0,u("on-change",!0)}function S(){c.value=!1,u("on-change",!1)}const E=j.debounce(N,t.openDelay),O=j.debounce(S,t.closeDelay);function k(){O.cancel(),E()}function g(){E.cancel(),O()}function B(){c.value?g():k()}M(y,()=>{t.trigger==="click"&&c.value&&!t.manual&&g(),c.value&&u("click-outside",!0)});function _(){t.trigger==="hover"?(a.mouseenter=k,f.mouseleave=g):t.trigger==="click"&&(a.click=B)}t.manual||_(),e.watch(()=>t.manual,l=>{l?(Object.assign(a,{}),Object.assign(f,{})):_()}),e.watch(()=>t.trigger,(l,h)=>{l!==h&&(Object.assign(a,{}),Object.assign(f,{}),_())}),e.watch(c,l=>{l&&(m.value&&n.value?o=T.createPopper(m.value,n.value,D.value):o==null||o.destroy())},{flush:"post"});const{c:b}=w("tooltip");return e.onUnmounted(()=>{o==null||o.destroy()}),p({show:k,hide:g}),(l,h)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"tooltipRef",ref:y,class:e.unref(b)()},e.toHandlers(f,!0)),[e.createElementVNode("div",e.mergeProps({ref_key:"triggerRef",ref:m,class:e.unref(b)(["trigger","M"])},e.toHandlers(a,!0)),[e.renderSlot(l.$slots,"default")],16),e.createVNode(e.Transition,{name:l.transition},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"popperRef",ref:n,class:e.normalizeClass(e.unref(b)(["popper","M"]))},[e.renderSlot(l.$slots,"content",{},()=>[e.createTextVNode(e.toDisplayString(l.content),1)]),h[0]||(h[0]=e.createElementVNode("div",{id:"popper-arrow","data-popper-arrow":""},null,-1))],2)):e.createCommentVNode("",!0)]),_:3},8,["name"])],16))}});d.install=r=>{d.name!=null&&r.component(d.name,d)};const x=Object.freeze(Object.defineProperty({__proto__:null,Tooltip:d},Symbol.toStringTag,{value:"Module"})),C={install(r){Object.entries(x).forEach(([p,i])=>{i.install?r.use(i):r.component(p,i)})},version:{version:"1.0.4"}.version};s.Tooltip=d,s.default=C,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});