Skip to content

Commit 5383bdf

Browse files
dipaksarkardipaksarkar
committed
update
1 parent e485e91 commit 5383bdf

File tree

10 files changed

+77
-66
lines changed

10 files changed

+77
-66
lines changed

‎docs/.vuepress/components/PlayGround.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export default {
150150
suffix: '',
151151
precision: 2,
152152
nullValue: '',
153-
masked: false
153+
masked: true
154154
}
155155
}
156156
},

‎src/component.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,13 @@ export default defineComponent({
8282
const maskedValue = ref(props.modelValue)
8383
const unmaskedValue = ref('' as Input | undefined)
8484
const config = computed(() => ({ ...props }))
85+
const formatNumber = new NumberFormat(config.value as Options)
8586
8687
const emittedValue = computed(() => {
87-
return props.masked ? maskedValue.value : unmaskedValue.value
88+
if (props.masked) {
89+
return formatNumber.format(maskedValue.value)
90+
}
91+
return unmaskedValue.value
8892
})
8993
9094
const input = (event: Event) => {
@@ -101,9 +105,9 @@ export default defineComponent({
101105
watch(
102106
() => props.modelValue,
103107
(newValue) => {
104-
const formatNumber = new NumberFormat(config as Options).format(newValue)
105-
if (formatNumber !== maskedValue.value) {
106-
maskedValue.value = formatNumber
108+
const number = formatNumber.format(newValue)
109+
if (number !== maskedValue.value) {
110+
maskedValue.value = number
107111
}
108112
}
109113
)

‎tests/component/component.custom.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ describe('VueNumber', () => {
1515

1616
const input = wrapper.find('input')
1717
expect(input.element.value).toBe('Rs.123.456,89%')
18-
wrapper.setProps({ modelValue: '1234,568' })
19-
await input.trigger('input')
20-
await input.trigger('change')
2118

22-
expect(input.element.value).toBe('Rs.1.234,57%')
19+
input.setValue('1234,568')
20+
expect(input.element.value).toBe('Rs.1.234,568%')
21+
await input.trigger('blur')
22+
2323
expect(wrapper.vm.maskedValue).toBe('Rs.1.234,57%')
2424
expect(wrapper.vm.unmaskedValue).toBe('1234.57')
2525
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.57'])

‎tests/component/component.masked.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { mount } from '@vue/test-utils'
2+
import { component as VueNumber } from '../../src'
3+
4+
describe('VueNumber', () => {
5+
it('renders the correct maskedValue when masked prop is true', async () => {
6+
const wrapper = mount(VueNumber, {
7+
props: {
8+
modelValue: 1000,
9+
masked: true
10+
}
11+
})
12+
13+
const input = wrapper.find('input')
14+
expect(input.element.value).toBe('1,000')
15+
16+
input.setValue('1234.567')
17+
expect(input.element.value).toBe('1,234.567')
18+
await input.trigger('blur')
19+
20+
expect(wrapper.vm.maskedValue).toBe('1,234.57')
21+
expect(wrapper.vm.unmaskedValue).toBe('1234.57')
22+
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1,234.57'])
23+
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1,234.57'])
24+
})
25+
})

‎tests/component/component.minimumFractionDigits.spec.ts‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,23 @@ describe('VueNumber', () => {
1212

1313
const input = wrapper.find('input')
1414
expect(input.element.value).toBe('1,000.0')
15-
wrapper.setProps({ modelValue: '1234.505' })
16-
await input.trigger('input')
17-
await input.trigger('change')
1815

19-
expect(input.element.value).toBe('1,234.51')
16+
input.setValue('1234.505')
17+
expect(input.element.value).toBe('1,234.505')
18+
await input.trigger('blur')
19+
2020
expect(wrapper.vm.maskedValue).toBe('1,234.51')
2121
expect(wrapper.vm.unmaskedValue).toBe('1234.51')
22-
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1234.51'])
22+
expect(wrapper.emitted()['input:model-value'][1]).toEqual(['1234.51'])
2323
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.51'])
2424

25-
wrapper.setProps({ modelValue: '1234' })
26-
await input.trigger('input')
27-
await input.trigger('change')
25+
input.setValue('1234')
26+
expect(input.element.value).toBe('1,234')
27+
await input.trigger('blur')
2828

29-
expect(input.element.value).toBe('1,234.0')
3029
expect(wrapper.vm.maskedValue).toBe('1,234.0')
3130
expect(wrapper.vm.unmaskedValue).toBe('1234')
32-
expect(wrapper.emitted()['input:model-value'][1]).toEqual(['1234'])
31+
expect(wrapper.emitted()['input:model-value'][2]).toEqual(['1234'])
3332
expect(wrapper.emitted()['update:model-value'][1]).toEqual(['1234'])
3433
})
3534
})

‎tests/component/component.noPrefix.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ describe('VueNumber', () => {
1313

1414
const input = wrapper.find('input')
1515
expect(input.element.value).toBe('123.456,89')
16-
wrapper.setProps({ modelValue: '1234,568' })
17-
await input.trigger('input')
18-
await input.trigger('change')
1916

20-
expect(input.element.value).toBe('1.234,57')
17+
input.setValue('1234,568')
18+
expect(input.element.value).toBe('1.234,568')
19+
await input.trigger('blur')
20+
2121
expect(wrapper.vm.maskedValue).toBe('1.234,57')
2222
expect(wrapper.vm.unmaskedValue).toBe('1234.57')
23+
expect(wrapper.emitted()['input:model-value'][1]).toEqual(['1234.57'])
2324
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.57'])
24-
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1234.57'])
2525
})
2626
})

‎tests/component/component.precision.spec.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ describe('VueNumber', () => {
3131

3232
const input = wrapper.find('input')
3333
expect(input.element.value).toBe('1,000')
34+
3435
input.setValue('1234.5')
36+
await input.trigger('blur')
3537

3638
expect(wrapper.vm.maskedValue).toBe('1,235')
3739
expect(wrapper.vm.unmaskedValue).toBe('1235')

‎tests/component/component.range.spec.ts‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,33 @@ describe('VueNumber', () => {
1313

1414
const input = wrapper.find('input')
1515
expect(input.element.value).toBe('1,000')
16-
wrapper.setProps({ modelValue: '-100.52' })
17-
await input.trigger('input')
16+
17+
input.setValue('-100.52')
18+
await input.trigger('blur')
1819
await input.trigger('change')
1920

20-
expect(input.element.value).toBe('0')
2121
expect(wrapper.vm.maskedValue).toBe('0')
2222
expect(wrapper.vm.unmaskedValue).toBe('0')
23-
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['0'])
24-
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['0'])
23+
expect(wrapper.emitted()['input:model-value'][1]).toEqual(['0'])
24+
expect(wrapper.emitted()['update:model-value'][1]).toEqual(['0'])
2525

26-
wrapper.setProps({ modelValue: '10000.52' })
27-
await input.trigger('input')
26+
input.setValue('10000.52')
27+
await input.trigger('blur')
2828
await input.trigger('change')
2929

30-
expect(input.element.value).toBe('5,000')
3130
expect(wrapper.vm.maskedValue).toBe('5,000')
3231
expect(wrapper.vm.unmaskedValue).toBe('5000')
33-
expect(wrapper.emitted()['update:model-value'][1]).toEqual(['5000'])
34-
expect(wrapper.emitted()['input:model-value'][1]).toEqual(['5000'])
32+
expect(wrapper.emitted()['input:model-value'][3]).toEqual(['5000'])
33+
expect(wrapper.emitted()['update:model-value'][3]).toEqual(['5000'])
3534

36-
wrapper.setProps({ modelValue: '1325.259' })
37-
await input.trigger('input')
35+
input.setValue('1325.259')
36+
await input.trigger('blur')
3837
await input.trigger('change')
3938

4039
expect(input.element.value).toBe('1,325.26')
4140
expect(wrapper.vm.maskedValue).toBe('1,325.26')
4241
expect(wrapper.vm.unmaskedValue).toBe('1325.26')
43-
expect(wrapper.emitted()['update:model-value'][2]).toEqual(['1325.26'])
44-
expect(wrapper.emitted()['input:model-value'][2]).toEqual(['1325.26'])
42+
expect(wrapper.emitted()['update:model-value'][4]).toEqual(['1325.26'])
43+
expect(wrapper.emitted()['input:model-value'][4]).toEqual(['1325.26'])
4544
})
4645
})

‎tests/component/component.reverseFill.spec.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,16 @@ describe('VueNumber', () => {
1212

1313
const input = wrapper.find('input')
1414
expect(input.element.value).toBe('1,000.00')
15-
wrapper.setProps({ modelValue: '1234.505' })
16-
await input.trigger('input')
17-
await input.trigger('change')
15+
16+
input.setValue('1234.505')
1817

1918
expect(input.element.value).toBe('12,345.05')
2019
expect(wrapper.vm.maskedValue).toBe('12,345.05')
2120
expect(wrapper.vm.unmaskedValue).toBe('12345.05')
2221
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['12345.05'])
2322
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['12345.05'])
2423

25-
wrapper.setProps({ modelValue: '1234.00' })
26-
await input.trigger('input')
27-
await input.trigger('change')
24+
input.setValue('1234.00')
2825

2926
expect(input.element.value).toBe('1,234.00')
3027
expect(wrapper.vm.maskedValue).toBe('1,234.00')

‎tests/component/component.spec.ts‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,14 @@ describe('VueNumber', () => {
1111

1212
const input = wrapper.find('input')
1313
expect(input.element.value).toBe('1,000.53')
14-
input.setValue('1234.5')
1514

16-
expect(wrapper.vm.maskedValue).toBe('1,234.5')
17-
expect(wrapper.vm.unmaskedValue).toBe('1234.5')
18-
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1234.5'])
19-
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.5'])
20-
})
21-
22-
it('renders the correct maskedValue when masked prop is true', async () => {
23-
const wrapper = mount(VueNumber, {
24-
props: {
25-
modelValue: 1000,
26-
masked: true
27-
}
28-
})
29-
30-
const input = wrapper.find('input')
31-
expect(input.element.value).toBe('1,000')
32-
input.setValue('1234.5')
15+
input.setValue('1234.537')
16+
expect(input.element.value).toBe('1,234.537')
17+
await input.trigger('blur')
3318

34-
expect(wrapper.vm.maskedValue).toBe('1,234.5')
35-
expect(wrapper.vm.unmaskedValue).toBe('1234.5')
36-
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1,234.5'])
37-
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1,234.5'])
19+
expect(wrapper.vm.maskedValue).toBe('1,234.54')
20+
expect(wrapper.vm.unmaskedValue).toBe('1234.54')
21+
expect(wrapper.emitted()['input:model-value'][0]).toEqual(['1234.54'])
22+
expect(wrapper.emitted()['update:model-value'][0]).toEqual(['1234.54'])
3823
})
3924
})

0 commit comments

Comments
 (0)