Merge pull request #9 from emilioeduardob/fix-watching-values

Fix watching values

Author: kevinongko

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

karma.conf.js

@@ -0,0 +1,37 @@
+// https://github.com/Nikku/karma-browserify
+
+module.exports = function(config) {
+
+    config.set({
+        browsers: [
+            'PhantomJS',
+            // 'Chrome'
+        ],
+        frameworks: ['jasmine'],
+        files: ['spec/**/*.js'],
+        reporters: ['spec'],
+        preprocessors: {
+            'spec/**/*.js': ['webpack']
+        },
+        webpack: {
+          resolve: {
+            alias: {
+              'vue$': 'vue/dist/vue'
+            }
+          },
+          module: {
+                rules: [{
+                    test: /\.vue$/,
+                    loader: 'vue-loader'
+                }, {
+                    test: /\.js$/,
+                    loader: 'babel-loader',
+                    exclude: /node_modules/
+                }]
+            }
+        },
+        // if you want to continuously re-run tests on file-save,
+        // replace the following line with `autoWatch: true`
+        singleRun: true
+    })
+}

package.json

@@ -26,5 +26,29 @@
   "license": "MIT",
   "dependencies": {
     "accounting-js": "^1.1.1"
-  }
+  },
+  "scripts": {
+    "test": "karma start",
+    "test:watch": "karma start --single-run=false"
+  },
+  "devDependencies": {
+     "babel-core": "^6.21.0",
+     "babel-loader": "^6.0.0",
+     "babel-preset-es2015": "^6.18.0",
+     "babel-register": "^6.23.0",
+     "cross-env": "^4.0.0",
+     "jasmine": "^2.5.3",
+     "karma": "^1.4.0",
+     "karma-chrome-launcher": "^2.0.0",
+     "karma-jasmine": "^1.1.0",
+     "karma-phantomjs-launcher": "^1.0.2",
+     "karma-spec-reporter": "0.0.26",
+     "karma-webpack": "^2.0.3",
+     "vue": "^2.1.8",
+     "vue-loader": "^11.1.4",
+     "vue-router": "^2.4.0",
+     "vue-template-compiler": "^2.2.1",
+     "webpack": "^2.2.0",
+     "webpack-dev-server": "^2.2.0"
+   }
 }

spec/vue_numeric.spec.js

@@ -0,0 +1,157 @@
+import Vue from 'vue';
+Vue.config.productionTip = false;
+import VueNumeric from './../src/vue-numeric.vue';
+
+function getInput(Component, propsData) {
+  const Ctor = Vue.extend(Component)
+  const vm = new Ctor({ propsData: propsData }).$mount()
+  return vm.$el;
+}
+
+describe("vue-numeric", function() {
+
+  let el;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+
+    document.body.appendChild(el);
+  });
+
+  it("Uses the default decimal separator ,", done => {
+
+    var input = getInput(VueNumeric, { value: '2000' });
+    Vue.nextTick(() => {
+      expect(input.value).toEqual(' 2,000')
+      done()
+    });
+
+  });
+
+  it('updates value with format if without focus', done => {
+    const vm = new Vue({
+      el,
+      data: function() {
+        return {
+          total: 0
+        }
+      },
+      template: '<div><vue-numeric v-model="total"></vue-numeric></div>',
+      components: { VueNumeric }
+    }).$mount()
+
+    vm.total = 3000;
+
+    Vue.nextTick(() => {
+      expect(vm.$el.firstChild.value.trim()).toEqual('3,000')
+      done()
+    });
+
+  });
+
+  it('updates values decimals', done => {
+    const vm = new Vue({
+      el,
+      data: function() {
+        return {
+          total: 0
+        }
+      },
+      template: `<div>
+        <vue-numeric v-model="total" separator="." precision="2"></vue-numeric>
+        <span>{{total}}</span>
+      </div>`,
+      components: { VueNumeric }
+    }).$mount()
+
+    vm.total = 3000;
+
+    Vue.nextTick(() => {
+      const span = vm.$el.getElementsByTagName('span')[0];
+      expect(span.textContent.trim()).toEqual('3000');
+      expect(vm.$el.firstChild.value.trim()).toEqual('3.000,00')
+      done()
+    });
+
+  });
+
+
+  it('accepts decimal values', done => {
+    const vm = new Vue({
+      el,
+      data: function() {
+        return {
+          total: 200.22,
+          subtotal: "110.98",
+          large: "10.000,1"
+        };
+      },
+      template: `<div>
+        <vue-numeric v-model="large" separator="." precision="2"></vue-numeric>
+        <vue-numeric v-model="total" separator="." precision="2"></vue-numeric>
+        <vue-numeric v-model="subtotal" precision="2"></vue-numeric>
+      </div>`,
+      components: { VueNumeric }
+    }).$mount()
+
+    Vue.nextTick(() => {
+      expect(vm.$el.children[0].value.trim()).toEqual('10.000,10')
+      expect(vm.$el.children[1].value.trim()).toEqual('200,22')
+      expect(vm.$el.children[2].value.trim()).toEqual('110.98')
+      done()
+    });
+
+  });
+
+
+  it('updates values with correct separator', done => {
+    const vm = new Vue({
+      el,
+      data: function() {
+        return {
+          total: 0
+        }
+      },
+      template: `<div>
+        <vue-numeric v-model="total" separator="."></vue-numeric>
+        <span>{{total}}</span>
+      </div>`,
+      components: { VueNumeric }
+    }).$mount()
+
+    vm.total = 3000;
+
+    Vue.nextTick(() => {
+      const span = vm.$el.getElementsByTagName('span')[0];
+      expect(span.textContent.trim()).toEqual('3000');
+      expect(vm.$el.firstChild.value.trim()).toEqual('3.000')
+      done()
+    });
+
+  });
+
+
+  it('updates value without format', done => {
+    const vm = new Vue({
+      el,
+      data: function() {
+        return {
+          total: 0
+        }
+      },
+      template: '<div><vue-numeric v-model="total"></vue-numeric></div>',
+      components: { VueNumeric }
+    }).$mount()
+
+    vm.$el.firstChild.focus();
+    vm.total = 3000;
+
+    Vue.nextTick(() => {
+      expect(vm.$el.firstChild.value.trim()).toEqual('3000');
+      done()
+    });
+
+  });
+
+
+});

src/vue-numeric.vue

@@ -183,7 +183,11 @@ export default {
       let number = 0
 
       if (this.separator === '.') {
-        number = Number(String(value).replace(/[^0-9-,]+/g, '').replace(',', '.'))
+        let cleanValue = value;
+        if (typeof value != 'string') {
+          cleanValue = this.numberToString(value);
+        }
+        number = Number(String(cleanValue).replace(/[^0-9-,]+/g, '').replace(',', '.'))
       } else {
         number = Number(String(value).replace(/[^0-9-.]+/g, ''))
       }
@@ -232,13 +236,21 @@ export default {
      * Remove symbol and separator.
      * @param {Number} value
      */
-    convertToNumber (value) {
-      this.amount = accounting.formatMoney(value, {
+    numberToString (value) {
+      return accounting.formatMoney(value, {
         symbol: '',
         precision: Number(this.precision),
         decimal: this.decimalSeparator,
         thousand: ''
       })
+    },
+
+    /**
+     * Remove symbol and separator.
+     * @param {Number} value
+     */
+    convertToNumber (value) {
+      this.amount = this.numberToString(value);
     }
   },
 
@@ -251,6 +263,9 @@ export default {
     numberValue (val, oldVal) {
       if (this.amountValue !== val && this.amountValue === oldVal) {
         this.convertToNumber(val)
+        if (this.$el !== document.activeElement) {
+          this.formatValue(val)
+        }
       }
     }
   },