vxe-pc-ui 4.17.0 → 4.17.2

package/lib/index.umd.js

@@ -3346,7 +3346,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-const coreVersion = "4.4.18";
+const coreVersion = "4.4.20";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3633,6 +3633,7 @@ const GLOBAL_EVENT_KEYS = {
   PAGE_DOWN: 'PageDown',
   HOME: 'Home',
   END: 'End',
+  PROCESS: 'Process',
   A: 'A',
   X: 'X',
   C: 'C',
@@ -3973,7 +3974,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "4.4.18";
+const version = "4.4.20";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -4657,7 +4658,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.17.0"}`;
+const uiVersion = `ui v${"4.17.2"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4675,7 +4676,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.17.0";
+const ui_version = "4.17.2";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -14662,6 +14663,10 @@ const {
     align: String,
     form: String,
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => getConfig().input.inputClassName
+    },
     size: {
       type: String,
       default: () => getConfig().input.size || getConfig().size
@@ -14806,7 +14811,6 @@ const {
       internalData,
       getRefMaps: () => refMaps
     };
-    let inputMethods = {};
     const parseDate = (value, format) => {
       const {
         type
@@ -15325,10 +15329,10 @@ const {
       const {
         type,
         editable,
-        multiple,
-        readonly
+        multiple
       } = props;
-      return readonly || multiple || !editable || type === 'week' || type === 'quarter';
+      const formReadonly = computeFormReadonly.value;
+      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
     });
     const computeInputType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
@@ -15411,6 +15415,12 @@ const {
       }
       return false;
     });
+    const computeDomValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        inputValue
+      } = reactData;
+      return inputValue;
+    });
     const getNumberValue = val => {
       const {
         type,
@@ -15424,6 +15434,18 @@ const {
       }
       return restVal.slice(0, inpMaxLength);
     };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $input: $xeInput
+      }, params));
+    };
+    const updateDomValue = () => {
+      const domValue = computeDomValue.value;
+      const inputElem = refInputTarget.value;
+      if (inputElem) {
+        inputElem.value = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(domValue) ? '' : '' + domValue;
+      }
+    };
     const emitModel = value => {
       emit('update:modelValue', value);
     };
@@ -15431,7 +15453,7 @@ const {
       const {
         inputValue
       } = reactData;
-      inputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -15441,11 +15463,11 @@ const {
       }
       reactData.inputValue = value;
       emitModel(value);
-      inputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(props.modelValue) !== value) {
-        inputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         if (!$xeSelect && !$xeTreeSelect) {
@@ -15464,7 +15486,7 @@ const {
         if (inpImmediate) {
           handleChange(value, evnt);
         } else {
-          inputMethods.dispatchEvent('input', {
+          dispatchEvent('input', {
             value
           }, evnt);
           if (!$xeSelect && !$xeTreeSelect) {
@@ -15486,7 +15508,7 @@ const {
       if (!inpImmediate) {
         triggerEvent(evnt);
       }
-      $xeInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -15503,7 +15525,7 @@ const {
       if (!reactData.visiblePanel) {
         reactData.isActivated = false;
       }
-      inputMethods.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       if (!$xeSelect && !$xeTreeSelect) {
@@ -15533,7 +15555,7 @@ const {
         const {
           inputValue
         } = reactData;
-        $xeInput.dispatchEvent('prefix-click', {
+        dispatchEvent('prefix-click', {
           value: inputValue
         }, evnt);
       }
@@ -15563,10 +15585,10 @@ const {
         }
       }
       handleChange('', evnt);
-      $xeInput.dispatchEvent('clear', {
+      dispatchEvent('clear', {
         value
       }, evnt);
-      $xeInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value
       }, evnt);
     };
@@ -15576,7 +15598,7 @@ const {
         const {
           inputValue
         } = reactData;
-        $xeInput.dispatchEvent('suffix-click', {
+        dispatchEvent('suffix-click', {
           value: inputValue
         }, evnt);
       }
@@ -15844,14 +15866,14 @@ const {
       if (!isDisabled && !inputReadonly) {
         reactData.showPwd = !showPwd;
       }
-      inputMethods.dispatchEvent('toggle-visible', {
+      dispatchEvent('toggle-visible', {
         visible: reactData.showPwd
       }, evnt);
     };
     // 密码
     // 搜索
     const searchEvent = evnt => {
-      inputMethods.dispatchEvent('search-click', {}, evnt);
+      dispatchEvent('search-click', {}, evnt);
     };
     // 搜索
     // 数值
@@ -15885,7 +15907,7 @@ const {
       if (!isDisabled && !inputReadonly && !isDisabledSubtractNumber) {
         numberChange(false, evnt);
       }
-      inputMethods.dispatchEvent('next-number', {
+      dispatchEvent('next-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -15903,7 +15925,7 @@ const {
       if (!isDisabled && !inputReadonly && !isDisabledAddNumber) {
         numberChange(true, evnt);
       }
-      inputMethods.dispatchEvent('prev-number', {
+      dispatchEvent('prev-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -16062,7 +16084,7 @@ const {
           }
         }
         reactData.selectMonth = viewDate;
-        inputMethods.dispatchEvent('date-prev', {
+        dispatchEvent('date-prev', {
           viewType: datePanelType,
           viewDate,
           value,
@@ -16076,7 +16098,7 @@ const {
         dateChange(reactData.currentDate);
         hidePanel();
       }
-      inputMethods.dispatchEvent('date-today', {
+      dispatchEvent('date-today', {
         type: props.type
       }, evnt);
     };
@@ -16114,7 +16136,7 @@ const {
           }
         }
         reactData.selectMonth = viewDate;
-        inputMethods.dispatchEvent('date-next', {
+        dispatchEvent('date-next', {
           viewType: datePanelType,
           viewDate,
           value,
@@ -16695,6 +16717,31 @@ const {
         }
       }
     };
+    const inputMethods = {
+      dispatchEvent,
+      focus() {
+        const inputElem = refInputTarget.value;
+        reactData.isActivated = true;
+        inputElem.focus();
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      showPanel,
+      hidePanel,
+      updatePlacement
+    };
+    Object.assign($xeInput, inputMethods);
     const renderDateLabel = (item, label) => {
       const {
         festivalMethod
@@ -17239,39 +17286,10 @@ const {
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)();
     };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
-        $input: $xeInput
-      }, params));
-    };
-    inputMethods = {
-      dispatchEvent,
-      focus() {
-        const inputElem = refInputTarget.value;
-        reactData.isActivated = true;
-        inputElem.focus();
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      blur() {
-        const inputElem = refInputTarget.value;
-        inputElem.blur();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      select() {
-        const inputElem = refInputTarget.value;
-        inputElem.select();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      showPanel,
-      hidePanel,
-      updatePlacement
-    };
-    Object.assign($xeInput, inputMethods);
     const renderVN = () => {
       const {
         className,
+        inputClassName,
         controls,
         type,
         title,
@@ -17326,8 +17344,7 @@ const {
         title: title || null
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
         ref: refInputTarget,
-        class: 'vxe-input--inner',
-        value: inputValue,
+        class: 'vxe-input--inner' + (inputClassName ? ' ' + inputClassName : ''),
         name,
         type: inputType,
         placeholder: inpPlaceholder,
@@ -17378,6 +17395,19 @@ const {
         reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
       }
     });
+    const rDvFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeFormReadonly, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDomValue, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(rDvFlag, () => {
+      updateDomValue();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateDomValue();
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
         type
@@ -17399,6 +17429,7 @@ const {
       globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent);
       globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent);
       globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent);
+      updateDomValue();
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       numberStopDown();
@@ -21324,6 +21355,10 @@ function hexToRgb(str) {
     align: String,
     form: String,
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => getConfig().numberInput.inputClassName
+    },
     size: {
       type: String,
       default: () => getConfig().numberInput.size || getConfig().size
@@ -21605,6 +21640,12 @@ function hexToRgb(str) {
       }
       return false;
     });
+    const computeInpClassNamevalue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        inputClassName
+      } = props;
+      return 'vxe-number-input--input' + (inputClassName ? ' ' + inputClassName : '');
+    });
     const refMaps = {
       refElem,
       refInput: refInputTarget
@@ -21621,7 +21662,11 @@ function hexToRgb(str) {
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
-    let numberInputMethods = {};
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $numberInput: $xeNumberInput
+      }, params));
+    };
     const handleNumberString = val => {
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(val)) {
         return '';
@@ -21656,7 +21701,7 @@ function hexToRgb(str) {
       const {
         inputValue
       } = reactData;
-      numberInputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -21672,11 +21717,11 @@ function hexToRgb(str) {
           reactData.inputValue = inputValue || '';
         });
       }
-      numberInputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (isChange) {
-        numberInputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -21692,7 +21737,7 @@ function hexToRgb(str) {
       if (inpImmediate) {
         handleChange(value, inputValue, evnt);
       } else {
-        numberInputMethods.dispatchEvent('input', {
+        dispatchEvent('input', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -21711,7 +21756,7 @@ function hexToRgb(str) {
       if (!inpImmediate) {
         triggerEvent(evnt);
       }
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -21733,7 +21778,7 @@ function hexToRgb(str) {
         const {
           inputValue
         } = reactData;
-        numberInputMethods.dispatchEvent('prefix-click', {
+        dispatchEvent('prefix-click', {
           value: inputValue
         }, evnt);
       }
@@ -21741,10 +21786,10 @@ function hexToRgb(str) {
     const clearValueEvent = (evnt, value) => {
       focus();
       handleChange(null, '', evnt);
-      numberInputMethods.dispatchEvent('clear', {
+      dispatchEvent('clear', {
         value
       }, evnt);
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value
       }, evnt);
     };
@@ -21754,7 +21799,7 @@ function hexToRgb(str) {
         const {
           inputValue
         } = reactData;
-        numberInputMethods.dispatchEvent('suffix-click', {
+        dispatchEvent('suffix-click', {
           value: inputValue
         }, evnt);
       }
@@ -21882,7 +21927,7 @@ function hexToRgb(str) {
       afterCheckValue();
       reactData.isFocus = false;
       reactData.isActivated = false;
-      numberInputMethods.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       // 自动更新校验状态
@@ -21921,14 +21966,14 @@ function hexToRgb(str) {
         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);
     };
@@ -21940,14 +21985,14 @@ function hexToRgb(str) {
         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);
     };
@@ -22151,12 +22196,7 @@ function hexToRgb(str) {
         afterCheckValue();
       }
     };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
-        $numberInput: $xeNumberInput
-      }, params));
-    };
-    numberInputMethods = {
+    const numberInputMethods = {
       dispatchEvent,
       focus() {
         const inputReadonly = computeInputReadonly.value;
@@ -22247,6 +22287,7 @@ function hexToRgb(str) {
       const inputReadonly = computeInputReadonly.value;
       const inpMaxLength = computeInpMaxLength.value;
       const inpPlaceholder = computeInpPlaceholder.value;
+      const inpClassName = computeInpClassNamevalue.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 'ni',
         class: 'vxe-number-input--input-wrapper'
@@ -22254,10 +22295,10 @@ function hexToRgb(str) {
         class: 'vxe-number-input--input-inner'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_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,
@@ -26796,6 +26837,10 @@ function date_picker_createInternalData() {
     },
     form: String,
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => getConfig().datePicker.inputClassName
+    },
     zIndex: Number,
     size: {
       type: String,
@@ -28363,6 +28408,7 @@ function date_picker_createInternalData() {
     const renderVN = () => {
       const {
         className,
+        inputClassName,
         type,
         name,
         autoComplete
@@ -28407,7 +28453,7 @@ function date_picker_createInternalData() {
         class: 'vxe-date-picker--wrapper'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
         ref: refInputTarget,
-        class: 'vxe-date-picker--inner',
+        class: 'vxe-date-picker--inner' + (inputClassName ? ' ' + inputClassName : ''),
         value: labelFlag ? inputLabel : '',
         name,
         type: 'text',
@@ -28563,6 +28609,10 @@ function date_range_picker_createInternalData() {
     },
     form: String,
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => getConfig().dateRangePicker.inputClassName
+    },
     zIndex: Number,
     size: {
       type: String,
@@ -30032,6 +30082,7 @@ function date_range_picker_createInternalData() {
     const renderVN = () => {
       const {
         className,
+        inputClassName,
         type,
         name,
         autoComplete
@@ -30072,7 +30123,7 @@ function date_range_picker_createInternalData() {
         class: 'vxe-date-range-picker--wrapper'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
         ref: refInputTarget,
-        class: 'vxe-date-range-picker--inner',
+        class: 'vxe-date-range-picker--inner' + (inputClassName ? ' ' + inputClassName : ''),
         value: inputLabel,
         name,
         type: 'text',
@@ -42162,6 +42213,10 @@ const Pager = VxePager;
       default: 'off'
     },
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => getConfig().passwordInput.inputClassName
+    },
     size: {
       type: String,
       default: () => getConfig().passwordInput.size || getConfig().size
@@ -42172,6 +42227,10 @@ const Pager = VxePager;
       type: Boolean,
       default: () => getConfig().passwordInput.controls
     },
+    editable: {
+      type: Boolean,
+      default: true
+    },
     // 已废弃
     autocomplete: String
   },
@@ -42205,16 +42264,9 @@ const Pager = VxePager;
       reactData,
       getRefMaps: () => refMaps
     };
-    let passwordInputMethods = {};
     const computeIsClearable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return props.clearable;
     });
-    const computeInpReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        readonly
-      } = props;
-      return readonly;
-    });
     const computeInpPlaceholder = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         placeholder
@@ -42228,6 +42280,36 @@ const Pager = VxePager;
       }
       return getI18n('vxe.base.pleaseInput');
     });
+    const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      if (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,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
     const computeInputType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         showPwd
@@ -42243,11 +42325,36 @@ const Pager = VxePager;
       } = props;
       return immediate;
     });
+    const computeInputReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        editable
+      } = props;
+      const formReadonly = computeFormReadonly.value;
+      return formReadonly || !editable;
+    });
+    const computeDomValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        inputValue
+      } = reactData;
+      return inputValue;
+    });
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $passwordInput: $xePasswordInput
+      }, params));
+    };
+    const updateDomValue = () => {
+      const domValue = computeDomValue.value;
+      const inputElem = refInputTarget.value;
+      if (inputElem) {
+        inputElem.value = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(domValue) ? '' : '' + domValue;
+      }
+    };
     const triggerEvent = evnt => {
       const {
         inputValue
       } = reactData;
-      passwordInputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -42257,7 +42364,7 @@ const Pager = VxePager;
       if (inpImmediate) {
         handleChange(value, evnt);
       } else {
-        passwordInputMethods.dispatchEvent('input', {
+        dispatchEvent('input', {
           value
         }, evnt);
       }
@@ -42270,11 +42377,11 @@ const Pager = VxePager;
     const handleChange = (value, evnt) => {
       reactData.inputValue = value;
       emit('update:modelValue', value);
-      passwordInputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(props.modelValue) !== value) {
-        passwordInputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -42285,7 +42392,7 @@ const Pager = VxePager;
     };
     const changeEvent = evnt => {
       triggerEvent(evnt);
-      $xePasswordInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
       // 自动更新校验状态
@@ -42303,7 +42410,7 @@ const Pager = VxePager;
       } = reactData;
       const value = inputValue;
       reactData.isActivated = false;
-      $xePasswordInput.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       // 自动更新校验状态
@@ -42312,17 +42419,15 @@ const Pager = VxePager;
       }
     };
     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);
     };
@@ -42332,39 +42437,57 @@ const Pager = VxePager;
     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,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      }
+    };
+    Object.assign($xePasswordInput, passwordInputMethods);
     const renderPasswordIcon = () => {
       const {
         showPwd
@@ -42392,18 +42515,18 @@ const Pager = VxePager;
     };
     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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: ['vxe-password-input--suffix', {
-          'is--clear': isClearable && !disabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+          'is--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
         }]
       }, [isClearable ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-password-input--clear-icon',
@@ -42417,40 +42540,11 @@ const Pager = VxePager;
         class: suffixIcon
       })]) : renderEmptyElement($xePasswordInput)]) : null;
     };
-    passwordInputMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, createEvent(evnt, {
-          $passwordInput: $xePasswordInput
-        }, params));
-      },
-      focus() {
-        const inputElem = refInputTarget.value;
-        reactData.isActivated = true;
-        inputElem.focus();
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      blur() {
-        const inputElem = refInputTarget.value;
-        inputElem.blur();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      select() {
-        const inputElem = refInputTarget.value;
-        inputElem.select();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      }
-    };
-    Object.assign($xePasswordInput, passwordInputMethods);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
-      reactData.inputValue = val;
-    });
     const renderVN = () => {
       const {
         className,
+        inputClassName,
         name,
-        disabled,
         readonly,
         autocomplete,
         autoComplete,
@@ -42460,11 +42554,19 @@ const Pager = VxePager;
         inputValue,
         isActivated
       } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      const formReadonly = computeFormReadonly.value;
+      if (formReadonly) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refElem,
+          class: ['vxe-password-input--readonly', className]
+        }, 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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -42474,22 +42576,21 @@ const Pager = VxePager;
           'is--prefix': !!prefix,
           'is--suffix': !!suffix,
           'is--readonly': readonly,
-          'is--disabled': disabled,
+          'is--disabled': isDisabled,
           'is--active': isActivated,
-          'show--clear': isClearable && !disabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+          'show--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
         }],
         spellcheck: false
       }, [prefix || renderEmptyElement($xePasswordInput), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-password-input--wrapper'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_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,
@@ -42499,6 +42600,25 @@ const Pager = VxePager;
         onBlur: blurEvent
       })]), suffix || renderEmptyElement($xePasswordInput)]);
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
+      reactData.inputValue = val;
+    });
+    const rDvFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeFormReadonly, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDomValue, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(rDvFlag, () => {
+      updateDomValue();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateDomValue();
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      updateDomValue();
+    });
     $xePasswordInput.renderVN = renderVN;
     return $xePasswordInput;
   },
@@ -49345,6 +49465,10 @@ let autoTxtElem;
   props: {
     modelValue: [String, Number],
     className: String,
+    inputClassName: {
+      type: String,
+      default: () => getConfig().textarea.inputClassName
+    },
     immediate: {
       type: Boolean,
       default: true
@@ -49430,7 +49554,6 @@ let autoTxtElem;
       reactData,
       getRefMaps: () => refMaps
     };
-    let textareaMethods = {};
     const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         readonly
@@ -49506,6 +49629,24 @@ let autoTxtElem;
         maxRows: 10
       }, getConfig().textarea.autoSize, autoSize);
     });
+    const computeDomValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        inputValue
+      } = reactData;
+      return inputValue;
+    });
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $textarea: $xeTextarea
+      }, params));
+    };
+    const updateDomValue = () => {
+      const domValue = computeDomValue.value;
+      const taElem = refTextarea.value;
+      if (taElem) {
+        taElem.value = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(domValue) ? '' : '' + domValue;
+      }
+    };
     const updateAutoTxt = () => {
       const {
         size,
@@ -49577,7 +49718,7 @@ let autoTxtElem;
     };
     const triggerEvent = evnt => {
       const value = reactData.inputValue;
-      $xeTextarea.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value
       }, evnt);
     };
@@ -49612,7 +49753,7 @@ let autoTxtElem;
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
         }
       }
-      $xeTextarea.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       handleResize();
@@ -49626,7 +49767,7 @@ let autoTxtElem;
       } else {
         handleChange(reactData.inputValue, evnt);
       }
-      $xeTextarea.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -49640,16 +49781,12 @@ let autoTxtElem;
       if (!immediate) {
         handleChange(inputValue, evnt);
       }
-      $xeTextarea.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value: inputValue
       }, evnt);
     };
-    textareaMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, createEvent(evnt, {
-          $textarea: $xeTextarea
-        }, params));
-      },
+    const textareaMethods = {
+      dispatchEvent,
       focus() {
         const textElem = refTextarea.value;
         textElem.focus();
@@ -49665,6 +49802,7 @@ let autoTxtElem;
     const renderVN = () => {
       const {
         className,
+        inputClassName,
         resize,
         autosize,
         autoSize,
@@ -49706,8 +49844,7 @@ let autoTxtElem;
         spellcheck: false
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('textarea', {
         ref: refTextarea,
-        class: 'vxe-textarea--inner',
-        value: inputValue,
+        class: 'vxe-textarea--inner' + (inputClassName ? ' ' + inputClassName : ''),
         name: props.name,
         placeholder: inpPlaceholder,
         maxlength: inpMaxLength,
@@ -49754,6 +49891,22 @@ let autoTxtElem;
       updateAutoTxt();
       handleResize();
     });
+    const rDvFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeFormReadonly, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDomValue, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(rDvFlag, () => {
+      updateDomValue();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      updateDomValue();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateDomValue();
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
       const {
         autosize,