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

Vue component library for Dialpad's design system Dialtone

import { getUniqueString as c } from "../../common/utils/index.js";
import n from "../tooltip/tooltip.js";
const v = {
  name: "dt-tooltip-directive",
  install(l) {
    const s = document.createElement("div");
    document.body.appendChild(s);
    const a = "top", p = new l({
      name: "DtTooltipDirectiveApp",
      components: { DtTooltip: n },
      data() {
        return {
          tooltips: []
        };
      },
      methods: {
        addOrUpdateTooltip(t, o, e) {
          const i = this.tooltips.findIndex((d) => d.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(t) {
        return t(
          "div",
          {
            domProps: { id: "dt-tooltip-directive-app" }
          },
          [
            this.tooltips.map(({ id: o, message: e, placement: i }) => t(n, {
              key: o,
              props: {
                message: e,
                placement: i,
                sticky: !0,
                /**
                 * Set the delay to false when running tests only.
                 */
                delay: process.env.NODE_ENV !== "test",
                externalAnchor: `[data-dt-tooltip-id="${o}"]`
              }
            }))
          ]
        );
      }
    });
    p.$mount(s), l.directive("dt-tooltip", {
      bind(t, o) {
        r(t, o);
      },
      update(t, o) {
        o.value !== o.oldValue && r(t, o);
      },
      unbind(t) {
        p.removeTooltip(t.getAttribute("data-dt-tooltip-id"));
      }
    });
    function r(t, o) {
      const e = t.getAttribute("data-dt-tooltip-id") || c(), i = o.value, d = o.arg || a;
      t.setAttribute("data-dt-tooltip-id", e), p.addOrUpdateTooltip(e, i, d);
    }
  }
};
export {
  v as DtTooltipDirective,
  v as default
};
//# sourceMappingURL=tooltip.js.map