vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
99 lines (98 loc) • 3.53 kB
JavaScript
import { defineComponent as W, ref as t, computed as h, watch as $, createBlock as k, openBlock as y, Teleport as E, createVNode as N, Transition as z, withCtx as F, withDirectives as D, createCommentVNode as T, createElementBlock as V, normalizeStyle as A, normalizeClass as R, createElementVNode as j, vShow as I, nextTick as d } from "vue";
import { useInject as P } from "../utils/index.js";
const H = /* @__PURE__ */ W({
__name: "LoadingBar",
props: {
containerClass: { default: void 0 },
containerStyle: { default: () => ({}) },
loadingBarSize: { default: 2 },
colorLoading: { default: void 0 },
colorFinish: { default: void 0 },
colorError: { default: "#ff4d4f" },
to: { type: [String, Boolean], default: "body" }
},
setup(a, { expose: b }) {
const n = a, u = t(!1), l = t(!1), e = t(), s = t(!1), f = t(!1), i = t(!1), o = t(!1), { colorPalettes: c } = P("LoadingBar"), w = h(() => n.colorLoading === void 0 ? c.value[5] : n.colorLoading), x = h(() => n.colorFinish === void 0 ? c.value[5] : n.colorFinish);
$(
l,
(r) => {
r && !u.value && (u.value = !0);
},
{
immediate: !0
}
);
async function v() {
l.value = !1, i.value = !1, o.value = !1, s.value = !0, await d(), s.value = !1;
}
async function g(r = 0, m = 80, p = "starting") {
f.value = !0, await v(), !i.value && (l.value = !0, await d(), e.value && (e.value.style.transition = "none", e.value.style.maxWidth = `${r}%`, e.value.offsetWidth, e.value.className = `loading-bar loading-bar-${p}`, e.value.style.transition = "", e.value.style.maxWidth = `${m}%`));
}
async function B() {
i.value || o.value || (f.value && await d(), i.value = !0, e.value && (e.value.className = "loading-bar loading-bar-finishing", e.value.style.maxWidth = "100%", e.value.offsetWidth, l.value = !1));
}
function C() {
if (!(i.value || o.value))
if (!l.value)
g(100, 100, "error").then(() => {
o.value = !0;
});
else {
if (o.value = !0, !e.value)
return;
e.value.className = "loading-bar loading-bar-error", e.value.style.maxWidth = "100%", e.value.offsetWidth, l.value = !1;
}
}
function L() {
o.value && (l.value = !1);
}
async function S() {
await v();
}
return b({
start: g,
finish: B,
error: C
}), (r, m) => (y(), k(E, {
disabled: a.to === !1,
to: a.to === !1 ? null : a.to
}, [
N(z, {
name: "fade-in",
appear: "",
onAfterEnter: L,
onAfterLeave: S,
css: !s.value
}, {
default: F(() => [
u.value ? D((y(), V("div", {
key: 0,
class: R(["loading-bar-wrap", a.containerClass]),
style: A([
`
--loading-bar-size: ${a.loadingBarSize}px;
--loading-bar-color-loading: ${w.value};
--loading-bar-color-finish: ${x.value};
--loading-bar-color-error: ${a.colorError};
`,
a.containerStyle
])
}, [
j("div", {
ref_key: "loadingBarRef",
ref: e,
class: "loading-bar",
style: { "max-width": "100%" }
}, null, 512)
], 6)), [
[I, l.value]
]) : T("", !0)
]),
_: 1
}, 8, ["css"])
], 8, ["disabled", "to"]));
}
});
export {
H as default
};