vxe-pc-ui 4.17.0 → 4.17.2

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { 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}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$h = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.17.0";
+const version = "4.17.2";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -9089,6 +9089,10 @@ var VxeInputComponent = defineVxeComponent({
         align: String,
         form: String,
         className: String,
+        inputClassName: {
+            type: String,
+            default: () => getConfig$3().input.inputClassName
+        },
         size: {
             type: String,
             default: () => getConfig$3().input.size || getConfig$3().size
@@ -9249,7 +9253,6 @@ var VxeInputComponent = defineVxeComponent({
             internalData,
             getRefMaps: () => refMaps
         };
-        let inputMethods = {};
         const parseDate = (value, format) => {
             const { type } = props;
             if (type === 'time') {
@@ -9710,8 +9713,9 @@ var VxeInputComponent = defineVxeComponent({
             return minuteList;
         });
         const computeInputReadonly = computed(() => {
-            const { type, editable, multiple, readonly } = props;
-            return readonly || multiple || !editable || type === 'week' || type === 'quarter';
+            const { type, editable, multiple } = props;
+            const formReadonly = computeFormReadonly.value;
+            return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
         });
         const computeInputType = computed(() => {
             const { type } = props;
@@ -9773,6 +9777,10 @@ var VxeInputComponent = defineVxeComponent({
             }
             return false;
         });
+        const computeDomValue = computed(() => {
+            const { inputValue } = reactData;
+            return inputValue;
+        });
         const getNumberValue = (val) => {
             const { type, exponential } = props;
             const inpMaxLength = computeInpMaxLength.value;
@@ -9783,12 +9791,22 @@ var VxeInputComponent = defineVxeComponent({
             }
             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 = XEUtils.eqNull(domValue) ? '' : ('' + domValue);
+            }
+        };
         const emitModel = (value) => {
             emit('update:modelValue', value);
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const handleChange = (value, evnt) => {
             if (props.trim) {
@@ -9796,9 +9814,9 @@ var VxeInputComponent = defineVxeComponent({
             }
             reactData.inputValue = value;
             emitModel(value);
-            inputMethods.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             if (XEUtils.toValueString(props.modelValue) !== value) {
-                inputMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 if (!$xeSelect && !$xeTreeSelect) {
                     // 自动更新校验状态
                     if ($xeForm && formItemInfo) {
@@ -9816,7 +9834,7 @@ var VxeInputComponent = defineVxeComponent({
                     handleChange(value, evnt);
                 }
                 else {
-                    inputMethods.dispatchEvent('input', { value }, evnt);
+                    dispatchEvent('input', { value }, evnt);
                     if (!$xeSelect && !$xeTreeSelect) {
                         // 自动更新校验状态
                         if ($xeForm && formItemInfo) {
@@ -9836,7 +9854,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!inpImmediate) {
                 triggerEvent(evnt);
             }
-            $xeInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const blurEvent = (evnt) => {
             const { inputValue } = reactData;
@@ -9849,7 +9867,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!reactData.visiblePanel) {
                 reactData.isActivated = false;
             }
-            inputMethods.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             if (!$xeSelect && !$xeTreeSelect) {
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
@@ -9874,7 +9892,7 @@ var VxeInputComponent = defineVxeComponent({
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xeInput.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
         const hidePanel = () => {
@@ -9899,14 +9917,14 @@ var VxeInputComponent = defineVxeComponent({
                 }
             }
             handleChange('', evnt);
-            $xeInput.dispatchEvent('clear', { value }, evnt);
-            $xeInput.dispatchEvent('lazy-change', { value }, evnt);
+            dispatchEvent('clear', { value }, evnt);
+            dispatchEvent('lazy-change', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xeInput.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const dateParseValue = (value) => {
@@ -10139,12 +10157,12 @@ var VxeInputComponent = defineVxeComponent({
             if (!isDisabled && !inputReadonly) {
                 reactData.showPwd = !showPwd;
             }
-            inputMethods.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
+            dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
         };
         // 密码
         // 搜索
         const searchEvent = (evnt) => {
-            inputMethods.dispatchEvent('search-click', {}, evnt);
+            dispatchEvent('search-click', {}, evnt);
         };
         // 搜索
         // 数值
@@ -10174,7 +10192,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!isDisabled && !inputReadonly && !isDisabledSubtractNumber) {
                 numberChange(false, evnt);
             }
-            inputMethods.dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
         };
         const numberDownNextEvent = (evnt) => {
             internalData.dnTimeout = setTimeout(() => {
@@ -10190,7 +10208,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!isDisabled && !inputReadonly && !isDisabledAddNumber) {
                 numberChange(true, evnt);
             }
-            inputMethods.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
         };
         const numberKeydownEvent = (evnt) => {
             const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
@@ -10342,7 +10360,7 @@ var VxeInputComponent = defineVxeComponent({
                     }
                 }
                 reactData.selectMonth = viewDate;
-                inputMethods.dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
+                dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
             }
         };
         const dateTodayMonthEvent = (evnt) => {
@@ -10351,7 +10369,7 @@ var VxeInputComponent = defineVxeComponent({
                 dateChange(reactData.currentDate);
                 hidePanel();
             }
-            inputMethods.dispatchEvent('date-today', { type: props.type }, evnt);
+            dispatchEvent('date-today', { type: props.type }, evnt);
         };
         const dateNextEvent = (evnt) => {
             const { type } = props;
@@ -10384,7 +10402,7 @@ var VxeInputComponent = defineVxeComponent({
                     }
                 }
                 reactData.selectMonth = viewDate;
-                inputMethods.dispatchEvent('date-next', { viewType: datePanelType, viewDate, value, type }, evnt);
+                dispatchEvent('date-next', { viewType: datePanelType, viewDate, value, type }, evnt);
             }
         };
         const isDateDisabled = (item) => {
@@ -10934,6 +10952,31 @@ var VxeInputComponent = defineVxeComponent({
                 }
             }
         };
+        const inputMethods = {
+            dispatchEvent,
+            focus() {
+                const inputElem = refInputTarget.value;
+                reactData.isActivated = true;
+                inputElem.focus();
+                return nextTick();
+            },
+            blur() {
+                const inputElem = refInputTarget.value;
+                inputElem.blur();
+                reactData.isActivated = false;
+                return nextTick();
+            },
+            select() {
+                const inputElem = refInputTarget.value;
+                inputElem.select();
+                reactData.isActivated = false;
+                return nextTick();
+            },
+            showPanel,
+            hidePanel,
+            updatePlacement
+        };
+        Object.assign($xeInput, inputMethods);
         const renderDateLabel = (item, label) => {
             const { festivalMethod } = props;
             if (festivalMethod) {
@@ -11555,36 +11598,8 @@ var VxeInputComponent = defineVxeComponent({
             }
             return 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 nextTick();
-            },
-            blur() {
-                const inputElem = refInputTarget.value;
-                inputElem.blur();
-                reactData.isActivated = false;
-                return nextTick();
-            },
-            select() {
-                const inputElem = refInputTarget.value;
-                inputElem.select();
-                reactData.isActivated = false;
-                return nextTick();
-            },
-            showPanel,
-            hidePanel,
-            updatePlacement
-        };
-        Object.assign($xeInput, inputMethods);
         const renderVN = () => {
-            const { className, controls, type, title, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props;
+            const { className, inputClassName, controls, type, title, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props;
             const { inputValue, visiblePanel, isActivated } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
@@ -11628,8 +11643,7 @@ var VxeInputComponent = defineVxeComponent({
                 }, [
                     h('input', {
                         ref: refInputTarget,
-                        class: 'vxe-input--inner',
-                        value: inputValue,
+                        class: 'vxe-input--inner' + (inputClassName ? (' ' + inputClassName) : ''),
                         name,
                         type: inputType,
                         placeholder: inpPlaceholder,
@@ -11683,6 +11697,19 @@ var VxeInputComponent = defineVxeComponent({
                 reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
             }
         });
+        const rDvFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            rDvFlag.value++;
+        });
+        watch(computeDomValue, () => {
+            rDvFlag.value++;
+        });
+        watch(rDvFlag, () => {
+            updateDomValue();
+            nextTick(() => {
+                updateDomValue();
+            });
+        });
         onMounted(() => {
             const { type } = props;
             if (['date', 'time', 'datetime', 'week', 'month', 'quarter', 'year'].includes(type)) {
@@ -11702,6 +11729,7 @@ var VxeInputComponent = defineVxeComponent({
             globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent);
+            updateDomValue();
         });
         onBeforeUnmount(() => {
             numberStopDown();
@@ -15157,6 +15185,10 @@ var VxeNumberInputComponent = defineVxeComponent({
         align: String,
         form: String,
         className: String,
+        inputClassName: {
+            type: String,
+            default: () => getConfig$3().numberInput.inputClassName
+        },
         size: {
             type: String,
             default: () => getConfig$3().numberInput.size || getConfig$3().size
@@ -15408,6 +15440,10 @@ var VxeNumberInputComponent = defineVxeComponent({
             }
             return false;
         });
+        const computeInpClassNamevalue = computed(() => {
+            const { inputClassName } = props;
+            return 'vxe-number-input--input' + (inputClassName ? (' ' + inputClassName) : '');
+        });
         const refMaps = {
             refElem,
             refInput: refInputTarget
@@ -15424,7 +15460,9 @@ var VxeNumberInputComponent = defineVxeComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
-        let numberInputMethods = {};
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params));
+        };
         const handleNumberString = (val) => {
             if (XEUtils.eqNull(val)) {
                 return '';
@@ -15453,7 +15491,7 @@ var VxeNumberInputComponent = defineVxeComponent({
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const handleChange = (val, inputValue, evnt) => {
             const value = eqEmptyValue(val) ? null : Number(val);
@@ -15467,9 +15505,9 @@ var VxeNumberInputComponent = defineVxeComponent({
                     reactData.inputValue = inputValue || '';
                 });
             }
-            numberInputMethods.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             if (isChange) {
-                numberInputMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -15484,7 +15522,7 @@ var VxeNumberInputComponent = defineVxeComponent({
                 handleChange(value, inputValue, evnt);
             }
             else {
-                numberInputMethods.dispatchEvent('input', { value }, evnt);
+                dispatchEvent('input', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -15501,7 +15539,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             if (!inpImmediate) {
                 triggerEvent(evnt);
             }
-            $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const focusEvent = (evnt) => {
             const inputReadonly = computeInputReadonly.value;
@@ -15517,20 +15555,20 @@ var VxeNumberInputComponent = defineVxeComponent({
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                numberInputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
         const clearValueEvent = (evnt, value) => {
             focus();
             handleChange(null, '', evnt);
-            numberInputMethods.dispatchEvent('clear', { value }, evnt);
-            $xeNumberInput.dispatchEvent('lazy-change', { value }, evnt);
+            dispatchEvent('clear', { value }, evnt);
+            dispatchEvent('lazy-change', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                numberInputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const updateModel = (val) => {
@@ -15632,7 +15670,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             afterCheckValue();
             reactData.isFocus = false;
             reactData.isActivated = false;
-            numberInputMethods.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -15665,10 +15703,10 @@ var VxeNumberInputComponent = defineVxeComponent({
                 numberChange(true, evnt);
             }
             reactData.isActivated = true;
-            numberInputMethods.dispatchEvent('plus-number', { value: reactData.inputValue }, evnt);
-            $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('plus-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
             // 已废弃
-            numberInputMethods.dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
         };
         const numberMinusEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
@@ -15678,10 +15716,10 @@ var VxeNumberInputComponent = defineVxeComponent({
                 numberChange(false, evnt);
             }
             reactData.isActivated = true;
-            numberInputMethods.dispatchEvent('minus-number', { value: reactData.inputValue }, evnt);
-            $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('minus-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
             // 已废弃
-            numberInputMethods.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
         };
         const numberKeydownEvent = (evnt) => {
             const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
@@ -15868,10 +15906,7 @@ var VxeNumberInputComponent = defineVxeComponent({
                 afterCheckValue();
             }
         };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params));
-        };
-        numberInputMethods = {
+        const numberInputMethods = {
             dispatchEvent,
             focus() {
                 const inputReadonly = computeInputReadonly.value;
@@ -15979,6 +16014,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             const inputReadonly = computeInputReadonly.value;
             const inpMaxLength = computeInpMaxLength.value;
             const inpPlaceholder = computeInpPlaceholder.value;
+            const inpClassName = computeInpClassNamevalue.value;
             return h('div', {
                 key: 'ni',
                 class: 'vxe-number-input--input-wrapper'
@@ -15989,10 +16025,10 @@ var VxeNumberInputComponent = defineVxeComponent({
                 }, [
                     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,
@@ -20214,6 +20250,10 @@ var VxeDatePickerComponent = defineVxeComponent({
         },
         form: String,
         className: String,
+        inputClassName: {
+            type: String,
+            default: () => getConfig$3().datePicker.inputClassName
+        },
         zIndex: Number,
         size: {
             type: String,
@@ -21662,7 +21702,7 @@ var VxeDatePickerComponent = defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { className, type, name, autoComplete } = props;
+            const { className, inputClassName, type, name, autoComplete } = props;
             const { inputValue, visiblePanel, isActivated, labelFlag } = reactData;
             const { inputLabel } = internalData;
             const vSize = computeSize.value;
@@ -21699,7 +21739,7 @@ var VxeDatePickerComponent = defineVxeComponent({
                 }, [
                     h('input', {
                         ref: refInputTarget,
-                        class: 'vxe-date-picker--inner',
+                        class: 'vxe-date-picker--inner' + (inputClassName ? (' ' + inputClassName) : ''),
                         value: labelFlag ? inputLabel : '',
                         name,
                         type: 'text',
@@ -21833,6 +21873,10 @@ var VxeDateRangePickerComponent = defineVxeComponent({
         },
         form: String,
         className: String,
+        inputClassName: {
+            type: String,
+            default: () => getConfig$3().dateRangePicker.inputClassName
+        },
         zIndex: Number,
         size: {
             type: String,
@@ -23178,7 +23222,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { className, type, name, autoComplete } = props;
+            const { className, inputClassName, type, name, autoComplete } = props;
             const { selectStValue, selectEdValue, visiblePanel, isActivated } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
@@ -23213,7 +23257,7 @@ var VxeDateRangePickerComponent = defineVxeComponent({
                 }, [
                     h('input', {
                         ref: refInputTarget,
-                        class: 'vxe-date-range-picker--inner',
+                        class: 'vxe-date-range-picker--inner' + (inputClassName ? (' ' + inputClassName) : ''),
                         value: inputLabel,
                         name,
                         type: 'text',
@@ -33801,6 +33845,10 @@ var VxePasswordInputComponent = defineVxeComponent({
             default: 'off'
         },
         className: String,
+        inputClassName: {
+            type: String,
+            default: () => getConfig$3().passwordInput.inputClassName
+        },
         size: {
             type: String,
             default: () => getConfig$3().passwordInput.size || getConfig$3().size
@@ -33811,6 +33859,10 @@ var VxePasswordInputComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().passwordInput.controls
         },
+        editable: {
+            type: Boolean,
+            default: true
+        },
         // 已废弃
         autocomplete: String
     },
@@ -33851,14 +33903,9 @@ var VxePasswordInputComponent = defineVxeComponent({
             reactData,
             getRefMaps: () => refMaps
         };
-        let passwordInputMethods = {};
         const computeIsClearable = computed(() => {
             return props.clearable;
         });
-        const computeInpReadonly = computed(() => {
-            const { readonly } = props;
-            return readonly;
-        });
         const computeInpPlaceholder = computed(() => {
             const { placeholder } = props;
             if (placeholder) {
@@ -33870,6 +33917,32 @@ var VxePasswordInputComponent = defineVxeComponent({
             }
             return getI18n$2('vxe.base.pleaseInput');
         });
+        const computeFormReadonly = computed(() => {
+            if (getConfig$3().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 = computed(() => {
+            const { disabled } = props;
+            if (disabled === null) {
+                if ($xeForm) {
+                    return $xeForm.props.disabled;
+                }
+                return false;
+            }
+            return disabled;
+        });
         const computeInputType = computed(() => {
             const { showPwd } = reactData;
             if (showPwd) {
@@ -33881,9 +33954,28 @@ var VxePasswordInputComponent = defineVxeComponent({
             const { immediate } = props;
             return immediate;
         });
+        const computeInputReadonly = computed(() => {
+            const { editable } = props;
+            const formReadonly = computeFormReadonly.value;
+            return formReadonly || !editable;
+        });
+        const computeDomValue = 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 = XEUtils.eqNull(domValue) ? '' : ('' + domValue);
+            }
+        };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            passwordInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const emitInputEvent = (value, evnt) => {
             const inpImmediate = computeInpImmediate.value;
@@ -33892,7 +33984,7 @@ var VxePasswordInputComponent = defineVxeComponent({
                 handleChange(value, evnt);
             }
             else {
-                passwordInputMethods.dispatchEvent('input', { value }, evnt);
+                dispatchEvent('input', { value }, evnt);
             }
         };
         const inputEvent = (evnt) => {
@@ -33903,9 +33995,9 @@ var VxePasswordInputComponent = defineVxeComponent({
         const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
-            passwordInputMethods.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             if (XEUtils.toValueString(props.modelValue) !== value) {
-                passwordInputMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -33914,7 +34006,7 @@ var VxePasswordInputComponent = defineVxeComponent({
         };
         const changeEvent = (evnt) => {
             triggerEvent(evnt);
-            $xePasswordInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, reactData.inputValue);
@@ -33928,19 +34020,20 @@ var VxePasswordInputComponent = defineVxeComponent({
             const { inputValue } = reactData;
             const value = inputValue;
             reactData.isActivated = false;
-            $xePasswordInput.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
         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', { visible: reactData.showPwd }, evnt);
+            dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
         };
         const clickEvent = (evnt) => {
             triggerEvent(evnt);
@@ -33948,23 +34041,45 @@ var VxePasswordInputComponent = defineVxeComponent({
         const clearValueEvent = (evnt, value) => {
             focus();
             handleChange('', evnt);
-            $xePasswordInput.dispatchEvent('clear', { value }, evnt);
-            $xePasswordInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('clear', { value }, evnt);
+            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', { value: inputValue }, evnt);
+                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', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
+            }
+        };
+        const passwordInputMethods = {
+            dispatchEvent,
+            focus() {
+                const inputElem = refInputTarget.value;
+                reactData.isActivated = true;
+                inputElem.focus();
+                return nextTick();
+            },
+            blur() {
+                const inputElem = refInputTarget.value;
+                inputElem.blur();
+                reactData.isActivated = false;
+                return nextTick();
+            },
+            select() {
+                const inputElem = refInputTarget.value;
+                inputElem.select();
+                reactData.isActivated = false;
+                return nextTick();
             }
         };
+        Object.assign($xePasswordInput, passwordInputMethods);
         const renderPasswordIcon = () => {
             const { showPwd } = reactData;
             return h('div', {
@@ -33997,14 +34112,15 @@ var VxePasswordInputComponent = defineVxeComponent({
                 : null;
         };
         const renderSuffixIcon = () => {
-            const { disabled, suffixIcon, controls } = props;
+            const { 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
                 ? h('div', {
                     class: ['vxe-password-input--suffix', {
-                            'is--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                            'is--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                         }]
                 }, [
                     isClearable
@@ -34033,41 +34149,22 @@ var VxePasswordInputComponent = defineVxeComponent({
                 ])
                 : null;
         };
-        passwordInputMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
-            },
-            focus() {
-                const inputElem = refInputTarget.value;
-                reactData.isActivated = true;
-                inputElem.focus();
-                return nextTick();
-            },
-            blur() {
-                const inputElem = refInputTarget.value;
-                inputElem.blur();
-                reactData.isActivated = false;
-                return nextTick();
-            },
-            select() {
-                const inputElem = refInputTarget.value;
-                inputElem.select();
-                reactData.isActivated = false;
-                return nextTick();
-            }
-        };
-        Object.assign($xePasswordInput, passwordInputMethods);
-        watch(() => props.modelValue, (val) => {
-            reactData.inputValue = val;
-        });
         const renderVN = () => {
-            const { className, name, disabled, readonly, autocomplete, autoComplete, maxLength } = props;
+            const { className, inputClassName, name, readonly, autocomplete, autoComplete, maxLength } = props;
             const { inputValue, isActivated } = reactData;
+            const isDisabled = computeIsDisabled.value;
+            const formReadonly = computeFormReadonly.value;
+            if (formReadonly) {
+                return 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 h('div', {
@@ -34077,9 +34174,9 @@ var VxePasswordInputComponent = 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.eqNull(inputValue))
+                        'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }],
                 spellcheck: false
             }, [
@@ -34089,13 +34186,12 @@ var VxePasswordInputComponent = defineVxeComponent({
                 }, [
                     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,
@@ -34108,6 +34204,25 @@ var VxePasswordInputComponent = defineVxeComponent({
                 suffix || renderEmptyElement($xePasswordInput)
             ]);
         };
+        watch(() => props.modelValue, (val) => {
+            reactData.inputValue = val;
+        });
+        const rDvFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            rDvFlag.value++;
+        });
+        watch(computeDomValue, () => {
+            rDvFlag.value++;
+        });
+        watch(rDvFlag, () => {
+            updateDomValue();
+            nextTick(() => {
+                updateDomValue();
+            });
+        });
+        onMounted(() => {
+            updateDomValue();
+        });
         $xePasswordInput.renderVN = renderVN;
         return $xePasswordInput;
     },
@@ -40279,6 +40394,10 @@ var VxeTextareaComponent = defineVxeComponent({
     props: {
         modelValue: [String, Number],
         className: String,
+        inputClassName: {
+            type: String,
+            default: () => getConfig$3().textarea.inputClassName
+        },
         immediate: {
             type: Boolean,
             default: true
@@ -40370,7 +40489,6 @@ var VxeTextareaComponent = defineVxeComponent({
             reactData,
             getRefMaps: () => refMaps
         };
-        let textareaMethods = {};
         const computeFormReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -40425,6 +40543,20 @@ var VxeTextareaComponent = defineVxeComponent({
             }
             return Object.assign({ minRows: 1, maxRows: 10 }, getConfig$3().textarea.autoSize, autoSize);
         });
+        const computeDomValue = 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 = XEUtils.eqNull(domValue) ? '' : ('' + domValue);
+            }
+        };
         const updateAutoTxt = () => {
             const { size, autosize, autoSize } = props;
             const { inputValue } = reactData;
@@ -40485,7 +40617,7 @@ var VxeTextareaComponent = defineVxeComponent({
         };
         const triggerEvent = (evnt) => {
             const value = reactData.inputValue;
-            $xeTextarea.dispatchEvent(evnt.type, { value }, evnt);
+            dispatchEvent(evnt.type, { value }, evnt);
         };
         const handleChange = (value, evnt) => {
             if (props.trim) {
@@ -40515,7 +40647,7 @@ var VxeTextareaComponent = defineVxeComponent({
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                 }
             }
-            $xeTextarea.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             handleResize();
         };
         const changeEvent = (evnt) => {
@@ -40526,7 +40658,7 @@ var VxeTextareaComponent = defineVxeComponent({
             else {
                 handleChange(reactData.inputValue, evnt);
             }
-            $xeTextarea.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const blurEvent = (evnt) => {
             const { immediate } = props;
@@ -40534,12 +40666,10 @@ var VxeTextareaComponent = defineVxeComponent({
             if (!immediate) {
                 handleChange(inputValue, evnt);
             }
-            $xeTextarea.dispatchEvent('blur', { value: inputValue }, evnt);
+            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();
@@ -40553,7 +40683,7 @@ var VxeTextareaComponent = defineVxeComponent({
         };
         Object.assign($xeTextarea, textareaMethods);
         const renderVN = () => {
-            const { className, resize, autosize, autoSize, showWordCount, countMethod, rows, cols } = props;
+            const { className, inputClassName, resize, autosize, autoSize, showWordCount, countMethod, rows, cols } = props;
             const { inputValue } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
@@ -40588,8 +40718,7 @@ var VxeTextareaComponent = defineVxeComponent({
             }, [
                 h('textarea', {
                     ref: refTextarea,
-                    class: 'vxe-textarea--inner',
-                    value: inputValue,
+                    class: 'vxe-textarea--inner' + (inputClassName ? (' ' + inputClassName) : ''),
                     name: props.name,
                     placeholder: inpPlaceholder,
                     maxlength: inpMaxLength,
@@ -40640,6 +40769,22 @@ var VxeTextareaComponent = defineVxeComponent({
             updateAutoTxt();
             handleResize();
         });
+        const rDvFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            rDvFlag.value++;
+        });
+        watch(computeDomValue, () => {
+            rDvFlag.value++;
+        });
+        watch(rDvFlag, () => {
+            updateDomValue();
+        });
+        onMounted(() => {
+            updateDomValue();
+            nextTick(() => {
+                updateDomValue();
+            });
+        });
         nextTick(() => {
             const { autosize, autoSize } = props;
             if (autosize) {