vue-data-ui 2.12.6 → 2.12.7-beta.0

package/dist/RecursiveLinks-ld_gDZH4.js

@@ -0,0 +1,64 @@
+import { toRef as k, resolveComponent as d, createElementBlock as o, openBlock as e, Fragment as r, renderList as c, createCommentVNode as s, createElementVNode as y, createBlock as h } from "vue";
+const g = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], x = ["x1", "y1", "x2", "y2", "stroke", "stroke-width"], C = {
+  __name: "RecursiveLinks",
+  props: {
+    dataset: {
+      type: Array,
+      default: () => []
+    },
+    color: {
+      type: String,
+      default: "#DDDDDD"
+    },
+    backgroundColor: {
+      type: String,
+      default: "#FFFFFF"
+    }
+  },
+  setup(n) {
+    return k(n, "dataset").value.forEach((a) => {
+      a.nodes && a.nodes.length > 0 && a.nodes.forEach((u) => {
+        u.ancestor = a;
+      });
+    }), (a, u) => {
+      const i = d("RecursiveLinks", !0);
+      return e(), o(r, null, [
+        (e(!0), o(r, null, c(n.dataset, (t) => (e(), o(r, null, [
+          t.polygonPath && t.polygonPath.coordinates ? (e(!0), o(r, { key: 0 }, c(t.polygonPath.coordinates, (l, f) => (e(), o(r, null, [
+            t.ancestor && t.ancestor.polygonPath ? (e(), o(r, { key: 0 }, [
+              y("line", {
+                x1: l.x,
+                y1: l.y,
+                x2: t.ancestor.polygonPath.coordinates[0].x,
+                y2: t.ancestor.polygonPath.coordinates[0].y,
+                stroke: n.backgroundColor,
+                "stroke-width": t.circleRadius / 1.5
+              }, null, 8, g),
+              y("line", {
+                x1: l.x,
+                y1: l.y,
+                x2: t.ancestor.polygonPath.coordinates[0].x,
+                y2: t.ancestor.polygonPath.coordinates[0].y,
+                stroke: n.color,
+                "stroke-width": t.circleRadius / 2
+              }, null, 8, x)
+            ], 64)) : s("", !0)
+          ], 64))), 256)) : s("", !0)
+        ], 64))), 256)),
+        (e(!0), o(r, null, c(n.dataset, (t) => (e(), o(r, null, [
+          t.polygonPath && t.polygonPath.coordinates ? (e(), o(r, { key: 0 }, [
+            t.nodes && t.nodes.length > 0 ? (e(), h(i, {
+              key: 0,
+              dataset: t.nodes,
+              color: n.color,
+              backgroundColor: n.backgroundColor
+            }, null, 8, ["dataset", "color", "backgroundColor"])) : s("", !0)
+          ], 64)) : s("", !0)
+        ], 64))), 256))
+      ], 64);
+    };
+  }
+};
+export {
+  C as default
+};

package/dist/{Shape-C69a0f29.js → Shape-D3w9qas1.js}

@@ -1,5 +1,5 @@
 import { computed as u, createElementBlock as r, openBlock as l, createCommentVNode as a } from "vue";
-import { Z as c, Q as f } from "./index-BFzQMJda.js";
+import { Z as c, Q as f } from "./index-BiHmNd1-.js";
 const y = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], g = ["d", "fill", "stroke", "stroke-width"], x = ["points", "fill", "stroke", "stroke-width"], h = {
   __name: "Shape",
   props: {
@@ -106,5 +106,5 @@ const y = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], g = ["d", "fill",
   }
 };
 export {
-  h as _
+  h as default
 };

package/dist/{Slicer-7qFdY-bT.js → Slicer-ncY8krrM.js}

@@ -1,7 +1,7 @@
 import { useCssVars as Ie, computed as s, ref as u, watch as R, onMounted as Pe, onBeforeUnmount as ze, onUpdated as Ae, nextTick as ue, createElementBlock as v, openBlock as m, createElementVNode as d, createCommentVNode as x, renderSlot as Fe, normalizeStyle as $, createVNode as He, withDirectives as oe, unref as Z, Fragment as re, renderList as se, normalizeClass as L, vModelText as de, toDisplayString as ve } from "vue";
-import Ve from "./BaseIcon-CNbwMh_-.js";
+import Ve from "./BaseIcon-CZdMutjs.js";
 import { t as We, u as Xe } from "./useResponsive-JZ9xq-JV.js";
-import { c as Ue, U as me, T as ce, X as Oe, G as he } from "./index-BFzQMJda.js";
+import { c as Ue, U as me, T as ce, X as Oe, G as he } from "./index-BiHmNd1-.js";
 import { _ as Ze } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const Ge = {
   class: "vue-data-ui-slicer-labels",

package/dist/SparkTooltip-CwThutH2.js

@@ -0,0 +1,68 @@
+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 _, am as i } from "./index-BiHmNd1-.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), s = a(!1), f = v(() => _(e.background, e.backgroundOpacity)), p = 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 || (s.value = !1, n.value = r.top, l.value = r.left, await S(), setTimeout(() => {
+        s.value = !0, n.value = t.top, l.value = t.left;
+      }, 50));
+    };
+    return m(p), y(
+      () => [e.x, e.y, e.prevX, e.prevY],
+      () => p(),
+      { 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: s.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
+};

package/dist/{Title-CzaCeCOm.js → Title-B5qqUI3M.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as l, openBlock as n, Fragment as f, createElementVNode as p, createCommentVNode as o, normalizeStyle as d, unref as e, toDisplayString as g, renderSlot as r } from "vue";
-import { u as c } from "./useNestedProp-v7KPpwuP.js";
+import { u as c } from "./useNestedProp-tRqS0ZAM.js";
 const x = {
   __name: "Title",
   props: {
@@ -57,5 +57,5 @@ const x = {
   }
 };
 export {
-  x as _
+  x as default
 };

package/dist/Tooltip-C9rxJ-Ru.js

@@ -0,0 +1,149 @@
+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-BiHmNd1-.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
+};