refac: cleanup components

src/components/Circle/Circle.vue

@@ -13,7 +13,7 @@
       :r="emptyFillRadius"
       :cx="position"
       :cy="position"
-      :fill="computedEmptyColorFill"
+      :fill="emptyColorFill"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
       :style="{
         transitionDuration: animationDuration,
@@ -26,15 +26,15 @@
       :r="emptyRadius"
       :cx="position"
       :cy="position"
-      :stroke="computedEmptyColor"
+      :stroke="emptyColor"
       :stroke-dasharray="emptyDasharray"
       fill="transparent"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
       :style="{
         transitionDuration: animationDuration,
         transitionTimingFunction: styles.transitionTimingFunction,
       }"
-      :stroke-width="emptyThickness"
+      :stroke-width="options.emptyThickness"
     >
     </circle>
     <circle
@@ -43,7 +43,7 @@
       :r="fillRadius"
       :cx="position"
       :cy="position"
-      :fill="computedColorFill"
+      :fill="colorFill"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
       :style="{ transition: styles.transition }"
     >
@@ -60,8 +60,8 @@
       :cx="position"
       :cy="position"
       fill="transparent"
-      :stroke="computedColor"
-      :stroke-width="thickness"
+      :stroke="color"
+      :stroke-width="options.thickness"
       :stroke-linecap="options.line"
       :stroke-dasharray="circumference"
       :style="styles"

src/components/Circle/CircleDot.vue

@@ -25,6 +25,15 @@ export default {
     dotContainerFullRotationDeg() {
       return this.options.half ? 180 : 360;
     },
+    dotSize() {
+      return this.options.dot.size;
+    },
+    dotColor() {
+      return this.options.dot.color;
+    },
+    globalDotSize() {
+      return this.globalDot.size;
+    },
     dotContainerStyle() {
       return {
         width: `${this.dotContainerSize}px`,
@@ -53,7 +62,7 @@ export default {
           "animation-duration": `${this.animationDuration + 500}ms`,
         },
       };
-      return styles[this.animation.type];
+      return styles[this.options.animation.type];
     },
     dotStyle() {
       return {
@@ -79,9 +88,9 @@ export default {
   methods: {
     calculateProgress() {
       if (this.options.half) {
-        return this.computedProgress < 0 ? this.computedProgress - 100 : this.computedProgress;
+        return this.progress < 0 ? this.progress - 100 : this.progress;
       }
-      return this.computedProgress;
+      return this.progress;
     },
   },
 };

src/components/Circle/CircleLoader.vue

@@ -6,8 +6,8 @@
       :cx="position"
       :cy="position"
       fill="transparent"
-      :stroke="computedColor"
-      :stroke-width="thickness"
+      :stroke="color"
+      :stroke-width="options.thickness"
       :stroke-linecap="options.line"
       :stroke-dasharray="circumference"
       :style="{

src/components/Circle/HalfCircle.vue

@@ -9,7 +9,7 @@
   >
     <path
       v-if="options.emptyColorFill !== 'transparent'"
-      :fill="computedEmptyColorFill"
+      :fill="emptyColorFill"
       class="ep-half-circle--empty__fill"
       :d="emptyFillPath"
       :style="{
@@ -19,9 +19,9 @@
     >
     </path>
     <path
-      :stroke-width="emptyThickness"
+      :stroke-width="options.emptyThickness"
       fill="transparent"
-      :stroke="computedEmptyColor"
+      :stroke="emptyColor"
       class="ep-half-circle--empty"
       :d="emptyPath"
       :stroke-linecap="options.line"
@@ -37,7 +37,7 @@
       v-if="options.colorFill !== 'transparent'"
       class="ep-half-circle--progress__fill"
       :d="fillPath"
-      :fill="computedColorFill"
+      :fill="colorFill"
       :style="{ transition: styles.transition }"
     >
     </path>
@@ -47,12 +47,12 @@
       </g>
     </fade-in-transition>
     <path
-      :stroke-width="thickness"
+      :stroke-width="options.thickness"
       class="ep-half-circle--progress ep-circle--progress"
       :class="animationClass"
       :d="path"
       fill="transparent"
-      :stroke="computedColor"
+      :stroke="color"
       :stroke-dasharray="circumference"
       :stroke-linecap="options.line"
       :style="styles"

src/components/Circle/HalfCircleLoader.vue

@@ -1,11 +1,11 @@
 <template>
   <g :style="{ opacity: opacity }">
     <path
-      :stroke-width="thickness"
+      :stroke-width="options.thickness"
       class="ep-half-circle--loader animation__loading"
       :d="path"
       fill="transparent"
-      :stroke="computedColor"
+      :stroke="color"
       :stroke-dasharray="circumference"
       :stroke-linecap="options.line"
       :style="{

src/components/Circle/circleMixin.js

@@ -15,83 +15,65 @@ export default {
     isInitialized: false,
   }),
   computed: {
-    computedProgress() {
+    progress() {
       return parseFloat(this.options.progress || 0);
     },
 
     progressOffset() {
-      const offset = this.circumference - (this.computedProgress / 100) * this.circumference;
+      const offset = this.circumference - (this.progress / 100) * this.circumference;
       if (Math.abs(this.circumference - offset) < 1) return this.circumference - 0.5;
       return offset;
     },
 
-    lineMode() {
-      return this.options.lineMode;
-    },
-
     radius() {
       return radius(this.options);
     },
     fillRadius() {
-      return fillRadius(this.options.linePosition, this.thickness, this.radius);
+      return fillRadius(this.options.linePosition, this.options.thickness, this.radius);
     },
     emptyRadius() {
       return emptyRadius(this.options);
     },
     emptyFillRadius() {
-      return fillRadius(this.options.emptyLinePosition, this.emptyThickness, this.emptyRadius);
+      return fillRadius(this.options.emptyLinePosition, this.options.emptyThickness, this.emptyRadius);
     },
 
     dataIsAvailable() {
-      return isValidNumber(this.computedProgress) && !this.options.noData;
+      return isValidNumber(this.progress) && !this.options.noData;
     },
 
     animationClass() {
       return [
         `animation__${
-          !this.options.loading && this.dataIsAvailable && this.isInitialized ? this.animation.type : "none"
+          !this.options.loading && this.dataIsAvailable && this.isInitialized ? this.options.animation.type : "none"
         }`,
       ];
     },
-    animation() {
-      return this.options.animation;
-    },
     animationDuration() {
-      return `${this.animation.duration}ms`;
+      return `${this.options.animation.duration}ms`;
     },
 
-    computedColor() {
+    color() {
       return Array.isArray(this.options.color.colors)
         ? `url(#ep-progress-gradient-${this.options.id})`
         : this.options.color;
     },
-    computedEmptyColor() {
+    emptyColor() {
       return Array.isArray(this.options.emptyColor.colors)
         ? `url(#ep-empty-gradient-${this.options.id})`
         : this.options.emptyColor;
     },
-    computedColorFill() {
+    colorFill() {
       return Array.isArray(this.options.colorFill.colors)
         ? `url(#ep-progress-fill-gradient-${this.options.id})`
         : this.options.colorFill;
     },
-    computedEmptyColorFill() {
+    emptyColorFill() {
       return Array.isArray(this.options.emptyColorFill.colors)
         ? `url(#ep-empty-fill-gradient-${this.options.id})`
         : this.options.emptyColorFill;
     },
 
-    thickness() {
-      return this.options.thickness;
-    },
-
-    globalThickness() {
-      return this.options.globalThickness;
-    },
-    emptyThickness() {
-      return this.options.emptyThickness;
-    },
-
     angle() {
       return isValidNumber(this.options.angle) ? this.options.angle : -90;
     },
@@ -100,12 +82,9 @@ export default {
       return "50% 50%";
     },
 
-    dash() {
-      return this.options.dash;
-    },
     emptyDasharray() {
-      if (!this.dash.count || !this.dash.spacing) {
-        return this.dash;
+      if (!this.options.dash.count || !this.options.dash.spacing) {
+        return this.options.dash;
       }
       return `${2 * Math.PI * this.emptyRadius * this.getDashPercent()},
               ${2 * Math.PI * this.emptyRadius * this.getDashSpacingPercent()}`.trim();
@@ -117,24 +96,6 @@ export default {
         : this.circumference;
     },
 
-    gap() {
-      return this.options.gap;
-    },
-
-    globalGap() {
-      return this.options.globalGap;
-    },
-
-    dotSize() {
-      return this.options.dot.size;
-    },
-    dotColor() {
-      return this.options.dot.color;
-    },
-    globalDotSize() {
-      return this.globalDot.size;
-    },
-
     styles() {
       return {
         transition: `${this.animationDuration}, opacity 0.3s`,
@@ -189,7 +150,7 @@ export default {
   async mounted() {
     if (!this.options.loading) {
       // await initial delay before applying animations
-      await wait(this.animation.delay);
+      await wait(this.options.animation.delay);
     }
     this.isInitialized = true;
   },