@dialpad/dialtone/dist/vue3/lib/tooltip-directive/tooltip.js

Dialpad's Dialtone design system monorepo

import { getUniqueString as u } from "../../common/utils/index.js";
import { createApp as m, h as s, getCurrentInstance as v } from "vue";
import n from "../tooltip/tooltip.js";
const A = {
  name: "dt-tooltip-directive",
  install(a) {
    let p;
    const d = document.createElement("div");
    document.body.appendChild(d);
    const c = "top";
    m({
      name: "DtTooltipDirectiveApp",
      components: { DtTooltip: n },
      data() {
        return {
          tooltips: []
        };
      },
      mounted() {
        p = v();
      },
      methods: {
        addOrUpdateTooltip(t, o, e) {
          const i = this.tooltips.findIndex((l) => l.id === t);
          i !== -1 ? (this.tooltips[i].message = o, this.tooltips[i].placement = e) : this.tooltips.push({ id: t, message: o, placement: e });
        },
        removeTooltip(t) {
          this.tooltips = this.tooltips.filter((o) => o.id !== t);
        }
      },
      render() {
        return s(
          "div",
          this.tooltips.map(({ id: t, message: o, placement: e }) => s(n, {
            key: t,
            message: o,
            placement: e,
            sticky: !0,
            /**
             * Set the delay to false when running tests only.
             */
            delay: process.env.NODE_ENV !== "test",
            externalAnchor: `[data-dt-tooltip-id="${t}"]`
          }))
        );
      }
    }).mount(d), a.directive("dt-tooltip", {
      beforeMount(t, o) {
        r(t, o);
      },
      updated(t, o) {
        o.value !== o.oldValue && r(t, o);
      },
      unmounted(t) {
        p.ctx.removeTooltip(t.getAttribute("data-dt-tooltip-id"));
      }
    });
    function r(t, o) {
      const e = t.getAttribute("data-dt-tooltip-id") || u(), i = o.value, l = o.arg || c;
      t.setAttribute("data-dt-tooltip-id", e), p.ctx.addOrUpdateTooltip(e, i, l);
    }
  }
};
export {
  A as DtTooltipDirective,
  A as default
};
//# sourceMappingURL=tooltip.js.map