@opentinyvue/vue-input 2.21.0

package/lib/mobile.js

@@ -0,0 +1,247 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/input/vue';
+import { defineComponent, props, setup } from '@opentinyvue/vue-common';
+import { iconClose, iconChevronRight, iconEyeopen, iconEyeclose } from '@opentinyvue/vue-icon';
+import ActionSheet from '@opentinyvue/vue-action-sheet';
+import '@opentinyvue/vue-theme-mobile/input/index.css';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script = defineComponent({
+  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "input"],
+  components: {
+    IconClose: iconClose(),
+    IconChevronRight: iconChevronRight(),
+    IconEyeopen: iconEyeopen(),
+    IconEyeclose: iconEyeclose(),
+    TinyActionSheet: ActionSheet
+  },
+  props: [].concat(props, ["name", "selectMenu", "ellipsis", "contentStyle", "labelWidth", "tips", "isSelect", "type", "label", "modelValue", "disabled", "readonly", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit", "title", "counter", "autosize", "tabindex", "width", "textAlign", "resize"]),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    class: [_vm.type === "textarea" ? "tiny-mobile-textarea" : "tiny-mobile-input", _vm.state.inputSize ? "tiny-mobile-input-" + _vm.state.inputSize : "", {
+      "is-focus": _vm.state.focused,
+      "is-disabled": _vm.state.inputDisabled,
+      "is-exceed": _vm.state.inputExceed,
+      "is-showlimit": _vm.state.isWordLimitVisible && _vm.type === "textarea",
+      "tiny-mobile-input-group": _vm.slots.prepend || _vm.slots.append,
+      "tiny-mobile-input-group-append": _vm.slots.append,
+      "tiny-mobile-input-group-prepend": _vm.slots.prepend
+    }],
+    style: _vm.$attrs.style,
+    on: {
+      "mouseenter": function mouseenter($event) {
+        _vm.state.hovering = true;
+      },
+      "mouseleave": function mouseleave($event) {
+        _vm.state.hovering = false;
+      }
+    }
+  }, [_vm.slots.title || _vm.title ? _c("div", {
+    staticClass: "tiny-mobile-input__title"
+  }, [_vm._t("title", function() {
+    return [_vm._v(_vm._s(_vm.title))];
+  })], 2) : _vm._e(), _vm.type !== "textarea" ? _c("div", {
+    staticClass: "tiny-mobile-input__wrapper"
+  }, [_vm.isSelect ? _c("div", {
+    staticClass: "tiny-mobile-input__select",
+    on: {
+      "click": _vm.showBox
+    }
+  }, [_c("input", _vm._b({
+    staticClass: "tiny-mobile-input__inner",
+    style: _vm.state.inputStyle,
+    attrs: {
+      "type": "text",
+      "readonly": "",
+      "disabled": _vm.state.inputDisabled,
+      "name": _vm.name,
+      "aria-label": _vm.label,
+      "tabindex": _vm.tabindex
+    },
+    domProps: {
+      "value": _vm.state.checkedLabel
+    },
+    on: {
+      "input": _vm.handleInput,
+      "change": _vm.handleChange
+    }
+  }, "input", _vm.a(_vm.$attrs, ["size", "class", "style", "^on[A-Z]"]), false)), _c("div", {
+    staticClass: "tiny-mobile-input__select-icon",
+    style: {
+      transform: _vm.state.boxVisibility ? "rotate(90deg)" : "none"
+    }
+  }, [_c("IconChevronRight")], 1)]) : [_vm.type !== "textarea" ? _c("input", _vm._b({
+    ref: "input",
+    staticClass: "tiny-mobile-input__inner",
+    style: _vm.state.inputStyle,
+    attrs: {
+      "name": _vm.name,
+      "tabindex": _vm.tabindex,
+      "type": _vm.showPassword ? _vm.state.passwordVisible ? "text" : "password" : _vm.type,
+      "disabled": _vm.state.inputDisabled,
+      "readonly": _vm.readonly,
+      "autocomplete": _vm.autocomplete,
+      "aria-label": _vm.label
+    },
+    on: {
+      "compositionstart": _vm.handleCompositionStart,
+      "compositionupdate": _vm.handleCompositionUpdate,
+      "compositionend": _vm.handleCompositionEnd,
+      "input": _vm.handleInput,
+      "focus": _vm.handleFocus,
+      "blur": _vm.handleBlur,
+      "change": _vm.handleChange
+    }
+  }, "input", _vm.a(_vm.$attrs, ["size", "class", "style", "^on[A-Z]"]), false)) : _vm._e(), _vm.slots.prepend ? _c("div", {
+    staticClass: "tiny-mobile-input-group__prepend"
+  }, [_c("span", [_vm._t("prepend")], 2)]) : _vm._e(), _vm.slots.prefix || _vm.prefixIcon ? _c("div", {
+    staticClass: "tiny-mobile-input__prefix"
+  }, [_vm._t("prefix"), _vm.prefixIcon ? _c(_vm.prefixIcon, {
+    tag: "component",
+    staticClass: "tiny-mobile-input__icon"
+  }) : _vm._e()], 2) : _vm._e(), _vm.getSuffixVisible() ? _c("span", {
+    staticClass: "tiny-mobile-input__suffix"
+  }, [!_vm.state.showClear || !_vm.state.showPwdVisible || !_vm.state.isWordLimitVisible ? [_vm._t("suffix"), _vm.suffixIcon ? _c(_vm.suffixIcon, {
+    tag: "component",
+    staticClass: "tiny-mobile-input__icon"
+  }) : _vm._e()] : _vm._e(), _vm.state.showClear ? _c("icon-close", {
+    staticClass: "tiny-mobile-input__icon tiny-mobile-input__clear",
+    on: {
+      "mousedown": function mousedown($event) {
+        $event.preventDefault();
+      },
+      "click": _vm.clear
+    }
+  }) : _vm._e(), _vm.state.showPwdVisible ? _c(_vm.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose", {
+    tag: "component",
+    staticClass: "tiny-mobile-input__icon",
+    on: {
+      "click": _vm.handlePasswordVisible
+    }
+  }) : _vm._e(), _vm.state.isWordLimitVisible ? _c("span", {
+    staticClass: "tiny-mobile-input__count"
+  }, [_c("span", {
+    staticClass: "tiny-mobile-input__count-inner"
+  }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))])]) : _vm._e(), _vm.state.validateState ? _c("i", {
+    staticClass: "tiny-mobile-input__icon",
+    class: ["tiny-mobile-input__validateIcon", _vm.validateIcon]
+  }) : _vm._e()], 2) : _vm._e(), _vm.slots.append ? _c("div", {
+    staticClass: "tiny-mobile-input-group__append"
+  }, [_vm._t("append")], 2) : _vm._e()]], 2) : _c("div", {
+    staticClass: "tiny-mobile-textarea__wrapper"
+  }, [_c("textarea", _vm._b({
+    ref: "textarea",
+    class: ["tiny-mobile-textarea__inner", {
+      "is-focus": _vm.state.focused,
+      "is-autosize": _vm.autosize
+    }],
+    style: Object.assign({}, _vm.state.textareaStyle, {
+      width: _vm.$attrs.cols ? "auto" : "100%",
+      height: _vm.$attrs.cols || _vm.autosize ? "auto" : ""
+    }),
+    attrs: {
+      "name": _vm.name,
+      "tabindex": _vm.tabindex,
+      "disabled": _vm.state.inputDisabled,
+      "readonly": _vm.readonly,
+      "autocomplete": _vm.autocomplete,
+      "aria-label": _vm.label
+    },
+    on: {
+      "focus": _vm.handleFocus,
+      "blur": _vm.handleBlur,
+      "change": _vm.handleChange,
+      "compositionstart": _vm.handleCompositionStart,
+      "compositionupdate": _vm.handleCompositionUpdate,
+      "compositionend": _vm.handleCompositionEnd,
+      "input": _vm.handleInput,
+      "keyup": function keyup($event) {
+        return _vm.$emit("keyup", $event);
+      },
+      "keydown": function keydown($event) {
+        return _vm.$emit("keydown", $event);
+      },
+      "paste": function paste($event) {
+        return _vm.$emit("paste", $event);
+      }
+    }
+  }, "textarea", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]"]), false))]), _vm.state.isWordLimitVisible && _vm.type === "textarea" ? _c("span", {
+    staticClass: "tiny-mobile-textarea__count"
+  }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))]) : _vm._e(), _vm.slots.tips || _vm.tips ? _c("div", {
+    staticClass: "tiny-mobile-input__tips"
+  }, [_vm._t("tips", function() {
+    return [_vm._v(_vm._s(_vm.tips))];
+  })], 2) : _vm._e(), _c("tiny-action-sheet", {
+    attrs: {
+      "menus": _vm.selectMenu,
+      "ellipsis": _vm.ellipsis,
+      "content-style": _vm.contentStyle,
+      "visible": _vm.state.boxVisibility
+    },
+    on: {
+      "update:visible": function updateVisible($event) {
+        _vm.state.boxVisibility = $event;
+      }
+    },
+    model: {
+      value: _vm.state.sheetvalue,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "sheetvalue", $$v);
+      },
+      expression: "state.sheetvalue"
+    }
+  })], 1);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobile = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobile as default };

package/lib/pc.js

@@ -0,0 +1,428 @@
+import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/input/vue';
+import { defineComponent, $prefix, setup, directive, props } from '@opentinyvue/vue-common';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import { renderless, api } from '@opentinyvue/vue-renderless/tall-storage/vue';
+import '@opentinyvue/vue-theme/tall-storage/index.css';
+import { IconClose, IconEyeopen, IconEyeclose } from '@opentinyvue/vue-icon';
+import Tooltip from '@opentinyvue/vue-tooltip';
+import Button from '@opentinyvue/vue-button';
+import DialogBox from '@opentinyvue/vue-dialog-box';
+import '@opentinyvue/vue-theme/input/index.css';
+import '@opentinyvue/vue-theme/textarea/index.css';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script$1 = defineComponent({
+  name: $prefix + "TallStorage",
+  inheritAttrs: false,
+  props: {
+    isMemoryStorage: Boolean,
+    localstorageData: Array
+  },
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render$1 = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "tiny-tall-storage",
+    on: {
+      "mousedown": _vm.mousedown
+    }
+  }, [_c("div", {
+    staticClass: "tiny-storage-list-style"
+  }, [_c("ul", {
+    staticClass: "tiny-storage-list",
+    on: {
+      "keydown": function keydown($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+        return _vm.keydownEvent.apply(null, arguments);
+      }
+    }
+  }, _vm._l(_vm.localstorageData, function(item) {
+    return _c("li", {
+      key: item,
+      staticClass: "tiny-storage-item",
+      class: [_vm.state.hoverValue === item ? "item-hover" : ""],
+      on: {
+        "click": function click($event) {
+          return _vm.selectItem(item);
+        }
+      }
+    }, [_vm._v(" " + _vm._s(item) + " ")]);
+  }), 0)])]);
+};
+var staticRenderFns$1 = [];
+var __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1);
+function __vue2_injectStyles$1(context) {
+  for (var o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var tallStorage = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", _vm._b({
+    class: [_vm.$attrs.class, _vm.type === "textarea" ? "tiny-textarea" : "tiny-input", _vm.state.inputSize ? "tiny-input-" + _vm.state.inputSize : "", {
+      "is-disabled": _vm.state.inputDisabled,
+      "is-exceed": _vm.state.inputExceed,
+      "tiny-input-group": _vm.slots.prepend || _vm.slots.append,
+      "tiny-input-group-append": _vm.slots.append,
+      "tiny-input-group-prepend": _vm.slots.prepend,
+      "tiny-input-prefix": _vm.slots.prefix || _vm.prefixIcon,
+      "tiny-input-suffix": _vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword || _vm.mask && _vm.state.inputDisabled,
+      "tiny-input-word-limit": _vm.state.isWordLimitVisible,
+      "is-display-only": _vm.state.isDisplayOnly,
+      "tiny-input-underline": _vm.inputBoxType === "underline"
+    }],
+    on: {
+      "mouseenter": function mouseenter($event) {
+        _vm.state.hovering = true;
+        _vm.$emit("mouseenter", $event);
+      },
+      "mouseleave": function mouseleave($event) {
+        _vm.state.hovering = false;
+        _vm.$emit("mouseleave", $event);
+      },
+      "click": function click($event) {
+        return _vm.$emit("click", $event);
+      }
+    }
+  }, "div", _vm.a(_vm.$attrs, ["class"]), false), [_vm.type !== "textarea" ? [_vm.slots.prepend ? _c("div", {
+    ref: "prepend",
+    staticClass: "tiny-input-group__prepend"
+  }, [_vm._t("prepend")], 2) : _vm._e(), _c("span", {
+    staticClass: "tiny-input-display-only"
+  }, [_vm.state.isDisplayOnly ? _c("tiny-tooltip", {
+    attrs: {
+      "disabled": !_vm.showTooltip,
+      "effect": "light",
+      "content": _vm.state.displayOnlyTooltip,
+      "placement": "top",
+      "popper-class": _vm.state.tooltipConfig.popperClass || ""
+    },
+    nativeOn: {
+      "mouseenter": function mouseenter($event) {
+        return _vm.handleEnterDisplayOnlyContent.apply(null, arguments);
+      }
+    }
+  }, [_vm.type === "password" ? _c("span", {
+    staticClass: "tiny-input-display-only__content"
+  }, [_vm._v(_vm._s(_vm.state.hiddenPassword))]) : _vm.mask ? _c("span", {
+    staticClass: "tiny-input-display-only__mask"
+  }, [_c("span", {
+    staticClass: "tiny-input-display-only__mask-text"
+  }, [_vm._v(_vm._s(_vm.state.displayedMaskValue))]), _c(_vm.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose", {
+    tag: "component",
+    nativeOn: {
+      "click": function click($event) {
+        _vm.state.maskValueVisible = !_vm.state.maskValueVisible;
+      }
+    }
+  })], 1) : _c("span", {
+    staticClass: "tiny-input-display-only__content"
+  }, [_vm._v(_vm._s(_vm.state.displayOnlyText))])]) : _vm._e(), _vm.type !== "textarea" ? _c("input", _vm._b({
+    ref: "input",
+    class: ["tiny-input__inner", _vm.mask && _vm.state.inputDisabled && !_vm.state.maskValueVisible && "tiny-input__mask"],
+    attrs: {
+      "name": _vm.name,
+      "data-tag": "tiny-input-inner",
+      "tabindex": _vm.tabindex,
+      "type": _vm.showPassword ? _vm.state.passwordVisible ? "text" : "password" : _vm.type,
+      "disabled": _vm.state.inputDisabled,
+      "readonly": _vm.readonly,
+      "unselectable": _vm.readonly ? "on" : "off",
+      "autocomplete": _vm.autocomplete,
+      "aria-label": _vm.label
+    },
+    on: {
+      "compositionend": _vm.handleCompositionEnd,
+      "compositionupdate": _vm.handleCompositionUpdate,
+      "compositionstart": _vm.handleCompositionStart,
+      "blur": _vm.handleBlur,
+      "focus": _vm.handleFocus,
+      "input": _vm.handleInput,
+      "change": _vm.handleChange,
+      "keyup": function keyup($event) {
+        return _vm.$emit("keyup", $event);
+      },
+      "keydown": function keydown($event) {
+        return _vm.$emit("keydown", $event);
+      },
+      "paste": function paste($event) {
+        return _vm.$emit("paste", $event);
+      }
+    }
+  }, "input", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]", "id"]), false)) : _vm._e()], 1), _vm.isMemoryStorage ? _c("tiny-tall-storage", {
+    attrs: {
+      "name": _vm.name,
+      "localstorage-data": _vm.storageData,
+      "is-memory-storage": _vm.isMemoryStorage
+    },
+    on: {
+      "selected": _vm.selectedMemory
+    }
+  }) : _vm._e(), !_vm.state.isDisplayOnly && (_vm.slots.prefix || _vm.prefixIcon) ? _c("span", {
+    ref: "prefix",
+    staticClass: "tiny-input__prefix"
+  }, [_vm._t("prefix"), _vm.prefixIcon ? _c(_vm.prefixIcon, {
+    tag: "component",
+    staticClass: "tiny-svg-size tiny-input__icon"
+  }) : _vm._e()], 2) : _vm._e(), _c("div", [_c("transition", {
+    attrs: {
+      "name": "tiny-transition-icon-out-in"
+    }
+  }, [!_vm.state.isDisplayOnly && _vm.getSuffixVisible() ? _c("span", {
+    ref: "suffix",
+    staticClass: "tiny-input__suffix"
+  }, [_c("span", {
+    staticClass: "tiny-input__suffix-inner"
+  }, [_vm.frontClearIcon && _vm.state.showClear ? _c("icon-close", {
+    staticClass: "tiny-svg-size tiny-input__icon tiny-input__clear",
+    on: {
+      "mousedown": function mousedown($event) {
+        $event.preventDefault();
+      },
+      "click": _vm.clear
+    }
+  }) : _vm._e(), !_vm.state.showClear || !_vm.state.showPwdVisible || !_vm.state.isWordLimitVisible ? [_vm._t("suffix"), _vm.suffixIcon ? _c(_vm.suffixIcon, {
+    tag: "component",
+    staticClass: "tiny-svg-size tiny-input__icon"
+  }) : _vm._e()] : _vm._e(), !_vm.frontClearIcon && _vm.state.showClear ? _c("icon-close", {
+    staticClass: "tiny-svg-size tiny-input__icon tiny-input__clear",
+    on: {
+      "mousedown": function mousedown($event) {
+        $event.preventDefault();
+      },
+      "click": _vm.clear
+    }
+  }) : _vm._e(), _vm.showPassword ? _c(_vm.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose", {
+    tag: "component",
+    staticClass: "tiny-svg-size tiny-input__icon",
+    nativeOn: {
+      "click": function click($event) {
+        return _vm.handlePasswordVisible.apply(null, arguments);
+      }
+    }
+  }) : _vm._e(), _vm.mask && _vm.state.inputDisabled ? _c(_vm.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose", {
+    tag: "component",
+    staticClass: "tiny-svg-size tiny-input__icon",
+    nativeOn: {
+      "click": function click($event) {
+        _vm.state.maskValueVisible = !_vm.state.maskValueVisible;
+      }
+    }
+  }) : _vm._e(), _vm.state.isWordLimitVisible ? _c("span", {
+    staticClass: "tiny-input__count"
+  }, [_c("span", {
+    staticClass: "tiny-input__count-inner"
+  }, [_c("span", {
+    staticClass: "tiny-input__count-text-length"
+  }, [_vm._v(" " + _vm._s(_vm.state.showWordLimit ? "" + _vm.state.textLength : "") + " ")]), _c("span", {
+    staticClass: "tiny-input__count-upper-limit"
+  }, [_vm._v(" " + _vm._s(_vm.state.showWordLimit ? "/" + _vm.state.upperLimit : _vm.state.textLength) + " ")])])]) : _vm._e()], 2), _vm.state.validateState ? _c("i", {
+    staticClass: "tiny-input__icon",
+    class: ["tiny-input__validateIcon", _vm.validateIcon]
+  }) : _vm._e()]) : _vm._e()])], 1), _vm.slots.append ? _c("div", {
+    ref: "append",
+    staticClass: "tiny-input-group__append"
+  }, [_vm._t("append")], 2) : _vm._e(), _vm.slots.panel ? _c("div", {
+    ref: "panel",
+    staticClass: "tiny-input-group__panel"
+  }, [_vm._t("panel")], 2) : _vm._e()] : _c("span", {
+    class: ["tiny-textarea-display-only", _vm.hoverExpand && "tiny-textarea__inner-con"]
+  }, [_vm.state.isDisplayOnly ? _c("tiny-tooltip", {
+    attrs: {
+      "disabled": !_vm.showTooltip,
+      "pre": "",
+      "effect": "light",
+      "content": _vm.state.displayOnlyTooltip,
+      "placement": "top",
+      "popper-class": _vm.state.tooltipConfig.popperClass || ""
+    },
+    nativeOn: {
+      "mouseenter": function mouseenter($event) {
+        return _vm.handleEnterDisplayOnlyContent($event, "textarea");
+      }
+    }
+  }, [_c("div", {
+    staticClass: "tiny-textarea-display-only__wrap"
+  }, [_c("span", {
+    ref: "textBox",
+    staticClass: "tiny-textarea-display-only__content text-box"
+  }, [_vm.state.showMoreBtn ? _c("span", {
+    staticClass: "more-btn",
+    on: {
+      "click": function click($event) {
+        _vm.state.showDisplayOnlyBox = true;
+      }
+    }
+  }, [_vm._v(_vm._s(_vm.t("ui.input.more")) + ">")]) : _vm._e(), _c("span", [_vm._v(_vm._s(_vm.state.displayOnlyText))])])])]) : _vm._e(), _vm.state.isDisplayOnly && _vm.popupMore ? _c("tiny-dialog-box", {
+    attrs: {
+      "title": _vm.t("ui.input.detail"),
+      "visible": _vm.state.showDisplayOnlyBox,
+      "append-to-body": true
+    },
+    on: {
+      "update:visible": function updateVisible($event) {
+        _vm.state.showDisplayOnlyBox = $event;
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "footer",
+      fn: function fn() {
+        return [_c("tiny-button", {
+          on: {
+            "click": function click($event) {
+              _vm.state.showDisplayOnlyBox = false;
+            }
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.input.close")))])];
+      },
+      proxy: true
+    }], null, false, 2786811157)
+  }, [_c("div", [_vm._v(_vm._s(_vm.state.displayOnlyText))])]) : _vm._e(), _c("textarea", _vm._b({
+    directives: [{
+      name: "clickoutside",
+      rawName: "v-clickoutside.mouseup",
+      value: function value() {
+        return _vm.handleTextareaMouseUp(true);
+      },
+      expression: "() => handleTextareaMouseUp(true)",
+      modifiers: {
+        "mouseup": true
+      }
+    }],
+    ref: "textarea",
+    staticClass: "tiny-textarea__inner",
+    class: _vm.hoverExpand && !_vm.state.enteredTextarea && "tiny-textarea__fix-height",
+    style: _vm.state.textareaStyle,
+    attrs: {
+      "tabindex": _vm.tabindex,
+      "disabled": _vm.state.inputDisabled,
+      "readonly": _vm.readonly,
+      "unselectable": _vm.readonly ? "on" : "off",
+      "autocomplete": _vm.autocomplete,
+      "aria-label": _vm.label
+    },
+    on: {
+      "compositionstart": _vm.handleCompositionStart,
+      "compositionupdate": _vm.handleCompositionUpdate,
+      "compositionend": _vm.handleCompositionEnd,
+      "input": _vm.handleInput,
+      "focus": _vm.handleFocus,
+      "blur": _vm.handleBlur,
+      "change": _vm.handleChange,
+      "mouseenter": function mouseenter($event) {
+        return _vm.handleEnterTextarea($event);
+      },
+      "mouseleave": function mouseleave($event) {
+        return _vm.handleLeaveTextarea($event);
+      },
+      "mousedown": function mousedown($event) {
+        return _vm.handleTextareaMouseDown();
+      },
+      "mouseup": function mouseup($event) {
+        return _vm.handleTextareaMouseUp();
+      },
+      "keyup": function keyup($event) {
+        return _vm.$emit("keyup", $event);
+      },
+      "keydown": function keydown($event) {
+        return _vm.$emit("keydown", $event);
+      },
+      "paste": function paste($event) {
+        return _vm.$emit("paste", $event);
+      }
+    }
+  }, "textarea", _vm.a(_vm.$attrs, ["type", "class", "style", "id"]), false))], 1), _vm.state.isWordLimitVisible && _vm.type === "textarea" ? _c("span", {
+    staticClass: "tiny-input__count"
+  }, [_c("span", {
+    staticClass: "tiny-input__count-inner"
+  }, [_c("span", {
+    staticClass: "tiny-input__count-text-length"
+  }, [_vm._v(" " + _vm._s(_vm.state.showWordLimit ? "" + _vm.state.textLength : "") + " ")]), _c("span", {
+    staticClass: "tiny-input__count-upper-limit"
+  }, [_vm._v(" " + _vm._s(_vm.state.showWordLimit ? "/" + _vm.state.upperLimit : _vm.state.textLength) + " ")])])]) : _vm._e(), _vm._t("default")], 2);
+};
+var staticRenderFns = [];
+var __vue2_script = defineComponent({
+  inheritAttrs: false,
+  // 勿删，兼容灵雀特殊场景,MR#1861
+  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "click", "input"],
+  directives: directive({
+    Clickoutside
+  }),
+  components: {
+    IconClose: IconClose(),
+    IconEyeopen: IconEyeopen(),
+    IconEyeclose: IconEyeclose(),
+    TinyTallStorage: tallStorage,
+    TinyTooltip: Tooltip,
+    TinyButton: Button,
+    TinyDialogBox: DialogBox
+  },
+  props: [].concat(props, ["name", "size", "form", "type", "mask", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "memorySpace", "validateEvent", "showWordLimit", "displayOnly", "displayOnlyContent", "frontClearIcon", "showEmptyValue", "hoverExpand", "popupMore", "showTooltip", "inputBoxType"]),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless: renderless$1,
+      api: api$1
+    });
+  }
+});
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var pc = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { pc as default };