@opentinyvue/vue-input 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Input from './src/index';
+export default Input;

package/lib/index.js

@@ -0,0 +1,212 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { defineComponent, $prefix, $setup, $props } from "@opentinyvue/vue-common";
+import PcTemplate from "./pc.js";
+import MobileTemplate from "./mobile.js";
+import MobileFirstTemplate from "./mobile-first.js";
+var template = function template2(mode) {
+  var _process$env;
+  var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  if ("pc" === (tinyMode || mode)) {
+    return PcTemplate;
+  }
+  if ("mobile" === (tinyMode || mode)) {
+    return MobileTemplate;
+  }
+  if ("mobile-first" === (tinyMode || mode)) {
+    return MobileFirstTemplate;
+  }
+  return PcTemplate;
+};
+var $constants = {
+  INPUT_PC: "tiny-input__",
+  INPUTGROUP_PC: "tiny-input-group__",
+  INPUT_MOBILE: "tiny-mobile-input__",
+  INPUTGROUP_MOBILE: "tiny-mobile-input-group__",
+  Mode: "pc",
+  inputMode: function inputMode(mode) {
+    return mode === this.Mode ? this.INPUT_PC : this.INPUT_MOBILE;
+  },
+  inputGroupMode: function inputGroupMode(mode) {
+    return mode === this.Mode ? this.INPUTGROUP_PC : this.INPUTGROUP_MOBILE;
+  },
+  VALIDATE_ICON: {
+    Validating: "tiny-icon-loading",
+    Success: "tiny-icon-circle-check",
+    Error: "tiny-icon-circle-close"
+  },
+  COMPONENT_NAME: {
+    FormItem: "FormItem"
+  },
+  MASKSYMBOL: "******",
+  TEXTAREA_HEIGHT_MOBILE: 108
+};
+var inputProps = _extends({}, $props, {
+  _constants: {
+    type: Object,
+    default: function _default() {
+      return $constants;
+    }
+  },
+  name: String,
+  size: String,
+  form: String,
+  label: String,
+  height: Number,
+  resize: String,
+  tabindex: {
+    type: String,
+    default: "1"
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  hoverExpand: Boolean,
+  mask: Boolean,
+  suffixIcon: [Object, String],
+  prefixIcon: [Object, String],
+  modelValue: [String, Number],
+  type: {
+    type: String,
+    default: "text"
+  },
+  memorySpace: {
+    type: Number,
+    default: 5
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  selectMenu: {
+    type: Array,
+    default: function _default2() {
+      return [];
+    }
+  },
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  contentStyle: {
+    type: Object,
+    default: function _default3() {
+      return {};
+    }
+  },
+  isSelect: {
+    type: Boolean,
+    default: false
+  },
+  tips: String,
+  counter: {
+    type: Boolean,
+    default: false
+  },
+  autosize: {
+    type: [Boolean, Object],
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  autocomplete: {
+    type: String,
+    default: "off"
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  showWordLimit: {
+    type: Boolean,
+    default: false
+  },
+  showTitle: {
+    type: Boolean,
+    default: false
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  popupMore: {
+    type: Boolean,
+    default: false
+  },
+  // mobile特有属性
+  textareaTitle: {
+    type: String,
+    default: ""
+  },
+  displayOnly: {
+    type: Boolean,
+    default: false
+  },
+  displayOnlyContent: {
+    type: String,
+    default: ""
+  },
+  customClass: {
+    type: String,
+    default: ""
+  },
+  frontClearIcon: {
+    type: Boolean,
+    default: false
+  },
+  showEmptyValue: {
+    type: Boolean,
+    default: void 0
+  },
+  textAlign: {
+    type: String,
+    default: "left"
+  },
+  width: {
+    type: [String, Number]
+  },
+  showTooltip: {
+    type: Boolean,
+    default: true
+  },
+  /** 输入框的边框模式，当值为underline时，只显示一条底部直线 */
+  inputBoxType: {
+    type: String,
+    default: "normal",
+    validator: function validator(value) {
+      return ["normal", "underline"].includes(value);
+    }
+  }
+});
+var Input = defineComponent({
+  name: $prefix + "Input",
+  inheritAttrs: false,
+  props: inputProps,
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+});
+var version = "2.21.0";
+Input.model = {
+  prop: "modelValue",
+  event: "update:modelValue"
+};
+Input.install = function(Vue) {
+  Vue.component(Input.name, Input);
+};
+Input.version = version;
+export {
+  Input as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,400 @@
+import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/input/vue';
+import { defineComponent, $prefix, setup, props } from '@opentinyvue/vue-common';
+import { renderless, api } from '@opentinyvue/vue-renderless/tall-storage/vue';
+import '@opentinyvue/vue-theme/tall-storage/index.css';
+import { IconClose, IconError, 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';
+
+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 __vue2_script = defineComponent({
+  inheritAttrs: false,
+  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "click", "input"],
+  components: {
+    IconClose: IconClose(),
+    IconError: IconError(),
+    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", "validateEvent", "showWordLimit", "customClass", "displayOnly", "displayOnlyContent", "showEmptyValue", "popupMore", "showTooltip", "frontClearIcon", "hoverExpand"]),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless: renderless$1,
+      api: api$1
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    class: _vm.m("relative text-xs sm:text-sm", _vm.type !== "textarea" || _vm.slots.prepend || _vm.slots.append ? "inline-table" : "", _vm.type !== "textarea" ? "w-full" : "align-bottom", _vm.slots.prepend || _vm.slots.append ? "leading-normal border-separate border-spacing-0" : "", _vm.$attrs.class),
+    style: _vm.$attrs.style,
+    attrs: {
+      "data-tag": "tiny-input"
+    },
+    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);
+      }
+    }
+  }, [_vm.type !== "textarea" ? [_vm.slots.prepend && !_vm.state.isDisplayOnly ? _c("div", {
+    ref: "prepend",
+    staticClass: "border-r-0 rounded-tr-none rounded-br-none bg-color-bg-2 text-color-text-placeholder border border-solid border-color-border rounded px-3 py-0 w-px align-middle table-cell relative whitespace-nowrap",
+    attrs: {
+      "data-tag": "tiny-input-prepend"
+    }
+  }, [_vm._t("prepend")], 2) : _vm._e(), _c("span", {
+    staticClass: "relative text-sm block",
+    class: [_vm.state.inputSizeMf !== "mini" ? "sm:text-sm" : "sm:text-xs"],
+    attrs: {
+      "data-tag": "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 || "",
+      "popper-options": {
+        bubbling: true
+      }
+    },
+    nativeOn: {
+      "mouseenter": function mouseenter($event) {
+        return _vm.handleEnterDisplayOnlyContent.apply(null, arguments);
+      }
+    }
+  }, [_vm.type === "password" ? _c("span", {
+    staticClass: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
+  }, [_vm._v(_vm._s(_vm.state.hiddenPassword))]) : _vm.mask ? _c("span", {
+    staticClass: "absolute top-0 left-0 max-w-full flex items-center leading-7 sm:leading-normal text-color-text-primary"
+  }, [_c("span", {
+    staticClass: "flex-1 overflow-hidden text-ellipsis whitespace-nowrap mr-4"
+  }, [_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: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
+  }, [_vm._v(" " + _vm._s(_vm.state.displayOnlyText) + " ")])]) : _vm._e(), _vm.type !== "textarea" ? _c("input", _vm._b({
+    ref: "input",
+    class: _vm.m("w-full border-0 sm:border px-0 sm:px-3 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border-separator placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6 py-0 outline-0 transition-colors duration-200 ease-in-out ", _vm.state.inputSizeMf === "medium" ? "h-8 leading-8 " + _vm.m("sm:text-sm") + " placeholder:text-sm" : _vm.state.inputSizeMf === "mini" ? "h-6 leading-6 text-xs placeholder:text-xs" : "h-7 leading-7", _vm.slots.prepend || _vm.slots.append ? "align-middle table-cell" : "inline-block", _vm.slots.prepend && _vm.slots.append ? "rounded-none" : _vm.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _vm.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _vm.readonly ? " text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_vm.slots.prefix || _vm.prefixIcon) && (_vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword) ? "px-6 sm:px-6" : _vm.slots.prefix || _vm.prefixIcon ? "pl-6 sm:pl-6 pr-0 sm:pr-3" : _vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword ? "pl-0 sm:pl-3 pr-6 sm:pr-6" : "", _vm.mask && _vm.state.inputDisabled ? !_vm.state.maskValueVisible ? "font-[serif] pr-6 sm:pr-6" : "pr-6 sm:pr-6" : "", (_vm.slots.suffix || _vm.suffixIcon || _vm.showPassword) && _vm.clearable ? "pr-10 sm:pr-10" : "", _vm.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _vm.state.isWordLimitVisible ? _vm.clearable ? "pr-18 sm:pr-18" : "pr-14 sm:pr-14" : "", _vm.customClass),
+    attrs: {
+      "data-tag": "tiny-input-inner",
+      "name": _vm.name,
+      "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: {
+      "compositionstart": _vm.handleCompositionStart,
+      "compositionupdate": _vm.handleCompositionUpdate,
+      "compositionend": _vm.handleCompositionEnd,
+      "input": _vm.handleInput,
+      "focus": _vm.handleFocus,
+      "blur": _vm.handleBlur,
+      "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]"]), 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.slots.prefix || _vm.prefixIcon) && !_vm.state.isDisplayOnly ? _c("span", {
+    ref: "prefix",
+    staticClass: "left-2 transition-all duration-300 ease-in-out text-xs sm:text-sm absolute top-1/2 -translate-y-1/2 text-center text-color-text-placeholder flex items-center",
+    attrs: {
+      "data-tag": "tiny-input-prefix"
+    }
+  }, [_vm._t("prefix"), _vm.prefixIcon ? _c(_vm.prefixIcon, {
+    tag: "component",
+    class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs sm:text-sm", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")
+  }) : _vm._e()], 2) : _vm._e(), !_vm.state.isDisplayOnly && _vm.getSuffixVisible() ? _c("span", {
+    ref: "suffix",
+    staticClass: "right-2 transition-all duration-300 ease-in-out pointer-events-none text-xs absolute top-1/2 -translate-y-1/2 text-center text-color-text-placeholder flex items-center z-[1]",
+    attrs: {
+      "data-tag": "tiny-input-suffix"
+    }
+  }, [_c("span", {
+    staticClass: "pointer-events-auto text-xs flex justify-start items-center"
+  }, [_vm.state.showClear ? _c("icon-close", {
+    class: _vm.m("hidden sm:block text-center transition-all duration-300 ease-in-out text-xs cursor-pointer", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    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",
+    class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")
+  }) : _vm._e()] : _vm._e(), _vm.state.showClear ? _c("icon-error", {
+    class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs cursor-pointer fill-color-none-hover block sm:hidden", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    on: {
+      "mousedown": function mousedown($event) {
+        $event.preventDefault();
+      },
+      "click": _vm.clear
+    }
+  }) : _vm._e(), _vm.showPassword ? _c(_vm.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose", {
+    tag: "component",
+    class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    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",
+    class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs fill-color-text-placeholder", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
+    nativeOn: {
+      "click": function click($event) {
+        _vm.state.maskValueVisible = !_vm.state.maskValueVisible;
+      }
+    }
+  }) : _vm._e(), _vm.state.isWordLimitVisible ? _c("span", {
+    staticClass: "h-full inline-flex items-center text-xs sm:text-sm text-color-text-placeholder"
+  }, [_c("span", {
+    staticClass: "bg-color-bg-1 leading-none inline-block"
+  }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))])]) : _vm._e()], 2), _vm.state.validateState ? _c("i", {
+    class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs pointer-events-none", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7", _vm.state.validateIcon)
+  }) : _vm._e()]) : _vm._e(), _vm.slots.append && !_vm.state.isDisplayOnly ? _c("div", {
+    ref: "append",
+    staticClass: "border-l-0 rounded-tl-none rounded-bl-none bg-color-bg-2 text-color-text-placeholder border border-solid border-color-border rounded-tr rounded-br px-3 py-0 w-px align-middle table-cell relative whitespace-nowrap"
+  }, [_vm._t("append")], 2) : _vm._e(), _vm.slots.panel && !_vm.state.isDisplayOnly ? _c("div", {
+    ref: "panel"
+  }, [_vm._t("panel")], 2) : _vm._e()] : _c("span", {
+    class: [_vm.hoverExpand && "relative block h-7 w-full", _vm.state.isDisplayOnly && _vm.hoverExpand && "h-auto"],
+    attrs: {
+      "data-tag": "tiny-input-textarea"
+    }
+  }, [_vm.state.isDisplayOnly ? _c("tiny-tooltip", {
+    attrs: {
+      "disabled": !_vm.showTooltip,
+      "effect": "light",
+      "content": _vm.state.displayOnlyTooltip,
+      "placement": "top",
+      "popper-class": _vm.state.tooltipConfig.popperClass || "",
+      "popper-options": {
+        bubbling: true
+      }
+    },
+    nativeOn: {
+      "mouseenter": function mouseenter($event) {
+        return _vm.handleEnterDisplayOnlyContent($event, "textarea");
+      }
+    }
+  }, [_c("div", {
+    staticClass: "flex"
+  }, [_c("span", {
+    ref: "textBox",
+    staticClass: "text-box max-w-full break-words line-clamp-5 text-sm text-color-text-primary before:content-[''] before:float-right before:h-full before:-mb-4",
+    class: [_vm.state.inputSizeMf !== "mini" ? "sm:text-sm" : "sm:text-xs", _vm.hoverExpand && "relative left-0 max-w-full leading-normal line-clamp-1", _vm.autosize ? "left-0 max-w-full break-words  whitespace-pre-line leading-normal" : "left-0 max-w-full text-ellipsis overflow-hidden break-words whitespace-pre-wrap line-clamp-5"],
+    on: {
+      "click": function click($event) {
+        _vm.state.showDisplayOnlyBox = true;
+      }
+    }
+  }, [_vm.state.showMoreBtn ? _c("span", {
+    staticClass: "float-right relative top-px clear-both text-color-brand text-sm leading-3 cursor-pointer"
+  }, [_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"),
+      "width": "1000px",
+      "visible": _vm.state.showDisplayOnlyBox,
+      "append-to-body": true,
+      "close-on-click-modal": false
+    },
+    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({
+    ref: "textarea",
+    staticClass: "block w-full border-0 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border-separator outline-0 rounded placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6",
+    class: [_vm.readonly ? "sm:border-0 px-0 py-0" : "sm:border px-3 ", _vm.state.isDisplayOnly ? "hidden" : "", _vm.state.inputSizeMf !== "mini" ? "sm:placeholder:text-sm sm:text-sm" : "sm:placeholder:text-xs sm:text-xs", _vm.hoverExpand && "min-w-40 absolute h-7 z-[2000] top-0 left-0", _vm.hoverExpand && _vm.state.enteredTextarea ? "py-2 leading-normal" : "py-0 leading-[1.625rem]", _vm.hoverExpand && !_vm.state.enteredTextarea && "min-h-7 px-2 leading-7 overflow-hidden"],
+    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);
+      }
+    }
+  }, "textarea", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]"]), false))], 1), _vm.state.isWordLimitVisible && _vm.type === "textarea" ? _c("span", {
+    staticClass: "bg-color-bg-1 text-color-text-placeholder text-xs sm:text-sm absolute bottom-1 right-3",
+    attrs: {
+      "data-tag": "tiny-input-limit"
+    }
+  }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))]) : _vm._e(), _vm._t("default")], 2);
+};
+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 mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };