UNPKG

buefy

Version:

Lightweight UI components for Vue.js (v3) based on Bulma

buefy.org

buefy/buefy

3 lines (2 loc) • 7.48 kB
1
2
3
/*! Buefy v3.0.2 | MIT License | github.com/buefy/buefy */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Tooltip={},e.Vue)}(this,(function(e,t){"use strict";let i="is-primary",s=null,o=null;const n=["is-auto","is-top","is-bottom","is-left","is-right"];var l=((e,t)=>{const i=e.__vccOpts||e;for(const[e,s]of t)i[e]=s;return i})(t.defineComponent({name:"BTooltip",props:{active:{type:Boolean,default:!0},type:{type:String,default:()=>i},label:String,delay:{type:Number,default:()=>s},closeDelay:{type:Number,default:()=>o},position:{type:String,default:"is-auto",validator:e=>n.indexOf(e)>-1},triggers:{type:Array,default:()=>["hover"]},always:Boolean,square:Boolean,dashed:Boolean,multilined:Boolean,size:{type:String,default:"is-medium"},appendToBody:Boolean,animated:{type:Boolean,default:!0},animation:{type:String,default:"fade"},contentClass:String,autoClose:{type:[Array,Boolean],default:!0}},emits:{close:()=>!0,open:()=>!0},data:()=>({isActive:!1,triggerStyle:{},timer:void 0,_bodyEl:void 0,resizeObserver:void 0,resizeListener:void 0,timeOutID:void 0,controller:void 0,dynamicPosition:void 0}),computed:{rootClasses(){return["b-tooltip",this.type,this.dynamicPosition,this.size,{"is-square":this.square,"is-always":this.always,"is-multiline":this.multilined,"is-dashed":this.dashed}]},newAnimation(){return this.animated?this.animation:void 0}},watch:{isActive(){this.isActive?this.$emit("open"):this.$emit("close"),this.appendToBody&&this.updateAppendToBody()}},methods:{computePosition(){if("is-auto"!==this.position)return this.position;const e=this.$refs.trigger.getBoundingClientRect(),t=e.top,i=window.innerHeight-e.bottom,s=e.left,o=window.innerWidth-e.right,n=Math.min(t,i,s,o);return n===t?"is-bottom":n===i?"is-top":n===s?"is-right":"is-left"},updateAppendToBody(){const e=this.$refs.tooltip,t=this.$refs.trigger;if(e&&t){const e=this.$data._bodyEl.children[0];e.classList.forEach((t=>e.classList.remove(t))),this.rootClasses.forEach((t=>{if("object"==typeof t){const i=t;for(const t in i)i[t]&&e.classList.add(t)}else e.classList.add(t)}));const i=t.getBoundingClientRect(),s=i.top+window.scrollY,o=i.left+window.scrollX;switch(e.style.position="absolute",this.dynamicPosition=this.computePosition(),this.dynamicPosition){case"is-top":e.style.width=`${t.clientWidth}px`,e.style.height="0px",e.style.top="0px",e.style.left="0px";break;case"is-bottom":e.style.width=`${t.clientWidth}px`,e.style.height="0px",e.style.top=`${t.clientHeight}px`,e.style.left="0px";break;case"is-left":e.style.width="0px",e.style.height=`${t.clientHeight}px`,e.style.top="0px",e.style.left="0px";break;case"is-right":e.style.width="0px",e.style.height=`${t.clientHeight}px`,e.style.top="0px",e.style.left=`${t.clientWidth}px`}const n=this.$data._bodyEl;n.style.position="absolute",n.style.top=`${s}px`,n.style.left=`${o}px`,n.style.width="0px",n.style.zIndex=this.isActive||this.always?"99":"-1",this.triggerStyle={zIndex:this.isActive||this.always?"100":void 0}}},onClick(){this.triggers.indexOf("click")<0||this.$nextTick((()=>{this.timeOutID=setTimeout((()=>this.open()))}))},onHover(){this.triggers.indexOf("hover")<0||this.open()},onContextMenu(e){this.triggers.indexOf("contextmenu")<0||(e.preventDefault(),this.open())},onFocus(){this.triggers.indexOf("focus")<0||this.open()},open(){this.dynamicPosition=this.computePosition(),this.delay?this.timer=setTimeout((()=>{this.isActive=!0,this.timer=void 0}),this.delay):this.isActive=!0},close(){"boolean"==typeof this.autoClose&&(this.autoClose&&this.timer&&clearTimeout(this.timer),this.closeDelay?this.timer=setTimeout((()=>{this.isActive=!this.autoClose,this.timer=void 0}),this.closeDelay):this.isActive=!this.autoClose)},clickedOutside(e){if(this.isActive&&Array.isArray(this.autoClose)){if(this.autoClose.includes("outside")&&!this.isInWhiteList(e.target))return void(this.isActive=!1);this.autoClose.includes("inside")&&this.isInWhiteList(e.target)&&(this.isActive=!1)}},keyPress({key:e}){!this.isActive||"Escape"!==e&&"Esc"!==e||Array.isArray(this.autoClose)&&this.autoClose.indexOf("escape")>=0&&(this.isActive=!1)},isInWhiteList(e){if(e===this.$refs.content)return!0;if(null!=this.$refs.content){const t=this.$refs.content.querySelectorAll("*");for(const i of t)if(e===i)return!0}return!1}},mounted(){if(this.appendToBody&&"undefined"!=typeof window){this.controller=new window.AbortController,this.$data._bodyEl=function(e){const t=document.createElement("div");t.style.position="absolute",t.style.left="0px",t.style.top="0px",t.style.width="100%";const i=document.createElement("div");return t.appendChild(i),i.appendChild(e),document.body.appendChild(t),t}(this.$refs.content),this.updateAppendToBody();const e=this.$el.closest(".animation-content");if(null!=e){const t=()=>{this.updateAppendToBody(),e.removeEventListener("transitionend",t)};e.addEventListener("transitionend",t,{signal:this.controller.signal})}this.resizeListener=()=>this.updateAppendToBody(),window.addEventListener("resize",this.resizeListener),this.resizeObserver=new ResizeObserver(this.resizeListener),null!=this.$el.parentNode&&this.$el.parentNode.nodeType===Node.ELEMENT_NODE&&this.resizeObserver.observe(this.$el.parentNode)}this.always&&(this.dynamicPosition=this.computePosition())},created(){"undefined"!=typeof window&&(document.addEventListener("click",this.clickedOutside),document.addEventListener("keyup",this.keyPress))},beforeUnmount(){var e;"undefined"!=typeof window&&(document.removeEventListener("click",this.clickedOutside),document.removeEventListener("keyup",this.keyPress)),null!=this.resizeListener&&window.removeEventListener("resize",this.resizeListener),null!=this.resizeObserver&&this.resizeObserver.disconnect(),this.appendToBody&&(void 0!==(e=this.$data._bodyEl).remove?e.remove():void 0!==e.parentNode&&null!==e.parentNode&&e.parentNode.removeChild(e)),null!=this.controller&&this.controller.abort(),clearTimeout(this.timer),clearTimeout(this.timeOutID)}}),[["render",function(e,i,s,o,n,l){return t.openBlock(),t.createElementBlock("div",{ref:"tooltip",class:t.normalizeClass(e.rootClasses)},[t.createVNode(t.Transition,{name:e.newAnimation,persisted:""},{default:t.withCtx((()=>[t.withDirectives(t.createElementVNode("div",{ref:"content",class:t.normalizeClass(["tooltip-content",e.contentClass])},[e.label?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode(t.toDisplayString(e.label),1)],64)):e.$slots.content?t.renderSlot(e.$slots,"content",{key:1}):t.createCommentVNode("v-if",!0)],2),[[t.vShow,e.active&&(e.isActive||e.always)]])])),_:3},8,["name"]),t.createElementVNode("div",{ref:"trigger",class:"tooltip-trigger",style:t.normalizeStyle(e.triggerStyle),onClick:i[0]||(i[0]=(...t)=>e.onClick&&e.onClick(...t)),onContextmenu:i[1]||(i[1]=(...t)=>e.onContextMenu&&e.onContextMenu(...t)),onMouseenter:i[2]||(i[2]=(...t)=>e.onHover&&e.onHover(...t)),onFocusCapture:i[3]||(i[3]=(...t)=>e.onFocus&&e.onFocus(...t)),onBlurCapture:i[4]||(i[4]=(...t)=>e.close&&e.close(...t)),onMouseleave:i[5]||(i[5]=(...t)=>e.close&&e.close(...t))},[t.renderSlot(e.$slots,"default",{ref:"slot"})],36)],2)}]]);const r={install(e){((e,t)=>{const i=t.name;if(null==i)throw new Error("Buefy.registerComponent: missing component name");e.component(i,t)})(e,l)}};e.BTooltip=l,e.default=r,Object.defineProperty(e,"__esModule",{value:!0})}));