feat: add fill circle radius calculations

Author: setaman

src/App.vue

@@ -38,7 +38,8 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress :size="600" color-fill="red" :progress="progress"> </ve-progress>
+        <ve-progress :size="600" line-position="out 80" :color-fill="emptyColorFill" :progress="progress">
+        </ve-progress>
       </div>
       <ve-progress
         dot="20 green"

src/components/Circle/Circle.vue

@@ -31,7 +31,7 @@
     <circle
       class="ep-circle--progress__fill"
       :class="animationClass"
-      :r="radius"
+      :r="fillRadius"
       :cx="position"
       :cy="position"
       :fill="computedColorFill"

src/components/Circle/circleMixin.js

@@ -32,6 +32,13 @@ export default {
     radius() {
       return radius(this.options);
     },
+    fillRadius() {
+      const { offset, position } = this.options.linePosition;
+      if (position === "center") {
+        return this.radius;
+      }
+      return position === "out" ? this.radius - offset - this.thickness / 2 : this.radius + this.thickness / 2;
+    },
     emptyRadius() {
       return emptyRadius(this.options);
     },