feat: add empty fill circle

Author: setaman

src/App.vue

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

src/components/Circle/Circle.vue

@@ -7,14 +7,27 @@
       transform: `rotate(${angle}deg)`,
     }"
   >
+    <circle
+      class="ep-circle--empty__fill"
+      :r="emptyFillRadius"
+      :cx="position"
+      :cy="position"
+      :fill="computedEmptyColorFill"
+      :class="{ 'ep-circle--nodata': !dataIsAvailable }"
+      :style="{
+        transitionDuration: animationDuration,
+        transitionTimingFunction: styles.transitionTimingFunction,
+      }"
+    >
+    </circle>
     <circle
       class="ep-circle--empty"
       :r="emptyRadius"
       :cx="position"
       :cy="position"
       :stroke="computedEmptyColor"
       :stroke-dasharray="emptyDasharray"
-      :fill="computedEmptyColorFill"
+      fill="transparent"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
       :style="{
         transitionDuration: animationDuration,
@@ -30,11 +43,11 @@
     </fade-in-transition>
     <circle
       class="ep-circle--progress__fill"
-      :class="animationClass"
       :r="fillRadius"
       :cx="position"
       :cy="position"
       :fill="computedColorFill"
+      :class="{ 'ep-circle--nodata': !dataIsAvailable }"
       :style="{ transition: styles.transition }"
     >
     </circle>

src/components/Circle/circleMixin.js

@@ -42,6 +42,15 @@ export default {
     emptyRadius() {
       return emptyRadius(this.options);
     },
+    emptyFillRadius() {
+      const { offset, position } = this.options.emptyLinePosition;
+      if (position === "center") {
+        return this.emptyRadius;
+      }
+      return position === "out"
+        ? this.emptyRadius - offset - this.emptyThickness / 2
+        : this.emptyRadius + this.emptyThickness / 2;
+    },
 
     dataIsAvailable() {
       return isValidNumber(this.computedProgress) && !this.options.noData;