fix: fill circles rendering condition

Author: setaman

src/App.vue

@@ -43,8 +43,9 @@
           :progress="progress"
           :thickness="10"
           :loading="loading"
-          :color-fill="emptyColorFill"
+          color-fill="yellow"
           :loader="{ opacity: '1' }"
+          line-position="out 20"
           :empty-thickness="10"
         >
           <template v-slot:default="{ counterTick }">

src/components/Circle/Circle.vue

@@ -8,7 +8,7 @@
     }"
   >
     <circle
-      v-if="options.emptyColorFill"
+      v-if="options.emptyColorFill !== 'transparent'"
       class="ep-circle--empty__fill"
       :r="emptyFillRadius"
       :cx="position"
@@ -37,13 +37,8 @@
       :stroke-width="emptyThickness"
     >
     </circle>
-    <fade-in-transition>
-      <g v-if="isLoading">
-        <circle-loader :options="options.loader" />
-      </g>
-    </fade-in-transition>
     <circle
-      v-if="options.colorFill"
+      v-if="options.colorFill !== 'transparent'"
       class="ep-circle--progress__fill"
       :r="fillRadius"
       :cx="position"
@@ -53,6 +48,11 @@
       :style="{ transition: styles.transition }"
     >
     </circle>
+    <fade-in-transition>
+      <g v-if="isLoading">
+        <circle-loader :options="options.loader" />
+      </g>
+    </fade-in-transition>
     <circle
       class="ep-circle--progress"
       :class="animationClass"

src/components/Circle/HalfCircle.vue

@@ -8,7 +8,7 @@
     }"
   >
     <path
-      v-if="options.emptyColorFill"
+      v-if="options.emptyColorFill !== 'transparent'"
       :fill="computedEmptyColorFill"
       :d="emptyFillPath"
       :style="{
@@ -39,7 +39,7 @@
     </fade-in-transition>
 
     <path
-      v-if="options.colorFill"
+      v-if="options.colorFill !== 'transparent'"
       class="ep-half-circle--progress__fill"
       :d="fillPath"
       :fill="computedColorFill"

src/components/interface.js

@@ -5,8 +5,8 @@ const colorConfig = (defaultColor = "transparent") => ({
   required: false,
   default: defaultColor,
   validator: (value) => {
-    if (typeof value === "string" && value) {
-      return true;
+    if (typeof value === "string") {
+      return value;
     }
     if (typeof value === "object" && value.colors) {
       return value.colors.every((config) => config.color && config.offset);
@@ -18,7 +18,7 @@ const colorConfig = (defaultColor = "transparent") => ({
 const validateLoaderProps = (loaderOptions) =>
   Object.keys(loaderOptions).every((option) => {
     if (option === "opacity") {
-      return isValidNumber(loaderOptions[option] && loaderOptions[option] >= 0);
+      return isValidNumber(loaderOptions[option]) && loaderOptions[option] >= 0;
     }
     return options[option].validator(loaderOptions[option]);
   });
@@ -90,8 +90,8 @@ const options = {
   emptyLinePosition: linePosition,
   color: colorConfig("#3f79ff"),
   emptyColor: colorConfig("#e6e9f0"),
-  colorFill: colorConfig(""),
-  emptyColorFill: colorConfig(""),
+  colorFill: colorConfig(),
+  emptyColorFill: colorConfig(),
   fontSize: {
     type: String,
     required: false,