fix no prefix issue

Author: dipaksarkar

src/directive.ts

@@ -8,13 +8,15 @@ 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
+    const { reverseFill, precision, decimal } = 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
       }
+    } else if (el.value && !isNaN(Number(el.value))) {
+      el.value = el.value.replace('.', decimal)
     }
     // set initial value
     core.updateValue(el, vnode, { force: options.prefill, clean: true, emit: false })

src/number-format.ts

@@ -33,6 +33,7 @@ export default class NumberFormat {
   input: Input
   number: Input
   isClean: boolean
+  isCustomDecimal: boolean
   preSurRegExp: RegExp
   numberRegExp: RegExp
   cleanRegExp: RegExp
@@ -50,6 +51,7 @@ export default class NumberFormat {
     this.numberRegExp = new RegExp(`[^0-9\\${decimal}]+`, 'gi')
     this.cleanRegExp = new RegExp('[^0-9]+', 'gi')
     this.negativeRegExp = new RegExp('[^0-9\\-]+', 'gi')
+    this.isCustomDecimal = decimal !== '.'
   }
 
   isNull() {
@@ -95,11 +97,13 @@ export default class NumberFormat {
 
   numbers() {
     const { reverseFill, decimal } = this.options
+    const hasDeciaml = this.input.toString().indexOf(decimal) >= 0
+    const input = !hasDeciaml && this.isCustomDecimal ? this.input + decimal : this.input
     if (reverseFill) {
       this.number = this.toFixed().replace('.', decimal)
     } else if (typeof this.input === 'number') {
       this.number = this.parts(this.input.toString().replace('-', ''), '.').join(decimal)
-    } else if (!isNaN(this.toNumber(this.input))) {
+    } else if (!isNaN(this.toNumber(input))) {
       this.number = this.parts(this.input.replace('-', ''), '.').join(decimal)
     } else {
       this.number = this.parts(this.numberOnly()).join(decimal)

tests/component/component.custom.spec.ts

@@ -16,7 +16,7 @@ describe('VueNumber custom config', () => {
     const input = wrapper.find('input')
     expect(input.element.value).toBe('Rs.123.456,89%')
 
-    input.element.value = 123456.893
+    input.element.value = '123456,893'
     await input.trigger('input')
     expect(wrapper.vm.unmaskedValue).toBe('123456.89')
     expect(wrapper.vm.maskedValue).toBe('Rs.123.456,893%')
@@ -25,7 +25,7 @@ describe('VueNumber custom config', () => {
     expect(wrapper.vm.unmaskedValue).toBe('123456.89')
     expect(wrapper.vm.maskedValue).toBe('Rs.123.456,89%')
 
-    input.element.value = 1234.568
+    input.element.value = '1234,568'
     await input.trigger('input')
     expect(wrapper.vm.unmaskedValue).toBe('1234.57')
     expect(wrapper.vm.maskedValue).toBe('Rs.1.234,568%')

tests/component/component.noPrefix.spec.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import VueNumber from '../../src/component.vue'
+
+describe('VueNumber custom config', () => {
+  test('should emit input event with the new maskedValue and unmaskedValue on input', async () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 123456.893,
+        decimal: ',',
+        separator: '.',
+        prefix: '',
+        suffix: '%'
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('123.456,89%')
+
+    input.element.value = '123.456'
+    await input.trigger('input')
+    expect(wrapper.vm.unmaskedValue).toBe('123456')
+    expect(wrapper.vm.maskedValue).toBe('123.456%')
+
+    await input.trigger('blur')
+    expect(wrapper.vm.unmaskedValue).toBe('123456')
+    expect(wrapper.vm.maskedValue).toBe('123.456%')
+
+    input.element.value = '1234,568'
+    await input.trigger('input')
+    expect(wrapper.vm.unmaskedValue).toBe('1234.57')
+    expect(wrapper.vm.maskedValue).toBe('1.234,568%')
+
+    await input.trigger('blur')
+    expect(wrapper.vm.unmaskedValue).toBe('1234.57')
+    expect(wrapper.vm.maskedValue).toBe('1.234,57%')
+  })
+})

tests/directive/directive.custom.spec.ts

@@ -27,7 +27,7 @@ describe('v-number directive', () => {
     await input.trigger('blur')
     expect(input.element.value).toBe('Rs.123.456,89%')
 
-    input.element.value = 1234.568
+    input.element.value = '1234,568'
     await input.trigger('input')
     expect(input.element.value).toBe('Rs.1.234,568%')
 

tests/directive/directive.noPrefix.spec.ts

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import directive from '../../src/directive'
+
+describe('v-number directive', () => {
+  it('should emit input event with the new value on input', async () => {
+    const wrapper = mount({
+      template: `<input v-number="options" type="text" v-model="value" />`,
+      directives: {
+        number: directive
+      },
+      data() {
+        return {
+          value: 123456.893,
+          options: {
+            decimal: ',',
+            separator: '.'
+          }
+        }
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('123.456,89')
+
+    await input.trigger('blur')
+    expect(input.element.value).toBe('123.456,89')
+
+    input.element.value = '1234,568'
+    await input.trigger('input')
+    expect(input.element.value).toBe('1.234,568')
+
+    await input.trigger('blur')
+    expect(input.element.value).toBe('1.234,57')
+  })
+})