@dialpad/dialtone/dist/vue3/lib/tooltip/tooltip.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./tooltip-constants.cjs"),d=require("../popover/popover-constants.cjs"),s=require("../../common/utils/index.cjs"),l=require("../popover/tippy-utils.cjs"),o=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),c={compatConfig:{MODE:3},name:"DtTooltip",props:{id:{type:String,default(){return s.getUniqueString()}},fallbackPlacements:{type:Array,default:()=>["auto"]},inverted:{type:Boolean,default:!1},offset:{type:Array,default:()=>[0,12]},placement:{type:String,default:"top",validator(e){return a.TOOLTIP_DIRECTIONS.includes(e)}},sticky:{type:[Boolean,String],default:!0,validator:e=>a.TOOLTIP_STICKY_VALUES.includes(e)},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>d.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},contentClass:{type:[String,Object,Array],default:""},message:{type:String,default:""},enabled:{type:Boolean,default:!0},show:{type:Boolean,default:null},transition:{type:Boolean,default:!0},delay:{type:Boolean,default:!0},theme:{type:String,default:null},externalAnchor:{type:String,default:null}},emits:["shown","update:show"],data(){return{TOOLTIP_KIND_MODIFIERS:a.TOOLTIP_KIND_MODIFIERS,hasSlotContent:s.hasSlotContent,tip:null,inTimer:null,internalShow:!1,currentPlacement:this.placement}},computed:{tippyProps(){return{offset:this.offset,delay:this.delay?a.TOOLTIP_DELAY_MS:!1,placement:this.placement,sticky:this.sticky,theme:this.inverted?"inverted":this.theme,animation:this.transition?"fade":!1,onShown:e=>this.onShow(e,"onShown"),onShow:e=>this.onShow(e,"onShow"),onHidden:this.onHide,popperOptions:l.getPopperOptions({fallbackPlacements:this.fallbackPlacements,hasHideModifierEnabled:!0})}},anchor(){return this.externalAnchor?document.body.querySelector(this.externalAnchor):l.getAnchor(this.$refs.anchor)}},watch:{tippyProps:{handler:"setProps",deep:!0},show:{handler:function(e){e!==null&&this.enabled&&(this.internalShow=e)},immediate:!0},internalShow(e){e?(this.setProps(),this.tip.show()):this.tip.hide()},sticky(e){this.tip.setProps({sticky:e})}},async mounted(){!this.enabled&&this.show!=null&&(console.warn("Tooltip: You cannot use both the enabled and show props at the same time."),console.warn("The show prop will be ignored.")),this.tip=l.createTippy(this.anchor,this.initOptions()),this.externalAnchor&&(await s.flushPromises(),this.addExternalAnchorEventListeners()),s.warnIfUnmounted(s.returnFirstEl(this.$el),this.$options.name)},beforeUnmount(){var e,t;this.externalAnchor&&this.removeExternalAnchorEventListeners(),(e=this.anchor)!=null&&e._tippy&&((t=this.tip)==null||t.destroy())},methods:{calculateAnchorZindex(){return s.returnFirstEl(this.$el).getRootNode().querySelector(`.d-modal[aria-hidden="false"],
          .d-modal--transparent[aria-hidden="false"],
          .d-modal:not([aria-hidden]),
          .d-modal--transparent:not([aria-hidden])`)||s.returnFirstEl(this.$el).closest(".d-zi-drawer")?651:400},hasVisibleFocus(){return this.anchor.matches(":focus-visible")},onEnterAnchor(e){this.enabled&&(this.delay&&this.inTimer===null?this.inTimer=setTimeout(()=>{this.triggerShow(e)},a.TOOLTIP_DELAY_MS):this.triggerShow(e))},triggerShow(e){e.type==="focusin"?this.show===null&&this.hasVisibleFocus()&&(this.internalShow=!0):this.show===null&&(this.internalShow=!0)},onLeaveAnchor(e){e.type==="keydown"&&e.code!=="Escape"||(clearTimeout(this.inTimer),this.inTimer=null,this.triggerHide())},triggerHide(){this.show===null&&(this.internalShow=!1)},onChangePlacement(e){this.currentPlacement=e},onHide(){var e;(e=this.tip)==null||e.unmount(),this.$emit("shown",!1),this.show!==null&&this.$emit("update:show",!1)},onShow(e,t){if(!this.tooltipHasContent(e))return!1;this.transition&&t==="onShow"||(this.$emit("shown",!0),this.show!==null&&this.$emit("update:show",!0))},setProps(){var e,t;this.tip&&this.tip.setProps&&this.tip.setProps({...this.tippyProps,appendTo:this.appendTo==="body"?(t=(e=this.anchor)==null?void 0:e.getRootNode())==null?void 0:t.querySelector("body"):this.appendTo,zIndex:this.calculateAnchorZindex()})},onMount(){this.setProps()},tooltipHasContent(e){return e.props.content.textContent.trim().length!==0},initOptions(){return{content:this.$refs.content,arrow:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="7"><path d="M 14.5,7 8,0 1.5,7 Z"/></svg>',duration:180,interactive:!1,trigger:"manual",hideOnClick:!1,touch:!1,onMount:this.onMount,showOnCreate:this.internalShow,popperOptions:l.getPopperOptions({hasHideModifierEnabled:!0})}},addExternalAnchorEventListeners(){["focusin","mouseenter"].forEach(e=>{var t;(t=this.anchor)==null||t.addEventListener(e,n=>this.onEnterAnchor(n))}),["focusout","mouseleave","keydown"].forEach(e=>{var t;(t=this.anchor)==null||t.addEventListener(e,n=>this.onLeaveAnchor(n))})},removeExternalAnchorEventListeners(){["focusin","mouseenter"].forEach(e=>{var t;(t=this.anchor)==null||t.removeEventListener(e,n=>this.onEnterAnchor(n))}),["focusout","mouseleave","keydown"].forEach(e=>{var t;(t=this.anchor)==null||t.removeEventListener(e,n=>this.onLeaveAnchor(n))})}}},p={"data-qa":"dt-tooltip-container"},f=["id"];function m(e,t,n,y,h,i){return o.openBlock(),o.createElementBlock("div",p,[n.externalAnchor?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("span",{key:0,ref:"anchor","data-qa":"dt-tooltip-anchor",onFocusin:t[0]||(t[0]=(...r)=>i.onEnterAnchor&&i.onEnterAnchor(...r)),onFocusout:t[1]||(t[1]=(...r)=>i.onLeaveAnchor&&i.onLeaveAnchor(...r)),onMouseenter:t[2]||(t[2]=(...r)=>i.onEnterAnchor&&i.onEnterAnchor(...r)),onMouseleave:t[3]||(t[3]=(...r)=>i.onLeaveAnchor&&i.onLeaveAnchor(...r)),onKeydown:t[4]||(t[4]=o.withKeys((...r)=>i.onLeaveAnchor&&i.onLeaveAnchor(...r),["esc"]))},[o.renderSlot(e.$slots,"anchor")],544)),o.createElementVNode("div",{id:n.id,ref:"content","data-qa":"dt-tooltip",class:o.normalizeClass(["d-tooltip",{[h.TOOLTIP_KIND_MODIFIERS.inverted]:n.inverted},n.contentClass])},[o.renderSlot(e.$slots,"default",{},()=>[o.createTextVNode(o.toDisplayString(n.message),1)])],10,f)])}const w=u._(c,[["render",m]]);exports.default=w;
//# sourceMappingURL=tooltip.cjs.map