@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
195 lines (194 loc) • 6.92 kB
JavaScript
import { defineComponent as te, ref as c, computed as d, nextTick as R, watch as N, openBlock as y, createElementBlock as le, unref as e, normalizeClass as g, createElementVNode as h, normalizeStyle as T, renderSlot as V, createVNode as D, withCtx as M, createTextVNode as re, toDisplayString as se, createBlock as $, normalizeProps as X, mergeProps as z } from "vue";
import "../icon/index.mjs";
import "../form/index.mjs";
import "../renderer/index.mjs";
import { useProps as oe, createSizeProp as ue, createIconProp as ie, useNameHelper as ne, useLocale as ce, useIcons as de, emitEvent as p } from "@vexip-ui/config";
import { useSetTimeout as ve, useMoving as fe } from "@vexip-ui/hooks";
import { toFixed as ge, boundRange as pe } from "@vexip-ui/utils";
import { captchaSliderProps as me } from "./props.mjs";
import { useFieldStore as be } from "../form/helper.mjs";
import H from "../renderer/renderer.mjs";
import E from "../icon/icon.mjs";
const ye = ["id", "aria-labelledby"], Le = /* @__PURE__ */ te({
name: "CaptchaSlider",
__name: "captcha-slider",
props: me,
setup(j, { expose: q }) {
const { idFor: F, labelId: A, disabled: G, loading: J, size: K, validateField: O, getFieldValue: Q, setFieldValue: P } = be(C), t = oe("captcha", j, {
size: ue(K),
target: {
default: 100,
validator: (a) => a >= 0 && a <= 100
},
tip: null,
successTip: null,
tolerance: {
default: 1,
validator: (a) => a >= 0
},
disabled: () => G.value,
loading: () => J.value,
loadingIcon: ie(),
loadingLock: !1,
loadingEffect: null,
onBeforeTest: {
default: null,
isFunc: !0
},
slots: () => ({})
}), r = ne("captcha"), x = ce("captcha"), v = de(), { timer: U } = ve(), l = c(0), f = c(!1), o = c(!1), s = c(!1), k = c(!1), m = c(), b = d(() => t.disabled || t.loading && t.loadingLock);
let B;
const { target: i, moving: S } = fe({
onStart: (a, u) => {
if (f.value || b.value || !m.value || !i.value || s.value || o.value || u.button > 0)
return !1;
B = m.value.getBoundingClientRect().width, l.value = 0, L(), i.value.focus(), p(t.onDragStart, l.value);
},
onMove: (a) => {
if (f.value || b.value || s.value || o.value)
return !1;
l.value = a.deltaX / B * 100, L(), p(t.onDrag, l.value);
},
onEnd: async () => {
var I;
if (f.value || b.value) return;
f.value = !0;
const a = w(l.value);
let u;
typeof t.onBeforeTest == "function" && (R(() => {
k.value = !0;
}), u = await t.onBeforeTest(l.value, a), R(() => {
k.value = !1;
})), l.value && (u === !1 || !a && u !== !0) ? (o.value = !0, l.value = 0, s.value = !1, P(!1), p(t.onFail)) : (a || u === !0) && (s.value = !0, u && !a && (o.value = !0, l.value = t.target), P(!0), p(t.onSuccess, l.value)), O(), (I = i.value) == null || I.blur(), p(t.onDragEnd, l.value), clearTimeout(U.testing), f.value = !1;
}
}), n = d(() => t.loading || k.value), W = d(() => {
const a = r.be("slider");
return {
[a]: !0,
[r.bs("vars")]: !0,
[`${a}--success`]: s.value,
[`${a}--disabled`]: t.disabled,
[`${a}--loading`]: n.value,
[`${a}--${t.size}`]: t.size !== "default"
};
}), Y = d(() => ({
[r.cv("filler-transition")]: o.value ? "transform 250ms ease" : void 0,
transform: `scaleX(${l.value / 100})`
})), Z = d(() => ({
[r.cv("tip-transition")]: o.value ? "background-position 250ms ease" : void 0,
backgroundPosition: `-${l.value}%`
})), ee = d(() => ({
left: `${l.value}%`,
[r.cv("trigger-transition")]: o.value ? "left 250ms ease" : void 0
}));
N(
() => Q(),
(a) => {
a ? (w(l.value) || (o.value = !0, l.value = t.target), s.value = !0) : _();
}
), N(b, (a) => a && _()), q({
idFor: F,
currentLeft: l,
resetting: o,
isSuccess: s,
dragging: S,
isLoading: n,
track: m,
trigger: i,
focus: C,
reset: _
});
function L() {
l.value = ge(pe(l.value, 0, 100), 3);
}
function _() {
o.value = !0, l.value = 0, s.value = !1;
}
function ae() {
o.value = !1;
}
function w(a) {
return Math.abs(t.target - a) <= t.tolerance;
}
function C(a) {
var u;
(u = i.value) == null || u.focus(a);
}
return (a, u) => (y(), le("div", {
id: e(F),
ref: "wrapper",
class: g(W.value),
tabindex: "-1",
role: "group",
"aria-labelledby": e(A)
}, [
h("div", {
class: g({
[e(r).be("filler")]: !0,
[e(r).bem("filler", "loading")]: n.value,
[e(r).bem("filler", "success")]: s.value
}),
style: T(Y.value)
}, null, 6),
h("div", {
class: g({
[e(r).be("tip")]: !0,
[e(r).bem("tip", "focused")]: e(S),
[e(r).bem("tip", "loading")]: n.value,
[e(r).bem("tip", "success")]: s.value
}),
style: T(Z.value)
}, [
V(a.$slots, "tip", { success: s.value }, () => [
D(e(H), {
renderer: e(t).slots.tip,
data: { success: s.value }
}, {
default: M(() => [
re(se(s.value ? e(t).successTip ?? e(x).success : e(t).tip ?? e(x).slideEnd), 1)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 6),
h("div", {
ref_key: "track",
ref: m,
class: g(e(r).be("track"))
}, [
h("div", {
ref_key: "trigger",
ref: i,
class: g({
[e(r).be("trigger")]: !0,
[e(r).bem("trigger", "focused")]: e(S),
[e(r).bem("trigger", "loading")]: n.value,
[e(r).bem("trigger", "success")]: s.value
}),
tabindex: "0",
style: T(ee.value),
onTransitionend: ae
}, [
V(a.$slots, "trigger", { success: s.value }, () => [
D(e(H), {
renderer: e(t).slots.trigger,
data: { success: s.value }
}, {
default: M(() => [
s.value ? (y(), $(e(E), X(z({ key: 0 }, e(v).check)), null, 16)) : n.value ? (y(), $(e(E), z({ key: 1 }, e(v).loading, {
effect: e(t).loadingEffect || e(v).loading.effect,
icon: e(t).loadingIcon || e(v).loading.icon
}), null, 16, ["effect", "icon"])) : (y(), $(e(E), X(z({ key: 2 }, e(v).anglesRight)), null, 16))
]),
_: 1
}, 8, ["renderer", "data"])
])
], 38)
], 2)
], 10, ye));
}
});
export {
Le as default
};
//# sourceMappingURL=captcha-slider.vue2.mjs.map