129 lines
3.8 KiB
Vue
129 lines
3.8 KiB
Vue
<script>
|
|
import "~/assets/styles/RingProgress.CVwR7il5.css";
|
|
import { toDisplayString } from "vue";
|
|
import { createCommentVNode } from "vue";
|
|
import { computed } from "vue";
|
|
import { createElementBlock } from "vue";
|
|
import { createElementVNode } from "vue";
|
|
import { unref } from "vue";
|
|
import { defineComponent } from "vue";
|
|
import { openBlock } from "vue";
|
|
import { normalizeStyle } from "vue";
|
|
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
|
var u = [`width`, `height`, `viewBox`],
|
|
d = [`cx`, `cy`, `r`],
|
|
f = [`cx`, `cy`, `r`, `stroke-dasharray`, `stroke-dashoffset`, `transform`],
|
|
p = {
|
|
class: `ring-text`,
|
|
},
|
|
m = {
|
|
class: `ring-value`,
|
|
},
|
|
h = {
|
|
key: 0,
|
|
class: `ring-label`,
|
|
},
|
|
g = Object.assign(
|
|
_plugin_vue_export_helper_t(
|
|
defineComponent({
|
|
__name: `RingProgress`,
|
|
props: {
|
|
value: {},
|
|
label: {},
|
|
size: {
|
|
default: 112,
|
|
},
|
|
},
|
|
setup(o) {
|
|
let l = o,
|
|
g = computed(() => l.size / 2 - 8),
|
|
_ = computed(() => 2 * Math.PI * g.value),
|
|
v = computed(
|
|
() => _.value * (1 - Math.min(100, Math.max(0, l.value)) / 100),
|
|
);
|
|
return (n, l) => (
|
|
openBlock(),
|
|
createElementBlock(
|
|
`div`,
|
|
{
|
|
class: `ring`,
|
|
style: normalizeStyle({
|
|
width: `${o.size}px`,
|
|
height: `${o.size}px`,
|
|
}),
|
|
},
|
|
[
|
|
(openBlock(),
|
|
createElementBlock(
|
|
`svg`,
|
|
{
|
|
width: o.size,
|
|
height: o.size,
|
|
viewBox: `0 0 ${o.size} ${o.size}`,
|
|
},
|
|
[
|
|
createElementVNode(
|
|
`circle`,
|
|
{
|
|
cx: o.size / 2,
|
|
cy: o.size / 2,
|
|
r: unref(g),
|
|
fill: `none`,
|
|
stroke: `var(--p-content-border-color, #e2e8f0)`,
|
|
"stroke-width": 6,
|
|
},
|
|
null,
|
|
8,
|
|
d,
|
|
),
|
|
createElementVNode(
|
|
`circle`,
|
|
{
|
|
cx: o.size / 2,
|
|
cy: o.size / 2,
|
|
r: unref(g),
|
|
fill: `none`,
|
|
stroke: `#0ea5e9`,
|
|
"stroke-width": 6,
|
|
"stroke-linecap": `round`,
|
|
"stroke-dasharray": unref(_),
|
|
"stroke-dashoffset": unref(v),
|
|
transform: `rotate(-90 ${o.size / 2} ${o.size / 2})`,
|
|
class: `ring-bar`,
|
|
},
|
|
null,
|
|
8,
|
|
f,
|
|
),
|
|
],
|
|
8,
|
|
u,
|
|
)),
|
|
createElementVNode(`div`, p, [
|
|
createElementVNode(
|
|
`div`,
|
|
m,
|
|
toDisplayString(Math.round(o.value)) + `%`,
|
|
1,
|
|
),
|
|
o.label
|
|
? (openBlock(),
|
|
createElementBlock(`div`, h, toDisplayString(o.label), 1))
|
|
: createCommentVNode(``, !0),
|
|
]),
|
|
],
|
|
4,
|
|
)
|
|
);
|
|
},
|
|
}),
|
|
[[`__scopeId`, `data-v-bff6718d`]],
|
|
),
|
|
{
|
|
__name: `RingProgress`,
|
|
},
|
|
);
|
|
export {};
|
|
export default g;
|
|
</script>
|