first commit

app/components/RingProgress.vue

@@ -0,0 +1,128 @@
+<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>