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