vue-data-ui/dist/Tooltip-CuHsd1IQ.js

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

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