vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'master' of https://github.com/primefaces/primevue

pull/466/head
cagataycivici 2020-09-02 10:48:44 +03:00
parent 42bc801f55 d59dc76eb9
commit fc6de3164b
2 changed files with 129 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
CHANGELOG.md
View File

@ -1,5 +1,27 @@
# Changelog # Changelog
## [2.0.8](https://github.com/primefaces/primevue/tree/2.0.8) (2020-08-27)
[Full Changelog](https://github.com/primefaces/primevue/compare/2.0.7...2.0.8)
**Implemented New Features and Enhancements:**
- Add Del key support to InputNumber [\#452](https://github.com/primefaces/primevue/issues/452)
- Documentation for primeflex setup [\#434](https://github.com/primefaces/primevue/issues/434)
- InputNumber with decimals should support entering comma/decimal point [\#432](https://github.com/primefaces/primevue/issues/432)
- dismissableMask and closeOnEscape for Dialog [\#372](https://github.com/primefaces/primevue/issues/372)
**Fixed bugs:**
- Can't type - as first symbol into an Inputnumber [\#453](https://github.com/primefaces/primevue/issues/453)
- When autocomplete is bound to an object, float label overlaps in some circumstances [\#450](https://github.com/primefaces/primevue/issues/450)
- TreeTable template always render field value [\#445](https://github.com/primefaces/primevue/issues/445)
- Setting placeholder text for Editor / Quill component doesn't work [\#433](https://github.com/primefaces/primevue/issues/433)
- InputNumber with stacked Buttons is broken [\#431](https://github.com/primefaces/primevue/issues/431)
- Doc error on InputNumber [\#430](https://github.com/primefaces/primevue/issues/430)
- InputNumber throws error if emptied [\#429](https://github.com/primefaces/primevue/issues/429)
- Pill Text not centered [\#428](https://github.com/primefaces/primevue/issues/428)
## [2.0.7](https://github.com/primefaces/primevue/tree/2.0.7) (2020-08-05) ## [2.0.7](https://github.com/primefaces/primevue/tree/2.0.7) (2020-08-05)
[Full Changelog](https://github.com/primefaces/primevue/compare/2.0.6...2.0.7) [Full Changelog](https://github.com/primefaces/primevue/compare/2.0.6...2.0.7)

145
src/components/inputnumber/InputNumber.vue
View File

@ -111,6 +111,7 @@ export default {
_suffix: null, _suffix: null,
_prefix: null, _prefix: null,
_index: null, _index: null,
groupChar: '',
isSpecialChar: null, isSpecialChar: null,
timer: null, timer: null,
data() { data() {
@ -118,18 +119,40 @@ export default {
focused: false focused: false
} }
}, },
watch: {
locale(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
localeMatcher(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
mode(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
currency(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
currencyDisplay(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
useGrouping(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
minFractionDigits(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
maxFractionDigits(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
suffix(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
},
prefix(newValue, oldValue) {
this.updateConstructParser(newValue, oldValue);
}
},
created() { created() {
this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions()); this.constructParser();
const numerals = [...new Intl.NumberFormat(this.locale, {useGrouping: false}).format(9876543210)].reverse();
const index = new Map(numerals.map((d, i) => [d, i]));
this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
this._decimal = this.getDecimalExpression();
this._group = this.getGroupingExpression();
this._minusSign = this.getMinusSignExpression();
this._currency = this.getCurrencyExpression();
this._suffix = new RegExp(`[${this.suffix||''}]`, 'g');
this._prefix = new RegExp(`[${this.prefix||''}]`, 'g');
this._index = d => index.get(d);
}, },
methods: { methods: {
getOptions() { getOptions() {
@ -143,13 +166,32 @@ export default {
maximumFractionDigits: this.maxFractionDigits maximumFractionDigits: this.maxFractionDigits
}; };
}, },
constructParser() {
this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions());
const numerals = [...new Intl.NumberFormat(this.locale, {useGrouping: false}).format(9876543210)].reverse();
const index = new Map(numerals.map((d, i) => [d, i]));
this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
this._decimal = this.getDecimalExpression();
this._group = this.getGroupingExpression();
this._minusSign = this.getMinusSignExpression();
this._currency = this.getCurrencyExpression();
this._suffix = new RegExp(`[${this.suffix||''}]`, 'g');
this._prefix = new RegExp(`[${this.prefix||''}]`, 'g');
this._index = d => index.get(d);
},
updateConstructParser(newValue, oldValue) {
if (newValue !== oldValue) {
this.constructParser();
}
},
getDecimalExpression() { getDecimalExpression() {
const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false}); const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false});
return new RegExp(`[${formatter.format(1.1).trim().replace(this._numeral, '')}]`, 'g'); return new RegExp(`[${formatter.format(1.1).trim().replace(this._numeral, '')}]`, 'g');
}, },
getGroupingExpression() { getGroupingExpression() {
const formatter = new Intl.NumberFormat(this.locale, {useGrouping: true}); const formatter = new Intl.NumberFormat(this.locale, {useGrouping: true});
return new RegExp(`[${formatter.format(1000).trim().replace(this._numeral, '')}]`, 'g'); this.groupChar = formatter.format(1000000).trim().replace(this._numeral, '');
return new RegExp(`[${this.groupChar}]`, 'g');
}, },
getMinusSignExpression() { getMinusSignExpression() {
const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false}); const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false});
@ -224,7 +266,7 @@ export default {
let currentValue = this.parseValue(this.$refs.input.$el.value) || 0; let currentValue = this.parseValue(this.$refs.input.$el.value) || 0;
let newValue = this.validateValue(currentValue + step); let newValue = this.validateValue(currentValue + step);
this.updateInput(newValue, 'spin'); this.updateInput(newValue, null, 'spin');
this.updateModel(event, newValue); this.updateModel(event, newValue);
}, },
onUpButtonMouseDown(event) { onUpButtonMouseDown(event) {
@ -344,11 +386,11 @@ export default {
} }
} }
this.updateValue(event, newValueStr, 'delete-single'); this.updateValue(event, newValueStr, null, 'delete-single');
} }
else { else {
newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd); newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
this.updateValue(event, newValueStr, 'delete-range'); this.updateValue(event, newValueStr, null, 'delete-range');
} }
break; break;
@ -384,11 +426,11 @@ export default {
} }
} }
this.updateValue(event, newValueStr, 'delete-back-single'); this.updateValue(event, newValueStr, null, 'delete-back-single');
} }
else { else {
newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd); newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
this.updateValue(event, newValueStr, 'delete-range'); this.updateValue(event, newValueStr, null, 'delete-range');
} }
break; break;
@ -401,9 +443,10 @@ export default {
let code = event.which || event.keyCode; let code = event.which || event.keyCode;
let char = String.fromCharCode(code); let char = String.fromCharCode(code);
const isDecimalSign = this.isDecimalSign(char); const isDecimalSign = this.isDecimalSign(char);
const isMinusSign = this.isMinusSign(char);
if ((48 <= code && code <= 57) || this.isMinusSign(char) || isDecimalSign) { if ((48 <= code && code <= 57) || isMinusSign || isDecimalSign) {
this.insert(event, char, isDecimalSign); this.insert(event, char, { isDecimalSign, isMinusSign });
} }
}, },
onPaste(event) { onPaste(event) {
@ -432,21 +475,33 @@ export default {
return false; return false;
}, },
insert(event, text, isDecimalSign = false) { insert(event, text, sign = { isDecimalSign: false, isMinusSign: false }) {
let selectionStart = this.$refs.input.$el.selectionStart; let selectionStart = this.$refs.input.$el.selectionStart;
let selectionEnd = this.$refs.input.$el.selectionEnd; let selectionEnd = this.$refs.input.$el.selectionEnd;
let inputValue = this.$refs.input.$el.value.trim(); let inputValue = this.$refs.input.$el.value.trim();
const decimalCharIndex = inputValue.search(this._decimal); const decimalCharIndex = inputValue.search(this._decimal);
this._decimal.lastIndex = 0; this._decimal.lastIndex = 0;
const minusCharIndex = inputValue.search(this._minusSign);
this._minusSign.lastIndex = 0;
let newValueStr; let newValueStr;
if (isDecimalSign) { if (sign.isMinusSign) {
if (selectionStart === 0) {
newValueStr = inputValue;
if (minusCharIndex === -1 || selectionEnd !== 0) {
newValueStr = this.insertText(inputValue, text, 0, selectionEnd);
}
this.updateValue(event, newValueStr, text, 'insert');
}
}
else if (sign.isDecimalSign) {
if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) { if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
this.updateValue(event, inputValue, 'insert'); this.updateValue(event, inputValue, text, 'insert');
} }
else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) { else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd); newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
this.updateValue(event, newValueStr, 'insert'); this.updateValue(event, newValueStr, text, 'insert');
} }
} }
else { else {
@ -455,13 +510,13 @@ export default {
if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) { if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) { if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) {
newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length); newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length);
this.updateValue(event, newValueStr, 'insert'); this.updateValue(event, newValueStr, text, 'insert');
} }
} }
else { else {
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd); newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert'; const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
this.updateValue(event, newValueStr, operation); this.updateValue(event, newValueStr, text, operation);
} }
} }
}, },
@ -555,10 +610,10 @@ export default {
this._group.lastIndex = 0; this._group.lastIndex = 0;
this._minusSign.lastIndex = 0; this._minusSign.lastIndex = 0;
}, },
updateValue(event, valueStr, operation) { updateValue(event, valueStr, insertedValueStr, operation) {
if (valueStr != null) { if (valueStr != null) {
let newValue = this.parseValue(valueStr); let newValue = this.parseValue(valueStr);
this.updateInput(newValue, operation); this.updateInput(newValue, insertedValueStr, operation);
} }
}, },
validateValue(value) { validateValue(value) {
@ -570,9 +625,13 @@ export default {
return this.max; return this.max;
} }
if (value === '-') { // Minus sign
return null;
}
return value; return value;
}, },
updateInput(value, operation) { updateInput(value, insertedValueStr, operation) {
let inputValue = this.$refs.input.$el.value; let inputValue = this.$refs.input.$el.value;
let newValue = this.formatValue(value); let newValue = this.formatValue(value);
let currentLength = inputValue.length; let currentLength = inputValue.length;
@ -584,26 +643,36 @@ export default {
this.$refs.input.$el.setSelectionRange(this.$refs.input.$el.selectionStart + 1, this.$refs.input.$el.selectionStart + 1); this.$refs.input.$el.setSelectionRange(this.$refs.input.$el.selectionStart + 1, this.$refs.input.$el.selectionStart + 1);
} }
else { else {
let selectionStart = this.$refs.input.$el.selectionEnd; let selectionStart = this.$refs.input.$el.selectionStart;
let selectionEnd = this.$refs.input.$el.selectionEnd; let selectionEnd = this.$refs.input.$el.selectionEnd;
this.$refs.input.$el.value = newValue; this.$refs.input.$el.value = newValue;
let newLength = newValue.length; let newLength = newValue.length;
if (newLength === currentLength) { if (operation === 'range-insert') {
const startValue = this.parseValue((inputValue || '').slice(0, selectionStart));
const startValueStr = startValue !== null ? startValue.toString() : '';
const startExpr = startValueStr.split('').join(`(${this.groupChar})?`);
const sRegex = new RegExp(startExpr, 'g');
sRegex.test(newValue);
const tExpr = insertedValueStr.split('').join(`(${this.groupChar})?`);
const tRegex = new RegExp(tExpr, 'g');
tRegex.test(newValue.slice(sRegex.lastIndex));
selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
}
else if (newLength === currentLength) {
if (operation === 'insert' || operation === 'delete-back-single') if (operation === 'insert' || operation === 'delete-back-single')
this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1); this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
else if (operation === 'range-insert')
this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
else if (operation === 'delete-single') else if (operation === 'delete-single')
this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1); this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
else if (operation === 'delete-range') else if (operation === 'delete-range' || operation === 'spin')
this.$refs.input.$el.setSelectionRange(selectionStart, selectionStart); this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
else if (operation === 'spin')
this.$refs.input.$el.setSelectionRange(selectionStart, selectionEnd);
} }
else if (operation === 'delete-back-single') { else if (operation === 'delete-back-single') {
let prevChar = inputValue.charAt(selectionStart - 1); let prevChar = inputValue.charAt(selectionEnd - 1);
let nextChar = inputValue.charAt(selectionStart); let nextChar = inputValue.charAt(selectionEnd);
let diff = currentLength - newLength; let diff = currentLength - newLength;
let isGroupChar = this._group.test(nextChar); let isGroupChar = this._group.test(nextChar);