[improvement] rename packages dir to src (#3659)

src/circle/index.js

@@ -0,0 +1,117 @@
+import { createNamespace } from '../utils';
+import { raf, cancelRaf } from '../utils/dom/raf';
+import { BLUE, WHITE } from '../utils/color';
+
+const [createComponent, bem] = createNamespace('circle');
+const PERIMETER = 3140;
+const PATH = 'M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0';
+
+function format(rate) {
+  return Math.min(Math.max(rate, 0), 100);
+}
+
+export default createComponent({
+  props: {
+    text: String,
+    value: Number,
+    speed: Number,
+    size: {
+      type: String,
+      default: '100px'
+    },
+    fill: {
+      type: String,
+      default: 'none'
+    },
+    rate: {
+      type: Number,
+      default: 100
+    },
+    layerColor: {
+      type: String,
+      default: WHITE
+    },
+    color: {
+      type: String,
+      default: BLUE
+    },
+    strokeWidth: {
+      type: Number,
+      default: 40
+    },
+    clockwise: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    style() {
+      return {
+        width: this.size,
+        height: this.size
+      };
+    },
+
+    layerStyle() {
+      let offset = (PERIMETER * (100 - this.value)) / 100;
+      offset = this.clockwise ? offset : PERIMETER * 2 - offset;
+      return {
+        stroke: `${this.color}`,
+        strokeDashoffset: `${offset}px`,
+        strokeWidth: `${this.strokeWidth + 1}px`
+      };
+    },
+
+    hoverStyle() {
+      return {
+        fill: `${this.fill}`,
+        stroke: `${this.layerColor}`,
+        strokeWidth: `${this.strokeWidth}px`
+      };
+    }
+  },
+
+  watch: {
+    rate: {
+      handler() {
+        this.startTime = Date.now();
+        this.startRate = this.value;
+        this.endRate = format(this.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() {
+      const now = Date.now();
+      const progress = Math.min((now - this.startTime) / this.duration, 1);
+      const 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(h) {
+    return (
+      <div class={bem()} style={this.style}>
+        <svg viewBox="0 0 1060 1060">
+          <path class={bem('hover')} style={this.hoverStyle} d={PATH} />
+          <path class={bem('layer')} style={this.layerStyle} d={PATH} />
+        </svg>
+        {this.slots() || (this.text && <div class={bem('text')}>{this.text}</div>)}
+      </div>
+    );
+  }
+});