vxe-pc-ui 4.17.0 → 4.17.2

package/lib/number-input/src/number-input.js

@@ -50,6 +50,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     align: String,
     form: String,
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => (0, _ui.getConfig)().numberInput.inputClassName
+    },
     size: {
       type: String,
       default: () => (0, _ui.getConfig)().numberInput.size || (0, _ui.getConfig)().size
@@ -331,6 +335,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return false;
     });
+    const computeInpClassNamevalue = (0, _vue.computed)(() => {
+      const {
+        inputClassName
+      } = props;
+      return 'vxe-number-input--input' + (inputClassName ? ' ' + inputClassName : '');
+    });
     const refMaps = {
       refElem,
       refInput: refInputTarget
@@ -347,7 +357,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
-    let numberInputMethods = {};
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, (0, _ui.createEvent)(evnt, {
+        $numberInput: $xeNumberInput
+      }, params));
+    };
     const handleNumberString = val => {
       if (_xeUtils.default.eqNull(val)) {
         return '';
@@ -382,7 +396,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         inputValue
       } = reactData;
-      numberInputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -398,11 +412,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           reactData.inputValue = inputValue || '';
         });
       }
-      numberInputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (isChange) {
-        numberInputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -418,7 +432,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (inpImmediate) {
         handleChange(value, inputValue, evnt);
       } else {
-        numberInputMethods.dispatchEvent('input', {
+        dispatchEvent('input', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -437,7 +451,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (!inpImmediate) {
         triggerEvent(evnt);
       }
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -459,7 +473,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const {
           inputValue
         } = reactData;
-        numberInputMethods.dispatchEvent('prefix-click', {
+        dispatchEvent('prefix-click', {
           value: inputValue
         }, evnt);
       }
@@ -467,10 +481,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const clearValueEvent = (evnt, value) => {
       focus();
       handleChange(null, '', evnt);
-      numberInputMethods.dispatchEvent('clear', {
+      dispatchEvent('clear', {
         value
       }, evnt);
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value
       }, evnt);
     };
@@ -480,7 +494,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const {
           inputValue
         } = reactData;
-        numberInputMethods.dispatchEvent('suffix-click', {
+        dispatchEvent('suffix-click', {
           value: inputValue
         }, evnt);
       }
@@ -608,7 +622,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       afterCheckValue();
       reactData.isFocus = false;
       reactData.isActivated = false;
-      numberInputMethods.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       // 自动更新校验状态
@@ -647,14 +661,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         numberChange(true, evnt);
       }
       reactData.isActivated = true;
-      numberInputMethods.dispatchEvent('plus-number', {
+      dispatchEvent('plus-number', {
         value: reactData.inputValue
       }, evnt);
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
       // 已废弃
-      numberInputMethods.dispatchEvent('next-number', {
+      dispatchEvent('next-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -666,14 +680,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         numberChange(false, evnt);
       }
       reactData.isActivated = true;
-      numberInputMethods.dispatchEvent('minus-number', {
+      dispatchEvent('minus-number', {
         value: reactData.inputValue
       }, evnt);
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
       // 已废弃
-      numberInputMethods.dispatchEvent('prev-number', {
+      dispatchEvent('prev-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -877,12 +891,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         afterCheckValue();
       }
     };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, (0, _ui.createEvent)(evnt, {
-        $numberInput: $xeNumberInput
-      }, params));
-    };
-    numberInputMethods = {
+    const numberInputMethods = {
       dispatchEvent,
       focus() {
         const inputReadonly = computeInputReadonly.value;
@@ -973,6 +982,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const inputReadonly = computeInputReadonly.value;
       const inpMaxLength = computeInpMaxLength.value;
       const inpPlaceholder = computeInpPlaceholder.value;
+      const inpClassName = computeInpClassNamevalue.value;
       return (0, _vue.h)('div', {
         key: 'ni',
         class: 'vxe-number-input--input-wrapper'
@@ -980,10 +990,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-number-input--input-inner'
       }, [(0, _vue.h)('input', {
         ref: refInputTarget,
-        class: 'vxe-number-input--input',
-        value: !isFocus && type === 'amount' ? numLabel : inputValue,
+        class: inpClassName,
         name,
         type: 'text',
+        value: !isFocus && type === 'amount' ? numLabel : inputValue,
         placeholder: inpPlaceholder,
         maxlength: inpMaxLength,
         readonly: inputReadonly,

package/lib/number-input/src/number-input.min.js

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

package/lib/password-input/src/password-input.js

@@ -33,6 +33,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: 'off'
     },
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => (0, _ui.getConfig)().passwordInput.inputClassName
+    },
     size: {
       type: String,
       default: () => (0, _ui.getConfig)().passwordInput.size || (0, _ui.getConfig)().size
@@ -43,6 +47,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: Boolean,
       default: () => (0, _ui.getConfig)().passwordInput.controls
     },
+    editable: {
+      type: Boolean,
+      default: true
+    },
     // 已废弃
     autocomplete: String
   },
@@ -76,16 +84,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       reactData,
       getRefMaps: () => refMaps
     };
-    let passwordInputMethods = {};
     const computeIsClearable = (0, _vue.computed)(() => {
       return props.clearable;
     });
-    const computeInpReadonly = (0, _vue.computed)(() => {
-      const {
-        readonly
-      } = props;
-      return readonly;
-    });
     const computeInpPlaceholder = (0, _vue.computed)(() => {
       const {
         placeholder
@@ -99,6 +100,36 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return (0, _ui.getI18n)('vxe.base.pleaseInput');
     });
+    const computeFormReadonly = (0, _vue.computed)(() => {
+      if ((0, _ui.getConfig)().inputReadonly === 'obsolete') {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      const {
+        readonly
+      } = props;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    });
+    const computeIsDisabled = (0, _vue.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
     const computeInputType = (0, _vue.computed)(() => {
       const {
         showPwd
@@ -114,11 +145,36 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       return immediate;
     });
+    const computeInputReadonly = (0, _vue.computed)(() => {
+      const {
+        editable
+      } = props;
+      const formReadonly = computeFormReadonly.value;
+      return formReadonly || !editable;
+    });
+    const computeDomValue = (0, _vue.computed)(() => {
+      const {
+        inputValue
+      } = reactData;
+      return inputValue;
+    });
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, (0, _ui.createEvent)(evnt, {
+        $passwordInput: $xePasswordInput
+      }, params));
+    };
+    const updateDomValue = () => {
+      const domValue = computeDomValue.value;
+      const inputElem = refInputTarget.value;
+      if (inputElem) {
+        inputElem.value = _xeUtils.default.eqNull(domValue) ? '' : '' + domValue;
+      }
+    };
     const triggerEvent = evnt => {
       const {
         inputValue
       } = reactData;
-      passwordInputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -128,7 +184,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (inpImmediate) {
         handleChange(value, evnt);
       } else {
-        passwordInputMethods.dispatchEvent('input', {
+        dispatchEvent('input', {
           value
         }, evnt);
       }
@@ -141,11 +197,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const handleChange = (value, evnt) => {
       reactData.inputValue = value;
       emit('update:modelValue', value);
-      passwordInputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (_xeUtils.default.toValueString(props.modelValue) !== value) {
-        passwordInputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -156,7 +212,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const changeEvent = evnt => {
       triggerEvent(evnt);
-      $xePasswordInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
       // 自动更新校验状态
@@ -174,7 +230,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const value = inputValue;
       reactData.isActivated = false;
-      $xePasswordInput.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       // 自动更新校验状态
@@ -183,17 +239,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const passwordToggleEvent = evnt => {
-      const {
-        readonly,
-        disabled
-      } = props;
       const {
         showPwd
       } = reactData;
-      if (!disabled && !readonly) {
+      const isDisabled = computeIsDisabled.value;
+      const formReadonly = computeFormReadonly.value;
+      if (!isDisabled && !formReadonly) {
         reactData.showPwd = !showPwd;
       }
-      $xePasswordInput.dispatchEvent('toggle-visible', {
+      dispatchEvent('toggle-visible', {
         visible: reactData.showPwd
       }, evnt);
     };
@@ -203,39 +257,57 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const clearValueEvent = (evnt, value) => {
       focus();
       handleChange('', evnt);
-      $xePasswordInput.dispatchEvent('clear', {
+      dispatchEvent('clear', {
         value
       }, evnt);
-      $xePasswordInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
     const clickSuffixEvent = evnt => {
-      const {
-        disabled
-      } = props;
-      if (!disabled) {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
         const {
           inputValue
         } = reactData;
-        $xePasswordInput.dispatchEvent('suffix-click', {
+        dispatchEvent('suffix-click', {
           value: inputValue
         }, evnt);
       }
     };
     const clickPrefixEvent = evnt => {
-      const {
-        disabled
-      } = props;
-      if (!disabled) {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
         const {
           inputValue
         } = reactData;
-        $xePasswordInput.dispatchEvent('prefix-click', {
+        dispatchEvent('prefix-click', {
           value: inputValue
         }, evnt);
       }
     };
+    const passwordInputMethods = {
+      dispatchEvent,
+      focus() {
+        const inputElem = refInputTarget.value;
+        reactData.isActivated = true;
+        inputElem.focus();
+        return (0, _vue.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0, _vue.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0, _vue.nextTick)();
+      }
+    };
+    Object.assign($xePasswordInput, passwordInputMethods);
     const renderPasswordIcon = () => {
       const {
         showPwd
@@ -263,18 +335,18 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const renderSuffixIcon = () => {
       const {
-        disabled,
         suffixIcon,
         controls
       } = props;
       const {
         inputValue
       } = reactData;
-      const suffixSlot = slots.suffix;
+      const isDisabled = computeIsDisabled.value;
       const isClearable = computeIsClearable.value;
+      const suffixSlot = slots.suffix;
       return isClearable || controls || suffixSlot || suffixIcon ? (0, _vue.h)('div', {
         class: ['vxe-password-input--suffix', {
-          'is--clear': isClearable && !disabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
+          'is--clear': isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
         }]
       }, [isClearable ? (0, _vue.h)('div', {
         class: 'vxe-password-input--clear-icon',
@@ -288,40 +360,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: suffixIcon
       })]) : (0, _ui.renderEmptyElement)($xePasswordInput)]) : null;
     };
-    passwordInputMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, (0, _ui.createEvent)(evnt, {
-          $passwordInput: $xePasswordInput
-        }, params));
-      },
-      focus() {
-        const inputElem = refInputTarget.value;
-        reactData.isActivated = true;
-        inputElem.focus();
-        return (0, _vue.nextTick)();
-      },
-      blur() {
-        const inputElem = refInputTarget.value;
-        inputElem.blur();
-        reactData.isActivated = false;
-        return (0, _vue.nextTick)();
-      },
-      select() {
-        const inputElem = refInputTarget.value;
-        inputElem.select();
-        reactData.isActivated = false;
-        return (0, _vue.nextTick)();
-      }
-    };
-    Object.assign($xePasswordInput, passwordInputMethods);
-    (0, _vue.watch)(() => props.modelValue, val => {
-      reactData.inputValue = val;
-    });
     const renderVN = () => {
       const {
         className,
+        inputClassName,
         name,
-        disabled,
         readonly,
         autocomplete,
         autoComplete,
@@ -331,11 +374,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         inputValue,
         isActivated
       } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      const formReadonly = computeFormReadonly.value;
+      if (formReadonly) {
+        return (0, _vue.h)('div', {
+          ref: refElem,
+          class: ['vxe-password-input--readonly', className]
+        }, (0, _utils.getText)(inputValue));
+      }
       const vSize = computeSize.value;
-      const inpReadonly = computeInpReadonly.value;
       const inputType = computeInputType.value;
       const inpPlaceholder = computeInpPlaceholder.value;
       const isClearable = computeIsClearable.value;
+      const inputReadonly = computeInputReadonly.value;
       const prefix = renderPrefixIcon();
       const suffix = renderSuffixIcon();
       return (0, _vue.h)('div', {
@@ -345,22 +396,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--prefix': !!prefix,
           'is--suffix': !!suffix,
           'is--readonly': readonly,
-          'is--disabled': disabled,
+          'is--disabled': isDisabled,
           'is--active': isActivated,
-          'show--clear': isClearable && !disabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
+          'show--clear': isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
         }],
         spellcheck: false
       }, [prefix || (0, _ui.renderEmptyElement)($xePasswordInput), (0, _vue.h)('div', {
         class: 'vxe-password-input--wrapper'
       }, [(0, _vue.h)('input', {
         ref: refInputTarget,
-        class: 'vxe-password-input--inner',
-        value: inputValue,
+        class: 'vxe-password-input--inner' + (inputClassName ? ' ' + inputClassName : ''),
         name,
         type: inputType,
         placeholder: inpPlaceholder,
-        readonly: inpReadonly,
-        disabled,
+        readonly: inputReadonly,
+        disabled: isDisabled,
         autocomplete: autocomplete || autoComplete,
         maxlength: maxLength,
         onClick: clickEvent,
@@ -370,6 +420,25 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         onBlur: blurEvent
       })]), suffix || (0, _ui.renderEmptyElement)($xePasswordInput)]);
     };
+    (0, _vue.watch)(() => props.modelValue, val => {
+      reactData.inputValue = val;
+    });
+    const rDvFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(computeFormReadonly, () => {
+      rDvFlag.value++;
+    });
+    (0, _vue.watch)(computeDomValue, () => {
+      rDvFlag.value++;
+    });
+    (0, _vue.watch)(rDvFlag, () => {
+      updateDomValue();
+      (0, _vue.nextTick)(() => {
+        updateDomValue();
+      });
+    });
+    (0, _vue.onMounted)(() => {
+      updateDomValue();
+    });
     $xePasswordInput.renderVN = renderVN;
     return $xePasswordInput;
   },