vxe-pc-ui/lib/number-input/src/number-input.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeNumberInput",props:{modelValue:[String,Number],immediate:{type:Boolean,default:!0},name:String,type:{type:String,default:"number"},clearable:{type:Boolean,default:()=>(0,_ui.getConfig)().numberInput.clearable},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},placeholder:String,maxLength:{type:[String,Number],default:()=>(0,_ui.getConfig)().numberInput.maxLength},autoComplete:{type:String,default:"off"},align:String,form:String,className:String,size:{type:String,default:()=>(0,_ui.getConfig)().numberInput.size||(0,_ui.getConfig)().size},min:{type:[String,Number],default:null},max:{type:[String,Number],default:null},step:[String,Number],exponential:{type:Boolean,default:()=>(0,_ui.getConfig)().numberInput.exponential},showCurrency:{type:Boolean,default:()=>(0,_ui.getConfig)().numberInput.showCurrency},currencySymbol:{type:String,default:()=>(0,_ui.getConfig)().numberInput.currencySymbol},controlConfig:Object,digits:{type:[String,Number],default:null},autoFill:{type:Boolean,default:()=>(0,_ui.getConfig)().numberInput.autoFill},editable:{type:Boolean,default:!0},plusIcon:String,minusIcon:String,prefixIcon:String,prefixConfig:Object,suffixIcon:String,suffixConfig:Object,controls:{type:Boolean,default:null},maxlength:[String,Number],autocomplete:String},emits:["update:modelValue","input","change","keydown","keyup","wheel","click","focus","blur","clear","lazy-change","plus-number","minus-number","prefix-click","suffix-click","prev-number","next-number"],setup(g,e){let{slots:b,emit:i}=e,n=(0,_vue.inject)("$xeForm",null),a=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();let q=(0,_ui.useSize)(g).computeSize,x=(0,_vue.reactive)({isFocus:!1,isActivated:!1,inputValue:""}),r={},y=(0,_vue.ref)(),p=(0,_vue.ref)(),F=(0,_vue.ref)(),E=(0,_vue.computed)(()=>{var e=g.readonly;return null===e?!!n&&n.props.readonly:e}),h=(0,_vue.computed)(()=>{var e=g.disabled;return null===e?!!n&&n.props.disabled:e}),o=(0,_vue.computed)(()=>{var{type:e,digits:t}=g;let u=t;return null===u&&null===(u=(0,_ui.getConfig)().numberInput.digits)&&"amount"===e&&(u=2),_xeUtils.default.toInteger(u)||1}),N=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().numberInput.controlConfig,g.controlConfig)),K=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().numberInput.prefixConfig,g.prefixConfig)),R=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().numberInput.suffixConfig,g.suffixConfig)),s=(0,_vue.computed)(()=>{var e=g.type;return"float"===e||"amount"===e}),D=(0,_vue.computed)(()=>{var e=g.type,t=o.value,u=s.value,l=g.step;return"integer"===e?_xeUtils.default.toInteger(l)||1:u?_xeUtils.default.toNumber(l)||1/Math.pow(10,t):_xeUtils.default.toNumber(l)||1}),V=(0,_vue.computed)(()=>g.clearable),C=(0,_vue.computed)(()=>{var e=g.editable;return E.value||!e}),j=(0,_vue.computed)(()=>{var e=g.placeholder;return(e=e||(0,_ui.getConfig)().numberInput.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseInput")}),m=(0,_vue.computed)(()=>{var{type:e,maxLength:t,maxlength:u,min:l,max:i}=g,n=o.value;return(0,_utils.eqEmptyValue)(l)||(0,_utils.eqEmptyValue)(i)?t||u?_xeUtils.default.toNumber(t||u):16:(""+i).length+("integer"===e?0:n+1)+(0<=_xeUtils.default.toNumber(l)?0:1)}),v=(0,_vue.computed)(()=>{var e=g.immediate;return e}),l=(0,_vue.computed)(()=>{var e=g.type,t=x.inputValue;return"integer"===e?_xeUtils.default.toInteger((0,_util.handleNumber)(t)):_xeUtils.default.toNumber((0,_util.handleNumber)(t))}),U=(0,_vue.computed)(()=>{var{type:t,showCurrency:u,currencySymbol:l,autoFill:i}=g,n=x.inputValue,a=o.value;if("amount"!==t)return _xeUtils.default.toString(n);{var t=_xeUtils.default.toNumber(n);let e=_xeUtils.default.commafy(t,{digits:a});return i||([n,t]=e.split("."),t&&(a=t.replace(/0+$/,""),e=a?[n,".",a].join(""):n)),u?""+(l||(0,_ui.getI18n)("vxe.numberInput.currencySymbol")||"")+e:e}}),d=(0,_vue.computed)(()=>{var e=g.min,t=x.inputValue,u=l.value;return!(!t&&0!==t||null===e)&&u<=_xeUtils.default.toNumber(e)}),c=(0,_vue.computed)(()=>{var e=g.max,t=x.inputValue,u=l.value;return!(!t&&0!==t||null===e)&&u>=_xeUtils.default.toNumber(e)}),z={refElem:y,refInput:p},P={computeControlOpts:N},_={xID:t,props:g,context:e,reactData:x,internalData:r,getRefMaps:()=>z,getComputeMaps:()=>P},f={},I=e=>_xeUtils.default.eqNull(e)?"":""+e,S=e=>{var{exponential:t,autoFill:u}=g,l=m.value,i=o.value;let n="";return s.value?(n=(0,_util.toFloatValueFixed)(e,i),u||(n=I(_xeUtils.default.toNumber(n)))):n=I(e),!t||e!==n&&I(e).toLowerCase()!==_xeUtils.default.toNumber(n).toExponential()?n.slice(0,l):e},A=e=>{var t=x.inputValue;f.dispatchEvent(e.type,{value:t},e)},T=(e,t,u)=>{var e=(0,_utils.eqEmptyValue)(e)?null:Number(e),l=e!==g.modelValue;l&&(r.isUM=!0,i("update:modelValue",e)),x.inputValue!==t&&(0,_vue.nextTick)(()=>{x.inputValue=t||""}),f.dispatchEvent("input",{value:e},u),l&&(f.dispatchEvent("change",{value:e},u),n)&&a&&n.triggerItemEvent(u,a.itemConfig.field,e)},k=(e,t)=>{var u=v.value,l=(0,_utils.eqEmptyValue)(e)?null:_xeUtils.default.toNumber(e);x.inputValue=e,u?T(l,e,t):f.dispatchEvent("input",{value:l},t)},Y=e=>{var t=e.target.value;k(t,e)},G=e=>{v.value||A(e),_.dispatchEvent("lazy-change",{value:x.inputValue},e)},W=e=>{var t;C.value||(t=x.inputValue,x.inputValue=(0,_utils.eqEmptyValue)(t)?"":""+_xeUtils.default.toNumber(t),x.isFocus=!0,x.isActivated=!0,A(e))},$=e=>{var t;h.value||(t=x.inputValue,f.dispatchEvent("prefix-click",{value:t},e))},w=(e,t)=>{focus(),T(null,"",e),f.dispatchEvent("clear",{value:t},e),_.dispatchEvent("lazy-change",{value:t},e)},H=e=>{var t;h.value||(t=x.inputValue,f.dispatchEvent("suffix-click",{value:t},e))},J=t=>{var u=g.autoFill,l=x.inputValue,i=o.value,n=s.value;if((0,_utils.eqEmptyValue)(t))x.inputValue="";else{let e=""+t;n&&(e=(0,_util.toFloatValueFixed)(t,i),u||(e=""+_xeUtils.default.toNumber(e))),e!==l&&(x.inputValue=e)}},Q=()=>{var u=g.autoFill,l=x.inputValue,i=o.value,e=s.value;if(e&&l){let e="",t=null;l&&(e=(0,_util.toFloatValueFixed)(l,i),t=_xeUtils.default.toNumber(e),u||(e=""+t)),l!==t?T(t,e,{type:"init"}):x.inputValue=e}},X=e=>null===g.max||""===g.max||_xeUtils.default.toNumber(e)<=_xeUtils.default.toNumber(g.max),Z=e=>null===g.min||""===g.min||_xeUtils.default.toNumber(e)>=_xeUtils.default.toNumber(g.min),L=()=>{var{type:t,min:u,max:l,exponential:i}=g,n=x.inputValue;if(!C.value)if((0,_utils.eqEmptyValue)(n)){let e=null,t=n;!u&&0!==u||(e=_xeUtils.default.toNumber(u),t=""+e),void T(e,""+(t||""),{type:"check"})}else if(n||u||l){let e="integer"===t?_xeUtils.default.toInteger((0,_util.handleNumber)(n)):_xeUtils.default.toNumber((0,_util.handleNumber)(n));Z(e)?X(e)||(e=l):e=u,i&&(t=I(n).toLowerCase())===_xeUtils.default.toNumber(e).toExponential()&&(e=t);l=S(e);T((0,_utils.eqEmptyValue)(l)?null:Number(l),l,{type:"check"})}},ee=e=>{var t=x.inputValue,u=v.value,l=t?Number(t):null;u||T(l,I(t),e),L(),x.isFocus=!1,x.isActivated=!1,f.dispatchEvent("blur",{value:l},e),n&&a&&n.triggerItemEvent(e,a.itemConfig.field,l)},te=(e,t)=>{var{min:u,max:l,type:i}=g,n=x.inputValue,a=D.value,i="integer"===i?_xeUtils.default.toInteger((0,_util.handleNumber)(n)):_xeUtils.default.toNumber((0,_util.handleNumber)(n)),n=e?_xeUtils.default.add(i,a):_xeUtils.default.subtract(i,a);let r;r=Z(n)?X(n)?n:l:u,k(S(r),t)},B=e=>{var t=h.value,u=E.value,l=c.value;t||u||l||te(!0,e),x.isActivated=!0,f.dispatchEvent("plus-number",{value:x.inputValue},e),_.dispatchEvent("lazy-change",{value:x.inputValue},e),f.dispatchEvent("next-number",{value:x.inputValue},e)},O=e=>{var t=h.value,u=E.value,l=d.value;t||u||l||te(!1,e),x.isActivated=!0,f.dispatchEvent("minus-number",{value:x.inputValue},e),_.dispatchEvent("lazy-change",{value:x.inputValue},e),f.dispatchEvent("prev-number",{value:x.inputValue},e)},ue=e=>{var t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);(t||u)&&(e.preventDefault(),(t?B:O)(e))},le=e=>{var{type:t,exponential:u,controls:l}=g,i=N.value,n=i.isArrow,a=C.value,r=(0,_dom.hasControlKey)(e),o=e.shiftKey,s=e.altKey,v=e.keyCode,p=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE),m=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),d=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);r||o||s||(_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.SPACEBAR)||"integer"===t&&110===v||(!u||69!==v)&&65<=v&&v<=90||186<=v&&v<=188||191<=v)&&e.preventDefault(),p?L():(m||d)&&(0,_utils.isEnableConf)(i)&&(!1===l?l:n)&&!a&&ue(e),A(e)},ie=e=>{A(e)},ne=()=>{var e=r.dnTimeout;e&&(clearTimeout(e),r.dnTimeout=void 0)},ae=()=>{var e=r.ainTimeout;e&&(clearTimeout(e),r.ainTimeout=void 0)},re=e=>{u(),r.ainTimeout=setTimeout(()=>{O(e),re(e)},60)},oe=e=>{u(),r.ainTimeout=setTimeout(()=>{B(e),oe(e)},60)},u=()=>{ne(),ae()},se=e=>{r.isMouseDown?r.isMouseDown=!1:(u(),((0,_dom.hasClass)(e.currentTarget,"is--plus")?B:O)(e))},ve=t=>{if(u(),r.isMouseDown=!0,0===t.button){let e=(0,_dom.hasClass)(t.currentTarget,"is--plus");(e?B:O)(t),r.dnTimeout=setTimeout(()=>{(e?oe:re)(t)},500)}},pe=e=>{var t=g.controls,u=N.value,l=u.isWheel,i=C.value;(0,_utils.isEnableConf)(u)&&(!1===t?t:l)&&!i&&x.isActivated&&(e.stopPropagation(),e.preventDefault(),0<(u=e.deltaY)?O(e):u<0&&B(e)),A(e)},me=e=>{A(e)},de=e=>{var t=x.isActivated,u=y.value,l=F.value,i=h.value,n=C.value,a=v.value;i||n||!t||(x.isActivated=(0,_dom.getEventTargetNode)(e,u).flag||(0,_dom.getEventTargetNode)(e,l).flag,x.isActivated)||(a||(i=x.inputValue,n=i?Number(i):null,T(n,I(i),e)),L())},ce=t=>{var u=g.clearable,l=h.value,i=C.value;if(!l&&!i){l=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.TAB),i=_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.DELETE);let e=x.isActivated;l&&(e&&L(),e=!1,x.isActivated=e),i&&u&&e&&w(t,null)}},_e=()=>{var e=x.isActivated;e&&L()};f={dispatchEvent:(e,t,u)=>{i(e,(0,_ui.createEvent)(u,{$numberInput:_},t))},focus(){var e;return C.value||(e=p.value,x.isActivated=!0,e.focus()),(0,_vue.nextTick)()},blur(){return p.value.blur(),(x.isActivated=!1,_vue.nextTick)()},select(){return p.value.select(),(x.isActivated=!1,_vue.nextTick)()}},Object.assign(_,f);let fe=()=>{var e=g.prefixIcon,t=K.value,u=b.prefix,e=e||t.icon,t=t.content;return u||e||t?(0,_vue.h)("div",{class:"vxe-number-input--prefix",onClick:$},[(0,_vue.h)("div",{class:"vxe-number-input--prefix-icon"},u?(0,_vn.getSlotVNs)(u({})):[e?(0,_vue.h)("i",{class:e}):(0,_ui.renderEmptyElement)(_),t?(0,_vue.h)("span",{class:"vxe-prefix-input--suffix-text"},""+t):(0,_ui.renderEmptyElement)(_)])]):(0,_ui.renderEmptyElement)(_)},ge=()=>{var e=g.suffixIcon,t=x.inputValue,u=b.suffix,l=R.value,i=h.value,n=V.value,e=e||l.icon,l=l.content;return(0,_vue.h)("div",{class:["vxe-number-input--suffix",{"is--clear":n&&!i&&!(""===t||_xeUtils.default.eqNull(t))}]},[n?(0,_vue.h)("div",{class:"vxe-number-input--clear-icon",onClick:w},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().INPUT_CLEAR})]):(0,_ui.renderEmptyElement)(_),u||e||l?(0,_vue.h)("div",{class:"vxe-number-input--suffix-icon",onClick:H},u?(0,_vn.getSlotVNs)(u({})):[e?(0,_vue.h)("i",{class:e}):(0,_ui.renderEmptyElement)(_),l?(0,_vue.h)("span",{class:"vxe-number-input--suffix-text"},""+l):(0,_ui.renderEmptyElement)(_)]):(0,_ui.renderEmptyElement)(_)])},M=()=>{var{type:e,name:t,autocomplete:u,autoComplete:l}=g,{inputValue:i,isFocus:n}=x,a=h.value,r=U.value,o=C.value,s=m.value,v=j.value;return(0,_vue.h)("div",{key:"ni",class:"vxe-number-input--input-wrapper"},[fe(),(0,_vue.h)("div",{class:"vxe-number-input--input-inner"},[(0,_vue.h)("input",{ref:p,class:"vxe-number-input--input",value:n||"amount"!==e?i:r,name:t,type:"text",placeholder:v,maxlength:s,readonly:o,disabled:a,autocomplete:l||u,onKeydown:le,onKeyup:ie,onClick:me,onInput:Y,onChange:G,onFocus:W,onBlur:ee})]),ge()])},be=()=>{var e=g.minusIcon,t=d.value;return(0,_vue.h)("button",{key:"prev",class:["vxe-number-input--minus-btn is--minus",{"is--disabled":t}],type:"button",onClick:se,onMousedown:ve,onMouseup:u,onMouseleave:u},[(0,_vue.h)("i",{class:e||(0,_ui.getIcon)().NUMBER_INPUT_MINUS_NUM})])},xe=()=>{var e=g.plusIcon,t=c.value;return(0,_vue.h)("button",{key:"next",class:["vxe-number-input--plus-btn is--plus",{"is--disabled":t}],type:"button",onClick:se,onMousedown:ve,onMouseup:u,onMouseleave:u},[(0,_vue.h)("i",{class:e||(0,_ui.getIcon)().NUMBER_INPUT_PLUS_NUM})])},ye=()=>(0,_vue.h)("div",{key:"cplr",class:"vxe-number-input--side-control"},[xe(),be()]);return _.renderVN=()=>{var{className:e,controls:t,type:u,align:l,prefixIcon:i,suffixIcon:n}=g,{inputValue:a,isActivated:r}=x,o=q.value,s=N.value,{layout:v,showButton:p}=s,m=h.value,d=E.value,c=U.value,_=b.prefix,f=b.suffix;return d?(0,_vue.h)("div",{ref:y,class:["vxe-number-input--readonly","type--"+u,e]},c):(d=C.value,c=V.value,s=(0,_utils.isEnableConf)(s)&&(!1===t?t:p),(0,_vue.h)("div",{ref:y,class:["vxe-number-input","type--"+u,"ctl--"+("right"===v||"left"===v?v:"default"),e,{["size--"+o]:o,["is--"+l]:l,"is--controls":s&&!d,"is--prefix":!!_||i,"is--suffix":!!f||n,"is--disabled":m,"is--active":r,"show--clear":c&&!m&&!(""===a||_xeUtils.default.eqNull(a))}],spellcheck:!1},s?"right"===v?[M(),ye()]:"left"===v?[ye(),M()]:[be(),M(),xe()]:[M()]))},(0,_vue.watch)(()=>g.modelValue,e=>{r.isUM||J(e),r.isUM=!1}),(0,_vue.watch)(()=>g.type,()=>{Object.assign(x,{inputValue:g.modelValue}),Q()}),(0,_vue.onMounted)(()=>{J(g.modelValue);var e=p.value;e&&e.addEventListener("wheel",pe,{passive:!1}),_ui.globalEvents.on(_,"mousedown",de),_ui.globalEvents.on(_,"keydown",ce),_ui.globalEvents.on(_,"blur",_e)}),(0,_vue.onBeforeUnmount)(()=>{x.isFocus=!1,u(),L();var e=p.value;e&&e.removeEventListener("wheel",pe),_ui.globalEvents.off(_,"mousedown"),_ui.globalEvents.off(_,"keydown"),_ui.globalEvents.off(_,"blur")}),Q(),_},render(){return this.renderVN()}});