layui/package/component/es/progress/index.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle, toDisplayString, createCommentVNode, normalizeClass } from "vue";
var index = /* @__PURE__ */ (() => ".layui-progress{position:relative;height:6px;border-radius:20px;background-color:var(--global-neutral-color-3)}.layui-progress-bar{position:absolute;left:0;top:0;width:0;max-width:100%;height:6px;border-radius:20px;text-align:right;background-color:var(--global-checked-color);transition:all .3s;-webkit-transition:all .3s}.layui-progress-big,.layui-progress-big .layui-progress-bar{height:18px;line-height:18px}.layui-progress-text{position:relative;top:-20px;line-height:18px;font-size:12px;color:#666}.layui-progress-big .layui-progress-text{position:static;padding:0 10px;color:#fff}.lay-progress-circle-container{position:relative;display:inline-block}.lay-progress-circle{position:relative;border-radius:50%;display:inline-block}.lay-progress-circle__text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n")();
const _hoisted_1 = {
  key: 0,
  class: "lay-progress-circle"
};
const _hoisted_2 = ["viewBox", "width", "height"];
const _hoisted_3 = ["d"];
const _hoisted_4 = ["d"];
const _hoisted_5 = {
  key: 0,
  class: "layui-progress-text lay-progress-circle__text"
};
const _hoisted_6 = {
  key: 0,
  class: "layui-progress-text"
};
const __default__ = {
  name: "LayProgress"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    percent: null,
    theme: null,
    color: null,
    size: null,
    showText: { type: Boolean },
    text: null,
    circle: { type: Boolean, default: false },
    circleSize: { default: 150 },
    circleWidth: { default: 6 }
  },
  setup(__props) {
    const props = __props;
    const styles = computed(() => {
      return [
        props.color ? "background-color: " + props.color : "",
        {
          width: props.percent + "%"
        }
      ];
    });
    const getCircleColor = computed(() => {
      let color;
      switch (props.theme) {
        case "red":
          color = "#ff5722";
          break;
        case "orange":
          color = "#ffb800";
          break;
        case "green":
          color = "#009688";
          break;
        case "cyan":
          color = "#2f4056";
          break;
        case "blue":
          color = "#1e9fff";
          break;
        case "black":
          color = "#393d49";
          break;
        case "gray":
          color = "#fafafa";
          break;
        default:
          color = "#5FB878";
          break;
      }
      color = props.color ? props.color : color;
      return color;
    });
    computed(() => {
      let percent;
      if (typeof props.percent == "string") {
        percent = parseInt(props.percent);
      } else {
        percent = props.percent;
      }
      return percent / 100 * 360;
    });
    const getStrokeDasharray = computed(() => {
      let percent;
      if (typeof props.percent == "string") {
        percent = parseInt(props.percent);
      } else {
        percent = props.percent;
      }
      let radii = props.circleSize / 2 - props.circleWidth / 2;
      let perimeter = Math.PI * 2 * radii;
      return `${percent / 100 * perimeter}px ${perimeter}px`;
    });
    const getPathD = computed(() => {
      let circleSize = props.circleSize;
      let circleWidth = props.circleWidth;
      return `M ${circleSize / 2} ${circleSize / 2} m 0, -${(circleSize - circleWidth) / 2} a ${(circleSize - circleWidth) / 2}, ${(circleSize - circleWidth) / 2} 0 1, 1 0, ${circleSize - circleWidth} a ${(circleSize - circleWidth) / 2}, ${(circleSize - circleWidth) / 2} 0 1, 1 0, -${circleSize - circleWidth}`;
    });
    return (_ctx, _cache) => {
      return __props.circle ? (openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(), createElementBlock("svg", {
          viewBox: `0 0 ${__props.circleSize} ${__props.circleSize}`,
          width: __props.circleSize,
          height: __props.circleSize
        }, [
          createElementVNode("path", {
            d: unref(getPathD),
            style: normalizeStyle([{ "fill": "none", "stroke": "var(--global-neutral-color-3)" }, { strokeWidth: `${__props.circleWidth}px` }])
          }, null, 12, _hoisted_3),
          createElementVNode("path", {
            d: unref(getPathD),
            style: normalizeStyle([{ "fill": "none", "stroke-linecap": "round" }, {
              strokeDasharray: unref(getStrokeDasharray),
              stroke: unref(getCircleColor),
              strokeWidth: `${__props.circleWidth}px`
            }])
          }, null, 12, _hoisted_4)
        ], 8, _hoisted_2)),
        __props.showText ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.text ? __props.text : __props.percent + "%"), 1)) : createCommentVNode("", true)
      ])) : (openBlock(), createElementBlock("div", {
        key: 1,
        class: normalizeClass(["layui-progress", "layui-progress-" + __props.size])
      }, [
        createElementVNode("div", {
          class: normalizeClass(["layui-progress-bar", "layui-bg-" + __props.theme]),
          style: normalizeStyle(unref(styles))
        }, [
          __props.showText ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.text ? __props.text : __props.percent + "%"), 1)) : createCommentVNode("", true)
        ], 6)
      ], 2));
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };