@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 4.5 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';\n\nexport const DtTooltipDirective = {\n name: 'dt-tooltip-directive',\n install (Vue) {\n const mountPoint = document.createElement('div');\n document.body.appendChild(mountPoint);\n\n const DEFAULT_PLACEMENT = 'top';\n const DtTooltipDirectiveApp = new Vue({\n name: 'DtTooltipDirectiveApp',\n components: { DtTooltip },\n data () {\n return {\n tooltips: [],\n };\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 (h) {\n return h('div',\n {\n domProps: { id: 'dt-tooltip-directive-app' },\n },\n [\n this.tooltips.map(({ id, message, placement }) => {\n return h(DtTooltip, {\n key: id,\n props: {\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 });\n\n DtTooltipDirectiveApp.$mount(mountPoint);\n\n Vue.directive('dt-tooltip', {\n bind (anchor, binding) {\n // Initial tooltip setup\n setupTooltip(anchor, binding);\n },\n update (anchor, binding) {\n // Update tooltip on binding value change\n if (binding.value !== binding.oldValue) {\n setupTooltip(anchor, binding);\n }\n },\n unbind (anchor) {\n DtTooltipDirectiveApp.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 DtTooltipDirectiveApp.addOrUpdateTooltip(tooltipId, message, placement);\n }\n },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","Vue","mountPoint","DEFAULT_PLACEMENT","DtTooltipDirectiveApp","DtTooltip","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":"gMAGaA,EAAqB,CAChC,KAAM,uBACN,QAASC,EAAK,CACZ,MAAMC,EAAa,SAAS,cAAc,KAAK,EAC/C,SAAS,KAAK,YAAYA,CAAU,EAEpC,MAAMC,EAAoB,MACpBC,EAAwB,IAAIH,EAAI,CACpC,KAAM,wBACN,WAAY,CAAA,UAAEI,EAAAA,OAAS,EACvB,MAAQ,CACN,MAAO,CACL,SAAU,CAAA,CACpB,CACM,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,OAAQK,EAAG,CACT,OAAOA,EAAE,MACP,CACE,SAAU,CAAE,GAAI,0BAA0B,CACtD,EACU,CACE,KAAK,SAAS,IAAI,CAAC,CAAE,GAAAL,EAAI,QAAAC,EAAS,UAAAC,KACzBG,EAAEN,EAAAA,QAAW,CAClB,IAAKC,EACL,MAAO,CACL,QAAAC,EACA,UAAAC,EACA,OAAQ,GAIR,MAAO,QAAQ,IAAI,WAAa,OAChC,eAAgB,wBAAwBF,CAAE,IAC5D,CACA,CAAe,CACF,CACb,CACA,CACM,CACN,CAAK,EAEDF,EAAsB,OAAOF,CAAU,EAEvCD,EAAI,UAAU,aAAc,CAC1B,KAAMW,EAAQC,EAAS,CAErBC,EAAaF,EAAQC,CAAO,CAC9B,EACA,OAAQD,EAAQC,EAAS,CAEnBA,EAAQ,QAAUA,EAAQ,UAC5BC,EAAaF,EAAQC,CAAO,CAEhC,EACA,OAAQD,EAAQ,CACdR,EAAsB,cAAcQ,EAAO,aAAa,oBAAoB,CAAC,CAC/E,CACN,CAAK,EAED,SAASE,EAAcF,EAAQC,EAAS,CACtC,MAAME,EAAYH,EAAO,aAAa,oBAAoB,GAAKI,EAAAA,gBAAe,EACxET,EAAUM,EAAQ,MAClBL,EAAYK,EAAQ,KAAOV,EAEjCS,EAAO,aAAa,qBAAsBG,CAAS,EACnDX,EAAsB,mBAAmBW,EAAWR,EAASC,CAAS,CACxE,CACF,CACF"}