@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.6 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';\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":["DtTooltip","tooltip","getUniqueString"],"mappings":";;;;AAGY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwB,IAAI,IAAI;AAAA,MACpC,MAAM;AAAA,MACN,YAAY,EAAEA,WAAAA,QAAAA,QAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;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,OAAQ,GAAG;AACT,eAAO;AAAA,UAAE;AAAA,UACP;AAAA,YACE,UAAU,EAAE,IAAI,2BAA4B;AAAA,UAC7C;AAAA,UACD;AAAA,YACE,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,qBAAO,EAAED,QAAAA,SAAW;AAAA,gBAClB,KAAK;AAAA,gBACL,OAAO;AAAA,kBACL;AAAA,kBACA;AAAA,kBACA,QAAQ;AAAA;AAAA;AAAA;AAAA,kBAIR,OAAO,QAAQ,IAAI,aAAa;AAAA,kBAChC,gBAAgB,wBAAwB,EAAE;AAAA,gBAC3C;AAAA,cACjB,CAAe;AAAA,YACf,CAAa;AAAA,UACF;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,OAAO,UAAU;AAEvC,QAAI,UAAU,cAAc;AAAA,MAC1B,KAAM,QAAQ,SAAS;AAErB,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,OAAQ,QAAQ,SAAS;AAEvB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,OAAQ,QAAQ;AACd,8BAAsB,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC9E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAKE,aAAe,gBAAA;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AACnD,4BAAsB,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACvE;AAAA,EACF;AACH;AAEA,MAAA,uBAAe;;;"}