fix: correctly set multiple prop for each circle

Author: setaman

src/App.vue

@@ -91,7 +91,7 @@ export default {
     price: "",
     circles: [
       { progress: 50, color: "red", dot: "20 yellow" },
-      { progress: 50, color: "red", half: true, angle: -90, dot: "10 green" },
+      { progress: 50, color: "yellow", half: true, angle: -90, dot: "10 green" },
       { progress: 50, color: "blue", reverse: false },
     ],
     determinate: false,

src/components/Circle/radiusCalculation.js

@@ -23,8 +23,8 @@ const previousCirclesThickness = (options) => {
   if (options.index === 0) return 0;
   const currentCircleGap = isValidNumber(options.gap) ? options.gap : options.globalGap;
   const preCirclesThickness = [];
-  for (let i = 0; i < options.options.previousCircles.length; i++) {
-    const data = options.options.previousCircles[i];
+  for (let i = 0; i < options.previousCircles.length; i++) {
+    const data = options.previousCircles[i];
     const dot = data.dot ? data.dot.size : options.globalDot.size;
     const thickness = isValidNumber(data.thickness) ? data.thickness : options.globalThickness;
     const gap = isValidNumber(data.gap) ? data.gap : options.globalGap;

src/components/VueEllipseProgress.vue

@@ -72,6 +72,7 @@ export default {
         return this.data.map((options) => ({
           ...this.$props,
           ...options,
+          multiple: true,
           emptyThickness: isValidNumber(options.thickness) ? options.thickness : this.$props.thickness,
           data: undefined, // do not pass data prop
         }));
@@ -91,7 +92,6 @@ export default {
             globalDot: this.dot,
             globalGap: this.gap,
             globalThickness: this.thickness,
-            multiple: this.isMultiple,
             previousCircles: [...previousCircles],
           }),
         });

src/components/optionsParser.js

@@ -61,6 +61,6 @@ export default (options) => ({
   dot: { ...dotParser(options.dot), size: calcThickness(dotParser(options.dot).size, options.size) },
   globalDot: { ...dotParser(options.globalDot), size: calcThickness(dotParser(options.globalDot).size, options.size) },
   dash: dashParser(options.dash),
-  lineMode: options.isMultiple ? "multiple" : lineModeParser(options.lineMode),
+  lineMode: options.multiple ? "multiple" : lineModeParser(options.lineMode),
   animation: animationParser(options.animation),
 });