Merge branch 'v2-dev' into v2-docs

Author: setaman

src/App.vue

@@ -38,53 +38,7 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress
-          :loading="loading"
-          style="padding-right: 10px"
-          :size="200"
-          :progress="progress"
-          hide-legend
-          :thickness="15"
-          :empty-thickness="15"
-          line-position="center"
-          color-fill="red"
-        >
-        </ve-progress>
-        <ve-progress
-          :loading="loading"
-          style="padding-right: 10px"
-          :size="200"
-          :thickness="15"
-          :empty-thickness="15"
-          :progress="progress"
-          hide-legend
-          line-position="out"
-          color-fill="red"
-        >
-        </ve-progress>
-        <ve-progress
-          :loading="loading"
-          style="padding-right: 10px"
-          :size="200"
-          :thickness="15"
-          :empty-thickness="15"
-          :progress="progress"
-          hide-legend
-          line-position="out -30"
-          color-fill="red"
-        >
-        </ve-progress>
-        <ve-progress
-          :size="200"
-          :loading="loading"
-          :thickness="15"
-          :empty-thickness="15"
-          :progress="progress"
-          hide-legend
-          line-position="in"
-          color-fill="red"
-        >
-        </ve-progress>
+        <ve-progress :progress="progress" :thickness="10" :empty-thickness="20" line-mode="center"> </ve-progress>
       </div>
       <ve-progress
         :loading="loading"

src/components/Circle/radiusCalculation.js

@@ -12,7 +12,7 @@ const baseRadius = (options) => {
 const emptyBaseRadius = ({ size, emptyThickness }) => {
   return half(size) - half(emptyThickness);
 };
-const normalLineModeRadius = (options) => {
+const centerLineModeRadius = (options) => {
   if (thicknessWithDot(options) < options.emptyThickness) {
     return emptyBaseRadius(options);
   }
@@ -34,7 +34,7 @@ const previousCirclesThickness = (options) => {
   return preCirclesThickness.reduce((acc, current) => acc + current) + currentCircleGap;
 };
 
-const radiusNormalMode = (options) => normalLineModeRadius(options);
+const radiusCenterMode = (options) => centerLineModeRadius(options);
 const radiusInMode = (options) =>
   emptyRadius(options) - (half(options.emptyThickness) + half(options.thickness) + options.lineMode.offset);
 const radiusOutOverMode = (options) => {
@@ -46,7 +46,7 @@ const radiusOutOverMode = (options) => {
 const radiusTopMode = (options) => emptyRadius(options) + half(options.emptyThickness);
 const radiusBottomMode = (options) => emptyRadius(options) - half(options.emptyThickness);
 
-const emptyRadiusNormalMode = (options) => normalLineModeRadius(options);
+const emptyRadiusCenterMode = (options) => centerLineModeRadius(options);
 const emptyRadiusInMode = (options) => {
   const dotSizeLimit = half(options.thickness) + options.emptyThickness + options.lineMode.offset;
   if (half(options.dot.size) > dotSizeLimit) {
@@ -81,7 +81,7 @@ const emptyRadiusTopMode = (options) => emptyBaseRadius(options) - half(thicknes
 export const radius = (options) => {
   const modes = {
     multiple: () => baseRadius(options) - previousCirclesThickness(options),
-    normal: () => radiusNormalMode(options),
+    center: () => radiusCenterMode(options),
     in: () => radiusInMode(options),
     "out-over": () => radiusOutOverMode(options),
     bottom: () => radiusBottomMode(options),
@@ -94,7 +94,7 @@ export const radius = (options) => {
 export const emptyRadius = (options) => {
   const modes = {
     multiple: () => baseRadius(options) - previousCirclesThickness(options),
-    normal: () => emptyRadiusNormalMode(options),
+    center: () => emptyRadiusCenterMode(options),
     in: () => emptyRadiusInMode(options),
     "in-over": () => emptyRadiusInOverMode(options),
     out: () => emptyRadiusOutMode(options),

src/components/interface.js

@@ -77,10 +77,10 @@ const options = {
   lineMode: {
     type: String,
     required: false,
-    default: "normal",
+    default: "center",
     validator: (value) => {
       const lineModeConfig = value.split(" ");
-      const isValidType = ["normal", "out", "out-over", "in", "in-over", "top", "bottom"].includes(lineModeConfig[0]);
+      const isValidType = ["center", "out", "out-over", "in", "in-over", "top", "bottom"].includes(lineModeConfig[0]);
       const isValidOffset = lineModeConfig[1] ? !Number.isNaN(parseFloat(lineModeConfig[1])) : true;
 
       return isValidType && isValidOffset;

tests/unit/circle/circle-line.spec.js

@@ -40,13 +40,13 @@ describe("#line", () => {
 });
 describe("#lineMode", () => {
   describe("#lineMode.mode", () => {
-    describe("#lineMode.mode.normal", () => {
+    describe("#lineMode.mode.center", () => {
       let thickness = 20;
       let emptyThickness = 10;
       const wrapper = localFactory({
         thickness,
         emptyThickness,
-        lineMode: localLineModeParser("normal"),
+        lineMode: localLineModeParser("center"),
         animation: animationParser("default 0 0"),
       });
 
@@ -66,15 +66,15 @@ describe("#lineMode", () => {
         });
         it("in case #thickness >= #emptyThickness and #lineMode.offset = 10", async () => {
           // offset must be ignored in this mode
-          await setCircleProps(wrapper, { lineMode: localLineModeParser("normal 10") });
+          await setCircleProps(wrapper, { lineMode: localLineModeParser("center 10") });
 
           let expectedProgressCircleRadius = baseRadius - thickness / 2;
           let expectedEmptyCircleRadius = expectedProgressCircleRadius;
           compareRadiusValues(wrapper, expectedProgressCircleRadius, expectedEmptyCircleRadius);
 
           thickness = emptyThickness = 10;
 
-          await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
+          await setCircleProps(wrapper, { thickness, emptyThickness });
 
           expectedProgressCircleRadius = baseRadius - thickness / 2;
           expectedEmptyCircleRadius = expectedProgressCircleRadius;
@@ -95,7 +95,7 @@ describe("#lineMode", () => {
           thickness = 10;
           emptyThickness = 20;
 
-          await setCircleProps(wrapper, { thickness, emptyThickness, lineMode: localLineModeParser("normal 10") });
+          await setCircleProps(wrapper, { thickness, emptyThickness, lineMode: localLineModeParser("center 10") });
 
           const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
           const expectedProgressCircleRadius = expectedEmptyCircleRadius;

tests/unit/container.spec.js

@@ -335,7 +335,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
     describe("#lineMode parser", () => {
       it("parses default value correctly", () => {
         const defaultLineMode = {
-          mode: "normal",
+          mode: "center",
           offset: 0,
         };
         const { mode, offset } = lineModeParser(props.lineMode.default, false);