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