@open-data-v/ui/es/Slider/Slider.vue.esm.js

OpenDataV UI基础包

import { defineComponent as W, ref as T, computed as i, watch as I, onMounted as O, openBlock as f, createElementBlock as c, normalizeClass as q, createElementVNode as g, normalizeStyle as h, withModifiers as k, createCommentVNode as M, Fragment as H, renderList as _ } from "vue";
import { getOffset as A } from "../util/dom.esm.js";
const G = ["innerHTML"], J = ["innerHTML"], K = ["innerHTML"], U = /* @__PURE__ */ W({
  __name: "Slider",
  props: {
    value: { default: 0 },
    min: { default: 0 },
    max: { default: 100 },
    disabled: { type: Boolean, default: !1 },
    step: { default: 1 },
    showStops: { type: Boolean },
    showTooltip: { type: Boolean, default: !1 },
    formatTooltip: {},
    marks: {},
    trigger: {}
  },
  emits: ["update:value", "change"],
  setup(F, { emit: N }) {
    const t = F, w = N, p = T(), s = T(0), a = T(0), D = i(() => {
      if (t.showTooltip) {
        const e = m(s.value);
        return t.formatTooltip ? t.formatTooltip(e) : e;
      } else
        return "";
    }), E = i(() => {
      if (t.showTooltip) {
        const e = m(a.value);
        return t.formatTooltip ? t.formatTooltip(e) : e;
      } else
        return "";
    }), P = i(() => {
      if (v.value) {
        let e = s.value;
        return s.value > a.value && (e = a.value), {
          left: e + "%",
          width: Math.abs(a.value - s.value) + "%"
        };
      } else
        return {
          left: "0px",
          width: s.value + "%"
        };
    }), V = i(() => {
      const e = [];
      if (t.showStops) {
        const o = (t.max - t.min) / t.step;
        for (let l = 1; l < o; l++)
          e.push(l * 100 / o + "%");
      }
      return e;
    }), X = i(() => {
      const e = [];
      if (t.marks)
        for (const o in t.marks)
          e.push({
            label: t.marks[o],
            left: o + "%"
          });
      return e;
    }), v = i(() => typeof t.value == "object" && t.value.length === 2), x = i(() => {
      var e;
      return (e = p == null ? void 0 : p.value) == null ? void 0 : e.offsetWidth;
    }), d = i(() => 100 / ((t.max - t.min) / t.step)), m = (e) => Math.round((t.max - t.min) * e / 100 + t.min), y = (e) => {
      if (t.disabled)
        return;
      const o = A(p.value).left;
      let l = (e.pageX - o) / x.value * 100;
      l < 0 && (l = 0), l > 100 && (l = 100);
      const n = parseInt(Math.round(l / d.value).toString()), u = d.value * n;
      if (v.value) {
        const r = Math.abs(l - s.value), z = Math.abs(l - a.value);
        r < z ? s.value = u : a.value = u;
      } else
        s.value = u;
      if (Number(Math.abs(s.value - a.value).toFixed(4)) < Number(d.value.toFixed(4)) || s.value.toFixed(2) === a.value.toFixed(2))
        if (console.log("重叠点所在的位置"), s.value === 0)
          a.value = d.value;
        else {
          if (n < 1)
            return;
          s.value = d.value * (n - 1);
        }
      s.value > a.value ? L("change") : L();
    }, L = (e) => {
      let o = 0;
      if (v.value) {
        const l = m(s.value), n = m(a.value);
        o = [l, n], l > n && e === "change" && (o = [n, l]);
      } else
        o = m(s.value);
      w("update:value", o), w("change", o);
    }, S = (e, o) => {
      if (t.disabled)
        return;
      const { offsetLeft: l } = o.target, n = o.pageX - l;
      document.onmousemove = (u) => {
        let r = (u.pageX - n) / x.value * 100;
        r < 0 && (r = 0), r > 100 && (r = 100), e === "left" ? s.value = r : a.value = r, t.trigger && y(u);
      }, document.onmouseup = (u) => {
        t.trigger || y(u), document.onmousemove = null, document.onmouseup = null;
      }, o.preventDefault(), o.stopPropagation();
    }, C = (e) => {
      e.preventDefault(), e.stopPropagation();
    }, j = (e) => (e - t.min) / (t.max - t.min) * 100, b = (e, o) => {
      let l = e;
      e < t.min && (l = t.min), e > t.max && (l = t.max);
      const n = j(l);
      o === "left" && (s.value = n), o === "right" && (a.value = n);
    }, B = () => {
      if (v.value) {
        let e = 0, o = 0;
        typeof t.value == "object" && (e = t.value[0], o = t.value[1]), b(e, "left"), b(o, "right");
      } else
        b(t.value, "left");
    };
    return I(
      () => t.value,
      () => {
        B();
      }
    ), O(() => {
      B();
    }), (e, o) => (f(), c("div", {
      ref_key: "sliderEl",
      ref: p,
      class: q({ "o-slider": !0, disabled: e.disabled })
    }, [
      g("div", {
        class: "o-slider-runway",
        onClick: y
      }, [
        g("span", {
          class: "slider-control",
          style: h({ left: s.value + "%" }),
          onMousedown: o[0] || (o[0] = k((l) => S("left", l), ["stop"])),
          onClick: k(C, ["stop"])
        }, [
          e.showTooltip ? (f(), c("i", {
            key: 0,
            class: "slider-tooltip",
            innerHTML: D.value
          }, null, 8, G)) : M("", !0)
        ], 36),
        v.value ? (f(), c("span", {
          key: 0,
          class: "slider-control",
          style: h({ left: a.value + "%" }),
          onMousedown: o[1] || (o[1] = k((l) => S("right", l), ["stop"])),
          onClick: k(C, ["stop"])
        }, [
          e.showTooltip ? (f(), c("i", {
            key: 0,
            class: "slider-tooltip",
            innerHTML: E.value
          }, null, 8, J)) : M("", !0)
        ], 36)) : M("", !0),
        g("span", {
          class: "slider-bar",
          style: h(P.value)
        }, null, 4),
        (f(!0), c(H, null, _(V.value, (l) => (f(), c("i", {
          key: l,
          class: "slider-stop",
          style: h({ left: l })
        }, null, 4))), 128)),
        (f(!0), c(H, null, _(X.value, (l, n) => (f(), c("span", {
          key: n,
          class: "slider-marks",
          style: h({ left: l.left })
        }, [
          g("i", {
            class: "slider-marks-text",
            innerHTML: l.label
          }, null, 8, K)
        ], 4))), 128))
      ])
    ], 2));
  }
});
export {
  U as default
};
//# sourceMappingURL=Slider.vue.esm.js.map