@opensig/opendesign/es/progress/OProgress.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString } from "vue";
import { progressProps } from "./types.mjs";
import { isUndefined, isNumber } from "../_utils/is.mjs";
const _hoisted_1 = {
  key: 0,
  class: "o-progress-line-wrap"
};
const _hoisted_2 = {
  key: 0,
  class: "o-progress-line-inner-label"
};
const _hoisted_3 = {
  key: 1,
  class: "o-progress-circle-wrap"
};
const _hoisted_4 = ["width", "height", "view-box"];
const _hoisted_5 = ["cx", "cy", "r", "stroke-width"];
const _hoisted_6 = ["cx", "cy", "r", "stroke-width", "transform", "stroke-dasharray"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OProgress",
  props: progressProps,
  setup(__props) {
    const DEFAULT_STROKE_WIDTH = {
      medium: 8,
      small: 4
    };
    const props = __props;
    const strokeWidth = computed(() => props.strokeWidth ?? DEFAULT_STROKE_WIDTH[props.size]);
    const lineBarStyle = computed(() => {
      return {
        width: `${props.percentage}%`,
        borderRadius: `${strokeWidth.value}px`
      };
    });
    const lineTrackStyle = computed(() => {
      const rlt = {
        height: `${strokeWidth.value}px`,
        borderRadius: `${strokeWidth.value}px`
      };
      if (!isUndefined(props.trackWidth)) {
        rlt.width = isNumber(props.trackWidth) ? `${props.trackWidth}px` : props.trackWidth;
      }
      return rlt;
    });
    const label = computed(() => props.format(props.percentage));
    const DEFAULT_CIRCLE_SIZE = {
      medium: 120,
      small: 60
    };
    const circleDiameter = computed(() => {
      if (isNumber(props.trackWidth)) {
        return props.trackWidth;
      }
      return DEFAULT_CIRCLE_SIZE[props.size];
    });
    const circleCenter = computed(() => circleDiameter.value / 2);
    const circleRadius = computed(() => circleCenter.value - strokeWidth.value / 2);
    const circleStrokeDashArr = computed(() => {
      const perimeter = 2 * Math.PI * circleRadius.value;
      const percent = props.percentage / 100;
      return `${perimeter * percent}  ${perimeter * (1 - percent)}`;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-progress", [`o-progress-${props.variant}`, `o-progress-${props.size}`, `o-progress-${props.color}`]])
        },
        [
          createCommentVNode(" variant === 'line' "),
          props.variant === "line" ? (openBlock(), createElementBlock("div", _hoisted_1, [
            createElementVNode(
              "div",
              {
                class: "o-progress-line-track",
                style: normalizeStyle(lineTrackStyle.value)
              },
              [
                createElementVNode(
                  "div",
                  {
                    class: "o-progress-line-bar",
                    style: normalizeStyle(lineBarStyle.value)
                  },
                  [
                    props.showLabel && props.labelInside ? (openBlock(), createElementBlock("div", _hoisted_2, [
                      renderSlot(_ctx.$slots, "default", {
                        percentage: props.percentage
                      }, () => [
                        createTextVNode(
                          toDisplayString(label.value),
                          1
                          /* TEXT */
                        )
                      ])
                    ])) : createCommentVNode("v-if", true)
                  ],
                  4
                  /* STYLE */
                )
              ],
              4
              /* STYLE */
            ),
            props.showLabel && !props.labelInside ? (openBlock(), createElementBlock(
              "div",
              {
                key: 0,
                class: normalizeClass(["o-progress-line-label", { "is-icon": _ctx.$slots.icon }])
              },
              [
                renderSlot(_ctx.$slots, "icon", {
                  percentage: props.percentage
                }, () => [
                  renderSlot(_ctx.$slots, "default", {
                    percentage: props.percentage
                  }, () => [
                    createTextVNode(
                      toDisplayString(label.value),
                      1
                      /* TEXT */
                    )
                  ])
                ])
              ],
              2
              /* CLASS */
            )) : createCommentVNode("v-if", true)
          ])) : createCommentVNode("v-if", true),
          createCommentVNode(" variant === 'circle' "),
          props.variant === "circle" ? (openBlock(), createElementBlock("div", _hoisted_3, [
            (openBlock(), createElementBlock("svg", {
              width: circleDiameter.value,
              height: circleDiameter.value,
              "view-box": `0 0 ${circleDiameter.value} ${circleDiameter.value}`
            }, [
              createElementVNode("circle", {
                class: "o-progress-circle-track",
                fill: "none",
                cx: circleCenter.value,
                cy: circleCenter.value,
                r: circleRadius.value,
                "stroke-width": strokeWidth.value
              }, null, 8, _hoisted_5),
              createElementVNode("circle", {
                class: "o-progress-circle-bar",
                fill: "none",
                cx: circleCenter.value,
                cy: circleCenter.value,
                r: circleRadius.value,
                "stroke-width": strokeWidth.value,
                "stroke-linecap": "round",
                transform: `matrix(0,-1,1,0,0,${circleDiameter.value})`,
                "stroke-dasharray": circleStrokeDashArr.value
              }, null, 8, _hoisted_6)
            ], 8, _hoisted_4)),
            props.showLabel ? (openBlock(), createElementBlock(
              "div",
              {
                key: 0,
                class: normalizeClass(["o-progress-circle-label", { "is-icon": _ctx.$slots.icon }])
              },
              [
                renderSlot(_ctx.$slots, "icon", {
                  percentage: props.percentage
                }, () => [
                  renderSlot(_ctx.$slots, "default", {
                    percentage: props.percentage
                  }, () => [
                    createTextVNode(
                      toDisplayString(label.value),
                      1
                      /* TEXT */
                    )
                  ])
                ])
              ],
              2
              /* CLASS */
            )) : createCommentVNode("v-if", true)
          ])) : createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};