first

node_modules/vant/es/circle/index.js

@@ -0,0 +1,175 @@
+import { createNamespace, isObject, addUnit } from '../utils';
+import { raf, cancelRaf } from '../utils/dom/raf';
+
+var _createNamespace = 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";
+}
+
+export 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 = 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 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) {
+          cancelRaf(this.rafId);
+          this.rafId = 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 = 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])]);
+  }
+});