vuux/dist/es/Progress/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as f, createElementBlock as s, openBlock as t, normalizeClass as g, unref as r, createCommentVNode as o, normalizeStyle as i, createElementVNode as a, createBlock as l, Fragment as _, createTextVNode as x, toDisplayString as c } from "vue";
import { useProgress as v } from "./hook/useProgress.mjs";
import { Icon as d } from "@vuux/icons";
const w = {
  key: 0,
  class: "is-animated"
}, z = {
  key: 1,
  class: "is-text"
}, S = ["width", "height"], B = ["stroke-width"], C = ["stroke-width", "stroke", "stroke-dasharray", "stroke-dashoffset"], N = {
  key: 0,
  transform: "translate(50,50) scale(0.4)"
}, W = {
  key: 1,
  transform: "translate(50,50) scale(0.4)"
}, I = {
  key: 2,
  x: "50",
  y: "50",
  "text-anchor": "middle",
  "dominant-baseline": "central",
  "font-size": "12",
  fill: "var(--app-text-color)"
}, V = {
  key: 3,
  class: "is-circle-animated"
}, j = /* @__PURE__ */ f({
  name: "Progress",
  __name: "index",
  props: {
    type: { default: "line" },
    status: { default: "normal" },
    percentage: {},
    strokeWidth: { default: 6 },
    circleSize: { default: 120 },
    strokeColor: { default: "var(--app-theme)" },
    animated: { type: Boolean }
  },
  setup(p) {
    const e = p, { classNames: k, lineStyle: u, bgColor: m, dashoffset: h, circumference: y } = v(e);
    return (b, n) => (t(), s("div", {
      class: g(["app-progress", r(k)])
    }, [
      e.type === "line" ? (t(), s("div", {
        key: 0,
        class: "progress-line",
        style: i({ height: e.strokeWidth + "px" })
      }, [
        a("div", {
          class: "is-inner",
          style: i(r(u))
        }, null, 4),
        e.animated ? (t(), s("div", w)) : o("", !0)
      ], 4)) : o("", !0),
      e.type === "line" ? (t(), s("span", z, [
        e.status === "normal" ? (t(), s(_, { key: 0 }, [
          x(c(e.percentage) + "%", 1)
        ], 64)) : e.status === "success" ? (t(), l(r(d), {
          key: 1,
          name: "Icon1722501",
          size: 14,
          color: "var(--app-success)"
        })) : e.status === "error" ? (t(), l(r(d), {
          key: 2,
          name: "Icon9176904",
          size: 14,
          color: "var(--app-danger)"
        })) : o("", !0)
      ])) : o("", !0),
      e.type === "circle" ? (t(), s("svg", {
        key: 2,
        class: "progress-circle",
        viewBox: "0 0 100 100",
        width: e.circleSize,
        height: e.circleSize
      }, [
        a("circle", {
          cx: "50",
          cy: "50",
          r: "45",
          fill: "none",
          "stroke-width": e.strokeWidth,
          stroke: "#f0f0f0"
        }, null, 8, B),
        a("circle", {
          cx: "50",
          cy: "50",
          r: "45",
          fill: "none",
          "stroke-width": e.strokeWidth,
          stroke: r(m),
          "stroke-dasharray": r(y),
          "stroke-dashoffset": r(h),
          "stroke-linecap": "round",
          transform: "rotate(-90 50 50)"
        }, null, 8, C),
        e.status === "success" ? (t(), s("g", N, [...n[0] || (n[0] = [
          a("path", {
            d: "M-10,0 L-2,8 L12,-6",
            stroke: "var(--app-success)",
            "stroke-width": "3",
            fill: "none",
            "stroke-linecap": "round",
            "stroke-linejoin": "round"
          }, null, -1)
        ])])) : e.status === "error" ? (t(), s("g", W, [...n[1] || (n[1] = [
          a("line", {
            x1: "-8",
            y1: "-8",
            x2: "8",
            y2: "8",
            stroke: "var(--app-danger)",
            "stroke-width": "3",
            "stroke-linecap": "round"
          }, null, -1),
          a("line", {
            x1: "8",
            y1: "-8",
            x2: "-8",
            y2: "8",
            stroke: "var(--app-danger)",
            "stroke-width": "3",
            "stroke-linecap": "round"
          }, null, -1)
        ])])) : (t(), s("text", I, c(e.percentage) + "%", 1))
      ], 8, S)) : o("", !0),
      e.type === "circle" && e.animated ? (t(), s("div", V)) : o("", !0)
    ], 2));
  }
});
export {
  j as default
};