updated number formator

Author: Dipak Sarkar

docs/.vuepress/components/Example.vue

@@ -72,19 +72,14 @@ export default {
       priceDirective: 5432.1,
       priceUnmasked: 6789.10,
       config: {
-        decimal: '.',
-        separator: ',',
+        decimal: ',',
+        separator: '.',
         prefix: '$',
         suffix: '',
         precision: 2,
         masked: false
       }
     }
-  },
-  methods: {
-    change (evt) {
-      console.log('change', evt.target.value);
-    }
   }
 }
 </script>

src/component.vue

@@ -5,7 +5,7 @@
     :value="maskedValue"
     @change="change"
     @input="input"
-    v-number="{precision, decimal, separator, prefix, suffix}"
+    v-number="config"
     class="v-number"
   />
 </template>
@@ -76,6 +76,9 @@ export default {
   computed: {
     emittedValue() {
       return this.masked ? this.maskedValue : this.unmaskedValue
+    },
+    config() {
+      return this.$props
     }
   }
 }

src/core.js

@@ -67,7 +67,7 @@ export function updateCursor(el, position) {
  * @param {Boolean} options.emit Wether to dispatch a new InputEvent or not
  * @param {Boolean} options.force Forces the update even if the old value and the new value are the same
  */
-export function updateValue(el, vnode, { emit = true, force = false } = {}) {
+export function updateValue(el, vnode, { emit = true, force = false, clean = false } = {}) {
   const { config } = el[CONFIG_KEY]
   let { oldValue } = el[CONFIG_KEY]
 
@@ -77,7 +77,7 @@ export function updateValue(el, vnode, { emit = true, force = false } = {}) {
   currentValue = currentValue || ''
 
   if (force || oldValue !== currentValue) {
-    const number = new NumberFormat(config)
+    const number = new NumberFormat(config).clean(clean)
     const masked = number.format(currentValue)
     const unmasked = number.unformat(currentValue)
 
@@ -121,3 +121,24 @@ export function inputHandler(event) {
     target.dispatchEvent(FacadeInputEvent())
   }
 }
+
+/**
+ * Blur event handler
+ *
+ * @param {Event} event The event object
+ */
+export function blurHandler(event) {
+  const { target, detail } = event
+  // We dont need to run this method on the event we emit (prevent event loop)
+  if (detail && detail.facade) {
+    return false
+  }
+
+  const { oldValue } = target[CONFIG_KEY]
+
+  updateValue(target, null, { force: true, clean: true }, event)
+
+  if (oldValue !== target.value) {
+    target.dispatchEvent(FacadeInputEvent())
+  }
+}

src/directive.js

@@ -13,22 +13,23 @@ export default {
 
   inserted: (el) => {
     el = core.getInputElement(el)
-    const config = el[CONFIG_KEY]
+    const option = el[CONFIG_KEY]
     // prefer adding event listener to parent element to avoid Firefox bug which does not
     // execute `useCapture: true` event handlers before non-capturing event handlers
     const handlerOwner = el.parentElement || el
 
     // use anonymous event handler to avoid inadvertently removing masking for all inputs within a container
-    const handler = (e) => core.inputHandler(e)
+    const oninput = (e) => core.inputHandler(e)
 
-    handlerOwner.addEventListener('input', handler, true)
+    handlerOwner.addEventListener('input', oninput, true)
 
-    config.cleanup = () => handlerOwner.removeEventListener('input', handler, true)
+    el.onblur = (e) => core.blurHandler(e)
+
+    option.cleanup = () => handlerOwner.removeEventListener('input', oninput, true)
   },
 
   update: (el, { value, oldValue }, vnode) => {
     el = core.getInputElement(el)
-
     if (value !== oldValue) {
       el[CONFIG_KEY].config = core.normalizeConfig(value)
       core.updateValue(el, vnode, { force: true })

src/number-format.js

@@ -9,31 +9,33 @@ export default function NumberFormat(opt = options) {
   this.input = this.options.null_value
   this.number = this.options.null_value
   this.isClean = false
-  this.clean = () => {
-    this.isClean = true
+  this.clean = (clean = false) => {
+    this.isClean = clean
     return this
   }
-  this.negative = () => {
-    const negetive = (this.input.toString().indexOf('-') >= 0 && this.realNumber() > 0) ? '-' : ''
-    return negetive
+  this.sign = () => {
+    const sign = (this.input.toString().indexOf('-') >= 0 && this.realNumber() > 0) ? '-' : ''
+    return sign
   }
+  this.toNumber = (string) => Number(string)
+  this.isNegative = this.sign() === '-'
   this.numbers = () => {
     if (typeof this.input === 'number') {
       this.number = this.input.toFixed(this.options.precision).toString().replace('-', '').replace('.', this.options.decimal)
+    // eslint-disable-next-line no-restricted-globals
+    } else if (!isNaN(this.toNumber(this.input))) {
+      this.number = this.input.replace('-', '').replace('.', this.options.decimal)
     } else {
-      this.number = this.numberOnly()
+      const regExp = new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi')
+      this.number = this.input.toString().replace(regExp, '')
+      this.number = this.parts(this.number).join(this.options.decimal)
     }
     return this.number
   }
-  this.numberOnly = () => {
-    const regExp = new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi')
-    this.number = this.input.toString().replace(regExp, '')
-    return this.parts(this.number).join(this.options.decimal)
-  }
-  this.realNumber = () => Number(this.numbers().toString().replace(this.options.decimal, '.'))
+  this.realNumber = () => this.toNumber(this.numbers().toString().replace(this.options.decimal, '.'))
   this.parts = (number = '', decimal = this.options.decimal) => {
     var parts = number.toString().split(decimal)
-    parts[0] = (Number(parts[0]) ? Number(parts[0]) : 0)
+    parts[0] = this.toNumber(parts[0]) || 0
     if (parts.length > 1) {
       parts[1] = parts.slice(1, parts.length).join('')
       parts = parts.slice(0, 2)
@@ -47,19 +49,29 @@ export default function NumberFormat(opt = options) {
     var parts = this.numbers().split(this.options.decimal)
     parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${this.options.separator}`)
     if (this.isClean) {
-      parts[1] = Number(`.${parts[1]}`).toString().replace('0.', '')
+      parts[1] = this.toNumber(`.${parts[1]}`).toString().replace('0.', '')
       return parts[1] && parts[1] > 0 ? parts.join(this.options.decimal) : parts[0]
     }
     return parts.join(this.options.decimal)
   }
+  /**
+   * Format the input with default config if there is no constructor config
+   * @param {Number, String} input
+   * @return {String}
+   */
   this.format = (input) => {
     if (input === '') return this.options.null_value
     this.input = input
-    return this.negative() + this.options.prefix + this.addSeparator() + this.options.suffix
+    return this.sign() + this.options.prefix + this.addSeparator() + this.options.suffix
   }
+  /**
+   * Unformat the input with default config if there is no constructor config
+   * @param {Number, String} input
+   * @return {String}
+   */
   this.unformat = (input) => {
     if (input === '') return this.options.null_value
     this.input = input
-    return this.negative() + this.realNumber()
+    return this.sign() + this.realNumber()
   }
 }