vxe-pc-ui 4.20.34 → 4.20.35

package/lib/textarea/src/textarea.js

@@ -40,469 +40,472 @@ var import_log = require("../../ui/src/log");
 const { getConfig, getIcon, getI18n, createEvent, useFns, renderEmptyElement } = import_core.VxeUI;
 const { warnLog } = (0, import_log.createComponentLog)("textarea");
 let autoTxtElem;
-var textarea_default = (0, import_comp.defineVxeComponent)({
-  name: "VxeTextarea",
-  props: {
-    modelValue: [String, Number],
-    className: String,
-    inputClassName: {
-      type: String,
-      default: () => getConfig().textarea.inputClassName
-    },
-    immediate: {
-      type: Boolean,
-      default: true
-    },
-    name: String,
-    readonly: {
-      type: Boolean,
-      default: null
-    },
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    clearable: {
-      type: Boolean,
-      default: () => getConfig().textarea.clearable
-    },
-    placeholder: String,
-    maxLength: [String, Number],
-    trim: {
-      type: Boolean,
-      default: () => getConfig().textarea.trim
-    },
-    rows: {
-      type: [String, Number],
-      default: null
-    },
-    cols: {
-      type: [String, Number],
-      default: null
-    },
-    showWordCount: Boolean,
-    countMethod: Function,
-    autoFocus: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * 已废弃，被 auto-size 替换
-     * @deprecated
-     */
-    autosize: {
-      type: [Boolean, Object],
-      default: null
-    },
-    autoSize: {
-      type: [Boolean, Object],
-      default: null
-    },
-    form: String,
-    resize: {
-      type: String,
-      default: () => getConfig().textarea.resize
-    },
-    size: {
-      type: String,
-      default: () => getConfig().textarea.size || getConfig().size
+var textarea_default = (
+  /* define-vxe-component start */
+  (0, import_comp.defineVxeComponent)({
+    name: "VxeTextarea",
+    props: {
+      modelValue: [String, Number],
+      className: String,
+      inputClassName: {
+        type: String,
+        default: () => getConfig().textarea.inputClassName
+      },
+      immediate: {
+        type: Boolean,
+        default: true
+      },
+      name: String,
+      readonly: {
+        type: Boolean,
+        default: null
+      },
+      editable: {
+        type: Boolean,
+        default: true
+      },
+      disabled: {
+        type: Boolean,
+        default: null
+      },
+      clearable: {
+        type: Boolean,
+        default: () => getConfig().textarea.clearable
+      },
+      placeholder: String,
+      maxLength: [String, Number],
+      trim: {
+        type: Boolean,
+        default: () => getConfig().textarea.trim
+      },
+      rows: {
+        type: [String, Number],
+        default: null
+      },
+      cols: {
+        type: [String, Number],
+        default: null
+      },
+      showWordCount: Boolean,
+      countMethod: Function,
+      autoFocus: {
+        type: Boolean,
+        default: null
+      },
+      /**
+       * 已废弃，被 auto-size 替换
+       * @deprecated
+       */
+      autosize: {
+        type: [Boolean, Object],
+        default: null
+      },
+      autoSize: {
+        type: [Boolean, Object],
+        default: null
+      },
+      form: String,
+      resize: {
+        type: String,
+        default: () => getConfig().textarea.resize
+      },
+      size: {
+        type: String,
+        default: () => getConfig().textarea.size || getConfig().size
+      },
+      // 已废弃
+      maxlength: [String, Number]
     },
-    // 已废弃
-    maxlength: [String, Number]
-  },
-  emits: ["update:modelValue", "input", "keydown", "keyup", "click", "change", "focus", "blur", "clear", "lazy-change"],
-  setup(props, context) {
-    const { emit } = context;
-    const $xeForm = (0, import_vue.inject)("$xeForm", null);
-    const formItemInfo = (0, import_vue.inject)("xeFormItemInfo", null);
-    const xID = import_xe_utils.default.uniqueId();
-    const { computeSize } = useFns.useSize(props);
-    const reactData = (0, import_vue.reactive)({
-      inputValue: props.modelValue
-    });
-    const refElem = (0, import_vue.ref)();
-    const refTextarea = (0, import_vue.ref)();
-    const refContent = (0, import_vue.ref)();
-    const refMaps = {
-      refElem,
-      refTextarea
-    };
-    const $xeTextarea = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps
-    };
-    const computeFormReadonly = (0, import_vue.computed)(() => {
-      const { readonly } = props;
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly;
+    emits: ["update:modelValue", "input", "keydown", "keyup", "click", "change", "focus", "blur", "clear", "lazy-change"],
+    setup(props, context) {
+      const { emit } = context;
+      const $xeForm = (0, import_vue.inject)("$xeForm", null);
+      const formItemInfo = (0, import_vue.inject)("xeFormItemInfo", null);
+      const xID = import_xe_utils.default.uniqueId();
+      const { computeSize } = useFns.useSize(props);
+      const reactData = (0, import_vue.reactive)({
+        inputValue: props.modelValue
+      });
+      const refElem = (0, import_vue.ref)();
+      const refTextarea = (0, import_vue.ref)();
+      const refContent = (0, import_vue.ref)();
+      const refMaps = {
+        refElem,
+        refTextarea
+      };
+      const $xeTextarea = {
+        xID,
+        props,
+        context,
+        reactData,
+        getRefMaps: () => refMaps
+      };
+      const computeFormReadonly = (0, import_vue.computed)(() => {
+        const { readonly } = props;
+        if (readonly === null) {
+          if ($xeForm) {
+            return $xeForm.props.readonly;
+          }
+          return false;
         }
-        return false;
-      }
-      return readonly;
-    });
-    const computeIsDisabled = (0, import_vue.computed)(() => {
-      const { disabled } = props;
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled;
+        return readonly;
+      });
+      const computeIsDisabled = (0, import_vue.computed)(() => {
+        const { disabled } = props;
+        if (disabled === null) {
+          if ($xeForm) {
+            return $xeForm.props.disabled;
+          }
+          return false;
         }
-        return false;
-      }
-      return disabled;
-    });
-    const computeInputReadonly = (0, import_vue.computed)(() => {
-      const { editable, readonly } = props;
-      return readonly || !editable;
-    });
-    const computeInpPlaceholder = (0, import_vue.computed)(() => {
-      const { placeholder } = props;
-      if (placeholder) {
-        return (0, import_utils.getFuncText)(placeholder);
-      }
-      const globalPlaceholder = getConfig().textarea.placeholder;
-      if (globalPlaceholder) {
-        return (0, import_utils.getFuncText)(globalPlaceholder);
-      }
-      return getI18n("vxe.base.pleaseInput");
-    });
-    const computeInpMaxLength = (0, import_vue.computed)(() => {
-      const { maxLength, maxlength } = props;
-      return maxLength || maxlength;
-    });
-    const computeInputCount = (0, import_vue.computed)(() => {
-      return import_xe_utils.default.getSize(reactData.inputValue);
-    });
-    const computeIsCountError = (0, import_vue.computed)(() => {
-      const inputCount = computeInputCount.value;
-      const inpMaxLength = computeInpMaxLength.value;
-      return inpMaxLength && inputCount > import_xe_utils.default.toNumber(inpMaxLength);
-    });
-    const computeSizeOpts = (0, import_vue.computed)(() => {
-      const { autosize, autoSize } = props;
-      if (autosize || getConfig().textarea.autosize) {
-        return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autosize, autosize);
-      }
-      return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autoSize, autoSize);
-    });
-    const computeDomValue = (0, import_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 = import_xe_utils.default.eqNull(domValue) ? "" : "" + domValue;
-      }
-    };
-    const updateAutoTxt = () => {
-      const { size, autosize, autoSize } = props;
-      const { inputValue } = reactData;
-      if (autosize || autoSize) {
-        const formReadonly = computeFormReadonly.value;
-        if (!autoTxtElem) {
-          autoTxtElem = document.createElement("div");
+        return disabled;
+      });
+      const computeInputReadonly = (0, import_vue.computed)(() => {
+        const { editable, readonly } = props;
+        return readonly || !editable;
+      });
+      const computeInpPlaceholder = (0, import_vue.computed)(() => {
+        const { placeholder } = props;
+        if (placeholder) {
+          return (0, import_utils.getFuncText)(placeholder);
+        }
+        const globalPlaceholder = getConfig().textarea.placeholder;
+        if (globalPlaceholder) {
+          return (0, import_utils.getFuncText)(globalPlaceholder);
         }
-        if (!autoTxtElem.parentNode) {
-          document.body.appendChild(autoTxtElem);
+        return getI18n("vxe.base.pleaseInput");
+      });
+      const computeInpMaxLength = (0, import_vue.computed)(() => {
+        const { maxLength, maxlength } = props;
+        return maxLength || maxlength;
+      });
+      const computeInputCount = (0, import_vue.computed)(() => {
+        return import_xe_utils.default.getSize(reactData.inputValue);
+      });
+      const computeIsCountError = (0, import_vue.computed)(() => {
+        const inputCount = computeInputCount.value;
+        const inpMaxLength = computeInpMaxLength.value;
+        return inpMaxLength && inputCount > import_xe_utils.default.toNumber(inpMaxLength);
+      });
+      const computeSizeOpts = (0, import_vue.computed)(() => {
+        const { autosize, autoSize } = props;
+        if (autosize || getConfig().textarea.autosize) {
+          return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autosize, autosize);
         }
+        return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autoSize, autoSize);
+      });
+      const computeDomValue = (0, import_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;
-        const ctElem = refContent.value;
-        const textElem = formReadonly ? ctElem : taElem;
-        if (!textElem) {
-          return;
+        if (taElem) {
+          taElem.value = import_xe_utils.default.eqNull(domValue) ? "" : "" + domValue;
         }
-        const textStyle = getComputedStyle(textElem);
-        autoTxtElem.className = ["vxe-textarea--autosize", size ? `size--${size}` : ""].join(" ");
-        autoTxtElem.style.width = `${textElem.clientWidth}px`;
-        autoTxtElem.style.padding = textStyle.padding;
-        autoTxtElem.innerText = ("" + (inputValue || "　")).replace(/\n$/, "\n　");
-      }
-    };
-    const handleResize = () => {
-      const { autosize, autoSize } = props;
-      if (autosize || autoSize) {
-        (0, import_vue.nextTick)(() => {
-          const sizeOpts = computeSizeOpts.value;
+      };
+      const updateAutoTxt = () => {
+        const { size, autosize, autoSize } = props;
+        const { inputValue } = reactData;
+        if (autosize || autoSize) {
           const formReadonly = computeFormReadonly.value;
-          const { minRows, maxRows } = sizeOpts;
+          if (!autoTxtElem) {
+            autoTxtElem = document.createElement("div");
+          }
+          if (!autoTxtElem.parentNode) {
+            document.body.appendChild(autoTxtElem);
+          }
           const taElem = refTextarea.value;
           const ctElem = refContent.value;
           const textElem = formReadonly ? ctElem : taElem;
           if (!textElem) {
             return;
           }
-          const sizeHeight = autoTxtElem.clientHeight;
           const textStyle = getComputedStyle(textElem);
-          const lineHeight = import_xe_utils.default.toNumber(textStyle.lineHeight);
-          const paddingTop = import_xe_utils.default.toNumber(textStyle.paddingTop);
-          const paddingBottom = import_xe_utils.default.toNumber(textStyle.paddingBottom);
-          const borderTopWidth = import_xe_utils.default.toNumber(textStyle.borderTopWidth);
-          const borderBottomWidth = import_xe_utils.default.toNumber(textStyle.borderBottomWidth);
-          const intervalHeight = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
-          const rowNum = (sizeHeight - intervalHeight) / lineHeight;
-          const textRows = rowNum && /[0-9]/.test("" + rowNum) ? rowNum : Math.floor(rowNum) + 1;
-          let vaildRows = textRows;
-          if (textRows < minRows) {
-            vaildRows = minRows;
-          } else if (textRows > maxRows) {
-            vaildRows = maxRows;
+          autoTxtElem.className = ["vxe-textarea--autosize", size ? `size--${size}` : ""].join(" ");
+          autoTxtElem.style.width = `${textElem.clientWidth}px`;
+          autoTxtElem.style.padding = textStyle.padding;
+          autoTxtElem.innerText = ("" + (inputValue || "　")).replace(/\n$/, "\n　");
+        }
+      };
+      const handleResize = () => {
+        const { autosize, autoSize } = props;
+        if (autosize || autoSize) {
+          (0, import_vue.nextTick)(() => {
+            const sizeOpts = computeSizeOpts.value;
+            const formReadonly = computeFormReadonly.value;
+            const { minRows, maxRows } = sizeOpts;
+            const taElem = refTextarea.value;
+            const ctElem = refContent.value;
+            const textElem = formReadonly ? ctElem : taElem;
+            if (!textElem) {
+              return;
+            }
+            const sizeHeight = autoTxtElem.clientHeight;
+            const textStyle = getComputedStyle(textElem);
+            const lineHeight = import_xe_utils.default.toNumber(textStyle.lineHeight);
+            const paddingTop = import_xe_utils.default.toNumber(textStyle.paddingTop);
+            const paddingBottom = import_xe_utils.default.toNumber(textStyle.paddingBottom);
+            const borderTopWidth = import_xe_utils.default.toNumber(textStyle.borderTopWidth);
+            const borderBottomWidth = import_xe_utils.default.toNumber(textStyle.borderBottomWidth);
+            const intervalHeight = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
+            const rowNum = (sizeHeight - intervalHeight) / lineHeight;
+            const textRows = rowNum && /[0-9]/.test("" + rowNum) ? rowNum : Math.floor(rowNum) + 1;
+            let vaildRows = textRows;
+            if (textRows < minRows) {
+              vaildRows = minRows;
+            } else if (textRows > maxRows) {
+              vaildRows = maxRows;
+            }
+            textElem.style.height = `${vaildRows * lineHeight + intervalHeight}px`;
+          });
+        }
+      };
+      const triggerEvent = (evnt) => {
+        const value = reactData.inputValue;
+        dispatchEvent(evnt.type, { value }, evnt);
+      };
+      const handleChange = (value, evnt) => {
+        if (props.trim) {
+          value = `${value || ""}`.trim();
+        }
+        reactData.inputValue = value;
+        emit("update:modelValue", value);
+        if (import_xe_utils.default.toValueString(props.modelValue) !== value) {
+          dispatchEvent("change", { value }, evnt);
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
           }
-          textElem.style.height = `${vaildRows * lineHeight + intervalHeight}px`;
-        });
-      }
-    };
-    const triggerEvent = (evnt) => {
-      const value = reactData.inputValue;
-      dispatchEvent(evnt.type, { value }, evnt);
-    };
-    const handleChange = (value, evnt) => {
-      if (props.trim) {
-        value = `${value || ""}`.trim();
-      }
-      reactData.inputValue = value;
-      emit("update:modelValue", value);
-      if (import_xe_utils.default.toValueString(props.modelValue) !== value) {
-        dispatchEvent("change", { value }, evnt);
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
         }
-      }
-    };
-    const clearValueEvent = (evnt, value) => {
-      const { autoFocus } = props;
-      if (autoFocus || autoFocus === null) {
-        focus();
-      }
-      handleChange("", evnt);
-      dispatchEvent("clear", { value }, evnt);
-    };
-    const inputEvent = (evnt) => {
-      const { immediate } = props;
-      const textElem = evnt.target;
-      const value = textElem.value;
-      reactData.inputValue = value;
-      if (immediate) {
-        handleChange(value, evnt);
-      } else {
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      };
+      const clearValueEvent = (evnt, value) => {
+        const { autoFocus } = props;
+        if (autoFocus || autoFocus === null) {
+          focus();
+        }
+        handleChange("", evnt);
+        dispatchEvent("clear", { value }, evnt);
+      };
+      const inputEvent = (evnt) => {
+        const { immediate } = props;
+        const textElem = evnt.target;
+        const value = textElem.value;
+        reactData.inputValue = value;
+        if (immediate) {
+          handleChange(value, evnt);
+        } else {
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+          }
+        }
+        dispatchEvent("input", { value }, evnt);
+        handleResize();
+      };
+      const changeEvent = (evnt) => {
+        const { immediate } = props;
+        if (immediate) {
+          triggerEvent(evnt);
+        } else {
+          handleChange(reactData.inputValue, evnt);
+        }
+        dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
+      };
+      const blurEvent = (evnt) => {
+        const { immediate } = props;
+        const { inputValue } = reactData;
+        if (!immediate) {
+          handleChange(inputValue, evnt);
+        } else {
+          updateDomValue();
+        }
+        dispatchEvent("blur", { value: inputValue }, evnt);
+      };
+      const textareaMethods = {
+        dispatchEvent,
+        focus() {
+          const textElem = refTextarea.value;
+          textElem.focus();
+          return (0, import_vue.nextTick)();
+        },
+        blur() {
+          const textElem = refTextarea.value;
+          textElem.blur();
+          return (0, import_vue.nextTick)();
+        }
+      };
+      Object.assign($xeTextarea, textareaMethods);
+      const renderVN = () => {
+        const { className, inputClassName, resize, autosize, autoSize, showWordCount, countMethod, rows, cols, clearable } = props;
+        const { inputValue } = reactData;
+        const vSize = computeSize.value;
+        const isDisabled = computeIsDisabled.value;
+        const isCountError = computeIsCountError.value;
+        const inputCount = computeInputCount.value;
+        const inputReadonly = computeInputReadonly.value;
+        const formReadonly = computeFormReadonly.value;
+        const inpPlaceholder = computeInpPlaceholder.value;
+        const inpMaxLength = computeInpMaxLength.value;
+        if (formReadonly) {
+          return (0, import_vue.h)(
+            "div",
+            {
+              ref: refElem,
+              class: ["vxe-textarea--readonly", className]
+            },
+            [
+              (0, import_vue.h)(
+                "div",
+                {
+                  ref: refContent,
+                  class: "vxe-textarea--content"
+                },
+                inputValue
+              )
+            ]
+          );
         }
-      }
-      dispatchEvent("input", { value }, evnt);
-      handleResize();
-    };
-    const changeEvent = (evnt) => {
-      const { immediate } = props;
-      if (immediate) {
-        triggerEvent(evnt);
-      } else {
-        handleChange(reactData.inputValue, evnt);
-      }
-      dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
-    };
-    const blurEvent = (evnt) => {
-      const { immediate } = props;
-      const { inputValue } = reactData;
-      if (!immediate) {
-        handleChange(inputValue, evnt);
-      } else {
-        updateDomValue();
-      }
-      dispatchEvent("blur", { value: inputValue }, evnt);
-    };
-    const textareaMethods = {
-      dispatchEvent,
-      focus() {
-        const textElem = refTextarea.value;
-        textElem.focus();
-        return (0, import_vue.nextTick)();
-      },
-      blur() {
-        const textElem = refTextarea.value;
-        textElem.blur();
-        return (0, import_vue.nextTick)();
-      }
-    };
-    Object.assign($xeTextarea, textareaMethods);
-    const renderVN = () => {
-      const { className, inputClassName, resize, autosize, autoSize, showWordCount, countMethod, rows, cols, clearable } = props;
-      const { inputValue } = reactData;
-      const vSize = computeSize.value;
-      const isDisabled = computeIsDisabled.value;
-      const isCountError = computeIsCountError.value;
-      const inputCount = computeInputCount.value;
-      const inputReadonly = computeInputReadonly.value;
-      const formReadonly = computeFormReadonly.value;
-      const inpPlaceholder = computeInpPlaceholder.value;
-      const inpMaxLength = computeInpMaxLength.value;
-      if (formReadonly) {
         return (0, import_vue.h)(
           "div",
           {
             ref: refElem,
-            class: ["vxe-textarea--readonly", className]
+            class: [
+              "vxe-textarea",
+              className,
+              {
+                [`size--${vSize}`]: vSize,
+                "is--autosize": autosize || autoSize,
+                "is--count": showWordCount,
+                "is--disabled": isDisabled,
+                "is-clear": clearable,
+                "is--rows": !import_xe_utils.default.eqNull(rows),
+                "is--cols": !import_xe_utils.default.eqNull(cols),
+                "show--clear": clearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
+              }
+            ],
+            spellcheck: false
           },
           [
-            (0, import_vue.h)(
+            (0, import_vue.h)("textarea", {
+              ref: refTextarea,
+              class: ["vxe-textarea--inner", inputClassName || ""],
+              name: props.name,
+              placeholder: inpPlaceholder,
+              maxlength: inpMaxLength,
+              readonly: inputReadonly,
+              disabled: isDisabled,
+              rows,
+              cols,
+              style: resize ? {
+                resize
+              } : null,
+              onInput: inputEvent,
+              onChange: changeEvent,
+              onKeydown: triggerEvent,
+              onKeyup: triggerEvent,
+              onClick: triggerEvent,
+              onFocus: triggerEvent,
+              onBlur: blurEvent
+            }),
+            clearable || showWordCount ? (0, import_vue.h)(
               "div",
               {
-                ref: refContent,
-                class: "vxe-textarea--content"
+                class: "vxe-textarea--suffix"
               },
-              inputValue
-            )
+              [
+                clearable ? (0, import_vue.h)(
+                  "div",
+                  {
+                    class: "vxe-textarea--clear-icon",
+                    onClick: clearValueEvent
+                  },
+                  [
+                    (0, import_vue.h)("i", {
+                      class: getIcon().TEXTAREA_CLEAR
+                    })
+                  ]
+                ) : renderEmptyElement($xeTextarea),
+                showWordCount ? (0, import_vue.h)(
+                  "span",
+                  {
+                    class: [
+                      "vxe-textarea--count",
+                      {
+                        "is--error": isCountError
+                      }
+                    ]
+                  },
+                  countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ""}`
+                ) : renderEmptyElement($xeTextarea)
+              ]
+            ) : renderEmptyElement($xeTextarea)
           ]
         );
-      }
-      return (0, import_vue.h)(
-        "div",
-        {
-          ref: refElem,
-          class: [
-            "vxe-textarea",
-            className,
-            {
-              [`size--${vSize}`]: vSize,
-              "is--autosize": autosize || autoSize,
-              "is--count": showWordCount,
-              "is--disabled": isDisabled,
-              "is-clear": clearable,
-              "is--rows": !import_xe_utils.default.eqNull(rows),
-              "is--cols": !import_xe_utils.default.eqNull(cols),
-              "show--clear": clearable && !isDisabled && !(inputValue === "" || import_xe_utils.default.eqNull(inputValue))
-            }
-          ],
-          spellcheck: false
-        },
-        [
-          (0, import_vue.h)("textarea", {
-            ref: refTextarea,
-            class: ["vxe-textarea--inner", inputClassName || ""],
-            name: props.name,
-            placeholder: inpPlaceholder,
-            maxlength: inpMaxLength,
-            readonly: inputReadonly,
-            disabled: isDisabled,
-            rows,
-            cols,
-            style: resize ? {
-              resize
-            } : null,
-            onInput: inputEvent,
-            onChange: changeEvent,
-            onKeydown: triggerEvent,
-            onKeyup: triggerEvent,
-            onClick: triggerEvent,
-            onFocus: triggerEvent,
-            onBlur: blurEvent
-          }),
-          clearable || showWordCount ? (0, import_vue.h)(
-            "div",
-            {
-              class: "vxe-textarea--suffix"
-            },
-            [
-              clearable ? (0, import_vue.h)(
-                "div",
-                {
-                  class: "vxe-textarea--clear-icon",
-                  onClick: clearValueEvent
-                },
-                [
-                  (0, import_vue.h)("i", {
-                    class: getIcon().TEXTAREA_CLEAR
-                  })
-                ]
-              ) : renderEmptyElement($xeTextarea),
-              showWordCount ? (0, import_vue.h)(
-                "span",
-                {
-                  class: [
-                    "vxe-textarea--count",
-                    {
-                      "is--error": isCountError
-                    }
-                  ]
-                },
-                countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ""}`
-              ) : renderEmptyElement($xeTextarea)
-            ]
-          ) : renderEmptyElement($xeTextarea)
-        ]
+      };
+      (0, import_vue.watch)(
+        () => props.modelValue,
+        (val) => {
+          reactData.inputValue = val;
+          updateAutoTxt();
+        }
       );
-    };
-    (0, import_vue.watch)(
-      () => props.modelValue,
-      (val) => {
-        reactData.inputValue = val;
-        updateAutoTxt();
-      }
-    );
-    const reFlag = (0, import_vue.ref)(0);
-    (0, import_vue.watch)(computeFormReadonly, () => {
-      reFlag.value++;
-    });
-    (0, import_vue.watch)(computeSizeOpts, () => {
-      reFlag.value++;
-    });
-    (0, import_vue.watch)(
-      () => props.autoSize,
-      () => {
+      const reFlag = (0, import_vue.ref)(0);
+      (0, import_vue.watch)(computeFormReadonly, () => {
         reFlag.value++;
-      }
-    );
-    (0, import_vue.watch)(
-      () => props.autosize,
-      () => {
+      });
+      (0, import_vue.watch)(computeSizeOpts, () => {
         reFlag.value++;
-      }
-    );
-    (0, import_vue.watch)(reFlag, () => {
-      updateAutoTxt();
-      handleResize();
-    });
-    const rDvFlag = (0, import_vue.ref)(0);
-    (0, import_vue.watch)(computeFormReadonly, () => {
-      rDvFlag.value++;
-    });
-    (0, import_vue.watch)(computeDomValue, () => {
-      rDvFlag.value++;
-    });
-    (0, import_vue.watch)(rDvFlag, () => {
-      updateDomValue();
-    });
-    (0, import_vue.onMounted)(() => {
-      updateDomValue();
-      (0, import_vue.nextTick)(() => {
-        updateDomValue();
       });
-    });
-    (0, import_vue.nextTick)(() => {
-      const { autosize, autoSize } = props;
-      if (autosize) {
-        warnLog("vxe.error.delProp", ["autosize", "auto-size"]);
-      }
-      if (autosize || autoSize) {
+      (0, import_vue.watch)(
+        () => props.autoSize,
+        () => {
+          reFlag.value++;
+        }
+      );
+      (0, import_vue.watch)(
+        () => props.autosize,
+        () => {
+          reFlag.value++;
+        }
+      );
+      (0, import_vue.watch)(reFlag, () => {
         updateAutoTxt();
         handleResize();
-      }
-    });
-    $xeTextarea.renderVN = renderVN;
-    return $xeTextarea;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      });
+      const rDvFlag = (0, import_vue.ref)(0);
+      (0, import_vue.watch)(computeFormReadonly, () => {
+        rDvFlag.value++;
+      });
+      (0, import_vue.watch)(computeDomValue, () => {
+        rDvFlag.value++;
+      });
+      (0, import_vue.watch)(rDvFlag, () => {
+        updateDomValue();
+      });
+      (0, import_vue.onMounted)(() => {
+        updateDomValue();
+        (0, import_vue.nextTick)(() => {
+          updateDomValue();
+        });
+      });
+      (0, import_vue.nextTick)(() => {
+        const { autosize, autoSize } = props;
+        if (autosize) {
+          warnLog("vxe.error.delProp", ["autosize", "auto-size"]);
+        }
+        if (autosize || autoSize) {
+          updateAutoTxt();
+          handleResize();
+        }
+      });
+      $xeTextarea.renderVN = renderVN;
+      return $xeTextarea;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);