Merge pull request #101 from setaman/#100-fix-gradient-colors-handling

#100 fix gradient colors handling

Author: setaman

src/App.vue

@@ -45,7 +45,17 @@
           :thickness="10"
           :empty-thickness="10"
           line-mode="out"
-          :loader="{ lineMode: 'in ', opacity: 1 }"
+          :color="gradient"
+          :loader="{
+            lineMode: 'in ',
+            opacity: 1,
+            color: {
+              colors: [
+                { color: 'yellow', offset: '0' },
+                { color: 'red', offset: '100' },
+              ],
+            },
+          }"
         >
         </ve-progress>
       </div>
@@ -58,7 +68,6 @@
         half
         :no-data="noData"
         :determinate="determinate"
-        :loader="{ thickness: 40, color: 'red' }"
       >
         <template #legend>
           <span>/ hey</span>
@@ -138,6 +147,21 @@ export default {
       ],
       radial: true,
     },
+    gradient: {
+      colors: [
+        {
+          color: "red",
+          offset: "0",
+          opacity: "1",
+        },
+        {
+          color: "blue",
+          offset: "100",
+          opacity: "1",
+        },
+      ],
+      radial: false,
+    },
     animation: "rs 1000 500",
   }),
   computed: {

src/components/Circle/CircleContainer.vue

@@ -3,21 +3,16 @@
     <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="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"
-          />
-          <gradient v-if="isLoaderColorGradient" :color="options.loader.color" type="loader" :id="options.id" />
+          <gradient v-if="isColorGradient" :color="options.color" type="progress" :uid="uid" />
+          <gradient v-if="isColorFillGradient" :color="options.colorFill" type="progress-fill" :uid="uid" />
+          <gradient v-if="isEmptyColorGradient" :color="options.emptyColor" type="empty" :uid="uid" />
+          <gradient v-if="isEmptyColorFillGradient" :color="options.emptyColorFill" type="empty-fill" :uid="uid" />
+          <gradient v-if="isLoaderColorGradient" :color="options.loader.color" type="loader" :uid="uid" />
         </defs>
-        <component :is="circleType" :options="options" :id="options.id" />
+        <component :is="circleType" :options="computedOptions" />
       </g>
     </svg>
-    <circle-dot v-if="options.dot" :options="options" :id="options.id" />
+    <circle-dot v-if="options.dot" :options="computedOptions" />
   </div>
 </template>
 
@@ -37,6 +32,12 @@ export default {
     },
   },
   computed: {
+    computedOptions() {
+      return {
+        ...this.options,
+        uid: this.uid,
+      };
+    },
     circleType() {
       return this.options.half ? "half-circle-progress" : "circle-progress";
     },
@@ -55,6 +56,9 @@ export default {
     isLoaderColorGradient() {
       return Array.isArray(this.options.loader.color.colors);
     },
+    uid() {
+      return this.$.uid;
+    },
   },
 };
 </script>

src/components/Circle/CircleLoader.vue

@@ -39,7 +39,7 @@ export default {
     },
     loaderColor() {
       return Array.isArray(this.options.loader.color.colors)
-        ? `url(#ep-loader-gradient-${this.options.id})`
+        ? `url(#ep-loader-gradient-${this.options.uid})`
         : this.options.color;
     },
   },

src/components/Circle/HalfCircleLoader.vue

@@ -40,7 +40,7 @@ export default {
     },
     halfLoaderColor() {
       return Array.isArray(this.options.loader.color.colors)
-        ? `url(#ep-loader-gradient-${this.options.id})`
+        ? `url(#ep-loader-gradient-${this.options.uid})`
         : this.options.color;
     },
   },

src/components/Circle/circleMixin.js

@@ -55,22 +55,22 @@ export default {
 
     color() {
       return Array.isArray(this.options.color.colors)
-        ? `url(#ep-progress-gradient-${this.options.id})`
+        ? `url(#ep-progress-gradient-${this.options.uid})`
         : this.options.color;
     },
     emptyColor() {
       return Array.isArray(this.options.emptyColor.colors)
-        ? `url(#ep-empty-gradient-${this.options.id})`
+        ? `url(#ep-empty-gradient-${this.options.uid})`
         : this.options.emptyColor;
     },
     colorFill() {
       return Array.isArray(this.options.colorFill.colors)
-        ? `url(#ep-progress-fill-gradient-${this.options.id})`
+        ? `url(#ep-progress-fill-gradient-${this.options.uid})`
         : this.options.colorFill;
     },
     emptyColorFill() {
       return Array.isArray(this.options.emptyColorFill.colors)
-        ? `url(#ep-empty-fill-gradient-${this.options.id})`
+        ? `url(#ep-empty-fill-gradient-${this.options.uid})`
         : this.options.emptyColorFill;
     },
 

src/components/Gradient.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="gradientComponent"
-    :id="`ep-${type}-gradient-${id}`"
+    :id="`ep-${type}-gradient-${uid}`"
     x1="0%"
     y1="100%"
     x2="0%"
@@ -31,7 +31,7 @@ export default {
       type: String,
       required: true,
     },
-    id: {
+    uid: {
       type: Number,
       required: true,
     },

src/components/VueEllipseProgress.vue

@@ -83,7 +83,6 @@ export default {
         const options = this.circlesData[i];
         const parsedOptions = parseOptions({
           index: i,
-          id: i,
           ...options,
           globalDot: this.dot,
           globalGap: this.gap,

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

@@ -45,8 +45,8 @@ const colorAsStringTests = (colorProp, color, selector, fill = false, half) => {
 const gradientColorTests = (colorProp, selector, gradientURLPrefix, fill = false, half) => {
   describe("applies gradient color correctly", () => {
     const wrapper = localFactory({ ...colorProp, half });
+    const { uid } = wrapper.componentVM;
     const circleWrapper = wrapper.find(selector);
-    const id = 0;
     const stopColorWrappers = wrapper.findAll("stop");
 
     it("recognizes gradient colors", () => {
@@ -59,7 +59,7 @@ const gradientColorTests = (colorProp, selector, gradientURLPrefix, fill = false
     });
     it(`applies gradient URL to SVG ${fill ? "fill" : "stroke"}`, () => {
       expect(circleWrapper.element.getAttribute(`${fill ? "fill" : "stroke"}`)).to.equal(
-        `url(#${gradientURLPrefix}-gradient-${id})`
+        `url(#${gradientURLPrefix}-gradient-${uid})`
       );
     });
     it("renders corresponding amount of stop colors SVG elements", () => {