Skip to content

Commit cc023d8

Browse files
author
Dipak Sarkar
committed
change number format
1 parent d2a84e9 commit cc023d8

File tree

8 files changed

+274
-27
lines changed

8 files changed

+274
-27
lines changed

‎.eslintrc.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ module.exports = {
1515
parserOptions: {
1616
ecmaVersion: 2020
1717
},
18+
ignorePatterns: ['**/tests/unit/*.spec.js'],
1819
rules: {
19-
semi: 0,
20+
semi: 'off',
2021
'prefer-arrow-callback': 0,
2122
'consistent-return': 0,
2223
'prefer-destructuring': 0,
@@ -26,7 +27,7 @@ module.exports = {
2627
},
2728
overrides: [
2829
{
29-
files: ['**/__tests__/*.{j}s?(x)', '**/tests/unit/**/*.spec.{j}s?(x)'],
30+
files: ['**/tests/unit/*.spec.js'],
3031
env: {
3132
jest: true
3233
}

‎docs/.vuepress/components/Example.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,14 @@
6868
export default {
6969
data () {
7070
return {
71-
price: 0,
71+
price: 154.52,
7272
priceDirective: 5432.1,
7373
priceUnmasked: 6789.10,
7474
config: {
75-
decimal: '.',
76-
separator: ',',
75+
decimal: ',',
76+
separator: '.',
7777
prefix: '$',
78-
suffix: '%',
78+
suffix: '',
7979
precision: 2,
8080
masked: false
8181
}

‎docs/.vuepress/enhanceApp.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
55
*/
66

7-
import number from '../../'
7+
import number from '../../src'
88
import Quasar from 'quasar'
99
import 'quasar/dist/quasar.min.css'
1010

‎src/component.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default {
7676
methods: {
7777
change(evt) {
7878
const number = new NumberFormat(this.$props).clean()
79+
console.log('number.unformat(evt.target.value)', number.unformat(evt.target.value));
7980
this.$emit('input', this.masked ? number.format(evt.target.value) : number.unformat(evt.target.value))
8081
},
8182
},

‎src/directive.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ export default function (el, binding) {
2828
positionFromEnd = el.value.length - positionFromEnd
2929
positionFromEnd = Math.max(positionFromEnd, config.prefix.length + 1)
3030
setCursor(el, positionFromEnd)
31+
// el.dispatchEvent(new Event('change'))
3132
}
3233

3334
el.onblur = () => {
3435
// clean up after end the input
3536
el.value = new NumberFormat(config).clean().format(el.value)
36-
el.dispatchEvent(new Event('input'))
3737
el.dispatchEvent(new Event('change'))
3838
}
3939

‎src/utils.js

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,60 @@ import options from './options'
33
function NumberFormat(opt = options) {
44
this.options = Object.assign(options, opt)
55
this.input = this.options.null_value
6+
this.number = this.options.null_value
67
this.isClean = false
78
this.clean = () => {
89
this.isClean = true
910
return this
1011
}
1112
this.negative = () => {
12-
const negetive = (this.input.toString().indexOf('-') >= 0 && this.numberOnly() > 0) ? '-' : ''
13+
const negetive = (this.input.toString().indexOf('-') >= 0 && this.realNumber() > 0) ? '-' : ''
1314
return negetive
1415
}
1516
this.numbers = () => {
1617
if (typeof this.input === 'number') {
17-
this.numbers = this.input.toFixed(this.options.precision)
18+
this.number = this.input.toFixed(this.options.precision).toString().replace('-', '').replace('.', this.options.decimal)
1819
} else {
19-
this.numbers = this.numberOnly(this.input)
20+
this.number = this.numberOnly()
2021
}
21-
return this.numbers
22+
return this.number
2223
}
2324
this.numberOnly = () => {
2425
const regExp = new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi')
25-
this.numbers = this.input.toString().replace(regExp, '')
26-
if (this.isClean) {
27-
const parts = this.numbers.split(this.options.decimal)
28-
return parts.length > 1 && parts[1] ? parts.join(this.options.decimal) : parts[0]
29-
}
30-
return this.numbers
26+
this.number = this.input.toString().replace(regExp, '')
27+
return this.parts(this.number).join(this.options.decimal)
3128
}
32-
this.parts = () => {
33-
const parts = this.numbers().toString().split(this.options.decimal)
34-
parts[0] = this.negative() + (Number(parts[0]) ? Number(parts[0]) : 0)
29+
this.realNumber = () => Number(this.numbers().toString().replace(this.options.decimal, '.'))
30+
this.parts = (number = '', decimal = this.options.decimal) => {
31+
var parts = number.toString().split(decimal)
32+
parts[0] = (Number(parts[0]) ? Number(parts[0]) : 0)
3533
if (parts.length > 1) {
36-
parts[1] = parts[1].slice(0, this.options.precision)
34+
parts[1] = parts.slice(1, parts.length).join('')
35+
parts = parts.slice(0, 2)
36+
if (parts[1].length > this.options.precision) {
37+
parts[1] = parts[1].slice(0, this.options.precision)
38+
}
3739
}
38-
return parts
40+
return parts.slice(0, 2)
3941
}
4042
this.addSeparator = () => {
41-
const parts = this.parts()
43+
var parts = this.numbers().split(this.options.decimal)
4244
parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${this.options.separator}`)
4345
if (this.isClean) {
44-
return parts[1] && parts[1].length > 0 ? parts.join(this.options.decimal) : parts[0]
46+
parts[1] = Number(`.${parts[1]}`).toString().replace('0.', '')
47+
return parts[1] && parts[1] > 0 ? parts.join(this.options.decimal) : parts[0]
4548
}
4649
return parts.join(this.options.decimal)
4750
}
4851
this.format = (input) => {
52+
if (input === '') return this.options.null_value
4953
this.input = input
50-
return this.options.prefix + this.addSeparator() + this.options.suffix
54+
return this.negative() + this.options.prefix + this.addSeparator() + this.options.suffix
5155
}
5256
this.unformat = (input) => {
57+
if (input === '') return this.options.null_value
5358
this.input = input
54-
return this.negative() + this.numberOnly()
59+
return this.negative() + this.realNumber()
5560
}
5661
}
5762

‎tests/unit/utils.custom.spec.js

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { NumberFormat } from '../../src/utils'
2+
3+
describe('should not throw error on empty config', () => {
4+
expect(() => new NumberFormat({
5+
prefix: '$',
6+
separator: '.',
7+
decimal: ',',
8+
null_value: '',
9+
})).not.toThrow()
10+
})
11+
describe('when the value is invalid with custom config', () => {
12+
const numberFormat = new NumberFormat({
13+
prefix: '$',
14+
separator: '.',
15+
decimal: ',',
16+
null_value: '',
17+
})
18+
it('should return as follows', () => {
19+
expect(numberFormat.format('')).toEqual('')
20+
expect(numberFormat.format('foo')).toEqual('$0')
21+
expect(numberFormat.format('-foo')).toEqual('$0')
22+
expect(numberFormat.format('-fo,o-')).toEqual('$0,')
23+
expect(numberFormat.format('-fo.o-')).toEqual('$0')
24+
expect(numberFormat.format('!@#$%^&*()')).toEqual('$0')
25+
})
26+
it('should return as follows', () => {
27+
expect(numberFormat.clean().format('')).toEqual('')
28+
expect(numberFormat.clean().format('foo')).toEqual('$0')
29+
expect(numberFormat.clean().format('-foo')).toEqual('$0')
30+
expect(numberFormat.clean().format('-fo.o-')).toEqual('$0')
31+
expect(numberFormat.clean().format('-fo,o-')).toEqual('$0')
32+
expect(numberFormat.clean().format('!@#$%^&*()')).toEqual('$0')
33+
})
34+
it('should return as follows', () => {
35+
expect(numberFormat.unformat('')).toEqual('')
36+
expect(numberFormat.unformat('foo')).toEqual('0')
37+
expect(numberFormat.unformat('-foo')).toEqual('0')
38+
expect(numberFormat.unformat('-fo,o-')).toEqual('0')
39+
expect(numberFormat.unformat('!@#$%^&*()')).toEqual('0')
40+
})
41+
})
42+
describe('format when options are custom', () => {
43+
const numberFormat = new NumberFormat({
44+
prefix: '$',
45+
separator: '.',
46+
decimal: ',',
47+
null_value: '',
48+
})
49+
it('format string value', () => {
50+
expect(numberFormat.format('0')).toEqual('$0')
51+
expect(numberFormat.format('0,')).toEqual('$0,')
52+
expect(numberFormat.format('-0,0')).toEqual('$0,0')
53+
expect(numberFormat.format('0,10')).toEqual('$0,10')
54+
expect(numberFormat.format('0,0-')).toEqual('$0,0')
55+
expect(numberFormat.format('0,10-')).toEqual('-$0,10')
56+
expect(numberFormat.format('12.345,54921')).toEqual('$12.345,54')
57+
expect(numberFormat.format('--12.345,12345')).toEqual('-$12.345,12')
58+
expect(numberFormat.format('12.345.54321,12945')).toEqual('$1.234.554.321,12')
59+
expect(numberFormat.format('-12.345,,54321-')).toEqual('-$12.345,54')
60+
})
61+
it('format numerical value', () => {
62+
expect(numberFormat.format(0)).toEqual('$0,00')
63+
expect(numberFormat.format(0.)).toEqual('$0,00')
64+
expect(numberFormat.format(0.0)).toEqual('$0,00')
65+
expect(numberFormat.format(-0.10)).toEqual('-$0,10')
66+
expect(numberFormat.format(-0.0)).toEqual('$0,00')
67+
expect(numberFormat.format(0.10)).toEqual('$0,10')
68+
expect(numberFormat.format(12345.54921)).toEqual('$12.345,55')
69+
expect(numberFormat.format(12345.12345)).toEqual('$12.345,12')
70+
expect(numberFormat.format(12345.54321)).toEqual('$12.345,54')
71+
expect(numberFormat.format(12345.54321)).toEqual('$12.345,54')
72+
})
73+
it('format and clean numerical value', () => {
74+
expect(numberFormat.clean().format(0)).toEqual('$0')
75+
expect(numberFormat.clean().format(0.)).toEqual('$0')
76+
expect(numberFormat.clean().format(0.0)).toEqual('$0')
77+
expect(numberFormat.clean().format(0.10)).toEqual('$0,1')
78+
expect(numberFormat.clean().format(-0.0)).toEqual('$0')
79+
expect(numberFormat.clean().format(-0.10)).toEqual('-$0,1')
80+
expect(numberFormat.clean().format(12345.54921)).toEqual('$12.345,55')
81+
expect(numberFormat.clean().format(12345.12345)).toEqual('$12.345,12')
82+
expect(numberFormat.clean().format(12345.54321)).toEqual('$12.345,54')
83+
expect(numberFormat.clean().format(12345.54321)).toEqual('$12.345,54')
84+
})
85+
})
86+
describe('unformat when options are default', () => {
87+
const numberFormat = new NumberFormat({
88+
prefix: '$',
89+
separator: '.',
90+
decimal: ',',
91+
null_value: '',
92+
})
93+
it('unformat string value', () => {
94+
expect(numberFormat.unformat('0')).toEqual('0')
95+
expect(numberFormat.unformat('0,')).toEqual('0')
96+
expect(numberFormat.unformat('-0,0')).toEqual('0')
97+
expect(numberFormat.unformat('0,10')).toEqual('0.1')
98+
expect(numberFormat.unformat('0,0-')).toEqual('0')
99+
expect(numberFormat.unformat('0,10-')).toEqual('-0.1')
100+
expect(numberFormat.unformat('12.345,54921')).toEqual('12345.54')
101+
expect(numberFormat.unformat('--12.345,12345')).toEqual('-12345.12')
102+
expect(numberFormat.unformat('12.345.54321,12345')).toEqual('1234554321.12')
103+
expect(numberFormat.unformat('-12.345,,54321-')).toEqual('-12345.54')
104+
})
105+
it('unformat numerical value', () => {
106+
expect(numberFormat.unformat(0)).toEqual('0')
107+
expect(numberFormat.unformat(0.)).toEqual('0')
108+
expect(numberFormat.unformat(0.0)).toEqual('0')
109+
expect(numberFormat.unformat(-0.10)).toEqual('-0.1')
110+
expect(numberFormat.unformat(-0.0)).toEqual('0')
111+
expect(numberFormat.unformat(0.10)).toEqual('0.1')
112+
expect(numberFormat.unformat(12345.54921)).toEqual('12345.55')
113+
expect(numberFormat.unformat(12345.12345)).toEqual('12345.12')
114+
expect(numberFormat.unformat(12345.54321)).toEqual('12345.54')
115+
expect(numberFormat.unformat(12345.54321)).toEqual('12345.54')
116+
})
117+
it('unformat and clean numerical value', () => {
118+
expect(numberFormat.clean().unformat(0)).toEqual('0')
119+
expect(numberFormat.clean().unformat(0.)).toEqual('0')
120+
expect(numberFormat.clean().unformat(0.0)).toEqual('0')
121+
expect(numberFormat.clean().unformat(0.10)).toEqual('0.1')
122+
expect(numberFormat.clean().unformat(-0.0)).toEqual('0')
123+
expect(numberFormat.clean().unformat(-0.10)).toEqual('-0.1')
124+
expect(numberFormat.clean().unformat(12345.54921)).toEqual('12345.55')
125+
expect(numberFormat.clean().unformat(12345.12345)).toEqual('12345.12')
126+
expect(numberFormat.clean().unformat(12345.54321)).toEqual('12345.54')
127+
expect(numberFormat.clean().unformat(12345.54321)).toEqual('12345.54')
128+
})
129+
})
130+
131+

‎tests/unit/utils.default.spec.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { NumberFormat } from '../../src/utils'
2+
3+
describe('should not throw error on empty config', () => {
4+
expect(() => new NumberFormat({})).not.toThrow()
5+
})
6+
describe('when the value is invalid with default config', () => {
7+
const numberFormat = new NumberFormat({})
8+
it('should return as follows', () => {
9+
expect(numberFormat.format('')).toEqual(0)
10+
expect(numberFormat.format('foo')).toEqual('0')
11+
expect(numberFormat.format('-foo')).toEqual('0')
12+
expect(numberFormat.format('-fo,o-')).toEqual('0')
13+
expect(numberFormat.format('!@#$%^&*()')).toEqual('0')
14+
})
15+
it('should return as follows', () => {
16+
expect(numberFormat.clean().format('')).toEqual(0)
17+
expect(numberFormat.clean().format('foo')).toEqual('0')
18+
expect(numberFormat.clean().format('-foo')).toEqual('0')
19+
expect(numberFormat.clean().format('-fo,o-')).toEqual('0')
20+
expect(numberFormat.clean().format('!@#$%^&*()')).toEqual('0')
21+
})
22+
it('should return as follows', () => {
23+
expect(numberFormat.unformat('')).toEqual(0)
24+
expect(numberFormat.unformat('foo')).toEqual('0')
25+
expect(numberFormat.unformat('-foo')).toEqual('0')
26+
expect(numberFormat.unformat('-fo,o-')).toEqual('0')
27+
expect(numberFormat.unformat('!@#$%^&*()')).toEqual('0')
28+
})
29+
})
30+
describe('format when options are default', () => {
31+
const numberFormat = new NumberFormat({})
32+
it('format string value', () => {
33+
expect(numberFormat.format('0')).toEqual('0')
34+
expect(numberFormat.format('0.')).toEqual('0.')
35+
expect(numberFormat.format('-0.0')).toEqual('0.0')
36+
expect(numberFormat.format('0.10')).toEqual('0.10')
37+
expect(numberFormat.format('0.0-')).toEqual('0.0')
38+
expect(numberFormat.format('0.10-')).toEqual('-0.10')
39+
expect(numberFormat.format('12,345.54921')).toEqual('12,345.54')
40+
expect(numberFormat.format('--12,345.12345')).toEqual('-12,345.12')
41+
expect(numberFormat.format('12,345.54321.12345')).toEqual('12,345.54')
42+
expect(numberFormat.format('-12,345..54321-')).toEqual('-12,345.54')
43+
})
44+
it('format numerical value', () => {
45+
expect(numberFormat.format(0)).toEqual('0.00')
46+
expect(numberFormat.format(0.)).toEqual('0.00')
47+
expect(numberFormat.format(0.0)).toEqual('0.00')
48+
expect(numberFormat.format(-0.10)).toEqual('-0.10')
49+
expect(numberFormat.format(-0.0)).toEqual('0.00')
50+
expect(numberFormat.format(0.10)).toEqual('0.10')
51+
expect(numberFormat.format(12345.54921)).toEqual('12,345.55')
52+
expect(numberFormat.format(12345.12345)).toEqual('12,345.12')
53+
expect(numberFormat.format(12345.54321)).toEqual('12,345.54')
54+
expect(numberFormat.format(12345.54321)).toEqual('12,345.54')
55+
})
56+
it('format and clean numerical value', () => {
57+
expect(numberFormat.clean().format(0)).toEqual('0')
58+
expect(numberFormat.clean().format(0.)).toEqual('0')
59+
expect(numberFormat.clean().format(0.0)).toEqual('0')
60+
expect(numberFormat.clean().format(0.10)).toEqual('0.1')
61+
expect(numberFormat.clean().format(-0.0)).toEqual('0')
62+
expect(numberFormat.clean().format(-0.10)).toEqual('-0.1')
63+
expect(numberFormat.clean().format(12345.54921)).toEqual('12,345.55')
64+
expect(numberFormat.clean().format(12345.12345)).toEqual('12,345.12')
65+
expect(numberFormat.clean().format(12345.54321)).toEqual('12,345.54')
66+
expect(numberFormat.clean().format(12345.54321)).toEqual('12,345.54')
67+
})
68+
})
69+
describe('unformat when options are default', () => {
70+
const numberFormat = new NumberFormat({})
71+
it('unformat string value', () => {
72+
expect(numberFormat.unformat('0')).toEqual('0')
73+
expect(numberFormat.unformat('0.')).toEqual('0')
74+
expect(numberFormat.unformat('-0.0')).toEqual('0')
75+
expect(numberFormat.unformat('0.10')).toEqual('0.1')
76+
expect(numberFormat.unformat('0.0-')).toEqual('0')
77+
expect(numberFormat.unformat('0.10-')).toEqual('-0.1')
78+
expect(numberFormat.unformat('12,345.54921')).toEqual('12345.54')
79+
expect(numberFormat.unformat('--12,345.12345')).toEqual('-12345.12')
80+
expect(numberFormat.unformat('12,345.54321.12345')).toEqual('12345.54')
81+
expect(numberFormat.unformat('-12,345..54321-')).toEqual('-12345.54')
82+
})
83+
it('unformat numerical value', () => {
84+
expect(numberFormat.unformat(0)).toEqual('0')
85+
expect(numberFormat.unformat(0.)).toEqual('0')
86+
expect(numberFormat.unformat(0.0)).toEqual('0')
87+
expect(numberFormat.unformat(-0.10)).toEqual('-0.1')
88+
expect(numberFormat.unformat(-0.0)).toEqual('0')
89+
expect(numberFormat.unformat(0.10)).toEqual('0.1')
90+
expect(numberFormat.unformat(12345.54921)).toEqual('12345.55')
91+
expect(numberFormat.unformat(12345.12345)).toEqual('12345.12')
92+
expect(numberFormat.unformat(12345.54321)).toEqual('12345.54')
93+
expect(numberFormat.unformat(12345.54321)).toEqual('12345.54')
94+
})
95+
it('unformat and clean numerical value', () => {
96+
expect(numberFormat.clean().unformat(0)).toEqual('0')
97+
expect(numberFormat.clean().unformat(0.)).toEqual('0')
98+
expect(numberFormat.clean().unformat(0.0)).toEqual('0')
99+
expect(numberFormat.clean().unformat(0.10)).toEqual('0.1')
100+
expect(numberFormat.clean().unformat(-0.0)).toEqual('0')
101+
expect(numberFormat.clean().unformat(-0.10)).toEqual('-0.1')
102+
expect(numberFormat.clean().unformat(12345.54921)).toEqual('12345.55')
103+
expect(numberFormat.clean().unformat(12345.12345)).toEqual('12345.12')
104+
expect(numberFormat.clean().unformat(12345.54321)).toEqual('12345.54')
105+
expect(numberFormat.clean().unformat(12345.54321)).toEqual('12345.54')
106+
})
107+
})
108+
109+

0 commit comments

Comments
 (0)