@dialpad/dialtone/dist/vue3/directives/tooltip/tooltip.js

Dialpad's Dialtone design system monorepo

import { getUniqueString } from "../../common/utils.js";
import { createApp, getCurrentInstance, h } from "vue";
import DtTooltip from "../../components/tooltip/tooltip.vue.js";
const DtTooltipDirective = {
  name: "dt-tooltip-directive",
  install(app) {
    let tooltipInstance;
    const mountPoint = document.createElement("div");
    document.body.appendChild(mountPoint);
    const DEFAULT_PLACEMENT = "top";
    const DtTooltipDirectiveApp = createApp({
      name: "DtTooltipDirectiveApp",
      components: { DtTooltip },
      data() {
        return {
          tooltips: []
        };
      },
      mounted() {
        tooltipInstance = getCurrentInstance();
      },
      methods: {
        addOrUpdateTooltip(id, message, placement) {
          const index = this.tooltips.findIndex((tooltip) => tooltip.id === id);
          if (index !== -1) {
            this.tooltips[index].message = message;
            this.tooltips[index].placement = placement;
          } else {
            this.tooltips.push({ id, message, placement });
          }
        },
        removeTooltip(id) {
          this.tooltips = this.tooltips.filter((tooltip) => tooltip.id !== id);
        }
      },
      render() {
        return h(
          "div",
          this.tooltips.map(({ id, message, placement }) => {
            return h(DtTooltip, {
              key: id,
              message,
              placement,
              sticky: true,
              /**
               * Set the delay to false when running tests only.
               */
              delay: process.env.NODE_ENV !== "test",
              externalAnchor: `[data-dt-tooltip-id="${id}"]`
            });
          })
        );
      }
    });
    DtTooltipDirectiveApp.mount(mountPoint);
    app.directive("dt-tooltip", {
      beforeMount(anchor, binding) {
        setupTooltip(anchor, binding);
      },
      updated(anchor, binding) {
        if (binding.value !== binding.oldValue) {
          setupTooltip(anchor, binding);
        }
      },
      unmounted(anchor) {
        tooltipInstance.ctx.removeTooltip(anchor.getAttribute("data-dt-tooltip-id"));
      }
    });
    function setupTooltip(anchor, binding) {
      const tooltipId = anchor.getAttribute("data-dt-tooltip-id") || getUniqueString();
      const message = binding.value;
      const placement = binding.arg || DEFAULT_PLACEMENT;
      anchor.setAttribute("data-dt-tooltip-id", tooltipId);
      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);
    }
  }
};
const DtTooltipDirective$1 = DtTooltipDirective;
export {
  DtTooltipDirective,
  DtTooltipDirective$1 as default
};
//# sourceMappingURL=tooltip.js.map