first

node_modules/vant/lib/circle/index.css

@@ -0,0 +1 @@
+.van-circle{position:relative;display:inline-block;width:100px;height:100px;text-align:center}.van-circle svg{position:absolute;top:0;left:0;width:100%;height:100%}.van-circle__layer{stroke:#fff}.van-circle__hover{fill:none;stroke:#1989fa;stroke-linecap:round}.van-circle__text{position:absolute;top:50%;left:0;box-sizing:border-box;width:100%;padding:0 4px;color:#323233;font-weight:500;font-size:14px;line-height:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}

node_modules/vant/lib/circle/index.js

@@ -0,0 +1,183 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+var _raf = require("../utils/dom/raf");
+
+var _createNamespace = (0, _utils.createNamespace)('circle'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+var PERIMETER = 3140;
+var uid = 0;
+
+function format(rate) {
+  return Math.min(Math.max(rate, 0), 100);
+}
+
+function getPath(clockwise, viewBoxSize) {
+  var sweepFlag = clockwise ? 1 : 0;
+  return "M " + viewBoxSize / 2 + " " + viewBoxSize / 2 + " m 0, -500 a 500, 500 0 1, " + sweepFlag + " 0, 1000 a 500, 500 0 1, " + sweepFlag + " 0, -1000";
+}
+
+var _default = createComponent({
+  props: {
+    text: String,
+    size: [Number, String],
+    color: [String, Object],
+    layerColor: String,
+    strokeLinecap: String,
+    value: {
+      type: Number,
+      default: 0
+    },
+    speed: {
+      type: [Number, String],
+      default: 0
+    },
+    fill: {
+      type: String,
+      default: 'none'
+    },
+    rate: {
+      type: [Number, String],
+      default: 100
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 40
+    },
+    clockwise: {
+      type: Boolean,
+      default: true
+    }
+  },
+  beforeCreate: function beforeCreate() {
+    this.uid = "van-circle-gradient-" + uid++;
+  },
+  computed: {
+    style: function style() {
+      var size = (0, _utils.addUnit)(this.size);
+      return {
+        width: size,
+        height: size
+      };
+    },
+    path: function path() {
+      return getPath(this.clockwise, this.viewBoxSize);
+    },
+    viewBoxSize: function viewBoxSize() {
+      return +this.strokeWidth + 1000;
+    },
+    layerStyle: function layerStyle() {
+      return {
+        fill: "" + this.fill,
+        stroke: "" + this.layerColor,
+        strokeWidth: this.strokeWidth + "px"
+      };
+    },
+    hoverStyle: function hoverStyle() {
+      var offset = PERIMETER * this.value / 100;
+      return {
+        stroke: "" + (this.gradient ? "url(#" + this.uid + ")" : this.color),
+        strokeWidth: +this.strokeWidth + 1 + "px",
+        strokeLinecap: this.strokeLinecap,
+        strokeDasharray: offset + "px " + PERIMETER + "px"
+      };
+    },
+    gradient: function gradient() {
+      return (0, _utils.isObject)(this.color);
+    },
+    LinearGradient: function LinearGradient() {
+      var _this = this;
+
+      var h = this.$createElement;
+
+      if (!this.gradient) {
+        return;
+      }
+
+      var Stops = Object.keys(this.color).sort(function (a, b) {
+        return parseFloat(a) - parseFloat(b);
+      }).map(function (key, index) {
+        return h("stop", {
+          "key": index,
+          "attrs": {
+            "offset": key,
+            "stop-color": _this.color[key]
+          }
+        });
+      });
+      return h("defs", [h("linearGradient", {
+        "attrs": {
+          "id": this.uid,
+          "x1": "100%",
+          "y1": "0%",
+          "x2": "0%",
+          "y2": "0%"
+        }
+      }, [Stops])]);
+    }
+  },
+  watch: {
+    rate: {
+      handler: function handler(rate) {
+        this.startTime = Date.now();
+        this.startRate = this.value;
+        this.endRate = format(rate);
+        this.increase = this.endRate > this.startRate;
+        this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
+
+        if (this.speed) {
+          (0, _raf.cancelRaf)(this.rafId);
+          this.rafId = (0, _raf.raf)(this.animate);
+        } else {
+          this.$emit('input', this.endRate);
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    animate: function animate() {
+      var now = Date.now();
+      var progress = Math.min((now - this.startTime) / this.duration, 1);
+      var rate = progress * (this.endRate - this.startRate) + this.startRate;
+      this.$emit('input', format(parseFloat(rate.toFixed(1))));
+
+      if (this.increase ? rate < this.endRate : rate > this.endRate) {
+        this.rafId = (0, _raf.raf)(this.animate);
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": bem(),
+      "style": this.style
+    }, [h("svg", {
+      "attrs": {
+        "viewBox": "0 0 " + this.viewBoxSize + " " + this.viewBoxSize
+      }
+    }, [this.LinearGradient, h("path", {
+      "class": bem('layer'),
+      "style": this.layerStyle,
+      "attrs": {
+        "d": this.path
+      }
+    }), h("path", {
+      "attrs": {
+        "d": this.path
+      },
+      "class": bem('hover'),
+      "style": this.hoverStyle
+    })]), this.slots() || this.text && h("div", {
+      "class": bem('text')
+    }, [this.text])]);
+  }
+});
+
+exports.default = _default;

node_modules/vant/lib/circle/index.less

@@ -0,0 +1,41 @@
+@import '../style/var';
+
+.van-circle {
+  position: relative;
+  display: inline-block;
+  width: @circle-size;
+  height: @circle-size;
+  text-align: center;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__layer {
+    stroke: @circle-layer-color;
+  }
+
+  &__hover {
+    fill: none;
+    stroke: @circle-color;
+    stroke-linecap: round;
+  }
+
+  &__text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 @padding-base;
+    color: @circle-text-color;
+    font-weight: @circle-text-font-weight;
+    font-size: @circle-text-font-size;
+    line-height: @circle-text-line-height;
+    transform: translateY(-50%);
+  }
+}

node_modules/vant/lib/circle/style/index.js

@@ -0,0 +1,2 @@
+require('../../style/base.css');
+require('../index.css');

node_modules/vant/lib/circle/style/less.js

@@ -0,0 +1,2 @@
+require('../../style/base.less');
+require('../index.less');