@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.49 kB
Source Map (JSON)
{"version":3,"file":"tooltip.cjs","sources":["../../../directives/tooltip_directive/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n name: 'dt-tooltip-directive',\n install (app) {\n let tooltipInstance;\n const mountPoint = document.createElement('div');\n document.body.appendChild(mountPoint);\n\n const DEFAULT_PLACEMENT = 'top';\n const DtTooltipDirectiveApp = createApp({\n name: 'DtTooltipDirectiveApp',\n components: { DtTooltip },\n data () {\n return {\n tooltips: [],\n };\n },\n\n mounted () {\n tooltipInstance = getCurrentInstance();\n },\n\n methods: {\n addOrUpdateTooltip (id, message, placement) {\n const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n if (index !== -1) {\n // Update existing tooltip\n this.tooltips[index].message = message;\n this.tooltips[index].placement = placement;\n } else {\n // Add new tooltip\n this.tooltips.push({ id, message, placement });\n }\n },\n\n removeTooltip (id) {\n this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n },\n },\n\n render () {\n return h('div',\n this.tooltips.map(({ id, message, placement }) => {\n return h(DtTooltip, {\n key: id,\n message,\n placement,\n sticky: true,\n /**\n * Set the delay to false when running tests only.\n */\n delay: process.env.NODE_ENV !== 'test',\n externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n });\n }),\n );\n },\n });\n\n DtTooltipDirectiveApp.mount(mountPoint);\n\n app.directive('dt-tooltip', {\n beforeMount (anchor, binding) {\n // Initial tooltip setup\n setupTooltip(anchor, binding);\n },\n updated (anchor, binding) {\n // Update tooltip on binding value change\n if (binding.value !== binding.oldValue) {\n setupTooltip(anchor, binding);\n }\n },\n unmounted (anchor) {\n tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n },\n });\n\n function setupTooltip (anchor, binding) {\n const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n const message = binding.value;\n const placement = binding.arg || DEFAULT_PLACEMENT;\n\n anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n }\n },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","app","tooltipInstance","mountPoint","DEFAULT_PLACEMENT","createApp","DtTooltip","getCurrentInstance","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":"iNAIaA,EAAqB,CAChC,KAAM,uBACN,QAASC,EAAK,CACZ,IAAIC,EACJ,MAAMC,EAAa,SAAS,cAAc,KAAK,EAC/C,SAAS,KAAK,YAAYA,CAAU,EAEpC,MAAMC,EAAoB,MACIC,EAAAA,UAAU,CACtC,KAAM,wBACN,WAAY,CAAA,UAAEC,EAAAA,OAAS,EACvB,MAAQ,CACN,MAAO,CACL,SAAU,CAAA,CACpB,CACM,EAEA,SAAW,CACTJ,EAAkBK,EAAAA,mBAAkB,CACtC,EAEA,QAAS,CACP,mBAAoBC,EAAIC,EAASC,EAAW,CAC1C,MAAMC,EAAQ,KAAK,SAAS,UAAUC,GAAWA,EAAQ,KAAOJ,CAAE,EAC9DG,IAAU,IAEZ,KAAK,SAASA,CAAK,EAAE,QAAUF,EAC/B,KAAK,SAASE,CAAK,EAAE,UAAYD,GAGjC,KAAK,SAAS,KAAK,CAAE,GAAAF,EAAI,QAAAC,EAAS,UAAAC,EAAW,CAEjD,EAEA,cAAeF,EAAI,CACjB,KAAK,SAAW,KAAK,SAAS,OAAOI,GAAWA,EAAQ,KAAOJ,CAAE,CACnE,CACR,EAEM,QAAU,CACR,OAAOK,EAAAA,EAAE,MACP,KAAK,SAAS,IAAI,CAAC,CAAE,GAAAL,EAAI,QAAAC,EAAS,UAAAC,KACzBG,EAAAA,EAAEP,EAAAA,QAAW,CAClB,IAAKE,EACL,QAAAC,EACA,UAAAC,EACA,OAAQ,GAIR,MAAO,QAAQ,IAAI,WAAa,OAChC,eAAgB,wBAAwBF,CAAE,IACxD,CAAa,CACF,CACX,CACM,CACN,CAAK,EAEqB,MAAML,CAAU,EAEtCF,EAAI,UAAU,aAAc,CAC1B,YAAaa,EAAQC,EAAS,CAE5BC,EAAaF,EAAQC,CAAO,CAC9B,EACA,QAASD,EAAQC,EAAS,CAEpBA,EAAQ,QAAUA,EAAQ,UAC5BC,EAAaF,EAAQC,CAAO,CAEhC,EACA,UAAWD,EAAQ,CACjBZ,EAAgB,IAAI,cAAcY,EAAO,aAAa,oBAAoB,CAAC,CAC7E,CACN,CAAK,EAED,SAASE,EAAcF,EAAQC,EAAS,CACtC,MAAME,EAAYH,EAAO,aAAa,oBAAoB,GAAKI,EAAAA,gBAAe,EACxET,EAAUM,EAAQ,MAClBL,EAAYK,EAAQ,KAAOX,EAEjCU,EAAO,aAAa,qBAAsBG,CAAS,EAEnDf,EAAgB,IAAI,mBAAmBe,EAAWR,EAASC,CAAS,CACtE,CACF,CACF"}