nice-numeric-input
Version:
A Vue input component for numbers with realtime formating and currency support.
1 lines • 15.5 kB
JavaScript
this["nice-numeric-input"]=function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var a,i,r=[],s=!0,o=!1;try{for(n=n.call(e);!(s=(a=n.next()).done)&&(r.push(a.value),!t||r.length!==t);s=!0);}catch(e){o=!0,i=e}finally{try{s||null==n.return||n.return()}finally{if(o)throw i}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}var r=n.default.extend({props:{value:{type:Number,default:0},id:{type:String,default:"nice-numeric-input"},name:{type:String,default:"nice-numeric-input"},label:{type:String,required:!0},placeholder:{type:String,default:""},step:{type:Number,default:1},min:{type:Number,default:Number.NEGATIVE_INFINITY},max:{type:Number,default:Number.POSITIVE_INFINITY},isValid:{type:Boolean,default:!1,required:!1},disabled:{type:Boolean,default:!1},locale:{type:String,default:null},currency:{type:String,default:null},minDecimalPlaces:{type:Number,default:0},maxDecimalPlaces:{type:Number,default:2},integerOnly:{type:Boolean,default:!1},noControls:{type:Boolean,default:!1},hideLabel:{type:Boolean,default:!1},decreaseTitle:{type:String,default:"Increase"},increaseTitle:{type:String,default:"Decrease"},increaseText:{type:String,default:"+"},decreaseText:{type:String,default:"-"},superIncreaseText:{type:String,default:"++"},superDecreaseText:{type:String,default:"--"},ultraIncreaseText:{type:String,default:"+++"},ultraDecreaseText:{type:String,default:"---"},superStep:{type:Number,default:10},ultraStep:{type:Number,default:100},labelClass:{type:String,default:null},inputClass:{type:String,default:null},decreaseButtonClass:{type:String,default:null},increaseButtonClass:{type:String,default:null},wrapperClass:{type:String,default:null},superStepClass:{type:String,default:""},ultraStepClass:{type:String,default:""}},data:function(){return{internalValue:null,ctrlActive:!1,shiftActive:!1,internalLocale:"en-US"}},computed:{labelId:function(){return this.id+"-label"},canIncrease:function(){return this.internalValueIsNotDefined||this.internalValue+this.internalStep<=this.max},canDecrease:function(){return this.internalValueIsNotDefined||this.internalValue-this.internalStep>=this.min},displayString:function(){this.internalValueIsNotDefined&&(this.value?this.setInternalValue(this.value):this.setToDefaultValue());var e=0,t=0;return this.integerOnly||(e=this.minDecimalPlaces,t=this.maxDecimalPlaces),this.internalValue.toLocaleString(this.internalLocale,{style:this.currency?"currency":"decimal",currency:this.currency||void 0,minimumFractionDigits:e,maximumFractionDigits:t})},internalValueIsNotDefined:function(){return null==this.internalValue||Number.isNaN(this.internalValue)},isValidComputed:{get:function(){return this.isValid},set:function(e){this.$emit("update:isValid",e)}},isError:function(){var e=!1;return(null==this.internalValue||this.internalValue>this.max||this.internalValue<this.min)&&(e=!0),this.isValidComputed=!e,e},isUltraChangeActive:function(){return this.ctrlActive&&this.shiftActive},isSuperChangeActive:function(){return this.ctrlActive!=this.shiftActive},internalIncreaseText:function(){return this.isUltraChangeActive?this.ultraIncreaseText:this.isSuperChangeActive?this.superIncreaseText:this.increaseText},internalDecreaseText:function(){return this.isUltraChangeActive?this.ultraDecreaseText:this.isSuperChangeActive?this.superDecreaseText:this.decreaseText},changeButtonClass:function(){return this.isUltraChangeActive?this.ultraStepClass||"much-smaller-padding":this.isSuperChangeActive?this.superStepClass||"smaller-padding":""},internalStep:function(){return this.isUltraChangeActive?this.ultraStep:this.isSuperChangeActive?this.superStep:this.step}},methods:{getDefaultValue:function(){return this.min!=Number.NEGATIVE_INFINITY?this.min:0},handlePaste:function(e){var t=(e.clipboardData||window.clipboardData).getData("Text");t&&(e.stopPropagation(),e.preventDefault(),this.valueChanged(t,null))},handleInput:function(e){var t=e.target;this.valueChanged(t.value,e.data)},handleChange:function(e){var t=e.target;this.valueChanged(t.value,null,!0)},valueChanged:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],a=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],i=/[+-]?\d+(\.\d+)?/g,r=this.normaliseInput(e,this.internalLocale),s=r.match(i),o=null,l=!1;if(!n&&(this.isEmptyInput(e)||this.isStartingSignedInput(e)||this.isAddingDecimalPlaces(e)))l=!0;else if(null!=s&&s.length>0)o=parseFloat(s[0]);else{if(a&&e.length>0)return void this.valueChanged("".concat(e[0]),t,n,!1);this.$refs.numberInput.value=null}l||(this.integerOnly&&(o=Math.round(o)),"-"===t?o=-o:"+"===t&&(o=Math.abs(o)),this.setInternalValue(o))},normaliseInput:function(e,t){var n=Intl.NumberFormat(t).format(1.1),a=new RegExp("[^-+0-9".concat(n.charAt(1),"]"),"g");return e.replace(a,"").replace(n.charAt(1),".")},isStartingSignedInput:function(e){return 1===e.length&&("+"===e||"-"===e)},isEmptyInput:function(e){return 0===e.length},isAddingDecimalPlaces:function(e){return e.endsWith(".")||e.endsWith(",")||e.endsWith(" ")},increase:function(){this.canIncrease&&(this.internalValueIsNotDefined&&this.setToDefaultValue(),this.setInternalValue(this.internalValue+this.internalStep))},decrease:function(){this.canDecrease&&(this.internalValueIsNotDefined&&this.setToDefaultValue(),this.setInternalValue(this.internalValue-this.internalStep))},setToDefaultValue:function(){var e=0;this.min!=Number.NEGATIVE_INFINITY&&(e=this.min),this.setInternalValue(e)},setInternalValue:function(e){this.internalValue=null,this.internalValue=e,this.$emit("input",this.internalValue)},keychange:function(e){this.ctrlActive=e.ctrlKey,this.shiftActive=e.shiftKey}},created:function(){null===this.locale?"undefined"!=typeof window&&window&&(this.internalLocale=window.navigator.language,document.addEventListener("keydown",this.keychange),document.addEventListener("keyup",this.keychange)):this.internalLocale=this.locale,n.default.config.devtools&&(this.min>this.max&&console.error("nice-numeric-input Prop Error: Min [".concat(this.min,"] cannot be greater than Max [").concat(this.max,"]")),this.$listeners&&!this.$listeners.input&&console.warn("nice-numeric-input Warning: There is no input event listener attached, use v-model or bind one directly to the input event."))},beforeDestroy:function(){document.removeEventListener("keydown",this.keychange),document.removeEventListener("keyup",this.keychange)},watch:{value:function(e){this.internalValue=e}}});function s(e,t,n,a,i,r,s,o,l,u){"boolean"!=typeof s&&(l=o,o=s,s=!1);const c="function"==typeof n?n.options:n;let d;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),a&&(c._scopeId=a),r?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=d):t&&(d=s?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),d)if(c.functional){const e=c.render;c.render=function(t,n){return d.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,d):[d]}return n}const o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=o?t.media||"default":e,a=c[n]||(c[n]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",t.media&&a.element.setAttribute("media",t.media),void 0===u&&(u=document.head||document.getElementsByTagName("head")[0]),u.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(n),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const e=a.ids.size-1,t=document.createTextNode(n),i=a.element.childNodes;i[e]&&a.element.removeChild(i[e]),i.length?a.element.insertBefore(t,i[e]):a.element.appendChild(t)}}}(e,t)}let u;const c={};var d=s({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"input-wrapper",class:[e.noControls?"":"controls",e.isError?"error":"",e.wrapperClass]},[e.hideLabel?e._e():n("label",{staticClass:"input-label",class:e.labelClass,attrs:{id:e.labelId,for:e.id}},[e._v("\n "+e._s(e.label)+"\n ")]),e._v(" "),e.noControls?e._e():n("button",{staticClass:"left-control",class:[e.changeButtonClass,e.decreaseButtonClass],attrs:{disabled:e.disabled||!e.canDecrease,title:e.decreaseTitle},on:{click:e.decrease}},[e._v("\n "+e._s(e.internalDecreaseText)+"\n ")]),e._v(" "),n("input",{ref:"numberInput",class:[e.noControls?"no-controls-input":"double-controls-input",e.inputClass],attrs:{id:e.id,name:e.name,disabled:e.disabled,type:"text",placeholder:e.placeholder,"aria-labelledby":!e.hideLabel&&e.labelId,"aria-label":!!e.hideLabel&&e.label},domProps:{value:e.displayString},on:{input:e.handleInput,change:e.handleChange,paste:e.handlePaste}}),e._v(" "),e.noControls?e._e():n("button",{staticClass:"right-control",class:[e.changeButtonClass,e.increaseButtonClass],attrs:{disabled:e.disabled||!e.canIncrease,title:e.increaseTitle},on:{click:e.increase}},[e._v("\n "+e._s(e.internalIncreaseText)+"\n ")])])},staticRenderFns:[]},(function(e){e&&e("data-v-89fe9580_0",{source:'.input-wrapper[data-v-89fe9580]{position:relative;font-weight:400;font-style:normal;display:-webkit-box;display:-ms-flexbox;display:flex;color:rgba(0,0,0,.9)}.input-wrapper>input[data-v-89fe9580]{width:100%;margin:0;max-width:100%;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;outline:0;-webkit-tap-highlight-color:transparent;text-align:left;line-height:1.2em;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;padding:.66em 1em;background:#fff;border:1px solid rgba(34,36,38,.2);color:rgba(0,0,0,.9);border-radius:.3rem;-webkit-transition:border-color .1s ease,-webkit-box-shadow .1s ease;transition:border-color .1s ease,-webkit-box-shadow .1s ease;transition:box-shadow .1s ease,border-color .1s ease;transition:box-shadow .1s ease,border-color .1s ease,-webkit-box-shadow .1s ease;-webkit-box-shadow:none;box-shadow:none}.input-wrapper input[disabled][data-v-89fe9580],.input-wrapper.disabled[data-v-89fe9580]{opacity:.4}.input-wrapper.disabled>input[data-v-89fe9580]{pointer-events:none}.input-wrapper>input[data-v-89fe9580]:active{border-color:rgba(0,0,0,.4);background:#fafafa}.input-wrapper>input[data-v-89fe9580]:focus{border-color:#85b7d9;background:#fff;color:rgba(0,0,0,.8)}.input-wrapper.error>input[data-v-89fe9580]{background-color:#ffd7d7;border-color:#dba8a8;color:#9b2d2b}.input-wrapper>input[data-v-89fe9580]::-webkit-input-placeholder{color:rgba(191,191,191,.87)}.input-wrapper>input[data-v-89fe9580]::-moz-placeholder{color:rgba(191,191,191,.87)}.input-wrapper>input[data-v-89fe9580]:-ms-input-placeholder{color:rgba(191,191,191,.87)}.input-wrapper.error>input[data-v-89fe9580]::-webkit-input-placeholder{color:#e7bdbc}.input-wrapper.error>input[data-v-89fe9580]::-moz-placeholder{color:#e7bdbc}.input-wrapper.error>input[data-v-89fe9580]::-ms-input-placeholder{color:#e7bdbc!important}.input-wrapper.error>input[data-v-89fe9580]:focus::-webkit-input-placeholder{color:#da9796}.input-wrapper.error>input[data-v-89fe9580]:focus::-moz-placeholder{color:#da9796}.input-wrapper.error>input[data-v-89fe9580]:focus::-ms-input-placeholder{color:#da9796!important}.input-label[data-v-89fe9580]{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:0;font-size:1em;padding-right:1em;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}button[data-v-89fe9580]{cursor:pointer;display:inline-block;min-height:1em;outline:0;border:none;vertical-align:baseline;background:#e0e1e2 none;color:rgba(0,0,0,.7);font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;margin:0 .25em 0 0;padding:.75em 1.5em .75em}button.smaller-padding[data-v-89fe9580]{padding:.75em 1.25em .75em}button.much-smaller-padding[data-v-89fe9580]{padding:.75em 1em .75em}button[data-v-89fe9580]:hover{background-color:#cacbcd;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;color:rgba(0,0,0,.8)}button[data-v-89fe9580]:focus{background-color:#cacbcd;color:rgba(0,0,0,.8);background-image:""!important;-webkit-box-shadow:""!important;box-shadow:""!important}button[data-v-89fe9580]:active{background-color:#babbbc;background-image:"";color:rgba(0,0,0,.9);-webkit-box-shadow:0 0 0 1px transparent inset,none;box-shadow:0 0 0 1px transparent inset,none}button[data-v-89fe9580]:disabled{cursor:default;opacity:.4!important;-webkit-box-shadow:none!important;box-shadow:none!important;pointer-events:none!important}.input-wrapper.controls>button[data-v-89fe9580]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:0;text-transform:none;text-shadow:none;font-weight:700;line-height:1em;font-style:normal;text-align:center;text-decoration:none;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;-webkit-tap-highlight-color:transparent}button.left-control[data-v-89fe9580]{border-radius:3px 0 0 3px}button.right-control[data-v-89fe9580]{border-radius:0 3px 3px 0}.double-controls-input[data-v-89fe9580]{border-radius:0!important}.no-controls-input[data-v-89fe9580]{border-radius:3px!important;border-left-color:rgba(34,36,38,.15)!important}',map:void 0,media:void 0})}),r,"data-v-89fe9580",false,undefined,!1,l,void 0,void 0),p=function(){var e=d;return e.install=function(t){t.component("NiceNumericInput",e)},e}(),h=Object.freeze({__proto__:null,default:p});return Object.entries(h).forEach((function(e){var t=a(e,2),n=t[0],i=t[1];"default"!==n&&(p[n]=i)})),p}(Vue);