maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
132 lines (131 loc) • 6.11 kB
JavaScript
import { defineComponent, defineAsyncComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createElementVNode, createBlock, unref, renderSlot, createSlots, withCtx, createTextVNode, toDisplayString, normalizeClass } from "vue";
import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazCircularProgressBar.BYf6ZShT.css';const _hoisted_1 = { class: "outer" }, _hoisted_2 = { class: "inner" }, _hoisted_3 = { key: 0 }, _hoisted_4 = ["id"], _hoisted_5 = ["stop-color"], _hoisted_6 = ["stop-color"], _hoisted_7 = ["stroke-width", "stroke-dashoffset", "stroke", "stroke-linecap"], _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazCircularProgressBar",
props: {
percentage: {},
size: { default: "10em" },
duration: { default: 1e3 },
delay: { default: 100 },
color: {},
autoColor: { type: Boolean, default: !1 },
prefix: {},
suffix: {},
strokeLinecap: { default: "round" },
strokeWidth: { default: 6 },
stroke: {},
successPercentage: { default: 100 },
warningPercentage: { default: 75 },
dangerPercentage: { default: 50 },
once: { type: Boolean, default: !0 }
},
setup(__props) {
const MazAnimatedCounter = defineAsyncComponent(() => import("./MazAnimatedCounter.js")), slots = useSlots(), hasPrefix = computed(() => !!__props.prefix || !!slots.prefix), hasSuffix = computed(() => !!__props.suffix || !!slots.suffix), id = useInstanceUniqId({
componentName: "MazCircularProgressBar"
}), adjustedPercentage = computed(() => __props.percentage > 100 ? 100 : __props.percentage <= 0 ? 0.5 : __props.percentage), currentColor = computed(
() => __props.autoColor ? getStatusColor(adjustedPercentage.value) : __props.color
);
function getStatusColor(percent) {
return percent < __props.dangerPercentage || percent > 100 ? "destructive" : percent < __props.warningPercentage ? "warning" : percent >= __props.successPercentage ? "success" : "primary";
}
const animationDuration = computed(() => `${__props.duration}ms`), dashoffset = computed(() => Math.round(290 - 290 * (adjustedPercentage.value / 100))), isVisible = ref(!1), circleRef = ref(null), hasBeenAnimated = ref(!1);
let observer = null;
return onMounted(() => {
observer = new IntersectionObserver(([entry]) => {
(!isVisible.value || !__props.once) && (isVisible.value = entry.isIntersecting), __props.once && circleRef.value && (observer?.unobserve(circleRef.value), circleRef.value?.addEventListener("animationend", () => {
hasBeenAnimated.value = !0;
}));
}), circleRef.value && observer.observe(circleRef.value);
}), onBeforeUnmount(() => observer?.disconnect()), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
class: "m-circular-progress-bar m-reset-css",
style: normalizeStyle([
{
"--animation-duration": animationDuration.value,
"--dashoffset": dashoffset.value,
"--delay": `${_ctx.delay}ms`
},
{
fontSize: _ctx.size
}
])
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
unref(slots).default ? (openBlock(), createElementBlock("span", _hoisted_3, [
renderSlot(_ctx.$slots, "default", {}, void 0, !0)
])) : (openBlock(), createBlock(unref(MazAnimatedCounter), {
key: 1,
count: _ctx.percentage,
duration: _ctx.duration,
delay: _ctx.delay,
once: _ctx.once
}, createSlots({ _: 2 }, [
hasPrefix.value ? {
name: "prefix",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "prefix", {}, () => [
createTextVNode(toDisplayString(_ctx.prefix), 1)
], !0)
]),
key: "0"
} : void 0,
hasSuffix.value ? {
name: "suffix",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "suffix", {}, () => [
createTextVNode(toDisplayString(_ctx.suffix), 1)
], !0)
]),
key: "1"
} : void 0
]), 1032, ["count", "duration", "delay", "once"]))
])
]),
(openBlock(), createElementBlock("svg", {
ref_key: "circleRef",
ref: circleRef,
xmlns: "http://www.w3.org/2000/svg",
height: "1em",
width: "1em",
class: normalizeClass({
animate: isVisible.value
}),
viewBox: "0 0 100 100"
}, [
createElementVNode("defs", null, [
createElementVNode("linearGradient", {
id: `${unref(id)}-gradient`,
x1: "0",
x2: "0",
y1: "1",
y2: "0"
}, [
createElementVNode("stop", {
offset: "0%",
"stop-color": currentColor.value ? `hsl(var(--maz-${currentColor.value}-400))` : "hsl(var(--maz-primary))"
}, null, 8, _hoisted_5),
createElementVNode("stop", {
offset: "100%",
"stop-color": currentColor.value ? `hsl(var(--maz-${currentColor.value}-700))` : "hsl(var(--maz-secondary))"
}, null, 8, _hoisted_6)
], 8, _hoisted_4)
]),
createElementVNode("circle", {
cx: "50",
cy: "50",
r: "46",
"stroke-width": _ctx.strokeWidth,
"stroke-dasharray": "290",
"stroke-dashoffset": hasBeenAnimated.value ? dashoffset.value : 290,
stroke: _ctx.stroke ? _ctx.stroke : `url(#${unref(id)}-gradient)`,
fill: "none",
"stroke-linecap": _ctx.strokeLinecap
}, null, 8, _hoisted_7)
], 2))
], 4));
}
}), MazCircularProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-45f7a51d"]]);
export {
MazCircularProgressBar as default
};