From 6f274e795428ce1f52d04559e135345956946e4f Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Mon, 31 Aug 2020 15:45:17 +0200
Subject: [PATCH 01/50] feat: add legendValueFormatter prop

---
 package.json                |  2 +-
 src/components/interface.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fb9b5c0..00d56a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.0",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
diff --git a/src/components/interface.js b/src/components/interface.js
index c505950..86dc48f 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -157,8 +157,20 @@ const props = {
   },
   reverse: {
     type: Boolean,
+    required: false,
     default: false,
   },
+  legendValueFormatter: {
+    type: Function,
+    required: false,
+    validator: (formatter) => {
+      if (!formatter({ currentValue: 50 })) {
+        console.warn("legendValueFormatter should return a value!");
+        return false;
+      }
+      return true;
+    },
+  },
 };
 
 const simplifiedProps = {};

From be4fa2b5347d4a5c3d8fa9c2df69b5a53e989240 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Mon, 31 Aug 2020 16:16:01 +0200
Subject: [PATCH 02/50] feat: add possibility to format legendValue

---
 src/App.vue                           | 11 ++++++++++-
 src/components/Counter.vue            | 10 +++++++++-
 src/components/VueEllipseProgress.vue |  8 +++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2cbc62d..6a95a6b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,12 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
-        <vue-ellipse-progress :progress="progress" reverse :data="circles" :gap="10">
+        <vue-ellipse-progress
+          :progress="progress"
+          :legendValue="135.56"
+          reverse
+          :legend-value-formatter="customFormatter"
+        >
           <span slot="legend-value">/200</span>
           <span slot="legend-caption">Some Caption</span>
         </vue-ellipse-progress>
@@ -139,6 +144,10 @@ export default {
     },
   },
   methods: {
+    customFormatter({ currentValue }) {
+      console.log(new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue));
+      return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue);
+    },
     updateProgress() {
       this.progress = parseFloat(Math.floor(Math.random() * 100).toFixed(2));
     },
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 1482164..ecf7426 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,5 +1,6 @@
 <template>
-  <span>{{ formattedValue }}</span>
+  <span v-if="legendValueFormatter">{{ customFormattedValue }}</span>
+  <span v-else>{{ formattedValue }}</span>
 </template>
 
 <script>
@@ -12,6 +13,10 @@ export default {
       type: [Number, String],
       required: true,
     },
+    legendValueFormatter: {
+      type: Function,
+      required: false,
+    },
     animation: {
       type: String,
       required: true,
@@ -51,6 +56,9 @@ export default {
     formattedValue() {
       return this.currentValue.toFixed(this.countDecimals()).replace(".", this.delimiter);
     },
+    customFormattedValue() {
+      return this.legendValueFormatter({ currentValue: this.currentValue });
+    },
     delay() {
       return animationParser(this.animation).delay;
     },
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 3154516..772e411 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -27,7 +27,13 @@
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
           :style="{ fontSize: fontSize, color: fontColor }"
         >
-          <counter :value="legendVal" :animation="animation" :loading="loading"> </counter>
+          <counter
+            :value="legendVal"
+            :animation="animation"
+            :loading="loading"
+            :legend-value-formatter="legendValueFormatter"
+          >
+          </counter>
           <slot name="legend-value"></slot>
         </div>
         <slot name="legend-caption"></slot>

From 7319e599911ca16a138b764e6311a46112853be7 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Mon, 31 Aug 2020 16:42:53 +0200
Subject: [PATCH 03/50] feat: add possibility to format legendValue with custom
 HTML

---
 src/App.vue                 | 17 +++++++++++------
 src/components/Counter.vue  |  8 +++++++-
 src/components/interface.js |  7 -------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6a95a6b..dce61f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,12 +43,10 @@
       <div style="border: 1px solid red; display: inline-block;">
         <vue-ellipse-progress
           :progress="progress"
-          :legendValue="135.56"
-          reverse
+          :legendValue="13145.56"
           :legend-value-formatter="customFormatter"
         >
-          <span slot="legend-value">/200</span>
-          <span slot="legend-caption">Some Caption</span>
+          <span slot="legend-value"></span>
         </vue-ellipse-progress>
       </div>
       <vue-ellipse-progress
@@ -145,8 +143,15 @@ export default {
   },
   methods: {
     customFormatter({ currentValue }) {
-      console.log(new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue));
-      return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue);
+      const price = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
+        .format(currentValue)
+        .toString();
+      console.log(price);
+      return `
+        <span>
+          <span style="font-weight: bold; font-size: 1.6rem">${price.slice(0, price.indexOf(","))}</span>
+          <span>${price.slice(price.indexOf(","), price.length)}</span>
+        </span>`;
     },
     updateProgress() {
       this.progress = parseFloat(Math.floor(Math.random() * 100).toFixed(2));
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index ecf7426..27f3ff3 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,5 +1,8 @@
 <template>
-  <span v-if="legendValueFormatter">{{ customFormattedValue }}</span>
+  <span v-if="legendValueFormatter">
+    <span v-if="isHTML" v-html="customFormattedValue"></span>
+    <span v-else :html="customFormattedValue">{{ customFormattedValue }}</span>
+  </span>
   <span v-else>{{ formattedValue }}</span>
 </template>
 
@@ -65,6 +68,9 @@ export default {
     duration() {
       return animationParser(this.animation).duration;
     },
+    isHTML() {
+      return this.customFormattedValue.toString().trim().startsWith("<");
+    },
   },
   methods: {
     countDecimals() {
diff --git a/src/components/interface.js b/src/components/interface.js
index 86dc48f..84a61f1 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -163,13 +163,6 @@ const props = {
   legendValueFormatter: {
     type: Function,
     required: false,
-    validator: (formatter) => {
-      if (!formatter({ currentValue: 50 })) {
-        console.warn("legendValueFormatter should return a value!");
-        return false;
-      }
-      return true;
-    },
   },
 };
 

From 1ee21b70e9adbfd75c961efd263f11220683ab2f Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Mon, 31 Aug 2020 17:12:20 +0200
Subject: [PATCH 04/50] feat: add possibility to format legendValue with slot

---
 src/App.vue                           | 21 +++++++++++----------
 src/components/Counter.vue            | 11 ++++++++++-
 src/components/VueEllipseProgress.vue |  5 +++++
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index dce61f5..189fa1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,11 +41,11 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
-        <vue-ellipse-progress
-          :progress="progress"
-          :legendValue="13145.56"
-          :legend-value-formatter="customFormatter"
-        >
+        <vue-ellipse-progress :progress="progress" :legendValue="13145.56" :legend-value-formatter="customFormatter">
+          <span>
+            <span style="font-weight: bold; font-size: 1.6rem;">{{ price.slice(0, price.indexOf(",")) }}</span>
+            <span>{{ price.slice(price.indexOf(","), price.length) }}</span>
+          </span>
           <span slot="legend-value"></span>
         </vue-ellipse-progress>
       </div>
@@ -75,6 +75,7 @@ export default {
   components: { VueEllipseProgress },
   data: () => ({
     line: "round",
+    price: "",
     circles: [
       { progress: 50, color: "red" },
       { progress: 50, color: "red", half: true, angle: -90 },
@@ -142,15 +143,15 @@ export default {
     },
   },
   methods: {
-    customFormatter({ currentValue }) {
-      const price = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
+    customFormatter({ currentValue, start, end, startTime, previousCountStepValue }) {
+      this.price = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
         .format(currentValue)
         .toString();
-      console.log(price);
+      console.log(this.price, currentValue, previousCountStepValue, start, end, startTime);
       return `
         <span>
-          <span style="font-weight: bold; font-size: 1.6rem">${price.slice(0, price.indexOf(","))}</span>
-          <span>${price.slice(price.indexOf(","), price.length)}</span>
+          <span style="font-weight: bold; font-size: 1.6rem">${this.price.slice(0, this.price.indexOf(","))}</span>
+          <span>${this.price.slice(this.price.indexOf(","), this.price.length)}</span>
         </span>`;
     },
     updateProgress() {
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 27f3ff3..3104367 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -60,7 +60,16 @@ export default {
       return this.currentValue.toFixed(this.countDecimals()).replace(".", this.delimiter);
     },
     customFormattedValue() {
-      return this.legendValueFormatter({ currentValue: this.currentValue });
+      return this.legendValueFormatter({
+        currentValue: this.currentValue,
+        duration: this.duration,
+        previousCountStepValue: this.previousCountStepValue,
+        start: this.start,
+        end: this.end,
+        difference: this.difference,
+        oneStepDifference: this.oneStepDifference,
+        startTime: this.startTime,
+      });
     },
     delay() {
       return animationParser(this.animation).delay;
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 772e411..9b70cc2 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -28,12 +28,14 @@
           :style="{ fontSize: fontSize, color: fontColor }"
         >
           <counter
+            :class="{ 'ep-d-none': $slots.default }"
             :value="legendVal"
             :animation="animation"
             :loading="loading"
             :legend-value-formatter="legendValueFormatter"
           >
           </counter>
+          <slot></slot>
           <slot name="legend-value"></slot>
         </div>
         <slot name="legend-caption"></slot>
@@ -110,6 +112,9 @@ export default {
 .ep-hidden {
   opacity: 0;
 }
+.ep-d-none {
+  display: none;
+}
 svg.ep-svg-container {
   transition: inherit;
   transform-origin: 50% 50%;

From 6fa196f39034a118791c544060c8bd6ab850e460 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Mon, 31 Aug 2020 21:26:28 +0200
Subject: [PATCH 05/50] feat: add possibility to format legendValue with scoped
 slot

---
 src/App.vue                           | 54 ++++++++++++---------------
 src/components/Counter.vue            | 53 +++++++++++++++++---------
 src/components/VueEllipseProgress.vue | 17 ++++++---
 3 files changed, 71 insertions(+), 53 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 189fa1d..ceeecbd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,29 +41,20 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
-        <vue-ellipse-progress :progress="progress" :legendValue="13145.56" :legend-value-formatter="customFormatter">
-          <span>
-            <span style="font-weight: bold; font-size: 1.6rem;">{{ price.slice(0, price.indexOf(",")) }}</span>
-            <span>{{ price.slice(price.indexOf(","), price.length) }}</span>
-          </span>
-          <span slot="legend-value"></span>
+        <vue-ellipse-progress
+          :size="600"
+          :progress="progress"
+          :legendValue="1315.56"
+          animation="rs 5000 500"
+          :legend-value-formatter="customFormatter"
+        >
+          <!--<template v-slot:default="{ counterProps }">
+            <span style="font-weight: bold; font-size: 1.6rem; color: green;">
+              {{ formattedPrice(counterProps.currentValue) }}
+            </span>
+          </template>-->
         </vue-ellipse-progress>
       </div>
-      <vue-ellipse-progress
-        :loading="loading"
-        :no-data="noData"
-        :progress="progress"
-        :angle="-90"
-        :legend="false"
-        :thickness="100"
-        dash="strict 60 0.95"
-        :empty-thickness="100"
-        line="butt"
-        half
-        animation="rs 1000"
-        :dot="{ size: 100, backgroundColor: 'rgba(100,256,4,1)', width: '2px' }"
-        line-mode="in-over"
-      />
     </div>
   </div>
 </template>
@@ -143,16 +134,17 @@ export default {
     },
   },
   methods: {
-    customFormatter({ currentValue, start, end, startTime, previousCountStepValue }) {
-      this.price = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
-        .format(currentValue)
-        .toString();
-      console.log(this.price, currentValue, previousCountStepValue, start, end, startTime);
-      return `
-        <span>
-          <span style="font-weight: bold; font-size: 1.6rem">${this.price.slice(0, this.price.indexOf(","))}</span>
-          <span>${this.price.slice(this.price.indexOf(","), this.price.length)}</span>
-        </span>`;
+    formattedPrice(value) {
+      return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(value);
+    },
+    customFormatter({ currentValue /* start, end, startTime, previousCountStepValue, elapsed, currentRawValue */ }) {
+      this.price = new Intl.NumberFormat("fr-FR").format(currentValue);
+      // console.log(this.price, currentValue, currentRawValue, previousCountStepValue, start, end, startTime, elapsed);
+      return `My ${this.price} Format`;
+      /* return `
+        <span style="font-weight: bold; font-size: 1.6rem">${this.price.slice(0, this.price.indexOf(","))}</span>
+        <span>${this.price.slice(this.price.indexOf(","), this.price.length)}</span>
+      `; */
     },
     updateProgress() {
       this.progress = parseFloat(Math.floor(Math.random() * 100).toFixed(2));
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 3104367..bf31bf1 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,9 +1,12 @@
 <template>
-  <span v-if="legendValueFormatter">
-    <span v-if="isHTML" v-html="customFormattedValue"></span>
-    <span v-else :html="customFormattedValue">{{ customFormattedValue }}</span>
+  <span>
+    <slot> </slot>
+    <span class="ep-legend--value__counter" v-if="legendValueFormatter">
+      <span v-if="isHTML" v-html="customFormattedValue"></span>
+      <span v-else>{{ customFormattedValue }}</span>
+    </span>
+    <span class="ep-legend--value__counter" v-else-if="!$slots.default">{{ formattedValue }}</span>
   </span>
-  <span v-else>{{ formattedValue }}</span>
 </template>
 
 <script>
@@ -33,6 +36,7 @@ export default {
     start: 0,
     startTime: 0,
     currentValue: 0,
+    customFormattedValue: "",
     raf: null,
     previousCountStepValue: 0,
   }),
@@ -59,18 +63,6 @@ export default {
     formattedValue() {
       return this.currentValue.toFixed(this.countDecimals()).replace(".", this.delimiter);
     },
-    customFormattedValue() {
-      return this.legendValueFormatter({
-        currentValue: this.currentValue,
-        duration: this.duration,
-        previousCountStepValue: this.previousCountStepValue,
-        start: this.start,
-        end: this.end,
-        difference: this.difference,
-        oneStepDifference: this.oneStepDifference,
-        startTime: this.startTime,
-      });
-    },
     delay() {
       return animationParser(this.animation).delay;
     },
@@ -78,7 +70,21 @@ export default {
       return animationParser(this.animation).duration;
     },
     isHTML() {
-      return this.customFormattedValue.toString().trim().startsWith("<");
+      return /<[a-z/][\s\S]*>/i.test(this.customFormattedValue.toString().trim());
+    },
+    counterProps() {
+      return {
+        currentValue: parseFloat(this.formattedValue),
+        currentRawValue: this.currentValue,
+        duration: this.duration,
+        previousCountStepValue: this.previousCountStepValue,
+        start: this.start,
+        end: this.end,
+        difference: this.difference,
+        oneStepDifference: this.oneStepDifference,
+        startTime: this.startTime,
+        elapsed: undefined,
+      };
     },
   },
   methods: {
@@ -104,6 +110,10 @@ export default {
         this.currentValue = this.end;
         this.reset();
       }
+      this.$emit("counterPropsUpdate", { ...this.counterProps, elapsed });
+      if (this.legendValueFormatter) {
+        this.runCustomFormatter(elapsed);
+      }
     },
     countDown(elapsed) {
       const decreaseValue = Math.min(this.oneStepDifference * (elapsed || 1), this.difference);
@@ -120,8 +130,17 @@ export default {
       this.previousCountStepValue = 0;
       cancelAnimationFrame(this.raf);
     },
+    runCustomFormatter(elapsed) {
+      this.customFormattedValue =
+        this.legendValueFormatter({
+          ...this.counterProps,
+          elapsed,
+        }) || "";
+    },
   },
   mounted() {
+    if (this.legendValueFormatter) this.runCustomFormatter(0);
+    if (this.$slots.default) this.$emit("counterPropsUpdate", this.counterProps);
     if (!this.loading) {
       setTimeout(() => {
         this.raf = requestAnimationFrame(this.count);
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 9b70cc2..805d9cf 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -28,14 +28,16 @@
           :style="{ fontSize: fontSize, color: fontColor }"
         >
           <counter
-            :class="{ 'ep-d-none': $slots.default }"
             :value="legendVal"
             :animation="animation"
             :loading="loading"
             :legend-value-formatter="legendValueFormatter"
+            @counterPropsUpdate="updateCounterProps"
           >
+            <template>
+              <slot :counterProps="counterProps"></slot>
+            </template>
           </counter>
-          <slot></slot>
           <slot name="legend-value"></slot>
         </div>
         <slot name="legend-caption"></slot>
@@ -54,6 +56,14 @@ export default {
   name: "VueEllipseProgress",
   components: { Counter, CircleContainer },
   props,
+  data: () => ({
+    counterProps: {},
+  }),
+  methods: {
+    updateCounterProps(counterProps) {
+      this.counterProps = counterProps;
+    },
+  },
   computed: {
     legendVal() {
       if (this.loading || this.noData) {
@@ -112,9 +122,6 @@ export default {
 .ep-hidden {
   opacity: 0;
 }
-.ep-d-none {
-  display: none;
-}
 svg.ep-svg-container {
   transition: inherit;
   transform-origin: 50% 50%;

From 6fa3f3d10f4e42f0664ed642b7cd082374f44048 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Mon, 31 Aug 2020 21:35:29 +0200
Subject: [PATCH 06/50] refac: run linter

---
 src/components/Counter.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index bf31bf1..a776af8 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,11 +1,11 @@
 <template>
-  <span>
+  <span class="ep-legend--value__counter">
     <slot> </slot>
-    <span class="ep-legend--value__counter" v-if="legendValueFormatter">
+    <span v-if="legendValueFormatter">
       <span v-if="isHTML" v-html="customFormattedValue"></span>
       <span v-else>{{ customFormattedValue }}</span>
     </span>
-    <span class="ep-legend--value__counter" v-else-if="!$slots.default">{{ formattedValue }}</span>
+    <span v-else-if="!$slots.default">{{ formattedValue }}</span>
   </span>
 </template>
 

From efd7feefbbb85a92ae7dd649ff4968562e081ca2 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 1 Sep 2020 20:39:46 +0200
Subject: [PATCH 07/50] doc: add legendValueFormatter description

---
 README.md         |  42 ++++++++++++++++
 package-lock.json | 125 ++++++++++++++++++++++++++++++----------------
 src/App.vue       |   6 +++
 3 files changed, 129 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 945a16c..5a17246 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,7 @@ After you have initialized the component, use it everywhere you want in your app
   lineMode="in 10"
   :legend="true"
   :legendValue="180"
+  :legendValueFormatter="() => new Intl.NumberFormat('de-DE').format(value)"
   legendClass="legend-custom-style"
   dash="60 0.9"
   animation="reverse 700 400"
@@ -111,6 +112,7 @@ This table below provides a quick overview over all available options. To gain m
 | **[`emptyColorFill`](#emptycolorfill)** | String \| Object | same as `color` |  "transparent" |
 | **[`legend`](#legend)** | Boolean | |  true |
 | **[`legendValue`](#legendvalue)** | Number \| String | any number, accepts a `.` or `","` as decimals delimiter |   |
+| **[`legendValueFormatter`](#legendValueFormatter)** [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendValueFormatter) | Function | Function that returns formatted value  |   |
 | **[`animation`](#animation)** | String | "default \| rs \| loop \| reverse \| bounce [duration delay]" | "default 1000 400"|
 | **[`loading`](#loading)** | Boolean |  |false|
 | **[`determinate`](#determinate)** | Boolean |  |false|
@@ -331,6 +333,46 @@ legend-value="345,12345" // set "," as delimiter defining the value as string
 >:heavy_exclamation_mark: note that `legendValue` replaces **[`progress`](#progress)** as circle legend but not vice versa.
 
 
+<br>
+
+- ### `legendValueFormatter` [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendvalueFormatter)
+
+Is a Function that must return your custom formatted value. The function takes counter properties object as argument and 
+is called on every tick of the counter. Here the formatting of [legendValue](#legendValue) or [progress](#progress) 
+is completely up to you and you have full freedom to adjust the presentation to your needs. The function can return any 
+value, even a valid HTML.   
+
+>:heavy_exclamation_mark: alternatively you can use **[`scoped slot`](#slot-options)** for custom formatting.
+
+###### Example: :scroll:
+
+Let's see how it works. The function takes counter properties object as argument that you can use to define custom formatting.
+`currentValue` is the most relevant value, as it is the actual value at specific counter tick. The return value will be 
+displayed as the legend of the circle.
+
+```js
+const myFormatter = ({ currentValue, start, end, startTime, previousCountStepValue, elapsed, currentRawValue }) => {
+  return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue); 
+}
+```
+You can also return HTML:
+```js
+const customFormatter = ({ currentValue }) => {
+     return `
+        <span style="font-weight: bold; font-size: 1.6rem">${new Intl.NumberFormat("de-DE").format(currentValue)}</span>
+        <span>€</span>
+      `;
+    }
+```
+
+Finally set your formatter as prop:
+
+```vue
+<vue-ellipse-progress :legend-value-formatter="myFormatter"/>
+<!-- shorter version if you wish-->
+<vue-ellipse-progress :legend-value-formatter="({ currentValue }) => `My Format ${currentValue}`"/>
+````
+
 <br>
 
 - ### `animation`
diff --git a/package-lock.json b/package-lock.json
index dacf9f1..19a5827 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2870,17 +2870,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2928,13 +2917,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2999,16 +2981,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -3026,21 +2998,6 @@
             "webpack-sources": "^1.4.3"
           }
         },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.5",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-          "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/mini-css-extract-plugin": "^0.9.1",
-            "chalk": "^3.0.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^1.2.3",
-            "merge-source-map": "^1.1.0",
-            "source-map": "^0.6.1"
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -14437,6 +14394,86 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
+      "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/mini-css-extract-plugin": "^0.9.1",
+        "chalk": "^3.0.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^1.2.3",
+        "merge-source-map": "^1.1.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/src/App.vue b/src/App.vue
index ceeecbd..e3a039e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,6 +55,12 @@
           </template>-->
         </vue-ellipse-progress>
       </div>
+      <vue-ellipse-progress
+        :size="600"
+        :progress="progress"
+        :legend-value-formatter="({ currentValue }) => `My ${currentValue}`"
+      >
+      </vue-ellipse-progress>
     </div>
   </div>
 </template>

From f241d2cccd8e1e189475ef3b66be294b98589c74 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 1 Sep 2020 20:53:40 +0200
Subject: [PATCH 08/50] doc: add default slot description

---
 README.md   | 16 ++++++++++++++++
 src/App.vue |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5a17246..7a3b25a 100644
--- a/README.md
+++ b/README.md
@@ -559,6 +559,22 @@ data: [
 
 ### Slot options
 
+- #### `default`
+
+Use this scope if you want to customize the presentation of the circle legend ad make a use of the counter, so the value 
+still animated. This works similar to the [`legendValueFormatter`](#legendValueFormatter). You can access animated counter
+properties through the scoped slot props and adjust the presentation of the legend to your needs. 
+
+```vue
+<vue-ellipse-progress :progress="50">
+  <template v-slot:default="{ counterProps }">
+    <span style="font-weight: bold; font-size: 1.6rem; color: green;">
+      {{ myFormatter(counterProps.currentValue) }}
+    </span>
+  </template>
+</vue-ellipse-progress>
+```
+
 - #### `legend-value`
 
 In this slot you can put an additional element that you want to display beside the progress
diff --git a/src/App.vue b/src/App.vue
index e3a039e..c4d54b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,7 +58,7 @@
       <vue-ellipse-progress
         :size="600"
         :progress="progress"
-        :legend-value-formatter="({ currentValue }) => `My ${currentValue}`"
+        :legend-value-formatter="({ currentValue }) => `My format ${currentValue}`"
       >
       </vue-ellipse-progress>
     </div>

From 295da3a82d195068caabcb2b6d03ff648f345bf8 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 1 Sep 2020 20:55:44 +0200
Subject: [PATCH 09/50] doc: update slot syntax in example

---
 README.md   | 8 ++++++--
 src/App.vue | 3 +++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7a3b25a..3850b97 100644
--- a/README.md
+++ b/README.md
@@ -588,8 +588,12 @@ This code ...
 ```html
 <vue-ellipse-progress ....>
   
-    <span slot="legend-value">/200</span>
-    <p slot="legend-caption">TASKS DONE</p>
+<template v-slot:legend-value>
+  <span slot="legend-value">/200</span>
+</template>
+<template v-slot:legend-caption>
+  <p slot="legend-caption">TASKS DONE</p>
+</template>
   
 </vue-ellipse-progress>
 ```
diff --git a/src/App.vue b/src/App.vue
index c4d54b6..7c25935 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,6 +60,9 @@
         :progress="progress"
         :legend-value-formatter="({ currentValue }) => `My format ${currentValue}`"
       >
+        <template v-slot:legend-caption>
+          <p slot="legend-caption">TASKS DONE</p>
+        </template>
       </vue-ellipse-progress>
     </div>
   </div>

From 7f4e775ada56c075a027ded7137be203756bd026 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 1 Sep 2020 21:01:10 +0200
Subject: [PATCH 10/50] doc: extend default slot description

---
 README.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 3850b97..1c69b86 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ After you have initialized the component, use it everywhere you want in your app
   lineMode="in 10"
   :legend="true"
   :legendValue="180"
-  :legendValueFormatter="() => new Intl.NumberFormat('de-DE').format(value)"
+  :legendFormatter="() => new Intl.NumberFormat('de-DE').format(value)"
   legendClass="legend-custom-style"
   dash="60 0.9"
   animation="reverse 700 400"
@@ -112,7 +112,7 @@ This table below provides a quick overview over all available options. To gain m
 | **[`emptyColorFill`](#emptycolorfill)** | String \| Object | same as `color` |  "transparent" |
 | **[`legend`](#legend)** | Boolean | |  true |
 | **[`legendValue`](#legendvalue)** | Number \| String | any number, accepts a `.` or `","` as decimals delimiter |   |
-| **[`legendValueFormatter`](#legendValueFormatter)** [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendValueFormatter) | Function | Function that returns formatted value  |   |
+| **[`legendFormatter`](#legendFormatter)** [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendFormatter) | Function | Function that returns formatted value  |   |
 | **[`animation`](#animation)** | String | "default \| rs \| loop \| reverse \| bounce [duration delay]" | "default 1000 400"|
 | **[`loading`](#loading)** | Boolean |  |false|
 | **[`determinate`](#determinate)** | Boolean |  |false|
@@ -335,7 +335,7 @@ legend-value="345,12345" // set "," as delimiter defining the value as string
 
 <br>
 
-- ### `legendValueFormatter` [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendvalueFormatter)
+- ### `legendFormatter` [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendFormatter)
 
 Is a Function that must return your custom formatted value. The function takes counter properties object as argument and 
 is called on every tick of the counter. Here the formatting of [legendValue](#legendValue) or [progress](#progress) 
@@ -561,9 +561,10 @@ data: [
 
 - #### `default`
 
-Use this scope if you want to customize the presentation of the circle legend ad make a use of the counter, so the value 
-still animated. This works similar to the [`legendValueFormatter`](#legendValueFormatter). You can access animated counter
-properties through the scoped slot props and adjust the presentation of the legend to your needs. 
+Use this slot, if you want to customize the presentation of the circle legend ad make a use of the animated counter, 
+so your formatting still animated. This works similar to the [`legendFormatter`](#legendFormatter) and is just 
+an alternative way to provide custom format. You can access animated counter properties through the scoped slot 
+props and adjust the presentation of the legend to your needs. 
 
 ```vue
 <vue-ellipse-progress :progress="50">

From 79027d1b8dc99e82f8d815e27b5bef5417d3e5fc Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 1 Sep 2020 21:03:06 +0200
Subject: [PATCH 11/50] fix: rename legendValueFormatter to legendFormatter

---
 package.json                          |  2 +-
 src/App.vue                           |  4 ++--
 src/components/Counter.vue            | 10 +++++-----
 src/components/VueEllipseProgress.vue |  2 +-
 src/components/interface.js           |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 00d56a7..685d443 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.0",
+  "version": "1.3.0-beta.1",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
diff --git a/src/App.vue b/src/App.vue
index 7c25935..ee6c53d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,7 @@
           :progress="progress"
           :legendValue="1315.56"
           animation="rs 5000 500"
-          :legend-value-formatter="customFormatter"
+          :legend-formatter="customFormatter"
         >
           <!--<template v-slot:default="{ counterProps }">
             <span style="font-weight: bold; font-size: 1.6rem; color: green;">
@@ -58,7 +58,7 @@
       <vue-ellipse-progress
         :size="600"
         :progress="progress"
-        :legend-value-formatter="({ currentValue }) => `My format ${currentValue}`"
+        :legend-formatter="({ currentValue }) => `My format ${currentValue}`"
       >
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index a776af8..3e54971 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="ep-legend--value__counter">
     <slot> </slot>
-    <span v-if="legendValueFormatter">
+    <span v-if="legendFormatter">
       <span v-if="isHTML" v-html="customFormattedValue"></span>
       <span v-else>{{ customFormattedValue }}</span>
     </span>
@@ -19,7 +19,7 @@ export default {
       type: [Number, String],
       required: true,
     },
-    legendValueFormatter: {
+    legendFormatter: {
       type: Function,
       required: false,
     },
@@ -111,7 +111,7 @@ export default {
         this.reset();
       }
       this.$emit("counterPropsUpdate", { ...this.counterProps, elapsed });
-      if (this.legendValueFormatter) {
+      if (this.legendFormatter) {
         this.runCustomFormatter(elapsed);
       }
     },
@@ -132,14 +132,14 @@ export default {
     },
     runCustomFormatter(elapsed) {
       this.customFormattedValue =
-        this.legendValueFormatter({
+        this.legendFormatter({
           ...this.counterProps,
           elapsed,
         }) || "";
     },
   },
   mounted() {
-    if (this.legendValueFormatter) this.runCustomFormatter(0);
+    if (this.legendFormatter) this.runCustomFormatter(0);
     if (this.$slots.default) this.$emit("counterPropsUpdate", this.counterProps);
     if (!this.loading) {
       setTimeout(() => {
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 805d9cf..ea15fa1 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -31,7 +31,7 @@
             :value="legendVal"
             :animation="animation"
             :loading="loading"
-            :legend-value-formatter="legendValueFormatter"
+            :legend-formatter="legendFormatter"
             @counterPropsUpdate="updateCounterProps"
           >
             <template>
diff --git a/src/components/interface.js b/src/components/interface.js
index 84a61f1..7bca1d7 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -160,7 +160,7 @@ const props = {
     required: false,
     default: false,
   },
-  legendValueFormatter: {
+  legendFormatter: {
     type: Function,
     required: false,
   },

From 0751ecb48f734f0e2bbd6cb964ff4d90a6cb11c7 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 1 Sep 2020 21:30:24 +0200
Subject: [PATCH 12/50] doc: updaete legendValue desc

---
 README.md | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 1c69b86..91db531 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ After you have initialized the component, use it everywhere you want in your app
   lineMode="in 10"
   :legend="true"
   :legendValue="180"
-  :legendFormatter="() => new Intl.NumberFormat('de-DE').format(value)"
+  :legendFormatter="({currentValue}) => new Intl.NumberFormat('de-DE').format(currentValue)"
   legendClass="legend-custom-style"
   dash="60 0.9"
   animation="reverse 700 400"
@@ -112,7 +112,7 @@ This table below provides a quick overview over all available options. To gain m
 | **[`emptyColorFill`](#emptycolorfill)** | String \| Object | same as `color` |  "transparent" |
 | **[`legend`](#legend)** | Boolean | |  true |
 | **[`legendValue`](#legendvalue)** | Number \| String | any number, accepts a `.` or `","` as decimals delimiter |   |
-| **[`legendFormatter`](#legendFormatter)** [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendFormatter) | Function | Function that returns formatted value  |   |
+| **[`legendFormatter`](#legendformatter)** [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendformatter) | Function | Function that returns formatted value  |   |
 | **[`animation`](#animation)** | String | "default \| rs \| loop \| reverse \| bounce [duration delay]" | "default 1000 400"|
 | **[`loading`](#loading)** | Boolean |  |false|
 | **[`determinate`](#determinate)** | Boolean |  |false|
@@ -152,7 +152,9 @@ this.myProgress = 55.5;
 this.myProgress = this.tasksDone * 100 / maxTasks; // the percentage of done tasks
 ```
 
->:heavy_exclamation_mark: The `progress` is always used to fill the progress circle line. So you cannot customize this value, it should be always in the range [-100, 100] and not valid Numbers lead to **[`noData`](#noData)** state. For customization purpose please use **[`legendValue`](#legendvalue)**. 
+>:heavy_exclamation_mark: The `progress` is always used to fill the progress circle line. So you cannot customize this 
+>value, it should be always in the range [-100, 100] and not valid Numbers lead to **[`noData`](#noData)** state. 
+>For customization purpose please use **[`legendValue`](#legendvalue)** and take a look at **[`legendFormatter`](#legendformatter)**. 
 
 >If **[`legendValue`](#legendvalue)** is defined the progress will **NOT** be displayed as circle legend.
 
@@ -310,24 +312,26 @@ Is a Boolean. It defines whether the **[`progress`](#progress)** or from you def
 
 ###### Animated: :heavy_check_mark:
 
-Is any number. Use this property if you want to customize the shown progress as the legend of the circle. If defined, `legendValue` will replace **[`progress`](#progress)** as the circle legend!
-
-[![npm](https://img.shields.io/badge/v1.1.1-blue?style=flat-square)](#legendvalue) You can set any precision of the decimal numbers. If the prop is defined as a string, you can specify the `","` as decimals separator (e.g "123,123" for german numbers).
+Is any Number or String. Use this property if you want to show progress value as the legend of the circle that is not in
+the range [-100, 100]. If defined, `legendValue` will replace **[`progress`](#progress)** as the circle legend!
+You can set any precision of the decimal numbers. If the prop is defined as a string, you can specify the `","` 
+as decimals delimiter (e.g "123,123" for german numbers), apart from this the value must generally be a valid JavaScript Number.
+For more customization possibilities please use [`legendFormatter`](#legendformatter) or [`scoped slot`](#default). 
 
 ###### Example: :scroll:
 
 Let's say you need to display a rating from 0 to 5 of a product with 3.5 stars. Since **[`progress`](#progress)** can take values only from 0 to 100 your need an additional property `legendValue`. You can show the product rating like in the following example:
 
 ```js
-<vue-ellipse-progress progress="progress" :legend-value="rating" />
+<vue-ellipse-progress :progress="progress" :legend-value="rating" />
 ...
 this.rating = 3.5;
 this.progress = this.rating * 100 / 5; // the rating percentage
 ```
 Now you can display custom progress value that still animated and circle progress fills properly!
 
-```vuejs
-legend-value="345,12345" // set "," as delimiter defining the value as string
+```vue
+<vue-ellipse-progress legend-value="345,12345" /> // set "," as delimiter defining the value as string
 ```
 
 >:heavy_exclamation_mark: note that `legendValue` replaces **[`progress`](#progress)** as circle legend but not vice versa.
@@ -335,12 +339,12 @@ legend-value="345,12345" // set "," as delimiter defining the value as string
 
 <br>
 
-- ### `legendFormatter` [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendFormatter)
+- ### `legendFormatter` [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendformatter)
 
 Is a Function that must return your custom formatted value. The function takes counter properties object as argument and 
 is called on every tick of the counter. Here the formatting of [legendValue](#legendValue) or [progress](#progress) 
 is completely up to you and you have full freedom to adjust the presentation to your needs. The function can return any 
-value, even a valid HTML.   
+value, even HTML.   
 
 >:heavy_exclamation_mark: alternatively you can use **[`scoped slot`](#slot-options)** for custom formatting.
 
@@ -351,7 +355,7 @@ Let's see how it works. The function takes counter properties object as argument
 displayed as the legend of the circle.
 
 ```js
-const myFormatter = ({ currentValue, start, end, startTime, previousCountStepValue, elapsed, currentRawValue }) => {
+const myFormatter = ({ currentValue, currentRawValue, duration, previousCountStepValue, start, end, difference, oneStepDifference, startTime, elapsed }) => {
   return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue); 
 }
 ```
@@ -365,12 +369,12 @@ const customFormatter = ({ currentValue }) => {
     }
 ```
 
-Finally set your formatter as prop:
+Finally, set your formatter as prop:
 
 ```vue
-<vue-ellipse-progress :legend-value-formatter="myFormatter"/>
+<vue-ellipse-progress :legend-formatter="myFormatter"/>
 <!-- shorter version if you wish-->
-<vue-ellipse-progress :legend-value-formatter="({ currentValue }) => `My Format ${currentValue}`"/>
+<vue-ellipse-progress :legend-formatter="({ currentValue }) => `My Format ${currentValue}`"/>
 ````
 
 <br>

From 220a87eddf44defb6ce99804f0ff3508f1c3b4b0 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergatam@yandex.com>
Date: Tue, 1 Sep 2020 21:41:14 +0200
Subject: [PATCH 13/50] doc: fix legendFormatter header

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 91db531..830a9af 100644
--- a/README.md
+++ b/README.md
@@ -339,14 +339,16 @@ Now you can display custom progress value that still animated and circle progres
 
 <br>
 
-- ### `legendFormatter` [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendformatter)
+- ### `legendFormatter` 
+
+[![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendformatter)
 
 Is a Function that must return your custom formatted value. The function takes counter properties object as argument and 
 is called on every tick of the counter. Here the formatting of [legendValue](#legendValue) or [progress](#progress) 
 is completely up to you and you have full freedom to adjust the presentation to your needs. The function can return any 
 value, even HTML.   
 
->:heavy_exclamation_mark: alternatively you can use **[`scoped slot`](#slot-options)** for custom formatting.
+>:grey_exclamation: alternatively you can use **[`scoped slot`](#default)** for custom formatting.
 
 ###### Example: :scroll:
 

From 88f5a5c52ce8337b9eeba282acfd0a2d9ba810b8 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 3 Sep 2020 15:13:55 +0200
Subject: [PATCH 14/50] refac: remove legendFormatter from common interface
 definition

---
 src/components/Counter.vue            | 2 +-
 src/components/VueEllipseProgress.vue | 9 ++++++++-
 src/components/interface.js           | 4 ----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 3e54971..03d9a1f 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -83,7 +83,7 @@ export default {
         difference: this.difference,
         oneStepDifference: this.oneStepDifference,
         startTime: this.startTime,
-        elapsed: undefined,
+        elapsed: 0,
       };
     },
   },
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index ea15fa1..f6c12c9 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -32,6 +32,7 @@
             :animation="animation"
             :loading="loading"
             :legend-formatter="legendFormatter"
+            :counterProps.sync="counterProps"
             @counterPropsUpdate="updateCounterProps"
           >
             <template>
@@ -55,7 +56,13 @@ import Counter from "./Counter.vue";
 export default {
   name: "VueEllipseProgress",
   components: { Counter, CircleContainer },
-  props,
+  props: {
+    ...props,
+    legendFormatter: {
+      type: Function,
+      required: false,
+    },
+  },
   data: () => ({
     counterProps: {},
   }),
diff --git a/src/components/interface.js b/src/components/interface.js
index 7bca1d7..51a233f 100644
--- a/src/components/interface.js
+++ b/src/components/interface.js
@@ -160,10 +160,6 @@ const props = {
     required: false,
     default: false,
   },
-  legendFormatter: {
-    type: Function,
-    required: false,
-  },
 };
 
 const simplifiedProps = {};

From 0daae84bb8adf22eecac08ba2e257ccb20dedd8b Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 3 Sep 2020 15:28:05 +0200
Subject: [PATCH 15/50] refac: simplify data bindings on counter

---
 src/App.vue                           | 20 +++++++++-----------
 src/components/Counter.vue            |  8 ++++++--
 src/components/VueEllipseProgress.vue | 12 +++---------
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ee6c53d..0a4a8d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,18 +41,16 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
-        <vue-ellipse-progress
-          :size="600"
-          :progress="progress"
-          :legendValue="1315.56"
-          animation="rs 5000 500"
-          :legend-formatter="customFormatter"
-        >
-          <!--<template v-slot:default="{ counterProps }">
-            <span style="font-weight: bold; font-size: 1.6rem; color: green;">
-              {{ formattedPrice(counterProps.currentValue) }}
+        <vue-ellipse-progress :size="600" :progress="progress" :legendValue="1315.56" animation="rs 5000 500">
+          <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>-->
+          </template>
         </vue-ellipse-progress>
       </div>
       <vue-ellipse-progress
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 03d9a1f..fd89ea2 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -31,6 +31,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    counterTick: {
+      type: Object,
+      required: true,
+    },
   },
   data: () => ({
     start: 0,
@@ -110,7 +114,7 @@ export default {
         this.currentValue = this.end;
         this.reset();
       }
-      this.$emit("counterPropsUpdate", { ...this.counterProps, elapsed });
+      this.$emit("update:counterTick", { ...this.counterProps, elapsed });
       if (this.legendFormatter) {
         this.runCustomFormatter(elapsed);
       }
@@ -140,7 +144,7 @@ export default {
   },
   mounted() {
     if (this.legendFormatter) this.runCustomFormatter(0);
-    if (this.$slots.default) this.$emit("counterPropsUpdate", this.counterProps);
+    if (this.$slots.default) this.$emit("update:counterTick", this.counterProps);
     if (!this.loading) {
       setTimeout(() => {
         this.raf = requestAnimationFrame(this.count);
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index f6c12c9..319258f 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -32,11 +32,10 @@
             :animation="animation"
             :loading="loading"
             :legend-formatter="legendFormatter"
-            :counterProps.sync="counterProps"
-            @counterPropsUpdate="updateCounterProps"
+            :counter-tick.sync="counterTick"
           >
             <template>
-              <slot :counterProps="counterProps"></slot>
+              <slot :counterTick="counterTick"></slot>
             </template>
           </counter>
           <slot name="legend-value"></slot>
@@ -64,13 +63,8 @@ export default {
     },
   },
   data: () => ({
-    counterProps: {},
+    counterTick: {},
   }),
-  methods: {
-    updateCounterProps(counterProps) {
-      this.counterProps = counterProps;
-    },
-  },
   computed: {
     legendVal() {
       if (this.loading || this.noData) {

From c49e62a22638836fa5f6323eba75cd93645d7fa9 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 3 Sep 2020 15:28:37 +0200
Subject: [PATCH 16/50] release: v1.3.0-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 685d443..55a108f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",

From 515dcfe3e72eaa834db4bb837f09c14aaa27f172 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 3 Sep 2020 15:51:15 +0200
Subject: [PATCH 17/50] doc: legendValue example corrections

---
 README.md                             | 6 ++++--
 src/components/VueEllipseProgress.vue | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 830a9af..493682d 100644
--- a/README.md
+++ b/README.md
@@ -313,14 +313,16 @@ Is a Boolean. It defines whether the **[`progress`](#progress)** or from you def
 ###### Animated: :heavy_check_mark:
 
 Is any Number or String. Use this property if you want to show progress value as the legend of the circle that is not in
-the range [-100, 100]. If defined, `legendValue` will replace **[`progress`](#progress)** as the circle legend!
+the range [-100, 100]. If defined, `legendValue` will replace [`progress`](#progress) as the circle legend!
 You can set any precision of the decimal numbers. If the prop is defined as a string, you can specify the `","` 
 as decimals delimiter (e.g "123,123" for german numbers), apart from this the value must generally be a valid JavaScript Number.
 For more customization possibilities please use [`legendFormatter`](#legendformatter) or [`scoped slot`](#default). 
 
 ###### Example: :scroll:
 
-Let's say you need to display a rating from 0 to 5 of a product with 3.5 stars. Since **[`progress`](#progress)** can take values only from 0 to 100 your need an additional property `legendValue`. You can show the product rating like in the following example:
+Let's say you need to display a rating from 0 to 5 of a product with 3.5 stars. Setting the [`progress`](#progress) to 3.5 will 
+fill the circle to 3.5 percent, and this is not what we need, since we want to display the percentage of 5 as progress. 
+At this point we need an additional property `legendValue`. We can show the product rating like in the following example:
 
 ```js
 <vue-ellipse-progress :progress="progress" :legend-value="rating" />
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 319258f..2b15da3 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -25,7 +25,7 @@
           class="ep-legend--value"
           v-if="legend && !isMultiple"
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
-          :style="{ fontSize: fontSize, color: fontColor }"
+          :style="{ fontSize, color: fontColor }"
         >
           <counter
             :value="legendVal"

From fa810f5045cf0a052eea4ddf4b0c4176b9e853c7 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Thu, 3 Sep 2020 16:02:34 +0200
Subject: [PATCH 18/50] doc: default slot correction according to v1.3.0-beta.2

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 493682d..c7915b0 100644
--- a/README.md
+++ b/README.md
@@ -346,7 +346,7 @@ Now you can display custom progress value that still animated and circle progres
 [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendformatter)
 
 Is a Function that must return your custom formatted value. The function takes counter properties object as argument and 
-is called on every tick of the counter. Here the formatting of [legendValue](#legendValue) or [progress](#progress) 
+is called on every tick of the counter. Here the formatting of [legendValue](#legendvalue) or [progress](#progress) 
 is completely up to you and you have full freedom to adjust the presentation to your needs. The function can return any 
 value, even HTML.   
 
@@ -365,7 +365,7 @@ const myFormatter = ({ currentValue, currentRawValue, duration, previousCountSte
 ```
 You can also return HTML:
 ```js
-const customFormatter = ({ currentValue }) => {
+const myFormatter = ({ currentValue }) => {
      return `
         <span style="font-weight: bold; font-size: 1.6rem">${new Intl.NumberFormat("de-DE").format(currentValue)}</span>
         <span>€</span>
@@ -570,15 +570,15 @@ data: [
 - #### `default`
 
 Use this slot, if you want to customize the presentation of the circle legend ad make a use of the animated counter, 
-so your formatting still animated. This works similar to the [`legendFormatter`](#legendFormatter) and is just 
-an alternative way to provide custom format. You can access animated counter properties through the scoped slot 
+so your formatting still animated. This works similar to the [`legendFormatter`](#legendformatter) and is just 
+an alternative way to provide a custom format. You can access animated counter properties through the scoped slot 
 props and adjust the presentation of the legend to your needs. 
 
 ```vue
 <vue-ellipse-progress :progress="50">
-  <template v-slot:default="{ counterProps }">
+  <template v-slot:default="{ counterTick }">
     <span style="font-weight: bold; font-size: 1.6rem; color: green;">
-      {{ myFormatter(counterProps.currentValue) }}
+      {{ myFormatter(counterTick .currentValue) }}
     </span>
   </template>
 </vue-ellipse-progress>

From db97c2c47471306df0f2ad0509e93adaff0d461d Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 5 Sep 2020 21:27:47 +0200
Subject: [PATCH 19/50] test: add first legendFormatter tests

---
 src/App.vue                  |  8 ++-
 tests/unit/container.spec.js |  4 +-
 tests/unit/counter.spec.js   | 96 +++++++++++++++++++++++++++++++-----
 3 files changed, 93 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0a4a8d1..80fc500 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,13 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
-        <vue-ellipse-progress :size="600" :progress="progress" :legendValue="1315.56" animation="rs 5000 500">
+        <vue-ellipse-progress
+          :size="600"
+          :progress="progress"
+          :legendValue="1315.56"
+          animation="rs 5000 500"
+          :loading="loading"
+        >
           <template v-slot:default="{ counterTick }">
             <span
               :style="` transition: 0.5s; font-weight: bold; font-size: 1.6rem; color: ${
diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js
index 5b3e2f2..d5276df 100644
--- a/tests/unit/container.spec.js
+++ b/tests/unit/container.spec.js
@@ -15,8 +15,8 @@ const factory = (propsData) => {
 };
 
 // https://github.com/vuejs/vue-test-utils/issues/974
-global.requestAnimationFrame = () => {};
-global.cancelAnimationFrame = () => {};
+/* global.requestAnimationFrame = () => {};
+global.cancelAnimationFrame = () => {}; */
 
 describe("[ EllipseProgressContainer.vue ]", () => {
   describe("#size", () => {
diff --git a/tests/unit/counter.spec.js b/tests/unit/counter.spec.js
index 4a2b849..da4305f 100644
--- a/tests/unit/counter.spec.js
+++ b/tests/unit/counter.spec.js
@@ -2,13 +2,26 @@ import { expect } from "chai";
 import { mount } from "@vue/test-utils";
 import Counter from "@/components/Counter.vue";
 
-const factory = (propsData) => {
+const factory = (propsData, slots) => {
   return mount(Counter, {
-    propsData: { value: 50, loading: false, animation: "default 500 100", ...propsData },
+    propsData: { counterTick: {}, value: 50, loading: false, animation: "default 100 100", ...propsData },
+    slots,
   });
 };
-global.requestAnimationFrame = () => {};
-global.cancelAnimationFrame = () => {};
+
+let lastTime = 0;
+
+// rAF polyfill: https://gist.github.com/paulirish/1579671
+global.requestAnimationFrame = (callback) => {
+  const currTime = new Date().getTime();
+  const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+  const id = setTimeout(() => {
+    callback(currTime + timeToCall);
+  }, timeToCall);
+  lastTime = currTime + timeToCall;
+  return id;
+};
+global.cancelAnimationFrame = (id) => clearTimeout(id);
 
 describe("[ Counter.vue ]", () => {
   describe("#value", async () => {
@@ -18,14 +31,19 @@ describe("[ Counter.vue ]", () => {
       { value: "25,564", count: 3, start: "0,000" },
       { value: "-30,5", count: 1, start: "0,0" },
     ];
+    const animation = { duration: 100, delay: 100 };
     for (const val of values) {
       const { value, count, start } = val;
-      const counterWrapper = factory({ value });
+      const counterWrapper = factory({ value, animation: `default ${animation.duration} ${animation.delay}` });
 
       it(`counts the decimals correctly for ${value}`, () => {
         expect(counterWrapper.vm.countDecimals()).to.equal(count);
       });
 
+      it("renders the start value with the correct number of decimals places", () => {
+        expect(counterWrapper.element.textContent).to.equal(start);
+      });
+
       if (value.toString().includes(",")) {
         it("accepts `,` as delimiter", () => {
           expect(counterWrapper.vm.delimiter).to.equal(",");
@@ -41,12 +59,8 @@ describe("[ Counter.vue ]", () => {
       }
 
       it("parses #animation prop correctly", () => {
-        expect(counterWrapper.vm.duration).to.equal(500);
-        expect(counterWrapper.vm.delay).to.equal(100);
-      });
-
-      it("shows the start value with the correct number of decimals places", () => {
-        expect(counterWrapper.element.textContent).to.equal(start);
+        expect(counterWrapper.vm.duration).to.equal(animation.duration);
+        expect(counterWrapper.vm.delay).to.equal(animation.delay);
       });
 
       it("calculates the difference between the start and end values correctly", () => {
@@ -60,7 +74,7 @@ describe("[ Counter.vue ]", () => {
         const endValue = parseFloat(value.toString().replace(",", "."));
         const startValue = 0;
         const diff = Math.abs(endValue - startValue);
-        const duration = 500;
+        const duration = animation.duration;
         const oneStepCountValue = diff / duration;
         expect(counterWrapper.vm.oneStepDifference).to.equal(oneStepCountValue);
       });
@@ -74,4 +88,62 @@ describe("[ Counter.vue ]", () => {
       });
     }
   });
+  describe("#legendFormatter", () => {
+    it("passes counter tick properties to formatter function", () => {
+      const formatter = (counterTick) => counterTick;
+      const counterWrapper = factory({ value: 50, legendFormatter: formatter });
+      expect(counterWrapper.vm.customFormattedValue).to.be.a("object");
+      expect(counterWrapper.vm.customFormattedValue).to.have.property("currentValue");
+    });
+
+    it("renders the custom formatted value", (done) => {
+      const customFormat = (value) => `Formatted: ${value}`;
+      const formatter = ({ currentValue }) => customFormat(currentValue);
+      const counterWrapper = factory({ value: 50, legendFormatter: formatter, animation: "default 0 0" });
+      setTimeout(() => {
+        expect(counterWrapper.vm.customFormattedValue).to.equal(customFormat(50));
+        done();
+      }, 50);
+    });
+
+    describe("custom format via default slot", () => {
+      const counterWrapper = factory(
+        {},
+        {
+          default: '<span class="my-formatter-slot">Formatted 100</span>',
+        }
+      );
+
+      it("renders provided slot", () => {
+        expect(counterWrapper.find(".my-formatter-slot").exists()).to.be.true;
+      });
+
+      it("do not renders other elements", () => {
+        expect(counterWrapper.findAll("span")).to.have.lengthOf(2);
+      });
+    });
+
+    describe("#legendFormatter HTML return value", () => {
+      const customFormat = (value) => `<span class="my-custom-format">Formatted ${value}</span>`;
+      const formatter = ({ currentValue }) => customFormat(currentValue);
+      const counterWrapper = factory({ value: 50, legendFormatter: formatter, animation: "default 0 0" });
+
+      it("recognises HTML formatter return value ", (done) => {
+        setTimeout(() => {
+          expect(counterWrapper.vm.customFormattedValue).to.equal(customFormat(50));
+          expect(counterWrapper.vm.isHTML).to.be.true;
+          done();
+        }, 10);
+      });
+      it("renders the formatter returned HTML", () => {
+        expect(counterWrapper.find(".my-custom-format").exists()).to.be.true;
+      });
+      it("renders the formatter HTML return value ", (done) => {
+        setTimeout(() => {
+          expect(counterWrapper.find(".my-custom-format").element.textContent).to.equal("Formatted 50");
+          done();
+        }, 50);
+      });
+    });
+  });
 });

From 3fe032258af0f6bf4b16816e7e9afe29bebdf474 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 8 Sep 2020 20:05:59 +0200
Subject: [PATCH 20/50] refac: move custom formatting logic from Counter to
 container

---
 package.json                          |  2 +-
 src/components/Counter.vue            | 25 ++-----------------------
 src/components/VueEllipseProgress.vue | 13 +++++++++++--
 3 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 55a108f..f9e77a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.3",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index fd89ea2..9e2c2ef 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,11 +1,6 @@
 <template>
   <span class="ep-legend--value__counter">
-    <slot> </slot>
-    <span v-if="legendFormatter">
-      <span v-if="isHTML" v-html="customFormattedValue"></span>
-      <span v-else>{{ customFormattedValue }}</span>
-    </span>
-    <span v-else-if="!$slots.default">{{ formattedValue }}</span>
+    <slot :counterTick="counterProps"> </slot>
   </span>
 </template>
 
@@ -40,7 +35,6 @@ export default {
     start: 0,
     startTime: 0,
     currentValue: 0,
-    customFormattedValue: "",
     raf: null,
     previousCountStepValue: 0,
   }),
@@ -73,12 +67,10 @@ export default {
     duration() {
       return animationParser(this.animation).duration;
     },
-    isHTML() {
-      return /<[a-z/][\s\S]*>/i.test(this.customFormattedValue.toString().trim());
-    },
     counterProps() {
       return {
         currentValue: parseFloat(this.formattedValue),
+        currentFormattedValue: this.formattedValue,
         currentRawValue: this.currentValue,
         duration: this.duration,
         previousCountStepValue: this.previousCountStepValue,
@@ -114,10 +106,6 @@ export default {
         this.currentValue = this.end;
         this.reset();
       }
-      this.$emit("update:counterTick", { ...this.counterProps, elapsed });
-      if (this.legendFormatter) {
-        this.runCustomFormatter(elapsed);
-      }
     },
     countDown(elapsed) {
       const decreaseValue = Math.min(this.oneStepDifference * (elapsed || 1), this.difference);
@@ -134,17 +122,8 @@ export default {
       this.previousCountStepValue = 0;
       cancelAnimationFrame(this.raf);
     },
-    runCustomFormatter(elapsed) {
-      this.customFormattedValue =
-        this.legendFormatter({
-          ...this.counterProps,
-          elapsed,
-        }) || "";
-    },
   },
   mounted() {
-    if (this.legendFormatter) this.runCustomFormatter(0);
-    if (this.$slots.default) this.$emit("update:counterTick", this.counterProps);
     if (!this.loading) {
       setTimeout(() => {
         this.raf = requestAnimationFrame(this.count);
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 2b15da3..d238dbf 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -34,8 +34,13 @@
             :legend-formatter="legendFormatter"
             :counter-tick.sync="counterTick"
           >
-            <template>
-              <slot :counterTick="counterTick"></slot>
+            <template v-slot:default="{ counterTick }">
+              <slot v-if="$scopedSlots.default" :counterTick="counterTick"></slot>
+              <span v-if="legendFormatter">
+                <span v-if="isHTML" v-html="legendFormatter(counterTick)"></span>
+                <span v-else>{{ legendFormatter(counterTick) }}</span>
+              </span>
+              <span v-else-if="!$scopedSlots.default">{{ counterTick.currentFormattedValue }}</span>
             </template>
           </counter>
           <slot name="legend-value"></slot>
@@ -81,7 +86,11 @@ export default {
     isMultiple() {
       return this.data.length > 1;
     },
+    isHTML() {
+      return /<[a-z/][\s\S]*>/i.test(this.legendFormatter({ currentValue: 0 }).toString().trim());
+    },
     circlesData() {
+      console.log(this.$scopedSlots.default);
       if (this.isMultiple) {
         return this.data.map((data) => ({
           ...this.$props,

From 6f0a197de45a255fa41a80748bb71122b35c7bc7 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 8 Sep 2020 20:26:23 +0200
Subject: [PATCH 21/50] test: move legendFormatter test to container

---
 tests/unit/container.spec.js | 81 ++++++++++++++++++++++++++++++++++--
 tests/unit/counter.spec.js   | 58 --------------------------
 2 files changed, 78 insertions(+), 61 deletions(-)

diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js
index d5276df..28fd8ed 100644
--- a/tests/unit/container.spec.js
+++ b/tests/unit/container.spec.js
@@ -5,9 +5,10 @@ import VueEllipseProgress from "@/components/VueEllipseProgress.vue";
 import CircleContainer from "@/components/Circle/CircleContainer.vue";
 import Counter from "@/components/Counter.vue";
 
-const factory = (propsData) => {
+const factory = (propsData, scopedSlots = {}) => {
   return mount(VueEllipseProgress, {
     propsData: { progress: 50, ...propsData },
+    scopedSlots,
     stubs: {
       CircleContainer,
     },
@@ -15,8 +16,18 @@ const factory = (propsData) => {
 };
 
 // https://github.com/vuejs/vue-test-utils/issues/974
-/* global.requestAnimationFrame = () => {};
-global.cancelAnimationFrame = () => {}; */
+// rAF polyfill: https://gist.github.com/paulirish/1579671
+let lastTime = 0;
+global.requestAnimationFrame = (callback) => {
+  const currTime = new Date().getTime();
+  const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+  const id = setTimeout(() => {
+    callback(currTime + timeToCall);
+  }, timeToCall);
+  lastTime = currTime + timeToCall;
+  return id;
+};
+global.cancelAnimationFrame = (id) => clearTimeout(id);
 
 describe("[ EllipseProgressContainer.vue ]", () => {
   describe("#size", () => {
@@ -120,6 +131,70 @@ describe("[ EllipseProgressContainer.vue ]", () => {
         expect(wrapper.contains("#my-slot")).to.be.true;
       });
     });
+    describe("#legendFormatter", () => {
+      /* it("passes counter tick properties to formatter function", () => {
+        const formatter = (counterTick) => counterTick;
+        const counterWrapper = factory({ value: 50, legendFormatter: formatter });
+        expect(counterWrapper.vm.customFormattedValue).to.be.a("object");
+        expect(counterWrapper.vm.customFormattedValue).to.have.property("currentValue");
+      }); */
+
+      it("renders the custom formatted value", (done) => {
+        const customFormat = (value) => `Formatted: ${value}`;
+        const formatter = ({ currentValue }) => customFormat(currentValue);
+        const wrapper = factory({ legendValue: 135, legendFormatter: formatter, animation: "default 0 0" });
+        setTimeout(() => {
+          expect(wrapper.find(".ep-legend--value__counter").element.textContent).to.equal(customFormat(135));
+          done();
+        }, 50);
+      });
+
+      describe("custom format via default slot", () => {
+        const wrapper = factory(
+          { progress: 35 },
+          {
+            default: `
+              <v-template v-slot:default="{ counterTick }" >
+                <span class="my-formatter-slot">Formatted {{ counterTick.currentValue }}</span>
+              </v-template>`,
+          }
+        );
+
+        it("renders provided slot", () => {
+          expect(wrapper.find(".my-formatter-slot").exists()).to.be.true;
+        });
+
+        it("renders via provided slot formatted value", () => {
+          expect(wrapper.find(".my-formatter-slot").element.textContent).to.equal("Formatted 35");
+        });
+
+        it("do not renders other elements", () => {
+          expect(wrapper.findAll("span")).to.have.lengthOf(1);
+        });
+      });
+
+      describe("#legendFormatter HTML return value", () => {
+        const customFormat = (value) => `<span class="my-custom-format">Formatted ${value}</span>`;
+        const formatter = ({ currentValue }) => customFormat(currentValue);
+        const counterWrapper = factory({ value: 50, legendFormatter: formatter, animation: "default 0 0" });
+
+        it("recognises HTML formatter return value ", (done) => {
+          setTimeout(() => {
+            expect(counterWrapper.vm.isHTML).to.be.true;
+            done();
+          }, 10);
+        });
+        it("renders the formatter returned HTML", () => {
+          expect(counterWrapper.find(".my-custom-format").exists()).to.be.true;
+        });
+        it("renders the formatter HTML return value ", (done) => {
+          setTimeout(() => {
+            expect(counterWrapper.find(".my-custom-format").element.textContent).to.equal("Formatted 50");
+            done();
+          }, 50);
+        });
+      });
+    });
   });
   describe("#data", () => {
     const data = [
diff --git a/tests/unit/counter.spec.js b/tests/unit/counter.spec.js
index da4305f..93d49b5 100644
--- a/tests/unit/counter.spec.js
+++ b/tests/unit/counter.spec.js
@@ -88,62 +88,4 @@ describe("[ Counter.vue ]", () => {
       });
     }
   });
-  describe("#legendFormatter", () => {
-    it("passes counter tick properties to formatter function", () => {
-      const formatter = (counterTick) => counterTick;
-      const counterWrapper = factory({ value: 50, legendFormatter: formatter });
-      expect(counterWrapper.vm.customFormattedValue).to.be.a("object");
-      expect(counterWrapper.vm.customFormattedValue).to.have.property("currentValue");
-    });
-
-    it("renders the custom formatted value", (done) => {
-      const customFormat = (value) => `Formatted: ${value}`;
-      const formatter = ({ currentValue }) => customFormat(currentValue);
-      const counterWrapper = factory({ value: 50, legendFormatter: formatter, animation: "default 0 0" });
-      setTimeout(() => {
-        expect(counterWrapper.vm.customFormattedValue).to.equal(customFormat(50));
-        done();
-      }, 50);
-    });
-
-    describe("custom format via default slot", () => {
-      const counterWrapper = factory(
-        {},
-        {
-          default: '<span class="my-formatter-slot">Formatted 100</span>',
-        }
-      );
-
-      it("renders provided slot", () => {
-        expect(counterWrapper.find(".my-formatter-slot").exists()).to.be.true;
-      });
-
-      it("do not renders other elements", () => {
-        expect(counterWrapper.findAll("span")).to.have.lengthOf(2);
-      });
-    });
-
-    describe("#legendFormatter HTML return value", () => {
-      const customFormat = (value) => `<span class="my-custom-format">Formatted ${value}</span>`;
-      const formatter = ({ currentValue }) => customFormat(currentValue);
-      const counterWrapper = factory({ value: 50, legendFormatter: formatter, animation: "default 0 0" });
-
-      it("recognises HTML formatter return value ", (done) => {
-        setTimeout(() => {
-          expect(counterWrapper.vm.customFormattedValue).to.equal(customFormat(50));
-          expect(counterWrapper.vm.isHTML).to.be.true;
-          done();
-        }, 10);
-      });
-      it("renders the formatter returned HTML", () => {
-        expect(counterWrapper.find(".my-custom-format").exists()).to.be.true;
-      });
-      it("renders the formatter HTML return value ", (done) => {
-        setTimeout(() => {
-          expect(counterWrapper.find(".my-custom-format").element.textContent).to.equal("Formatted 50");
-          done();
-        }, 50);
-      });
-    });
-  });
 });

From 869f1b15044fbf0c363aef4664e7c87f78fdd6f8 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 8 Sep 2020 20:27:10 +0200
Subject: [PATCH 22/50] fix: clean up Counter.vue props

---
 src/components/Counter.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 9e2c2ef..7d868c5 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -14,10 +14,6 @@ export default {
       type: [Number, String],
       required: true,
     },
-    legendFormatter: {
-      type: Function,
-      required: false,
-    },
     animation: {
       type: String,
       required: true,
@@ -26,10 +22,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    counterTick: {
-      type: Object,
-      required: true,
-    },
   },
   data: () => ({
     start: 0,

From 697f63efe75df2a5c276a49ed46467b7bb4baebd Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 8 Sep 2020 20:40:24 +0200
Subject: [PATCH 23/50] chore: render counter value even if slot from container
 not provided

---
 src/App.vue                           | 2 +-
 src/components/Counter.vue            | 1 +
 src/components/VueEllipseProgress.vue | 1 -
 tests/unit/counter.spec.js            | 7 +++++++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 80fc500..c63005c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -62,7 +62,7 @@
       <vue-ellipse-progress
         :size="600"
         :progress="progress"
-        :legend-formatter="({ currentValue }) => `My format ${currentValue}`"
+        :legend-value="125.1"
       >
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index 7d868c5..d9ec672 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -1,6 +1,7 @@
 <template>
   <span class="ep-legend--value__counter">
     <slot :counterTick="counterProps"> </slot>
+    <span v-if="!$scopedSlots.default">{{ formattedValue }}</span>
   </span>
 </template>
 
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index d238dbf..6d087ad 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -90,7 +90,6 @@ export default {
       return /<[a-z/][\s\S]*>/i.test(this.legendFormatter({ currentValue: 0 }).toString().trim());
     },
     circlesData() {
-      console.log(this.$scopedSlots.default);
       if (this.isMultiple) {
         return this.data.map((data) => ({
           ...this.$props,
diff --git a/tests/unit/counter.spec.js b/tests/unit/counter.spec.js
index 93d49b5..2984af1 100644
--- a/tests/unit/counter.spec.js
+++ b/tests/unit/counter.spec.js
@@ -88,4 +88,11 @@ describe("[ Counter.vue ]", () => {
       });
     }
   });
+  describe("#animation", async () => {
+    const counterWrapper = factory({ value: 50, animation: "default 200 300" });
+    it("parses #animation prop correctly", () => {
+      expect(counterWrapper.vm.duration).to.equal(200);
+      expect(counterWrapper.vm.delay).to.equal(300);
+    });
+  });
 });

From 7d30dc21121a0b4c4f4b852583a2c95bc979310f Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 8 Sep 2020 20:48:11 +0200
Subject: [PATCH 24/50] test: adjust counter and valueFormatter tests

---
 tests/unit/container.spec.js | 112 +++++++++++++++++------------------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js
index 28fd8ed..45dfb1f 100644
--- a/tests/unit/container.spec.js
+++ b/tests/unit/container.spec.js
@@ -131,68 +131,30 @@ describe("[ EllipseProgressContainer.vue ]", () => {
         expect(wrapper.contains("#my-slot")).to.be.true;
       });
     });
-    describe("#legendFormatter", () => {
-      /* it("passes counter tick properties to formatter function", () => {
-        const formatter = (counterTick) => counterTick;
-        const counterWrapper = factory({ value: 50, legendFormatter: formatter });
-        expect(counterWrapper.vm.customFormattedValue).to.be.a("object");
-        expect(counterWrapper.vm.customFormattedValue).to.have.property("currentValue");
-      }); */
-
-      it("renders the custom formatted value", (done) => {
-        const customFormat = (value) => `Formatted: ${value}`;
-        const formatter = ({ currentValue }) => customFormat(currentValue);
-        const wrapper = factory({ legendValue: 135, legendFormatter: formatter, animation: "default 0 0" });
-        setTimeout(() => {
-          expect(wrapper.find(".ep-legend--value__counter").element.textContent).to.equal(customFormat(135));
-          done();
-        }, 50);
-      });
-
-      describe("custom format via default slot", () => {
-        const wrapper = factory(
-          { progress: 35 },
-          {
-            default: `
-              <v-template v-slot:default="{ counterTick }" >
+    describe("#default", () => {
+      const wrapper = factory(
+        { progress: 35, animation: "default 0 0" },
+        {
+          default: `
+              <template v-slot:default="{ counterTick }" >
                 <span class="my-formatter-slot">Formatted {{ counterTick.currentValue }}</span>
-              </v-template>`,
-          }
-        );
+              </template>`,
+        }
+      );
 
-        it("renders provided slot", () => {
-          expect(wrapper.find(".my-formatter-slot").exists()).to.be.true;
-        });
+      it("renders provided slot", () => {
+        expect(wrapper.find(".my-formatter-slot").exists()).to.be.true;
+      });
 
-        it("renders via provided slot formatted value", () => {
+      it("renders via provided slot formatted value", (done) => {
+        setTimeout(() => {
           expect(wrapper.find(".my-formatter-slot").element.textContent).to.equal("Formatted 35");
-        });
-
-        it("do not renders other elements", () => {
-          expect(wrapper.findAll("span")).to.have.lengthOf(1);
-        });
+          done();
+        }, 10);
       });
 
-      describe("#legendFormatter HTML return value", () => {
-        const customFormat = (value) => `<span class="my-custom-format">Formatted ${value}</span>`;
-        const formatter = ({ currentValue }) => customFormat(currentValue);
-        const counterWrapper = factory({ value: 50, legendFormatter: formatter, animation: "default 0 0" });
-
-        it("recognises HTML formatter return value ", (done) => {
-          setTimeout(() => {
-            expect(counterWrapper.vm.isHTML).to.be.true;
-            done();
-          }, 10);
-        });
-        it("renders the formatter returned HTML", () => {
-          expect(counterWrapper.find(".my-custom-format").exists()).to.be.true;
-        });
-        it("renders the formatter HTML return value ", (done) => {
-          setTimeout(() => {
-            expect(counterWrapper.find(".my-custom-format").element.textContent).to.equal("Formatted 50");
-            done();
-          }, 50);
-        });
+      it("do not renders other elements", () => {
+        expect(wrapper.findComponent(Counter).findAll("span")).to.have.lengthOf(2);
       });
     });
   });
@@ -231,4 +193,42 @@ describe("[ EllipseProgressContainer.vue ]", () => {
       }
     });
   });
+  describe("#legendFormatter", () => {
+    /* it("passes counter tick properties to formatter function", () => {
+        const formatter = (counterTick) => counterTick;
+        const counterWrapper = factory({ value: 50, legendFormatter: formatter });
+        expect(counterWrapper.vm.customFormattedValue).to.be.a("object");
+        expect(counterWrapper.vm.customFormattedValue).to.have.property("currentValue");
+      }); */
+    it("renders the custom formatted value", (done) => {
+      const customFormat = (value) => `Formatted: ${value}`;
+      const formatter = ({ currentValue }) => customFormat(currentValue);
+      const wrapper = factory({ legendValue: 135, legendFormatter: formatter, animation: "default 0 0" });
+      setTimeout(() => {
+        expect(wrapper.find(".ep-legend--value__counter").element.textContent).to.equal(customFormat(135));
+        done();
+      }, 50);
+    });
+    describe("#legendFormatter HTML return value", () => {
+      const customFormat = (value) => `<span class="my-custom-format">Formatted ${value}</span>`;
+      const formatter = ({ currentValue }) => customFormat(currentValue);
+      const counterWrapper = factory({ value: 50, legendFormatter: formatter, animation: "default 0 0" });
+
+      it("recognises HTML formatter return value ", (done) => {
+        setTimeout(() => {
+          expect(counterWrapper.vm.isHTML).to.be.true;
+          done();
+        }, 10);
+      });
+      it("renders the formatter returned HTML", () => {
+        expect(counterWrapper.find(".my-custom-format").exists()).to.be.true;
+      });
+      it("renders the formatter HTML return value ", (done) => {
+        setTimeout(() => {
+          expect(counterWrapper.find(".my-custom-format").element.textContent).to.equal("Formatted 50");
+          done();
+        }, 50);
+      });
+    });
+  });
 });

From abd52afb9d0352e372ecb667c1f83d3508fa14ff Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Tue, 8 Sep 2020 21:30:39 +0200
Subject: [PATCH 25/50] test: extend counter tests

---
 tests/unit/counter.spec.js | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/tests/unit/counter.spec.js b/tests/unit/counter.spec.js
index 2984af1..db650ca 100644
--- a/tests/unit/counter.spec.js
+++ b/tests/unit/counter.spec.js
@@ -4,7 +4,7 @@ import Counter from "@/components/Counter.vue";
 
 const factory = (propsData, slots) => {
   return mount(Counter, {
-    propsData: { counterTick: {}, value: 50, loading: false, animation: "default 100 100", ...propsData },
+    propsData: { counterTick: {}, value: 50, loading: false, animation: "default 100 200", ...propsData },
     slots,
   });
 };
@@ -25,18 +25,26 @@ global.cancelAnimationFrame = (id) => clearTimeout(id);
 
 describe("[ Counter.vue ]", () => {
   describe("#value", async () => {
+    it("renders the final value correctly", (done) => {
+      const counterWrapper = factory({ value: 50, animation: `default 0 0` });
+      setTimeout(() => {
+        expect(counterWrapper.element.textContent).to.equal("50");
+      }, 100);
+      done();
+    });
+
     const values = [
       { value: -45.2456, count: 4, start: "0.0000" },
       { value: 56.34, count: 2, start: "0.00" },
       { value: "25,564", count: 3, start: "0,000" },
       { value: "-30,5", count: 1, start: "0,0" },
     ];
-    const animation = { duration: 100, delay: 100 };
+    const animation = { duration: 100, delay: 1000 };
     for (const val of values) {
       const { value, count, start } = val;
       const counterWrapper = factory({ value, animation: `default ${animation.duration} ${animation.delay}` });
 
-      it(`counts the decimals correctly for ${value}`, () => {
+      it("counts the decimals correctly", () => {
         expect(counterWrapper.vm.countDecimals()).to.equal(count);
       });
 
@@ -58,11 +66,6 @@ describe("[ Counter.vue ]", () => {
         });
       }
 
-      it("parses #animation prop correctly", () => {
-        expect(counterWrapper.vm.duration).to.equal(animation.duration);
-        expect(counterWrapper.vm.delay).to.equal(animation.delay);
-      });
-
       it("calculates the difference between the start and end values correctly", () => {
         const endValue = parseFloat(value.toString().replace(",", "."));
         const startValue = 0;
@@ -89,10 +92,20 @@ describe("[ Counter.vue ]", () => {
     }
   });
   describe("#animation", async () => {
-    const counterWrapper = factory({ value: 50, animation: "default 200 300" });
     it("parses #animation prop correctly", () => {
+      const counterWrapper = factory({ value: 50, animation: "default 200 300" });
       expect(counterWrapper.vm.duration).to.equal(200);
       expect(counterWrapper.vm.delay).to.equal(300);
     });
+    it("do not count the value before delay", (done) => {
+      const counterWrapper = factory({ value: 50, animation: "default 200 1000" });
+      expect(counterWrapper.vm.currentValue).to.equal(0);
+      expect(counterWrapper.element.textContent).to.equal("0");
+      setTimeout(() => {
+        expect(counterWrapper.vm.currentValue).to.equal(0);
+        expect(counterWrapper.element.textContent).to.equal("0");
+        done();
+      }, 300);
+    });
   });
 });

From 4c923bc00df910e738168a244211d6d67a0a14af Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Wed, 9 Sep 2020 15:33:58 +0200
Subject: [PATCH 26/50] test: finish legend formatter tests

---
 src/App.vue                           |  6 +-----
 src/components/VueEllipseProgress.vue |  8 +-------
 tests/unit/container.spec.js          | 14 ++++----------
 3 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c63005c..ca34e79 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,11 +59,7 @@
           </template>
         </vue-ellipse-progress>
       </div>
-      <vue-ellipse-progress
-        :size="600"
-        :progress="progress"
-        :legend-value="125.1"
-      >
+      <vue-ellipse-progress :size="600" :progress="progress" :legend-value="125.1">
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>
         </template>
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 6d087ad..0cd4b1b 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -27,13 +27,7 @@
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
           :style="{ fontSize, color: fontColor }"
         >
-          <counter
-            :value="legendVal"
-            :animation="animation"
-            :loading="loading"
-            :legend-formatter="legendFormatter"
-            :counter-tick.sync="counterTick"
-          >
+          <counter :value="legendVal" :animation="animation" :loading="loading" :counter-tick.sync="counterTick">
             <template v-slot:default="{ counterTick }">
               <slot v-if="$scopedSlots.default" :counterTick="counterTick"></slot>
               <span v-if="legendFormatter">
diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js
index 45dfb1f..8f1eab1 100644
--- a/tests/unit/container.spec.js
+++ b/tests/unit/container.spec.js
@@ -150,7 +150,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
         setTimeout(() => {
           expect(wrapper.find(".my-formatter-slot").element.textContent).to.equal("Formatted 35");
           done();
-        }, 10);
+        }, 100);
       });
 
       it("do not renders other elements", () => {
@@ -194,20 +194,14 @@ describe("[ EllipseProgressContainer.vue ]", () => {
     });
   });
   describe("#legendFormatter", () => {
-    /* it("passes counter tick properties to formatter function", () => {
-        const formatter = (counterTick) => counterTick;
-        const counterWrapper = factory({ value: 50, legendFormatter: formatter });
-        expect(counterWrapper.vm.customFormattedValue).to.be.a("object");
-        expect(counterWrapper.vm.customFormattedValue).to.have.property("currentValue");
-      }); */
     it("renders the custom formatted value", (done) => {
       const customFormat = (value) => `Formatted: ${value}`;
       const formatter = ({ currentValue }) => customFormat(currentValue);
-      const wrapper = factory({ legendValue: 135, legendFormatter: formatter, animation: "default 0 0" });
+      const wrapper = factory({ legendValue: 120, legendFormatter: formatter, animation: "default 0 0" });
       setTimeout(() => {
-        expect(wrapper.find(".ep-legend--value__counter").element.textContent).to.equal(customFormat(135));
+        expect(wrapper.find(".ep-legend--value__counter").element.textContent).to.equal(customFormat(120));
         done();
-      }, 50);
+      }, 100);
     });
     describe("#legendFormatter HTML return value", () => {
       const customFormat = (value) => `<span class="my-custom-format">Formatted ${value}</span>`;

From 3e5c058e7763237bb82f9630eed5d052540dd22b Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Wed, 9 Sep 2020 15:53:20 +0200
Subject: [PATCH 27/50] test: fix deprecated syntax

---
 tests/unit/circle/circle-animation.spec.js |  4 ++--
 tests/unit/circle/circle-colors.spec.js    |  4 ++--
 tests/unit/circle/circle-dot.spec.js       | 14 +++++++-------
 tests/unit/circle/circle.spec.js           |  8 ++++----
 tests/unit/container.spec.js               |  6 +++---
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/tests/unit/circle/circle-animation.spec.js b/tests/unit/circle/circle-animation.spec.js
index 10addb0..85443a6 100644
--- a/tests/unit/circle/circle-animation.spec.js
+++ b/tests/unit/circle/circle-animation.spec.js
@@ -124,7 +124,7 @@ const animationDelayTests = (container, circleClass, prefix = "circle | ") => {
 
 describe("#animation", () => {
   const circleContainerWrapper = factory({ progress: 50, dot: 5, animation: "rs 500 5" }, CircleContainer);
-  const circleDotWrapper = circleContainerWrapper.find(CircleDot);
+  const circleDotWrapper = circleContainerWrapper.findComponent(CircleDot);
 
   it("it parses the #animation property correctly", () => {
     const wrapper = factory({ animation: "rs 2000 200" });
@@ -170,7 +170,7 @@ describe("#animation", () => {
 
     const progress = 50;
     const wrapper = factory({ dot: 5, animation: "rs 500 50" }, CircleContainer);
-    const cdWrapper = wrapper.find(CircleDot);
+    const cdWrapper = wrapper.findComponent(CircleDot);
     const startRotation = wrapper.props("angle") + 90;
 
     it(`circle dot | do not applies any animation type before delay`, () => {
diff --git a/tests/unit/circle/circle-colors.spec.js b/tests/unit/circle/circle-colors.spec.js
index a79cf9c..190264d 100644
--- a/tests/unit/circle/circle-colors.spec.js
+++ b/tests/unit/circle/circle-colors.spec.js
@@ -42,7 +42,7 @@ const colorTests = (colorProp, color, selector, fill = false) => {
     });
 
     it("do not renders Gradient component", () => {
-      expect(wrapper.contains(Gradient)).to.be.false;
+      expect(wrapper.findComponent(Gradient).exists()).to.be.false;
     });
 
     it("applies color correctly to SVG stroke", () => {
@@ -64,7 +64,7 @@ const gradientColorTests = (colorProp, selector, urlPrefix, fill = false) => {
       expect(wrapper.vm[`is${type}${fillType}Gradient`]).to.be.true;
     });
     it("renders Gradient component", () => {
-      expect(wrapper.contains(Gradient)).to.be.true;
+      expect(wrapper.findComponent(Gradient).exists()).to.be.true;
     });
     it(`applies gradient URL to SVG ${fill ? "fill" : "stroke"}`, () => {
       expect(circleWrapper.element.getAttribute(`${fill ? "fill" : "stroke"}`)).to.equal(
diff --git a/tests/unit/circle/circle-dot.spec.js b/tests/unit/circle/circle-dot.spec.js
index a84b5e3..3c02a1d 100644
--- a/tests/unit/circle/circle-dot.spec.js
+++ b/tests/unit/circle/circle-dot.spec.js
@@ -52,8 +52,8 @@ describe("#dot", () => {
 
   it("applies default value correctly", () => {
     const wrapper = factory({ progress }, VueEllipseProgress);
-    const circleWrapper = wrapper.find(Circle);
-    const circleContainerWrapper = wrapper.find(CircleContainer);
+    const circleWrapper = wrapper.findComponent(Circle);
+    const circleContainerWrapper = wrapper.findComponent(CircleContainer);
 
     expect(wrapper.props("dot")).to.equal(0);
     expect(circleContainerWrapper.props("dot")).to.equal(0);
@@ -64,7 +64,7 @@ describe("#dot", () => {
 
   it(`calculates and applies correct rotation of the dot container depending on progress`, (done) => {
     const wrapper = factory({ progress, dot: 5, animation: "default 0 0" }, CircleContainer);
-    const circleDotWrapper = wrapper.find(CircleDot);
+    const circleDotWrapper = wrapper.findComponent(CircleDot);
     const rotationStart = wrapper.props("angle") + 90;
     const rotation = rotationStart + (progress * 360) / 100;
     setTimeout(() => {
@@ -75,7 +75,7 @@ describe("#dot", () => {
 
   it(`applies correct initial rotation of the dot container`, async () => {
     const wrapper = factory({ progress, dot: 5, animation: "default 0 1000" }, CircleContainer);
-    const circleDotWrapper = wrapper.find(CircleDot);
+    const circleDotWrapper = wrapper.findComponent(CircleDot);
     const angle = wrapper.props("angle");
     const rotationStart = angle + 90;
     expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotationStart}deg)`);
@@ -102,14 +102,14 @@ describe("#dot", () => {
     const circleData = data[i];
     const wrapper = factory({ size, dot: globalDot, ...circleData }, CircleContainer);
     const circleDotSpanWrapper = wrapper.find("span.ep-circle--progress__dot");
-    const circleDotWrapper = wrapper.find(CircleDot);
-    const circleWrapper = wrapper.find(Circle);
+    const circleDotWrapper = wrapper.findComponent(CircleDot);
+    const circleWrapper = wrapper.findComponent(Circle);
     const parsedDot = dotParser(circleData.dot !== undefined ? circleData.dot : globalDot);
     const parsedDotSize = parseFloat(calculateThickness(parsedDot.size));
     const parsedDotColor = parsedDot.backgroundColor || parsedDot.background || parsedDot.color;
 
     it(`renders dot component | #dot = ${circleData.dot}`, () => {
-      expect(wrapper.contains(CircleDot)).to.be.true;
+      expect(wrapper.findComponent(CircleDot).exists()).to.be.true;
     });
 
     it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index 9daff9d..b961bf9 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -128,10 +128,10 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     const circleEmptyWrapper = wrapper.find(".ep-half-circle--empty");
 
     it("renders half progress circle SVG path", () => {
-      expect(wrapper.contains("path.ep-half-circle--progress.ep-circle--progress")).to.be.true;
+      expect(wrapper.find("path.ep-half-circle--progress.ep-circle--progress").exists()).to.be.true;
     });
     it("renders half empty circle SVG path", () => {
-      expect(wrapper.contains("path.ep-half-circle--empty")).to.be.true;
+      expect(wrapper.find("path.ep-half-circle--empty").exists()).to.be.true;
     });
 
     it("calculates and sets the position of the half circles correctly", () => {
@@ -224,7 +224,7 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     });
 
     it("shows the determinate loading circle", () => {
-      expect(wrapper.contains(".ep-circle--determinate")).to.be.true;
+      expect(wrapper.find(".ep-circle--determinate").exists()).to.be.true;
     });
     it("applies same styles to determinate circle as to progress circle", () => {
       const determinateCircleWrapper = wrapper.find(".ep-circle--determinate");
@@ -281,7 +281,7 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       { data, gap: globalGap, thickness: globalThickness, size, dot: globalDot },
       VueEllipseProgress
     );
-    const circleWrappers = wrapper.findAll(Circle);
+    const circleWrappers = wrapper.findAllComponents(Circle);
 
     const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);
 
diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js
index 8f1eab1..89d2dfe 100644
--- a/tests/unit/container.spec.js
+++ b/tests/unit/container.spec.js
@@ -117,7 +117,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
             "legend-value": '<span id="my-slot">Hello Circle</span>',
           },
         });
-        expect(wrapper.contains("#my-slot")).to.be.true;
+        expect(wrapper.get("#my-slot"));
       });
     });
     describe("#legend-caption", () => {
@@ -128,7 +128,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
             "legend-caption": '<span id="my-slot">Hello Circle</span>',
           },
         });
-        expect(wrapper.contains("#my-slot")).to.be.true;
+        expect(wrapper.get("#my-slot"));
       });
     });
     describe("#default", () => {
@@ -169,7 +169,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
       expect(wrapper.find(".ep-legend--value").exists()).to.be.false;
     });
     it(`renders ${data.length} circles`, () => {
-      expect(wrapper.findAll(CircleContainer).length).to.equal(data.length);
+      expect(wrapper.findAllComponents(CircleContainer).length).to.equal(data.length);
     });
     it("merges circles props with the global props", () => {
       const { circlesData } = wrapper.vm;

From 85085b62940f0401932f89b27dc17104ed58f7c3 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Wed, 9 Sep 2020 15:54:19 +0200
Subject: [PATCH 28/50] release: v1.3.0-beta.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f9e77a7..ab97ccf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.3",
+  "version": "1.3.0-beta.4",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",

From cf4ad246735981158e10e96571b92b3a5c61ca50 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergatam@yandex.com>
Date: Wed, 9 Sep 2020 16:00:52 +0200
Subject: [PATCH 29/50] doc: small correction in scoped slot example

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c7915b0..21f1edd 100644
--- a/README.md
+++ b/README.md
@@ -578,7 +578,7 @@ props and adjust the presentation of the legend to your needs.
 <vue-ellipse-progress :progress="50">
   <template v-slot:default="{ counterTick }">
     <span style="font-weight: bold; font-size: 1.6rem; color: green;">
-      {{ myFormatter(counterTick .currentValue) }}
+      {{ myFormatter(counterTick.currentValue) }}
     </span>
   </template>
 </vue-ellipse-progress>

From cee2210c1bf9d18127579fc876a6846033a2b881 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Wed, 9 Sep 2020 21:02:37 +0200
Subject: [PATCH 30/50] fix: remove not used props from counter

---
 package.json                          | 2 +-
 src/components/VueEllipseProgress.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ab97ccf..58a4f09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.4",
+  "version": "1.3.0-beta.5",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 0cd4b1b..a8af238 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -27,7 +27,7 @@
           :class="[legendClass, { 'ep-hidden': shouldHideLegendValue }]"
           :style="{ fontSize, color: fontColor }"
         >
-          <counter :value="legendVal" :animation="animation" :loading="loading" :counter-tick.sync="counterTick">
+          <counter :value="legendVal" :animation="animation" :loading="loading">
             <template v-slot:default="{ counterTick }">
               <slot v-if="$scopedSlots.default" :counterTick="counterTick"></slot>
               <span v-if="legendFormatter">

From 8232450781175585ec2414a7e8b7352513d140e3 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 21:03:51 +0200
Subject: [PATCH 31/50] fix: moved dot out of svg

---
 src/App.vue                               |  1 +
 src/components/Circle/CircleContainer.vue |  1 -
 src/components/VueEllipseProgress.vue     | 41 +++++++++++++----------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ca34e79..6d58423 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,6 +47,7 @@
           :legendValue="1315.56"
           animation="rs 5000 500"
           :loading="loading"
+          dot="20 red"
         >
           <template v-slot:default="{ counterTick }">
             <span
diff --git a/src/components/Circle/CircleContainer.vue b/src/components/Circle/CircleContainer.vue
index 0130277..00861b1 100644
--- a/src/components/Circle/CircleContainer.vue
+++ b/src/components/Circle/CircleContainer.vue
@@ -7,7 +7,6 @@
       <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
     </defs>
     <component :is="circleType" v-bind="$props" :id="_uid" />
-    <circle-dot v-if="dot" v-bind="$props" :id="_uid" :index="index" :multiple="multiple" />
   </g>
 </template>
 
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index a8af238..f18cf10 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -2,24 +2,24 @@
   <div
     class="ep-container"
     :style="{
-      maxWidth: `${size}px`,
-      maxHeight: `${size}px`,
+      width: `${size}px`,
+      height: `${size}px`,
     }"
   >
     <div class="ep-content">
-      <svg class="ep-svg-container" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
-        <circle-container
-          v-for="(options, i) in circlesData"
-          :key="i"
-          v-bind="options"
-          :multiple="isMultiple"
-          :index="i"
-          :globalThickness="thickness"
-          :globalGap="gap"
-          :globalDot="dot"
-        />
-      </svg>
-
+      <div class="ep-svg-container" v-for="(options, i) in circlesData" :key="i">
+        <svg class="ep-svg" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
+          <circle-container
+            v-bind="options"
+            :multiple="isMultiple"
+            :index="i"
+            :globalThickness="thickness"
+            :globalGap="gap"
+            :globalDot="dot"
+          />
+        </svg>
+        <circle-dot v-if="options.dot" v-bind="$props" :id="_uid" :index="i" :multiple="isMultiple" />
+      </div>
       <div class="ep-legend--container" :style="{ maxWidth: `${size}px` }">
         <div
           class="ep-legend--value"
@@ -46,6 +46,7 @@
 </template>
 
 <script>
+import CircleDot from "@/components/Circle/CircleDot.vue";
 import { getNumberIfValid, isValidNumber } from "../utils";
 import { props } from "./interface";
 import CircleContainer from "./Circle/CircleContainer.vue";
@@ -53,7 +54,7 @@ import Counter from "./Counter.vue";
 
 export default {
   name: "VueEllipseProgress",
-  components: { Counter, CircleContainer },
+  components: { CircleDot, Counter, CircleContainer },
   props: {
     ...props,
     legendFormatter: {
@@ -110,6 +111,12 @@ export default {
   justify-content: center;
   align-items: center;
   position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.ep-svg-container {
+  position: absolute;
 }
 
 .ep-legend--container {
@@ -125,7 +132,7 @@ export default {
 .ep-hidden {
   opacity: 0;
 }
-svg.ep-svg-container {
+svg.ep-svg {
   transition: inherit;
   transform-origin: 50% 50%;
 }

From 114df49cb6350adb9cb3b4dfeb8652d475cdd5e2 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 21:19:44 +0200
Subject: [PATCH 32/50] fix: rewrite dot component with html pur

---
 src/App.vue                           | 12 +++++++-----
 src/components/Circle/CircleDot.vue   | 16 +++++++++++-----
 src/components/VueEllipseProgress.vue | 14 +++++++++++++-
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6d58423..64bcaaf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,9 +45,11 @@
           :size="600"
           :progress="progress"
           :legendValue="1315.56"
-          animation="rs 5000 500"
+          animation="rs 2000 500"
           :loading="loading"
-          dot="20 red"
+          dot="100 red"
+          line-mode="in"
+          :data="circles"
         >
           <template v-slot:default="{ counterTick }">
             <span
@@ -78,9 +80,9 @@ export default {
     line: "round",
     price: "",
     circles: [
-      { progress: 50, color: "red" },
-      { progress: 50, color: "red", half: true, angle: -90 },
-      { progress: -50, color: "blue", reverse: false },
+      { progress: 50, color: "red", dot: "20 yellow" },
+      { progress: 50, color: "red", half: true, angle: -90, dot: "10 green" },
+      { progress: 50, color: "blue", reverse: false },
     ],
     determinate: false,
     loading: false,
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index b3b3eec..e5a7049 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -1,15 +1,15 @@
 <template>
-  <foreignObject
-    :x="dotContainerPosition"
-    :y="dotContainerPosition"
+  <div
     class="ep-circle--progress__dot-container"
     :class="dotContainerClasses"
     :width="dotContainerSize"
     :height="dotContainerSize"
     :style="dotContainerStyle"
   >
-    <span class="ep-circle--progress__dot" :class="{ 'ep-hidden': isHidden }" :style="dotStyle"> </span>
-  </foreignObject>
+    <div>
+      <span class="ep-circle--progress__dot" :class="{ 'ep-hidden': isHidden }" :style="dotStyle"> </span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -38,6 +38,8 @@ export default {
     },
     dotContainerStyle() {
       return {
+        width: `${this.dotContainerSize}px`,
+        height: `${this.dotContainerSize}px`,
         transform: `rotate(${this.dotContainerRotation}deg)`,
         transitionDuration: this.loading ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
@@ -98,10 +100,14 @@ export default {
 
 <style scoped lang="scss">
 .ep-circle--progress__dot-container {
+  position: absolute;
   transform-origin: center center;
   &.hidden {
     transition-duration: 0s;
   }
+  & > div {
+    position: relative;
+  }
 }
 .ep-circle--progress__dot {
   transition-duration: 0.2s;
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index f18cf10..594c783 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -18,7 +18,16 @@
             :globalDot="dot"
           />
         </svg>
-        <circle-dot v-if="options.dot" v-bind="$props" :id="_uid" :index="i" :multiple="isMultiple" />
+        <circle-dot
+          v-if="options.dot"
+          v-bind="options"
+          :id="_uid"
+          :index="i"
+          :multiple="isMultiple"
+          :globalGap="gap"
+          :globalDot="dot"
+          :globalThickness="thickness"
+        />
       </div>
       <div class="ep-legend--container" :style="{ maxWidth: `${size}px` }">
         <div
@@ -116,6 +125,9 @@ export default {
 }
 
 .ep-svg-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
 }
 

From 5b6b265bf42191f5cc8789181ee73b5553bdcef3 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 21:28:09 +0200
Subject: [PATCH 33/50] fix: restructure CircleContainer.vue

---
 src/components/Circle/CircleContainer.vue | 29 +++++++++++-----
 src/components/VueEllipseProgress.vue     | 42 ++++++-----------------
 2 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/components/Circle/CircleContainer.vue b/src/components/Circle/CircleContainer.vue
index 00861b1..408a6f9 100644
--- a/src/components/Circle/CircleContainer.vue
+++ b/src/components/Circle/CircleContainer.vue
@@ -1,13 +1,18 @@
 <template>
-  <g class="ep-circle--container" :class="{ 'ep-reverse': reverse }">
-    <defs>
-      <gradient v-if="isColorGradient" :color="color" type="progress" :id="_uid" />
-      <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="_uid" />
-      <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="_uid" />
-      <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
-    </defs>
-    <component :is="circleType" v-bind="$props" :id="_uid" />
-  </g>
+  <div class="ep-svg-container">
+    <svg class="ep-svg" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
+      <g class="ep-circle--container" :class="{ 'ep-reverse': reverse }">
+        <defs>
+          <gradient v-if="isColorGradient" :color="color" type="progress" :id="_uid" />
+          <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="_uid" />
+          <gradient v-if="isEmptyColorGradient" :color="emptyColor" type="empty" :id="_uid" />
+          <gradient v-if="isEmptyColorFillGradient" :color="emptyColorFill" type="empty-fill" :id="_uid" />
+        </defs>
+        <component :is="circleType" v-bind="$props" :id="_uid" />
+      </g>
+    </svg>
+    <circle-dot v-if="dot" v-bind="$props" :id="_uid" />
+  </div>
 </template>
 
 <script>
@@ -66,6 +71,12 @@ export default {
 <style lang="scss">
 @import "~@/styles/animations.scss";
 @import "~@/styles/animationsUsage.scss";
+.ep-svg-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+}
 g.ep-circle--container {
   transition: inherit;
   transform-origin: 50% 50%;
diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue
index 594c783..5bddbaa 100644
--- a/src/components/VueEllipseProgress.vue
+++ b/src/components/VueEllipseProgress.vue
@@ -7,28 +7,16 @@
     }"
   >
     <div class="ep-content">
-      <div class="ep-svg-container" v-for="(options, i) in circlesData" :key="i">
-        <svg class="ep-svg" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
-          <circle-container
-            v-bind="options"
-            :multiple="isMultiple"
-            :index="i"
-            :globalThickness="thickness"
-            :globalGap="gap"
-            :globalDot="dot"
-          />
-        </svg>
-        <circle-dot
-          v-if="options.dot"
-          v-bind="options"
-          :id="_uid"
-          :index="i"
-          :multiple="isMultiple"
-          :globalGap="gap"
-          :globalDot="dot"
-          :globalThickness="thickness"
-        />
-      </div>
+      <circle-container
+        v-for="(options, i) in circlesData"
+        :key="i"
+        v-bind="options"
+        :multiple="isMultiple"
+        :index="i"
+        :globalThickness="thickness"
+        :globalGap="gap"
+        :globalDot="dot"
+      />
       <div class="ep-legend--container" :style="{ maxWidth: `${size}px` }">
         <div
           class="ep-legend--value"
@@ -55,7 +43,6 @@
 </template>
 
 <script>
-import CircleDot from "@/components/Circle/CircleDot.vue";
 import { getNumberIfValid, isValidNumber } from "../utils";
 import { props } from "./interface";
 import CircleContainer from "./Circle/CircleContainer.vue";
@@ -63,7 +50,7 @@ import Counter from "./Counter.vue";
 
 export default {
   name: "VueEllipseProgress",
-  components: { CircleDot, Counter, CircleContainer },
+  components: { Counter, CircleContainer },
   props: {
     ...props,
     legendFormatter: {
@@ -124,13 +111,6 @@ export default {
   width: 100%;
 }
 
-.ep-svg-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-}
-
 .ep-legend--container {
   transition: inherit;
   position: absolute;

From 40ef69cf28715f89da53a34b2556fc2af8d43f23 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 21:34:12 +0200
Subject: [PATCH 34/50] fix: apply reverse class correctly

---
 src/App.vue                               |  4 ++--
 src/components/Circle/CircleContainer.vue | 10 +++++-----
 tests/unit/container.spec.js              |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 64bcaaf..e776146 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,9 +47,9 @@
           :legendValue="1315.56"
           animation="rs 2000 500"
           :loading="loading"
-          dot="100 red"
+          dot="50 red"
+          :reverse="true"
           line-mode="in"
-          :data="circles"
         >
           <template v-slot:default="{ counterTick }">
             <span
diff --git a/src/components/Circle/CircleContainer.vue b/src/components/Circle/CircleContainer.vue
index 408a6f9..16c398b 100644
--- a/src/components/Circle/CircleContainer.vue
+++ b/src/components/Circle/CircleContainer.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="ep-svg-container">
+  <div class="ep-svg-container" :class="{ 'ep-reverse': reverse }">
     <svg class="ep-svg" :height="size" :width="size" xmlns="http://www.w3.org/2000/svg">
-      <g class="ep-circle--container" :class="{ 'ep-reverse': reverse }">
+      <g class="ep-circle--container">
         <defs>
           <gradient v-if="isColorGradient" :color="color" type="progress" :id="_uid" />
           <gradient v-if="isColorFillGradient" :color="colorFill" type="progress-fill" :id="_uid" />
@@ -76,12 +76,12 @@ export default {
   justify-content: center;
   align-items: center;
   position: absolute;
+  &.ep-reverse {
+    transform: scaleX(-1);
+  }
 }
 g.ep-circle--container {
   transition: inherit;
   transform-origin: 50% 50%;
-  &.ep-reverse {
-    transform: scaleX(-1);
-  }
 }
 </style>
diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js
index 89d2dfe..63e1dd7 100644
--- a/tests/unit/container.spec.js
+++ b/tests/unit/container.spec.js
@@ -34,8 +34,8 @@ describe("[ EllipseProgressContainer.vue ]", () => {
     const size = 250;
     const wrapper = factory({ size });
     it("sets the size of the container correctly", () => {
-      expect(wrapper.element.style.maxWidth).to.equal(`${size}px`);
-      expect(wrapper.element.style.maxHeight).to.equal(`${size}px`);
+      expect(wrapper.element.style.width).to.equal(`${size}px`);
+      expect(wrapper.element.style.height).to.equal(`${size}px`);
     });
 
     it("sets the size of the svg container correctly", () => {

From f03e3898142cb781013e6d96122ad2a9ac2a639e Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 21:40:57 +0200
Subject: [PATCH 35/50] fix: clean up dot component

---
 src/App.vue                          |  3 ++-
 src/components/Circle/CircleDot.vue  | 11 +----------
 tests/unit/circle/circle-dot.spec.js |  7 -------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e776146..a176ef5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,7 +49,8 @@
           :loading="loading"
           dot="50 red"
           :reverse="true"
-          line-mode="in"
+          line-mode="in 10"
+          half
         >
           <template v-slot:default="{ counterTick }">
             <span
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index e5a7049..c3aa176 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="ep-circle--progress__dot-container"
-    :class="dotContainerClasses"
-    :width="dotContainerSize"
-    :height="dotContainerSize"
-    :style="dotContainerStyle"
-  >
+  <div class="ep-circle--progress__dot-container" :class="dotContainerClasses" :style="dotContainerStyle">
     <div>
       <span class="ep-circle--progress__dot" :class="{ 'ep-hidden': isHidden }" :style="dotStyle"> </span>
     </div>
@@ -21,9 +15,6 @@ export default {
   name: "CircleDot",
   mixins: [CircleMixin],
   computed: {
-    dotContainerPosition() {
-      return (this.size - this.radius * 2 - this.dotSize) / 2;
-    },
     dotContainerSize() {
       return this.radius * 2 + this.dotSize;
     },
diff --git a/tests/unit/circle/circle-dot.spec.js b/tests/unit/circle/circle-dot.spec.js
index 3c02a1d..1a456eb 100644
--- a/tests/unit/circle/circle-dot.spec.js
+++ b/tests/unit/circle/circle-dot.spec.js
@@ -125,13 +125,6 @@ describe("#dot", () => {
       }
     });
 
-    it(`calculates and applies the position of the dot container correctly | #dot = ${circleData.dot}`, () => {
-      const circleRadius = circleWrapper.vm.radius;
-      const xAndYPosition = (size - circleRadius * 2) / 2 - parsedDotSize / 2;
-      expect(circleDotWrapper.element.getAttribute("y")).to.equal(`${xAndYPosition}`);
-      expect(circleDotWrapper.element.getAttribute("x")).to.equal(`${xAndYPosition}`);
-    });
-
     it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
       const circleRadius = circleWrapper.vm.radius;
       const containerSize = circleRadius * 2 + parsedDotSize;

From 3955fee364fe2d20fca34555d47e502848a0cc2b Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 21:45:53 +0200
Subject: [PATCH 36/50] tes: fix dot tests

---
 tests/unit/circle/circle-dot.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/unit/circle/circle-dot.spec.js b/tests/unit/circle/circle-dot.spec.js
index 1a456eb..b146118 100644
--- a/tests/unit/circle/circle-dot.spec.js
+++ b/tests/unit/circle/circle-dot.spec.js
@@ -112,7 +112,7 @@ describe("#dot", () => {
       expect(wrapper.findComponent(CircleDot).exists()).to.be.true;
     });
 
-    it(`applies the size of the dot correctly | #dot = ${circleData.dot}`, () => {
+    it(`applies the width of the dot correctly | #dot = ${circleData.dot}`, () => {
       expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
     });
 
@@ -128,8 +128,8 @@ describe("#dot", () => {
     it(`calculates and applies the size of the dot container correctly | #dot = ${circleData.dot}`, () => {
       const circleRadius = circleWrapper.vm.radius;
       const containerSize = circleRadius * 2 + parsedDotSize;
-      expect(circleDotWrapper.element.getAttribute("width")).to.equal(`${containerSize}`);
-      expect(circleDotWrapper.element.getAttribute("height")).to.equal(`${containerSize}`);
+      expect(circleDotWrapper.element.style.width).to.equal(`${containerSize}px`);
+      expect(circleDotWrapper.element.style.height).to.equal(`${containerSize}px`);
     });
   }
 });

From 096d21917481cc51da9b050fdc4974d4966d99fa Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 21:55:16 +0200
Subject: [PATCH 37/50] tes: extend dot tests

---
 tests/unit/circle/circle-dot.spec.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/tests/unit/circle/circle-dot.spec.js b/tests/unit/circle/circle-dot.spec.js
index b146118..9dd870d 100644
--- a/tests/unit/circle/circle-dot.spec.js
+++ b/tests/unit/circle/circle-dot.spec.js
@@ -86,6 +86,23 @@ describe("#dot", () => {
     expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${halfRotationStart}deg)`);
   });
 
+  it(`applies custom style to dot`, async () => {
+    const wrapper = factory(
+      { progress, dot: { size: 10, background: "red", border: "2px solid green" }, animation: "default 0 1000" },
+      CircleDot
+    ).find("span.ep-circle--progress__dot");
+    expect(wrapper.element.style.background).to.equal("red");
+    expect(wrapper.element.style.border).to.equal("2px solid green");
+  });
+
+  it(`do not apply custom height to dot`, async () => {
+    const wrapper = factory(
+      { progress, dot: { size: 10, height: "20px" }, animation: "default 0 1000" },
+      CircleDot
+    ).find("span.ep-circle--progress__dot");
+    expect(wrapper.element.style.height).to.equal("10px");
+  });
+
   const data = [
     { progress, thickness, dot: 5 },
     { progress, thickness, dot: "5" },
@@ -112,6 +129,10 @@ describe("#dot", () => {
       expect(wrapper.findComponent(CircleDot).exists()).to.be.true;
     });
 
+    it(`applies the height of the dot correctly | #dot = ${circleData.dot}`, () => {
+      expect(circleDotSpanWrapper.element.style.height).to.equal(`${parsedDotSize}px`);
+    });
+
     it(`applies the width of the dot correctly | #dot = ${circleData.dot}`, () => {
       expect(circleDotSpanWrapper.element.style.width).to.equal(`${parsedDotSize}px`);
     });

From a1a75396c951e1fb9e3c0290cb34d356656f19ff Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 12 Sep 2020 22:22:08 +0200
Subject: [PATCH 38/50] chore: run linter

---
 src/App.vue                      | 11 ++++++-----
 src/components/Circle/Circle.vue |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a176ef5..e2827bd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,8 @@
         </label>
         <label for="determinate">
           Determinate
-          <input id="determinate" type="checkbox" v-model="circles[0].determinate" />
+          <input id="determinate" type="checkbox" v-model="determinate" />
+          <input id="determinate1" type="checkbox" v-model="circles[0].determinate" />
           <input id="determinate2" type="checkbox" v-model="determinate" />
         </label>
       </div>
@@ -42,15 +43,15 @@
       </div>-->
       <div style="border: 1px solid red; display: inline-block;">
         <vue-ellipse-progress
-          :size="600"
+          :size="200"
           :progress="progress"
           :legendValue="1315.56"
           animation="rs 2000 500"
           :loading="loading"
           dot="50 red"
           :reverse="true"
-          line-mode="in 10"
-          half
+          line-mode="out"
+          :determinate="determinate"
         >
           <template v-slot:default="{ counterTick }">
             <span
@@ -63,7 +64,7 @@
           </template>
         </vue-ellipse-progress>
       </div>
-      <vue-ellipse-progress :size="600" :progress="progress" :legend-value="125.1">
+      <vue-ellipse-progress dot="20 green" :loading="loading" :size="200" :progress="progress" :legend-value="125.1">
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>
         </template>
diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 782f58d..9f788cc 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -25,7 +25,7 @@
     </circle>
     <fade-in-transition>
       <g v-if="showDeterminate">
-        <g style="opacity: 0.45;">
+        <g style="opacity: 1;">
           <circle
             class="ep-circle--determinate animation__loading"
             :r="radius"

From 2c25278757ca9c24ecb5a59e17c4dd3f42f389ad Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 13 Sep 2020 19:14:11 +0200
Subject: [PATCH 39/50] fix: set correct determinate loader opacity

---
 src/components/Circle/Circle.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 9f788cc..782f58d 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -25,7 +25,7 @@
     </circle>
     <fade-in-transition>
       <g v-if="showDeterminate">
-        <g style="opacity: 1;">
+        <g style="opacity: 0.45;">
           <circle
             class="ep-circle--determinate animation__loading"
             :r="radius"

From aea6c8510bab51492ff75edb8bc36d5ca5e166b2 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 13 Sep 2020 19:22:30 +0200
Subject: [PATCH 40/50] release: v1.3.0-beta.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 58a4f09..1fb3020 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.5",
+  "version": "1.3.0-beta.6",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",

From f1cff4a8ba66f7446068d6a823c258c035cccafa Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 13 Sep 2020 20:16:57 +0200
Subject: [PATCH 41/50] fix: reuse element for animation and do not apply
 loading animation to progress circle

---
 src/components/Circle/Circle.vue     | 6 +++---
 src/components/Circle/HalfCircle.vue | 6 +++---
 src/components/Circle/circleMixin.js | 9 +++++----
 src/styles/animationsUsage.scss      | 4 ++--
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 782f58d..fc9159b 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -24,10 +24,10 @@
     >
     </circle>
     <fade-in-transition>
-      <g v-if="showDeterminate">
-        <g style="opacity: 0.45;">
+      <g v-if="isLoading">
+        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
           <circle
-            class="ep-circle--determinate animation__loading"
+            class="ep-circle--loading animation__loading"
             :r="radius"
             :cx="position"
             :cy="position"
diff --git a/src/components/Circle/HalfCircle.vue b/src/components/Circle/HalfCircle.vue
index 5bc8385..8ede627 100644
--- a/src/components/Circle/HalfCircle.vue
+++ b/src/components/Circle/HalfCircle.vue
@@ -23,11 +23,11 @@
     >
     </path>
     <fade-in-transition>
-      <g v-if="showDeterminate">
-        <g style="opacity: 0.6;">
+      <g v-if="isLoading">
+        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
           <path
             :stroke-width="computedThickness"
-            class="ep-half-circle--determinate animation__loading"
+            class="ep-half-circle--loading animation__loading"
             :d="path"
             :fill="computedColorFill"
             :stroke="computedColor"
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 86da4f8..133be21 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -143,7 +143,6 @@ export default {
         `animation__${
           !this.loading && this.dataIsAvailable && this.isInitialized ? this.parsedAnimation.type : "none"
         }`,
-        `${this.loading ? "animation__loading" : ""}`,
       ];
     },
     animationDuration() {
@@ -235,10 +234,12 @@ export default {
 
     styles() {
       return {
+        transition: `${this.animationDuration}, opacity 0.3s`,
         strokeDashoffset: this.strokeDashOffset,
-        transitionDuration: this.animationDuration,
+        /* transitionDuration: this.animationDuration, */
         transitionTimingFunction: "ease-in-out",
         transformOrigin: this.transformOrigin,
+        opacity: this.loading ? 0 : 1,
         "--ep-circumference": this.circumference,
         "--ep-negative-circumference": this.getNegativeCircumference(),
         "--ep-double-circumference": this.getDoubleCircumference(),
@@ -252,8 +253,8 @@ export default {
       };
     },
 
-    showDeterminate() {
-      return this.determinate && !this.loading && this.dataIsAvailable;
+    isLoading() {
+      return (this.determinate || this.loading) && this.dataIsAvailable;
     },
   },
   methods: {
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 5417e71..8082ee8 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -17,7 +17,7 @@
   }
 }
 
-.ep-circle--progress, .ep-circle--determinate {
+.ep-circle--loading {
   &.animation__loading {
     animation-name: ep-progress--loading, ep-progress--loading__rotation;
     animation-iteration-count: infinite !important;
@@ -26,7 +26,7 @@
   }
 }
 
-.ep-half-circle--progress, .ep-half-circle--determinate {
+.ep-half-circle--loading {
   &.animation__loading {
     animation-name: ep-half-progress--loading;
     animation-iteration-count: infinite !important;

From 60ea0f4e37f7dcc32d6042d9ec86699c722932a9 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 13 Sep 2020 20:40:16 +0200
Subject: [PATCH 42/50] fix: make smooth animation on states changes

---
 src/App.vue                          | 17 ++++++++++++++---
 src/components/Circle/Circle.vue     |  2 +-
 src/components/Circle/CircleDot.vue  |  4 ++--
 src/components/Circle/HalfCircle.vue |  2 +-
 src/components/Circle/circleMixin.js |  3 +--
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e2827bd..c16412b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,9 +48,10 @@
           :legendValue="1315.56"
           animation="rs 2000 500"
           :loading="loading"
-          dot="50 red"
+          dot="30 red"
           :reverse="true"
-          line-mode="out"
+          line-mode="out 10"
+          :no-data="noData"
           :determinate="determinate"
         >
           <template v-slot:default="{ counterTick }">
@@ -64,7 +65,17 @@
           </template>
         </vue-ellipse-progress>
       </div>
-      <vue-ellipse-progress dot="20 green" :loading="loading" :size="200" :progress="progress" :legend-value="125.1">
+      <vue-ellipse-progress
+        dot="20 green"
+        :loading="loading"
+        :size="200"
+        :progress="progress"
+        :legend-value="125.1"
+        half
+        line-mode="out 20"
+        :no-data="noData"
+        :determinate="determinate"
+      >
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>
         </template>
diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index fc9159b..78c1be9 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -17,7 +17,7 @@
       :fill="computedEmptyColorFill"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
       :style="{
-        transitionDuration: styles.transitionDuration,
+        transitionDuration: animationDuration,
         transitionTimingFunction: styles.transitionTimingFunction,
       }"
       :stroke-width="computedEmptyThickness"
diff --git a/src/components/Circle/CircleDot.vue b/src/components/Circle/CircleDot.vue
index c3aa176..94ac3c5 100644
--- a/src/components/Circle/CircleDot.vue
+++ b/src/components/Circle/CircleDot.vue
@@ -32,7 +32,7 @@ export default {
         width: `${this.dotContainerSize}px`,
         height: `${this.dotContainerSize}px`,
         transform: `rotate(${this.dotContainerRotation}deg)`,
-        transitionDuration: this.loading ? "0s" : this.animationDuration,
+        transitionDuration: this.loading || !this.dataIsAvailable ? "0s" : this.animationDuration,
         transitionTimingFunction: "ease-in-out",
         "animation-duration": this.animationDuration,
         "--ep-dot-start": `${this.dotStart}deg`,
@@ -63,7 +63,7 @@ export default {
         width: `${this.dotSize}px`,
         backgroundColor: this.dotColor,
         ...this.dot,
-        transitionDuration: this.loading ? "0s" : this.animationDuration,
+        transitionDuration: this.loading || !this.dataIsAvailable ? "0s" : this.animationDuration,
         height: `${this.dotSize}px`,
       };
     },
diff --git a/src/components/Circle/HalfCircle.vue b/src/components/Circle/HalfCircle.vue
index 8ede627..58fee3c 100644
--- a/src/components/Circle/HalfCircle.vue
+++ b/src/components/Circle/HalfCircle.vue
@@ -16,7 +16,7 @@
       :stroke-linecap="line"
       :stroke-dasharray="emptyDasharray"
       :style="{
-        transitionDuration: styles.transitionDuration,
+        transitionDuration: animationDuration,
         transitionTimingFunction: styles.transitionTimingFunction,
       }"
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index 133be21..3ef914b 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -236,10 +236,9 @@ export default {
       return {
         transition: `${this.animationDuration}, opacity 0.3s`,
         strokeDashoffset: this.strokeDashOffset,
-        /* transitionDuration: this.animationDuration, */
         transitionTimingFunction: "ease-in-out",
         transformOrigin: this.transformOrigin,
-        opacity: this.loading ? 0 : 1,
+        opacity: this.loading || !this.dataIsAvailable ? 0 : 1,
         "--ep-circumference": this.circumference,
         "--ep-negative-circumference": this.getNegativeCircumference(),
         "--ep-double-circumference": this.getDoubleCircumference(),

From 4417edfec5a54f5348efc88aea5c3256361bb77a Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 13 Sep 2020 20:51:46 +0200
Subject: [PATCH 43/50] fix: clean up loading circle computed styles

---
 src/components/Circle/Circle.vue     | 7 ++++++-
 src/components/Circle/HalfCircle.vue | 8 +++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 78c1be9..2a7f8af 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -36,7 +36,12 @@
             :stroke-width="computedThickness"
             :stroke-linecap="line"
             :stroke-dasharray="circumference"
-            :style="styles"
+            :style="{
+              transitionTimingFunction: styles.transitionTimingFunction,
+              transformOrigin: styles.transformOrigin,
+              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
+              '--ep-circumference': styles['--ep-circumference'],
+            }"
           >
           </circle>
         </g>
diff --git a/src/components/Circle/HalfCircle.vue b/src/components/Circle/HalfCircle.vue
index 58fee3c..4964321 100644
--- a/src/components/Circle/HalfCircle.vue
+++ b/src/components/Circle/HalfCircle.vue
@@ -33,7 +33,13 @@
             :stroke="computedColor"
             :stroke-dasharray="circumference"
             :stroke-linecap="line"
-            :style="styles"
+            :style="{
+              transitionTimingFunction: styles.transitionTimingFunction,
+              transformOrigin: styles.transformOrigin,
+              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
+              '--ep-circumference': styles['--ep-circumference'],
+              '--ep-negative-circumference': styles['--ep-negative-circumference'],
+            }"
           >
           </path>
         </g>

From 2c963e5ee9d8e46130ec1ffaf4d4e9054fac3a99 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 13 Sep 2020 20:58:16 +0200
Subject: [PATCH 44/50] fix: simplify loading circle structure

---
 src/components/Circle/Circle.vue     | 39 ++++++++++++++--------------
 src/components/Circle/HalfCircle.vue | 37 +++++++++++++-------------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 2a7f8af..4d35a78 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -25,26 +25,25 @@
     </circle>
     <fade-in-transition>
       <g v-if="isLoading">
-        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
-          <circle
-            class="ep-circle--loading animation__loading"
-            :r="radius"
-            :cx="position"
-            :cy="position"
-            fill="transparent"
-            :stroke="computedColor"
-            :stroke-width="computedThickness"
-            :stroke-linecap="line"
-            :stroke-dasharray="circumference"
-            :style="{
-              transitionTimingFunction: styles.transitionTimingFunction,
-              transformOrigin: styles.transformOrigin,
-              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
-              '--ep-circumference': styles['--ep-circumference'],
-            }"
-          >
-          </circle>
-        </g>
+        <circle
+          class="ep-circle--loading animation__loading"
+          :r="radius"
+          :cx="position"
+          :cy="position"
+          fill="transparent"
+          :stroke="computedColor"
+          :stroke-width="computedThickness"
+          :stroke-linecap="line"
+          :stroke-dasharray="circumference"
+          :style="{
+            opacity: `${loading ? 1 : 0.45}`,
+            transitionTimingFunction: styles.transitionTimingFunction,
+            transformOrigin: styles.transformOrigin,
+            '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
+            '--ep-circumference': styles['--ep-circumference'],
+          }"
+        >
+        </circle>
       </g>
     </fade-in-transition>
     <circle
diff --git a/src/components/Circle/HalfCircle.vue b/src/components/Circle/HalfCircle.vue
index 4964321..29dc903 100644
--- a/src/components/Circle/HalfCircle.vue
+++ b/src/components/Circle/HalfCircle.vue
@@ -24,25 +24,24 @@
     </path>
     <fade-in-transition>
       <g v-if="isLoading">
-        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
-          <path
-            :stroke-width="computedThickness"
-            class="ep-half-circle--loading animation__loading"
-            :d="path"
-            :fill="computedColorFill"
-            :stroke="computedColor"
-            :stroke-dasharray="circumference"
-            :stroke-linecap="line"
-            :style="{
-              transitionTimingFunction: styles.transitionTimingFunction,
-              transformOrigin: styles.transformOrigin,
-              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
-              '--ep-circumference': styles['--ep-circumference'],
-              '--ep-negative-circumference': styles['--ep-negative-circumference'],
-            }"
-          >
-          </path>
-        </g>
+        <path
+          :stroke-width="computedThickness"
+          class="ep-half-circle--loading animation__loading"
+          :d="path"
+          :fill="computedColorFill"
+          :stroke="computedColor"
+          :stroke-dasharray="circumference"
+          :stroke-linecap="line"
+          :style="{
+            opacity: `${loading ? 1 : 0.45}`,
+            transitionTimingFunction: styles.transitionTimingFunction,
+            transformOrigin: styles.transformOrigin,
+            '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
+            '--ep-circumference': styles['--ep-circumference'],
+            '--ep-negative-circumference': styles['--ep-negative-circumference'],
+          }"
+        >
+        </path>
       </g>
     </fade-in-transition>
 

From 742dbee881aff1b562e66de08fbed1ec4c66610e Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sun, 13 Sep 2020 22:05:16 +0200
Subject: [PATCH 45/50] fix: simplify loading animation for half circle

---
 src/components/Circle/Circle.vue     | 39 ++++++++++++++--------------
 src/components/Circle/HalfCircle.vue | 37 +++++++++++++-------------
 src/styles/animations.scss           | 19 +++++++++++++-
 src/styles/animationsUsage.scss      |  3 +--
 4 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 4d35a78..2a7f8af 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -25,25 +25,26 @@
     </circle>
     <fade-in-transition>
       <g v-if="isLoading">
-        <circle
-          class="ep-circle--loading animation__loading"
-          :r="radius"
-          :cx="position"
-          :cy="position"
-          fill="transparent"
-          :stroke="computedColor"
-          :stroke-width="computedThickness"
-          :stroke-linecap="line"
-          :stroke-dasharray="circumference"
-          :style="{
-            opacity: `${loading ? 1 : 0.45}`,
-            transitionTimingFunction: styles.transitionTimingFunction,
-            transformOrigin: styles.transformOrigin,
-            '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
-            '--ep-circumference': styles['--ep-circumference'],
-          }"
-        >
-        </circle>
+        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
+          <circle
+            class="ep-circle--loading animation__loading"
+            :r="radius"
+            :cx="position"
+            :cy="position"
+            fill="transparent"
+            :stroke="computedColor"
+            :stroke-width="computedThickness"
+            :stroke-linecap="line"
+            :stroke-dasharray="circumference"
+            :style="{
+              transitionTimingFunction: styles.transitionTimingFunction,
+              transformOrigin: styles.transformOrigin,
+              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
+              '--ep-circumference': styles['--ep-circumference'],
+            }"
+          >
+          </circle>
+        </g>
       </g>
     </fade-in-transition>
     <circle
diff --git a/src/components/Circle/HalfCircle.vue b/src/components/Circle/HalfCircle.vue
index 29dc903..4964321 100644
--- a/src/components/Circle/HalfCircle.vue
+++ b/src/components/Circle/HalfCircle.vue
@@ -24,24 +24,25 @@
     </path>
     <fade-in-transition>
       <g v-if="isLoading">
-        <path
-          :stroke-width="computedThickness"
-          class="ep-half-circle--loading animation__loading"
-          :d="path"
-          :fill="computedColorFill"
-          :stroke="computedColor"
-          :stroke-dasharray="circumference"
-          :stroke-linecap="line"
-          :style="{
-            opacity: `${loading ? 1 : 0.45}`,
-            transitionTimingFunction: styles.transitionTimingFunction,
-            transformOrigin: styles.transformOrigin,
-            '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
-            '--ep-circumference': styles['--ep-circumference'],
-            '--ep-negative-circumference': styles['--ep-negative-circumference'],
-          }"
-        >
-        </path>
+        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
+          <path
+            :stroke-width="computedThickness"
+            class="ep-half-circle--loading animation__loading"
+            :d="path"
+            :fill="computedColorFill"
+            :stroke="computedColor"
+            :stroke-dasharray="circumference"
+            :stroke-linecap="line"
+            :style="{
+              transitionTimingFunction: styles.transitionTimingFunction,
+              transformOrigin: styles.transformOrigin,
+              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
+              '--ep-circumference': styles['--ep-circumference'],
+              '--ep-negative-circumference': styles['--ep-negative-circumference'],
+            }"
+          >
+          </path>
+        </g>
       </g>
     </fade-in-transition>
 
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 17604f9..73e5de9 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -15,7 +15,7 @@
   }
 }
 
-@mixin ep-half-progress--loading ($offset, $circumference, $double_circumference) {
+/*@mixin ep-half-progress--loading ($circumference, $double_circumference) {
   @keyframes ep-half-progress--loading {
     0% {
       opacity: 0.5;
@@ -38,6 +38,23 @@
       stroke-dashoffset: $circumference;
     }
   }
+}*/
+
+@mixin ep-half-progress--loading ($circumference) {
+  @keyframes ep-half-progress--loading {
+    0% {
+      opacity: 0.5;
+      stroke-dashoffset: $circumference;
+    }
+    50% {
+      opacity: 0.8;
+      stroke-dashoffset: 0;
+    }
+    100% {
+      opacity: 0.5;
+      stroke-dashoffset: $circumference;
+    }
+  }
 }
 
 @mixin ep-progress--loading__rotation {
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
index 8082ee8..f1e8704 100644
--- a/src/styles/animationsUsage.scss
+++ b/src/styles/animationsUsage.scss
@@ -87,7 +87,6 @@
                 var(--ep-negative-circumference)
 );
 @include ep-progress--loading(var(--ep-loading-stroke-offset), var(--ep-circumference));
-@include ep-half-progress--loading(var(--ep-loading-stroke-offset), var(--ep-circumference),
-                var(--ep-negative-circumference));
+@include ep-half-progress--loading(var(--ep-circumference));
 @include ep-progress--loading__rotation();
 @include ep-dot--init__rs(var(--ep-dot-start), var(--ep-dot-end), var(--ep-dot-360));

From d02264dd9fe8b345f1245afd1a35c121f144469a Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 18 Sep 2020 12:10:59 -0700
Subject: [PATCH 46/50] test: fix animation tests

---
 package-lock.json                          | 80 ++++++++++++++++++++++
 tests/unit/circle/circle-animation.spec.js |  6 +-
 2 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 19a5827..e45b86c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14474,6 +14474,86 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
+      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/mini-css-extract-plugin": "^0.9.1",
+        "chalk": "^3.0.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^1.2.3",
+        "merge-source-map": "^1.1.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/tests/unit/circle/circle-animation.spec.js b/tests/unit/circle/circle-animation.spec.js
index 85443a6..967ef15 100644
--- a/tests/unit/circle/circle-animation.spec.js
+++ b/tests/unit/circle/circle-animation.spec.js
@@ -64,19 +64,19 @@ const animationDurationTests = (container, circleClass, prefix = "circle | ") =>
   it(`${prefix} applies default @1000 duration value as transition and animation duration`, () => {
     const circleProgressWrapper = factory({}, container).find(circleClass);
 
-    expect(circleProgressWrapper.element.style.transitionDuration).to.equal("1000ms");
+    expect(circleProgressWrapper.element.style.transition).to.include("1000ms");
     expect(circleProgressWrapper.element.style.animationDuration).to.equal("1000ms");
   });
   it(`${prefix} applies provided duration value as transition and animation duration`, () => {
     const circleProgressWrapper = factory({ animation: "rs 500" }, container).find(circleClass);
 
-    expect(circleProgressWrapper.element.style.transitionDuration).to.equal("500ms");
+    expect(circleProgressWrapper.element.style.transition).to.include("500ms");
     expect(circleProgressWrapper.element.style.animationDuration).to.equal("500ms");
   });
   it(`${prefix} applies @0 duration value as transition and animation duration`, () => {
     const circleProgressWrapper = factory({ animation: "rs 0" }, container).find(circleClass);
 
-    expect(circleProgressWrapper.element.style.transitionDuration).to.equal("0ms");
+    expect(circleProgressWrapper.element.style.transition).to.include("0ms");
     expect(circleProgressWrapper.element.style.animationDuration).to.equal("0ms");
   });
 };

From 0c1ad493ea64bd3a780513b12372b9ed704160ba Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 18 Sep 2020 12:29:32 -0700
Subject: [PATCH 47/50] test: add test for transitions handling on state
 changes

---
 src/components/Circle/Circle.vue |  2 +-
 tests/unit/circle/circle.spec.js | 26 ++++++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 2a7f8af..3e05edc 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -25,7 +25,7 @@
     </circle>
     <fade-in-transition>
       <g v-if="isLoading">
-        <g :style="{ opacity: `${loading ? 1 : 0.45}` }">
+        <g class="ep-circle--loading__container" :style="{ opacity: `${loading ? 1 : 0.45}` }">
           <circle
             class="ep-circle--loading animation__loading"
             :r="radius"
diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js
index b961bf9..250369f 100644
--- a/tests/unit/circle/circle.spec.js
+++ b/tests/unit/circle/circle.spec.js
@@ -192,6 +192,9 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
     it("resets the progress circle animation class", () => {
       expect(circleProgressWrapper.classes()).to.not.include("animation__default");
     });
+    it("applies 0 opacity to progress circle", () => {
+      expect(circleProgressWrapper.element.style.opacity).to.equal("0");
+    });
   });
   describe("#loading", () => {
     const progress = 60;
@@ -208,8 +211,15 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
 
       expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${circumference}`);
     });
-    it("adds .animation__loading class to progress circle", () => {
-      expect(circleProgressWrapper.classes()).to.include("animation__loading");
+    it("applies 0 opacity to progress circle", () => {
+      expect(circleProgressWrapper.element.style.opacity).to.equal("0");
+    });
+    it("applies 1 opacity to loading circle container", () => {
+      const determinateCircleWrapper = wrapper.find(".ep-circle--loading__container");
+      expect(determinateCircleWrapper.element.style.opacity).to.equal("1");
+    });
+    it("renders the loading circle", () => {
+      expect(wrapper.find(".ep-circle--loading").exists()).to.be.true;
     });
   });
   describe("#determinate", () => {
@@ -223,15 +233,19 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
       determinate: true,
     });
 
-    it("shows the determinate loading circle", () => {
-      expect(wrapper.find(".ep-circle--determinate").exists()).to.be.true;
+    it("shows the loading circle", () => {
+      expect(wrapper.find(".animation__loading").exists()).to.be.true;
     });
-    it("applies same styles to determinate circle as to progress circle", () => {
-      const determinateCircleWrapper = wrapper.find(".ep-circle--determinate");
+    it("applies same styles to loading circle as to progress circle", () => {
+      const determinateCircleWrapper = wrapper.find(".animation__loading");
       expect(determinateCircleWrapper.element.getAttribute("stroke")).to.equal(`${color}`);
       expect(determinateCircleWrapper.element.getAttribute("stroke-width")).to.equal(`${thickness}`);
       expect(determinateCircleWrapper.element.getAttribute("fill")).to.equal("transparent");
     });
+    it("applies 0.45 opacity to loading circle container", () => {
+      const determinateCircleWrapper = wrapper.find(".ep-circle--loading__container");
+      expect(determinateCircleWrapper.element.style.opacity).to.equal("0.45");
+    });
   });
   describe("#angle", () => {
     const circleWrapper = factory({ progress: 50 });

From 1651ee09e47270e314c8563042cdd7deafb8e4a5 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Fri, 18 Sep 2020 12:36:45 -0700
Subject: [PATCH 48/50] release: v1.3.0-beta.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1fb3020..8692d1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.6",
+  "version": "1.3.0-beta.7",
   "private": false,
   "description": "A Vue.js component to create beautiful animated circular progress bars",
   "main": "./dist/vue-ellipse-progress.umd.min.js",

From bbd83a2312b658b4c5a261348b84377d3086c882 Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 19 Sep 2020 10:19:48 -0700
Subject: [PATCH 49/50] chore: bump deps

---
 package-lock.json | 948 ++++++++++++++++++++++++----------------------
 package.json      |  16 +-
 2 files changed, 500 insertions(+), 464 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e45b86c..f9fcf29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,39 +1,9 @@
 {
   "name": "vue-ellipse-progress",
-  "version": "1.3.0-beta.0",
+  "version": "1.3.0-beta.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@ant-design-vue/babel-helper-vue-transform-on": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@ant-design-vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.1.tgz",
-      "integrity": "sha512-dOAPf/tCM2lCG8FhvOMFBaOdMElMEGhOoocMXEWvHW2l1KIex+UibDcq4bdBEJpDMLrnbNOqci9E7P2dARP6lg==",
-      "dev": true
-    },
-    "@ant-design-vue/babel-plugin-jsx": {
-      "version": "1.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/@ant-design-vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.0-rc.1.tgz",
-      "integrity": "sha512-x7PfAHSs5/emIuey1Df7Bh/vJU27S9KBdufzoAA7kgwTpEpY85R7CXD9gl6sJFB7aG2pZpl4Tmm+FsHlzgp7fA==",
-      "dev": true,
-      "requires": {
-        "@ant-design-vue/babel-helper-vue-transform-on": "^1.0.0",
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/plugin-syntax-jsx": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@babel/types": "^7.0.0",
-        "camelcase": "^6.0.0",
-        "html-tags": "^3.1.0",
-        "svg-tags": "^1.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
-          "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
-          "dev": true
-        }
-      }
-    },
     "@babel/code-frame": {
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
@@ -55,19 +25,19 @@
       }
     },
     "@babel/core": {
-      "version": "7.11.4",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.4.tgz",
-      "integrity": "sha512-5deljj5HlqRXN+5oJTY7Zs37iH3z3b++KjiKtIsJy1NrjOOVSEaJHEetLBhyu0aQOSNNZ/0IuEAan9GzRuDXHg==",
+      "version": "7.11.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.6.tgz",
+      "integrity": "sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.11.4",
+        "@babel/generator": "^7.11.6",
         "@babel/helper-module-transforms": "^7.11.0",
         "@babel/helpers": "^7.10.4",
-        "@babel/parser": "^7.11.4",
+        "@babel/parser": "^7.11.5",
         "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.11.0",
-        "@babel/types": "^7.11.0",
+        "@babel/traverse": "^7.11.5",
+        "@babel/types": "^7.11.5",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.1",
@@ -88,12 +58,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
-          "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
+          "version": "7.11.6",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz",
+          "integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.11.5",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
@@ -139,9 +109,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -156,26 +126,26 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz",
+          "integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
+            "@babel/generator": "^7.11.5",
             "@babel/helper-function-name": "^7.10.4",
             "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+            "@babel/parser": "^7.11.5",
+            "@babel/types": "^7.11.5",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -207,9 +177,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -230,9 +200,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -319,9 +289,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -336,9 +306,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -411,9 +381,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -428,9 +398,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -450,9 +420,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -492,9 +462,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -514,9 +484,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -536,9 +506,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -593,9 +563,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -610,9 +580,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -632,9 +602,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -692,9 +662,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -709,9 +679,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -743,12 +713,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
-          "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
+          "version": "7.11.6",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz",
+          "integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.11.5",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
@@ -794,9 +764,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -811,26 +781,26 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz",
+          "integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
+            "@babel/generator": "^7.11.5",
             "@babel/helper-function-name": "^7.10.4",
             "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+            "@babel/parser": "^7.11.5",
+            "@babel/types": "^7.11.5",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -871,9 +841,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -888,9 +858,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -910,9 +880,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -959,12 +929,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
-          "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
+          "version": "7.11.6",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz",
+          "integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.11.5",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
@@ -1010,9 +980,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -1027,26 +997,26 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz",
+          "integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
+            "@babel/generator": "^7.11.5",
             "@babel/helper-function-name": "^7.10.4",
             "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+            "@babel/parser": "^7.11.5",
+            "@babel/types": "^7.11.5",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -1077,12 +1047,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
-          "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
+          "version": "7.11.6",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz",
+          "integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.11.0",
+            "@babel/types": "^7.11.5",
             "jsesc": "^2.5.1",
             "source-map": "^0.5.0"
           }
@@ -1128,9 +1098,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -1145,26 +1115,26 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
-          "integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz",
+          "integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.11.0",
+            "@babel/generator": "^7.11.5",
             "@babel/helper-function-name": "^7.10.4",
             "@babel/helper-split-export-declaration": "^7.11.0",
-            "@babel/parser": "^7.11.0",
-            "@babel/types": "^7.11.0",
+            "@babel/parser": "^7.11.5",
+            "@babel/types": "^7.11.5",
             "debug": "^4.1.0",
             "globals": "^11.1.0",
             "lodash": "^4.17.19"
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -1565,9 +1535,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -1582,9 +1552,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -1701,9 +1671,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.11.4",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
-          "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
+          "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
           "dev": true
         },
         "@babel/template": {
@@ -1718,9 +1688,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -1841,9 +1811,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -1881,9 +1851,9 @@
       }
     },
     "@babel/plugin-transform-runtime": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.11.0.tgz",
-      "integrity": "sha512-LFEsP+t3wkYBlis8w6/kmnd6Kb1dxTd+wGJ8MlxTGzQo//ehtqlVL4S9DNUa53+dtPSQobN2CXx4d81FqC58cw==",
+      "version": "7.11.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.11.5.tgz",
+      "integrity": "sha512-9aIoee+EhjySZ6vY5hnLjigHzunBlscx9ANKutkeWTJTx6m5Rbq6Ic01tLvO54lSusR+BxV7u4UDdCmXv5aagg==",
       "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.10.4",
@@ -1960,9 +1930,9 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.0.tgz",
-      "integrity": "sha512-2u1/k7rG/gTh02dylX2kL3S0IJNF+J6bfDSp4DI2Ma8QN6Y9x9pmAax59fsCk6QUQG0yqH47yJWA+u1I1LccAg==",
+      "version": "7.11.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.5.tgz",
+      "integrity": "sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==",
       "dev": true,
       "requires": {
         "@babel/compat-data": "^7.11.0",
@@ -2027,7 +1997,7 @@
         "@babel/plugin-transform-unicode-escapes": "^7.10.4",
         "@babel/plugin-transform-unicode-regex": "^7.10.4",
         "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.11.0",
+        "@babel/types": "^7.11.5",
         "browserslist": "^4.12.0",
         "core-js-compat": "^3.6.2",
         "invariant": "^2.2.2",
@@ -2036,9 +2006,9 @@
       },
       "dependencies": {
         "@babel/types": {
-          "version": "7.11.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.0.tgz",
-          "integrity": "sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==",
+          "version": "7.11.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
+          "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
@@ -2049,9 +2019,9 @@
       }
     },
     "@babel/preset-modules": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.3.tgz",
-      "integrity": "sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
@@ -2127,6 +2097,104 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@eslint/eslintrc": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.1.3.tgz",
+      "integrity": "sha512-4YVwPkANLeNtRjMekzux1ci8hIaH5eGKktGqR0d3LWsKNn5B2X/1Z6Trxy7jQXl9EBGE6Yj02O+t09FMeRllaA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^12.1.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "lodash": "^4.17.19",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
+          "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
+          "dev": true
+        },
+        "ajv": {
+          "version": "6.12.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
+          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        },
+        "espree": {
+          "version": "7.3.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz",
+          "integrity": "sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==",
+          "dev": true,
+          "requires": {
+            "acorn": "^7.4.0",
+            "acorn-jsx": "^5.2.0",
+            "eslint-visitor-keys": "^1.3.0"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "globals": {
+          "version": "12.4.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.8.1"
+          }
+        },
+        "import-fresh": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
+        }
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2355,9 +2423,9 @@
       }
     },
     "@types/express": {
-      "version": "4.17.7",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.7.tgz",
-      "integrity": "sha512-dCOT5lcmV/uC2J9k0rPafATeeyz+99xTt54ReX11/LObZgfzJqZNcW27zGhYyX+9iSEGXGt5qLPwRSvBZcLvtQ==",
+      "version": "4.17.8",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.8.tgz",
+      "integrity": "sha512-wLhcKh3PMlyA2cNAB9sjM1BntnhPMiM0JOBwPBqttjHev2428MLEB4AYVN+d8s2iyCVZac+o41Pflm/ZH5vLXQ==",
       "dev": true,
       "requires": {
         "@types/body-parser": "*",
@@ -2367,9 +2435,9 @@
       }
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.9",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.9.tgz",
-      "integrity": "sha512-DG0BYg6yO+ePW+XoDENYz8zhNGC3jDDEpComMYn7WJc4mY1Us8Rw9ax2YhJXxpyk2SF47PQAoQ0YyVT1a0bEkA==",
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.12.tgz",
+      "integrity": "sha512-EaEdY+Dty1jEU7U6J4CUWwxL+hyEGMkO5jan5gplfegUgCUsIUWqXxqw47uGjimeT4Qgkz/XUfwoau08+fgvKA==",
       "dev": true,
       "requires": {
         "@types/node": "*",
@@ -2408,9 +2476,9 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
-      "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+      "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
       "dev": true
     },
     "@types/json5": {
@@ -2448,9 +2516,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "14.6.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.6.0.tgz",
-      "integrity": "sha512-mikldZQitV94akrc4sCcSjtJfsTKt4p+e/s0AGscVA6XArQ9kFclP+ZiYUMnq987rc6QlYxXv/EivqlfSLxpKA==",
+      "version": "14.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.1.tgz",
+      "integrity": "sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -2466,9 +2534,9 @@
       "dev": true
     },
     "@types/qs": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.4.tgz",
-      "integrity": "sha512-+wYo+L6ZF6BMoEjtf8zB2esQsqdV6WsjRK/GP9WOgLPrq87PbNWgIxS76dS5uvl/QXtHGakZmwTznIfcPXcKlQ==",
+      "version": "6.9.5",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
+      "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==",
       "dev": true
     },
     "@types/range-parser": {
@@ -2517,9 +2585,9 @@
       }
     },
     "@types/webpack": {
-      "version": "4.41.21",
-      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.21.tgz",
-      "integrity": "sha512-2j9WVnNrr/8PLAB5csW44xzQSJwS26aOnICsP3pSGCEdsu6KYtfQ6QJsVUKHWRnm1bL7HziJsfh5fHqth87yKA==",
+      "version": "4.41.22",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.22.tgz",
+      "integrity": "sha512-JQDJK6pj8OMV9gWOnN1dcLCyU9Hzs6lux0wBO4lr1+gyEhIBR9U3FMrz12t2GPkg110XAxEAw2WHF6g7nZIbRQ==",
       "dev": true,
       "requires": {
         "@types/anymatch": "*",
@@ -2576,6 +2644,36 @@
       "integrity": "sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw==",
       "dev": true
     },
+    "@vue/babel-helper-vue-transform-on": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.0-rc.2.tgz",
+      "integrity": "sha512-1+7CwjQ0Kasml6rHoNQUmbISwqLNNfFVBUcZl6QBremUl296ZmLrVQPqJP5pyAAWjZke5bpI1hlj+LVVuT7Jcg==",
+      "dev": true
+    },
+    "@vue/babel-plugin-jsx": {
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.0-rc.3.tgz",
+      "integrity": "sha512-/Ibq0hoKsidnHWPhgRpjcjYhYcHpqEm2fiKVAPO88OXZNHGwaGgS4yXkC6TDEvlZep4mBDo+2S5T81wpbVh90Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@babel/types": "^7.0.0",
+        "@vue/babel-helper-vue-transform-on": "^1.0.0-rc.2",
+        "camelcase": "^6.0.0",
+        "html-tags": "^3.1.0",
+        "svg-tags": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
+          "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
+          "dev": true
+        }
+      }
+    },
     "@vue/babel-plugin-transform-vue-jsx": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.1.2.tgz",
@@ -2599,12 +2697,11 @@
       }
     },
     "@vue/babel-preset-app": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.4.tgz",
-      "integrity": "sha512-a+2s/lL3fE3h9/ekvpMVLhZTDjR3xt+jnpTwuQtEZ3KIuzFHxbmwAjueRZh6BKEGfB6kgZ3KqZHFX3vx/DRJ4w==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.6.tgz",
+      "integrity": "sha512-Eps83UNiBJeqlbpR9afYnhvjVLElVtA4fDLNuVUr1r3RbepoxWuq+mUTr3TBArPQebnAaDcrZaNHBWTLRbfo3A==",
       "dev": true,
       "requires": {
-        "@ant-design-vue/babel-plugin-jsx": "^1.0.0-0",
         "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
@@ -2615,6 +2712,7 @@
         "@babel/plugin-transform-runtime": "^7.11.0",
         "@babel/preset-env": "^7.11.0",
         "@babel/runtime": "^7.11.0",
+        "@vue/babel-plugin-jsx": "^1.0.0-0",
         "@vue/babel-preset-jsx": "^1.1.2",
         "babel-plugin-dynamic-import-node": "^2.3.3",
         "core-js": "^3.6.5",
@@ -2696,20 +2794,20 @@
       }
     },
     "@vue/cli-overlay": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.5.4.tgz",
-      "integrity": "sha512-nthli1n7rXaqaMZsH0KNdFqeYJxDOQNeaobp9SjeSdrpD1xAj/B0+RJMWQWIFsfdQn1AQP1UVMnkfdakTiLgxA==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.5.6.tgz",
+      "integrity": "sha512-8kFIdiErtGRlvKWJV0AcF6SXakQDxeuqqcMhWt3qIJxRH6aD33RTC37Q3KWuMsYryBZpEY3tNWGhS1d4spQu0g==",
       "dev": true
     },
     "@vue/cli-plugin-babel": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.4.tgz",
-      "integrity": "sha512-pXEzj/vkl3qOs/brhgxAu37hULCOHcOLzYKF747r1oudJq0aV1TOnQzTrP8aCE/A1CnW4Dbw/l9bt20a7btDcg==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.6.tgz",
+      "integrity": "sha512-jkeXIpvxg2Og+6igsck6qBMFwFN5poqbgDL7JEQP94DPRMAGt+AOoEz6Ultwvykd9lRDD/xLmzZ2MTeXvrpq4A==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.11.0",
-        "@vue/babel-preset-app": "^4.5.4",
-        "@vue/cli-shared-utils": "^4.5.4",
+        "@vue/babel-preset-app": "^4.5.6",
+        "@vue/cli-shared-utils": "^4.5.6",
         "babel-loader": "^8.1.0",
         "cache-loader": "^4.1.0",
         "thread-loader": "^2.1.3",
@@ -2717,12 +2815,12 @@
       }
     },
     "@vue/cli-plugin-eslint": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.4.tgz",
-      "integrity": "sha512-mWuhKtxMiAM70nPW/NnoWtf32YJoOPPt7SyNmsAjBKSRPcje+16Egl7BD8yuPKoF1MTkvs5CM/e7gp3AnSTFzQ==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.6.tgz",
+      "integrity": "sha512-maG3dy64pGVT9mMQq7KvP6kbBK6TeVgcj1aa1QwzT5yrw65E2So8bKMrEMEjy53b88bgR9jZ7gshOks00jrYsg==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.5.4",
+        "@vue/cli-shared-utils": "^4.5.6",
         "eslint-loader": "^2.2.1",
         "globby": "^9.2.0",
         "inquirer": "^7.1.0",
@@ -2731,21 +2829,21 @@
       }
     },
     "@vue/cli-plugin-router": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.5.4.tgz",
-      "integrity": "sha512-9/qRICZbq1qucq9M9z6jYT5UWNvcTu9BgHtXgsaK9gJsdmpxDIfD0SvW9nzZaHb8xxixvDRotMM/0Juw2oCsKQ==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.5.6.tgz",
+      "integrity": "sha512-QEqOGglg0JEKddZPuyiSnAzAVK7IzLrdTPCUegigzGSbUXDW4gQiltY3/2nij2q538YvdIM7JXtW1sUfy4MgHQ==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.5.4"
+        "@vue/cli-shared-utils": "^4.5.6"
       }
     },
     "@vue/cli-plugin-unit-mocha": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-mocha/-/cli-plugin-unit-mocha-4.5.4.tgz",
-      "integrity": "sha512-22OdBw2Ie1DDVpHcQlGr+wSQrm32xeNVDCy9wV6Ghndp6EguiWno37+PN3TxfejdTp+nqoCYhzP+A2a24JkvrQ==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-mocha/-/cli-plugin-unit-mocha-4.5.6.tgz",
+      "integrity": "sha512-qaMJgGfjgPA1hVVE6u8ry+hAtvU+fPQAKv5c4nYysLnvxnlLiAgEtK4dIRaH9GZQbA0/HVgRE5C0O7lAOxWapg==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.5.4",
+        "@vue/cli-shared-utils": "^4.5.6",
         "jsdom": "^15.2.1",
         "jsdom-global": "^3.0.2",
         "mocha": "^6.2.2",
@@ -2753,15 +2851,15 @@
       }
     },
     "@vue/cli-plugin-vuex": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.4.tgz",
-      "integrity": "sha512-X/F4E/dIRdiogKCdO4VGjUy5f4Fbxs7mu/gSi6Ubltle0eNE+tbBgLPH4r2g7GmHKNph4k39ikvfOMpXZcTFZg==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.6.tgz",
+      "integrity": "sha512-cWxj0jIhhupU+oFl0mc1St3ig9iF5F01XKwAhKEbvvuHR97zHxLd29My/vvcRwojZMy4aY320oJ+0ljoCIbueQ==",
       "dev": true
     },
     "@vue/cli-service": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.5.4.tgz",
-      "integrity": "sha512-30zcebYno9tMvGsvZsnSPtieBvU5H3CkRW1JgiBmPG3Fcxp3BGSAy82Dl1gOUEj1VsAUqXWKMWX6frkYldi8UA==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.5.6.tgz",
+      "integrity": "sha512-wl0rhjHSpy2Mc2zNU6sfhaUVNNaRzgXNfZMIpTZMO3wJalPMLuvGC3KLMaXcpvuI01zeQBmkEocAdhzay4lQ0w==",
       "dev": true,
       "requires": {
         "@intervolga/optimize-cssnano-plugin": "^1.0.5",
@@ -2770,10 +2868,10 @@
         "@types/minimist": "^1.2.0",
         "@types/webpack": "^4.0.0",
         "@types/webpack-dev-server": "^3.11.0",
-        "@vue/cli-overlay": "^4.5.4",
-        "@vue/cli-plugin-router": "^4.5.4",
-        "@vue/cli-plugin-vuex": "^4.5.4",
-        "@vue/cli-shared-utils": "^4.5.4",
+        "@vue/cli-overlay": "^4.5.6",
+        "@vue/cli-plugin-router": "^4.5.6",
+        "@vue/cli-plugin-vuex": "^4.5.6",
+        "@vue/cli-shared-utils": "^4.5.6",
         "@vue/component-compiler-utils": "^3.1.2",
         "@vue/preload-webpack-plugin": "^1.1.0",
         "@vue/web-component-wrapper": "^1.2.0",
@@ -2813,7 +2911,7 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
-        "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.3",
+        "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.7",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -3012,9 +3110,9 @@
       }
     },
     "@vue/cli-shared-utils": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.4.tgz",
-      "integrity": "sha512-7ZwAvGxl5szGuaJCc4jdPy/2Lb7oJvG847MDF+7pZ7FVl6bURwbUJjiUwL6DTxvpC4vch6B4tXfVvZFjzVP/bw==",
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.6.tgz",
+      "integrity": "sha512-p6ePDlEa7Xc0GEt99KDOCwPZtR7UnoEaZLMfwPYU5LAWkdCmtAw8HPAY/WWcjtoiaAkY4k9tz7ZehQasZ9mJxg==",
       "dev": true,
       "requires": {
         "@hapi/joi": "^15.0.1",
@@ -3112,9 +3210,9 @@
       "dev": true
     },
     "@vue/test-utils": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.4.tgz",
-      "integrity": "sha512-uIdDqFauzNJWlhltLSZU+P3uHEgUQczklSv2b1EKC7JzxBg9OY/5sx8UyuJwBD+zuxidhFZ4SjTuPgr8cdf63w==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.1.0.tgz",
+      "integrity": "sha512-M+3jtVqNYIrvzO5gaxogre5a5+96h0hN/dXw+5Lj0t+dp6fAhYcUjpLrC9j9cEEkl2Rcuh/gKYRUmR5N4vcqPw==",
       "dev": true,
       "requires": {
         "dom-event-types": "^1.0.0",
@@ -3316,9 +3414,9 @@
       "dev": true
     },
     "abab": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.4.tgz",
-      "integrity": "sha512-Eu9ELJWCz/c1e9gTiCY+FceWxcqzjYEbqMgtndnuSqZSUCOL73TWNK2mHfIj4Cw2E/ongOp+JISVNCmovt2KYQ==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
+      "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==",
       "dev": true
     },
     "abbrev": {
@@ -3372,9 +3470,9 @@
       "dev": true
     },
     "aggregate-error": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
-      "integrity": "sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
       "dev": true,
       "requires": {
         "clean-stack": "^2.0.0",
@@ -4135,15 +4233,15 @@
       }
     },
     "browserslist": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
-      "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.3.tgz",
+      "integrity": "sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001111",
-        "electron-to-chromium": "^1.3.523",
-        "escalade": "^3.0.2",
-        "node-releases": "^1.1.60"
+        "caniuse-lite": "^1.0.30001131",
+        "electron-to-chromium": "^1.3.570",
+        "escalade": "^3.1.0",
+        "node-releases": "^1.1.61"
       }
     },
     "buffer": {
@@ -4395,9 +4493,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001117",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001117.tgz",
-      "integrity": "sha512-4tY0Fatzdx59kYjQs+bNxUwZB03ZEBgVmJ1UkFPz/Q8OLiUUbjct2EdpnXj0fvFTPej2EkbPIG0w8BWsjAyk1Q==",
+      "version": "1.0.30001132",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001132.tgz",
+      "integrity": "sha512-zk5FXbnsmHa0Ktc/NOZJRr+ilXva+2KFJuRiQfnjkxJfV/7DYP5C27lSQF++/veCUzVWE5xecZnSBJjf6fSwJA==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
@@ -4704,9 +4802,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -5142,9 +5240,9 @@
       "dev": true
     },
     "copy-webpack-plugin": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz",
-      "integrity": "sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
+      "integrity": "sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==",
       "dev": true,
       "requires": {
         "cacache": "^12.0.3",
@@ -5157,7 +5255,7 @@
         "normalize-path": "^3.0.0",
         "p-limit": "^2.2.1",
         "schema-utils": "^1.0.0",
-        "serialize-javascript": "^2.1.2",
+        "serialize-javascript": "^4.0.0",
         "webpack-log": "^2.0.0"
       },
       "dependencies": {
@@ -5219,12 +5317,6 @@
             "ajv-keywords": "^3.1.0"
           }
         },
-        "serialize-javascript": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
-          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
-          "dev": true
-        },
         "slash": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -6040,9 +6132,9 @@
       },
       "dependencies": {
         "domelementtype": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
-          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
+          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
           "dev": true
         }
       }
@@ -6088,9 +6180,9 @@
       }
     },
     "dot-prop": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
-      "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
       "dev": true,
       "requires": {
         "is-obj": "^2.0.0"
@@ -6185,9 +6277,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.540",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.540.tgz",
-      "integrity": "sha512-IoGiZb8SMqTtkDYJtP8EtCdvv3VMtd1QoTlypO2RUBxRq/Wk0rU5IzhzhMckPaC9XxDqUvWsL0XKOBhTiYVN3w==",
+      "version": "1.3.570",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz",
+      "integrity": "sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==",
       "dev": true
     },
     "elliptic": {
@@ -6344,9 +6436,9 @@
       }
     },
     "escalade": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
-      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
+      "integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==",
       "dev": true
     },
     "escape-html": {
@@ -6384,12 +6476,13 @@
       }
     },
     "eslint": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.7.0.tgz",
-      "integrity": "sha512-1KUxLzos0ZVsyL81PnRN335nDtQ8/vZUD6uMtWbF+5zDtjKcsklIi78XoE0MVL93QvWTu+E5y44VyyCsOMBrIg==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.9.0.tgz",
+      "integrity": "sha512-V6QyhX21+uXp4T+3nrNfI3hQNBDa/P8ga7LoQOenwrlEFXrEnUEE+ok1dMtaS3b6rmLXhT1TkTIsG75HMLbknA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
+        "@eslint/eslintrc": "^0.1.3",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -6399,7 +6492,7 @@
         "eslint-scope": "^5.1.0",
         "eslint-utils": "^2.1.0",
         "eslint-visitor-keys": "^1.3.0",
-        "espree": "^7.2.0",
+        "espree": "^7.3.0",
         "esquery": "^1.2.0",
         "esutils": "^2.0.2",
         "file-entry-cache": "^5.0.1",
@@ -6489,12 +6582,12 @@
           }
         },
         "eslint-scope": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
-          "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
           "dev": true,
           "requires": {
-            "esrecurse": "^4.1.0",
+            "esrecurse": "^4.3.0",
             "estraverse": "^4.1.1"
           }
         },
@@ -6505,12 +6598,12 @@
           "dev": true
         },
         "espree": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-7.2.0.tgz",
-          "integrity": "sha512-H+cQ3+3JYRMEIOl87e7QdHX70ocly5iW4+dttuR8iYSPr/hXKFb+7dBsZ7+u1adC4VrnPlTkv0+OwuPnDop19g==",
+          "version": "7.3.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz",
+          "integrity": "sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==",
           "dev": true,
           "requires": {
-            "acorn": "^7.3.1",
+            "acorn": "^7.4.0",
             "acorn-jsx": "^5.2.0",
             "eslint-visitor-keys": "^1.3.0"
           }
@@ -6532,6 +6625,23 @@
             }
           }
         },
+        "esrecurse": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+          "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+          "dev": true,
+          "requires": {
+            "estraverse": "^5.2.0"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+              "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+              "dev": true
+            }
+          }
+        },
         "globals": {
           "version": "12.4.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
@@ -6627,9 +6737,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -7024,9 +7134,9 @@
       "dev": true
     },
     "eventemitter3": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
-      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true
     },
     "events": {
@@ -8516,9 +8626,9 @@
           }
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -8941,9 +9051,9 @@
           "dev": true
         },
         "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
@@ -9086,6 +9196,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -9159,9 +9275,9 @@
       "dev": true
     },
     "klona": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-1.1.2.tgz",
-      "integrity": "sha512-xf88rTeHiXk+XE2Vhi6yj8Wm3gMZrygGdKjJqN8HkV+PwF/t50/LdAKHoHpPcxFAlmQszTZ1CugrK25S7qDRLA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
       "dev": true
     },
     "launch-editor": {
@@ -9390,9 +9506,9 @@
       }
     },
     "loglevel": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",
-      "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.0.tgz",
+      "integrity": "sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==",
       "dev": true
     },
     "loose-envify": {
@@ -10367,9 +10483,9 @@
       }
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
     "node-gyp": {
@@ -10460,9 +10576,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.60",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
-      "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
+      "version": "1.1.61",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
+      "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
       "dev": true
     },
     "node-sass": {
@@ -10840,9 +10956,9 @@
       }
     },
     "opener": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz",
-      "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
       "dev": true
     },
     "opn": {
@@ -11036,14 +11152,14 @@
       }
     },
     "parse-json": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz",
-      "integrity": "sha512-ztoZ4/DYeXQq4E21v169sC8qWINGpcosGv9XhTDvg9/hWvx/zrFkc9BiWxR58OJLHGk28j5BL0SDLeV2WmFZlQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
+      "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1",
+        "json-parse-even-better-errors": "^2.3.0",
         "lines-and-columns": "^1.1.6"
       }
     },
@@ -11252,9 +11368,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.32",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+      "version": "7.0.34",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.34.tgz",
+      "integrity": "sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -11280,9 +11396,9 @@
       }
     },
     "postcss-calc": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.3.tgz",
-      "integrity": "sha512-IB/EAEmZhIMEIhG7Ov4x+l47UaXOS1n2f4FBUk/aKllQhtSCxWhTzn0nJgkqN7fo/jcWySvWTSB6Syk9L+31bA==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.4.tgz",
+      "integrity": "sha512-0I79VRAd1UTkaHzY9w83P39YGO/M3bG7/tNLrHGEunBolfoGM0hSjrGvjoeaj0JE/zIw5GsI2KZ0UwDJqv5hjw==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.27",
@@ -11366,9 +11482,9 @@
       }
     },
     "postcss-load-config": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
-      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.1.tgz",
+      "integrity": "sha512-D2ENobdoZsW0+BHy4x1CAkXtbXtYWYRIxL/JbtRBqrRGOPtJ2zoga/bEZWhV/ShWB5saVxJMzbMdSyA/vv4tXw==",
       "dev": true,
       "requires": {
         "cosmiconfig": "^5.0.0",
@@ -11848,9 +11964,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
-      "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
+      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
       "dev": true
     },
     "prettier-linter-helpers": {
@@ -12301,9 +12417,9 @@
       "dev": true
     },
     "regexpu-core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
-      "integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
       "dev": true,
       "requires": {
         "regenerate": "^1.4.0",
@@ -12605,9 +12721,9 @@
       }
     },
     "rxjs": {
-      "version": "6.6.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",
-      "integrity": "sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg==",
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
+      "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
@@ -12647,15 +12763,15 @@
       }
     },
     "sass-loader": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-9.0.3.tgz",
-      "integrity": "sha512-fOwsP98ac1VMme+V3+o0HaaMHp8Q/C9P+MUazLFVi3Jl7ORGHQXL1XeRZt3zLSGZQQPC8xE42Y2WptItvGjDQg==",
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.2.tgz",
+      "integrity": "sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==",
       "dev": true,
       "requires": {
-        "klona": "^1.1.2",
+        "klona": "^2.0.3",
         "loader-utils": "^2.0.0",
         "neo-async": "^2.6.2",
-        "schema-utils": "^2.7.0",
+        "schema-utils": "^2.7.1",
         "semver": "^7.3.2"
       },
       "dependencies": {
@@ -12694,20 +12810,20 @@
       }
     },
     "schema-utils": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
       "dev": true,
       "requires": {
-        "@types/json-schema": "^7.0.4",
-        "ajv": "^6.12.2",
-        "ajv-keywords": "^3.4.1"
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.4",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
-          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "version": "6.12.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
+          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -12752,12 +12868,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "dev": true,
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {
@@ -13618,9 +13734,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.4",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
-          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "version": "6.12.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
+          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -14394,86 +14510,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-      "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-loader-v16": {
       "version": "npm:vue-loader@16.0.0-beta.7",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
@@ -14763,9 +14799,9 @@
       "dev": true
     },
     "webpack": {
-      "version": "4.44.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.1.tgz",
-      "integrity": "sha512-4UOGAohv/VGUNQJstzEywwNxqX417FnjZgZJpJQegddzPmTvph37eBIRbRTfdySXzVtJXLJfbMN3mMYhM6GdmQ==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",
+      "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==",
       "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.9.0",
@@ -14794,9 +14830,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.12.4",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
-          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "version": "6.12.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
+          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -14825,9 +14861,9 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.8.0.tgz",
-      "integrity": "sha512-PODQhAYVEourCcOuU+NiYI7WdR8QyELZGgPvB1y2tjbUpbmcQOt5Q7jEK+ttd5se0KSBKD9SXHCEozS++Wllmw==",
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz",
+      "integrity": "sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA==",
       "dev": true,
       "requires": {
         "acorn": "^7.1.1",
@@ -14839,7 +14875,7 @@
         "express": "^4.16.3",
         "filesize": "^3.6.1",
         "gzip-size": "^5.0.0",
-        "lodash": "^4.17.15",
+        "lodash": "^4.17.19",
         "mkdirp": "^0.5.1",
         "opener": "^1.5.1",
         "ws": "^6.0.0"
diff --git a/package.json b/package.json
index 8692d1a..36e739f 100644
--- a/package.json
+++ b/package.json
@@ -34,21 +34,21 @@
     "vue": "^2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.4",
-    "@vue/cli-plugin-eslint": "^4.5.4",
-    "@vue/cli-plugin-unit-mocha": "^4.5.4",
-    "@vue/cli-service": "^4.5.4",
+    "@vue/cli-plugin-babel": "^4.5.6",
+    "@vue/cli-plugin-eslint": "^4.5.6",
+    "@vue/cli-plugin-unit-mocha": "^4.5.6",
+    "@vue/cli-service": "^4.5.6",
     "@vue/eslint-config-airbnb": "^5.1.0",
-    "@vue/test-utils": "1.0.4",
+    "@vue/test-utils": "1.1.0",
     "babel-eslint": "^10.1.0",
     "chai": "^4.2.0",
-    "eslint": "^7.7.0",
+    "eslint": "^7.9.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
-    "prettier": "^2.0.5",
-    "sass-loader": "^9.0.3",
+    "prettier": "^2.1.2",
+    "sass-loader": "^10.0.2",
     "vue": "^2.6.12",
     "vue-template-compiler": "^2.6.12"
   },

From ca0c3f4e4a3ebbf778e742895231202e0c0d2dbb Mon Sep 17 00:00:00 2001
From: Sergej Atamantschuk <sergejatam@gmail.com>
Date: Sat, 19 Sep 2020 10:29:17 -0700
Subject: [PATCH 50/50] doc: default slot correction

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 21f1edd..cdd3998 100644
--- a/README.md
+++ b/README.md
@@ -569,7 +569,7 @@ data: [
 
 - #### `default`
 
-Use this slot, if you want to customize the presentation of the circle legend ad make a use of the animated counter, 
+Use this slot, if you want to customize the presentation of the circle legend and make a use of the animated counter, 
 so your formatting still animated. This works similar to the [`legendFormatter`](#legendformatter) and is just 
 an alternative way to provide a custom format. You can access animated counter properties through the scoped slot 
 props and adjust the presentation of the legend to your needs.