Merge branch 'v2-dev' into v2-fix-tests

Author: setaman

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.7",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/veprogress.umd.min.js",

src/App.vue

@@ -39,15 +39,29 @@
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
         <ve-progress
-          :size="600"
-          :angle="0"
-          line-position="out 26"
-          empty-line-position="out 20"
-          empty-color-fill="transparent"
-          color-fill="red"
+          :size="200"
           :progress="progress"
+          :legend="1315.56"
+          animation="rs 2000 500"
+          :loading="loading"
+          :reverse="true"
+          :thickness="20"
+          :empty-thickness="10"
+          dot="10 red"
+          :loader="{ thickness: 40, color: 'red' }"
+          line-mode="bottom"
           :no-data="noData"
+          :determinate="determinate"
         >
+          <template v-slot:default="{ counterTick }">
+            <span
+              :style="` transition: 0.5s; font-weight: bold; font-size: 1.6rem; color: ${
+                counterTick.currentValue < 600 ? 'red' : 'yellow'
+              };`"
+            >
+              {{ formattedPrice(counterTick.currentValue) }}
+            </span>
+          </template>
         </ve-progress>
       </div>
       <ve-progress

src/components/VueEllipseProgress.vue

@@ -11,11 +11,11 @@
       <div class="ep-legend--container" :style="{ maxWidth: `${size}px` }">
         <div
           class="ep-legend--value"
-          v-if="legend && !isMultiple"
+          v-if="!hideLegend && !isMultiple"
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
           :style="{ fontSize, color: fontColor }"
         >
-          <counter :value="legendVal" :animation="normalizedCircles[0].animation" :loading="loading">
+          <counter :value="computedLegend" :animation="normalizedCircles[0].animation" :loading="loading">
             <template v-slot:default="{ counterTick }">
               <span v-if="legendFormatter">
                 <span v-if="isHTML" v-html="legendFormatter(counterTick)"></span>
@@ -49,11 +49,11 @@ export default {
     counterTick: {},
   }),
   computed: {
-    legendVal() {
+    computedLegend() {
       if (this.loading || this.noData) {
         return 0;
       }
-      return this.legendValue ? this.legendValue : getNumberIfValid(this.progress) || 0;
+      return this.legend ? this.legend : getNumberIfValid(this.progress) || 0;
     },
     shouldHideLegendValue() {
       return !this.isDataAvailable || this.loading;

src/components/interface.js

@@ -38,7 +38,7 @@ const options = {
     require: true,
     validator: (val) => val >= -100 && val <= 100,
   },
-  legendValue: {
+  legend: {
     type: [Number, String],
     required: false,
     validator: (value) => !Number.isNaN(parseFloat(value.toString().replace(",", "."))),
@@ -105,10 +105,10 @@ const options = {
       return isValidType && isValidDuration && isValidDelay;
     },
   },
-  legend: {
+  hideLegend: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   legendClass: {
     type: String,

tests/unit/container.spec.js

@@ -69,7 +69,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
     it("replaces the progress as the legend of the circle", () => {
       const legendValue = 324;
       wrapper.setProps({ legendValue });
-      expect(wrapper.vm.legendVal).to.equal(legendValue);
+      expect(wrapper.vm.computedLegend).to.equal(legendValue);
       expect(wrapper.vm.progress).to.equal(progress);
     });
   });