vue-data-ui 3.1.4 → 3.1.5

package/dist/Slicer-Cmc94zkG.js

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