@j2only/slide-unlock
Version:
Vue.js slide to unlock component. Protect users from accidental clicks or protect your web app from bot attack.
266 lines (265 loc) • 9.29 kB
JavaScript
import { defineComponent as $, reactive as X, computed as S, watch as I, openBlock as N, createElementBlock as A, normalizeClass as L, normalizeStyle as T, createElementVNode as W, toDisplayString as R } from "vue";
import './index.css';var w = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
function B(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
var H = typeof window < "u" && "requestAnimationFrame" in window ? window.requestAnimationFrame : function(e) {
setTimeout(e, 16);
};
function U(e) {
var n = "startValue" in e ? e.startValue : 0, t = "endValue" in e ? e.endValue : 1, l = "durationMs" in e ? e.durationMs : 200, u = e.onComplete || function() {
}, c = l / 16, s = (t - n) / c, o = Math.PI / c, d = n, f = 0;
function h() {
f += o, d += s * Math.pow(Math.sin(f), 2) * 2, f < Math.PI ? (e.onStep(d), H(h)) : (e.onStep(t), u());
}
H(h);
}
var z = U;
const D = /* @__PURE__ */ B(z);
var q = "Expected a function", j = NaN, G = "[object Symbol]", J = /^\s+|\s+$/g, K = /^[-+]0x[0-9a-f]+$/i, Q = /^0b[01]+$/i, Y = /^0o[0-7]+$/i, Z = parseInt, _ = typeof w == "object" && w && w.Object === Object && w, ee = typeof self == "object" && self && self.Object === Object && self, te = _ || ee || Function("return this")(), ne = Object.prototype, ie = ne.toString, oe = Math.max, re = Math.min, E = function() {
return te.Date.now();
};
function se(e, n, t) {
var l, u, c, s, o, d, f = 0, h = !1, m = !1, p = !0;
if (typeof e != "function")
throw new TypeError(q);
n = V(n) || 0, k(t) && (h = !!t.leading, m = "maxWait" in t, c = m ? oe(V(t.maxWait) || 0, n) : c, p = "trailing" in t ? !!t.trailing : p);
function y(a) {
var g = l, P = u;
return l = u = void 0, f = a, s = e.apply(P, g), s;
}
function M(a) {
return f = a, o = setTimeout(r, n), h ? y(a) : s;
}
function b(a) {
var g = a - d, P = a - f, O = n - g;
return m ? re(O, c - P) : O;
}
function i(a) {
var g = a - d, P = a - f;
return d === void 0 || g >= n || g < 0 || m && P >= c;
}
function r() {
var a = E();
if (i(a))
return v(a);
o = setTimeout(r, b(a));
}
function v(a) {
return o = void 0, p && l ? y(a) : (l = u = void 0, s);
}
function F() {
o !== void 0 && clearTimeout(o), f = 0, l = d = u = o = void 0;
}
function x() {
return o === void 0 ? s : v(E());
}
function C() {
var a = E(), g = i(a);
if (l = arguments, u = this, d = a, g) {
if (o === void 0)
return M(d);
if (m)
return o = setTimeout(r, n), y(d);
}
return o === void 0 && (o = setTimeout(r, n)), s;
}
return C.cancel = F, C.flush = x, C;
}
function k(e) {
var n = typeof e;
return !!e && (n == "object" || n == "function");
}
function ae(e) {
return !!e && typeof e == "object";
}
function le(e) {
return typeof e == "symbol" || ae(e) && ie.call(e) == G;
}
function V(e) {
if (typeof e == "number")
return e;
if (le(e))
return j;
if (k(e)) {
var n = typeof e.valueOf == "function" ? e.valueOf() : e;
e = k(n) ? n + "" : n;
}
if (typeof e != "string")
return e === 0 ? e : +e;
e = e.replace(J, "");
var t = Q.test(e);
return t || Y.test(e) ? Z(e.slice(2), t ? 2 : 8) : K.test(e) ? j : +e;
}
var de = se;
const ue = /* @__PURE__ */ B(de), fe = $({
name: "SlideUnlock",
props: {
autoWidth: {
type: Boolean,
default: !0
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 60
},
text: {
type: String,
default: "slide to unlock"
},
successText: {
type: String,
default: "success"
},
circle: {
type: Boolean,
default: !0
},
disabled: {
type: Boolean,
default: !1
},
noanimate: {
type: Boolean,
default: !1
},
name: {
type: String,
default: "slideunlock"
},
position: {
type: Number,
default: 0
}
},
setup(e, { emit: n }) {
const t = X({
CanMove: !1,
IsComplete: !1,
StartPositionWindow: 0,
HandlerPosition: 0,
ProgressWidth: 0,
TextOpacity: 1
}), l = S(() => ({
width: e.autoWidth ? "auto" : e.width + "px",
height: e.height + "px"
})), u = S(() => ({
width: t.ProgressWidth + "px",
height: e.height + "px",
borderRadius: e.circle ? t.IsComplete ? e.height / 2 + "px " : e.height / 2 + "px 0 0 " + e.height / 2 + "px" : 0
})), c = S(() => ({
left: t.HandlerPosition + "px",
width: e.height + "px",
height: e.height + "px"
})), s = S(() => t.IsComplete ? e.successText : e.text), o = S(() => {
const i = document.getElementById(e.name);
return e.autoWidth ? i.clientWidth - parseInt(getComputedStyle(i).getPropertyValue("--su-size-padding").replace("px", ""), 10) * 2 : e.width;
});
I(() => e.autoWidth, () => {
t.IsComplete && setTimeout(() => {
t.ProgressWidth = o.value;
}, 1);
}), I(() => e.width, () => {
t.IsComplete && (t.ProgressWidth = o.value);
});
const d = ue(function(i = !1) {
const r = (o.value - e.height) * (100 / t.HandlerPosition) / 1e3 - 0.1;
(t.CanMove || i) && (t.TextOpacity = r);
}, 5), f = (i) => {
t.IsComplete || (t.CanMove = !0, window.TouchEvent && i instanceof TouchEvent && i.touches ? t.StartPositionWindow = i.touches[0].pageX - t.HandlerPosition : i instanceof MouseEvent && (t.StartPositionWindow = i.pageX - t.HandlerPosition)), document.onmousemove = (r) => (h(r), !1), document.onmouseup = (r) => (m(r), document.onmousemove = null, !1);
}, h = (i) => {
if (t.CanMove && !t.IsComplete) {
let r = t.StartPositionWindow;
if (window.TouchEvent && i instanceof TouchEvent && i.touches ? r = i.touches[0].pageX : i instanceof MouseEvent && (r = i.pageX), r < t.StartPositionWindow)
return;
t.HandlerPosition = r - t.StartPositionWindow, t.HandlerPosition > 0 && t.HandlerPosition <= o.value - e.height ? (t.ProgressWidth = t.HandlerPosition + e.height / 2, d()) : t.HandlerPosition > o.value - e.height && (t.HandlerPosition = o.value - e.height, t.ProgressWidth = o.value, y());
}
}, m = (i) => {
if (t.CanMove && !t.IsComplete) {
let r = t.StartPositionWindow;
if (window.TouchEvent && i instanceof TouchEvent && i.touches ? r = i.changedTouches[0].pageX : i instanceof MouseEvent && (r = i.pageX), r < t.StartPositionWindow)
return;
t.HandlerPosition < o.value - e.height && (D({
startValue: t.HandlerPosition,
endValue: 0,
durationMs: 200,
onStep: (v) => {
t.HandlerPosition = v, t.ProgressWidth = v + e.height / 2;
}
}), t.TextOpacity = 1), t.CanMove = !1;
}
}, p = (i) => {
if (typeof i != "number" || i < 0 || t.IsComplete || e.disabled)
return;
const r = Math.round((o.value - e.height) / 100 * i);
t.ProgressWidth = r + e.height / 2, t.HandlerPosition = r, d(!0), r >= o.value - e.height && (b(), y());
};
I(() => e.position, () => {
p(e.position);
});
const y = () => {
t.IsComplete = !0, t.CanMove = !1, n("completed");
}, M = () => {
t.CanMove = !1, t.IsComplete = !1, t.StartPositionWindow = 0, t.HandlerPosition = 0, t.ProgressWidth = 0, t.TextOpacity = 1;
}, b = () => {
t.CanMove = !1, t.IsComplete = !0, t.StartPositionWindow = 0, t.HandlerPosition = 0, t.ProgressWidth = o.value, t.TextOpacity = 1;
};
return {
Slider: t,
slideUnlockStyle: l,
progressBarStyle: u,
handlerStyle: c,
message: s,
sliderWidth: o,
slideStart: f,
slideMoving: h,
slideFinish: m,
reset: M,
complete: b
};
}
}), ce = (e, n) => {
const t = e.__vccOpts || e;
for (const [l, u] of n)
t[l] = u;
return t;
}, he = ["id"];
function me(e, n, t, l, u, c) {
return N(), A("div", {
id: e.name,
class: L(["slideunlock", {
"is-disabled": e.disabled,
"is-noanimate": e.noanimate,
"is-circle": e.circle,
"is-complete": e.Slider.IsComplete
}]),
style: T(e.slideUnlockStyle),
onMousemove: n[2] || (n[2] = (...s) => e.slideMoving && e.slideMoving(...s)),
onMouseup: n[3] || (n[3] = (...s) => e.slideFinish && e.slideFinish(...s)),
onTouchmove: n[4] || (n[4] = (...s) => e.slideMoving && e.slideMoving(...s)),
onTouchend: n[5] || (n[5] = (...s) => e.slideFinish && e.slideFinish(...s))
}, [
W("div", {
class: "slideunlock-progressbar",
style: T(e.progressBarStyle)
}, null, 4),
W("div", {
class: "slideunlock-text",
style: T({ opacity: e.Slider.TextOpacity })
}, R(e.message), 5),
W("div", {
class: "slideunlock-handler",
style: T(e.handlerStyle),
onMousedown: n[0] || (n[0] = (...s) => e.slideStart && e.slideStart(...s)),
onTouchstart: n[1] || (n[1] = (...s) => e.slideStart && e.slideStart(...s))
}, null, 36)
], 46, he);
}
const ve = /* @__PURE__ */ ce(fe, [["render", me]]);
export {
ve as default
};