tass-ui/lib/packages/components/progress/src/progress.vue.js

A high quality UI Toolkit built on Vue.js3+.

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../theme-chalk/src/progress.scss.js");
const _hoisted_1 = {
  key: 0,
  class: "tas-progress"
};
const _hoisted_2 = {
  key: 0,
  class: "line"
};
const _hoisted_3 = {
  key: 1,
  class: "line"
};
const _hoisted_4 = {
  key: 2,
  class: "status"
};
const _hoisted_5 = {
  key: 3,
  class: "percent"
};
const _hoisted_6 = {
  key: 4,
  class: "percent"
};
const _hoisted_7 = {
  viewBox: "0 0 96 96",
  class: "svg-circle-progress",
  style: { "width": "96px", "height": "96px" }
};
const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("circle", {
  r: "40",
  cx: "48",
  cy: "48",
  fill: "none",
  "stroke-miterlimit": "20",
  "stroke-width": "10",
  class: "svg-progress",
  style: { "stroke-dasharray": "275, 279.602", "stroke": "#eee" }
}, null, -1);
const _hoisted_9 = {
  key: 0,
  class: "mask"
};
const _hoisted_10 = {
  key: 1,
  class: "mask"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "progress",
  props: {
    select: {
      type: String,
      default: () => ""
    },
    type: {
      type: String,
      default: () => ""
    },
    color: {
      type: String,
      default: () => "#409eff"
    },
    percent: {
      type: Number,
      default: () => 0
    },
    status: {
      type: String,
      default: () => ""
    },
    width: {
      type: String,
      default: () => "210px"
    },
    height: {
      type: String,
      default: () => "100px"
    }
  },
  setup(__props) {
    const props = __props;
    const { height, width, color, percent } = vue.toRefs(props);
    const progressValue = vue.ref(percent.value / 100 * 250);
    vue.watch(percent, (newValue) => {
      progressValue.value = newValue / 100 * 250;
    });
    return (_ctx, _cache) => {
      const _component_tass_icon = vue.resolveComponent("tass-icon");
      return props.select == "on" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        props.type == "in" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
          vue.createElementVNode("div", {
            class: "colorLine",
            style: vue.normalizeStyle("background:" + props.color + ";height:26px;text-align:right;line-height:26px;width:" + props.percent + "%")
          }, vue.toDisplayString(props.percent) + "% ", 5)
        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
          vue.createElementVNode("div", {
            class: "colorLine",
            style: vue.normalizeStyle("background:" + props.color + ";width:" + props.percent + "%")
          }, null, 4)
        ])),
        __props.status ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
          __props.status == "warning" ? (vue.openBlock(), vue.createBlock(_component_tass_icon, {
            key: 0,
            name: "warning"
          })) : vue.createCommentVNode("", true),
          __props.status == "success" ? (vue.openBlock(), vue.createBlock(_component_tass_icon, {
            key: 1,
            name: "success"
          })) : vue.createCommentVNode("", true)
        ])) : vue.unref(percent) == 100 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, " 满 ")) : props.type != "in" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(props.percent) + "% ", 1)) : vue.createCommentVNode("", true)
      ])) : (vue.openBlock(), vue.createElementBlock("div", {
        key: 1,
        class: "tas-circleprogress",
        style: vue.normalizeStyle({ width: vue.unref(width), height: vue.unref(height) })
      }, [
        (vue.openBlock(), vue.createElementBlock("svg", _hoisted_7, [
          _hoisted_8,
          vue.createElementVNode("circle", {
            r: "40",
            cx: "48",
            cy: "48",
            fill: "none",
            "stroke-miterlimit": "20",
            "stroke-width": "10",
            class: "svg-progress",
            style: vue.normalizeStyle(`stroke-dasharray: ${progressValue.value}, 279.602;stroke:${vue.unref(color)};`)
          }, null, 4)
        ])),
        __props.status ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
          __props.status == "warning" ? (vue.openBlock(), vue.createBlock(_component_tass_icon, {
            key: 0,
            name: "warning"
          })) : vue.createCommentVNode("", true),
          __props.status == "success" ? (vue.openBlock(), vue.createBlock(_component_tass_icon, {
            key: 1,
            name: "success"
          })) : vue.createCommentVNode("", true)
        ])) : props.type != "in" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, vue.toDisplayString(props.percent) + "% ", 1)) : vue.createCommentVNode("", true)
      ], 4));
    };
  }
});
exports.default = _sfc_main;