fix: rewrite props parsing strategy

Author: setaman

src/App.vue

@@ -38,7 +38,7 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <!--<vue-ellipse-progress
+        <vue-ellipse-progress
           :size="200"
           :progress="progress"
           :legendValue="1315.56"
@@ -49,6 +49,7 @@
           line-mode="out 10"
           :no-data="noData"
           :determinate="determinate"
+          :data="circles"
         >
           <template v-slot:default="{ counterTick }">
             <span
@@ -59,7 +60,7 @@
               {{ formattedPrice(counterTick.currentValue) }}
             </span>
           </template>
-        </vue-ellipse-progress>-->
+        </vue-ellipse-progress>
       </div>
       <vue-ellipse-progress
         dot="20 green"

src/components/Circle/Circle.vue

@@ -4,7 +4,7 @@
     :style="{
       transitionDuration: styles.transitionDuration,
       transitionTimingFunction: styles.transitionTimingFunction,
-      transform: `rotate(${computedAngle}deg)`,
+      transform: `rotate(${angle}deg)`,
     }"
   >
     <circle
@@ -20,21 +20,21 @@
         transitionDuration: animationDuration,
         transitionTimingFunction: styles.transitionTimingFunction,
       }"
-      :stroke-width="computedEmptyThickness"
+      :stroke-width="emptyThickness"
     >
     </circle>
     <fade-in-transition>
       <g v-if="isLoading">
-        <g class="ep-circle--loading__container" :style="{ opacity: `${loading ? 1 : 0.45}` }">
+        <g class="ep-circle--loading__container" :style="{ opacity: `${options.loading ? 1 : 0.45}` }">
           <circle
             class="ep-circle--loading animation__loading"
             :r="radius"
             :cx="position"
             :cy="position"
             fill="transparent"
             :stroke="computedColor"
-            :stroke-width="computedThickness"
-            :stroke-linecap="line"
+            :stroke-width="thickness"
+            :stroke-linecap="options.line"
             :stroke-dasharray="circumference"
             :style="{
               transitionTimingFunction: styles.transitionTimingFunction,
@@ -55,8 +55,8 @@
       :cy="position"
       :fill="computedColorFill"
       :stroke="computedColor"
-      :stroke-width="computedThickness"
-      :stroke-linecap="line"
+      :stroke-width="thickness"
+      :stroke-linecap="options.line"
       :stroke-dasharray="circumference"
       :style="styles"
     >
@@ -74,7 +74,7 @@ export default {
   mixins: [CircleMixin],
   computed: {
     position() {
-      return this.size / 2;
+      return this.options.size / 2;
     },
     circumference() {
       return this.radius * 2 * Math.PI;

src/components/Circle/CircleContainer.vue

@@ -1,71 +1,55 @@
 <template>
-  <div class="ep-svg-container" :class="{ 'ep-reverse': reverse }">
-    <svg class="ep-svg" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
+  <div class="ep-svg-container" :class="{ 'ep-reverse': options.reverse }">
+    <svg class="ep-svg" :height="options.size" :width="options.size" xmlns="http://www.w3.org/2000/svg">
       <g class="ep-circle--container">
         <defs>
-          <gradient v-if="isColorGradient" :color="color" type="progress" :id="id" />
-          <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="id" />
-          <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="id" />
-          <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="id" />
+          <gradient v-if="isColorGradient" :color="options.color" type="progress" :id="options.id" />
+          <gradient v-if="isColorFillGradient" :color="options.colorFill" type="progress-fill" :id="options.id" />
+          <gradient v-if="isEmptyColorGradient" :color="options.emptyColor" type="empty" :id="options.id" />
+          <gradient
+            v-if="isEmptyColorFillGradient"
+            :color="options.emptyColorFill"
+            type="empty-fill"
+            :id="options.id"
+          />
         </defs>
-        <component :is="circleType" v-bind="$props" :id="id" />
+        <component :is="circleType" :options="options" :id="options.id" />
       </g>
     </svg>
-    <circle-dot v-if="dot" v-bind="$props" :id="id" />
+    <circle-dot v-if="options.dot" :options="options" :id="options.id" />
   </div>
 </template>
 
 <script>
 import Gradient from "../Gradient.vue";
 import HalfCircleProgress from "./HalfCircle.vue";
 import CircleProgress from "./Circle.vue";
-import { simplifiedProps } from "../interface";
 import CircleDot from "./CircleDot.vue";
 
 export default {
   name: "EpCircleContainer",
   components: { CircleDot, CircleProgress, HalfCircleProgress, Gradient },
   props: {
-    ...simplifiedProps,
-    index: {
-      type: Number,
+    options: {
+      type: Object,
       required: true,
     },
-    multiple: {
-      type: Boolean,
-      required: true,
-    },
-    globalThickness: {
-      type: [Number, String],
-      required: false,
-      default: "5%",
-    },
-    globalGap: {
-      type: Number,
-      required: false,
-    },
-    globalDot: {
-      type: [Number, String, Object],
-      required: false,
-    },
-    // Temp Fix
-    id: Number,
   },
   computed: {
     circleType() {
-      return this.half ? "half-circle-progress" : "circle-progress";
+      return this.options.half ? "half-circle-progress" : "circle-progress";
     },
     isColorGradient() {
-      return Array.isArray(this.color.colors);
+      return Array.isArray(this.options.color.colors);
     },
     isColorFillGradient() {
-      return Array.isArray(this.colorFill.colors);
+      return Array.isArray(this.options.colorFill.colors);
     },
     isEmptyColorGradient() {
-      return Array.isArray(this.emptyColor.colors);
+      return Array.isArray(this.options.emptyColor.colors);
     },
     isEmptyColorFillGradient() {
-      return Array.isArray(this.emptyColorFill.colors);
+      return Array.isArray(this.options.emptyColorFill.colors);
     },
   },
 };

src/components/Circle/CircleDot.vue

@@ -7,32 +7,30 @@
 </template>
 
 <script>
-import { simplifiedProps } from "../interface";
 import CircleMixin from "./circleMixin";
 
 export default {
-  props: { ...simplifiedProps },
   name: "CircleDot",
   mixins: [CircleMixin],
   computed: {
     dotContainerSize() {
       return this.radius * 2 + this.dotSize;
     },
     dotContainerRotation() {
-      if (this.isInitialized && !this.loading && this.dataIsAvailable) {
+      if (this.isInitialized && !this.options.loading && this.dataIsAvailable) {
         return this.dotEnd;
       }
       return this.dotStart;
     },
     dotContainerFullRotationDeg() {
-      return this.half ? 180 : 360;
+      return this.options.half ? 180 : 360;
     },
     dotContainerStyle() {
       return {
         width: `${this.dotContainerSize}px`,
         height: `${this.dotContainerSize}px`,
         transform: `rotate(${this.dotContainerRotation}deg)`,
-        transitionDuration: this.loading || !this.dataIsAvailable ? "0s" : this.animationDuration,
+        transitionDuration: this.options.loading || !this.dataIsAvailable ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
         "animation-duration": this.animationDuration,
         "--ep-dot-start": `${this.dotStart}deg`,
@@ -42,47 +40,45 @@ export default {
       };
     },
     dotContainerClasses() {
-      return [this.animationClass, !this.half || "ep-half-circle-progress__dot"];
+      return [this.animationClass, !this.options.half || "ep-half-circle-progress__dot"];
     },
     dotContainerAnimationStyle() {
       const styles = {
         loop: {
-          opacity: this.half ? 0 : 1,
+          opacity: this.options.half ? 0 : 1,
           "--ep-dot-loop-end": `${this.dotStart + this.dotContainerFullRotationDeg + this.dotEnd}deg`,
         },
         bounce: {
           opacity: 0,
-          "animation-duration": `${this.parsedAnimation.duration + 500}ms`,
+          "animation-duration": `${this.animationDuration + 500}ms`,
         },
       };
-      return styles[this.parsedAnimation.type];
+      return styles[this.animation.type];
     },
     dotStyle() {
       return {
         borderRadius: `${this.dotSize / 2}px`,
         width: `${this.dotSize}px`,
         backgroundColor: this.dotColor,
-        // eslint-disable-next-line max-len
-        // FIXME: this is passed as String (e.g "20 green") and destructed ({0:2, 0:0...}), causing CSSStyleDeclaration Error
-        // ...this.dot,
-        transitionDuration: this.loading || !this.dataIsAvailable ? "0s" : this.animationDuration,
+        ...this.options.dot,
+        transitionDuration: this.options.loading || !this.dataIsAvailable ? "0s" : this.animationDuration,
         height: `${this.dotSize}px`,
       };
     },
     dotStart() {
-      return this.half ? this.angle - 90 : this.angle + 90;
+      return this.options.half ? this.angle - 90 : this.angle + 90;
     },
     dotEnd() {
       const progress = this.calculateProgress();
       return this.dotStart + (progress * this.dotContainerFullRotationDeg) / 100;
     },
     isHidden() {
-      return !this.isInitialized || this.loading || !this.dataIsAvailable;
+      return !this.isInitialized || this.options.loading || !this.dataIsAvailable;
     },
   },
   methods: {
     calculateProgress() {
-      if (this.half) {
+      if (this.options.half) {
         return this.computedProgress < 0 ? this.computedProgress - 100 : this.computedProgress;
       }
       return this.computedProgress;

src/components/Circle/HalfCircle.vue

@@ -4,16 +4,16 @@
     :style="{
       transitionDuration: styles.transitionDuration,
       transitionTimingFunction: styles.transitionTimingFunction,
-      transform: `rotate(${computedAngle}deg)`,
+      transform: `rotate(${angle}deg)`,
     }"
   >
     <path
-      :stroke-width="computedEmptyThickness"
+      :stroke-width="emptyThickness"
       :fill="computedColorFill"
       :stroke="computedEmptyColor"
       class="ep-half-circle--empty"
       :d="emptyPath"
-      :stroke-linecap="line"
+      :stroke-linecap="options.line"
       :stroke-dasharray="emptyDasharray"
       :style="{
         transitionDuration: animationDuration,
@@ -24,15 +24,15 @@
     </path>
     <fade-in-transition>
       <g v-if="isLoading">
-        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
+        <g :style="{ opacity: `${options.loading ? 1 : 0.45}` }">
           <path
-            :stroke-width="computedThickness"
+            :stroke-width="thickness"
             class="ep-half-circle--loading animation__loading"
             :d="path"
             :fill="computedColorFill"
             :stroke="computedColor"
             :stroke-dasharray="circumference"
-            :stroke-linecap="line"
+            :stroke-linecap="options.line"
             :style="{
               transitionTimingFunction: styles.transitionTimingFunction,
               transformOrigin: styles.transformOrigin,
@@ -47,14 +47,14 @@
     </fade-in-transition>
 
     <path
-      :stroke-width="computedThickness"
+      :stroke-width="thickness"
       class="ep-half-circle--progress ep-circle--progress"
       :class="animationClass"
       :d="path"
       :fill="computedColorFill"
       :stroke="computedColor"
       :stroke-dasharray="circumference"
-      :stroke-linecap="line"
+      :stroke-linecap="options.line"
       :style="styles"
     >
     </path>
@@ -73,18 +73,18 @@ export default {
       return (this.radius * 2 * Math.PI) / 2;
     },
     path() {
-      return ` M ${this.position}, ${this.size / 2} a ${this.radius},${this.radius} 0 1,1 ${this.radius * 2},0`;
+      return ` M ${this.position}, ${this.options.size / 2} a ${this.radius},${this.radius} 0 1,1 ${this.radius * 2},0`;
     },
     emptyPath() {
-      return ` M ${this.emptyPosition}, ${this.size / 2} a ${this.emptyRadius},${this.emptyRadius} 0 1,1 ${
+      return ` M ${this.emptyPosition}, ${this.options.size / 2} a ${this.emptyRadius},${this.emptyRadius} 0 1,1 ${
         this.emptyRadius * 2
       },0`;
     },
     position() {
-      return this.size / 2 - this.radius;
+      return this.options.size / 2 - this.radius;
     },
     emptyPosition() {
-      return this.size / 2 - this.emptyRadius;
+      return this.options.size / 2 - this.emptyRadius;
     },
   },
 };