running-tools

commit b396bb7b095a21a8331358ee21e063b120d2c0b4
parent ae7c32e4ad2bc7ffa6ce729f220cc9438e1c4e25
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Tue, 10 Aug 2021 12:50:15 -0700

Add padding prop to IntInput and DecimalInput

Diffstat:
M
src/components/DecimalInput.vue
 | 
33
+++++++++++++++++++++++++++------
M
src/components/IntInput.vue
 | 
36
+++++++++++++++++++++++++++++-------
M
tests/unit/DecimalInput.spec.js
 | 
10
+++++-----
M
tests/unit/IntInput.spec.js
 | 
14
++++++++++++--

4 files changed, 73 insertions(+), 20 deletions(-)
diff --git a/src/components/DecimalInput.vue b/src/components/DecimalInput.vue
@@ -37,6 +37,17 @@ export default {
     },
 
     /**
+     * The number of digits to show before the decimal point
+     */
+    padding: {
+      type: Number,
+      default: 0,
+      validator: function(value) {
+        return value >= 0;
+      },
+    },
+
+    /**
      * The number of digits to show after the decimal point
      */
     digits: {
@@ -53,7 +64,7 @@ export default {
       /**
        * The internal value
        */
-      internalValue: this.value.toFixed(this.digits),
+      internalValue: this.format(this.value),
     };
   },
 
@@ -76,12 +87,12 @@ export default {
 
         // Enforce minimum
         else if (this.min !== null && parsedValue < this.min) {
-          this.internalValue = this.min.toFixed(this.digits);
+          this.internalValue = this.format(this.min);
         }
 
         // Enforce maximum
         else if (this.max !== null && parsedValue > this.max) {
-          this.internalValue = this.max.toFixed(this.digits);
+          this.internalValue = this.format(this.max);
         }
 
         // Allow valid numbers
@@ -109,7 +120,7 @@ export default {
         return isNaN(parsedValue) ? this.defaultValue : parsedValue;
       },
       set: function(newValue) {
-        this.stringValue = newValue.toFixed(this.digits);
+        this.stringValue = this.format(newValue);
       }
     },
 
@@ -179,7 +190,7 @@ export default {
      * @param {Object} e The blur event args
      */
     onblur: function(e) {
-      this.stringValue = this.decValue.toFixed(this.digits);
+      this.stringValue = this.format(this.decValue);
     },
 
     /**
@@ -189,7 +200,17 @@ export default {
      */
     parse: function(value) {
       return Number(value);
-    }
+    },
+
+    /**
+     * Format a decimal as a string
+     * @param {Number} value The decimal
+     * @returns {String} The formated string
+     */
+    format: function(value) {
+      let result = value.toFixed(this.digits);
+      return result.padStart(this.padding + this.digits + 1, '0');
+    },
   },
 }
 </script>
diff --git a/src/components/IntInput.vue b/src/components/IntInput.vue
@@ -35,6 +35,17 @@ export default {
       type: Number,
       default: null,
     },
+
+    /**
+     * The number of digits to show before the decimal point
+     */
+    padding: {
+      type: Number,
+      default: 0,
+      validator: function(value) {
+        return value >= 0;
+      },
+    },
   },
 
   data: function() {
@@ -42,7 +53,7 @@ export default {
       /**
        * The internal value
        */
-      internalValue: this.value.toString(),
+      internalValue: this.format(this.value),
     };
   },
 
@@ -65,12 +76,12 @@ export default {
 
         // Enforce minimum
         else if (this.min !== null && parsedValue < this.min) {
-          this.internalValue = this.min.toString();
+          this.internalValue = this.format(this.min);
         }
 
         // Enforce maximum
         else if (this.max !== null && parsedValue > this.max) {
-          this.internalValue = this.max.toString();
+          this.internalValue = this.format(this.max);
         }
 
         // Allow valid numbers
@@ -98,7 +109,7 @@ export default {
         return isNaN(parsedValue) ? this.defaultValue : parsedValue;
       },
       set: function(newValue) {
-        this.stringValue = newValue.toString();
+        this.stringValue = this.format(newValue);
       }
     },
 
@@ -121,7 +132,9 @@ export default {
      * @param {Number} newValue The new prop value
      */
     value: function(newValue) {
-      this.intValue = newValue;
+      if (newValue !== this.intValue) {
+        this.intValue = newValue;
+      }
     },
 
     /**
@@ -166,7 +179,7 @@ export default {
      * @param {Object} e The blur event args
      */
     onblur: function(e) {
-      this.stringValue = this.intValue.toString();
+      this.stringValue = this.format(this.intValue);
     },
 
     /**
@@ -182,7 +195,16 @@ export default {
       else {
         return Number(value);
       }
-    }
+    },
+
+    /**
+     * Format an integer as a string
+     * @param {Number} value The integer
+     * @returns {String} The formated string
+     */
+    format: function(value) {
+      return value.toString().padStart(this.padding, '0');
+    },
   },
 }
 </script>
diff --git a/tests/unit/DecimalInput.spec.js b/tests/unit/DecimalInput.spec.js
@@ -103,7 +103,7 @@ describe('DecimalInput.vue', () => {
   it('should format input value on blur', async () => {
     // Initialize component
     const wrapper = mount(DecimalInput, {
-      propsData: { value: 1 }
+      propsData: { value: 1, padding: 3, digits: 2 }
     });
 
     // Set value to '01'
@@ -118,7 +118,7 @@ describe('DecimalInput.vue', () => {
     await wrapper.find('input').trigger('blur');
 
     // Assert value was formatted but no events were emitted
-    expect(wrapper.find('input').element.value).to.equal('1.0');
+    expect(wrapper.find('input').element.value).to.equal('001.00');
     expect(wrapper.emitted().input).to.be.undefined;
   });
 
@@ -248,13 +248,13 @@ describe('DecimalInput.vue', () => {
     expect(wrapper.emitted().input).to.deep.equal([[10.0]]);
   });
 
-  it('should format value according to digits prop', async () => {
+  it('should format value according to padding and digits props', async () => {
     // Initialize component
     const wrapper = mount(DecimalInput, {
-      propsData: { digits: 3 }
+      propsData: { padding: 2, digits: 3 }
     });
 
     // Assert value is correctly formatted
-    expect(wrapper.find('input').element.value).to.equal('0.000');
+    expect(wrapper.find('input').element.value).to.equal('00.000');
   });
 });
diff --git a/tests/unit/IntInput.spec.js b/tests/unit/IntInput.spec.js
@@ -103,7 +103,7 @@ describe('IntInput.vue', () => {
   it('should format input value on blur', async () => {
     // Initialize component
     const wrapper = mount(IntInput, {
-      propsData: { value: 1 }
+      propsData: { value: 1, padding: 3 }
     });
 
     // Set value to '01'
@@ -118,7 +118,7 @@ describe('IntInput.vue', () => {
     await wrapper.find('input').trigger('blur');
 
     // Assert value was formatted but no events were emitted
-    expect(wrapper.find('input').element.value).to.equal('1');
+    expect(wrapper.find('input').element.value).to.equal('001');
     expect(wrapper.emitted().input).to.be.undefined;
   });
 
@@ -225,4 +225,14 @@ describe('IntInput.vue', () => {
     expect(wrapper.find('input').element.value).to.equal('10');
     expect(wrapper.emitted().input).to.deep.equal([[10]]);
   });
+
+  it('should format value according to padding prop', async () => {
+    // Initialize component
+    const wrapper = mount(IntInput, {
+      propsData: { padding: 2 }
+    });
+
+    // Assert value is correctly formatted
+    expect(wrapper.find('input').element.value).to.equal('00');
+  });
 });