@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/es/packages/components/input/src/input.vue2.mjs

@@ -1,9 +1,11 @@
-import { defineComponent, inject, ref, watch, onMounted, computed, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, unref, vShow, createCommentVNode, renderSlot, toDisplayString, createBlock, vModelText, createTextVNode, vModelDynamic, withModifiers, Fragment, renderList, withCtx, createVNode } from 'vue';
+import { defineComponent, getCurrentInstance, inject, ref, watch, onMounted, nextTick, computed, resolveDirective, withDirectives, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, vShow, createCommentVNode, createElementVNode, createBlock, renderSlot, toDisplayString, withModifiers, withKeys, vModelText, createTextVNode, vModelDynamic, Fragment, renderList, withCtx, createVNode } from 'vue';
 import { ToButton } from '../../button/index.mjs';
 import { ToIcon } from '../../icon/index.mjs';
 import vDis from '../../../directives/dis/src/dis.mjs';
 import tipDirective from '../../../directives/tip/src/tip.mjs';
-import { t } from '../../../locale/index.mjs';
+import { vPress } from '../../../directives/press/src/press.mjs';
+import { t, langKey } from '../../../locale/index.mjs';
+import { getModeClasses } from '../../../hooks/useSetClass.mjs';
 
 const __default__ = defineComponent({
   name: "ToInput"
@@ -11,6 +13,12 @@ const __default__ = defineComponent({
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
+    flex: Boolean,
+    // 是否自动获取焦点
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
     desc: {
       type: String,
       default: ""
@@ -45,12 +53,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     },
     placeholder: {
       type: String,
-      default: "\u8BF7\u8F93\u5165"
+      default: ""
     },
     type: {
       type: String,
       default: "text"
     },
+    icon: {
+      type: String,
+      default: ""
+    },
     tabindex: {
       type: String,
       default: "1"
@@ -89,7 +101,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     },
     spChars: {
       type: [String, Boolean],
-      default: '/,\\,[,],{,},"'
+      default: ""
     },
     prefix: {
       type: String,
@@ -113,7 +125,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     },
     clearable: {
       type: Boolean,
-      default: false
+      default: true
     },
     preventFocus: {
       type: Boolean,
@@ -135,14 +147,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: true
     },
-    fillet: {
-      type: String,
-      default: "normal"
-    },
-    filletPosition: {
-      type: String,
-      default: ""
-    },
     color: {
       type: String,
       default: "default"
@@ -153,7 +157,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     },
     mode: {
       type: String,
-      default: ""
+      default: "default"
     },
     width: {
       type: [Number, String],
@@ -171,19 +175,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       type: [String, Number],
       default: 0
     },
-    value: {
-      type: [String, Number],
-      default: () => {
-        return "";
-      }
-    },
-    readonly: {
+    count: {
       type: Boolean,
       default: false
     }
   },
-  emits: ["update:modelValue", "click", "clear", "input", "keyup", "change", "keydown", "cut", "paste", "keypress", "focus", "blur"],
+  emits: ["update:modelValue", "click", "clear", "input", "keyup", "change", "keydown", "cut", "paste", "keypress", "focus", "blur", "enter", "ctrlenter"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const ins = getCurrentInstance();
     const props = __props;
     const emit = __emit;
     const ToForm = inject("ToForm", {});
@@ -196,12 +195,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const clearVisible = ref(false);
     const itype = ref("text");
     const disabled = ref(props.disabled);
+    const inputRef = ref(null);
     watch(
       () => props.modelValue,
       (val) => {
+        clearVisible.value = !!val;
         data.value = val;
       },
-      { immediate: true }
+      { immediate: true, deep: true }
     );
     watch(
       () => props.type,
@@ -234,6 +235,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             }
             let pre = data.value.substring(0, data.value.indexOf("."));
             let suf = data.value.substring(data.value.indexOf(".") + 1);
+            suf = suf.replace(/[/.]/g, "").substring(0, Number(props.dot));
             data.value = `${pre}.${suf}`;
           }
           if (Number(data.value) < Number(props.min)) {
@@ -242,7 +244,17 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           if (Number(data.value) > Number(props.max)) {
             data.value = props.max;
           }
+          if (String(data.value).length > Number(props.maxlength)) {
+            data.value = Number(String(data.value).slice(0, Number(props.maxlength)));
+          }
+        }
+        if (iSpChars.value) {
+          const filterData = filter(iSpChars.value, val);
+          if (filterData !== false) {
+            data.value = filterData;
+          }
         }
+        emit("update:modelValue", data.value);
       }
     );
     watch(
@@ -257,33 +269,79 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         errorTip.value = val;
       }
     );
+    watch(
+      () => props.autofocus,
+      (val) => {
+        if (val) {
+          focusInput();
+        }
+      }
+    );
+    const filter = (chars, from) => {
+      if (chars && from) {
+        const check = new RegExp(
+          `[${chars.split(",").map((char) => "\\" + char).join("")}]+`,
+          ""
+        );
+        const reg = new RegExp(
+          `[${chars.split(",").map((char) => "\\" + char).join("")}]*`,
+          "g"
+        );
+        if (check.test(from)) {
+          return from.replace(reg, "");
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    };
+    const focusInput = () => {
+      if (inputRef.value) {
+        try {
+          if (!inputRef.value.disabled) {
+            setTimeout(() => {
+              var _a;
+              (_a = inputRef.value) == null ? void 0 : _a.focus();
+            }, 100);
+          }
+        } catch (error) {
+          console.error("\u8F93\u5165\u6846\u805A\u7126\u5931\u8D25:", error);
+        }
+      }
+    };
     onMounted(() => {
-      data.value = props.step ? 0 : props.value || props.modelValue;
+      data.value = props.modelValue;
       itype.value = props.type;
+      if (props.autofocus) {
+        nextTick(() => {
+          focusInput();
+        });
+      }
     });
     const iPlaceholder = computed(() => {
-      if (!disabled.value && !props.placeholder && props.placeholder !== "") {
-        return "\u8BF7\u586B\u5199";
+      if (!disabled.value && !props.placeholder) {
+        return t("to.common.placeholder.input");
       } else {
         return props.placeholder;
       }
     });
-    const iconMode = computed(() => {
-      if (props.mode === "none" || props.mode === "line" || focused.value)
-        return "none";
-      if (props.mode === "fill")
-        return "fill";
-      return "plain";
+    const iSpChars = computed(() => {
+      var _a, _b, _c;
+      if (props.spChars) {
+        return props.spChars;
+      }
+      return (_c = (_b = (_a = ins.appContext.config.globalProperties.$TouchUI) == null ? void 0 : _a.input) == null ? void 0 : _b.spChars) != null ? _c : '/,\\,[,],{,},"';
     });
     const setClass = computed(() => {
-      const arr = ["to-form-readonly"];
+      const arr = ["to-disable-target"];
       if (errorTip.value) {
         arr.push("to-input-mode-line");
         arr.push("to-input-color-danger");
         arr.push("to-input-tip-show");
       } else {
         if (props.mode) {
-          arr.push(`mode-${props.mode}`);
+          arr.push(...getModeClasses(props.mode));
         }
         if (props.type) {
           arr.push(`type-${props.type}`);
@@ -300,15 +358,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         if (props.link) {
           arr.push("is-link");
         }
-        if (props.type === "textarea" && (typeof props.height === "number" || Number(props.height) > 1)) {
-          arr.push(`to-input-height-${props.height}`);
-        }
         if (props.step) {
           arr.push("is-step");
         }
-        if (props.type === "textarea" && props.clearable) {
-          arr.push("is-clearable");
-        }
         if (ToForm && ToForm.comparable || props.comparable) {
           arr.push("to-compare");
         }
@@ -323,11 +375,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.width) {
         if (!isNaN(Number(props.width))) {
           obj.width = props.width + "em";
+        } else {
+          obj.width = props.width;
         }
       }
       if (props.height) {
         if (!isNaN(Number(props.height))) {
           obj.height = props.height + "em";
+        } else {
+          obj.height = props.height;
         }
       }
       return obj;
@@ -359,18 +415,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         return "";
       }
     });
+    const getDataLength = computed(() => {
+      if (data.value || data.value === 0) {
+        return String(data.value).length;
+      } else {
+        return 0;
+      }
+    });
     const setDisabled = (f) => {
       disabled.value = f;
     };
-    const inputRef = ref(null);
-    function inputKeyup() {
-      emit("keyup", data.value);
+    function inputKeyup(e) {
+      emit("keyup", data.value, e);
     }
     function inputChange() {
       emit("change", data.value);
     }
-    function inputKeydown() {
-      emit("keydown", data.value);
+    function inputKeydown(e) {
+      emit("keydown", data.value, e);
     }
     function inputCut() {
       emit("cut", data.value);
@@ -394,16 +456,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     function inputPaste() {
       emit("paste", data.value);
     }
-    function inputKeyPress() {
-      emit("keypress", data.value);
+    function inputKeyPress(e) {
+      emit("keypress", data.value, e);
     }
     function inputInput() {
       emit("input", data.value);
-      emit("update:modelValue", data.value);
+    }
+    function inputEnter() {
+      emit("enter", data.value);
+    }
+    function inputCtrlEnter() {
+      emit("ctrlenter", data.value);
     }
     function clear() {
-      data.value = "";
-      clearVisible.value = false;
+      if (!props.disabled || props.link) {
+        data.value = "";
+        clearVisible.value = false;
+      }
       emit("clear");
     }
     function reduce() {
@@ -415,8 +484,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     function addSuggestion(item) {
       data.value += item;
     }
-    function click() {
-      emit("click");
+    function click(e) {
+      emit("click", e);
     }
     function compare() {
       valueStore.value.unshift(data.value);
@@ -431,12 +500,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       changed,
       setDisabled,
       errorTip,
-      errorType
+      errorType,
+      focus: focusInput
     });
     return (_ctx, _cache) => {
       const _directive_color = resolveDirective("color");
-      return withDirectives((openBlock(), createElementBlock("span", {
+      return withDirectives((openBlock(), createElementBlock("label", {
         id: __props.id,
+        key: unref(langKey),
+        flex: __props.flex ? __props.flex : null,
         class: normalizeClass(["to-input", setClass.value]),
         style: normalizeStyle(setStyle.value),
         onClick: click
@@ -451,154 +523,274 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           value: data.value
         }, null, 8, ["trim", "req", "desc", "rule", "value"])), [
           [vShow, false]
-        ]) : createCommentVNode("", true),
-        props.prefix || _ctx.$slots.prefix || props.step ? (openBlock(), createElementBlock("span", {
-          key: 1,
-          class: "to-input-prefix"
-        }, [
-          renderSlot(_ctx.$slots, "prefix"),
-          props.prefix ? (openBlock(), createElementBlock("span", {
-            key: 0,
-            class: "to-input-text"
-          }, toDisplayString(props.prefix), 1)) : createCommentVNode("", true),
+        ]) : createCommentVNode("v-if", true),
+        createElementVNode("span", { class: "to-input-wrapper" }, [
           props.step ? withDirectives((openBlock(), createBlock(unref(ToIcon), {
-            key: 1,
+            key: 0,
             class: "to-input-decrease",
-            value: props.stepIconMode ? "unfold" : "reduce",
-            link: "",
-            onMousedown: reduce
+            value: props.stepIconMode ? "expand" : "reduce",
+            link: ""
           }, null, 8, ["value"])), [
-            [unref(vDis), Number(data.value) === Number(props.min) || props.disabled]
-          ]) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
-        props.type === "textarea" ? withDirectives((openBlock(), createElementBlock("textarea", {
-          key: 2,
-          ref_key: "inputRef",
-          ref: inputRef,
-          "onUpdate:modelValue": ($event) => data.value = $event,
-          class: "to-input-textarea",
-          autocomplete: props.autocomplete ? "on" : "new-password",
-          maxlength: props.maxlength,
-          placeholder: iPlaceholder.value,
-          disabled: disabled.value,
-          readonly: __props.readonly,
-          tabindex: props.tabindex,
-          onKeyup: inputKeyup,
-          onKeydown: inputKeydown,
-          onCut: inputCut,
-          onFocus: inputFocus,
-          onBlur: inputBlur,
-          onPaste: inputPaste,
-          onKeypress: inputKeyPress
-        }, null, 40, ["onUpdate:modelValue", "autocomplete", "maxlength", "placeholder", "disabled", "readonly", "tabindex"])), [
-          [vModelText, data.value]
-        ]) : props.type === "html" ? (openBlock(), createElementBlock("span", {
-          key: 3,
-          class: "to-input-html"
-        }, [
-          createTextVNode(toDisplayString(props.html) + " ", 1),
-          renderSlot(_ctx.$slots, "html")
-        ])) : withDirectives((openBlock(), createElementBlock("input", {
-          key: 4,
-          ref_key: "inputRef",
-          ref: inputRef,
-          "onUpdate:modelValue": ($event) => data.value = $event,
-          class: "to-input-content",
-          autocomplete: props.autocomplete ? "on" : "new-password",
-          tabindex: props.tabindex,
-          maxlength: props.maxlength,
-          placeholder: iPlaceholder.value,
-          type: itype.value,
-          disabled: disabled.value,
-          readonly: __props.readonly,
-          onKeyup: inputKeyup,
-          onKeydown: inputKeydown,
-          onCut: inputCut,
-          onFocus: inputFocus,
-          onBlur: inputBlur,
-          onPaste: inputPaste,
-          onKeypress: inputKeyPress,
-          onChange: inputChange,
-          onInput: inputInput
-        }, null, 40, ["onUpdate:modelValue", "autocomplete", "tabindex", "maxlength", "placeholder", "type", "disabled", "readonly"])), [
-          [vModelDynamic, data.value]
+            [unref(vDis), Number(data.value) === Number(props.min) || props.disabled],
+            [unref(vPress), reduce]
+          ]) : createCommentVNode("v-if", true),
+          createCommentVNode(" \u524D\u7F00 "),
+          _ctx.$slots.prefix || props.step ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: "to-input-prefix"
+          }, [
+            renderSlot(_ctx.$slots, "prefix")
+          ])) : createCommentVNode("v-if", true),
+          props.prefix ? (openBlock(), createElementBlock("span", {
+            key: 2,
+            class: "to-input-prefix-text"
+          }, [
+            createElementVNode(
+              "span",
+              null,
+              toDisplayString(props.prefix),
+              1
+              /* TEXT */
+            )
+          ])) : createCommentVNode("v-if", true),
+          createCommentVNode(" \u8F93\u5165\u6846\u90E8\u5206 "),
+          props.type === "textarea" ? (openBlock(), createElementBlock("span", {
+            key: 3,
+            class: "to-input-content"
+          }, [
+            withDirectives(createElementVNode("textarea", {
+              ref_key: "inputRef",
+              ref: inputRef,
+              "onUpdate:modelValue": ($event) => data.value = $event,
+              class: "to-input-box",
+              autocomplete: props.autocomplete ? "on" : "new-password",
+              maxlength: props.maxlength,
+              placeholder: iPlaceholder.value,
+              disabled: props.disabled,
+              tabindex: props.tabindex,
+              onKeyup: inputKeyup,
+              onKeydown: [
+                withModifiers(inputKeydown, ["exact"]),
+                withKeys(withModifiers(inputEnter, ["exact"]), ["enter"]),
+                withKeys(withModifiers(inputCtrlEnter, ["ctrl", "exact"]), ["enter"]),
+                withKeys(withModifiers(inputCtrlEnter, ["meta", "exact"]), ["enter"])
+              ],
+              onCut: inputCut,
+              onFocus: inputFocus,
+              onBlur: inputBlur,
+              onPaste: inputPaste,
+              onKeypress: inputKeyPress,
+              onChange: inputChange,
+              onInput: inputInput
+            }, null, 40, ["onUpdate:modelValue", "autocomplete", "maxlength", "placeholder", "disabled", "tabindex", "onKeydown"]), [
+              [vModelText, data.value]
+            ])
+          ])) : props.type === "html" ? (openBlock(), createElementBlock("span", {
+            key: 4,
+            class: "to-input-html"
+          }, [
+            createTextVNode(
+              toDisplayString(props.html) + " ",
+              1
+              /* TEXT */
+            ),
+            renderSlot(_ctx.$slots, "html")
+          ])) : (openBlock(), createElementBlock("span", {
+            key: 5,
+            class: "to-input-content"
+          }, [
+            __props.icon ? (openBlock(), createBlock(unref(ToIcon), {
+              key: 0,
+              value: __props.icon,
+              class: "to-input-icon"
+            }, null, 8, ["value"])) : createCommentVNode("v-if", true),
+            withDirectives(createElementVNode("input", {
+              ref_key: "inputRef",
+              ref: inputRef,
+              "onUpdate:modelValue": ($event) => data.value = $event,
+              class: "to-input-box",
+              autocomplete: props.autocomplete ? "on" : "new-password",
+              tabindex: props.tabindex,
+              maxlength: props.maxlength,
+              placeholder: iPlaceholder.value,
+              type: itype.value,
+              disabled: props.disabled,
+              onKeyup: inputKeyup,
+              onKeydown: [
+                withModifiers(inputKeydown, ["exact"]),
+                withKeys(withModifiers(inputEnter, ["exact"]), ["enter"]),
+                withKeys(withModifiers(inputCtrlEnter, ["ctrl", "exact"]), ["enter"]),
+                withKeys(withModifiers(inputCtrlEnter, ["meta", "exact"]), ["enter"])
+              ],
+              onCut: inputCut,
+              onFocus: inputFocus,
+              onBlur: inputBlur,
+              onPaste: inputPaste,
+              onKeypress: inputKeyPress,
+              onChange: inputChange,
+              onInput: inputInput
+            }, null, 40, ["onUpdate:modelValue", "autocomplete", "tabindex", "maxlength", "placeholder", "type", "disabled", "onKeydown"]), [
+              [vModelDynamic, data.value]
+            ])
+          ])),
+          (!props.disabled || props.link) && props.clearable ? withDirectives((openBlock(), createBlock(
+            unref(ToIcon),
+            {
+              key: 6,
+              class: "to-input-clear",
+              link: "",
+              value: "close",
+              onClick: withModifiers(clear, ["stop"])
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          )), [
+            [vShow, (!props.disabled || props.link) && clearVisible.value]
+          ]) : createCommentVNode("v-if", true),
+          props.maxlength !== Infinity && props.count && props.type !== "textarea" ? (openBlock(), createElementBlock("span", {
+            key: 7,
+            class: "to-input-count"
+          }, [
+            createElementVNode(
+              "span",
+              { class: "to-input-count-text" },
+              toDisplayString(getDataLength.value) + "/" + toDisplayString(props.maxlength),
+              1
+              /* TEXT */
+            )
+          ])) : createCommentVNode("v-if", true),
+          createCommentVNode(" \u540E\u7F00\u533A "),
+          props.suffix ? (openBlock(), createElementBlock("span", {
+            key: 8,
+            class: "to-input-suffix-text"
+          }, [
+            createElementVNode(
+              "span",
+              null,
+              toDisplayString(props.suffix),
+              1
+              /* TEXT */
+            )
+          ])) : createCommentVNode("v-if", true),
+          (_ctx.$slots.default || _ctx.$slots.suffix || props.step) && __props.type !== "textarea" ? (openBlock(), createElementBlock("span", {
+            key: 9,
+            class: "to-input-suffix"
+          }, [
+            renderSlot(_ctx.$slots, "default"),
+            renderSlot(_ctx.$slots, "suffix")
+          ])) : createCommentVNode("v-if", true),
+          props.step ? withDirectives((openBlock(), createBlock(unref(ToIcon), {
+            key: 10,
+            class: "to-input-increase",
+            value: props.stepIconMode ? "collapse" : "add",
+            link: ""
+          }, null, 8, ["value"])), [
+            [unref(vDis), Number(data.value) === Number(props.max) || props.disabled],
+            [unref(vPress), increase]
+          ]) : createCommentVNode("v-if", true)
         ]),
-        props.clearable || props.suggestion || _ctx.$slots.default || _ctx.$slots.suffix || props.suffix || props.step ? (openBlock(), createElementBlock("span", {
-          key: 5,
-          class: "to-input-suffix"
+        props.type === "textarea" && (props.maxlength !== Infinity && props.count || _ctx.$slots.fn || _ctx.$slots.default || props.suggestion) ? (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: "to-input-fn"
         }, [
-          !props.disabled && props.clearable ? withDirectives((openBlock(), createBlock(unref(ToIcon), {
+          _ctx.$slots.fn || _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
             key: 0,
-            class: "to-input-clear",
-            mode: iconMode.value,
-            link: "",
-            value: "close",
-            onClick: withModifiers(clear, ["stop"])
-          }, null, 8, ["mode"])), [
-            [vShow, clearVisible.value]
-          ]) : createCommentVNode("", true),
-          props.step ? withDirectives((openBlock(), createBlock(unref(ToIcon), {
+            class: "to-input-suffix"
+          }, [
+            __props.type === "textarea" ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true),
+            __props.type === "textarea" ? renderSlot(_ctx.$slots, "fn", { key: 1 }) : createCommentVNode("v-if", true)
+          ])) : createCommentVNode("v-if", true),
+          createElementVNode("span", { class: "to-input-suggestion" }, [
+            props.suggestion ? (openBlock(true), createElementBlock(
+              Fragment,
+              { key: 0 },
+              renderList(props.suggestion.split(","), (item, i) => {
+                return openBlock(), createBlock(unref(ToButton), {
+                  key: i,
+                  class: "to-input-suggestion-item",
+                  onClick: ($event) => addSuggestion(item)
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(item),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : createCommentVNode("v-if", true)
+          ]),
+          props.maxlength !== Infinity && props.count ? (openBlock(), createElementBlock("span", {
             key: 1,
-            class: "to-input-increase",
-            value: props.stepIconMode ? "fold" : "add",
-            link: "",
-            onMousedown: increase
-          }, null, 8, ["value"])), [
-            [unref(vDis), Number(data.value) === Number(props.max) || props.disabled]
-          ]) : createCommentVNode("", true),
-          props.suffix ? (openBlock(), createElementBlock("span", {
-            key: 2,
-            class: "to-input-text"
-          }, toDisplayString(props.suffix), 1)) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "suffix"),
-          renderSlot(_ctx.$slots, "default"),
-          props.suggestion ? (openBlock(), createElementBlock("span", {
-            key: 3,
-            class: "to-input-suggestion"
+            class: "to-input-count"
           }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(props.suggestion.split(","), (item, i) => {
-              return openBlock(), createBlock(unref(ToButton), {
-                key: i,
-                fillet: "normal",
-                color: "info",
-                mode: "text",
-                onClick: ($event) => addSuggestion(item)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(item), 1)
-                ]),
-                _: 2
-              }, 1032, ["onClick"]);
-            }), 128))
-          ])) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
+            createElementVNode(
+              "span",
+              { class: "to-input-count-text" },
+              toDisplayString(getDataLength.value) + "/" + toDisplayString(props.maxlength),
+              1
+              /* TEXT */
+            )
+          ])) : createCommentVNode("v-if", true)
+        ])) : createCommentVNode("v-if", true),
         errorTip.value ? withDirectives((openBlock(), createElementBlock("span", {
-          key: 6,
+          key: 2,
           class: "to-box-tip"
         }, [
-          errorType.value === "rule" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createTextVNode(" \u8F93\u5165\u6709\u8BEF "),
-            withDirectives(createVNode(unref(ToIcon), {
-              style: { "height": "auto" },
-              value: "help",
-              color: "danger",
-              mode: "toast",
-              fillet: "round"
-            }, null, 512), [
-              [
-                unref(tipDirective),
-                errorTip.value,
-                void 0,
-                { danger: true }
-              ]
-            ])
-          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createTextVNode(" \u4E0D\u80FD\u4E3A\u7A7A ")
-          ], 64))
+          errorType.value === "rule" ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 0 },
+            [
+              createTextVNode(
+                toDisplayString(unref(t)("to.input.inputError")) + " ",
+                1
+                /* TEXT */
+              ),
+              withDirectives(createVNode(
+                unref(ToIcon),
+                {
+                  style: { "height": "auto" },
+                  value: "help",
+                  color: "danger",
+                  mode: "toast"
+                },
+                null,
+                512
+                /* NEED_PATCH */
+              ), [
+                [
+                  unref(tipDirective),
+                  errorTip.value,
+                  void 0,
+                  { danger: true }
+                ]
+              ])
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : (openBlock(), createElementBlock(
+            Fragment,
+            { key: 1 },
+            [
+              createTextVNode(
+                toDisplayString(unref(t)("to.input.required")),
+                1
+                /* TEXT */
+              )
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
         ])), [
           [_directive_color, "danger"]
-        ]) : createCommentVNode("", true)
-      ], 14, ["id"])), [
+        ]) : createCommentVNode("v-if", true)
+      ], 14, ["id", "flex"])), [
         [unref(tipDirective), changed.value ? unref(t)("to.common.originalValue", valueStore.value[0]) : ""]
       ]);
     };