y-design-ssr/libs/slider/index.mjs

SSR component library of YUI with Vue3

import { ref as s, reactive as W, defineComponent as E, computed as V, createVNode as g } from "vue";
const $ = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((l, n) => l + $(e, n), "") : Object.keys(t).reduce(
  (l, n) => l + (t[n] ? $(e, n) : ""),
  ""
) : "", H = (e) => (t, l) => {
  let n = t, u = l;
  return n && typeof n != "string" && (u = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${$(n, u)}`;
}, P = () => (e, t) => t ? `${$(`y-${e}`, t)}` : `y-${e}`, G = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
s("zh-CN");
W({
  "zh-CN": G
});
const J = (e) => {
  const t = `y-${e}`;
  return [t, H(t), P()];
}, _ = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, x = 10, j = (e, t) => e > t && e > x ? "horizontal" : t > e && t > x ? "vertical" : "", U = (e, t) => Math.abs(e) > Math.abs(t) ? e > 0 ? "right" : "left" : t > 0 ? "bottom" : "top", q = () => {
  const e = s(0), t = s(0), l = s(0), n = s(0), u = s(0), i = s(0), c = s(""), C = s(""), h = () => c.value === "vertical", b = () => c.value === "horizontal", N = () => {
    l.value = 0, n.value = 0, u.value = 0, i.value = 0, c.value = "", C.value = "";
  };
  return {
    move: (m) => {
      const y = m.touches[0];
      l.value = y.clientX < 0 ? 0 : y.clientX - e.value, n.value = y.clientY - t.value, u.value = Math.abs(l.value), i.value = Math.abs(n.value), c.value || (c.value = j(u.value, i.value)), C.value = U(l.value, n.value);
    },
    start: (m) => {
      N(), e.value = m.touches[0].clientX, t.value = m.touches[0].clientY;
    },
    reset: N,
    startX: e,
    startY: t,
    deltaX: l,
    deltaY: n,
    offsetX: u,
    offsetY: i,
    direction: c,
    touchDirection: C,
    isVertical: h,
    isHorizontal: b
  };
}, [F, f] = J("slider"), K = /* @__PURE__ */ E({
  name: F,
  props: {
    modelValue: {
      type: [Number, Array],
      default: 0
    },
    activeColor: {
      type: String,
      default: ""
    },
    inactiveColor: {
      type: String,
      default: ""
    },
    max: {
      type: Number,
      default: 100
    },
    min: {
      type: Number,
      default: 0
    },
    buttonBgColor: {
      type: [String, Array],
      default: ""
    },
    barHeight: {
      type: [String, Number],
      default: "2px"
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    showTooltip: {
      type: Boolean,
      default: !1
    },
    step: {
      type: Number,
      default: 1
    },
    gapColor: {
      type: String,
      default: ""
    },
    gapWidth: {
      type: [String, Number],
      default: "2px"
    },
    transitionTime: {
      type: Number,
      default: 200
    }
  },
  emits: ["change", "drag-start", "drag-end", "update:modelValue"],
  setup(e, {
    emit: t,
    slots: l
  }) {
    const n = s(), u = s(0), i = s(0), c = s(""), C = q(), h = V(() => Array.isArray(e.modelValue)), b = (a) => {
      const {
        min: r,
        max: o,
        step: d
      } = e, v = Math.max(r, Math.min(a, o));
      return Math.round(v / d) * d;
    }, N = (a) => {
      if (a.stopPropagation(), e.disabled)
        return;
      const {
        min: r,
        modelValue: o
      } = e, {
        left: d,
        width: v
      } = n.value.getBoundingClientRect(), B = a.clientX - d, T = Math.floor(r + B / v * M.value);
      if (h.value) {
        const k = o[0], X = o[1], Y = (k + X) / 2;
        T <= Y ? m([T, X]) : m([k, T]);
      } else
        m(T);
    }, w = (a) => a[0] > a[1] ? [a[1], a[0]] : a, R = (a, r) => JSON.stringify(a) === JSON.stringify(r), m = (a, r) => {
      let o = 0;
      h.value ? o = w(a).map(b) : o = b(a), t("update:modelValue", o), typeof r > "u" && !R(u.value, i.value) && t("change", o);
    }, y = V(() => {
      const {
        modelValue: a,
        min: r
      } = e;
      let o = null;
      return h.value ? o = Math.floor((b(a[1]) - b(a[0])) * 100 / M.value) : o = Math.floor((b(a) - r) * 100 / M.value), `${o}%`;
    }), A = V(() => {
      const {
        modelValue: a,
        min: r
      } = e;
      return h.value ? `${Math.floor((b(a[0]) - r) * 100 / M.value)}%` : "0%";
    }), I = V(() => ({
      left: y.value,
      transition: c.value === "moving" ? "none" : `${e.transitionTime}ms ease-in-out`
    })), M = V(() => e.max - e.min), L = (a) => {
      e.disabled || (C.start(a), c.value = "startMove", i.value = e.modelValue, h.value ? u.value = [...i.value] : u.value = i.value);
    }, z = (a, r) => {
      if (e.disabled)
        return;
      C.move(a), c.value === "startMove" && t("drag-start"), c.value = "moving";
      const {
        width: o
      } = n.value.getBoundingClientRect(), d = C.deltaX.value, v = Math.floor(d / o * M.value);
      Array.isArray(u.value) && Array.isArray(i.value) ? r === "left" ? i.value[0] = u.value[0] + v : i.value[1] = u.value[1] + v : i.value = u.value + v, m(i.value, !0);
    }, D = () => {
      e.disabled || (c.value === "moving" && (m(i.value), t("drag-end")), c.value = "endMove");
    }, S = (a) => {
      let r = "", o = {}, d = 0, v = f("button-wrapper");
      return a === 0 ? (r = "left", o = {
        left: A.value,
        backgroundColor: Array.isArray(e.buttonBgColor) ? e.buttonBgColor[0] : e.buttonBgColor
      }, d = e.modelValue[a], v = f("button-wrapper", "left")) : a === 1 ? (r = "right", d = e.modelValue[a], o = {
        left: `${parseInt(y.value) + parseInt(A.value)}%`,
        backgroundColor: Array.isArray(e.buttonBgColor) ? e.buttonBgColor[1] : e.buttonBgColor
      }, v = f("button-wrapper", "right")) : (d = e.modelValue, o = {
        left: y.value,
        backgroundColor: e.buttonBgColor
      }), g("div", {
        role: "slider",
        "aria-valuemin": e.min,
        "aria-valuemax": e.max,
        "aria-valuenow": d,
        class: v,
        onTouchstart: L,
        onTouchmove: (B) => z(B, r),
        onTouchend: D,
        style: {
          ...o,
          transition: c.value === "moving" ? "none" : `${e.transitionTime}ms ease-in-out`
        }
      }, [l.button ? l.button() : g("div", {
        class: f("inner-button"),
        style: o
      }, null)]);
    }, O = V(() => Array((e.max - e.min) / e.step).fill({}).map((r, o) => ({
      position: `${o * e.step}%`
    })));
    return () => {
      var a;
      return g("div", {
        class: f()
      }, [l.iconLeft && g("div", {
        class: f("icon", {
          left: !0
        })
      }, [l.iconLeft()]), g("div", {
        role: "presentation",
        ref: n,
        class: f("wrapper-main", {
          disabled: e.disabled
        }),
        style: {
          background: e.inactiveColor,
          height: _(e.barHeight)
        },
        onClick: N
      }, [e.step !== 1 && g("div", {
        class: f("dots")
      }, [O.value.map((r) => g("div", {
        class: f("dot"),
        style: {
          left: r.position,
          background: e.gapColor,
          width: _(e.gapWidth)
        }
      }, null))]), e.showTooltip && g("div", {
        class: f("tooltip", {
          wrapper: l.toolTip
        }),
        style: I.value
      }, [((a = l.toolTip) == null ? void 0 : a.call(l)) || e.modelValue]), g("div", {
        style: {
          left: A.value,
          width: y.value,
          background: e.activeColor,
          transition: c.value === "moving" ? "none" : `${e.transitionTime}ms ease-in-out`
        },
        class: f("inner")
      }, null), h.value ? [S(0), S(1)] : S()]), l.iconRight && g("div", {
        class: f("icon", {
          right: !0
        })
      }, [l.iconRight()])]);
    };
  }
});
function Q(e) {
  const t = e;
  return t.install = (l) => {
    const { name: n } = e;
    n && l.component(n, e);
  }, t;
}
const p = Q(K);
export {
  p as default
};