updated NumberFromat function

Author: Dipak Sarkar

docs/.vuepress/enhanceApp.js

@@ -4,7 +4,7 @@
  * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
  */
 
-import number from '../../src'
+import number from '../../'
 import Quasar from 'quasar'
 import 'quasar/dist/quasar.min.css'
 

src/component.vue

@@ -65,7 +65,7 @@ export default {
     value: {
       immediate: true,
       handler(newValue) {
-        const formatted = new NumberFormat(newValue, this.$props).format()
+        const formatted = new NumberFormat(this.$props).format(newValue)
         if (formatted !== this.formattedValue) {
           this.formattedValue = formatted
         }
@@ -75,8 +75,8 @@ export default {
 
   methods: {
     change(evt) {
-      const number = new NumberFormat(evt.target.value, this.$props)
-      this.$emit('input', this.masked ? number.format(true) : number.unformat(true))
+      const number = new NumberFormat(this.$props).clean()
+      this.$emit('input', this.masked ? number.format(evt.target.value) : number.unformat(evt.target.value))
     },
   },
 }

src/directive.js

@@ -23,7 +23,7 @@ export default function (el, binding) {
   el.oninput = () => {
     // console.log('oninput()')
     var positionFromEnd = el.value.length - el.selectionEnd
-    el.value = new NumberFormat(el.value, config).format()
+    el.value = new NumberFormat(config).format(el.value)
     positionFromEnd = Math.max(positionFromEnd, config.suffix.length)
     positionFromEnd = el.value.length - positionFromEnd
     positionFromEnd = Math.max(positionFromEnd, config.prefix.length + 1)
@@ -32,7 +32,7 @@ export default function (el, binding) {
 
   el.onblur = () => {
     // clean up after end the input
-    el.value = new NumberFormat(el.value, config).format(true)
+    el.value = new NumberFormat(config).clean().format(el.value)
     el.dispatchEvent(new Event('input'))
     el.dispatchEvent(new Event('change'))
   }

src/index.js

@@ -10,10 +10,7 @@ export {
 
 function install(Vue, globalOptions) {
   if (globalOptions) {
-    Object.keys(globalOptions).map((key) => {
-      options[key] = globalOptions[key]
-      return options
-    })
+    Object.assign(options, globalOptions)
   }
   Vue.directive('number', VNumber)
   Vue.component('number', Number)

src/utils.js

@@ -1,52 +1,58 @@
 import options from './options'
 
-function NumberFormat(input, opt = options) {
-  this.options = opt
-  this.input = input || this.options.null_value
-
+function NumberFormat(opt = options) {
+  this.options = Object.assign(options, opt)
+  this.input = this.options.null_value
+  this.isClean = false
+  this.clean = () => {
+    this.isClean = true
+    return this
+  }
+  this.negative = () => {
+    const negetive = (this.input.toString().indexOf('-') >= 0 && this.numberOnly() > 0) ? '-' : ''
+    return negetive
+  }
   this.numbers = () => {
-    let number = this.input
     if (typeof this.input === 'number') {
-      number = this.input.toFixed(this.options.precision)
+      this.numbers = this.input.toFixed(this.options.precision)
     } else {
-      number = this.numberOnly()
+      this.numbers = this.numberOnly(this.input)
     }
-    return number
+    return this.numbers
   }
-
-  this.numberOnly = (clean = false) => {
+  this.numberOnly = () => {
     const regExp = new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi')
-    const numbers = this.input.toString().replace(regExp, '')
-    if (clean) {
-      const parts = numbers.split(this.options.decimal)
+    this.numbers = this.input.toString().replace(regExp, '')
+    if (this.isClean) {
+      const parts = this.numbers.split(this.options.decimal)
       return parts.length > 1 && parts[1] ? parts.join(this.options.decimal) : parts[0]
     }
-    return numbers
+    return this.numbers
   }
-
-  this.negative = (this.input.toString().indexOf('-') >= 0 && this.numbers() > 0) ? '-' : ''
-
   this.parts = () => {
     const parts = this.numbers().toString().split(this.options.decimal)
-    parts[0] = this.negative + (Number(parts[0]) ? Number(parts[0]) : 0)
+    parts[0] = this.negative() + (Number(parts[0]) ? Number(parts[0]) : 0)
     if (parts.length > 1) {
       parts[1] = parts[1].slice(0, this.options.precision)
     }
     return parts
   }
-
-  this.addSeparator = (clean) => {
+  this.addSeparator = () => {
     const parts = this.parts()
     parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${this.options.separator}`)
-    if (clean) {
+    if (this.isClean) {
       return parts[1] && parts[1].length > 0 ? parts.join(this.options.decimal) : parts[0]
     }
     return parts.join(this.options.decimal)
   }
-
-  this.format = (clean = false) => this.options.prefix + this.addSeparator(clean) + this.options.suffix
-
-  this.unformat = (clean = true) => this.negative + this.numberOnly(clean)
+  this.format = (input) => {
+    this.input = input
+    return this.options.prefix + this.addSeparator() + this.options.suffix
+  }
+  this.unformat = (input) => {
+    this.input = input
+    return this.negative() + this.numberOnly()
+  }
 }
 
 function setCursor(el, position) {