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, createBlock as B, openBlock as C, Transition as F, unref as p, withCtx as L, withDirectives as N, createElementVNode as h, normalizeStyle as _, normalizeClass 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) => (C(), B(F, {
name: p(l).ns("fade"),
appear: ""
}, {
default: L(() => [
N(h("div", {
class: g(w.value),
role: "progressbar",
style: _(y.value),
"aria-valuenow": e.value,
"aria-valuemin": "0",
"aria-valuemax": "100"
}, [
h("div", {
class: g(p(l).be("filler")),
style: _(I.value)
}, null, 6)
], 14, q), [
[R, a.value]
])
]),
_: 1
}, 8, ["name"]));
}
});
export {
D as default
};
//# sourceMappingURL=loading.vue2.mjs.map