fix: disable simple formatting for negative values

Author: setaman

src/App.vue

@@ -40,7 +40,7 @@
       <div style="border: 1px solid red; display: inline-block">
         <!--        <ve-progress :progress="progress" animation="rs 2000 2000" :legend-formatter="customFormatter">
         </ve-progress>-->
-        <ve-progress :progress="progress" animation="default 2500 1000" legend="0001239,5465"></ve-progress>
+        <ve-progress :progress="progress" animation="default 2500 1000" :legend="-123"></ve-progress>
       </div>
     </div>
   </div>

src/components/Counter.vue

@@ -55,7 +55,7 @@ export default {
       return this.value.toString().includes(",") ? "," : ".";
     },
     formattedValue() {
-      if (isString(this.value)) {
+      if (isString(this.value) && !this.value.includes("-")) {
         let [preFormat] = this.value.toString().replace(/\s/g, "").split(this.delimiter);
         preFormat = [...preFormat].fill("0").join("");
         const [pre, post] = this.currentValue
@@ -64,7 +64,7 @@ export default {
           .split(this.delimiter);
         return `${preFormat.slice(pre.length)}${pre}${post ? this.delimiter + post : ""}`;
       }
-      return this.currentValue.toFixed(this.countDecimals()).replace(".", this.delimiter);
+      return this.currentValue.toFixed(this.decimalsCount).replace(".", this.delimiter);
     },
     delay() {
       return this.animation.delay;
@@ -77,7 +77,7 @@ export default {
     },
     decimalsCount() {
       if (!isString(this.value) && this.value % 1 === 0) return 0;
-      return this.value.toString().replace(/\s/g, "").split(this.delimiter)[1].length;
+      return (this.value.toString().replace(/\s/g, "").split(this.delimiter)[1] || "").length;
     },
     counterProps() {
       return {
@@ -98,10 +98,6 @@ export default {
     },
   },
   methods: {
-    countDecimals() {
-      if (this.value % 1 === 0) return 0;
-      return this.value.toString().replace(/\s/g, "").split(this.delimiter)[1].length;
-    },
     count(timeStamp) {
       if (!this.startTime) {
         this.startTime = timeStamp;

tests/unit/counter.spec.js

@@ -51,12 +51,12 @@ describe("[ Counter.vue ]", () => {
       {
         legend: 56.34,
         count: 2,
-        start: "0.00",
+        start: "00.00",
       },
       {
         legend: "25,564",
         count: 3,
-        start: "0,000",
+        start: "00,000",
       },
       {
         legend: "-30,5",
@@ -77,7 +77,7 @@ describe("[ Counter.vue ]", () => {
       const counterWrapper = wrapper.findComponent(Counter);
 
       it("counts the decimals correctly", () => {
-        expect(counterWrapper.vm.countDecimals()).to.equal(count);
+        expect(counterWrapper.vm.decimalsCount).to.equal(count);
       });
 
       it("renders the start value with the correct number of decimals places", () => {