vue-data-ui 3.0.0-next.30 → 3.0.0-next.32

package/dist/Slicer-DMU3nifX.js

@@ -0,0 +1,588 @@
+import { useCssVars as We, computed as d, ref as i, onMounted as ce, onBeforeUnmount as me, watch as R, nextTick as Q, onUpdated as Ve, createElementBlock as c, openBlock as m, createElementVNode as v, createCommentVNode as p, renderSlot as Xe, normalizeStyle as k, createVNode as Ue, withDirectives as he, unref as F, Fragment as fe, renderList as ge, normalizeClass as L, vModelText as be, toDisplayString as Y } from "vue";
+import Oe from "./BaseIcon-B_tGgA4H.js";
+import { t as xe, u as Ze } from "./useResponsive-DfdjqQps.js";
+import { c as je, V as pe, U as ye, X as Ge, F as _ } from "./index-DB4XIP_N.js";
+import { _ as qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Je = {
+  class: "vue-data-ui-slicer-labels",
+  style: { position: "relative", "z-index": "1", "pointer-events": "none" }
+}, Ke = {
+  key: 0,
+  style: { width: "100%", position: "relative" }
+}, Qe = {
+  key: 0,
+  class: "minimap",
+  style: { width: "100%" }
+}, Ye = ["xmlns", "viewBox"], _e = ["id"], et = ["stop-color"], tt = ["d", "stroke"], lt = ["x", "width", "height", "fill", "rx"], at = ["d", "fill"], nt = ["x", "width", "height", "rx", "fill"], it = ["x", "width", "height", "fill", "rx"], ot = ["d", "fill"], ut = ["d", "stroke"], rt = ["cx", "cy", "stroke", "fill"], st = ["cx", "cy", "stroke", "fill"], dt = ["x1", "x2", "y2", "stroke"], vt = ["x", "height", "width", "onMouseenter"], ct = ["min", "max"], mt = ["min", "max"], ht = {
+  __name: "Slicer",
+  props: {
+    background: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    borderColor: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    fontSize: {
+      type: Number,
+      default: 14
+    },
+    labelLeft: {
+      type: [String, Number],
+      default: ""
+    },
+    labelRight: {
+      type: [String, Number],
+      default: ""
+    },
+    textColor: {
+      type: String,
+      default: "#1A1A1A"
+    },
+    inputColor: {
+      type: String,
+      default: "#1A1A1A"
+    },
+    max: {
+      type: Number,
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    selectColor: {
+      type: String,
+      default: "#4A4A4A"
+    },
+    useResetSlot: {
+      type: Boolean,
+      default: !1
+    },
+    valueStart: {
+      type: [Number, String],
+      default: 0
+    },
+    valueEnd: {
+      type: [Number, String],
+      default: 0
+    },
+    minimap: {
+      type: Array,
+      default: []
+    },
+    smoothMinimap: {
+      type: Boolean,
+      default: !1
+    },
+    minimapSelectedColor: {
+      type: String,
+      default: "#1f77b4"
+    },
+    minimapSelectionRadius: {
+      type: Number,
+      default: 12
+    },
+    minimapLineColor: {
+      type: String,
+      default: "#2D353C"
+    },
+    minimapSelectedColorOpacity: {
+      type: Number,
+      default: 0.2
+    },
+    minimapSelectedIndex: {
+      type: Number,
+      default: null
+    },
+    minimapIndicatorColor: {
+      type: String,
+      default: "#2D353C"
+    },
+    refreshStartPoint: {
+      type: Number,
+      default: 0
+    },
+    refreshEndPoint: {
+      type: Number,
+      default: null
+    },
+    enableRangeHandles: {
+      type: Boolean,
+      default: !1
+    },
+    enableSelectionDrag: {
+      type: Boolean,
+      default: !0
+    },
+    verticalHandles: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:start", "update:end", "reset", "trapMouse"],
+  setup(l, { expose: we, emit: Se }) {
+    We((e) => ({
+      "0dbd4190": ke.value,
+      ddd230a8: w.value,
+      "4490041d": Re.value,
+      "714c28dc": l.selectColor,
+      "2248c56a": $e.value
+    }));
+    const a = l, y = i(null), u = i(a.min), r = i(a.max), N = d(() => !!a.minimap.length), H = i(je()), I = i(0);
+    ce(() => {
+      const e = () => {
+        I.value = y.value.getBoundingClientRect().width;
+      };
+      e();
+      const t = xe(e, 50);
+      window.addEventListener("resize", t), me(() => {
+        window.removeEventListener("resize", t);
+      });
+    });
+    const Ce = d(() => a.refreshEndPoint === null ? a.max : a.refreshEndPoint), S = Se, g = d(() => {
+      const e = a.max - a.min, t = (u.value - a.min) / e * 100, n = (r.value - a.min) / e * 100, s = (t + n) / 2, f = V.value ? `calc(${s}% - ${T.value.width}px)` : W.value ? `calc(${s}%)` : `calc(${s}% - ${T.value.width / 2}px)`;
+      return {
+        left: `${t}%`,
+        width: `${n - t}%`,
+        background: a.selectColor,
+        tooltipLeft: `calc(${t}% - ${W.value ? 0 : K.value / 2}px)`,
+        tooltipRight: `calc(${n}% - ${V.value ? A.value : A.value / 2}px)`,
+        tooltipCenter: f,
+        arrowLeft: !W.value,
+        arrowRight: !V.value
+      };
+    }), W = d(() => y.value ? y.value.getBoundingClientRect().width * ((u.value - a.min) / (a.max - a.min)) - K.value / 2 < 0 : !1), V = d(() => y.value ? y.value.getBoundingClientRect().width * ((r.value - a.min) / (a.max - a.min)) + A.value / 2 > y.value.getBoundingClientRect().width : !1), ke = d(() => a.inputColor), $e = d(() => a.background), Re = d(() => `${a.selectColor}33`), w = d(() => a.borderColor), ee = d(() => {
+      let e = [];
+      for (let t = 0; t < a.minimap.length; t += 1)
+        e.push(t);
+      return e;
+    });
+    function te() {
+      S("reset");
+    }
+    function Le() {
+      Number(u.value) > Number(r.value) - 1 && (u.value = Number(r.value) - 1), S("update:start", Number(u.value));
+    }
+    function Ne() {
+      Number(r.value) < Number(u.value) + 1 && (r.value = Number(u.value) + 1), S("update:end", Number(r.value));
+    }
+    R(
+      () => a.min,
+      (e) => {
+        Number(u.value) < Number(e) && (u.value = Number(e)), Number(r.value) < Number(e) && (r.value = Number(e));
+      }
+    ), R(
+      () => a.max,
+      (e) => {
+        Number(u.value) > Number(e) && (u.value = Number(e)), Number(r.value) > Number(e) && (r.value = Number(e));
+      }
+    );
+    const X = i(null), o = i({
+      width: 1,
+      height: 1
+    }), P = i(null);
+    ce(() => {
+      if (N.value) {
+        const e = xe(() => {
+          const { width: t, height: n } = Ze({
+            chart: X.value
+          });
+          o.value.width = t, o.value.height = n - 47;
+        });
+        P.value = new ResizeObserver(e), P.value.observe(X.value);
+      }
+    }), me(() => {
+      P.value && P.value.disconnect();
+    });
+    const h = d(() => a.minimap.length ? o.value.width / a.minimap.length : 0), b = d(() => {
+      if (!a.minimap.length) return [];
+      const e = Math.max(...a.minimap), t = Math.min(...a.minimap) - 10, n = e - (t > 0 ? 0 : t), s = a.minimap.map((Ae, Fe) => {
+        const He = Ae - t;
+        return {
+          x: o.value.width / a.minimap.length * Fe + h.value / 2,
+          y: o.value.height - He / n * (o.value.height * 0.9)
+        };
+      }), f = a.smoothMinimap ? pe(s) : ye(s), z = [...s].slice(a.valueStart, a.valueEnd), Pe = a.smoothMinimap ? pe(z) : ye(z);
+      return {
+        fullSet: f,
+        selectionSet: Pe,
+        sliced: z,
+        firstPlot: s[a.valueStart],
+        lastPlot: s[a.valueEnd - 1]
+      };
+    }), x = d(() => ({
+      x: h.value * u.value + h.value / 2,
+      width: o.value.width * ((r.value - u.value) / a.max) - h.value
+    })), M = i(a.minimapSelectedIndex);
+    R(() => a.minimapSelectedIndex, (e) => {
+      M.value = e + a.valueStart;
+    }, { immediate: !0 });
+    function Me(e) {
+      M.value = e, e >= a.valueStart && e < a.valueEnd && S("trapMouse", e - a.valueStart);
+    }
+    const Ee = i(0), U = i(null), O = i(null);
+    function Z(e) {
+      u.value = e, U.value && (U.value.value = e), S("update:start", Number(u.value));
+    }
+    function j(e) {
+      r.value = e, O.value && (O.value.value = e), S("update:end", Number(r.value));
+    }
+    const G = d(() => a.valueEnd - a.valueStart), q = i(!1);
+    let J = i(null);
+    const Be = d(() => (I.value - 48) / (a.max - a.min)), De = d(() => (I.value - 48) / (a.max - a.min) * G.value), Te = i(2.5), le = d(() => {
+      const e = I.value - 48;
+      return Math.ceil(
+        (a.max - a.min) / ((e - De.value) / Te.value)
+      );
+    }), ae = (e) => {
+      if (C.value = !0, !a.enableSelectionDrag)
+        return;
+      const t = e.type === "touchstart";
+      if ((t ? e.targetTouches[0].target : e.target).classList.contains("range-handle"))
+        return;
+      q.value = !0, J.value = t ? e.targetTouches[0].clientX : e.clientX;
+      const s = t ? ze : ne, f = t ? Ie : oe;
+      window.addEventListener(t ? "touchmove" : "mousemove", s, { passive: !1 }), window.addEventListener(t ? "touchend" : "mouseup", f);
+    };
+    function ne(e) {
+      ie(e.clientX);
+    }
+    function ze(e) {
+      y.value.contains(e.target) && (e.target.classList.contains("range-handle") || (e.preventDefault(), ie(e.targetTouches[0].clientX)));
+    }
+    function ie(e) {
+      if (!q.value) return;
+      const t = e - J.value;
+      if (Math.abs(t) > Be.value) {
+        if (t > 0) {
+          if (Number(r.value) + 1 <= a.max) {
+            const n = Math.min(a.max, Number(r.value) + le.value);
+            j(n), Z(n - G.value);
+          }
+        } else if (Number(u.value) - 1 >= a.min) {
+          const n = Math.max(0, Number(u.value) - le.value);
+          Z(n), j(n + G.value);
+        }
+        J.value = e;
+      }
+    }
+    function oe() {
+      ue("mousemove", "mouseup");
+    }
+    function Ie() {
+      ue("touchmove", "touchend");
+    }
+    function ue(e, t) {
+      q.value = !1, window.removeEventListener(e, ne), window.removeEventListener(t, oe);
+    }
+    const $ = i(!1), E = i(null), B = i(null), K = i(1), A = i(1), C = i(!1);
+    function re() {
+      E.value && (K.value = E.value.getBoundingClientRect().width);
+    }
+    function se() {
+      B.value && (A.value = B.value.getBoundingClientRect().width);
+    }
+    const de = i(0);
+    function ve(e) {
+      de.value = e === "start" ? 1 : 0;
+    }
+    const D = i(!1), T = i({
+      width: 0,
+      left: 0
+    });
+    return R([u, r], async () => {
+      if (await Q(), !E.value || !B.value) {
+        D.value = !1, T.value = { width: 0, left: 0 };
+        return;
+      }
+      const e = E.value.getBoundingClientRect(), t = B.value.getBoundingClientRect();
+      D.value = e.x + e.width > t.x;
+      const n = e.x + e.width / 2, s = t.x + t.width / 2, f = e.width + t.width, z = (n + s) / 2;
+      T.value = {
+        width: f,
+        left: z - f / 2
+      };
+    }), Ve(() => {
+      re(), se();
+    }), R(() => a.labelLeft, () => {
+      Q(re);
+    }, { deep: !0 }), R(() => a.labelRight, () => {
+      Q(se);
+    }, { deep: !0 }), we({
+      setStartValue: Z,
+      setEndValue: j
+    }), (e, t) => (m(), c("div", {
+      "data-dom-to-png-ignore": "",
+      style: { padding: "0 24px" },
+      class: "vue-data-ui-zoom",
+      ref_key: "zoomWrapper",
+      ref: y,
+      onMousedown: ae,
+      onTouchstart: ae,
+      onTouchend: t[11] || (t[11] = (n) => C.value = !1)
+    }, [
+      v("div", Je, [
+        l.valueStart !== l.refreshStartPoint || l.valueEnd !== Ce.value ? (m(), c("div", Ke, [
+          l.useResetSlot ? Xe(e.$slots, "reset-action", {
+            key: 1,
+            reset: te
+          }, void 0, !0) : (m(), c("button", {
+            key: 0,
+            tabindex: "0",
+            role: "button",
+            class: "vue-data-ui-refresh-button",
+            style: k({
+              top: N.value ? "36px" : "-16px",
+              pointerEvents: "all !important"
+            }),
+            onClick: te
+          }, [
+            Ue(Oe, {
+              name: "refresh",
+              stroke: l.textColor
+            }, null, 8, ["stroke"])
+          ], 4))
+        ])) : p("", !0)
+      ]),
+      v("div", {
+        class: "double-range-slider",
+        ref_key: "minimapWrapper",
+        ref: X,
+        style: { "z-index": "0" },
+        onMouseenter: t[9] || (t[9] = (n) => C.value = !0),
+        onMouseleave: t[10] || (t[10] = (n) => C.value = !1)
+      }, [
+        N.value ? (m(), c("div", Qe, [
+          (m(), c("svg", {
+            xmlns: F(Ge),
+            viewBox: `0 0 ${o.value.width < 0 ? 0 : o.value.width} ${o.value.height < 0 ? 0 : o.value.height}`
+          }, [
+            v("defs", null, [
+              v("linearGradient", {
+                id: H.value,
+                x1: "0%",
+                y1: "0%",
+                x2: "0%",
+                y2: "100%"
+              }, [
+                v("stop", {
+                  offset: "0%",
+                  "stop-color": `${l.minimapLineColor}50`
+                }, null, 8, et),
+                t[12] || (t[12] = v("stop", {
+                  offset: "100%",
+                  "stop-color": "transparent"
+                }, null, -1))
+              ], 8, _e)
+            ]),
+            v("path", {
+              d: `M${b.value.fullSet}`,
+              stroke: `${l.minimapLineColor}`,
+              fill: "none",
+              "stroke-width": "1",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              style: { opacity: "1" }
+            }, null, 8, tt),
+            v("rect", {
+              x: x.value.x,
+              width: x.value.width < 0 ? 0 : x.value.width,
+              height: Math.max(o.value.height, 0),
+              y: 0,
+              fill: w.value,
+              rx: l.minimapSelectionRadius,
+              stroke: "none"
+            }, null, 8, lt),
+            v("path", {
+              d: `M${h.value / 2},${Math.max(o.value.height, 0)} ${b.value.fullSet} L${o.value.width - h.value / 2},${Math.max(o.value.height, 0)}Z`,
+              fill: `url(#${H.value})`,
+              stroke: "none",
+              style: { opacity: "1" }
+            }, null, 8, at),
+            v("rect", {
+              x: x.value.x,
+              width: x.value.width < 0 ? 0 : x.value.width,
+              height: Math.max(o.value.height, 0),
+              y: 0,
+              rx: l.minimapSelectionRadius,
+              fill: w.value
+            }, null, 8, nt),
+            v("rect", {
+              x: x.value.x,
+              width: x.value.width < 0 ? 0 : x.value.width,
+              height: Math.max(o.value.height, 0),
+              y: 0,
+              fill: l.minimapSelectedColor,
+              rx: l.minimapSelectionRadius,
+              style: k({
+                opacity: l.minimapSelectedColorOpacity
+              })
+            }, null, 12, it),
+            v("path", {
+              d: `M${b.value.sliced[0].x},${Math.max(o.value.height, 0)} ${b.value.selectionSet} L${b.value.sliced.at(-1).x},${Math.max(o.value.height, 0)}Z`,
+              fill: `url(#${H.value})`,
+              stroke: "none",
+              style: { opacity: "1" }
+            }, null, 8, ot),
+            v("path", {
+              d: `M ${b.value.selectionSet}`,
+              stroke: `${l.minimapLineColor}`,
+              fill: "transparent",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, null, 8, ut),
+            v("circle", {
+              cx: b.value.firstPlot.x,
+              cy: b.value.firstPlot.y,
+              "stroke-width": "0.5",
+              stroke: w.value,
+              r: "3",
+              fill: l.minimapLineColor
+            }, null, 8, rt),
+            v("circle", {
+              cx: b.value.lastPlot.x,
+              cy: b.value.lastPlot.y,
+              "stroke-width": "0.5",
+              stroke: w.value,
+              r: "3",
+              fill: l.minimapLineColor
+            }, null, 8, st),
+            M.value !== null ? (m(!0), c(fe, { key: 0 }, ge(ee.value, (n, s) => (m(), c("g", null, [
+              M.value === n && n >= l.valueStart && n < l.valueEnd ? (m(), c("line", {
+                key: 0,
+                x1: h.value * s + h.value / 2,
+                x2: h.value * s + h.value / 2,
+                y1: 0,
+                y2: Math.max(o.value.height, 0),
+                stroke: l.minimapIndicatorColor,
+                "stroke-linecap": "round",
+                "stroke-dasharray": "2",
+                "stroke-width": "1"
+              }, null, 8, dt)) : p("", !0)
+            ]))), 256)) : p("", !0),
+            (m(!0), c(fe, null, ge(ee.value, (n, s) => (m(), c("rect", {
+              x: h.value * s,
+              y: 0,
+              height: Math.max(o.value.height, 0),
+              width: h.value < 0 ? 0 : h.value,
+              fill: "transparent",
+              style: k([{ "pointer-events": "all !important" }, {
+                cursor: n >= l.valueStart && n < l.valueEnd && l.enableSelectionDrag ? $.value ? "grabbing" : "grab" : "default"
+              }]),
+              onMousedown: t[0] || (t[0] = (f) => $.value = !0),
+              onMouseup: t[1] || (t[1] = (f) => $.value = !1),
+              onMouseenter: (f) => Me(n),
+              onMouseleave: t[2] || (t[2] = (f) => {
+                M.value = null, S("trapMouse", null);
+              })
+            }, null, 44, vt))), 256))
+          ], 8, Ye))
+        ])) : p("", !0),
+        t[13] || (t[13] = v("div", { class: "slider-track" }, null, -1)),
+        v("div", {
+          class: L({
+            "range-highlight": !0,
+            move: l.enableSelectionDrag
+          }),
+          onMousedown: t[3] || (t[3] = (n) => $.value = !0),
+          onMouseup: t[4] || (t[4] = (n) => $.value = !1),
+          style: k({
+            ...g.value,
+            cursor: $.value ? "grabbing" : "grab"
+          })
+        }, null, 38),
+        l.enableRangeHandles ? he((m(), c("input", {
+          ref_key: "rangeStart",
+          ref: U,
+          key: `range-min${Ee.value}`,
+          type: "range",
+          class: L({ "range-left": !0, "range-handle": !0, "range-minimap": N.value && l.verticalHandles }),
+          min: l.min,
+          max: l.max,
+          "onUpdate:modelValue": t[5] || (t[5] = (n) => u.value = n),
+          onInput: Le,
+          onMouseenter: t[6] || (t[6] = (n) => ve("start"))
+        }, null, 42, ct)), [
+          [be, u.value]
+        ]) : p("", !0),
+        l.enableRangeHandles ? he((m(), c("input", {
+          key: 2,
+          ref_key: "rangeEnd",
+          ref: O,
+          type: "range",
+          class: L({ "range-right": !0, "range-handle": !0, "range-minimap": N.value && l.verticalHandles }),
+          min: l.min,
+          max: l.max,
+          "onUpdate:modelValue": t[7] || (t[7] = (n) => r.value = n),
+          onInput: Ne,
+          onMouseenter: t[8] || (t[8] = (n) => ve("end"))
+        }, null, 42, mt)), [
+          [be, r.value]
+        ]) : p("", !0),
+        l.labelLeft ? (m(), c("div", {
+          key: 3,
+          ref_key: "tooltipLeft",
+          ref: E,
+          class: L({
+            "range-tooltip": !0,
+            "range-tooltip-visible": C.value,
+            "range-tooltip-arrow": g.value.arrowLeft && !l.verticalHandles,
+            "range-tooltip-arrow-left": !g.value.arrowLeft && !l.verticalHandles
+          }),
+          style: k({
+            left: g.value.tooltipLeft,
+            color: F(_)(l.selectColor),
+            backgroundColor: l.selectColor,
+            border: `1px solid ${w.value}`,
+            zIndex: `${de.value + 4}`,
+            visibility: D.value || l.labelLeft === l.labelRight ? "hidden" : "visible"
+          })
+        }, Y(l.labelLeft), 7)) : p("", !0),
+        D.value || l.labelLeft === l.labelRight ? (m(), c("div", {
+          key: 4,
+          ref: "tooltipMerge",
+          class: L({
+            "range-tooltip": !0,
+            "range-tooltip-visible": C.value,
+            "range-tooltip-arrow": !0,
+            "range-tooltip-arrow-left": !g.value.arrowLeft && !l.verticalHandles,
+            "range-tooltip-arrow-right": !g.value.arrowRight && !l.verticalHandles
+          }),
+          style: k({
+            left: g.value.tooltipCenter,
+            width: T.value.width + "px",
+            color: F(_)(l.selectColor),
+            backgroundColor: l.selectColor,
+            border: `1px solid ${w.value}`,
+            zIndex: "4"
+          })
+        }, Y(l.labelLeft === l.labelRight ? l.labelLeft : `${l.labelLeft} - ${l.labelRight}`), 7)) : p("", !0),
+        l.labelRight ? (m(), c("div", {
+          key: 5,
+          ref_key: "tooltipRight",
+          ref: B,
+          class: L({
+            "range-tooltip": !0,
+            "range-tooltip-visible": C.value,
+            "range-tooltip-arrow": g.value.arrowRight && !l.verticalHandles,
+            "range-tooltip-arrow-right": !g.value.arrowRight && !l.verticalHandles
+          }),
+          style: k({
+            left: g.value.tooltipRight,
+            color: F(_)(l.selectColor),
+            backgroundColor: l.selectColor,
+            border: `1px solid ${w.value}`,
+            zIndex: "4",
+            visibility: D.value || l.labelLeft === l.labelRight ? "hidden" : "visible"
+          })
+        }, Y(l.labelRight), 7)) : p("", !0)
+      ], 544)
+    ], 544));
+  }
+}, yt = /* @__PURE__ */ qe(ht, [["__scopeId", "data-v-8e6acacb"]]);
+export {
+  yt as S
+};

package/dist/{SparkTooltip-BuPeepCP.js → SparkTooltip-B6xp9zx_.js}

@@ -1,5 +1,5 @@
 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-Bxh2efzz.js";
+import { s as _, ap as i } from "./index-DB4XIP_N.js";
 import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const R = {
   __name: "SparkTooltip",

package/dist/{Title-B21jaJ0n.js → Title-B5lsq0cx.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-BGEUK51b.js";
+import { u as c } from "./useNestedProp-iTa19l34.js";
 const x = {
   __name: "Title",
   props: {