miharakinu-go-captcha-vue
Version:
GoCaptcha of Vue, which implements click mode, slider mode, drag-drop mode and rotation mode.
1,148 lines (1,147 loc) • 39.9 kB
JavaScript
import { defineComponent as J, openBlock as D, createElementBlock as H, mergeProps as ie, createElementVNode as a, reactive as T, toRaw as U, watch as P, computed as L, withDirectives as Z, normalizeClass as ne, normalizeStyle as S, toDisplayString as oe, vShow as ee, createVNode as A, unref as m, Fragment as ze, renderList as Te, ref as q, onMounted as fe, nextTick as be, onUnmounted as we, toRefs as Be, 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__ */ a("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
], ve = /* @__PURE__ */ J({
__name: "close-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, l.$attrs, { onClick: d }), We, 16));
}
}), Me = /* @__PURE__ */ a("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
], me = /* @__PURE__ */ J({
__name: "refresh-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, l.$attrs, { onClick: d }), Fe, 16));
}
}), Re = /* @__PURE__ */ a("circle", {
cx: "50",
cy: "36.8101",
r: "10"
}, [
/* @__PURE__ */ a("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), Ye = [
Re
], pe = /* @__PURE__ */ J({
__name: "loading-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid",
width: "84",
height: "84"
}, l.$attrs, { onClick: d }), Ye, 16));
}
});
function He(n) {
let t = 0, s = 0;
if (n.getBoundingClientRect) {
const d = n.getBoundingClientRect(), l = document.documentElement;
t = d.left + Math.max(l.scrollLeft, document.body.scrollLeft) - l.clientLeft, s = d.top + Math.max(l.scrollTop, document.body.scrollTop) - l.clientTop;
} else
for (; n !== document.body; )
t += n.offsetLeft, s += n.offsetTop, n = n.offsetParent;
return {
domX: t,
domY: s
};
}
function ae(n, t) {
let s = t.relatedTarget;
try {
for (; s && s !== n; )
s = s.parentNode;
} catch (d) {
console.warn(d);
}
return s !== n;
}
function Oe(n, t, s) {
const d = T({ list: [] }), l = (i) => {
const v = i.currentTarget, X = He(v), o = i.pageX || i.clientX, b = i.pageY || i.clientY, h = X.domX, B = X.domY, W = o - h, w = b - B, g = parseInt(W.toString()), E = parseInt(w.toString()), p = /* @__PURE__ */ new Date(), y = d.list.length;
return d.list.push({ key: p.getTime(), index: y + 1, x: g, y: E }), t.click && t.click(g, E), i.cancelBubble = !0, i.preventDefault(), !1;
}, f = (i) => (t.confirm && t.confirm(U(d.list), () => {
x();
}), i.cancelBubble = !0, i.preventDefault(), !1), r = (i) => (e(), i.cancelBubble = !0, i.preventDefault(), !1), c = (i) => (u(), i.cancelBubble = !0, i.preventDefault(), !1), e = () => {
t.close && t.close(), x();
}, u = () => {
t.refresh && t.refresh(), x();
}, x = () => {
d.list = [];
};
return {
dots: d,
clickEvent: l,
confirmEvent: f,
closeEvent: r,
refreshEvent: c,
resetData: x,
clearData: () => {
x(), s && s();
},
refresh: u,
close: e
};
}
const Ae = { class: "gc-header" }, je = ["src"], Ie = { class: "gc-loading" }, Ne = ["src"], Ue = { class: "gc-dots" }, Ve = { class: "gc-footer" }, Ge = { class: "gc-icon-block gc-icon-block2" }, qe = { class: "gc-button-block" }, re = /* @__PURE__ */ J({
__name: "index",
props: {
config: { default: Ee },
events: { default: () => ({}) },
data: { default: () => ({}) }
},
setup(n, { expose: t }) {
const s = n, { data: d, events: l, config: f } = s, r = T({ ...U(d) }), c = T({ ...U(l) }), e = T({ ...Ee(), ...U(f) });
P(() => s.data, (o, b) => {
Object.assign(r, o);
}, { deep: !0 }), P(() => s.events, (o, b) => {
Object.assign(c, o);
}, { deep: !0 }), P(() => s.config, (o, b) => {
Object.assign(e, o);
}, { deep: !0 });
const u = Oe(r, c, () => {
r.thumb = "", r.image = "";
}), x = L(() => {
const o = e.horizontalPadding || 0, b = e.verticalPadding || 0;
return {
width: (e.width || 0) + o * 2 + (e.showTheme ? 2 : 0) + "px",
paddingLeft: o + "px",
paddingRight: o + "px",
paddingTop: b + "px",
paddingBottom: b + "px"
};
}), _ = L(() => ({
width: e.thumbWidth + "px",
height: e.thumbHeight + "px"
})), i = L(() => ({
width: e.width + "px",
height: e.height + "px"
})), v = L(() => r.image && r.image.length > 0 || r.thumb && r.thumb.length > 0), X = L(() => (e.width || 0) > 0 || (e.height || 0) > 0);
return t({
reset: u.resetData,
clear: u.clearData,
refresh: u.refresh,
close: u.close
}), (o, b) => Z((D(), H("div", {
class: ne(`go-captcha gc-wrapper ${e.showTheme && "gc-theme"}`),
style: S(x.value)
}, [
a("div", Ae, [
a("span", null, oe(e.title), 1),
Z(a("img", {
style: S(_.value),
src: r.thumb,
alt: ""
}, null, 12, je), [
[ee, v.value]
])
]),
a("div", {
class: "gc-body",
style: S(i.value)
}, [
a("div", Ie, [
A(pe)
]),
Z(a("img", {
style: S(i.value),
class: "gc-picture",
src: r.image,
onClick: b[0] || (b[0] = //@ts-ignore
(...h) => m(u).clickEvent && m(u).clickEvent(...h)),
alt: ""
}, null, 12, Ne), [
[ee, v.value]
]),
a("div", Ue, [
(D(!0), H(ze, null, Te(m(u).dots.list, (h) => (D(), H("div", {
class: "gc-dot",
key: `${h.key + "-" + h.index}`,
style: S({
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"
})
}, oe(h.index), 5))), 128))
])
], 4),
a("div", Ve, [
a("div", Ge, [
A(ve, {
width: e.iconSize,
height: e.iconSize,
onClick: m(u).closeEvent
}, null, 8, ["width", "height", "onClick"]),
A(me, {
width: e.iconSize,
height: e.iconSize,
onClick: m(u).refreshEvent
}, null, 8, ["width", "height", "onClick"])
]),
a("div", qe, [
a("button", {
class: ne(!v.value && "disabled"),
onClick: b[1] || (b[1] = //@ts-ignore
(...h) => m(u).confirmEvent && m(u).confirmEvent(...h))
}, oe(e.buttonText), 3)
])
])
], 6)), [
[ee, X.value]
]);
}
});
re.name = "gocaptcha-click";
re.install = function(n) {
n.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__ */ a("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
], De = /* @__PURE__ */ J({
__name: "arrows-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, l.$attrs, { onClick: d }), Ke, 16));
}
}), ye = () => ({
thumbX: 0,
thumbY: 0,
thumbWidth: 0,
thumbHeight: 0,
image: "",
thumb: ""
});
function Qe(n, t, s, d, l, f, r, c, e) {
const u = T({ dragLeft: 0, thumbLeft: n.thumbX || 0, isFreeze: !1 });
P(() => n, (h, B) => {
u.isFreeze || (u.thumbLeft = h.thumbX || 0);
}, { deep: !0 });
const x = (h) => {
if (!ae(c.value, h))
return;
const B = h.touches && h.touches[0], W = r.value.offsetLeft, w = l.value.offsetWidth, g = r.value.offsetWidth, E = w - g, p = f.value.offsetWidth, y = f.value.offsetLeft, C = w - p, K = (w - (p + y)) / E;
let V = !1, M = null, te = 0, j = 0;
B ? te = B.pageX - W : te = h.clientX - W;
const O = (R) => {
V = !0;
const Q = R.touches && R.touches[0];
let Y = 0;
Q ? Y = Q.pageX - te : Y = R.clientX - te;
let Ce = y + Y * K;
if (Y >= E) {
u.dragLeft = E, u.thumbLeft = j = C;
return;
}
if (Y <= 0) {
u.dragLeft = 0, u.thumbLeft = j = y;
return;
}
u.dragLeft = Y, u.thumbLeft = j = Ce, t.move && t.move(j, n.thumbY || 0), R.cancelBubble = !0, R.preventDefault();
}, G = (R) => {
ae(c.value, R) && (F(), V && (V = !1, !(j < 0) && (t.confirm && t.confirm({ x: parseInt(j.toString()), y: n.thumbY || 0 }, () => {
o();
}), R.cancelBubble = !0, R.preventDefault())));
}, I = (R) => {
M = R;
}, N = () => {
M = null;
}, ce = (R) => {
M && (G(M), F());
}, k = s.scope, $ = k ? d.value : c.value, z = k ? d.value : document.body, F = () => {
z.removeEventListener("mousemove", O, !1), z.removeEventListener("touchmove", O, { passive: !1 }), $.removeEventListener("mouseup", G, !1), $.removeEventListener("mouseenter", N, !1), $.removeEventListener("mouseleave", I, !1), $.removeEventListener("touchend", G, !1), z.removeEventListener("mouseleave", G, !1), z.removeEventListener("mouseup", ce, !1), u.isFreeze = !1;
};
u.isFreeze = !0, z.addEventListener("mousemove", O, !1), z.addEventListener("touchmove", O, { passive: !1 }), $.addEventListener("mouseup", G, !1), $.addEventListener("mouseenter", N, !1), $.addEventListener("mouseleave", I, !1), $.addEventListener("touchend", G, !1), z.addEventListener("mouseleave", G, !1), z.addEventListener("mouseup", ce, !1);
}, _ = (h) => (v(), h.cancelBubble = !0, h.preventDefault(), !1), i = (h) => (X(), h.cancelBubble = !0, h.preventDefault(), !1), v = () => {
t && t.close && t.close(), o();
}, X = () => {
t && t.refresh && t.refresh(), o();
}, o = () => {
u.dragLeft = 0, u.thumbLeft = n.thumbX || 0;
};
return {
state: u,
dragEvent: x,
closeEvent: _,
refreshEvent: i,
resetData: o,
clearData: () => {
e && e(), o();
},
refresh: X,
close: v
};
}
const Ze = {
__name: "Tips",
props: {
// 是否显示
show: {
type: Boolean,
default: !1
},
// 显示内容
content: {
type: String,
default: ""
},
// 状态类型
type: {
type: String,
default: "SUCCESS",
validator: (n) => ["SUCCESS", "WARNING", "ERROR"].includes(n)
},
// 自动关闭时间（毫秒），设为0则不自动关闭
duration: {
type: Number,
default: 1500
}
},
emits: ["update:show"],
setup(n, { emit: t }) {
const s = n, d = t, l = q(null), f = q(!1);
let r = null;
const c = L(() => `notification-${s.type.toLowerCase()}`);
P(
() => s.show,
(x) => {
x ? e() : u();
}
), fe(() => {
s.show && e();
});
function e() {
clearTimeout(r), f.value = !0, s.duration > 0 && (r = setTimeout(() => {
u();
}, s.duration));
}
function u() {
f.value = !1, d("update:show", !1);
}
return (x, _) => (D(), H("div", {
ref_key: "notification",
ref: l,
class: ne(["notification", [c.value, { show: f.value }]])
}, oe(n.content), 3));
}
}, et = { class: "gc-header" }, tt = { class: "gc-icon-block" }, nt = { class: "gc-loading" }, st = ["src"], ct = ["src"], ot = { class: "gc-footer" }, it = /* @__PURE__ */ a("div", { class: "gc-drag-line" }, null, -1), ue = /* @__PURE__ */ J({
__name: "index",
props: {
config: { default: xe },
events: { default: () => ({}) },
data: { default: ye }
},
setup(n, { expose: t }) {
const s = T({
show: !1,
content: "",
type: "SUCCESS"
}), d = n, { data: l, events: f, config: r } = d, c = T({ ...ye(), ...U(l) }), e = T({ ...U(f) }), u = T({ ...xe(), ...U(r) });
P(() => d.data, (p, y) => {
Object.assign(c, p);
}, { deep: !0 }), P(() => d.events, (p, y) => {
Object.assign(e, p);
}, { deep: !0 }), P(() => d.config, (p, y) => {
Object.assign(u, p);
}, { deep: !0 });
const x = q(null), _ = q(null), i = q(null), v = q(null), X = q(null), o = Qe(
c,
e,
u,
x,
i,
X,
v,
_,
() => {
c.thumb = "", c.image = "", c.thumbX = 0, c.thumbY = 0, c.thumbWidth = 0, c.thumbHeight = 0;
}
), b = L(() => {
const p = u.horizontalPadding || 0, y = u.verticalPadding || 0;
return {
width: (u.width || 0) + p * 2 + (u.showTheme ? 2 : 0) + "px",
paddingLeft: p + "px",
paddingRight: p + "px",
paddingTop: y + "px",
paddingBottom: y + "px"
};
}), h = L(() => ({
width: c.thumbWidth + "px",
height: c.thumbHeight + "px",
top: c.thumbY + "px",
left: o.state.thumbLeft + "px"
})), B = L(() => ({
width: u.width + "px",
height: u.height + "px"
})), W = L(() => c.image && c.image.length > 0), w = L(() => c.thumb && c.thumb.length > 0), g = L(() => (u.width || 0) > 0 || (u.height || 0) > 0), E = (p) => p.preventDefault();
return fe(async () => {
await be(), v.value && v.value.addEventListener("dragstart", E);
}), we(() => {
v.value && v.value.removeEventListener("dragstart", E);
}), t({
reset: o.resetData,
clear: o.clearData,
refresh: o.refresh,
close: o.close,
setTips: (p, y, C) => {
s.show = p, s.content = y, s.type = C;
}
}), (p, y) => Z((D(), H("div", {
class: ne(`go-captcha gc-wrapper ${u.showTheme && "gc-theme"}`),
style: S(b.value),
ref_key: "rootRef",
ref: x
}, [
a("div", et, [
a("span", null, oe(u.title), 1),
a("div", tt, [
A(ve, {
width: u.iconSize,
height: u.iconSize,
onClick: m(o).closeEvent
}, null, 8, ["width", "height", "onClick"]),
A(me, {
width: u.iconSize,
height: u.iconSize,
onClick: m(o).refreshEvent
}, null, 8, ["width", "height", "onClick"])
])
]),
a("div", {
class: ne(`gc-body ${s.type == "SUCCESS" && s.show ? "shine-effect-tr-bl" : ""}`),
ref_key: "containerRef",
ref: i,
style: S(B.value)
}, [
a("div", nt, [
A(pe)
]),
Z(a("img", {
class: "gc-picture",
style: S(B.value),
src: c.image,
alt: ""
}, null, 12, st), [
[ee, W.value]
]),
A(Ze, {
show: s.show,
"onUpdate:show": y[0] || (y[0] = (C) => s.show = C),
content: s.content,
type: s.type
}, null, 8, ["show", "content", "type"]),
a("div", {
class: "gc-tile",
ref_key: "tileRef",
ref: X,
style: S(h.value)
}, [
Z(a("img", {
src: c.thumb,
alt: ""
}, null, 8, ct), [
[ee, w.value]
])
], 4)
], 6),
a("div", ot, [
a("div", {
class: "gc-drag-slide-bar",
ref_key: "dragBarRef",
ref: _
}, [
it,
a("div", {
class: ne(["gc-drag-block", !W.value && "disabled"]),
ref_key: "dragBlockRef",
ref: v,
onMousedown: y[2] || (y[2] = //@ts-ignore
(...C) => m(o).dragEvent && m(o).dragEvent(...C)),
style: S({ left: m(o).state.dragLeft + "px" })
}, [
a("div", {
class: "gc-drag-block-inline",
onTouchstart: y[1] || (y[1] = //@ts-ignore
(...C) => m(o).dragEvent && m(o).dragEvent(...C))
}, [
A(De)
], 32)
], 38)
], 512)
])
], 6)), [
[ee, g.value]
]);
}
});
ue.name = "gocaptcha-slide";
ue.install = function(n) {
n.component("gocaptcha-slide", ue);
};
const Le = () => ({
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 at(n, t, s, d, l, f, r) {
const c = T({ x: n.thumbX || 0, y: n.thumbY || 0, isFreeze: !1 });
P(() => n, (o, b) => {
c.isFreeze || (c.x = o.thumbX || 0, c.y = o.thumbY || 0);
}, { deep: !0 });
const e = (o) => {
if (!ae(l.value, o))
return;
const b = o.touches && o.touches[0], h = f.value.offsetLeft, B = f.value.offsetTop, W = l.value.offsetWidth, w = l.value.offsetHeight, g = f.value.offsetWidth, E = f.value.offsetHeight, p = W - g, y = w - E;
let C = !1, se = null, K = 0, V = 0, M = 0, te = 0;
b ? (K = b.pageX - h, V = b.pageY - B) : (K = o.clientX - h, V = o.clientY - B);
const j = (F) => {
C = !0;
const R = F.touches && F.touches[0];
let Q = 0, Y = 0;
R ? (Q = R.pageX - K, Y = R.pageY - V) : (Q = F.clientX - K, Y = F.clientY - V), Q <= 0 && (Q = 0), Y <= 0 && (Y = 0), Q >= p && (Q = p), Y >= y && (Y = y), c.x = Q, c.y = Y, M = Q, te = Y, t.move && t.move(Q, Y), F.cancelBubble = !0, F.preventDefault();
}, O = (F) => {
ae(l.value, F) && (z(), C && (C = !1, !(M < 0 || te < 0) && (t.confirm && t.confirm({ x: M, y: te }, () => {
v();
}), F.cancelBubble = !0, F.preventDefault())));
}, G = (F) => {
se = F;
}, I = () => {
se = null;
}, N = (F) => {
se && (O(se), z());
}, ce = s.scope, k = ce ? d.value : l.value, $ = ce ? d.value : document.body, z = () => {
$.removeEventListener("mousemove", j, !1), $.removeEventListener("touchmove", j, { passive: !1 }), k.removeEventListener("mouseup", O, !1), k.removeEventListener("mouseenter", I, !1), k.removeEventListener("mouseleave", G, !1), k.removeEventListener("touchend", O, !1), $.removeEventListener("mouseleave", O, !1), $.removeEventListener("mouseup", N, !1), c.isFreeze = !1;
};
c.isFreeze = !0, $.addEventListener("mousemove", j, !1), $.addEventListener("touchmove", j, { passive: !1 }), k.addEventListener("mouseup", O, !1), k.addEventListener("mouseenter", I, !1), k.addEventListener("mouseleave", G, !1), k.addEventListener("touchend", O, !1), $.addEventListener("mouseleave", O, !1), $.addEventListener("mouseup", N, !1);
}, u = (o) => (_(), o.cancelBubble = !0, o.preventDefault(), !1), x = (o) => (i(), o.cancelBubble = !0, o.preventDefault(), !1), _ = () => {
t && t.close && t.close(), v();
}, i = () => {
t && t.refresh && t.refresh(), v();
}, v = () => {
c.x = n.thumbX || 0, c.y = n.thumbY || 0;
};
return {
state: c,
dragEvent: e,
closeEvent: u,
refreshEvent: x,
resetData: v,
clearData: () => {
r && r(), v();
},
refresh: i,
close: _
};
}
const lt = { class: "gc-header gc-header2" }, rt = { class: "gc-loading" }, ut = ["src"], dt = ["src"], ht = { class: "gc-footer" }, gt = { class: "gc-icon-block" }, de = /* @__PURE__ */ J({
__name: "index",
props: {
config: { default: Le },
events: { default: () => ({}) },
data: { default: ke }
},
setup(n, { expose: t }) {
const s = n, { data: d, events: l, config: f } = s, r = T({ ...ke(), ...U(d) }), c = T({ ...U(l) }), e = T({ ...Le(), ...U(f) });
P(() => s.data, (w, g) => {
Object.assign(r, w);
}, { deep: !0 }), P(() => s.events, (w, g) => {
Object.assign(c, w);
}, { deep: !0 }), P(() => s.config, (w, g) => {
Object.assign(e, w);
}, { deep: !0 });
const u = q(null), x = q(null), _ = q(null), i = at(
r,
c,
e,
u,
x,
_,
() => {
r.thumb = "", r.image = "", r.thumbX = 0, r.thumbY = 0, r.thumbWidth = 0, r.thumbHeight = 0;
}
), v = 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: r.thumbWidth + "px",
height: r.thumbHeight + "px",
top: i.state.y + "px",
left: i.state.x + "px"
})), o = L(() => ({
width: e.width + "px",
height: e.height + "px"
})), b = L(() => r.image && r.image.length > 0), h = L(() => r.thumb && r.thumb.length > 0), B = L(() => (e.width || 0) > 0 || (e.height || 0) > 0), W = (w) => w.preventDefault();
return fe(async () => {
await be(), _.value && _.value.addEventListener("dragstart", W);
}), we(() => {
_.value && _.value.removeEventListener("dragstart", W);
}), t({
reset: i.resetData,
clear: i.clearData,
refresh: i.refresh,
close: i.close
}), (w, g) => Z((D(), H("div", {
class: ne(`go-captcha gc-wrapper ${e.showTheme && "gc-theme"}`),
style: S(v.value),
ref_key: "rootRef",
ref: u
}, [
a("div", lt, [
a("span", null, oe(e.title), 1)
]),
a("div", {
class: "gc-body",
ref_key: "containerRef",
ref: x,
style: S(o.value)
}, [
a("div", rt, [
A(pe)
]),
Z(a("img", {
class: "gc-picture",
style: S(o.value),
src: r.image,
alt: ""
}, null, 12, ut), [
[ee, b.value]
]),
a("div", {
class: "gc-tile",
ref_key: "tileRef",
ref: _,
style: S(X.value),
onMousedown: g[0] || (g[0] = //@ts-ignore
(...E) => m(i).dragEvent && m(i).dragEvent(...E)),
onTouchstart: g[1] || (g[1] = //@ts-ignore
(...E) => m(i).dragEvent && m(i).dragEvent(...E))
}, [
Z(a("img", {
src: r.thumb,
alt: ""
}, null, 8, dt), [
[ee, h.value]
])
], 36)
], 4),
a("div", ht, [
a("div", gt, [
A(ve, {
width: e.iconSize,
height: e.iconSize,
onClick: m(i).closeEvent
}, null, 8, ["width", "height", "onClick"]),
A(me, {
width: e.iconSize,
height: e.iconSize,
onClick: m(i).refreshEvent
}, null, 8, ["width", "height", "onClick"])
])
])
], 6)), [
[ee, B.value]
]);
}
});
de.name = "gocaptcha-slide-region";
de.install = function(n) {
n.component("gocaptcha-slide-region", de);
};
const _e = () => ({
width: 300,
height: 220,
size: 220,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: !0,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: !0
}), Se = () => ({
angle: 0,
image: "",
thumb: "",
thumbSize: 0
});
function ft(n, t, s, d, l, f, r) {
const c = T({ dragLeft: 0, thumbAngle: n.angle || 0, isFreeze: !1 });
P(() => n, (o, b) => {
c.isFreeze || (c.thumbAngle = o.angle || 0);
}, { deep: !0 });
const e = (o) => {
if (!ae(f.value, o))
return;
const b = o.touches && o.touches[0], h = l.value.offsetLeft, B = f.value.offsetWidth, W = l.value.offsetWidth, w = B - W, g = 360, E = (g - n.angle) / w;
let p = 0, y = !1, C = null, se = 0, K = 0;
b ? se = b.pageX - h : se = o.clientX - h;
const V = (k) => {
y = !0;
const $ = k.touches && k.touches[0];
let z = 0;
if ($ ? z = $.pageX - se : z = k.clientX - se, p = n.angle + z * E, z >= w) {
c.dragLeft = w, c.thumbAngle = K = g;
return;
}
if (z <= 0) {
c.dragLeft = 0, c.thumbAngle = K = n.angle;
return;
}
c.dragLeft = z, c.thumbAngle = K = p, t.rotate && t.rotate(p), k.cancelBubble = !0, k.preventDefault();
}, M = (k) => {
ae(f.value, k) && (ce(), y && (y = !1, !(K < 0) && (t.confirm && t.confirm(parseInt(K.toString()), () => {
v();
}), k.cancelBubble = !0, k.preventDefault())));
}, te = (k) => {
C = k;
}, j = () => {
C = null;
}, O = (k) => {
C && (M(C), ce());
}, G = s.scope, I = G ? d.value : f.value, N = G ? d.value : document.body, ce = () => {
N.removeEventListener("mousemove", V, !1), N.removeEventListener("touchmove", V, { passive: !1 }), I.removeEventListener("mouseup", M, !1), I.removeEventListener("mouseenter", j, !1), I.removeEventListener("mouseleave", te, !1), I.removeEventListener("touchend", M, !1), N.removeEventListener("mouseleave", M, !1), N.removeEventListener("mouseup", O, !1), c.isFreeze = !1;
};
c.isFreeze = !0, N.addEventListener("mousemove", V, !1), N.addEventListener("touchmove", V, { passive: !1 }), I.addEventListener("mouseup", M, !1), I.addEventListener("mouseenter", j, !1), I.addEventListener("mouseleave", te, !1), I.addEventListener("touchend", M, !1), N.addEventListener("mouseleave", M, !1), N.addEventListener("mouseup", O, !1);
}, u = (o) => (_(), o.cancelBubble = !0, o.preventDefault(), !1), x = (o) => (i(), o.cancelBubble = !0, o.preventDefault(), !1), _ = () => {
t && t.close && t.close(), v();
}, i = () => {
t && t.refresh && t.refresh(), v();
}, v = () => {
c.dragLeft = 0, c.thumbAngle = n.angle;
};
return {
state: c,
dragEvent: e,
closeEvent: u,
refreshEvent: x,
resetData: v,
clearData: () => {
r && r(), v();
},
refresh: i,
close: _
};
}
const vt = { class: "gc-header" }, mt = { class: "gc-icon-block" }, pt = { class: "gc-loading" }, _t = ["src"], bt = /* @__PURE__ */ a("div", { class: "gc-round" }, null, -1), wt = { class: "gc-thumb gc-rotate-thumb" }, Et = ["src"], xt = { class: "gc-footer" }, yt = /* @__PURE__ */ a("div", { class: "gc-drag-line" }, null, -1), he = /* @__PURE__ */ J({
__name: "index",
props: {
config: { default: _e },
events: { default: () => ({}) },
data: { default: Se }
},
setup(n, { expose: t }) {
const s = n, { data: d, events: l, config: f } = s, r = T({ ...Se(), ...U(d) }), c = T({ ...U(l) }), e = T({ ..._e(), ...U(f) });
P(() => s.data, (g, E) => {
Object.assign(r, g);
}, { deep: !0 }), P(() => s.events, (g, E) => {
Object.assign(c, g);
}, { deep: !0 }), P(() => s.config, (g, E) => {
Object.assign(e, g);
}, { deep: !0 });
const u = q(null), x = q(null), _ = q(null), i = ft(
r,
c,
e,
u,
_,
x,
() => {
r.thumb = "", r.image = "", r.angle = 0;
}
), v = L(() => {
const g = e.horizontalPadding || 0, E = e.verticalPadding || 0;
return {
width: (e.width || 0) + g * 2 + (e.showTheme ? 2 : 0) + "px",
paddingLeft: g + "px",
paddingRight: g + "px",
paddingTop: E + "px",
paddingBottom: E + "px"
};
}), X = L(() => ({
transform: `rotate(${i.state.thumbAngle}deg)`,
...r.thumbSize > 0 ? {
width: r.thumbSize + "px",
height: r.thumbSize + "px"
} : {}
})), o = L(() => ({
width: e.width + "px",
height: e.height + "px"
})), b = L(() => {
const g = (e.size || 0) > 0 ? e.size : _e().size;
return {
width: g + "px",
height: g + "px"
};
}), h = L(() => r.image && r.image.length > 0), B = L(() => r.thumb && r.thumb.length > 0), W = L(() => (e.width || 0) > 0 || (e.height || 0) > 0), w = (g) => g.preventDefault();
return fe(async () => {
await be(), _.value && _.value.addEventListener("dragstart", w);
}), we(() => {
_.value && _.value.removeEventListener("dragstart", w);
}), t({
reset: i.resetData,
clear: i.clearData,
refresh: i.refresh,
close: i.close
}), (g, E) => Z((D(), H("div", {
class: ne(`go-captcha gc-wrapper ${e.showTheme && "gc-theme"}`),
style: S(v.value),
ref_key: "rootRef",
ref: u
}, [
a("div", vt, [
a("span", null, oe(e.title), 1),
a("div", mt, [
A(ve, {
width: e.iconSize,
height: e.iconSize,
onClick: m(i).closeEvent
}, null, 8, ["width", "height", "onClick"]),
A(me, {
width: e.iconSize,
height: e.iconSize,
onClick: m(i).refreshEvent
}, null, 8, ["width", "height", "onClick"])
])
]),
a("div", {
class: "gc-body gc-rotate-body",
ref: "containerRef",
style: S(o.value)
}, [
a("div", {
class: "gc-body-inner",
style: S(b.value)
}, [
a("div", pt, [
A(pe)
]),
a("div", {
class: "gc-picture gc-rotate-picture",
style: S(b.value)
}, [
Z(a("img", {
src: r.image,
alt: ""
}, null, 8, _t), [
[ee, h.value]
]),
bt
], 4),
a("div", wt, [
a("div", {
class: "gc-rotate-thumb-block",
style: S(X.value)
}, [
Z(a("img", {
src: r.thumb,
alt: ""
}, null, 8, Et), [
[ee, B.value]
])
], 4)
])
], 4)
], 4),
a("div", xt, [
a("div", {
class: "gc-drag-slide-bar",
ref_key: "dragBarRef",
ref: x
}, [
yt,
a("div", {
class: ne(["gc-drag-block", !h.value && "disabled"]),
ref_key: "dragBlockRef",
ref: _,
onMousedown: E[1] || (E[1] = //@ts-ignore
(...p) => m(i).dragEvent && m(i).dragEvent(...p)),
style: S({ left: m(i).state.dragLeft + "px" })
}, [
a("div", {
class: "gc-drag-block-inline",
onTouchstart: E[0] || (E[0] = //@ts-ignore
(...p) => m(i).dragEvent && m(i).dragEvent(...p))
}, [
A(De)
], 32)
], 38)
], 512)
])
], 6)), [
[ee, W.value]
]);
}
});
he.name = "gocaptcha-rotate";
he.install = function(n) {
n.component("gocaptcha-rotate", he);
};
const Lt = /* @__PURE__ */ a("circle", {
fill: "#3E7CFF",
cx: "100",
cy: "100",
r: "96.3"
}, null, -1), kt = /* @__PURE__ */ a("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), St = [
Lt,
kt
], $t = /* @__PURE__ */ J({
__name: "btn-default-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, l.$attrs, { onClick: d }), St, 16));
}
}), Dt = /* @__PURE__ */ a("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), Ct = [
Dt
], zt = /* @__PURE__ */ J({
__name: "btn-warn-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, l.$attrs, { onClick: d }), Ct, 16));
}
}), Tt = /* @__PURE__ */ a("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 = [
Tt
], Pt = /* @__PURE__ */ J({
__name: "btn-error-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, l.$attrs, { onClick: d }), Bt, 16));
}
}), Xt = /* @__PURE__ */ a("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), Wt = [
Xt
], Mt = /* @__PURE__ */ J({
__name: "btn-success-icon",
emits: ["click"],
setup(n, { emit: t }) {
const s = t;
function d(l) {
s("click", l);
}
return (l, f) => (D(), H("svg", ie({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: "20",
height: "20"
}, l.$attrs, { onClick: d }), Wt, 16));
}
}), $e = () => ({
width: 330,
height: 44,
verticalPadding: 12,
horizontalPadding: 16
}), ge = /* @__PURE__ */ J({
__name: "index",
props: {
config: { default: $e },
clickEvent: {},
disabled: { type: Boolean, default: !1 },
type: { default: "default" },
title: { default: "点击按键进行验证" }
},
emits: ["click-event"],
setup(n, { emit: t }) {
const s = n, { type: d, title: l, disabled: f, config: r } = Be(s), c = T({ ...$e(), ...U(r) });
P(() => s.config, (i, v) => {
Object.assign(c, i);
}, { deep: !0 });
const e = L(() => ["go-captcha", "gc-btn-block", `gc-${d.value}`, f.value ? "gc-disabled" : ""]), u = L(() => ({
width: c.width + "px",
height: c.height + "px",
paddingLeft: c.horizontalPadding + "px",
paddingRight: c.horizontalPadding + "px",
paddingTop: c.verticalPadding + "px",
paddingBottom: c.verticalPadding + "px"
})), x = t;
function _(i) {
x("click-event", i);
}
return (i, v) => (D(), H("div", {
class: ne(e.value),
style: S(u.value),
onClick: _
}, [
a("div", {
class: ne(m(d) === "default" ? "gc-ripple" : "")
}, [
m(d) === "default" ? (D(), le($t, { key: 0 })) : m(d) === "warn" ? (D(), le(zt, { key: 1 })) : m(d) === "error" ? (D(), le(Pt, { key: 2 })) : m(d) === "success" ? (D(), le(Mt, { key: 3 })) : Pe("", !0)
], 2),
a("span", null, oe(m(l)), 1)
], 6));
}
});
ge.name = "gocaptcha-button";
ge.install = function(n) {
n.component("gocaptcha-button", ge);
};
const Rt = {
install(n) {
re.install(n), ue.install(n), de.install(n), he.install(n), ge.install(n);
}
};
export {
ge as Button,
re as Click,
he as Rotate,
ue as Slide,
de as SlideRegion,
Rt as default
};