primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 19.5 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.inputnumber=function(t,e,n){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=i(t),r=i(e),u={name:"InputNumber",inheritAttrs:!1,emits:["update:modelValue","input"],props:{modelValue:{type:Number,default:null},format:{type:Boolean,default:!0},showButtons:{type:Boolean,default:!1},buttonLayout:{type:String,default:"stacked"},incrementButtonClass:{type:String,default:null},decrementButtonClass:{type:String,default:null},incrementButtonIcon:{type:String,default:"pi pi-angle-up"},decrementButtonIcon:{type:String,default:"pi pi-angle-down"},locale:{type:String,default:void 0},localeMatcher:{type:String,default:void 0},mode:{type:String,default:"decimal"},prefix:{type:String,default:null},suffix:{type:String,default:null},currency:{type:String,default:void 0},currencyDisplay:{type:String,default:void 0},useGrouping:{type:Boolean,default:!0},minFractionDigits:{type:Number,default:void 0},maxFractionDigits:{type:Number,default:void 0},min:{type:Number,default:null},max:{type:Number,default:null},step:{type:Number,default:1},style:null,class:null,inputStyle:null,inputClass:null},numberFormat:null,_numeral:null,_decimal:null,_group:null,_minusSign:null,_currency:null,_suffix:null,_prefix:null,_index:null,groupChar:"",isSpecialChar:null,prefixChar:null,suffixChar:null,timer:null,data:()=>({focused:!1}),watch:{locale(t,e){this.updateConstructParser(t,e)},localeMatcher(t,e){this.updateConstructParser(t,e)},mode(t,e){this.updateConstructParser(t,e)},currency(t,e){this.updateConstructParser(t,e)},currencyDisplay(t,e){this.updateConstructParser(t,e)},useGrouping(t,e){this.updateConstructParser(t,e)},minFractionDigits(t,e){this.updateConstructParser(t,e)},maxFractionDigits(t,e){this.updateConstructParser(t,e)},suffix(t,e){this.updateConstructParser(t,e)},prefix(t,e){this.updateConstructParser(t,e)}},created(){this.constructParser()},methods:{getOptions(){return{localeMatcher:this.localeMatcher,style:this.mode,currency:this.currency,currencyDisplay:this.currencyDisplay,useGrouping:this.useGrouping,minimumFractionDigits:this.minFractionDigits,maximumFractionDigits:this.maxFractionDigits}},constructParser(){this.numberFormat=new Intl.NumberFormat(this.locale,this.getOptions());const t=[...new Intl.NumberFormat(this.locale,{useGrouping:!1}).format(9876543210)].reverse(),e=new Map(t.map(((t,e)=>[t,e])));this._numeral=new RegExp(`[${t.join("")}]`,"g"),this._decimal=this.getDecimalExpression(),this._group=this.getGroupingExpression(),this._minusSign=this.getMinusSignExpression(),this._currency=this.getCurrencyExpression(),this._suffix=this.getSuffixExpression(),this._prefix=this.getPrefixExpression(),this._index=t=>e.get(t)},updateConstructParser(t,e){t!==e&&this.constructParser()},escapeRegExp:t=>t.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&"),getDecimalExpression(){const t=new Intl.NumberFormat(this.locale,{useGrouping:!1});return new RegExp(`[${t.format(1.1).trim().replace(this._numeral,"")}]`,"g")},getGroupingExpression(){const t=new Intl.NumberFormat(this.locale,{useGrouping:!0});return this.groupChar=t.format(1e6).trim().replace(this._numeral,"").charAt(0),new RegExp(`[${this.groupChar}]`,"g")},getMinusSignExpression(){const t=new Intl.NumberFormat(this.locale,{useGrouping:!1});return new RegExp(`[${t.format(-1).trim().replace(this._numeral,"")}]`,"g")},getCurrencyExpression(){if(this.currency){const t=new Intl.NumberFormat(this.locale,{style:"currency",currency:this.currency,currencyDisplay:this.currencyDisplay});return new RegExp(`[${t.format(1).replace(/\s/g,"").replace(this._numeral,"").replace(this._decimal,"").replace(this._group,"")}]`,"g")}return new RegExp("[]","g")},getPrefixExpression(){if(this.prefix)this.prefixChar=this.prefix;else{const t=new Intl.NumberFormat(this.locale,{style:this.mode,currency:this.currency,currencyDisplay:this.currencyDisplay});this.prefixChar=t.format(1).split("1")[0]}return new RegExp(`${this.escapeRegExp(this.prefixChar||"")}`,"g")},getSuffixExpression(){if(this.suffix)this.suffixChar=this.suffix;else{const t=new Intl.NumberFormat(this.locale,{style:this.mode,currency:this.currency,currencyDisplay:this.currencyDisplay,minimumFractionDigits:0,maximumFractionDigits:0});this.suffixChar=t.format(1).split("1")[1]}return new RegExp(`${this.escapeRegExp(this.suffixChar||"")}`,"g")},formatValue(t){if(null!=t){if("-"===t)return t;if(this.format){let e=new Intl.NumberFormat(this.locale,this.getOptions()).format(t);return this.prefix&&(e=this.prefix+e),this.suffix&&(e+=this.suffix),e}return t.toString()}return""},parseValue(t){let e=t.replace(this._suffix,"").replace(this._prefix,"").trim().replace(/\s/g,"").replace(this._currency,"").replace(this._group,"").replace(this._minusSign,"-").replace(this._decimal,".").replace(this._numeral,this._index);if(e){if("-"===e)return e;let t=+e;return isNaN(t)?null:t}return null},repeat(t,e,n){let i=e||500;this.clearTimer(),this.timer=setTimeout((()=>{this.repeat(t,40,n)}),i),this.spin(t,n)},spin(t,e){if(this.$refs.input){let n=this.step*e,i=this.parseValue(this.$refs.input.$el.value)||0,s=this.validateValue(i+n);this.updateInput(s,null,"spin"),this.updateModel(t,s),this.handleOnInput(t,i,s)}},onUpButtonMouseDown(t){this.$attrs.disabled||(this.$refs.input.$el.focus(),this.repeat(t,null,1),t.preventDefault())},onUpButtonMouseUp(){this.$attrs.disabled||this.clearTimer()},onUpButtonMouseLeave(){this.$attrs.disabled||this.clearTimer()},onUpButtonKeyUp(){this.$attrs.disabled||this.clearTimer()},onUpButtonKeyDown(t){32!==t.keyCode&&13!==t.keyCode||this.repeat(t,null,1)},onDownButtonMouseDown(t){this.$attrs.disabled||(this.$refs.input.$el.focus(),this.repeat(t,null,-1),t.preventDefault())},onDownButtonMouseUp(){this.$attrs.disabled||this.clearTimer()},onDownButtonMouseLeave(){this.$attrs.disabled||this.clearTimer()},onDownButtonKeyUp(){this.$attrs.disabled||this.clearTimer()},onDownButtonKeyDown(t){32!==t.keyCode&&13!==t.keyCode||this.repeat(t,null,-1)},onUserInput(){this.isSpecialChar&&(this.$refs.input.$el.value=this.lastValue),this.isSpecialChar=!1},onInputKeyDown(t){if(this.lastValue=t.target.value,t.shiftKey||t.altKey)return void(this.isSpecialChar=!0);let e=t.target.selectionStart,n=t.target.selectionEnd,i=t.target.value,s=null;switch(t.altKey&&t.preventDefault(),t.which){case 38:this.spin(t,1),t.preventDefault();break;case 40:this.spin(t,-1),t.preventDefault();break;case 37:this.isNumeralChar(i.charAt(e-1))||t.preventDefault();break;case 39:this.isNumeralChar(i.charAt(e))||t.preventDefault();break;case 13:s=this.validateValue(this.parseValue(i)),this.$refs.input.$el.value=this.formatValue(s),this.$refs.input.$el.setAttribute("aria-valuenow",s),this.updateModel(t,s);break;case 8:if(t.preventDefault(),e===n){let n=i.charAt(e-1),r=i.search(this._decimal);this._decimal.lastIndex=0,this.isNumeralChar(n)&&(this._group.test(n)?(this._group.lastIndex=0,s=i.slice(0,e-2)+i.slice(e-1)):this._decimal.test(n)?(this._decimal.lastIndex=0,this.$refs.input.$el.setSelectionRange(e-1,e-1)):r>0&&e>r?s=i.slice(0,e-1)+"0"+i.slice(e):r>0&&1===r?(s=i.slice(0,e-1)+"0"+i.slice(e),s=this.parseValue(s)>0?s:""):s=i.slice(0,e-1)+i.slice(e)),this.updateValue(t,s,null,"delete-single")}else s=this.deleteRange(i,e,n),this.updateValue(t,s,null,"delete-range");break;case 46:if(t.preventDefault(),e===n){let n=i.charAt(e),r=i.search(this._decimal);this._decimal.lastIndex=0,this.isNumeralChar(n)&&(this._group.test(n)?(this._group.lastIndex=0,s=i.slice(0,e)+i.slice(e+2)):this._decimal.test(n)?(this._decimal.lastIndex=0,this.$refs.input.$el.setSelectionRange(e+1,e+1)):r>0&&e>r?s=i.slice(0,e)+"0"+i.slice(e+1):r>0&&1===r?(s=i.slice(0,e)+"0"+i.slice(e+1),s=this.parseValue(s)>0?s:""):s=i.slice(0,e)+i.slice(e+1)),this.updateValue(t,s,null,"delete-back-single")}else s=this.deleteRange(i,e,n),this.updateValue(t,s,null,"delete-range")}},onInputKeyPress(t){t.preventDefault();let e=t.which||t.keyCode,n=String.fromCharCode(e);const i=this.isDecimalSign(n),s=this.isMinusSign(n);(48<=e&&e<=57||s||i)&&this.insert(t,n,{isDecimalSign:i,isMinusSign:s})},onPaste(t){t.preventDefault();let e=(t.clipboardData||window.clipboardData).getData("Text");if(e){let n=this.parseValue(e);null!=n&&this.insert(t,n.toString())}},allowMinusSign(){return null===this.min||this.min<0},isMinusSign(t){return!!this._minusSign.test(t)&&(this._minusSign.lastIndex=0,!0)},isDecimalSign(t){return!!this._decimal.test(t)&&(this._decimal.lastIndex=0,!0)},insert(t,e,n={isDecimalSign:!1,isMinusSign:!1}){const i=e.search(this._minusSign);if(this._minusSign.lastIndex=0,!this.allowMinusSign()&&-1!==i)return;const s=this.$refs.input.$el.selectionStart,r=this.$refs.input.$el.selectionEnd;let u=this.$refs.input.$el.value.trim();const l=u.search(this._decimal);this._decimal.lastIndex=0;const a=u.search(this._minusSign);let o;if(this._minusSign.lastIndex=0,n.isMinusSign)0===s&&(o=u,-1!==a&&0===r||(o=this.insertText(u,e,0,r)),this.updateValue(t,o,e,"insert"));else if(n.isDecimalSign)l>0&&s===l?this.updateValue(t,u,e,"insert"):l>s&&l<r&&(o=this.insertText(u,e,s,r),this.updateValue(t,o,e,"insert"));else{const n=this.numberFormat.resolvedOptions().maximumFractionDigits,i=s!==r?"range-insert":"insert";l>0&&s>l?s+e.length-(l+1)<=n&&(o=u.slice(0,s)+e+u.slice(s+e.length),this.updateValue(t,o,e,i)):(o=this.insertText(u,e,s,r),this.updateValue(t,o,e,i))}},insertText(t,e,n,i){if(2===e.split(".").length){const s=t.slice(n,i).search(this._decimal);return this._decimal.lastIndex=0,s>0?t.slice(0,n)+this.formatValue(e)+t.slice(i):t||this.formatValue(e)}return i-n===t.length?this.formatValue(e):0===n?e+t.slice(i):i===t.length?t.slice(0,n)+e:t.slice(0,n)+e+t.slice(i)},deleteRange(t,e,n){let i;return i=n-e===t.length?"":0===e?t.slice(n):n===t.length?t.slice(0,e):t.slice(0,e)+t.slice(n),i},initCursor(){let t=this.$refs.input.$el.selectionStart,e=this.$refs.input.$el.value,n=e.length,i=null,s=e.charAt(t);if(this.isNumeralChar(s))return;let r=t-1;for(;r>=0;){if(s=e.charAt(r),this.isNumeralChar(s)){i=r;break}r--}if(null!==i)this.$refs.input.$el.setSelectionRange(i+1,i+1);else{for(r=t+1;r<n;){if(s=e.charAt(r),this.isNumeralChar(s)){i=r;break}r++}null!==i&&this.$refs.input.$el.setSelectionRange(i,i)}},onInputClick(){this.initCursor()},isNumeralChar(t){return!(1!==t.length||!(this._numeral.test(t)||this._decimal.test(t)||this._group.test(t)||this._minusSign.test(t)))&&(this.resetRegex(),!0)},resetRegex(){this._numeral.lastIndex=0,this._decimal.lastIndex=0,this._group.lastIndex=0,this._minusSign.lastIndex=0},updateValue(t,e,n,i){let s=this.$refs.input.$el.value,r=null;null!=e&&(r=this.parseValue(e),this.updateInput(r,n,i)),this.handleOnInput(t,s,r)},handleOnInput(t,e,n){this.isValueChanged(e,n)&&this.$emit("input",{originalEvent:t,value:n})},isValueChanged(t,e){if(null===e&&null!==t)return!0;if(null!=e){return e!==("string"==typeof t?this.parseValue(t):t)}return!1},validateValue(t){return null!=this.min&&t<this.min?this.min:null!=this.max&&t>this.max?this.max:"-"===t?null:t},updateInput(t,e,n){e=e||"";let i=this.$refs.input.$el.value,s=this.formatValue(t),r=i.length;if(0===r){this.$refs.input.$el.value=s,this.$refs.input.$el.setSelectionRange(0,0),this.initCursor();const t=(this.prefixChar||"").length+e.length;this.$refs.input.$el.setSelectionRange(t,t)}else{let t=this.$refs.input.$el.selectionStart,u=this.$refs.input.$el.selectionEnd;this.$refs.input.$el.value=s;let l=s.length;if("range-insert"===n){const n=this.parseValue((i||"").slice(0,t)),r=(null!==n?n.toString():"").split("").join(`(${this.groupChar})?`),l=new RegExp(r,"g");l.test(s);const a=e.split("").join(`(${this.groupChar})?`),o=new RegExp(a,"g");o.test(s.slice(l.lastIndex)),u=l.lastIndex+o.lastIndex,this.$refs.input.$el.setSelectionRange(u,u)}else if(l===r)"insert"===n||"delete-back-single"===n?this.$refs.input.$el.setSelectionRange(u+1,u+1):"delete-single"===n?this.$refs.input.$el.setSelectionRange(u-1,u-1):"delete-range"!==n&&"spin"!==n||this.$refs.input.$el.setSelectionRange(u,u);else if("delete-back-single"===n){let t=i.charAt(u-1),e=i.charAt(u),n=r-l,s=this._group.test(e);s&&1===n?u+=1:!s&&this.isNumeralChar(t)&&(u+=-1*n+1),this._group.lastIndex=0,this.$refs.input.$el.setSelectionRange(u,u)}else u+=l-r,this.$refs.input.$el.setSelectionRange(u,u)}this.$refs.input.$el.setAttribute("aria-valuenow",t)},updateModel(t,e){this.$emit("update:modelValue",e)},onInputFocus(){this.focused=!0},onInputBlur(t){this.focused=!1;let e=t.target,n=this.validateValue(this.parseValue(e.value));e.value=this.formatValue(n),e.setAttribute("aria-valuenow",n),this.updateModel(t,n)},clearTimer(){this.timer&&clearInterval(this.timer)}},computed:{containerClass(){return["p-inputnumber p-component p-inputwrapper",this.class,{"p-inputwrapper-filled":this.filled,"p-inputwrapper-focus":this.focused,"p-inputnumber-buttons-stacked":this.showButtons&&"stacked"===this.buttonLayout,"p-inputnumber-buttons-horizontal":this.showButtons&&"horizontal"===this.buttonLayout,"p-inputnumber-buttons-vertical":this.showButtons&&"vertical"===this.buttonLayout}]},upButtonClass(){return["p-inputnumber-button p-inputnumber-button-up",this.incrementButtonClass]},downButtonClass(){return["p-inputnumber-button p-inputnumber-button-down",this.decrementButtonClass]},filled(){return null!=this.modelValue&&this.modelValue.toString().length>0},upButtonListeners(){return{mousedown:t=>this.onUpButtonMouseDown(t),mouseup:t=>this.onUpButtonMouseUp(t),mouseleave:t=>this.onUpButtonMouseLeave(t),keydown:t=>this.onUpButtonKeyDown(t),keyup:t=>this.onUpButtonKeyUp(t)}},downButtonListeners(){return{mousedown:t=>this.onDownButtonMouseDown(t),mouseup:t=>this.onDownButtonMouseUp(t),mouseleave:t=>this.onDownButtonMouseLeave(t),keydown:t=>this.onDownButtonKeyDown(t),keyup:t=>this.onDownButtonKeyUp(t)}},formattedValue(){return this.formatValue(this.modelValue)}},components:{INInputText:s.default,INButton:r.default}};const l={key:0,class:"p-inputnumber-button-group"};return function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t))}}("\n.p-inputnumber {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.p-inputnumber-button {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n}\n.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,\n.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {\n display: none;\n}\n.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n padding: 0;\n}\n.p-inputnumber-buttons-stacked .p-inputnumber-input {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0;\n}\n.p-inputnumber-buttons-stacked .p-inputnumber-button-group {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {\n -webkit-box-ordinal-group: 4;\n -ms-flex-order: 3;\n order: 3;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.p-inputnumber-buttons-horizontal .p-inputnumber-input {\n -webkit-box-ordinal-group: 3;\n -ms-flex-order: 2;\n order: 2;\n border-radius: 0;\n}\n.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.p-inputnumber-buttons-vertical {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n width: 100%;\n}\n.p-inputnumber-buttons-vertical .p-inputnumber-input {\n -webkit-box-ordinal-group: 3;\n -ms-flex-order: 2;\n order: 2;\n border-radius: 0;\n text-align: center;\n}\n.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {\n -webkit-box-ordinal-group: 4;\n -ms-flex-order: 3;\n order: 3;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n width: 100%;\n}\n.p-inputnumber-input {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n.p-fluid .p-inputnumber {\n width: 100%;\n}\n.p-fluid .p-inputnumber .p-inputnumber-input {\n width: 1%;\n}\n.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {\n width: 100%;\n}\n"),u.render=function(t,e,i,s,r,u){const a=n.resolveComponent("INInputText"),o=n.resolveComponent("INButton");return n.openBlock(),n.createBlock("span",{class:u.containerClass,style:i.style},[n.createVNode(a,n.mergeProps({ref:"input",class:["p-inputnumber-input",i.inputClass],style:i.inputStyle,value:u.formattedValue},t.$attrs,{"aria-valumin":i.min,"aria-valuemax":i.max,onInput:u.onUserInput,onKeydown:u.onInputKeyDown,onKeypress:u.onInputKeyPress,onPaste:u.onPaste,onClick:u.onInputClick,onFocus:u.onInputFocus,onBlur:u.onInputBlur}),null,16,["class","style","value","aria-valumin","aria-valuemax","onInput","onKeydown","onKeypress","onPaste","onClick","onFocus","onBlur"]),i.showButtons&&"stacked"===i.buttonLayout?(n.openBlock(),n.createBlock("span",l,[n.createVNode(o,n.mergeProps({class:u.upButtonClass,icon:i.incrementButtonIcon},n.toHandlers(u.upButtonListeners),{disabled:t.$attrs.disabled}),null,16,["class","icon","disabled"]),n.createVNode(o,n.mergeProps({class:u.downButtonClass,icon:i.decrementButtonIcon},n.toHandlers(u.downButtonListeners),{disabled:t.$attrs.disabled}),null,16,["class","icon","disabled"])])):n.createCommentVNode("",!0),i.showButtons&&"stacked"!==i.buttonLayout?(n.openBlock(),n.createBlock(o,n.mergeProps({key:1,class:u.upButtonClass,icon:i.incrementButtonIcon},n.toHandlers(u.upButtonListeners),{disabled:t.$attrs.disabled}),null,16,["class","icon","disabled"])):n.createCommentVNode("",!0),i.showButtons&&"stacked"!==i.buttonLayout?(n.openBlock(),n.createBlock(o,n.mergeProps({key:2,class:u.downButtonClass,icon:i.decrementButtonIcon},n.toHandlers(u.downButtonListeners),{disabled:t.$attrs.disabled}),null,16,["class","icon","disabled"])):n.createCommentVNode("",!0)],6)},u}(primevue.inputtext,primevue.button,Vue);