@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 6.62 kB
Source Map (JSON)
{"version":3,"file":"tooltip.cjs","sources":["../../../directives/tooltip_directive/tooltip.js"],"sourcesContent":["import { DtTooltip, TOOLTIP_DIRECTIONS } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport deepEqual from 'deep-equal';\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, tooltipConfig) {\n const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n if (index !== -1) {\n // Update existing tooltip\n this.tooltips.splice(index, 1, { id, ...tooltipConfig });\n } else {\n // Add new tooltip\n this.tooltips.push({ id, ...tooltipConfig });\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, ...tooltipProps }) => {\n return h(DtTooltip, {\n key: id,\n props: {\n ...tooltipProps,\n sticky: tooltipProps.sticky !== undefined ? tooltipProps.sticky : true,\n /**\n * Set the delay to false when running tests only.\n */\n delay: tooltipProps.delay !== undefined ? tooltipProps.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 // Use deep equality check to prevent infinite loops when objects are passed\n if (!deepEqual(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 if (binding.value === null || binding.value === undefined) {\n const tooltipId = anchor.getAttribute('data-dt-tooltip-id');\n if (tooltipId) {\n DtTooltipDirectiveApp.removeTooltip(tooltipId);\n }\n return;\n }\n\n const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n\n let tooltipConfig;\n if (typeof binding.value === 'string') {\n tooltipConfig = {\n message: binding.value,\n placement: binding.arg || DEFAULT_PLACEMENT,\n };\n } else if (typeof binding.value === 'object' && binding.value !== null) {\n tooltipConfig = {\n placement: binding.arg || binding.value.placement || DEFAULT_PLACEMENT,\n ...binding.value,\n };\n } else {\n console.error('DtTooltipDirective: binding value must be string, object, null or undefined');\n return;\n }\n\n Object.keys(binding.modifiers).forEach(modifier => {\n switch (modifier) {\n case 'inverted':\n tooltipConfig.inverted = true;\n break;\n case 'no-delay':\n tooltipConfig.delay = false;\n break;\n case 'no-transition':\n tooltipConfig.transition = false;\n break;\n default:\n if (TOOLTIP_DIRECTIONS.includes(modifier)) {\n tooltipConfig.placement = modifier;\n }\n break;\n }\n });\n\n anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n DtTooltipDirectiveApp.addOrUpdateTooltip(tooltipId, tooltipConfig);\n }\n },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","Vue","mountPoint","DEFAULT_PLACEMENT","DtTooltipDirectiveApp","DtTooltip","id","tooltipConfig","index","tooltip","h","tooltipProps","anchor","binding","setupTooltip","deepEqual","tooltipId","getUniqueString","modifier","TOOLTIP_DIRECTIONS"],"mappings":"sQAIaA,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,EAAe,CACrC,MAAMC,EAAQ,KAAK,SAAS,UAAUC,GAAWA,EAAQ,KAAOH,CAAE,EAC9DE,IAAU,GAEZ,KAAK,SAAS,OAAOA,EAAO,EAAG,CAAE,GAAAF,EAAI,GAAGC,EAAe,EAGvD,KAAK,SAAS,KAAK,CAAE,GAAAD,EAAI,GAAGC,CAAa,CAAE,CAE/C,EAEA,cAAeD,EAAI,CACjB,KAAK,SAAW,KAAK,SAAS,OAAOG,GAAWA,EAAQ,KAAOH,CAAE,CACnE,CACR,EAEM,OAAQI,EAAG,CACT,OAAOA,EAAE,MACP,CACE,SAAU,CAAE,GAAI,0BAA0B,CACtD,EACU,CACE,KAAK,SAAS,IAAI,CAAC,CAAE,GAAAJ,EAAI,GAAGK,KACnBD,EAAEL,EAAAA,QAAW,CAClB,IAAKC,EACL,MAAO,CACL,GAAGK,EACH,OAAQA,EAAa,SAAW,OAAYA,EAAa,OAAS,GAIlE,MAAOA,EAAa,QAAU,OAAYA,EAAa,MAAS,QAAQ,IAAI,WAAa,OACzF,eAAgB,wBAAwBL,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,CAGlBE,EAAUF,EAAQ,MAAOA,EAAQ,QAAQ,GAC5CC,EAAaF,EAAQC,CAAO,CAEhC,EACA,OAAQD,EAAQ,CACdR,EAAsB,cAAcQ,EAAO,aAAa,oBAAoB,CAAC,CAC/E,CACN,CAAK,EAED,SAASE,EAAcF,EAAQC,EAAS,CACtC,GAAIA,EAAQ,QAAU,MAAQA,EAAQ,QAAU,OAAW,CACzD,MAAMG,EAAYJ,EAAO,aAAa,oBAAoB,EACtDI,GACFZ,EAAsB,cAAcY,CAAS,EAE/C,MACF,CAEA,MAAMA,EAAYJ,EAAO,aAAa,oBAAoB,GAAKK,EAAAA,gBAAe,EAE9E,IAAIV,EACJ,GAAI,OAAOM,EAAQ,OAAU,SAC3BN,EAAgB,CACd,QAASM,EAAQ,MACjB,UAAWA,EAAQ,KAAOV,CACpC,UACiB,OAAOU,EAAQ,OAAU,UAAYA,EAAQ,QAAU,KAChEN,EAAgB,CACd,UAAWM,EAAQ,KAAOA,EAAQ,MAAM,WAAaV,EACrD,GAAGU,EAAQ,KACrB,MACa,CACL,QAAQ,MAAM,6EAA6E,EAC3F,MACF,CAEA,OAAO,KAAKA,EAAQ,SAAS,EAAE,QAAQK,GAAY,CACjD,OAAQA,EAAQ,CACd,IAAK,WACHX,EAAc,SAAW,GACzB,MACF,IAAK,WACHA,EAAc,MAAQ,GACtB,MACF,IAAK,gBACHA,EAAc,WAAa,GAC3B,MACF,QACMY,EAAAA,mBAAmB,SAASD,CAAQ,IACtCX,EAAc,UAAYW,GAE5B,KACZ,CACM,CAAC,EAEDN,EAAO,aAAa,qBAAsBI,CAAS,EACnDZ,EAAsB,mBAAmBY,EAAWT,CAAa,CACnE,CACF,CACF"}