vue-data-ui 3.0.0-next.0 → 3.0.0-next.2

package/dist/Tooltip-NwATo4ZJ.js

@@ -0,0 +1,157 @@
+import { ref as s, onMounted as S, onUnmounted as g, watch as p, nextTick as k, computed as x, createBlock as $, openBlock as h, Teleport as C, createElementBlock as F, createCommentVNode as B, normalizeStyle as w, normalizeClass as N, renderSlot as m, createElementVNode as Y } from "vue";
+import { s as z } from "./index-BzfnuLnw.js";
+function M({ tooltip: e, chart: a, clientPosition: t, positionPreference: d = "center", defaultOffsetY: c = 24, blockShiftY: u = !1 }) {
+  const o = s(0), i = s(c);
+  if (e && a) {
+    const { width: n, height: v } = e.getBoundingClientRect(), { right: f, left: l, bottom: r } = a.getBoundingClientRect();
+    d === "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), d === "right" && (t.x + n > f ? o.value = -n + (f - t.x) : o.value = 0), d === "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) {
+  S(() => e.addEventListener(a, t)), g(() => e.removeEventListener(a, t));
+}
+function E() {
+  const e = s(0), a = s(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
+    },
+    disableSmoothing: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const a = e, t = s(null), { x: d, y: c } = E(a.parent), u = s({ x: 0, y: 0 }), o = s({ x: 0, y: 0 });
+    let i = null;
+    function n() {
+      if (a.disableSmoothing) {
+        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([d, c], ([l, r]) => {
+      u.value.x = l, u.value.y = r, a.disableSmoothing && (o.value.x = l, o.value.y = r);
+    }), p(() => a.show, async (l) => {
+      if (l) {
+        const r = d.value, y = c.value;
+        u.value.x = r, u.value.y = y, o.value.x = r, o.value.y = y, await k(), 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(), $(C, {
+      to: e.isFullscreen ? e.parent : "body"
+    }, [
+      e.show ? (h(), F("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 }),
+        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)) : B("", !0)
+    ], 8, ["to"]));
+  }
+};
+export {
+  A as default
+};