[Fix] Reverse Fill Issue

Author: dipaksarkar

docs/.vuepress/components/PlayGround.vue

@@ -149,8 +149,7 @@ export default {
         suffix: '',
         precision: 2,
         nullValue: '',
-        masked: false,
-        reverseFill: false
+        masked: false
       }
     }
   },

src/core.ts

@@ -101,21 +101,22 @@ export function updateCursor(el: HTMLInputElement, position: number) {
  */
 export function updateValue(el: CustomInputElement, vnode: VNode | null, { emit = true, force = false, clean = false } = {}) {
   const { options, oldValue } = el
+  const { reverseFill, max, min } = options
   const currentValue = vnode && vnode.data && vnode.data.domProps ? vnode.data.domProps.value : el.value
 
   if (force || oldValue !== currentValue) {
-    const number = new NumberFormat(options).clean(clean && !options.reverseFill)
+    const number = new NumberFormat(options).clean(clean && !reverseFill)
     let masked = number.format(currentValue)
-    let unmasked = number.clean(options && !options.reverseFill).unformat(currentValue)
+    let unmasked = number.clean(!reverseFill).unformat(currentValue)
 
     // check value with in range max and min value
     if (clean) {
-      if (Number(options.max) === options.max && Number(unmasked) > options.max) {
-        masked = number.format(options.max)
-        unmasked = number.unformat(options.max)
-      } else if (Number(options.min) === options.min && Number(unmasked) < options.min) {
-        masked = number.format(options.min)
-        unmasked = number.unformat(options.min)
+      if (Number(max) === max && Number(unmasked) > max) {
+        masked = number.format(max)
+        unmasked = number.unformat(max)
+      } else if (Number(min) === min && Number(unmasked) < min) {
+        masked = number.format(min)
+        unmasked = number.unformat(min)
       }
     }
 
@@ -184,9 +185,9 @@ export function blurHandler(event: Event) {
     return false
   }
 
-  const { oldValue, masked, options } = target
+  const { oldValue, masked } = target
 
-  updateValue(target, null, { force: true, emit: false, clean: options && !options.reverseFill })
+  updateValue(target, null, { force: true, emit: false, clean: true })
 
   if (oldValue !== target.value) {
     target.oldValue = masked

src/directive.ts

@@ -2,14 +2,22 @@ import { VNode } from 'vue'
 import { DirectiveBinding } from 'vue/types/options'
 import * as core from './core'
 import defaultOptions from './options'
+import NumberFormat from './number-format'
 
 export default {
   bind: (el: core.CustomInputElement, { value, modifiers }: DirectiveBinding, vnode: VNode) => {
     el = core.getInputElement(el)
     const options = Object.assign(core.cloneDeep(defaultOptions), value, modifiers)
+    const { reverseFill, precision } = options
     el.options = options
+    if (reverseFill && el.value) {
+      el.value = parseFloat(new NumberFormat({ ...options, reverseFill: false }).unformat(el.value)).toFixed(precision)
+      if (vnode && vnode.data && vnode.data.domProps) {
+        vnode.data.domProps.value = el.value
+      }
+    }
     // set initial value
-    core.updateValue(el, vnode, { force: options.prefill, clean: true, emit: false })
+    core.updateValue(el, vnode, { force: options.prefill, clean: false, emit: false })
   },
 
   inserted: (el: core.CustomInputElement) => {

src/number-format.ts

@@ -40,12 +40,11 @@ export default class NumberFormat {
 
   constructor(config?: Options) {
     this.options = Object.assign(defaultOptions, config)
+    const { prefix, suffix, decimal, reverseFill } = this.options
 
     this.input = ''
     this.number = ''
-    this.isClean = true
-
-    const { prefix, suffix, decimal } = this.options
+    this.isClean = !reverseFill
 
     this.preSurRegExp = new RegExp(`${prefix}|${suffix}`, 'g')
     this.numberRegExp = new RegExp(`[^0-9\\${decimal}]+`, 'gi')
@@ -95,23 +94,28 @@ export default class NumberFormat {
   }
 
   numbers() {
-    if (this.options.reverseFill) {
-      this.number = this.toFixed().replace('.', this.options.decimal)
+    const { reverseFill, decimal } = this.options
+    if (reverseFill) {
+      this.number = this.toFixed().replace('.', decimal)
     } else if (typeof this.input === 'number') {
-      this.number = this.parts(this.input.toString().replace('-', ''), '.').join(this.options.decimal)
+      this.number = this.parts(this.input.toString().replace('-', ''), '.').join(decimal)
     } else {
-      this.number = this.parts(this.numberOnly()).join(this.options.decimal)
+      this.number = this.parts(this.numberOnly()).join(decimal)
     }
     return this.number
   }
 
+  unformatNumber(): string {
+    return this.numbers().toString().replace(this.options.decimal, '.')
+  }
+
   realNumber(): number {
-    return parseFloat(this.numbers().toString().replace(this.options.decimal, '.'))
+    return parseFloat(this.unformatNumber())
   }
 
   parts(num: Input, separator?: string) {
-    const decimal = separator || this.options.decimal
-    let parts: Input[] = num.toString().split(decimal)
+    const { precision, minimumFractionDigits, decimal } = this.options
+    let parts: Input[] = num.toString().split(separator || decimal)
 
     if (parts.length > 1) {
       parts[0] = this.toNumber(parts[0]) || 0
@@ -120,10 +124,10 @@ export default class NumberFormat {
     }
 
     if (this.isClean) {
-      const newNumber = this.toNumber(parts.join('.')).toFixed(this.options.precision)
+      const newNumber = this.toNumber(parts.join('.')).toFixed(precision)
       const cleanNumber = this.toNumber(newNumber)
-      const minimumDigits = cleanNumber.toFixed(this.options.minimumFractionDigits)
-      const hasMinFraction = this.options.minimumFractionDigits >= 0 && cleanNumber.toString().length < minimumDigits.length
+      const minimumDigits = cleanNumber.toFixed(minimumFractionDigits)
+      const hasMinFraction = minimumFractionDigits >= 0 && cleanNumber.toString().length < minimumDigits.length
 
       if (hasMinFraction) {
         parts = minimumDigits.toString().split('.')
@@ -136,9 +140,10 @@ export default class NumberFormat {
   }
 
   addSeparator() {
-    const parts: Input[] = this.numbers().split(this.options.decimal)
-    parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${this.options.separator}`)
-    return parts.join(this.options.decimal)
+    const { decimal, separator } = this.options
+    const parts: Input[] = this.numbers().split(decimal)
+    parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${separator}`)
+    return parts.join(decimal)
   }
 
   /**
@@ -148,10 +153,11 @@ export default class NumberFormat {
    */
   format(input: Input): string {
     this.input = input
-    if (this.isNull() && !this.options.reverseFill) {
-      return this.options.nullValue
+    const { reverseFill, nullValue, prefix, suffix } = this.options
+    if (this.isNull() && !reverseFill) {
+      return nullValue
     }
-    return this.sign() + this.options.prefix + this.addSeparator() + this.options.suffix
+    return this.sign() + prefix + this.addSeparator() + suffix
   }
 
   /**
@@ -161,11 +167,12 @@ export default class NumberFormat {
    */
   unformat(input: Input): string {
     this.input = input
+    const { reverseFill, nullValue } = this.options
     if (this.isNull()) {
-      return this.options.nullValue
+      return nullValue
     }
-    if (this.options.reverseFill && this.realNumber() === 0) {
-      return this.options.nullValue
+    if (reverseFill && this.realNumber() === 0) {
+      return nullValue
     }
     return this.sign() + this.realNumber()
   }