@bprogress/vue
Version:
Utility to create your own NProgress bar like with Vue
283 lines (282 loc) • 8.43 kB
JavaScript
import { inject as G, defineComponent as y, toRefs as J, ref as K, provide as Q, computed as _, unref as u, h as X, onUnmounted as Y, createElementBlock as Z, openBlock as S, renderSlot as C, createBlock as w, createCommentVNode as ee, resolveDynamicComponent as A, onMounted as I, watch as te, onBeforeUnmount as se, useAttrs as T, mergeProps as $, withCtx as g, createVNode as V, createElementVNode as q } from "vue";
import { BProgress as i, css as re, getAnchorProperty as x, isSameURLWithoutSearch as oe, isSameURL as ne } from "@bprogress/core";
const z = Symbol("ProgressContext");
function ae() {
const r = G(z);
if (!r)
throw new Error("useProgress must be used within a ProgressProvider");
return r;
}
const de = /* @__PURE__ */ y({
__name: "progress-provider",
props: {
color: {},
height: {},
options: {},
spinnerPosition: {},
style: {},
disableStyle: { type: Boolean },
nonce: {}
},
setup(r) {
const e = r, {
color: o = "#0A2FFF",
height: t = "2px",
options: s,
spinnerPosition: c = "top-right",
style: O,
disableStyle: M = !1,
nonce: D
} = J(e);
s.value && i.configure(s.value || {});
const d = K(null), m = K(!1), v = () => m.value = !0, B = () => m.value = !1, U = (n = 0, f = 0, E = !1) => {
E && v(), d.value = setTimeout(() => {
n > 0 && i.set(n), i.start();
}, f);
}, W = (n = 0, f = 0) => {
setTimeout(() => {
d.value && clearTimeout(d.value), d.value = setTimeout(() => {
i.isStarted() && (i.done(), m.value && B());
}, n);
}, f);
}, F = (n) => i.inc(n), j = (n) => i.dec(n), H = (n) => i.set(n), P = () => i.pause(), h = () => i.resume(), a = () => i.settings;
Q(z, {
start: U,
stop: W,
inc: F,
dec: j,
set: H,
pause: P,
resume: h,
getOptions: a,
setOptions: (n) => {
const f = a(), E = typeof n == "function" ? n(f) : n, R = { ...f, ...E };
i.configure(R);
},
isAutoStopDisabled: m,
disableAutoStop: v,
enableAutoStop: B
});
const b = _(() => u(O) || re({
color: u(o),
height: u(t),
spinnerPosition: u(c)
})), N = y({
name: "BProgressStyle",
render() {
return X("style", { nonce: D.value ?? void 0 }, b.value);
}
});
return Y(() => {
d.value && clearTimeout(d.value);
}), (n, f) => (S(), Z("div", null, [
C(n.$slots, "default"),
u(M) ? ee("", !0) : (S(), w(A(u(N)), { key: 0 }))
]));
}
});
function me({
shallowRouting: r = !1,
disableSameURL: e = !0,
startPosition: o = 0,
delay: t = 0,
stopDelay: s = 0,
targetPreprocessor: c,
disableAnchorClick: O = !1,
startOnLoad: M = !1,
forcedStopDelay: D = 0
}, d = []) {
const m = K(
[]
), v = K(null), { start: B, stop: U, isAutoStopDisabled: W } = ae(), F = window.history.pushState;
I(() => {
M && B(o, t);
}), d.length > 0 && te(d, () => {
v.value && clearTimeout(v.value), v.value = window.setTimeout(() => {
W.value || U();
}, s);
});
const j = (h) => {
var R;
const a = h;
if (a.defaultPrevented) return;
const l = a.currentTarget;
if (l.hasAttribute("download")) return;
const p = a.target;
let b = (p == null ? void 0 : p.getAttribute("data-prevent-progress")) === "true" || (l == null ? void 0 : l.getAttribute("data-prevent-progress")) === "true";
if (!b) {
let L = p;
for (; L && L.tagName.toLowerCase() !== "a"; ) {
if (((R = L.parentElement) == null ? void 0 : R.getAttribute("data-prevent-progress")) === "true") {
b = !0;
break;
}
L = L.parentElement;
}
}
if (b || x(l, "target") === "_blank" || a.metaKey || a.ctrlKey || a.shiftKey || a.altKey)
return;
const n = x(l, "href"), f = c ? c(new URL(n)) : new URL(n), E = new URL(location.href);
r && oe(f, E) && e || ne(f, E) && e || B(o, t);
}, H = () => {
const a = Array.from(document.querySelectorAll("a")).filter((l) => {
const p = x(l, "href"), b = l.getAttribute("data-disable-progress") === "true", N = p && !p.startsWith("tel:") && !p.startsWith("mailto:") && !p.startsWith("blob:") && !p.startsWith("javascript:");
return !b && N && x(l, "target") !== "_blank";
});
a.forEach((l) => {
l.addEventListener("click", j, !0);
}), m.value = a;
};
let P = null;
I(() => {
O || (P = new MutationObserver(H), P.observe(document, { childList: !0, subtree: !0 })), window.history.pushState = new Proxy(window.history.pushState, {
apply(h, a, l) {
return W.value || U(s, D), h.apply(a, l);
}
});
}), se(() => {
P && P.disconnect(), m.value.forEach((h) => {
h.removeEventListener("click", j, !0);
}), m.value = [], v.value && clearTimeout(v.value), window.history.pushState = F;
});
}
function k(...r) {
const e = [], o = (t) => {
if (t) {
if (typeof t == "string")
t.trim() && e.push(t);
else if (Array.isArray(t))
t.forEach((s) => o(s));
else if (typeof t == "object")
for (const s in t)
Object.prototype.hasOwnProperty.call(t, s) && t[s] && e.push(s);
}
};
return r.forEach((t) => o(t)), e.join(" ");
}
const le = /* @__PURE__ */ y({
__name: "bar",
props: {
classSelector: {},
is: {},
class: {}
},
setup(r) {
const e = r, o = T(), t = _(() => k(e.classSelector || "bar", e.class));
return (s, c) => (S(), w(A(s.is || "div"), $(u(o), { class: t.value }), {
default: g(() => [
C(s.$slots, "default")
]),
_: 3
}, 16, ["class"]));
}
}), ce = /* @__PURE__ */ y({
__name: "peg",
props: {
classSelector: {},
is: {},
class: {}
},
setup(r) {
const e = r, o = T(), t = _(() => k(e.classSelector || "peg", e.class));
return (s, c) => (S(), w(A(s.is || "div"), $(u(o), { class: t.value }), {
default: g(() => [
C(s.$slots, "default")
]),
_: 3
}, 16, ["class"]));
}
}), ie = /* @__PURE__ */ y({
__name: "spinner",
props: {
classSelector: {},
is: {},
class: {}
},
setup(r) {
const e = r, o = T(), t = _(() => k(e.classSelector || "spinner", e.class));
return (s, c) => (S(), w(A(s.is || "div"), $(u(o), { class: t.value }), {
default: g(() => [
C(s.$slots, "default")
]),
_: 3
}, 16, ["class"]));
}
}), ue = /* @__PURE__ */ y({
__name: "spinner-icon",
props: {
classSelector: {},
is: {},
class: {}
},
setup(r) {
const e = r, o = T(), t = _(() => k(e.classSelector || "spinner-icon", e.class));
return (s, c) => (S(), w(A(s.is || "div"), $(u(o), { class: t.value }), {
default: g(() => [
C(s.$slots, "default")
]),
_: 3
}, 16, ["class"]));
}
}), ve = /* @__PURE__ */ y({
__name: "progress",
props: {
style: {},
is: {},
class: {}
},
setup(r) {
const e = r, o = T(), t = _(() => k("bprogress", e.class)), s = _(() => typeof e.style == "string" ? e.style + "; display: none;" : typeof e.style == "object" && e.style !== null ? { ...e.style, display: "none" } : { display: "none" });
return (c, O) => (S(), w(A(c.is || "div"), $(u(o), {
class: t.value,
style: s.value
}), {
default: g(() => [
C(c.$slots, "default", {}, () => [
V(le, null, {
default: g(() => [
V(ce)
]),
_: 1
}),
V(ie, null, {
default: g(() => [
V(ue)
]),
_: 1
})
])
]),
_: 3
}, 16, ["class", "style"]));
}
}), he = /* @__PURE__ */ y({
__name: "indeterminate",
props: {
classSelector: {},
is: {},
class: {}
},
setup(r) {
const e = r, o = T(), t = _(() => k(e.classSelector || "indeterminate", e.class));
return (s, c) => (S(), w(A(s.is || "div"), $(u(o), { class: t.value }), {
default: g(() => c[0] || (c[0] = [
q("div", { class: "inc" }, null, -1),
q("div", { class: "dec" }, null, -1)
])),
_: 1
}, 16, ["class"]));
}
});
export {
le as Bar,
he as Indeterminate,
ce as Peg,
ve as Progress,
de as ProgressProvider,
ie as Spinner,
ue as SpinnerIcon,
z as progressSymbol,
me as useAnchorProgress,
ae as useProgress
};