vue-data-ui-hq/dist/Tooltip-ho4JxRm-.js

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

import { ref as r, onMounted as g, onUnmounted as x, computed as y, openBlock as b, createBlock as h, Teleport as S, createElementBlock as k, normalizeClass as $, normalizeStyle as C, unref as c, renderSlot as m, createElementVNode as B, createCommentVNode as F } from "vue";
import { s as N } from "./index-WrV3SAID.js";
function Y({ tooltip: e, chart: o, clientPosition: t, positionPreference: u = "center", defaultOffsetY: a = 24, blockShiftY: d = !1 }) {
  const l = r(0), s = r(a);
  if (e && o) {
    const { width: n, height: p } = e.getBoundingClientRect(), { right: i, left: f, bottom: v } = o.getBoundingClientRect();
    u === "center" && (t.x + n / 2 > i ? l.value = -n + (i - t.x) : t.x - n / 2 < f ? l.value = -n + (n - (t.x - f)) : l.value = -n / 2), u === "right" && (t.x + n > i ? l.value = -n + (i - t.x) : l.value = 0), u === "left" && (t.x < f + n ? l.value = -n + (n - (t.x - f)) : l.value = -n), t.y + p > v && !d && (s.value = -p - a);
  }
  return {
    top: t.y + s.value,
    left: t.x + l.value
  };
}
function w(e, o, t) {
  g(() => e.addEventListener(o, t)), x(() => e.removeEventListener(o, t));
}
function z() {
  const e = r(0), o = r(0);
  return w(window, "mousemove", (t) => {
    e.value = t.clientX, o.value = t.clientY;
  }), { x: e, y: o };
}
const E = ["innerHTML"], M = {
  __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
    }
  },
  setup(e) {
    const o = e, t = r(null), u = r(z(o.parent)), a = y(() => Y({
      tooltip: t.value,
      chart: o.parent,
      clientPosition: u.value,
      positionPreference: o.position,
      defaultOffsetY: o.offsetY,
      blockShiftY: o.blockShiftY
    })), d = y(() => N(o.backgroundColor, o.backgroundOpacity));
    return (l, s) => (b(), h(S, {
      to: e.isFullscreen ? e.parent : "body"
    }, [
      e.show ? (b(), k("div", {
        key: 0,
        ref_key: "tooltip",
        ref: t,
        class: $({ "vue-data-ui-custom-tooltip": e.isCustom, "vue-data-ui-tooltip": !e.isCustom }),
        style: C(`pointer-events:none;top:${c(a).top}px;left:${c(a).left}px;${e.isCustom ? "" : `background:${c(d)};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"),
        B("div", { innerHTML: e.content }, null, 8, E),
        m(l.$slots, "tooltip-after")
      ], 6)) : F("", !0)
    ], 8, ["to"]));
  }
};
export {
  M as _,
  z as u
};