Skip to content

Commit 5365412

Browse files
author
Dipak Sarkar
committed
Merge branch 'vue2.0'
2 parents b6517de + 8c88ca5 commit 5365412

File tree

7 files changed

+149
-138
lines changed

7 files changed

+149
-138
lines changed

‎docs/.vuepress/components/Example.vue‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@
88
:dark="false"
99
dense
1010
outlined
11+
v-model="price"
1112
>
12-
<template v-slot:control>
13+
<template v-slot:control="{ id, floatingLabel, value, emitValue }">
1314
<number
15+
:id="id"
1416
class="q-field__input"
15-
v-model="price"
17+
:value="value"
18+
@input="emitValue"
1619
v-bind="config"
20+
v-show="floatingLabel"
1721
/>
1822
</template>
1923
</q-field>
@@ -25,12 +29,16 @@
2529
:dark="false"
2630
dense
2731
outlined
32+
v-model="reverseFill"
2833
>
29-
<template v-slot:control>
34+
<template v-slot:control="{ id, floatingLabel, value, emitValue }">
3035
<number
36+
:id="id"
3137
class="q-field__input"
32-
v-model="reverseFill"
38+
:value="value"
39+
@input="emitValue"
3340
v-bind="configReverseFill"
41+
v-show="floatingLabel"
3442
/>
3543
</template>
3644
</q-field>
@@ -90,8 +98,8 @@ export default {
9098
priceDirective: null,
9199
priceUnmasked: 6789.10,
92100
config: {
93-
decimal: ',',
94-
separator: '.',
101+
decimal: '.',
102+
separator: ',',
95103
prefix: '$',
96104
suffix: ' %',
97105
precision: 2,

‎src/component.vue‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,6 @@ export default {
6262
unmaskedValue: null
6363
}
6464
},
65-
watch: {
66-
masked() {
67-
this.$emit('input', this.emittedValue)
68-
}
69-
},
7065
methods: {
7166
input({ target }) {
7267
this.maskedValue = target.value

‎src/core.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function updateValue(el, vnode, { emit = true, force = false, clean = fal
7777

7878
const number = new NumberFormat(config).clean(clean)
7979
let masked = number.format(currentValue)
80-
let unmasked = number.unformat(currentValue)
80+
let unmasked = number.clean(true).unformat(currentValue)
8181

8282
// check value with in range max and min value
8383
if (clean) {
@@ -128,13 +128,6 @@ export function inputHandler(event) {
128128
positionFromEnd = Math.max(positionFromEnd, config.suffix.length)
129129
positionFromEnd = target.value.length - positionFromEnd
130130
positionFromEnd = Math.max(positionFromEnd, config.prefix.length + 1)
131-
const decimalPosition = target.value.indexOf(config.decimal)
132-
const diff = positionFromEnd - decimalPosition
133-
const maxLength = target.value.length - config.suffix.length
134-
const positionAfterDecimal = positionFromEnd + 1
135-
if (decimalPosition > 0 && diff > 0 && positionAfterDecimal <= maxLength) {
136-
positionFromEnd = positionAfterDecimal
137-
}
138131
updateCursor(target, positionFromEnd)
139132

140133
if (oldValue !== target.value) {

‎src/directive.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable prefer-object-spread */
12
import * as core from './core'
23
import defaults from './options'
34

@@ -6,10 +7,10 @@ const CONFIG_KEY = core.CONFIG_KEY
67
export default {
78
bind: (el, { value, modifiers }, vnode) => {
89
el = core.getInputElement(el)
9-
const config = core.normalizeConfig(defaults, Object.assign(value, modifiers))
10+
const config = Object.assign({}, defaults, value, modifiers)
1011
el[CONFIG_KEY] = { config }
1112
// set initial value
12-
core.updateValue(el, vnode, { force: config.prefill })
13+
core.updateValue(el, vnode, { force: config.prefill, clean: true })
1314
},
1415

1516
inserted: (el) => {
@@ -30,11 +31,13 @@ export default {
3031
// check decimal key and insert to current element
3132
// updated cursor position after format the value
3233
el.onkeydown = (e) => {
33-
if ([110, 190].includes(e.keyCode) || e.key === config.decimal) {
34+
if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && !el.value.includes(config.decimal)) {
3435
e.preventDefault()
3536
el.setRangeText(config.decimal)
3637
el.dispatchEvent(new Event('input'))
3738
core.updateCursor(el, el.value.indexOf(config.decimal) + 1)
39+
} else if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && el.value.includes(config.decimal)) {
40+
e.preventDefault()
3841
}
3942
}
4043

@@ -45,8 +48,8 @@ export default {
4548
el = core.getInputElement(el)
4649
if (value !== oldValue) {
4750
const { config } = el[CONFIG_KEY]
48-
el[CONFIG_KEY].config = core.normalizeConfig(config, Object.assign(value, modifiers))
49-
core.updateValue(el, vnode, { force: true })
51+
el[CONFIG_KEY].config = Object.assign({}, config, value, modifiers)
52+
core.updateValue(el, vnode, { force: true, clean: true })
5053
} else {
5154
core.updateValue(el, vnode)
5255
}

‎src/number-format.js‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,91 +4,107 @@ import options from './options'
44
* Number format function
55
* @param {Object} options
66
*/
7-
export default function NumberFormat(opt = options) {
8-
this.options = Object.assign(options, opt)
7+
export default function NumberFormat(config = options) {
8+
this.options = Object.assign(options, config)
99
this.input = ''
1010
this.number = ''
1111
this.isClean = false
12+
1213
this.isNull = (input = this.input) => !this.numberOnly(input, new RegExp('[^0-9]+', 'gi'))
14+
1315
this.clean = (clean = false) => {
1416
this.isClean = clean
1517
return this
1618
}
19+
1720
this.sign = () => {
1821
const sign = (this.input.toString().indexOf('-') >= 0 && this.realNumber() > 0) ? '-' : ''
1922
return sign
2023
}
24+
2125
function between(min, n, max) {
2226
return Math.max(min, Math.min(n, max))
2327
}
28+
2429
// Uncaught RangeError: toFixed() digits argument must be between 0 and 20 at Number.toFixed
2530
function fixed(precision) {
2631
return between(0, precision, 20)
2732
}
33+
2834
function toFixed(numbers, precision) {
2935
// eslint-disable-next-line no-restricted-properties
3036
var exp = Math.pow(10, precision)
3137
var float = parseFloat(numbers) / exp
3238
return float.toFixed(fixed(precision))
3339
}
40+
3441
this.toNumber = (string) => Number(string)
42+
3543
this.numberOnly = (string, regExp) => string.toString().replace(regExp, '')
44+
3645
this.isNegative = this.sign() === '-'
46+
3747
this.numbers = () => {
3848
if (this.options.reverseFill) {
3949
this.number = toFixed(this.numberOnly(this.input, /\D+/g), this.options.precision).replace('.', this.options.decimal)
4050
} else if (typeof this.input === 'number') {
41-
this.number = this.toNumber(this.input.toFixed(this.options.precision)).toString().replace('-', '').replace('.', this.options.decimal)
42-
// eslint-disable-next-line no-restricted-globals
43-
} else if (!isNaN(this.toNumber(this.input))) {
44-
this.number = this.input.replace('-', '').replace('.', this.options.decimal)
51+
if (this.isClean) {
52+
this.number = this.toNumber(this.input.toFixed(this.options.precision)).toString().replace('-', '').replace('.', this.options.decimal)
53+
} else {
54+
this.number = this.toNumber(this.input).toString().replace('-', '').replace('.', this.options.decimal)
55+
}
4556
} else {
4657
this.number = this.numberOnly(this.input, new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi'))
4758
this.number = this.parts(this.number).join(this.options.decimal)
4859
}
4960
return this.number
5061
}
62+
5163
this.realNumber = () => this.toNumber(this.numbers().toString().replace(this.options.decimal, '.'))
64+
5265
this.parts = (number = '', decimal = this.options.decimal) => {
5366
var parts = number.toString().split(decimal)
5467
parts[0] = this.toNumber(parts[0]) || 0
5568
if (parts.length > 1) {
5669
parts[1] = parts.slice(1, parts.length).join('')
5770
parts = parts.slice(0, 2)
58-
if (parts[1].length > this.options.precision) {
71+
if (this.isClean && parts[1].length > this.options.precision) {
5972
parts[1] = this.toNumber(`.${parts[1]}`).toFixed(this.options.precision).toString().replace('0.', '')
6073
}
6174
}
6275
return parts.slice(0, 2)
6376
}
77+
6478
this.addSeparator = () => {
6579
var parts = this.numbers().split(this.options.decimal)
6680
parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${this.options.separator}`)
6781
if (this.isClean) {
6882
parts[1] = this.toNumber(`.${parts[1]}`).toString().replace('0.', '')
69-
return parts[1] && parts[1] > 0 ? parts.join(this.options.decimal) : parts[0]
83+
return parts[1] && parts[1] >= 0 ? parts.join(this.options.decimal) : parts[0]
7084
}
7185
return parts.join(this.options.decimal)
7286
}
87+
7388
/**
7489
* Format the input with default config if there is no constructor config
7590
* @param {Number, String} input
7691
* @return {String}
7792
*/
7893
this.format = (input) => {
7994
if (input === '') return this.options.null_value
80-
this.input = input
95+
this.input = input || this.options.null_value
8196
if (this.isNull()) return this.options.null_value
8297
return this.sign() + this.options.prefix + this.addSeparator() + this.options.suffix
8398
}
99+
84100
/**
85101
* Unformat the input with default config if there is no constructor config
86102
* @param {Number, String} input
87103
* @return {String}
88104
*/
89105
this.unformat = (input) => {
90106
if (input === '') return this.options.null_value
91-
this.input = input
107+
this.input = input || this.options.null_value
92108
if (this.isNull()) return this.options.null_value
93109
return this.toNumber(this.sign() + this.realNumber())
94110
}

‎tests/unit/number-format.custom.spec.js‎

Lines changed: 53 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,19 @@ describe('when the value is invalid with custom config', () => {
2424
expect(numberFormat.format('!@#$%^&*()')).toEqual('')
2525
})
2626
it('should return as follows', () => {
27-
expect(numberFormat.clean().format('')).toEqual('')
28-
expect(numberFormat.clean().format('foo')).toEqual('')
29-
expect(numberFormat.clean().format('-foo')).toEqual('')
30-
expect(numberFormat.clean().format('-fo.o-')).toEqual('')
31-
expect(numberFormat.clean().format('-fo,o-')).toEqual('')
32-
expect(numberFormat.clean().format('!@#$%^&*()')).toEqual('')
27+
expect(numberFormat.clean(true).format('')).toEqual('')
28+
expect(numberFormat.clean(true).format('foo')).toEqual('')
29+
expect(numberFormat.clean(true).format('-foo')).toEqual('')
30+
expect(numberFormat.clean(true).format('-fo.o-')).toEqual('')
31+
expect(numberFormat.clean(true).format('-fo,o-')).toEqual('')
32+
expect(numberFormat.clean(true).format('!@#$%^&*()')).toEqual('')
3333
})
3434
it('should return as follows', () => {
35-
expect(numberFormat.unformat('')).toEqual('')
36-
expect(numberFormat.unformat('foo')).toEqual('')
37-
expect(numberFormat.unformat('-foo')).toEqual('')
38-
expect(numberFormat.unformat('-fo.o-')).toEqual('')
39-
expect(numberFormat.unformat('!@#$%^&*()')).toEqual('')
35+
expect(numberFormat.clean(true).unformat('')).toEqual('')
36+
expect(numberFormat.clean(true).unformat('foo')).toEqual('')
37+
expect(numberFormat.clean(true).unformat('-foo')).toEqual('')
38+
expect(numberFormat.clean(true).unformat('-fo.o-')).toEqual('')
39+
expect(numberFormat.clean(true).unformat('!@#$%^&*()')).toEqual('')
4040
})
4141
})
4242
describe('format when options are custom', () => {
@@ -53,34 +53,34 @@ describe('format when options are custom', () => {
5353
expect(numberFormat.format('0,10')).toEqual('$0,10')
5454
expect(numberFormat.format('0,0-')).toEqual('$0,0')
5555
expect(numberFormat.format('0,10-')).toEqual('-$0,10')
56-
expect(numberFormat.format('12.345,54921')).toEqual('$12.345,55')
57-
expect(numberFormat.format('--12.345,12345')).toEqual('-$12.345,12')
58-
expect(numberFormat.format('12.345.54321,12945')).toEqual('$1.234.554.321,13')
59-
expect(numberFormat.format('-12.345,,54321-')).toEqual('-$12.345,54')
56+
expect(numberFormat.format('12.345,54921')).toEqual('$12.345,54921')
57+
expect(numberFormat.format('--12.345,12345')).toEqual('-$12.345,12345')
58+
expect(numberFormat.format('12.345.54321,12945')).toEqual('$1.234.554.321,12945')
59+
expect(numberFormat.format('-12.345,,54321-')).toEqual('-$12.345,54321')
6060
})
6161
it('format numerical value', () => {
62-
expect(numberFormat.format(0)).toEqual('$0')
63-
expect(numberFormat.format(0.)).toEqual('$0')
64-
expect(numberFormat.format(0.0)).toEqual('$0')
62+
expect(numberFormat.format(0)).toEqual('')
63+
expect(numberFormat.format(0.)).toEqual('')
64+
expect(numberFormat.format(0.0)).toEqual('')
6565
expect(numberFormat.format(-0.10)).toEqual('-$0,1')
66-
expect(numberFormat.format(-0.0)).toEqual('$0')
66+
expect(numberFormat.format(-0.0)).toEqual('')
6767
expect(numberFormat.format(0.10)).toEqual('$0,1')
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')
68+
expect(numberFormat.format(12345.54921)).toEqual('$12.345,54921')
69+
expect(numberFormat.format(12345.12345)).toEqual('$12.345,12345')
70+
expect(numberFormat.format(12345.54321)).toEqual('$12.345,54321')
71+
expect(numberFormat.format(12345.54321)).toEqual('$12.345,54321')
7272
})
7373
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')
74+
expect(numberFormat.clean(true).format(0)).toEqual('')
75+
expect(numberFormat.clean(true).format(0.)).toEqual('')
76+
expect(numberFormat.clean(true).format(0.0)).toEqual('')
77+
expect(numberFormat.clean(true).format(0.10)).toEqual('$0,1')
78+
expect(numberFormat.clean(true).format(-0.0)).toEqual('')
79+
expect(numberFormat.clean(true).format(-0.10)).toEqual('-$0,1')
80+
expect(numberFormat.clean(true).format(12345.54921)).toEqual('$12.345,55')
81+
expect(numberFormat.clean(true).format(12345.12345)).toEqual('$12.345,12')
82+
expect(numberFormat.clean(true).format(12345.54321)).toEqual('$12.345,54')
83+
expect(numberFormat.clean(true).format(12345.54321)).toEqual('$12.345,54')
8484
})
8585
})
8686
describe('unformat when options are default', () => {
@@ -91,29 +91,27 @@ describe('unformat when options are default', () => {
9191
null_value: '',
9292
})
9393
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.55)
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)
94+
expect(numberFormat.clean(true).unformat('0')).toEqual(0)
95+
expect(numberFormat.clean(true).unformat('0,')).toEqual(0)
96+
expect(numberFormat.clean(true).unformat('-0,0')).toEqual(0)
97+
expect(numberFormat.clean(true).unformat('0,10')).toEqual(0.1)
98+
expect(numberFormat.clean(true).unformat('0,0-')).toEqual(0)
99+
expect(numberFormat.clean(true).unformat('0,10-')).toEqual(-0.1)
100+
expect(numberFormat.clean(true).unformat('12.345,54921')).toEqual(12345.55)
101+
expect(numberFormat.clean(true).unformat('--12.345,12345')).toEqual(-12345.12)
102+
expect(numberFormat.clean(true).unformat('12.345.54321,12345')).toEqual(1234554321.12)
103+
expect(numberFormat.clean(true).unformat('-12.345,,54321-')).toEqual(-12345.54)
104104
})
105105
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)
106+
expect(numberFormat.clean(true).unformat(0)).toEqual('')
107+
expect(numberFormat.clean(true).unformat(0.)).toEqual('')
108+
expect(numberFormat.clean(true).unformat(0.0)).toEqual('')
109+
expect(numberFormat.clean(true).unformat(-0.10)).toEqual(-0.1)
110+
expect(numberFormat.clean(true).unformat(-0.0)).toEqual('')
111+
expect(numberFormat.clean(true).unformat(0.10)).toEqual(0.1)
112+
expect(numberFormat.clean(true).unformat(12345.54921)).toEqual(12345.55)
113+
expect(numberFormat.clean(true).unformat(12345.12345)).toEqual(12345.12)
114+
expect(numberFormat.clean(true).unformat(12345.54321)).toEqual(12345.54)
115+
expect(numberFormat.clean(true).unformat(12345.54321)).toEqual(12345.54)
116116
})
117117
})
118-
119-

0 commit comments

Comments
 (0)