@persagy2/meri-design/custom/InputNumber/index.js

fork from meri-design and extend it.

/*!
 * @@persagy2/meri-design v1.4.9-extend.2
 * (c) 2019-2020 xiongshuang
 * Released under the MIT License.
 * 2022-12-07 10:33:25
 */
!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("InputNumber",[],i):"object"==typeof exports?exports.InputNumber=i():t.InputNumber=i()}(this,(function(){return function(){"use strict";var t={d:function(i,e){for(var n in e)t.o(e,n)&&!t.o(i,n)&&Object.defineProperty(i,n,{enumerable:!0,get:e[n]})},o:function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},r:function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},i={};t.r(i),t.d(i,{default:function(){return r}});function e(t,i,e,n,s,r,a,u){var l,o="function"==typeof t?t.options:t;if(i&&(o.render=i,o.staticRenderFns=e,o._compiled=!0),n&&(o.functional=!0),r&&(o._scopeId="data-v-"+r),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},o._ssrRegister=l):s&&(l=u?function(){s.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(o.functional){o._injectStyles=l;var p=o.render;o.render=function(t,i){return l.call(i),p(t,i)}}else{var h=o.beforeCreate;o.beforeCreate=h?[].concat(h,l):[l]}return{exports:t,options:o}}var n=e({},(function(){var t=this._self._c;return t("svg",{attrs:{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("path",{staticClass:"svg-fill-grey-500",attrs:{d:"\r\n          M8.3904344,6.48804301\r\n          L11.350122,10.1876525\r\n          C11.5226268,10.4032834 11.4876661,10.7179296 11.2720351,10.8904344\r\n          C11.1833786,10.9613596 11.0732233,11 10.9596876,11\r\n          L5.04031242,11\r\n          C4.76417005,11 4.54031242,10.7761424 4.54031242,10.5\r\n          C4.54031242,10.3864643 4.5789528,10.276309 4.64987802,10.1876525\r\n          L7.6095656,6.48804301\r\n          C7.78207037,6.27241204 8.09671656,6.23745135 8.31234752,6.40995612\r\n          C8.34117988,6.43302201 8.36736852,6.45921065 8.3904344,6.48804301\r\n          Z",transform:"translate(0, -0.5)"}})])}),[],!1,null,null,null).exports,s=e({name:"InputNumber",props:{type:{type:String,default:"normal"},autofocus:{default:!1},maxLength:{type:Number,default:100},name:{type:String,default:""},value:{type:[Number,String],default:0},placeholder:{type:String,default:"Enter the number"},disabled:{type:Boolean,default:!1},min:{type:Number},max:{type:Number},errorInfo:{type:String,default:""},step:{type:Number,default:1},precision:{type:[Number,String],default:-1},width:{type:Number,default:0}},components:{TriangleSvg:n},data:function(){return{disabledType:"",inputFinish:!1,inputVal:"",lineStatus:"",focus:!1}},created:function(){if(""!==this.value){this.value>this.max?(this.inputVal=this.max,this.$emit("input",this.inputVal)):this.value<this.min?(this.inputVal=this.min,this.$emit("input",this.inputVal)):this.inputVal=this.value;var t=parseInt(this.precision),i=this.value?String(this.value):"",e=i.indexOf(".");t>=0&&e>-1&&(this.inputVal=i.slice(0,e+t+1)),this.validButton(this.value)}},mounted:function(){var t=this;this.autofocus&&setTimeout((function(){t.focusM()}),100)},watch:{value:function(t,i){if(t!==i&&t!==this.inputVal){var e=Number(this.precision)>0?t:Number(t);if(e>this.max)this.inputVal=this.max,this.$emit("input",this.inputVal);else if(e<this.min)this.inputVal=this.min,this.$emit("input",this.inputVal);else{if(Number(e)===Number(this.inputVal))return;this.inputVal=e}this.validButton(Number(this.inputVal))}},inputVal:function(t,i){t!==i&&isNaN(t)&&"-"!==t&&(this.inputVal=i)}},methods:{validButton:function(t){t>=this.max?"both-button"===this.type?this.disabledType="right":"right-arrow"===this.type&&(this.disabledType="top"):t<=this.min?"both-button"===this.type?this.disabledType="left":"right-arrow"===this.type&&(this.disabledType="bottom"):this.disabledType=""},focusM:function(){this.$refs.input&&this.$refs.input.focus()},addAndSubtract:function(t){if(!this.disabled&&!("add"===t&&"top"===this.disabledType||"sub"===t&&"bottom"===this.disabledType||"add"===t&&"right"===this.disabledType||"sub"===t&&"left"===this.disabledType)){var i=0,e=Number(this.inputVal),n=this.step?String(this.step):"",s=this.inputVal?String(this.inputVal):"",r=n.indexOf("."),a=s.indexOf(".");if(-1===r&&-1===a)"add"===t?i=e+this.step:"sub"===t&&(i=e-this.step),this.validVal(i,t)&&this.$emit("input",i),this.validButton(i);else if(""===this.inputVal){if("add"===t)i=this.step;else if("sub"===t){var u=this.step?String(this.step):"";u="-".concat(u),i=Number(u)}this.validVal(i,t)&&this.$emit("input",i),this.validButton(i)}else{var l=-1===r?0:n.length-r-1,o=-1===a?0:s.length-a-1,p=Math.max(l,o);if(n=n.replace(".",""),s=s.replace(".",""),l>o){for(var h=l-o,d="",c=0;c<h;c++)d+="0";s+=d}else if(l<o){for(var f=o-l,b="",m=0;m<f;m++)b+="0";n+=b}var v=0;"add"===t?v=Number(n)+Number(s):"sub"===t&&(v=Number(s)-Number(n));var y=v?String(v):"",g="".concat(y.substr(0,y.length-p),".").concat(y.substr(y.length-p,p));this.validVal(g,t)&&this.$emit("input",parseInt(this.precision)>0?Number(g).toFixed(parseInt(this.precision)):Number(g)),this.validButton(Number(g))}}},inputFocus:function(t){this.focus=!0;var i=t.target.value;""===t.target.value?this.$emit("focus",i):this.$emit("focus",Number(i))},inputBlur:function(t){this.focus=!1;var i=t.target.value;if(""===t.target.value)this.$emit("blur",i);else{var e=Number(i);e>this.max?e=this.max:e<this.min&&(e=this.min);var n=parseInt(this.precision),s=i?String(i):"",r=s.indexOf(".");if(n>=0&&r>-1){var a=s.slice(0,r+n+1);/\.$/.test(a)&&(a=Number(a)),this.inputVal=a,e=Number(this.inputVal)}else this.inputVal=e;this.$emit("blur",e)}},inputComplete:function(t){if("Enter"===t.key){this.$refs.input&&this.$refs.input.blur(),this.focus=!1;var i=t.target.value;if(""===t.target.value)this.$emit("pressEnter",i);else{var e=Number(i);e>this.max?e=this.max:e<this.min&&(e=this.min),this.inputVal=e,this.$emit("pressEnter",e)}}},searchInput:function(t){var i=this,e=t.target.value.replace(/\s+/g,""),n=Number(e);if("-"===e&&0===this.min)this.inputVal=e,this.$nextTick((function(){i.inputVal=""})),this.$emit("input","");else if("-"===e)this.inputVal="-";else if(""===e)this.inputVal="",this.$emit("input","");else if(isNaN(n))this.inputVal=e;else if("0"===e)this.inputVal="0",this.$emit("input","0"),this.validButton(0);else{this.inputVal=e;var s=parseInt(this.precision),r=e?String(e):"",a=r.indexOf(".");if(s>=0&&a>-1&&this.$nextTick((function(){i.inputVal=r.slice(0,a+s+1),n=Number(i.inputVal)})),this.validButton(n),n===Number(this.value))return;this.$emit("input",n)}},validVal:function(t,i){return t<this.min&&"sub"===i?!("both-button"===this.type||"right-arrow"===this.type):!(t>this.max&&"add"===i)||!("both-button"===this.type||"right-arrow"===this.type)}}},(function(){var t=this,i=t._self._c;return i("div",{class:["p-input-number","p-input-number-"+t.type,t.focus&&"p-input-number-focus",t.disabled&&"p-input-number-disabled",t.errorInfo&&"p-input-number-error"],style:t.width>0?"width: "+t.width+"px":""},["both-button"===t.type?i("div",{staticClass:"p-in-left-button",class:{"p-in-disabled-button":"left"===t.disabledType},attrs:{onselectstart:"return false;"},on:{click:function(i){return t.addAndSubtract("sub")}}},[i("Icon",{attrs:{name:"reduce"}})],1):t._e(),t._v(" "),i("div",{staticClass:"p-input-number-box",class:["both-button"===t.type&&t.focus&&"p-input-number-focus"]},[!t.inputVal&&0!==t.inputVal||t.disabled?i("div",{staticClass:"p-placeholder"},[t._v(t._s(t.disabled&&(t.inputVal||0===t.inputVal)?t.inputVal:t.placeholder))]):t._e(),t._v(" "),t.disabled?t._e():i("input",{ref:"input",attrs:{maxlength:t.maxLength,name:t.name,autofocus:t.autofocus,type:"text"},domProps:{value:t.inputVal},on:{focus:t.inputFocus,input:t.searchInput,blur:t.inputBlur,keypress:t.inputComplete}})]),t._v(" "),"both-button"===t.type?i("div",{staticClass:"p-in-right-button",class:{"p-in-disabled-button":"right"===t.disabledType},attrs:{onselectstart:"return false;"},on:{click:function(i){return t.addAndSubtract("add")}}},[i("Icon",{attrs:{name:"plus"}})],1):"right-arrow"===t.type?i("div",{staticClass:"p-in-right-arrow"},[i("div",{staticClass:"p-in-right-arrow-top",class:{"p-in-disabled-button":"top"===t.disabledType},attrs:{onselectstart:"return false;"},on:{click:function(i){return t.addAndSubtract("add")}}},[i("TriangleSvg")],1),t._v(" "),i("div",{staticClass:"p-in-right-arrow-btm",class:{"p-in-disabled-button":"bottom"===t.disabledType},attrs:{onselectstart:"return false;"},on:{click:function(i){return t.addAndSubtract("sub")}}},[i("TriangleSvg")],1)]):t._e(),t._v(" "),t.errorInfo?i("div",{staticClass:"p-input-number-error-info"},[t._v(t._s(t.errorInfo))]):t._e()])}),[],!1,null,null,null).exports;s.install=function(t){return t.component(s.name,s)};var r=s;return i}()}));