2.2.4

Author: kevinongko

dist/vue-numeric.min.js

@@ -91,6 +91,10 @@ <h1 class="title is-4">
                 <input type="radio" value="." v-model="separator">
                 use '.' as separator
               </label>
+              <label class="radio">
+                <input type="radio" value="space" v-model="separator">
+                use space as separator
+              </label>
             </p>
           </div>
           <div class="column is-12">
@@ -135,7 +139,7 @@ <h1 class="title is-4">
         el: '#app',
 
         data:  {
-          money: 100,
+          money: 1000,
           minValue: 0,
           maxValue: 999999,
           currency: '$',

docs/index.html

@@ -1,6 +1,6 @@
 {
   "name": "vue-numeric",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Input field component to display currency value based on Vue.",
   "author": "Kevin Ongko",
   "main": "dist/vue-numeric.min.js",
@@ -46,7 +46,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
     "eslint": "^4.6.0",
-    "eslint-plugin-vue": "3.12.0",
+    "eslint-plugin-vue": "3.13.1",
     "karma": "^1.7.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",

package.json

@@ -146,8 +146,8 @@ export default {
      * @return {String} '.' or ','
      */
     decimalSeparator () {
-      if (this.separator === '.') return ','
-      return '.'
+      if (this.separator === ',') return '.'
+      return ','
     },
 
     /**
@@ -156,6 +156,7 @@ export default {
      */
     thousandSeparator () {
       if (this.separator === '.') return '.'
+      if (this.separator === 'space') return ' '
       return ','
     },
 
@@ -301,9 +302,7 @@ export default {
     }
 
     // Set read-only span element's class
-    if (this.readOnly) {
-      this.$refs.readOnly.className = this.readOnlyClass
-    }
+    if (this.readOnly) this.$refs.readOnly.className = this.readOnlyClass
   }
 }
 </script>

src/vue-numeric.vue

@@ -41,9 +41,19 @@ describe('vue-numeric.vue', () => {
     expect(wrapper.data().amount).to.equal('$ 2,000.4')
   })
 
-  it('format values with correct separator', () => {
-    const wrapper = mount(VueNumeric, { propsData: { value: 2000000, currency: '$', separator: '.' }})
-    expect(wrapper.data().amount).to.equal('$ 2.000.000')
+  it('format values with . separator', () => {
+    const wrapper = mount(VueNumeric, { propsData: { value: 2000000, currency: '$', separator: '.', precision: 2 }})
+    expect(wrapper.data().amount).to.equal('$ 2.000.000,00')
+  })
+
+  it('format values with , separator', () => {
+    const wrapper = mount(VueNumeric, { propsData: { value: 2000000, currency: '$', separator: ',', precision: 2 }})
+    expect(wrapper.data().amount).to.equal('$ 2,000,000.00')
+  })
+
+  it('format values with space separator', () => {
+    const wrapper = mount(VueNumeric, { propsData: { value: 2000000, currency: '$', separator: 'space', precision: 2  }})
+    expect(wrapper.data().amount).to.equal('$ 2 000 000,00')
   })
 
   it('format values with correct decimals symbol when using different thousand separator', () => {