@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
67 lines (66 loc) • 2.51 kB
JavaScript
import { defineComponent as T, ref as n, computed as f, onBeforeUnmount as A, openBlock as B, createBlock as C, Transition as F, unref as p, withCtx as L, withDirectives as N, createElementVNode as h, normalizeClass as _, normalizeStyle as g, vShow as R } from "vue";
import { useNameHelper as S } from "@vexip-ui/config";
import { useRtl as $ } from "@vexip-ui/hooks";
import { boundRange as d } from "@vexip-ui/utils";
const q = ["aria-valuenow"], D = /* @__PURE__ */ T({
name: "Loading",
__name: "loading",
setup(z, { expose: x }) {
const l = S("loading"), { isRtl: b } = $(), a = n(!1), i = n(2), r = n("default"), u = n("top"), e = n(0);
let o = 95;
const w = f(() => ({
[l.b()]: !0,
[l.bs("vars")]: !0,
[l.bm(r.value)]: r.value !== "default"
})), y = f(() => ({
[u.value]: "0",
height: `${i.value}px`
})), I = f(() => ({
transform: `translateX(${(b.value ? -1 : 1) * (e.value - 100) / 2}%) scaleX(${e.value / 100})`
}));
let v, s, c;
x({ visible: a, percent: e, startLoading: k }), A(() => {
clearTimeout(v), clearInterval(s), cancelAnimationFrame(c);
});
function k(t) {
e.value === 100 && (clearTimeout(v), a.value = !1, e.value = 0, r.value = "default", i.value = 2, u.value = "top"), clearInterval(s);
const m = () => {
e.value = d(t.percent, 0, 100), r.value = t.state ?? r.value, i.value = d(t.strokeWidth ?? 2, 1, 10), u.value = t.position ?? u.value, o = d(t.maxPercent ?? 95, e.value, 95), e.value === 100 ? v = setTimeout(() => {
a.value = !1;
}, 500) : s = setInterval(() => {
e.value += Math.floor(Math.random() * 3 + 1), e.value >= o && (e.value = o, clearInterval(s));
}, 500);
};
o = 95, c = requestAnimationFrame(() => {
a.value ? m() : (a.value = !0, c = requestAnimationFrame(m));
});
}
return (t, m) => (B(), C(F, {
name: p(l).ns("fade"),
appear: ""
}, {
default: L(() => [
N(h("div", {
class: _(w.value),
role: "progressbar",
style: g(y.value),
"aria-valuenow": e.value,
"aria-valuemin": "0",
"aria-valuemax": "100"
}, [
h("div", {
class: _(p(l).be("filler")),
style: g(I.value)
}, null, 6)
], 14, q), [
[R, a.value]
])
]),
_: 1
}, 8, ["name"]));
}
});
export {
D as default
};
//# sourceMappingURL=loading.vue2.mjs.map