updated component

Author: dipaksarkar

src/component.vue

@@ -110,6 +110,7 @@ export default defineComponent({
     return {
       config,
       maskedValue,
+      unmaskedValue,
       input,
       change
     }

src/core.ts

@@ -196,6 +196,8 @@ export function keydownHandler(event: KeyboardEvent, el: CustomInputElement) {
   const { options } = el
   const { prefix, suffix, decimal, min, separator } = options as Options
   const { key } = event
+
+  console.log(key)
   const regExp = new RegExp(`${prefix}|${suffix}`, 'g')
   const newValue = el.value.replace(regExp, '')
   const canNegativeInput = min === undefined || Number(min) < 0 || Number(min) !== min

tests/component/component.custom.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import VueNumber from '../../src/component.vue'
+
+describe('VueNumber', () => {
+  it('renders the correct maskedValue and unmaskedValue when custom config', async () => {
+    const wrapper = mount(VueNumber, {
+      props: {
+        modelValue: 123456.893,
+        decimal: ',',
+        separator: '.',
+        prefix: 'Rs.',
+        suffix: '%'
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('Rs.123.456,89%')
+    wrapper.setProps({ modelValue: '1234.568' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('Rs.1.234,57%')
+    expect(wrapper.vm.maskedValue).toBe('Rs.1.234,57%')
+    expect(wrapper.vm.unmaskedValue).toBe('1234.57')
+    expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.57'])
+    expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1234.57'])
+  })
+})

tests/component/component.minimumFractionDigits.spec.ts

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import VueNumber from '../../src/component.vue'
+
+describe('VueNumber', () => {
+  it('renders the correct maskedValue when minimumFractionDigits', async () => {
+    const wrapper = mount(VueNumber, {
+      props: {
+        modelValue: 1000,
+        minimumFractionDigits: 1
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('1,000.0')
+    wrapper.setProps({ modelValue: '1234.505' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('1,234.51')
+    expect(wrapper.vm.maskedValue).toBe('1,234.51')
+    expect(wrapper.vm.unmaskedValue).toBe('1234.51')
+    expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1234.51'])
+    expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.51'])
+
+    wrapper.setProps({ modelValue: '1234' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('1,234.0')
+    expect(wrapper.vm.maskedValue).toBe('1,234.0')
+    expect(wrapper.vm.unmaskedValue).toBe('1234')
+    expect(wrapper.emitted()['input:model-value'][1]).toEqual(['1234'])
+    expect(wrapper.emitted()['update:model-value'][1]).toEqual(['1234'])
+  })
+})

tests/component/component.range.spec.ts

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils'
+import VueNumber from '../../src/component.vue'
+
+describe('VueNumber', () => {
+  it('renders the correct maskedValue and unmaskedValue when min and max prop added', async () => {
+    const wrapper = mount(VueNumber, {
+      props: {
+        modelValue: 1000,
+        min: 0,
+        max: 5000
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('1,000')
+    wrapper.setProps({ modelValue: '-100.52' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('0')
+    expect(wrapper.vm.maskedValue).toBe('0')
+    expect(wrapper.vm.unmaskedValue).toBe('0')
+    expect(wrapper.emitted()['update:model-value'][0]).toEqual(['0'])
+    expect(wrapper.emitted()['input:model-value'][0]).toEqual(['0'])
+
+    wrapper.setProps({ modelValue: '10000.52' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('5,000')
+    expect(wrapper.vm.maskedValue).toBe('5,000')
+    expect(wrapper.vm.unmaskedValue).toBe('5000')
+    expect(wrapper.emitted()['update:model-value'][1]).toEqual(['5000'])
+    expect(wrapper.emitted()['input:model-value'][1]).toEqual(['5000'])
+
+    wrapper.setProps({ modelValue: '1325.259' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('1,325.26')
+    expect(wrapper.vm.maskedValue).toBe('1,325.26')
+    expect(wrapper.vm.unmaskedValue).toBe('1325.26')
+    expect(wrapper.emitted()['update:model-value'][2]).toEqual(['1325.26'])
+    expect(wrapper.emitted()['input:model-value'][2]).toEqual(['1325.26'])
+  })
+})

tests/component/component.reverseFill.spec.ts

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import VueNumber from '../../src/component.vue'
+
+describe('VueNumber', () => {
+  it('renders the correct maskedValue when reverseFill prop is true', async () => {
+    const wrapper = mount(VueNumber, {
+      props: {
+        modelValue: 1000,
+        reverseFill: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('1,000.00')
+    wrapper.setProps({ modelValue: '1234.505' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('12,345.05')
+    expect(wrapper.vm.maskedValue).toBe('12,345.05')
+    expect(wrapper.vm.unmaskedValue).toBe('12345.05')
+    expect(wrapper.emitted()['input:model-value'][0]).toEqual(['12345.05'])
+    expect(wrapper.emitted()['update:model-value'][0]).toEqual(['12345.05'])
+
+    wrapper.setProps({ modelValue: '1234.00' })
+    await input.trigger('input')
+    await input.trigger('change')
+
+    expect(input.element.value).toBe('1,234.00')
+    expect(wrapper.vm.maskedValue).toBe('1,234.00')
+    expect(wrapper.vm.unmaskedValue).toBe('1234')
+    expect(wrapper.emitted()['input:model-value'][1]).toEqual(['1234'])
+    expect(wrapper.emitted()['update:model-value'][1]).toEqual(['1234'])
+  })
+})

tests/component/component.spec.ts

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import VueNumber from '../../src/component.vue'
+
+describe('VueNumber', () => {
+  it('updates the maskedValue when input is changed', async () => {
+    const wrapper = mount(VueNumber, {
+      props: {
+        modelValue: 1000.53
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('1,000.53')
+    input.setValue('1234.5')
+
+    expect(wrapper.vm.maskedValue).toBe('1,234.5')
+    expect(wrapper.vm.unmaskedValue).toBe('1234.5')
+    expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1234.5'])
+    expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.5'])
+  })
+
+  it('renders the correct maskedValue when masked prop is true', async () => {
+    const wrapper = mount(VueNumber, {
+      props: {
+        modelValue: 1000,
+        masked: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('1,000')
+    input.setValue('1234.5')
+
+    expect(wrapper.vm.maskedValue).toBe('1,234.5')
+    expect(wrapper.vm.unmaskedValue).toBe('1234.5')
+    expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1,234.5'])
+    expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1,234.5'])
+  })
+})

tests/directive/directive.custom.spec.ts

@@ -0,0 +1,36 @@
+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" :value="value" />`,
+      directives: {
+        number: directive
+      },
+      data() {
+        return {
+          value: 123456.893,
+          options: {
+            decimal: ',',
+            separator: '.',
+            prefix: 'Rs.',
+            suffix: '%'
+          }
+        }
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('Rs.123.456,89%')
+
+    await input.trigger('blur')
+    expect(input.element.value).toBe('Rs.123.456,89%')
+
+    input.setValue(1234.568)
+    expect(input.element.value).toBe('Rs.1.234,568%')
+
+    await input.trigger('blur')
+    expect(input.element.value).toBe('Rs.1.234,57%')
+  })
+})

tests/directive/directive.minimumFractionDigits.spec.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import directive from '../../src/directive'
+
+describe('v-number directive', () => {
+  test('should emit input event with minimum fraction digits', async () => {
+    const wrapper = mount({
+      template: `<input v-number="options" type="text" :value="value" />`,
+      directives: {
+        number: directive
+      },
+      data() {
+        return {
+          value: 123456.893,
+          options: {
+            minimumFractionDigits: 2
+          }
+        }
+      }
+    })
+
+    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.setValue('1234.5')
+    expect(input.element.value).toBe('1,234.5')
+
+    await input.trigger('blur')
+    expect(input.element.value).toBe('1,234.50')
+  })
+})

tests/directive/directive.range.spec.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils'
+import directive from '../../src/directive'
+
+describe('v-number directive', () => {
+  it('should emit input event within range', async () => {
+    const wrapper = mount({
+      template: `<input v-number="options" type="text" :value="value" />`,
+      directives: {
+        number: directive
+      },
+      data() {
+        return {
+          value: 1.536,
+          options: {
+            min: 0,
+            max: 50
+          }
+        }
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('1.54')
+
+    input.setValue('1234.529')
+    expect(input.element.value).toBe('1,234.529')
+    await input.trigger('blur')
+    expect(input.element.value).toBe('50')
+
+    input.setValue('-1234.568')
+    expect(input.element.value).toBe('-1,234.568')
+    await input.trigger('blur')
+    expect(input.element.value).toBe('0')
+
+    input.setValue('12.568')
+    expect(input.element.value).toBe('12.568')
+    await input.trigger('blur')
+    expect(input.element.value).toBe('12.57')
+  })
+})