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

Dialpad's Dialtone design system monorepo

Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../popover/tippy-utils.cjs`),r=require(`./tooltip-constants.cjs`),i=require(`../popover/popover-constants.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtTooltip`,props:{id:{type:String,default(){return e.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 r.TOOLTIP_DIRECTIONS.includes(e)}},sticky:{type:[Boolean,String],default:!0,validator:e=>r.TOOLTIP_STICKY_VALUES.includes(e)},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>i.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},externalAnchorElement:{type:HTMLElement,default:null}},emits:[`shown`,`update:show`],data(){return{TOOLTIP_KIND_MODIFIERS:r.TOOLTIP_KIND_MODIFIERS,hasSlotContent:e.hasSlotContent,tip:null,inTimer:null,internalShow:!1,currentPlacement:this.placement}},computed:{tippyProps(){return{offset:this.offset,delay:this.delay?300:!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:n.getPopperOptions({fallbackPlacements:this.fallbackPlacements,hasHideModifierEnabled:!0,onChangePlacement:this.onChangePlacement})}},anchor(){return this.externalAnchorElement?this.externalAnchorElement:this.externalAnchor?document.body.querySelector(this.externalAnchor):n.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){!this.tip||!this.anchor||(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=n.createTippy(this.anchor,this.initOptions()),(this.externalAnchor||this.externalAnchorElement)&&(await e.flushPromises(),this.addExternalAnchorEventListeners()),e.warnIfUnmounted(e.returnFirstEl(this.$el),this.$options.name)},beforeUnmount(){(this.externalAnchor||this.externalAnchorElement)&&this.removeExternalAnchorEventListeners(),this.anchor?._tippy&&this.tip?.destroy()},methods:{calculateAnchorZindex(){return e.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])`)||e.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)},300):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(){this.tip?.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(){!this.tip||!this.tip.setProps||!this.anchor||this.tip&&this.tip.setProps&&this.tip.setProps({...this.tippyProps,appendTo:this.appendTo===`body`?this.anchor?.getRootNode()?.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:n.getPopperOptions({hasHideModifierEnabled:!0})}},addExternalAnchorEventListeners(){[`focusin`,`mouseenter`].forEach(e=>{this.anchor?.addEventListener(e,e=>this.onEnterAnchor(e))}),[`focusout`,`mouseleave`,`keydown`].forEach(e=>{this.anchor?.addEventListener(e,e=>this.onLeaveAnchor(e))})},removeExternalAnchorEventListeners(){[`focusin`,`mouseenter`].forEach(e=>{this.anchor?.removeEventListener(e,e=>this.onEnterAnchor(e))}),[`focusout`,`mouseleave`,`keydown`].forEach(e=>{this.anchor?.removeEventListener(e,e=>this.onLeaveAnchor(e))})}}},s={"data-qa":`dt-tooltip-container`},c=[`id`];function l(e,t,n,r,i,o){return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,s,[!n.externalAnchor&&!n.externalAnchorElement?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,ref:`anchor`,"data-qa":`dt-tooltip-anchor`,onFocusin:t[0]||(t[0]=(...e)=>o.onEnterAnchor&&o.onEnterAnchor(...e)),onFocusout:t[1]||(t[1]=(...e)=>o.onLeaveAnchor&&o.onLeaveAnchor(...e)),onMouseenter:t[2]||(t[2]=(...e)=>o.onEnterAnchor&&o.onEnterAnchor(...e)),onMouseleave:t[3]||(t[3]=(...e)=>o.onLeaveAnchor&&o.onLeaveAnchor(...e)),onKeydown:t[4]||(t[4]=(0,a.withKeys)((...e)=>o.onLeaveAnchor&&o.onLeaveAnchor(...e),[`esc`]))},[(0,a.renderSlot)(e.$slots,`anchor`)],544)):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`div`,{id:n.id,ref:`content`,"data-qa":`dt-tooltip`,class:(0,a.normalizeClass)([`d-tooltip`,{[i.TOOLTIP_KIND_MODIFIERS.inverted]:n.inverted},n.contentClass])},[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.message),1)])],10,c)])}var u=t.t(o,[[`render`,l]]);exports.default=u;
//# sourceMappingURL=tooltip.cjs.map