vue-data-ui/dist/SparkTooltip-Diyt3BTN.js

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

import { toRef as c, ref as a, computed as v, onMounted as m, watch as y, createElementBlock as b, openBlock as g, normalizeStyle as x, renderSlot as k, nextTick as S } from "vue";
import { s as _, ap as i } from "./index-q-LPw2IT.js";
import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const R = {
  __name: "SparkTooltip",
  props: {
    svgRef: { type: Object },
    x: { type: Number, required: !0 },
    y: { type: Number, required: !0 },
    prevX: { type: Number, required: !0 },
    prevY: { type: Number, required: !0 },
    offsetY: { type: Number, default: 0 },
    background: { type: String },
    backgroundOpacity: { type: Number, default: 100 },
    borderRadius: { type: Number, default: 2 },
    borderWidth: { type: Number, default: 0 },
    borderColor: { type: String, default: "#FFFFFF" },
    color: { type: String },
    fontSize: { type: Number }
  },
  setup(d) {
    const e = d, u = c(e.svgRef), o = a(null), n = a(0), l = a(0), p = a(!1), f = v(() => _(e.background, e.backgroundOpacity)), s = async () => {
      if (!u.value || !o.value) return;
      const t = i({
        svgElement: u.value,
        element: o.value,
        x: e.x,
        y: e.y,
        offsetY: e.offsetY
      }), r = i({
        svgElement: u.value,
        element: o.value,
        x: e.prevX,
        y: e.prevY,
        offsetY: e.offsetY
      });
      !t || !r || (p.value = !1, n.value = r.top, l.value = r.left, await S(), setTimeout(() => {
        p.value = !0, n.value = t.top, l.value = t.left;
      }, 50));
    };
    return m(s), y(
      () => [e.x, e.y, e.prevX, e.prevY],
      () => s(),
      { immediate: !0 }
    ), (t, r) => (g(), b("div", {
      ref_key: "tooltipRef",
      ref: o,
      class: "vue-data-ui-spark-tooltip",
      style: x({
        position: "fixed",
        top: `${n.value}px`,
        left: `${l.value}px`,
        pointerEvents: "none",
        background: f.value,
        color: e.color,
        fontSize: `${e.fontSize}px`,
        borderRadius: `${e.borderRadius}px`,
        border: `${e.borderWidth}px solid ${e.borderColor}`,
        transition: p.value ? "top 0.3s ease-out, left 0.3s ease-out" : "none"
      })
    }, [
      k(t.$slots, "default", {}, void 0, !0)
    ], 4));
  }
}, F = /* @__PURE__ */ N(R, [["__scopeId", "data-v-c8e27542"]]);
export {
  F as default
};