vue-data-ui/dist/Tooltip-BMOddG-M.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { ref as d, onMounted as k, onUnmounted as g, watch as p, nextTick as F, computed as x, createBlock as S, openBlock as h, Teleport as $, createElementBlock as B, createCommentVNode as C, normalizeStyle as w, normalizeClass as N, renderSlot as m, createElementVNode as Y } from "vue";
import { s as z } from "./index-q-LPw2IT.js";
function M({ tooltip: e, chart: a, clientPosition: t, positionPreference: s = "center", defaultOffsetY: c = 24, blockShiftY: u = !1 }) {
  const o = d(0), i = d(c);
  if (e && a) {
    const { width: n, height: v } = e.getBoundingClientRect(), { right: f, left: l, bottom: r } = a.getBoundingClientRect();
    s === "center" && (t.x + n / 2 > f ? o.value = -n + (f - t.x) : t.x - n / 2 < l ? o.value = -n + (n - (t.x - l)) : o.value = -n / 2), s === "right" && (t.x + n > f ? o.value = -n + (f - t.x) : o.value = 0), s === "left" && (t.x < l + n ? o.value = -n + (n - (t.x - l)) : o.value = -n), t.y + v > r && !u && (i.value = -v - c);
  }
  return {
    top: t.y + i.value,
    left: t.x + o.value
  };
}
function T(e, a, t) {
  k(() => e.addEventListener(a, t)), g(() => e.removeEventListener(a, t));
}
function E() {
  const e = d(0), a = d(0);
  return T(window, "mousemove", (t) => {
    e.value = t.clientX, a.value = t.clientY;
  }), { x: e, y: a };
}
const L = ["aria-hidden"], O = ["innerHTML"], b = 0.18, A = {
  __name: "Tooltip",
  props: {
    backgroundColor: {
      type: String,
      default: "#FFFFFF"
    },
    color: {
      type: String,
      default: "#000000"
    },
    content: String,
    maxWidth: {
      type: String,
      default: "300px"
    },
    parent: {
      type: Object
    },
    show: {
      type: Boolean,
      default: !1
    },
    isCustom: {
      type: Boolean,
      default: !1
    },
    fontSize: {
      type: [Number, String],
      default: 14
    },
    borderRadius: {
      type: Number,
      default: 4
    },
    borderColor: {
      type: String,
      default: "#e1e5e8"
    },
    borderWidth: {
      type: Number,
      default: 1
    },
    backgroundOpacity: {
      type: Number,
      default: 100
    },
    position: {
      type: String,
      default: "center"
    },
    offsetY: {
      type: Number,
      default: 24
    },
    blockShiftY: {
      type: Boolean,
      default: !1
    },
    isFullscreen: {
      type: Boolean,
      default: !1
    },
    smooth: {
      type: Boolean,
      default: !0
    },
    backdropFilter: {
      type: Boolean,
      default: !0
    }
  },
  setup(e) {
    const a = e, t = d(null), { x: s, y: c } = E(a.parent), u = d({ x: 0, y: 0 }), o = d({ x: 0, y: 0 });
    let i = null;
    function n() {
      if (!a.smooth) {
        o.value.x = u.value.x, o.value.y = u.value.y;
        return;
      }
      o.value.x += (u.value.x - o.value.x) * b, o.value.y += (u.value.y - o.value.y) * b, i = requestAnimationFrame(n);
    }
    p([s, c], ([l, r]) => {
      u.value.x = l, u.value.y = r, a.smooth || (o.value.x = l, o.value.y = r);
    }), p(() => a.show, async (l) => {
      if (l) {
        const r = s.value, y = c.value;
        u.value.x = r, u.value.y = y, o.value.x = r, o.value.y = y, await F(), i || n();
      } else
        i && (cancelAnimationFrame(i), i = null);
    }), g(() => {
      i && cancelAnimationFrame(i);
    });
    const v = x(() => {
      const l = M({
        tooltip: t.value,
        chart: a.parent,
        clientPosition: o.value,
        positionPreference: a.position,
        defaultOffsetY: a.offsetY,
        blockShiftY: a.blockShiftY
      });
      return {
        top: Math.round(l.top),
        left: Math.round(l.left)
      };
    }), f = x(() => z(a.backgroundColor, a.backgroundOpacity));
    return (l, r) => (h(), S($, {
      to: e.isFullscreen ? e.parent : "body"
    }, [
      e.show ? (h(), B("div", {
        key: 0,
        ref_key: "tooltip",
        ref: t,
        role: "tooltip",
        "aria-hidden": !e.show,
        "aria-live": "polite",
        class: N({ "vue-data-ui-custom-tooltip": e.isCustom, "vue-data-ui-tooltip": !e.isCustom, "vue-data-ui-tooltip-backdrop": e.backdropFilter }),
        style: w(`
                pointer-events:none;
                top:${v.value.top}px;
                left:${v.value.left}px;
                ${e.isCustom ? "" : `background:${f.value};color:${e.color};max-width:${e.maxWidth};font-size:${e.fontSize}px`};
                border-radius:${e.borderRadius}px;
                border:${e.borderWidth}px solid ${e.borderColor};
                z-index:2147483647;
            `)
      }, [
        m(l.$slots, "tooltip-before"),
        m(l.$slots, "default"),
        Y("div", { innerHTML: e.content }, null, 8, O),
        m(l.$slots, "tooltip-after")
      ], 14, L)) : C("", !0)
    ], 8, ["to"]));
  }
};
export {
  A as default
};