maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
268 lines (267 loc) • 8.21 kB
JavaScript
import { computed as m, useId as b, defineComponent as A, ref as $, onMounted as S, onBeforeUnmount as q, watch as O, openBlock as w, createElementBlock as C, createElementVNode as l, renderSlot as p, createTextVNode as c, toDisplayString as f, useSlots as T, normalizeStyle as E, unref as B, createBlock as F, createSlots as L, withCtx as I, normalizeClass as N } from "vue";
import './assets/MazCircularProgressBar.Cq-jEps6.css';function D({
componentName: u,
providedId: t
}) {
return m(() => t ?? `${u}-${b().replace(/:/g, "")}`);
}
function M() {
return typeof document < "u";
}
const U = { class: "maz-sr-only" }, W = /* @__PURE__ */ A({
__name: "MazAnimatedCounter",
props: {
count: {},
duration: { default: 1e3 },
prefix: { default: void 0 },
suffix: { default: void 0 },
delay: { default: 100 },
once: { type: Boolean, default: !0 }
},
setup(u) {
const t = u, r = $(0), d = $(null);
function v() {
return !M() || !window.requestAnimationFrame ? (e) => (setTimeout(e, 1e3 / 60), 0) : window.requestAnimationFrame.bind(window);
}
function z(e, s, h, y) {
const i = v();
if (!M()) {
r.value = s;
return;
}
r.value = e, setTimeout(() => {
const _ = performance.now(), a = (n = performance.now()) => {
const k = n - _, x = Math.min(k / h, 1), V = (P) => P * (2 - P);
r.value = Math.round(
e + (s - e) * V(x)
), x < 1 && i(a);
};
i(a);
}, y);
}
function g(e, s) {
z(e, s, t.duration, t.delay);
}
let o = null;
return S(() => {
t.once || (o = new IntersectionObserver(([e]) => {
e.isIntersecting && (g(0, t.count), t.once && (o == null || o.unobserve(e.target)));
}), d.value && o.observe(d.value));
}), q(() => o == null ? void 0 : o.disconnect()), O(
() => t.count,
(e, s) => {
if (e === s)
return;
g(s ?? 0, e);
},
{ immediate: !0 }
), (e, s) => (w(), C(
"span",
{
ref_key: "elementRef",
ref: d,
class: "m-animated-counter m-reset-css"
},
[
l("span", U, [
p(e.$slots, "prefix", {}, () => [
c(
f(e.prefix),
1
/* TEXT */
)
], !0),
c(
f(e.count),
1
/* TEXT */
),
p(e.$slots, "suffix", {}, () => [
c(
f(e.suffix),
1
/* TEXT */
)
], !0)
]),
p(e.$slots, "prefix", {}, () => [
c(
f(e.prefix),
1
/* TEXT */
)
], !0),
c(
f(r.value),
1
/* TEXT */
),
p(e.$slots, "suffix", {}, () => [
c(
f(e.suffix),
1
/* TEXT */
)
], !0)
],
512
/* NEED_PATCH */
));
}
}), R = (u, t) => {
const r = u.__vccOpts || u;
for (const [d, v] of t)
r[d] = v;
return r;
}, j = /* @__PURE__ */ R(W, [["__scopeId", "data-v-fc76f127"]]), G = { class: "outer" }, Q = { class: "inner" }, H = { key: 0 }, J = ["id"], K = ["stop-color"], X = ["stop-color"], Y = ["stroke-width", "stroke-dashoffset", "stroke", "stroke-linecap"], Z = /* @__PURE__ */ A({
__name: "MazCircularProgressBar",
props: {
percentage: { default: 0 },
size: { default: "10em" },
duration: { default: 1e3 },
delay: {},
color: { default: void 0 },
autoColor: { type: Boolean },
prefix: { default: void 0 },
suffix: { default: void 0 },
strokeLinecap: { default: "round" },
strokeWidth: { default: 6 },
stroke: { default: void 0 },
successPercentage: { default: 100 },
warningPercentage: { default: 75 },
dangerPercentage: { default: 50 },
once: { type: Boolean, default: !0 }
},
setup(u) {
const t = u, r = T(), d = m(() => !!t.prefix || !!r.prefix), v = m(() => !!t.suffix || !!r.suffix), z = D({
componentName: "MazCircularProgressBar"
}), g = m(() => t.percentage > 100 ? 100 : t.percentage <= 0 ? 0.5 : t.percentage), o = m(
() => t.autoColor ? e(g.value) : t.color
);
function e(n) {
return n < t.dangerPercentage || n > 100 ? "danger" : n < t.warningPercentage ? "warning" : n >= t.successPercentage ? "success" : "primary";
}
const s = m(() => `${t.duration}ms`), h = m(() => Math.round(290 - 290 * (g.value / 100))), y = $(!1), i = $(null), _ = $(!1);
let a = null;
return S(() => {
a = new IntersectionObserver(([n]) => {
var k;
(!y.value || !t.once) && (y.value = n.isIntersecting), t.once && i.value && (a == null || a.unobserve(i.value), (k = i.value) == null || k.addEventListener("animationend", () => {
_.value = !0;
}));
}), i.value && a.observe(i.value);
}), q(() => a == null ? void 0 : a.disconnect()), (n, k) => (w(), C(
"div",
{
class: "m-circular-progress-bar m-reset-css",
style: E([
{
"--animation-duration": s.value,
"--dashoffset": h.value,
"--delay": `${n.delay}ms`
},
{
fontSize: n.size
}
])
},
[
l("div", G, [
l("div", Q, [
B(r).default ? (w(), C("span", H, [
p(n.$slots, "default", {}, void 0, !0)
])) : (w(), F(j, {
key: 1,
count: n.percentage,
duration: n.duration,
delay: n.delay,
once: n.once
}, L({
_: 2
/* DYNAMIC */
}, [
d.value ? {
name: "prefix",
fn: I(() => [
p(n.$slots, "prefix", {}, () => [
c(
f(n.prefix),
1
/* TEXT */
)
], !0)
]),
key: "0"
} : void 0,
v.value ? {
name: "suffix",
fn: I(() => [
p(n.$slots, "suffix", {}, () => [
c(
f(n.suffix),
1
/* TEXT */
)
], !0)
]),
key: "1"
} : void 0
]), 1032, ["count", "duration", "delay", "once"]))
])
]),
(w(), C(
"svg",
{
ref_key: "circleRef",
ref: i,
xmlns: "http://www.w3.org/2000/svg",
height: "1em",
width: "1em",
class: N({
animate: y.value
}),
viewBox: "0 0 100 100"
},
[
l("defs", null, [
l("linearGradient", {
id: `${B(z)}-gradient`,
x1: "0",
x2: "0",
y1: "1",
y2: "0"
}, [
l("stop", {
offset: "0%",
"stop-color": o.value ? `var(--maz-color-${o.value}-400)` : "var(--maz-color-primary)"
}, null, 8, K),
l("stop", {
offset: "100%",
"stop-color": o.value ? `var(--maz-color-${o.value}-700)` : "var(--maz-color-secondary)"
}, null, 8, X)
], 8, J)
]),
l("circle", {
cx: "50",
cy: "50",
r: "46",
"stroke-width": n.strokeWidth,
"stroke-dasharray": "290",
"stroke-dashoffset": _.value ? h.value : 290,
stroke: n.stroke ? n.stroke : `url(#${B(z)}-gradient)`,
fill: "none",
"stroke-linecap": n.strokeLinecap
}, null, 8, Y)
],
2
/* CLASS */
))
],
4
/* STYLE */
));
}
}), te = /* @__PURE__ */ R(Z, [["__scopeId", "data-v-b86782a0"]]);
export {
te as default
};