go-captcha-vue
Version:
GoCaptcha for Vue, which implements click mode, slider mode, drag-drop mode and rotation mode.
1,083 lines (1,082 loc) • 38.3 kB
JavaScript
import { defineComponent as q, openBlock as z, createElementBlock as H, mergeProps as oe, createElementVNode as o, reactive as T, toRaw as V, watch as F, computed as L, withDirectives as K, normalizeClass as se, normalizeStyle as D, toDisplayString as ie, vShow as Q, createVNode as I, unref as v, Fragment as Ce, renderList as Be, ref as ee, onMounted as _e, nextTick as be, onUnmounted as we, toRefs as Te, createBlock as le, createCommentVNode as Pe } from "vue";
const Ee = () => ({
width: 300,
height: 220,
thumbWidth: 150,
thumbHeight: 40,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: !0,
title: "请在下图依次点击",
buttonText: "确认",
iconSize: 22,
dotSize: 24
}), Xe = /* @__PURE__ */ o("path", { d: `M100.1,189.9C100.1,189.9,100,189.9,100.1,189.9c-49.7,0-90-40.4-90-89.9c0-49.6,40.4-89.9,89.9-89.9
c49.6,0,89.9,40.4,89.9,89.9c0,18.2-5.4,35.7-15.6,50.7c-1.5,2.1-3.6,3.4-6.1,3.9c-2.5,0.4-5-0.1-7-1.6c-4.2-3-5.3-8.6-2.4-12.9
c8.1-11.9,12.4-25.7,12.4-40.1c0-39.2-31.9-71.1-71.1-71.1c-39.2,0-71.1,31.9-71.1,71.1c0,39.2,31.9,71.1,71.1,71.1
c7.7,0,15.3-1.2,22.6-3.6c2.4-0.8,4.9-0.6,7.2,0.5c2.2,1.1,3.9,3.1,4.7,5.5c1.6,4.9-1,10.2-5.9,11.9
C119.3,188.4,109.8,189.9,100.1,189.9z M73,136.4C73,136.4,73,136.4,73,136.4c-2.5,0-4.9-1-6.7-2.8c-3.7-3.7-3.7-9.6,0-13.3
L86.7,100L66.4,79.7c-3.7-3.7-3.7-9.6,0-13.3c3.7-3.7,9.6-3.7,13.3,0L100,86.7l20.3-20.3c1.8-1.8,4.1-2.8,6.7-2.8c0,0,0,0,0,0
c2.5,0,4.9,1,6.7,2.8c1.8,1.8,2.8,4.1,2.8,6.7c0,2.5-1,4.9-2.8,6.7L113.3,100l20.3,20.3c3.7,3.7,3.7,9.6,0,13.3
c-3.7,3.7-9.6,3.7-13.3,0L100,113.3l-20.3,20.3C77.9,135.4,75.5,136.4,73,136.4z` }, null, -1), We = [
Xe
], fe = /* @__PURE__ */ q({
__name: "close-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, i.$attrs, { onClick: r }), We, 16));
}
}), Me = /* @__PURE__ */ o("path", { d: `M135,149.9c-10.7,7.6-23.2,11.4-36,11.2c-1.7,0-3.4-0.1-5-0.3c-0.7-0.1-1.4-0.2-2-0.3c-1.3-0.2-2.6-0.4-3.9-0.6
c-0.8-0.2-1.6-0.4-2.3-0.5c-1.2-0.3-2.5-0.6-3.7-1c-0.6-0.2-1.2-0.4-1.7-0.6c-1.4-0.5-2.8-1-4.2-1.5c-0.3-0.1-0.6-0.3-0.9-0.4
c-1.6-0.7-3.2-1.4-4.7-2.3c-0.1,0-0.1-0.1-0.2-0.1c-5.1-2.9-9.8-6.4-14-10.6c-0.1-0.1-0.1-0.1-0.2-0.2c-1.3-1.3-2.5-2.7-3.7-4.1
c-0.2-0.3-0.5-0.6-0.7-0.9c-8.4-10.6-13.5-24.1-13.5-38.8h14.3c0.4,0,0.7-0.2,0.9-0.5c0.2-0.3,0.2-0.8,0-1.1L29.5,60.9
c-0.2-0.3-0.5-0.5-0.9-0.5c-0.4,0-0.7,0.2-0.9,0.5L3.8,97.3c-0.2,0.3-0.2,0.7,0,1.1c0.2,0.3,0.5,0.5,0.9,0.5h14.3
c0,17.2,5.3,33.2,14.3,46.4c0.1,0.2,0.2,0.4,0.3,0.6c0.9,1.4,2,2.6,3,3.9c0.4,0.5,0.7,1,1.1,1.5c1.5,1.8,3,3.5,4.6,5.2
c0.2,0.2,0.3,0.3,0.5,0.5c5.4,5.5,11.5,10.1,18.2,13.8c0.2,0.1,0.3,0.2,0.5,0.3c1.9,1,3.9,2,5.9,2.9c0.5,0.2,1,0.5,1.5,0.7
c1.7,0.7,3.5,1.3,5.2,1.9c0.8,0.3,1.7,0.6,2.5,0.8c1.5,0.5,3.1,0.8,4.7,1.2c1.1,0.2,2.1,0.5,3.2,0.7c0.4,0.1,0.9,0.2,1.3,0.3
c1.5,0.3,3,0.4,4.5,0.6c0.5,0.1,1.1,0.2,1.6,0.2c2.7,0.3,5.4,0.4,8.1,0.4c16.4,0,32.5-5.1,46.2-14.8c4.4-3.1,5.5-9.2,2.4-13.7
C145.5,147.8,139.4,146.7,135,149.9 M180.6,98.9c0-17.2-5.3-33.1-14.2-46.3c-0.1-0.2-0.2-0.5-0.4-0.7c-1.1-1.6-2.3-3.1-3.5-4.6
c-0.1-0.2-0.3-0.4-0.4-0.6c-8.2-10.1-18.5-17.9-30.2-23c-0.3-0.1-0.6-0.3-1-0.4c-1.9-0.8-3.8-1.5-5.7-2.1c-0.7-0.2-1.4-0.5-2.1-0.7
c-1.7-0.5-3.4-0.9-5.1-1.3c-0.9-0.2-1.9-0.5-2.8-0.7c-0.5-0.1-0.9-0.2-1.4-0.3c-1.3-0.2-2.6-0.3-3.8-0.5c-0.9-0.1-1.8-0.3-2.6-0.3
c-2.1-0.2-4.3-0.3-6.4-0.3c-0.4,0-0.8-0.1-1.2-0.1c-0.1,0-0.1,0-0.2,0c-16.4,0-32.4,5-46.2,14.8C49,35,48,41.1,51,45.6
c3.1,4.4,9.1,5.5,13.5,2.4c10.6-7.5,23-11.3,35.7-11.2c1.8,0,3.6,0.1,5.4,0.3c0.6,0.1,1.1,0.1,1.6,0.2c1.5,0.2,2.9,0.4,4.3,0.7
c0.6,0.1,1.3,0.3,1.9,0.4c1.4,0.3,2.8,0.7,4.2,1.1c0.4,0.1,0.9,0.3,1.3,0.4c1.6,0.5,3.1,1.1,4.6,1.7c0.2,0.1,0.3,0.1,0.5,0.2
c9,3.9,17,10,23.2,17.6c0,0,0.1,0.1,0.1,0.2c8.7,10.7,14,24.5,14,39.4H147c-0.4,0-0.7,0.2-0.9,0.5c-0.2,0.3-0.2,0.8,0,1.1l24,36.4
c0.2,0.3,0.5,0.5,0.9,0.5c0.4,0,0.7-0.2,0.9-0.5l23.9-36.4c0.2-0.3,0.2-0.7,0-1.1c-0.2-0.3-0.5-0.5-0.9-0.5L180.6,98.9L180.6,98.9
L180.6,98.9z` }, null, -1), Fe = [
Me
], ve = /* @__PURE__ */ q({
__name: "refresh-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, i.$attrs, { onClick: r }), Fe, 16));
}
}), Ye = /* @__PURE__ */ o("circle", {
cx: "50",
cy: "36.8101",
r: "10"
}, [
/* @__PURE__ */ o("animate", {
attributeName: "cy",
dur: "1s",
repeatCount: "indefinite",
calcMode: "spline",
keySplines: "0.45 0 0.9 0.55;0 0.45 0.55 0.9",
keyTimes: "0;0.5;1",
values: "23;77;23"
})
], -1), Re = [
Ye
], me = /* @__PURE__ */ q({
__name: "loading-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid",
width: "84",
height: "84"
}, i.$attrs, { onClick: r }), Re, 16));
}
});
function He(c) {
let t = 0, a = 0;
if (c.getBoundingClientRect) {
const r = c.getBoundingClientRect(), i = document.documentElement;
t = r.left + Math.max(i.scrollLeft, document.body.scrollLeft) - i.clientLeft, a = r.top + Math.max(i.scrollTop, document.body.scrollTop) - i.clientTop;
} else
for (; c !== document.body; )
t += c.offsetLeft, a += c.offsetTop, c = c.offsetParent;
return {
domX: t,
domY: a
};
}
function ae(c, t) {
let a = t.relatedTarget;
try {
for (; a && a !== c; )
a = a.parentNode;
} catch (r) {
console.warn(r);
}
return a !== c;
}
function Oe(c, t, a) {
const r = T({ list: [] }), i = (s) => {
const _ = s.currentTarget, x = He(_), l = s.pageX || s.clientX, b = s.pageY || s.clientY, h = x.domX, C = x.domY, Y = l - h, w = b - C, g = parseInt(Y.toString()), f = parseInt(w.toString()), E = /* @__PURE__ */ new Date(), B = r.list.length;
return r.list.push({ key: E.getTime(), index: B + 1, x: g, y: f }), t.click && t.click(g, f), s.cancelBubble = !0, s.preventDefault(), !1;
}, m = (s) => (t.confirm && t.confirm(V(r.list), () => {
y();
}), s.cancelBubble = !0, s.preventDefault(), !1), n = (s) => (e(), s.cancelBubble = !0, s.preventDefault(), !1), u = (s) => (d(), s.cancelBubble = !0, s.preventDefault(), !1), e = () => {
t.close && t.close(), y();
}, d = () => {
t.refresh && t.refresh(), y();
}, y = () => {
r.list = [];
};
return {
dots: r,
clickEvent: i,
confirmEvent: m,
closeEvent: n,
refreshEvent: u,
resetData: y,
clearData: () => {
y(), a && a();
},
refresh: d,
close: e
};
}
const je = { class: "gc-header" }, Ae = ["src"], Ie = { class: "gc-loading" }, Ve = ["src"], Ne = { class: "gc-dots" }, Ue = { class: "gc-footer" }, qe = { class: "gc-icon-block gc-icon-block2" }, Ge = { class: "gc-button-block" }, re = /* @__PURE__ */ q({
__name: "index",
props: {
config: { default: Ee },
events: { default: () => ({}) },
data: { default: () => ({}) }
},
setup(c, { expose: t }) {
const a = c, { data: r, events: i, config: m } = a, n = T({ ...V(r) }), u = T({ ...V(i) }), e = T({ ...Ee(), ...V(m) });
F(() => a.data, (l, b) => {
Object.assign(n, l);
}, { deep: !0 }), F(() => a.events, (l, b) => {
Object.assign(u, l);
}, { deep: !0 }), F(() => a.config, (l, b) => {
Object.assign(e, l);
}, { deep: !0 });
const d = Oe(n, u, () => {
n.thumb = "", n.image = "";
}), y = L(() => {
const l = e.horizontalPadding || 0, b = e.verticalPadding || 0;
return {
width: (e.width || 0) + l * 2 + (e.showTheme ? 2 : 0) + "px",
paddingLeft: l + "px",
paddingRight: l + "px",
paddingTop: b + "px",
paddingBottom: b + "px"
};
}), p = L(() => ({
width: e.thumbWidth + "px",
height: e.thumbHeight + "px"
})), s = L(() => ({
width: e.width + "px",
height: e.height + "px"
})), _ = L(() => n.image && n.image.length > 0 || n.thumb && n.thumb.length > 0), x = L(() => (e.width || 0) > 0 || (e.height || 0) > 0);
return t({
reset: d.resetData,
clear: d.clearData,
refresh: d.refresh,
close: d.close
}), (l, b) => K((z(), H("div", {
class: se(`go-captcha gc-wrapper ${e.showTheme && "gc-theme"}`),
style: D(y.value)
}, [
o("div", je, [
o("span", null, ie(e.title), 1),
K(o("img", {
style: D(p.value),
src: n.thumb,
alt: ""
}, null, 12, Ae), [
[Q, _.value]
])
]),
o("div", {
class: "gc-body",
style: D(s.value)
}, [
o("div", Ie, [
I(me)
]),
K(o("img", {
style: D(s.value),
class: "gc-picture",
src: n.image,
onClick: b[0] || (b[0] = //@ts-ignore
(...h) => v(d).clickEvent && v(d).clickEvent(...h)),
alt: ""
}, null, 12, Ve), [
[Q, _.value]
]),
o("div", Ne, [
(z(!0), H(Ce, null, Be(v(d).dots.list, (h) => (z(), H("div", {
class: "gc-dot",
key: `${h.key + "-" + h.index}`,
style: D({
width: e.dotSize + "px",
height: e.dotSize + "px",
borderRadius: e.dotSize + "px",
top: h.y - (e.dotSize || 1) / 2 - 1 + "px",
left: h.x - (e.dotSize || 1) / 2 - 1 + "px"
})
}, ie(h.index), 5))), 128))
])
], 4),
o("div", Ue, [
o("div", qe, [
I(fe, {
width: e.iconSize,
height: e.iconSize,
onClick: v(d).closeEvent
}, null, 8, ["width", "height", "onClick"]),
I(ve, {
width: e.iconSize,
height: e.iconSize,
onClick: v(d).refreshEvent
}, null, 8, ["width", "height", "onClick"])
]),
o("div", Ge, [
o("button", {
class: se(!_.value && "disabled"),
onClick: b[1] || (b[1] = //@ts-ignore
(...h) => v(d).confirmEvent && v(d).confirmEvent(...h))
}, ie(e.buttonText), 3)
])
])
], 6)), [
[Q, x.value]
]);
}
});
re.name = "gocaptcha-click";
re.install = function(c) {
c.component("gocaptcha-click", re);
};
const xe = () => ({
width: 300,
height: 220,
thumbWidth: 150,
thumbHeight: 40,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: !0,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: !0
}), Je = /* @__PURE__ */ o("path", { d: `M131.6,116.3c0,0-75.6,0-109.7,0c-9.1,0-16.2-7.4-16.2-16.2c0-9.1,7.4-16.2,16.2-16.2c28.7,0,109.7,0,109.7,0
s-5.4-5.4-30.4-30.7c-6.4-6.4-6.4-16.7,0-23.1s16.7-6.4,23.1,0l58.4,58.4c6.4,6.4,6.4,16.7,0,23.1c0,0-32.9,32.9-57.9,57.9
c-6.4,6.4-16.7,6.4-23.1,0c-6.4-6.4-6.4-16.7,0-23.1C121.8,126.2,131.6,116.3,131.6,116.3z` }, null, -1), Ke = [
Je
], ze = /* @__PURE__ */ q({
__name: "arrows-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, i.$attrs, { onClick: r }), Ke, 16));
}
}), Le = () => ({
thumbX: 0,
thumbY: 0,
thumbWidth: 0,
thumbHeight: 0,
image: "",
thumb: ""
});
function Qe(c, t, a, r, i, m, n, u, e) {
const d = T({ dragLeft: 0, thumbLeft: c.thumbX || 0, isFreeze: !1 });
F(() => c, (h, C) => {
d.isFreeze || (d.thumbLeft = h.thumbX || 0);
}, { deep: !0 });
const y = (h) => {
if (!ae(u.value, h))
return;
const C = h.touches && h.touches[0], Y = n.value.offsetLeft, w = i.value.offsetWidth, g = n.value.offsetWidth, f = w - g, E = m.value.offsetWidth, B = m.value.offsetLeft, te = w - E, G = (w - (E + B)) / f;
let N = !1, P = null, Z = 0, O = 0;
C ? Z = C.pageX - Y : Z = h.clientX - Y;
const R = (W) => {
N = !0;
const J = W.touches && W.touches[0];
let M = 0;
J ? M = J.pageX - Z : M = W.clientX - Z;
let Se = B + M * G;
if (M >= f) {
d.dragLeft = f, d.thumbLeft = O = te;
return;
}
if (M <= 0) {
d.dragLeft = 0, d.thumbLeft = O = B;
return;
}
d.dragLeft = M, d.thumbLeft = O = Se, t.move && t.move(O, c.thumbY || 0), W.cancelBubble = !0, W.preventDefault();
}, U = (W) => {
ae(u.value, W) && (X(), N && (N = !1, !(O < 0) && (t.confirm && t.confirm({ x: parseInt(O.toString()), y: c.thumbY || 0 }, () => {
l();
}), W.cancelBubble = !0, W.preventDefault())));
}, j = (W) => {
P = W;
}, A = () => {
P = null;
}, ce = (W) => {
P && (U(P), X());
}, k = a.scope, $ = k ? r.value : u.value, S = k ? r.value : document.body, X = () => {
S.removeEventListener("mousemove", R, !1), S.removeEventListener("touchmove", R, { passive: !1 }), $.removeEventListener("mouseup", U, !1), $.removeEventListener("mouseenter", A, !1), $.removeEventListener("mouseleave", j, !1), $.removeEventListener("touchend", U, !1), S.removeEventListener("mouseleave", U, !1), S.removeEventListener("mouseup", ce, !1), d.isFreeze = !1;
};
d.isFreeze = !0, S.addEventListener("mousemove", R, !1), S.addEventListener("touchmove", R, { passive: !1 }), $.addEventListener("mouseup", U, !1), $.addEventListener("mouseenter", A, !1), $.addEventListener("mouseleave", j, !1), $.addEventListener("touchend", U, !1), S.addEventListener("mouseleave", U, !1), S.addEventListener("mouseup", ce, !1);
}, p = (h) => (_(), h.cancelBubble = !0, h.preventDefault(), !1), s = (h) => (x(), h.cancelBubble = !0, h.preventDefault(), !1), _ = () => {
t && t.close && t.close(), l();
}, x = () => {
t && t.refresh && t.refresh(), l();
}, l = () => {
d.dragLeft = 0, d.thumbLeft = c.thumbX || 0;
};
return {
state: d,
dragEvent: y,
closeEvent: p,
refreshEvent: s,
resetData: l,
clearData: () => {
e && e(), l();
},
refresh: x,
close: _
};
}
const Ze = { class: "gc-header" }, et = { class: "gc-icon-block" }, tt = { class: "gc-loading" }, nt = ["src"], st = ["src"], ct = { class: "gc-footer" }, ot = /* @__PURE__ */ o("div", { class: "gc-drag-line" }, null, -1), ue = /* @__PURE__ */ q({
__name: "index",
props: {
config: { default: xe },
events: { default: () => ({}) },
data: { default: Le }
},
setup(c, { expose: t }) {
const a = c, { data: r, events: i, config: m } = a, n = T({ ...Le(), ...V(r) }), u = T({ ...V(i) }), e = T({ ...xe(), ...V(m) });
F(() => a.data, (f, E) => {
Object.assign(n, f);
}, { deep: !0 }), F(() => a.events, (f, E) => {
Object.assign(u, f);
}, { deep: !0 }), F(() => a.config, (f, E) => {
Object.assign(e, f);
}, { deep: !0 });
const d = ee(null), y = ee(null), p = ee(null), s = ee(null), _ = ee(null), x = Qe(
n,
u,
e,
d,
p,
_,
s,
y,
() => {
n.thumb = "", n.image = "", n.thumbX = 0, n.thumbY = 0, n.thumbWidth = 0, n.thumbHeight = 0;
}
), l = L(() => {
const f = e.horizontalPadding || 0, E = e.verticalPadding || 0;
return {
width: (e.width || 0) + f * 2 + (e.showTheme ? 2 : 0) + "px",
paddingLeft: f + "px",
paddingRight: f + "px",
paddingTop: E + "px",
paddingBottom: E + "px"
};
}), b = L(() => ({
width: n.thumbWidth + "px",
height: n.thumbHeight + "px",
top: n.thumbY + "px",
left: x.state.thumbLeft + "px"
})), h = L(() => ({
width: e.width + "px",
height: e.height + "px"
})), C = L(() => n.image && n.image.length > 0), Y = L(() => n.thumb && n.thumb.length > 0), w = L(() => (e.width || 0) > 0 || (e.height || 0) > 0), g = (f) => f.preventDefault();
return _e(async () => {
await be(), s.value && s.value.addEventListener("dragstart", g);
}), we(() => {
s.value && s.value.removeEventListener("dragstart", g);
}), t({
reset: x.resetData,
clear: x.clearData,
refresh: x.refresh,
close: x.close
}), (f, E) => K((z(), H("div", {
class: se(`go-captcha gc-wrapper ${e.showTheme && "gc-theme"}`),
style: D(l.value),
ref_key: "rootRef",
ref: d
}, [
o("div", Ze, [
o("span", null, ie(e.title), 1),
o("div", et, [
I(fe, {
width: e.iconSize,
height: e.iconSize,
onClick: v(x).closeEvent
}, null, 8, ["width", "height", "onClick"]),
I(ve, {
width: e.iconSize,
height: e.iconSize,
onClick: v(x).refreshEvent
}, null, 8, ["width", "height", "onClick"])
])
]),
o("div", {
class: "gc-body",
ref_key: "containerRef",
ref: p,
style: D(h.value)
}, [
o("div", tt, [
I(me)
]),
K(o("img", {
class: "gc-picture",
style: D(h.value),
src: n.image,
alt: ""
}, null, 12, nt), [
[Q, C.value]
]),
o("div", {
class: "gc-tile",
ref_key: "tileRef",
ref: _,
style: D(b.value)
}, [
K(o("img", {
src: n.thumb,
alt: ""
}, null, 8, st), [
[Q, Y.value]
])
], 4)
], 4),
o("div", ct, [
o("div", {
class: "gc-drag-slide-bar",
ref_key: "dragBarRef",
ref: y
}, [
ot,
o("div", {
class: se(["gc-drag-block", !C.value && "disabled"]),
ref_key: "dragBlockRef",
ref: s,
onMousedown: E[1] || (E[1] = //@ts-ignore
(...B) => v(x).dragEvent && v(x).dragEvent(...B)),
style: D({ left: v(x).state.dragLeft + "px" })
}, [
o("div", {
class: "gc-drag-block-inline",
onTouchstart: E[0] || (E[0] = //@ts-ignore
(...B) => v(x).dragEvent && v(x).dragEvent(...B))
}, [
I(ze)
], 32)
], 38)
], 512)
])
], 6)), [
[Q, w.value]
]);
}
});
ue.name = "gocaptcha-slide";
ue.install = function(c) {
c.component("gocaptcha-slide", ue);
};
const ye = () => ({
width: 300,
height: 220,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: !0,
title: "请拖拽贴图完成拼图",
iconSize: 22,
scope: !0
}), ke = () => ({
thumbX: 0,
thumbY: 0,
thumbWidth: 0,
thumbHeight: 0,
image: "",
thumb: ""
});
function it(c, t, a, r, i, m, n) {
const u = T({ x: c.thumbX || 0, y: c.thumbY || 0, isFreeze: !1 });
F(() => c, (l, b) => {
u.isFreeze || (u.x = l.thumbX || 0, u.y = l.thumbY || 0);
}, { deep: !0 });
const e = (l) => {
if (!ae(i.value, l))
return;
const b = l.touches && l.touches[0], h = m.value.offsetLeft, C = m.value.offsetTop, Y = i.value.offsetWidth, w = i.value.offsetHeight, g = m.value.offsetWidth, f = m.value.offsetHeight, E = Y - g, B = w - f;
let te = !1, ne = null, G = 0, N = 0, P = 0, Z = 0;
b ? (G = b.pageX - h, N = b.pageY - C) : (G = l.clientX - h, N = l.clientY - C);
const O = (X) => {
te = !0;
const W = X.touches && X.touches[0];
let J = 0, M = 0;
W ? (J = W.pageX - G, M = W.pageY - N) : (J = X.clientX - G, M = X.clientY - N), J <= 0 && (J = 0), M <= 0 && (M = 0), J >= E && (J = E), M >= B && (M = B), u.x = J, u.y = M, P = J, Z = M, t.move && t.move(J, M), X.cancelBubble = !0, X.preventDefault();
}, R = (X) => {
ae(i.value, X) && (S(), te && (te = !1, !(P < 0 || Z < 0) && (t.confirm && t.confirm({ x: P, y: Z }, () => {
_();
}), X.cancelBubble = !0, X.preventDefault())));
}, U = (X) => {
ne = X;
}, j = () => {
ne = null;
}, A = (X) => {
ne && (R(ne), S());
}, ce = a.scope, k = ce ? r.value : i.value, $ = ce ? r.value : document.body, S = () => {
$.removeEventListener("mousemove", O, !1), $.removeEventListener("touchmove", O, { passive: !1 }), k.removeEventListener("mouseup", R, !1), k.removeEventListener("mouseenter", j, !1), k.removeEventListener("mouseleave", U, !1), k.removeEventListener("touchend", R, !1), $.removeEventListener("mouseleave", R, !1), $.removeEventListener("mouseup", A, !1), u.isFreeze = !1;
};
u.isFreeze = !0, $.addEventListener("mousemove", O, !1), $.addEventListener("touchmove", O, { passive: !1 }), k.addEventListener("mouseup", R, !1), k.addEventListener("mouseenter", j, !1), k.addEventListener("mouseleave", U, !1), k.addEventListener("touchend", R, !1), $.addEventListener("mouseleave", R, !1), $.addEventListener("mouseup", A, !1);
}, d = (l) => (p(), l.cancelBubble = !0, l.preventDefault(), !1), y = (l) => (s(), l.cancelBubble = !0, l.preventDefault(), !1), p = () => {
t && t.close && t.close(), _();
}, s = () => {
t && t.refresh && t.refresh(), _();
}, _ = () => {
u.x = c.thumbX || 0, u.y = c.thumbY || 0;
};
return {
state: u,
dragEvent: e,
closeEvent: d,
refreshEvent: y,
resetData: _,
clearData: () => {
n && n(), _();
},
refresh: s,
close: p
};
}
const at = { class: "gc-header gc-header2" }, lt = { class: "gc-loading" }, rt = ["src"], ut = ["src"], dt = { class: "gc-footer" }, ht = { class: "gc-icon-block" }, de = /* @__PURE__ */ q({
__name: "index",
props: {
config: { default: ye },
events: { default: () => ({}) },
data: { default: ke }
},
setup(c, { expose: t }) {
const a = c, { data: r, events: i, config: m } = a, n = T({ ...ke(), ...V(r) }), u = T({ ...V(i) }), e = T({ ...ye(), ...V(m) });
F(() => a.data, (w, g) => {
Object.assign(n, w);
}, { deep: !0 }), F(() => a.events, (w, g) => {
Object.assign(u, w);
}, { deep: !0 }), F(() => a.config, (w, g) => {
Object.assign(e, w);
}, { deep: !0 });
const d = ee(null), y = ee(null), p = ee(null), s = it(
n,
u,
e,
d,
y,
p,
() => {
n.thumb = "", n.image = "", n.thumbX = 0, n.thumbY = 0, n.thumbWidth = 0, n.thumbHeight = 0;
}
), _ = L(() => {
const w = e.horizontalPadding || 0, g = e.verticalPadding || 0;
return {
width: (e.width || 0) + w * 2 + (e.showTheme ? 2 : 0) + "px",
paddingLeft: w + "px",
paddingRight: w + "px",
paddingTop: g + "px",
paddingBottom: g + "px"
};
}), x = L(() => ({
width: n.thumbWidth + "px",
height: n.thumbHeight + "px",
top: s.state.y + "px",
left: s.state.x + "px"
})), l = L(() => ({
width: e.width + "px",
height: e.height + "px"
})), b = L(() => n.image && n.image.length > 0), h = L(() => n.thumb && n.thumb.length > 0), C = L(() => (e.width || 0) > 0 || (e.height || 0) > 0), Y = (w) => w.preventDefault();
return _e(async () => {
await be(), p.value && p.value.addEventListener("dragstart", Y);
}), we(() => {
p.value && p.value.removeEventListener("dragstart", Y);
}), t({
reset: s.resetData,
clear: s.clearData,
refresh: s.refresh,
close: s.close
}), (w, g) => K((z(), H("div", {
class: se(`go-captcha gc-wrapper ${e.showTheme && "gc-theme"}`),
style: D(_.value),
ref_key: "rootRef",
ref: d
}, [
o("div", at, [
o("span", null, ie(e.title), 1)
]),
o("div", {
class: "gc-body",
ref_key: "containerRef",
ref: y,
style: D(l.value)
}, [
o("div", lt, [
I(me)
]),
K(o("img", {
class: "gc-picture",
style: D(l.value),
src: n.image,
alt: ""
}, null, 12, rt), [
[Q, b.value]
]),
o("div", {
class: "gc-tile",
ref_key: "tileRef",
ref: p,
style: D(x.value),
onMousedown: g[0] || (g[0] = //@ts-ignore
(...f) => v(s).dragEvent && v(s).dragEvent(...f)),
onTouchstart: g[1] || (g[1] = //@ts-ignore
(...f) => v(s).dragEvent && v(s).dragEvent(...f))
}, [
K(o("img", {
src: n.thumb,
alt: ""
}, null, 8, ut), [
[Q, h.value]
])
], 36)
], 4),
o("div", dt, [
o("div", ht, [
I(fe, {
width: e.iconSize,
height: e.iconSize,
onClick: v(s).closeEvent
}, null, 8, ["width", "height", "onClick"]),
I(ve, {
width: e.iconSize,
height: e.iconSize,
onClick: v(s).refreshEvent
}, null, 8, ["width", "height", "onClick"])
])
])
], 6)), [
[Q, C.value]
]);
}
});
de.name = "gocaptcha-slide-region";
de.install = function(c) {
c.component("gocaptcha-slide-region", de);
};
const pe = () => ({
width: 300,
height: 220,
size: 220,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: !0,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: !0
}), De = () => ({
angle: 0,
image: "",
thumb: "",
thumbSize: 0
});
function gt(c, t, a, r, i, m, n) {
const u = T({ dragLeft: 0, thumbAngle: c.angle || 0, isFreeze: !1 });
F(() => c, (l, b) => {
u.isFreeze || (u.thumbAngle = l.angle || 0);
}, { deep: !0 });
const e = (l) => {
if (!ae(m.value, l))
return;
const b = l.touches && l.touches[0], h = i.value.offsetLeft, C = m.value.offsetWidth, Y = i.value.offsetWidth, w = C - Y, g = 360, f = (g - c.angle) / w;
let E = 0, B = !1, te = null, ne = 0, G = 0;
b ? ne = b.pageX - h : ne = l.clientX - h;
const N = (k) => {
B = !0;
const $ = k.touches && k.touches[0];
let S = 0;
if ($ ? S = $.pageX - ne : S = k.clientX - ne, E = c.angle + S * f, S >= w) {
u.dragLeft = w, u.thumbAngle = G = g;
return;
}
if (S <= 0) {
u.dragLeft = 0, u.thumbAngle = G = c.angle;
return;
}
u.dragLeft = S, u.thumbAngle = G = E, t.rotate && t.rotate(E), k.cancelBubble = !0, k.preventDefault();
}, P = (k) => {
ae(m.value, k) && (ce(), B && (B = !1, !(G < 0) && (t.confirm && t.confirm(parseInt(G.toString()), () => {
_();
}), k.cancelBubble = !0, k.preventDefault())));
}, Z = (k) => {
te = k;
}, O = () => {
te = null;
}, R = (k) => {
te && (P(te), ce());
}, U = a.scope, j = U ? r.value : m.value, A = U ? r.value : document.body, ce = () => {
A.removeEventListener("mousemove", N, !1), A.removeEventListener("touchmove", N, { passive: !1 }), j.removeEventListener("mouseup", P, !1), j.removeEventListener("mouseenter", O, !1), j.removeEventListener("mouseleave", Z, !1), j.removeEventListener("touchend", P, !1), A.removeEventListener("mouseleave", P, !1), A.removeEventListener("mouseup", R, !1), u.isFreeze = !1;
};
u.isFreeze = !0, A.addEventListener("mousemove", N, !1), A.addEventListener("touchmove", N, { passive: !1 }), j.addEventListener("mouseup", P, !1), j.addEventListener("mouseenter", O, !1), j.addEventListener("mouseleave", Z, !1), j.addEventListener("touchend", P, !1), A.addEventListener("mouseleave", P, !1), A.addEventListener("mouseup", R, !1);
}, d = (l) => (p(), l.cancelBubble = !0, l.preventDefault(), !1), y = (l) => (s(), l.cancelBubble = !0, l.preventDefault(), !1), p = () => {
t && t.close && t.close(), _();
}, s = () => {
t && t.refresh && t.refresh(), _();
}, _ = () => {
u.dragLeft = 0, u.thumbAngle = c.angle;
};
return {
state: u,
dragEvent: e,
closeEvent: d,
refreshEvent: y,
resetData: _,
clearData: () => {
n && n(), _();
},
refresh: s,
close: p
};
}
const ft = { class: "gc-header" }, vt = { class: "gc-icon-block" }, mt = { class: "gc-loading" }, pt = ["src"], _t = /* @__PURE__ */ o("div", { class: "gc-round" }, null, -1), bt = { class: "gc-thumb gc-rotate-thumb" }, wt = ["src"], Et = { class: "gc-footer" }, xt = /* @__PURE__ */ o("div", { class: "gc-drag-line" }, null, -1), he = /* @__PURE__ */ q({
__name: "index",
props: {
config: { default: pe },
events: { default: () => ({}) },
data: { default: De }
},
setup(c, { expose: t }) {
const a = c, { data: r, events: i, config: m } = a, n = T({ ...De(), ...V(r) }), u = T({ ...V(i) }), e = T({ ...pe(), ...V(m) });
F(() => a.data, (g, f) => {
Object.assign(n, g);
}, { deep: !0 }), F(() => a.events, (g, f) => {
Object.assign(u, g);
}, { deep: !0 }), F(() => a.config, (g, f) => {
Object.assign(e, g);
}, { deep: !0 });
const d = ee(null), y = ee(null), p = ee(null), s = gt(
n,
u,
e,
d,
p,
y,
() => {
n.thumb = "", n.image = "", n.angle = 0;
}
), _ = L(() => {
const g = e.horizontalPadding || 0, f = e.verticalPadding || 0;
return {
width: (e.width || 0) + g * 2 + (e.showTheme ? 2 : 0) + "px",
paddingLeft: g + "px",
paddingRight: g + "px",
paddingTop: f + "px",
paddingBottom: f + "px"
};
}), x = L(() => ({
transform: `rotate(${s.state.thumbAngle}deg)`,
...n.thumbSize > 0 ? {
width: n.thumbSize + "px",
height: n.thumbSize + "px"
} : {}
})), l = L(() => ({
width: e.width + "px",
height: e.height + "px"
})), b = L(() => {
const g = (e.size || 0) > 0 ? e.size : pe().size;
return {
width: g + "px",
height: g + "px"
};
}), h = L(() => n.image && n.image.length > 0), C = L(() => n.thumb && n.thumb.length > 0), Y = L(() => (e.width || 0) > 0 || (e.height || 0) > 0), w = (g) => g.preventDefault();
return _e(async () => {
await be(), p.value && p.value.addEventListener("dragstart", w);
}), we(() => {
p.value && p.value.removeEventListener("dragstart", w);
}), t({
reset: s.resetData,
clear: s.clearData,
refresh: s.refresh,
close: s.close
}), (g, f) => K((z(), H("div", {
class: se(`go-captcha gc-wrapper ${e.showTheme && "gc-theme"}`),
style: D(_.value),
ref_key: "rootRef",
ref: d
}, [
o("div", ft, [
o("span", null, ie(e.title), 1),
o("div", vt, [
I(fe, {
width: e.iconSize,
height: e.iconSize,
onClick: v(s).closeEvent
}, null, 8, ["width", "height", "onClick"]),
I(ve, {
width: e.iconSize,
height: e.iconSize,
onClick: v(s).refreshEvent
}, null, 8, ["width", "height", "onClick"])
])
]),
o("div", {
class: "gc-body gc-rotate-body",
ref: "containerRef",
style: D(l.value)
}, [
o("div", {
class: "gc-body-inner",
style: D(b.value)
}, [
o("div", mt, [
I(me)
]),
o("div", {
class: "gc-picture gc-rotate-picture",
style: D(b.value)
}, [
K(o("img", {
src: n.image,
alt: ""
}, null, 8, pt), [
[Q, h.value]
]),
_t
], 4),
o("div", bt, [
o("div", {
class: "gc-rotate-thumb-block",
style: D(x.value)
}, [
K(o("img", {
src: n.thumb,
alt: ""
}, null, 8, wt), [
[Q, C.value]
])
], 4)
])
], 4)
], 4),
o("div", Et, [
o("div", {
class: "gc-drag-slide-bar",
ref_key: "dragBarRef",
ref: y
}, [
xt,
o("div", {
class: se(["gc-drag-block", !h.value && "disabled"]),
ref_key: "dragBlockRef",
ref: p,
onMousedown: f[1] || (f[1] = //@ts-ignore
(...E) => v(s).dragEvent && v(s).dragEvent(...E)),
style: D({ left: v(s).state.dragLeft + "px" })
}, [
o("div", {
class: "gc-drag-block-inline",
onTouchstart: f[0] || (f[0] = //@ts-ignore
(...E) => v(s).dragEvent && v(s).dragEvent(...E))
}, [
I(ze)
], 32)
], 38)
], 512)
])
], 6)), [
[Q, Y.value]
]);
}
});
he.name = "gocaptcha-rotate";
he.install = function(c) {
c.component("gocaptcha-rotate", he);
};
const Lt = /* @__PURE__ */ o("circle", {
fill: "#3E7CFF",
cx: "100",
cy: "100",
r: "96.3"
}, null, -1), yt = /* @__PURE__ */ o("path", {
fill: "#FFFFFF",
d: `M140.8,64.4l-39.6-11.9h-2.4L59.2,64.4c-1.6,0.8-2.8,2.4-2.8,4v24.1c0,25.3,15.8,45.9,42.3,54.6
c0.4,0,0.8,0.4,1.2,0.4c0.4,0,0.8,0,1.2-0.4c26.5-8.7,42.3-28.9,42.3-54.6V68.3C143.5,66.8,142.3,65.2,140.8,64.4z`
}, null, -1), kt = [
Lt,
yt
], Dt = /* @__PURE__ */ q({
__name: "btn-default-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, i.$attrs, { onClick: r }), kt, 16));
}
}), $t = /* @__PURE__ */ o("path", {
fill: "#FFA000",
d: `M184,26.6L102.4,2.1h-4.9L16,26.6c-3.3,1.6-5.7,4.9-5.7,8.2v49.8c0,52.2,32.6,94.7,87.3,112.6
c0.8,0,1.6,0.8,2.4,0.8s1.6,0,2.4-0.8c54.7-18,87.3-59.6,87.3-112.6V34.7C189.8,31.5,187.3,28.2,184,26.6z M107.3,109.1
c-0.5,5.4-3.9,7.9-7.3,7.9c-2.5,0,0,0,0,0c-3.2-0.6-5.7-2-6.8-7.4l-4.4-50.9c0-5.1,6.2-9.7,11.5-9.7c5.3,0,11,4.7,11,9.9
L107.3,109.1z M109.3,133.3c0,5.1-4.2,9.3-9.3,9.3c-5.1,0-9.3-4.2-9.3-9.3c0-5.1,4.2-9.3,9.3-9.3C105.1,124,109.3,128.1,109.3,133.3
z`
}, null, -1), zt = [
$t
], St = /* @__PURE__ */ q({
__name: "btn-warn-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, i.$attrs, { onClick: r }), zt, 16));
}
}), Ct = /* @__PURE__ */ o("path", {
fill: "#ED4630",
d: `M184,26.6L102.4,2.1h-4.9L16,26.6c-3.3,1.6-5.7,4.9-5.7,8.2v49.8c0,52.2,32.6,94.7,87.3,112.6
c0.8,0,1.6,0.8,2.4,0.8s1.6,0,2.4-0.8c54.7-18,87.3-59.6,87.3-112.6V34.7C189.8,31.5,187.3,28.2,184,26.6z M134.5,123.1
c3.1,3.1,3.1,8.2,0,11.3c-1.6,1.6-3.6,2.3-5.7,2.3s-4.1-0.8-5.7-2.3L100,111.3l-23.1,23.1c-1.6,1.6-3.6,2.3-5.7,2.3
c-2,0-4.1-0.8-5.7-2.3c-3.1-3.1-3.1-8.2,0-11.3L88.7,100L65.5,76.9c-3.1-3.1-3.1-8.2,0-11.3c3.1-3.1,8.2-3.1,11.3,0L100,88.7
l23.1-23.1c3.1-3.1,8.2-3.1,11.3,0c3.1,3.1,3.1,8.2,0,11.3L111.3,100L134.5,123.1z`
}, null, -1), Bt = [
Ct
], Tt = /* @__PURE__ */ q({
__name: "btn-error-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, i.$attrs, { onClick: r }), Bt, 16));
}
}), Pt = /* @__PURE__ */ o("path", {
fill: "#5EAA2F",
d: `M183.3,27.2L102.4,2.9h-4.9L16.7,27.2C13.4,28.8,11,32,11,35.3v49.4c0,51.8,32.4,93.9,86.6,111.7
c0.8,0,1.6,0.8,2.4,0.8c0.8,0,1.6,0,2.4-0.8c54.2-17.8,86.6-59.1,86.6-111.7V35.3C189,32,186.6,28.8,183.3,27.2z M146.1,81.4
l-48.5,48.5c-1.6,1.6-3.2,2.4-5.7,2.4c-2.4,0-4-0.8-5.7-2.4L62,105.7c-3.2-3.2-3.2-8.1,0-11.3c3.2-3.2,8.1-3.2,11.3,0l18.6,18.6
l42.9-42.9c3.2-3.2,8.1-3.2,11.3,0C149.4,73.3,149.4,78.2,146.1,81.4L146.1,81.4z`
}, null, -1), Xt = [
Pt
], Wt = /* @__PURE__ */ q({
__name: "btn-success-icon",
emits: ["click"],
setup(c, { emit: t }) {
const a = t;
function r(i) {
a("click", i);
}
return (i, m) => (z(), H("svg", oe({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, i.$attrs, { onClick: r }), Xt, 16));
}
}), $e = () => ({
width: 330,
height: 44,
verticalPadding: 12,
horizontalPadding: 16
}), ge = /* @__PURE__ */ q({
__name: "index",
props: {
config: { default: $e },
clickEvent: {},
disabled: { type: Boolean, default: !1 },
type: { default: "default" },
title: { default: "点击按键进行验证" }
},
emits: ["click-event"],
setup(c, { emit: t }) {
const a = c, { type: r, title: i, disabled: m, config: n } = Te(a), u = T({ ...$e(), ...V(n) });
F(() => a.config, (s, _) => {
Object.assign(u, s);
}, { deep: !0 });
const e = L(() => ["go-captcha", "gc-btn-block", `gc-${r.value}`, m.value ? "gc-disabled" : ""]), d = L(() => ({
width: u.width + "px",
height: u.height + "px",
paddingLeft: u.horizontalPadding + "px",
paddingRight: u.horizontalPadding + "px",
paddingTop: u.verticalPadding + "px",
paddingBottom: u.verticalPadding + "px"
})), y = t;
function p(s) {
y("click-event", s);
}
return (s, _) => (z(), H("div", {
class: se(e.value),
style: D(d.value),
onClick: p
}, [
o("div", {
class: se(v(r) === "default" ? "gc-ripple" : "")
}, [
v(r) === "default" ? (z(), le(Dt, { key: 0 })) : v(r) === "warn" ? (z(), le(St, { key: 1 })) : v(r) === "error" ? (z(), le(Tt, { key: 2 })) : v(r) === "success" ? (z(), le(Wt, { key: 3 })) : Pe("", !0)
], 2),
o("span", null, ie(v(i)), 1)
], 6));
}
});
ge.name = "gocaptcha-button";
ge.install = function(c) {
c.component("gocaptcha-button", ge);
};
const Ft = {
install(c) {
re.install(c), ue.install(c), de.install(c), he.install(c), ge.install(c);
}
};
export {
ge as Button,
re as Click,
he as Rotate,
ue as Slide,
de as SlideRegion,
Ft as default
};