jh-slider-valid/dist/jhslidervalid.es.js

金合前端组件

import { defineComponent as q, computed as D, reactive as G, ref as T, watch as H, onMounted as J, onBeforeUnmount as K, openBlock as Q, createBlock as Z, Teleport as ee, createElementVNode as n, normalizeClass as p, normalizeStyle as f, withModifiers as P, unref as u, toDisplayString as F } from "vue";
const te = ["width", "height"], se = ["width", "height"], oe = ["width", "height"], ie = /* @__PURE__ */ n("div", { class: "loading-gif_" }, [
  /* @__PURE__ */ n("span"),
  /* @__PURE__ */ n("span"),
  /* @__PURE__ */ n("span"),
  /* @__PURE__ */ n("span"),
  /* @__PURE__ */ n("span")
], -1), ae = [
  ie
], ne = /* @__PURE__ */ n("svg", {
  t: "1658824925736",
  class: "icon reset_",
  viewBox: "0 0 1024 1024",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg",
  "p-id": "3054",
  width: "200",
  height: "200"
}, [
  /* @__PURE__ */ n("path", {
    d: "M508.5 889.1c-51.1 0-100.7-10-147.4-29.8-45.1-19.1-85.6-46.4-120.3-81.1-34.8-34.8-62.1-75.3-81.1-120.3-19.7-46.7-29.8-96.3-29.8-147.4 0-54.2 11.2-106.5 33.3-155.6l36.5 16.5c-19.8 43.8-29.8 90.6-29.8 139.1 0 186.7 151.9 338.6 338.6 338.6 69.7 0 136.7-21 193.7-60.8l22.9 32.8c-63.7 44.4-138.6 68-216.6 68zM858.1 656.1l-36.9-15.4c17.2-41.3 25.9-85.1 25.9-130.2 0-186.7-151.9-338.6-338.6-338.6-69.3 0-135.9 20.8-192.6 60.1l-22.8-33c63.4-44 137.9-67.2 215.4-67.2 51.1 0 100.7 10 147.4 29.8 45.1 19.1 85.6 46.4 120.3 81.1C811 277.5 838.3 318 857.3 363c19.7 46.7 29.8 96.3 29.8 147.4 0 50.5-9.7 99.5-29 145.7z",
    "p-id": "3055"
  }),
  /* @__PURE__ */ n("path", {
    d: "M271 454.9L166.6 318.1 57.5 453.9zM965.5 554.6L861 691.4 752 555.5z",
    "p-id": "3056"
  })
], -1), le = [
  ne
], he = { class: "auth-control_" }, de = { class: "range-text" }, re = /* @__PURE__ */ n("div", null, null, -1), ue = /* @__PURE__ */ n("div", null, null, -1), ce = /* @__PURE__ */ n("div", null, null, -1), fe = [
  re,
  ue,
  ce
], we = /* @__PURE__ */ q({
  __name: "jh-slider-valid",
  props: {
    width: { default: 320 },
    height: { default: 170 },
    show: { type: Boolean, default: !1 },
    sliderSize: { default: 30 },
    scale: { default: 1 },
    range: { default: 10 },
    images: { default: () => null },
    successText: { default: "\u9A8C\u8BC1\u6210\u529F" },
    failText: { default: "\u9A8C\u8BC1\u5931\u8D25" },
    sliderText: { default: "\u62D6\u52A8\u6ED1\u5757\u5B8C\u6210\u9A8C\u8BC1" },
    padding: { default: 15 },
    el: { default: "body" }
  },
  emits: ["success", "fail", "close"],
  setup(y, { emit: X }) {
    const o = y, r = D(() => Math.max(Math.min(Math.round(o.sliderSize), Math.round(o.width * 0.5)))), h = D(() => Math.round(Math.max(Math.min(o.scale, 2), 0.2) * 52.5 + 6)), x = D(() => {
      const { startWidth: s, newX: e, startX: i } = t, a = s + e - i;
      return a < r.value ? r.value : a > o.width ? o.width : a;
    }), t = G({
      mouseDown: !1,
      startWidth: 50,
      startX: 0,
      newX: 0,
      pinX: 0,
      pinY: 0,
      loading: !1,
      isCanSlide: !1,
      error: !1,
      infoBoxShow: !1,
      infoText: "",
      infoBoxFail: !1,
      timer1: void 0,
      closeDown: !1,
      isSuccess: !1,
      imgIndex: -1,
      isSubmting: !1
    }), z = T(null), I = T(null), L = T(null), O = T(null);
    H(() => o.show, (s) => {
      s && C();
    }), J(() => {
      document.addEventListener("mousemove", S, !1), document.addEventListener("mouseup", _, !1), document.addEventListener("touchmove", S, {
        passive: !1
      }), document.addEventListener("touchend", _, !1), document.body.classList.add("vue-puzzle-overflow"), o.show && C();
    }), K(() => {
      document.removeEventListener("mousemove", S, !1), document.removeEventListener("mouseup", _, !1), document.removeEventListener("touchmove", S, !1), document.removeEventListener("touchend", _, !1), document.body.classList.remove("vue-puzzle-overflow");
    });
    const W = () => {
      t.mouseDown || (clearTimeout(t.timer1), X("close"));
    }, R = () => {
      t.closeDown = !0;
    }, E = () => {
      t.closeDown && W(), t.closeDown = !1;
    }, Y = (s) => {
      t.isCanSlide && (t.mouseDown = !0, t.startWidth = z.value.clientWidth, t.newX = s.clientX || s.changedTouches[0].clientX, t.startX = s.clientX || s.changedTouches[0].clientX);
    }, S = (s) => {
      t.mouseDown && (s.preventDefault(), t.newX = s.clientX || s.changedTouches[0].clientX);
    }, _ = () => {
      t.mouseDown && (t.mouseDown = !1, j());
    }, k = (s) => {
      var v, g, w;
      if (t.loading && !s)
        return;
      t.loading = !0, t.isCanSlide = !1;
      const e = (v = I.value) == null ? void 0 : v.getContext("2d"), i = (g = L.value) == null ? void 0 : g.getContext("2d"), a = (w = O.value) == null ? void 0 : w.getContext("2d"), m = navigator.userAgent.indexOf("Firefox") >= 0 && navigator.userAgent.indexOf("Windows") >= 0, d = document.createElement("img");
      if (e.fillStyle = "rgba(255,255,255,1)", a.fillStyle = "rgba(255,255,255,1)", e.clearRect(0, 0, o.width, o.height), i.clearRect(0, 0, o.width, o.height), t.pinX = l(h.value, o.width - h.value - 20), t.pinY = l(h.value, o.height - h.value - 20), d.crossOrigin = "anonymous", d.onload = () => {
        const [c, b, B, $] = U(d);
        e.save(), M(e), e.closePath(), m ? (e.clip(), e.save(), e.shadowOffsetX = 0, e.shadowOffsetY = 0, e.shadowColor = "#000", e.shadowBlur = 3, e.fill(), e.restore()) : (e.shadowOffsetX = 0, e.shadowOffsetY = 0, e.shadowColor = "#000", e.shadowBlur = 3, e.fill(), e.clip()), e.drawImage(d, c, b, B, $), a.fillRect(0, 0, o.width, o.height), a.drawImage(d, c, b, B, $), e.globalCompositeOperation = "source-atop", M(e), e.arc(
          t.pinX + Math.ceil(h.value / 2),
          t.pinY + Math.ceil(h.value / 2),
          h.value,
          0,
          Math.PI * 2
        ), e.closePath(), e.shadowColor = "rgba(255, 255, 255, .8)", e.shadowOffsetX = -1, e.shadowOffsetY = -1, e.shadowBlur = Math.min(Math.ceil(8 * o.scale), 12);
        const V = e.getImageData(
          t.pinX - 3,
          t.pinY - 20,
          t.pinX + h.value + 5,
          t.pinY + h.value + 5
        );
        i.putImageData(V, 0, t.pinY - 20), e.restore(), e.clearRect(0, 0, o.width, o.height), e.save(), M(e), e.globalAlpha = 0.8, e.fillStyle = "#ffffff", e.fill(), e.restore(), e.save(), e.globalCompositeOperation = "source-atop", M(e), e.arc(
          t.pinX + Math.ceil(h.value / 2),
          t.pinY + Math.ceil(h.value / 2),
          h.value * 1.2,
          0,
          Math.PI * 2,
          !0
        ), e.shadowColor = "#000", e.shadowOffsetX = 2, e.shadowOffsetY = 2, e.shadowBlur = 16, e.fill(), e.restore(), e.save(), e.globalCompositeOperation = "destination-over", e.drawImage(d, c, b, B, $), e.restore(), t.loading = !1, t.isCanSlide = !0;
      }, d.onerror = () => {
        k(!0);
      }, !s && o.images && o.images.length) {
        let c = l(0, o.images.length - 1);
        c === t.imgIndex && (c === o.images.length - 1 ? c = 0 : c++), t.imgIndex = c, d.src = o.images[c];
      } else
        d.src = A();
    }, A = () => {
      const s = document.createElement("canvas"), e = s.getContext("2d"), { width: i, height: a } = o;
      s.width = i, s.height = a, e.fillStyle = `rgb(${l(100, 255)},${l(100, 255)},${l(
        100,
        255
      )})`, e.fillRect(0, 0, i, a);
      for (let m = 0; m < 12; m++)
        if (e.fillStyle = `rgb(${l(100, 255)},${l(100, 255)},${l(
          100,
          255
        )})`, e.strokeStyle = `rgb(${l(100, 255)},${l(100, 255)},${l(
          100,
          255
        )})`, l(0, 2) > 1)
          e.save(), e.rotate(l(-90, 90) * Math.PI / 180), e.fillRect(
            l(-20, s.width - 20),
            l(-20, s.height - 20),
            l(10, s.width / 2 + 10),
            l(10, s.height / 2 + 10)
          ), e.restore();
        else {
          e.beginPath();
          const d = l(-Math.PI, Math.PI);
          e.arc(
            l(0, s.width),
            l(0, s.height),
            l(10, s.height / 2 + 10),
            d,
            d + Math.PI * 1.5
          ), e.closePath(), e.fill();
        }
      return s.toDataURL("image/png");
    }, M = (s) => {
      const e = Math.ceil(15 * o.scale);
      s.beginPath();
      const { pinX: i, pinY: a } = t;
      s.moveTo(i, a), s.lineTo(i + e, a), s.arcTo(
        i + e,
        a - e / 2,
        i + e + e / 2,
        a - e / 2,
        e / 2
      ), s.arcTo(
        i + e + e,
        a - e / 2,
        i + e + e,
        a,
        e / 2
      ), s.lineTo(i + e + e + e, a), s.lineTo(i + e + e + e, a + e), s.arcTo(
        i + e + e + e + e / 2,
        a + e,
        i + e + e + e + e / 2,
        a + e + e / 2,
        e / 2
      ), s.arcTo(
        i + e + e + e + e / 2,
        a + e + e,
        i + e + e + e,
        a + e + e,
        e / 2
      ), s.lineTo(i + e + e + e, a + e + e + e), s.lineTo(i, a + e + e + e), s.lineTo(i, a + e + e), s.arcTo(
        i + e / 2,
        a + e + e,
        i + e / 2,
        a + e + e / 2,
        e / 2
      ), s.arcTo(i + e / 2, a + e, i, a + e, e / 2), s.lineTo(i, a);
    }, l = (s, e) => Math.ceil(Math.random() * (e - s) + s), U = (s) => {
      const { width: e, height: i } = o, a = s.width / s.height, m = e / i;
      let d = 0, v = 0, g = 0, w = 0;
      return a > m ? (w = i, g = a * w, v = 0, d = (e - g) / 2) : (g = e, w = g / a, d = 0, v = (i - w) / 2), [d, v, g, w];
    }, j = () => {
      t.isSubmting = !0;
      const s = Math.abs(
        t.pinX - (x.value - r.value) + (h.value - r.value) * ((x.value - r.value) / (o.width - r.value)) - 3
      ), { range: e, successText: i } = o;
      s < e ? (t.infoText = i, t.infoBoxFail = !1, t.infoBoxShow = !0, t.isCanSlide = !1, t.isSuccess = !0, clearTimeout(t.timer1), t.timer1 = setTimeout(() => {
        t.isSubmting = !1, X("success", s);
      }, 800)) : (t.infoText = o.failText, t.infoBoxFail = !0, t.infoBoxShow = !0, t.isCanSlide = !1, X("fail", s), clearTimeout(t.timer1), t.timer1 = setTimeout(() => {
        t.isSubmting = !1, C();
      }, 800));
    }, N = () => {
      t.infoBoxFail = !1, t.infoBoxShow = !1, t.isCanSlide = !1, t.isSuccess = !1, t.startWidth = r.value, t.startX = 0, t.newX = 0;
    }, C = () => {
      t.isSubmting || (N(), k());
    };
    return (s, e) => (Q(), Z(ee, {
      to: o.el
    }, [
      n("div", {
        class: p(["vue-puzzle-vcode", { show_: y.show }]),
        onMousedown: R,
        onMouseup: E,
        onTouchstart: R,
        onTouchend: E
      }, [
        n("div", {
          class: "vue-auth-box_",
          style: f({ padding: `${o.padding}px` }),
          onMousedown: e[2] || (e[2] = P(() => {
          }, ["stop"])),
          onTouchstart: e[3] || (e[3] = P(() => {
          }, ["stop"]))
        }, [
          n("div", {
            class: "auth-body_",
            style: f(`height: ${o.height}px`)
          }, [
            n("canvas", {
              ref_key: "refC1",
              ref: I,
              width: o.width,
              height: o.height,
              style: f(`width:${o.width}px;height:${o.height}px`)
            }, null, 12, te),
            n("canvas", {
              ref_key: "refC3",
              ref: O,
              class: p(["auth-canvas3_", { show: t.isSuccess }]),
              width: o.width,
              height: o.height,
              style: f(`width:${o.width}px;height:${o.height}px`)
            }, null, 14, se),
            n("canvas", {
              width: u(h),
              class: "auth-canvas2_",
              height: o.height,
              ref_key: "refC2",
              ref: L,
              style: f(`width:${u(h)}px;height:${o.height}px;transform:translateX(${u(x) - u(r) - (u(h) - u(r)) * ((u(x) - u(r)) / (o.width - u(r)))}px)`)
            }, null, 12, oe),
            n("div", {
              class: p(["loading-box_", { hide_: !t.loading }])
            }, ae, 2),
            n("div", {
              class: p(["info-box_", { show: t.infoBoxShow }, { fail: t.infoBoxFail }])
            }, F(t.infoText), 3),
            n("div", {
              class: p(["flash_", { show: t.isSuccess }]),
              style: f(`transform: translateX(${t.isSuccess ? `${o.width + o.height * 0.578}px` : `-${o.height * 0.578}px`}) skew(-30deg, 0);`)
            }, null, 6),
            n("div", { onClick: C }, le)
          ], 4),
          n("div", he, [
            n("div", {
              class: "range-box",
              style: f(`height:${u(r)}px`)
            }, [
              n("div", de, F(y.sliderText), 1),
              n("div", {
                class: "range-slider",
                ref_key: "refRangeSlider",
                ref: z,
                style: f(`width:${u(x)}px`)
              }, [
                n("div", {
                  class: p(["range-btn", { isDown: t.mouseDown }]),
                  style: f(`width:${u(r)}px`),
                  onMousedown: e[0] || (e[0] = (i) => Y(i)),
                  onTouchstart: e[1] || (e[1] = (i) => Y(i))
                }, fe, 38)
              ], 4)
            ], 4)
          ])
        ], 36)
      ], 34)
    ], 8, ["to"]));
  }
});
export {
  we as default
};