@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.59 kB
Source Map (JSON)
{"version":3,"file":"tooltip.cjs","sources":["../../../directives/tooltip/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":["createApp","DtTooltip","getCurrentInstance","tooltip","h","getUniqueString"],"mappings":";;;;;AAIY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,QAAI;AACJ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwBA,IAAAA,UAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAEC,WAAAA,QAAAA,QAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,0BAAkBC,IAAkB,mBAAA;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoB,IAAI,SAAS,WAAW;AAC1C,gBAAM,QAAQ,KAAK,SAAS,UAAU,CAAAC,aAAWA,SAAQ,OAAO,EAAE;AAClE,cAAI,UAAU,IAAI;AAEhB,iBAAK,SAAS,KAAK,EAAE,UAAU;AAC/B,iBAAK,SAAS,KAAK,EAAE,YAAY;AAAA,UAC7C,OAAiB;AAEL,iBAAK,SAAS,KAAK,EAAE,IAAI,SAAS,UAAS,CAAE;AAAA,UAC9C;AAAA,QACF;AAAA,QAED,cAAe,IAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,CAAAA,aAAWA,SAAQ,OAAO,EAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAOC,IAAC;AAAA,UAAC;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,mBAAOA,IAAAA,EAAEH,QAAAA,SAAW;AAAA,cAClB,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,QAAQ;AAAA;AAAA;AAAA;AAAA,cAIR,OAAO,QAAQ,IAAI,aAAa;AAAA,cAChC,gBAAgB,wBAAwB,EAAE;AAAA,YACxD,CAAa;AAAA,UACb,CAAW;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,MAAM,UAAU;AAEtC,QAAI,UAAU,cAAc;AAAA,MAC1B,YAAa,QAAQ,SAAS;AAE5B,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,QAAS,QAAQ,SAAS;AAExB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,UAAW,QAAQ;AACjB,wBAAgB,IAAI,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAKI,aAAe,gBAAA;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AAEnD,sBAAgB,IAAI,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACrE;AAAA,EACF;AACH;AAEA,MAAA,uBAAe;;;"}