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

Vue component library for Dialpad's design system Dialtone

import { getUniqueString as n } from "../../common/utils/index.js";
import c from "deep-equal";
import u from "../tooltip/tooltip.js";
import { TOOLTIP_DIRECTIONS as m } from "../tooltip/tooltip-constants.js";
const D = {
  name: "dt-tooltip-directive",
  install(r) {
    const d = document.createElement("div");
    document.body.appendChild(d);
    const p = "top", a = new r({
      name: "DtTooltipDirectiveApp",
      components: { DtTooltip: u },
      data() {
        return {
          tooltips: []
        };
      },
      methods: {
        addOrUpdateTooltip(e, t) {
          const o = this.tooltips.findIndex((i) => i.id === e);
          o !== -1 ? this.tooltips.splice(o, 1, { id: e, ...t }) : this.tooltips.push({ id: e, ...t });
        },
        removeTooltip(e) {
          this.tooltips = this.tooltips.filter((t) => t.id !== e);
        }
      },
      render(e) {
        return e(
          "div",
          {
            domProps: { id: "dt-tooltip-directive-app" }
          },
          [
            this.tooltips.map(({ id: t, ...o }) => e(u, {
              key: t,
              props: {
                ...o,
                sticky: o.sticky !== void 0 ? o.sticky : !0,
                /**
                 * Set the delay to false when running tests only.
                 */
                delay: o.delay !== void 0 ? o.delay : process.env.NODE_ENV !== "test",
                externalAnchor: `[data-dt-tooltip-id="${t}"]`
              }
            }))
          ]
        );
      }
    });
    a.$mount(d), r.directive("dt-tooltip", {
      bind(e, t) {
        s(e, t);
      },
      update(e, t) {
        c(t.value, t.oldValue) || s(e, t);
      },
      unbind(e) {
        a.removeTooltip(e.getAttribute("data-dt-tooltip-id"));
      }
    });
    function s(e, t) {
      if (t.value === null || t.value === void 0) {
        const l = e.getAttribute("data-dt-tooltip-id");
        l && a.removeTooltip(l);
        return;
      }
      const o = e.getAttribute("data-dt-tooltip-id") || n();
      let i;
      if (typeof t.value == "string")
        i = {
          message: t.value,
          placement: t.arg || p
        };
      else if (typeof t.value == "object" && t.value !== null)
        i = {
          placement: t.arg || t.value.placement || p,
          ...t.value
        };
      else {
        console.error("DtTooltipDirective: binding value must be string, object, null or undefined");
        return;
      }
      Object.keys(t.modifiers).forEach((l) => {
        switch (l) {
          case "inverted":
            i.inverted = !0;
            break;
          case "no-delay":
            i.delay = !1;
            break;
          case "no-transition":
            i.transition = !1;
            break;
          default:
            m.includes(l) && (i.placement = l);
            break;
        }
      }), e.setAttribute("data-dt-tooltip-id", o), a.addOrUpdateTooltip(o, i);
    }
  }
};
export {
  D as DtTooltipDirective,
  D as default
};
//# sourceMappingURL=tooltip.js.map