feat: add loader options parsing

Author: setaman

src/App.vue

@@ -48,6 +48,7 @@
           :thickness="20"
           :empty-thickness="10"
           dot="10 red"
+          :loader="{ thickness: 40, color: 'red' }"
           line-mode="bottom"
           :no-data="noData"
           :determinate="determinate"

src/components/VueEllipseProgress.vue

@@ -39,7 +39,7 @@ import { getNumberIfValid, isValidNumber } from "../utils";
 import props from "./interface";
 import CircleContainer from "./Circle/CircleContainer.vue";
 import Counter from "./Counter.vue";
-import parseOptions from "./optionsParser";
+import { parseOptions, calcThickness, lineModeParser } from "./optionsParser";
 
 export default {
   name: "VueEllipseProgress",
@@ -84,17 +84,19 @@ export default {
       const previousCircles = [];
       for (let i = 0; i < this.circlesData.length; i++) {
         const options = this.circlesData[i];
-        normalizedCircles.push({
-          ...parseOptions({
-            index: i,
-            id: i,
-            ...options,
-            globalDot: this.dot,
-            globalGap: this.gap,
-            globalThickness: this.thickness,
-            previousCircles: [...previousCircles],
-          }),
+        const parsedOptions = parseOptions({
+          index: i,
+          id: i,
+          ...options,
+          globalDot: this.dot,
+          globalGap: this.gap,
+          globalThickness: this.thickness,
+          previousCircles: [...previousCircles],
         });
+        const loaderOptions = { ...parsedOptions, ...parsedOptions.loader };
+        loaderOptions.thickness = calcThickness(loaderOptions.thickness, parsedOptions.size);
+        loaderOptions.lineMode = parsedOptions.loader.lineMode ? lineModeParser(loaderOptions) : parsedOptions.lineMode;
+        normalizedCircles.push({ ...parsedOptions, loader: loaderOptions });
         const { gap, thickness, dot } = normalizedCircles[i];
         previousCircles.push({ gap, thickness, dot });
       }

src/components/optionsParser.js

@@ -1,6 +1,6 @@
 import { getNumberIfValid, isValidNumber } from "@/utils";
 
-const lineModeParser = (options) => {
+export const lineModeParser = (options) => {
   const lineModeConfig = options.lineMode.trim().split(" ");
   const mode = options.multiple ? "multiple" : lineModeConfig[0];
   return {
@@ -49,12 +49,12 @@ const dotParser = (dot) => {
   };
 };
 
-const calcThickness = (thickness, size) => {
+export const calcThickness = (thickness, size) => {
   const value = parseFloat(thickness);
   return thickness.toString().includes("%") ? (value * size) / 100 : value;
 };
 
-export default (options) => {
+export const parseOptions = (options) => {
   const dot = dotParser(options.dot);
   const globalDot = dotParser(options.globalDot);
   return {