@sandlada/vue-mdc
Version:
49 lines (48 loc) • 1.56 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, createVNode } from "vue";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { props } from "./circular-progress.definition.js";
import css from "./styles/progress.module.scss.js";
const CircularProgress = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-circular-progress`,
props,
slots: {},
render() {
return createVNode("div", {
"data-component": "circular-progress",
"class": [css["circular-progress"], this.indeterminate && css.indeterminate],
"role": "progressbar",
"aria-valuemin": "0",
"aria-valuemax": this.max,
"aria-valuenow": this.indeterminate ? 0 : this.value
}, [this.indeterminate ? createVNode("div", {
"class": css.spinner
}, [createVNode("div", {
"class": css.left
}, [createVNode("div", {
"class": css.circle
}, null)]), createVNode("div", {
"class": css.right
}, [createVNode("div", {
"class": css.circle
}, null)])]) : createVNode("svg", {
"viewBox": "0 0 4800 4800"
}, [createVNode("circle", {
"class": css.track,
"pathLength": "100"
}, null), createVNode("circle", {
"class": css["active-track"],
"pathLength": "100",
"stroke-dashoffset": (1 - this.value / this.max) * 100
}, null)])]);
},
inheritAttrs: true
});
export {
CircularProgress
};
//# sourceMappingURL=circular-progress.js.map