@opentiny/vue-input - npm Package Compare versions

Comparing version 3.13.0 to 3.14.0

lib/index.js

@@ -189,3 +189,3 @@ function _extends() {
 });
-var version = "3.13.0";
+var version = "3.14.0";
 Input.model = {
@@ -192,0 +192,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -6,3 +6,3 @@ import { renderless, api } from "@opentiny/vue-renderless/input/vue";
 import Tooltip from "@opentiny/vue-tooltip";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderSlot, createCommentVNode, createElementVNode, createBlock, withCtx, toDisplayString, mergeProps, resolveDynamicComponent, withModifiers } from "vue";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderSlot, createCommentVNode, createElementVNode, createBlock, withCtx, toDisplayString, resolveDynamicComponent, mergeProps, withModifiers } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -55,3 +55,3 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   inheritAttrs: false,
-  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "click"],
+  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "click", "input"],
   components: {
@@ -65,3 +65,3 @@ IconClose: IconClose(),
   },
-  props: [].concat(props, ["name", "size", "form", "type", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit", "customClass", "displayOnly", "displayOnlyContent"]),
+  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"]),
   setup: function setup(props2, context) {
@@ -83,35 +83,40 @@ return _setup({
 var _hoisted_2 = {
-  class: "relative",
-  "data-tag": "tiny-input-display-only"
+  key: 0,
+  class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
 };
 var _hoisted_3 = {
-  key: 0,
-  class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+  key: 1,
+  class: "absolute top-0 left-0 max-w-full flex items-center leading-7 sm:leading-normal text-color-text-primary"
 };
 var _hoisted_4 = {
-  key: 1,
-  class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+  class: "flex-1 overflow-hidden text-ellipsis whitespace-nowrap mr-4"
 };
-var _hoisted_5 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
-var _hoisted_6 = {
+var _hoisted_5 = {
   key: 2,
+  class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
+};
+var _hoisted_6 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_7 = {
+  key: 2,
+  "data-tag": "tiny-input-prefix",
   ref: "prefix",
   class: "left-2 transition-all duration-300 ease-in-out text-xs absolute top-1/2 -translate-y-1/2 text-center text-color-text-placeholder flex items-center"
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   key: 3,
+  "data-tag": "tiny-input-suffix",
   ref: "suffix",
-  class: "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"
+  class: "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]"
 };
-var _hoisted_8 = {
+var _hoisted_9 = {
   class: "pointer-events-auto text-xs flex justify-start items-center"
 };
-var _hoisted_9 = {
-  key: 4,
+var _hoisted_10 = {
+  key: 5,
   class: "h-full inline-flex items-center text-xs text-color-text-placeholder"
 };
-var _hoisted_10 = {
-  class: "bg-white leading-none inline-block"
+var _hoisted_11 = {
+  class: "bg-color-bg-1 leading-none inline-block"
 };
-var _hoisted_11 = {
+var _hoisted_12 = {
   key: 4,
@@ -121,13 +126,10 @@ ref: "append",
 };
-var _hoisted_12 = {
+var _hoisted_13 = {
   key: 5,
   ref: "panel"
 };
-var _hoisted_13 = {
+var _hoisted_14 = {
   key: 1,
   "data-tag": "tiny-input-textarea"
 };
-var _hoisted_14 = {
-  class: "max-w-full text-ellipsis break-words line-clamp-5"
-};
 var _hoisted_15 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
@@ -137,3 +139,3 @@ var _hoisted_16 = {
   "data-tag": "tiny-input-limit",
-  class: "bg-white text-color-text-placeholder text-xs absolute bottom-1 right-3"
+  class: "bg-color-bg-1 text-color-text-placeholder text-xs absolute bottom-1 right-3"
 };
@@ -148,14 +150,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     {
-      class: normalizeClass(_ctx.m("relative text-xs", _ctx.type !== "textarea" || _ctx.slots.prepend || _ctx.slots.append ? "inline-table" : "", _ctx.type !== "textarea" ? "w-full" : "w-max align-bottom", _ctx.slots.prepend || _ctx.slots.append ? "leading-normal border-separate border-spacing-0" : "", _ctx.$attrs.class)),
+      class: normalizeClass(_ctx.m("relative text-xs", _ctx.type !== "textarea" || _ctx.slots.prepend || _ctx.slots.append ? "inline-table" : "", _ctx.type !== "textarea" ? "w-full" : "align-bottom", _ctx.slots.prepend || _ctx.slots.append ? "leading-normal border-separate border-spacing-0" : "", _ctx.$attrs.class)),
       "data-tag": "tiny-input",
       style: normalizeStyle(_ctx.$attrs.style),
-      onMouseenter: _cache[19] || (_cache[19] = function($event) {
+      onMouseenter: _cache[22] || (_cache[22] = function($event) {
         _ctx.state.hovering = true;
         _ctx.$emit("mouseenter", $event);
       }),
-      onMouseleave: _cache[20] || (_cache[20] = function($event) {
+      onMouseleave: _cache[23] || (_cache[23] = function($event) {
         _ctx.state.hovering = false;
         _ctx.$emit("mouseleave", $event);
       }),
-      onClick: _cache[21] || (_cache[21] = function($event) {
+      onClick: _cache[24] || (_cache[24] = function($event) {
         return _ctx.$emit("click", $event);
@@ -175,72 +177,95 @@ })
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
-        key: 0,
-        effect: "light",
-        content: _ctx.state.displayOnlyTooltip,
-        display: _ctx.type === "password",
-        placement: "top",
-        onMouseenter: _ctx.handleEnterDisplayOnlyContent
-      }, {
-        default: withCtx(function() {
-          return [_ctx.type === "password" ? (openBlock(), createElementBlock(
-            "span",
-            _hoisted_3,
-            toDisplayString(_ctx.state.hiddenPassword),
-            1
-            /* TEXT */
-          )) : (openBlock(), createElementBlock(
-            "span",
-            _hoisted_4,
-            toDisplayString(_ctx.displayOnlyContent || _ctx.state.nativeInputValue),
-            1
-            /* TEXT */
-          ))];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["content", "display", "onMouseenter"])) : createCommentVNode("v-if", true), _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
+      )) : createCommentVNode("v-if", true), createElementVNode(
+        "span",
+        {
+          class: normalizeClass(["relative text-sm", [_ctx.state.inputSizeMf === "medium" ? "sm:text-sm" : "sm:text-xs"]]),
+          "data-tag": "tiny-input-display-only"
+        },
+        [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
+          key: 0,
+          effect: "light",
+          content: _ctx.state.displayOnlyTooltip,
+          display: _ctx.type === "password",
+          placement: "top",
+          "popper-options": {
+            bubbling: true
+          },
+          onMouseenter: _ctx.handleEnterDisplayOnlyContent
+        }, {
+          default: withCtx(function() {
+            return [_ctx.type === "password" ? (openBlock(), createElementBlock(
+              "span",
+              _hoisted_2,
+              toDisplayString(_ctx.state.hiddenPassword),
+              1
+              /* TEXT */
+            )) : _ctx.mask ? (openBlock(), createElementBlock("span", _hoisted_3, [createElementVNode(
+              "span",
+              _hoisted_4,
+              toDisplayString(_ctx.state.displayedMaskValue),
+              1
+              /* TEXT */
+            ), (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
+              onClick: _cache[0] || (_cache[0] = function($event) {
+                return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
+              })
+            }))])) : (openBlock(), createElementBlock(
+              "span",
+              _hoisted_5,
+              toDisplayString(_ctx.state.displayOnlyText),
+              1
+              /* TEXT */
+            ))];
+          }),
+          _: 1
+          /* STABLE */
+        }, 8, ["content", "display", "onMouseenter"])) : createCommentVNode("v-if", true), _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
+          key: 1,
+          ref: "input",
+          "data-tag": "tiny-input-inner",
+          name: _ctx.name
+        }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^onw+"]), {
+          class: _ctx.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 placeholder:text-color-text-placeholder placeholder:text-sm text-sm sm:placeholder:text-xs sm:text-xs text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:bg-color-bg-4 py-0 outline-0 transition-colors duration-200 ease-in-out ", _ctx.state.inputSizeMf === "medium" ? "h-8 leading-8 " + _ctx.m("sm:text-sm") + " placeholder:text-sm" : _ctx.state.inputSizeMf === "mini" ? "h-6 leading-6 text-xs placeholder:text-xs" : "h-7 leading-7", _ctx.slots.prepend || _ctx.slots.append ? "align-middle table-cell" : "inline-block", _ctx.slots.prepend && _ctx.slots.append ? "rounded-none" : _ctx.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _ctx.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _ctx.readonly ? " text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_ctx.slots.prefix || _ctx.prefixIcon) && (_ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword) ? "px-6 sm:px-6" : _ctx.slots.prefix || _ctx.prefixIcon ? "pl-6 sm:pl-6 pr-0 sm:pr-3" : _ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword ? "pl-0 sm:pl-3 pr-6 sm:pr-6" : "", _ctx.mask && _ctx.state.inputDisabled ? !_ctx.state.maskValueVisible ? "font-[serif] pr-6 sm:pr-6" : "pr-6 sm:pr-6" : "", (_ctx.slots.suffix || _ctx.suffixIcon || _ctx.showPassword) && _ctx.clearable ? "pr-10 sm:pr-10" : "", _ctx.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _ctx.state.isWordLimitVisible ? _ctx.clearable ? "pr-18 sm:pr-18" : "pr-14 sm:pr-14" : "", _ctx.customClass),
+          tabindex: _ctx.tabindex,
+          type: _ctx.showPassword ? _ctx.state.passwordVisible ? "text" : "password" : _ctx.type,
+          disabled: _ctx.state.inputDisabled,
+          readonly: _ctx.readonly,
+          unselectable: _ctx.readonly ? "on" : "off",
+          autocomplete: _ctx.autocomplete,
+          onCompositionstart: _cache[1] || (_cache[1] = function() {
+            return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
+          }),
+          onCompositionupdate: _cache[2] || (_cache[2] = function() {
+            return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
+          }),
+          onCompositionend: _cache[3] || (_cache[3] = function() {
+            return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
+          }),
+          onInput: _cache[4] || (_cache[4] = function() {
+            return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
+          }),
+          onFocus: _cache[5] || (_cache[5] = function() {
+            return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+          }),
+          onBlur: _cache[6] || (_cache[6] = function() {
+            return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
+          }),
+          onChange: _cache[7] || (_cache[7] = function() {
+            return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
+          }),
+          "aria-label": _ctx.label,
+          onKeyup: _cache[8] || (_cache[8] = function($event) {
+            return _ctx.$emit("keyup", $event);
+          }),
+          onKeydown: _cache[9] || (_cache[9] = function($event) {
+            return _ctx.$emit("keydown", $event);
+          }),
+          onPaste: _cache[10] || (_cache[10] = function($event) {
+            return _ctx.$emit("paste", $event);
+          })
+        }), null, 16, _hoisted_6)) : createCommentVNode("v-if", true)],
+        2
+        /* CLASS */
+      ), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
         key: 1,
-        ref: "input",
-        name: _ctx.name
-      }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^onw+"]), {
-        class: _ctx.m("w-full border-0 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 placeholder:text-color-text-placeholder placeholder:text-sm text-sm sm:placeholder:text-xs sm:text-xs text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled disabled:bg-color-bg-4 py-0 outline-0 transition-colors duration-200 ease-in-out ", _ctx.state.inputSizeMf === "medium" ? "h-8 leading-8" : _ctx.state.inputSizeMf === "mini" ? "h-6 leading-6" : "h-7 leading-7", _ctx.slots.prepend || _ctx.slots.append ? "align-middle table-cell" : "inline-block", _ctx.slots.prepend && _ctx.slots.append ? "rounded-none" : _ctx.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _ctx.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _ctx.readonly ? "sm:border-0 text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_ctx.slots.prefix || _ctx.prefixIcon) && (_ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword) ? "pl-6 pr-6" : _ctx.slots.prefix || _ctx.prefixIcon ? "pl-6 pr-3" : _ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword ? "pl-3 pr-6" : "", _ctx.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _ctx.customClass),
-        tabindex: _ctx.tabindex,
-        type: _ctx.showPassword ? _ctx.state.passwordVisible ? "text" : "password" : _ctx.type,
-        disabled: _ctx.state.inputDisabled,
-        readonly: _ctx.readonly,
-        unselectable: _ctx.readonly ? "on" : "off",
-        autocomplete: _ctx.autocomplete,
-        onCompositionstart: _cache[0] || (_cache[0] = function() {
-          return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
-        }),
-        onCompositionupdate: _cache[1] || (_cache[1] = function() {
-          return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
-        }),
-        onCompositionend: _cache[2] || (_cache[2] = function() {
-          return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
-        }),
-        onInput: _cache[3] || (_cache[3] = function() {
-          return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
-        }),
-        onFocus: _cache[4] || (_cache[4] = function() {
-          return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
-        }),
-        onBlur: _cache[5] || (_cache[5] = function() {
-          return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
-        }),
-        onChange: _cache[6] || (_cache[6] = function() {
-          return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
-        }),
-        "aria-label": _ctx.label,
-        onKeyup: _cache[7] || (_cache[7] = function($event) {
-          return _ctx.$emit("keyup", $event);
-        }),
-        onKeydown: _cache[8] || (_cache[8] = function($event) {
-          return _ctx.$emit("keydown", $event);
-        }),
-        onPaste: _cache[9] || (_cache[9] = function($event) {
-          return _ctx.$emit("paste", $event);
-        })
-      }), null, 16, _hoisted_5)) : createCommentVNode("v-if", true)]), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
-        key: 1,
         name: _ctx.name,
@@ -252,3 +277,3 @@ "localstorage-data": _ctx.storageData,
         "span",
-        _hoisted_6,
+        _hoisted_7,
         [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
@@ -262,4 +287,4 @@ key: 0,
         "span",
-        _hoisted_7,
-        [createElementVNode("span", _hoisted_8, [!_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
+        _hoisted_8,
+        [createElementVNode("span", _hoisted_9, [!_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
           Fragment,
@@ -278,3 +303,3 @@ {
           class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs cursor-pointer fill-color-none-hover block sm:hidden", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
-          onMousedown: _cache[10] || (_cache[10] = withModifiers(function() {
+          onMousedown: _cache[11] || (_cache[11] = withModifiers(function() {
           }, ["prevent"])),
@@ -285,3 +310,3 @@ onClick: _ctx.clear
           class: normalizeClass(_ctx.m("hidden sm:block text-center transition-all duration-300 ease-in-out text-xs cursor-pointer", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
-          onMousedown: _cache[11] || (_cache[11] = withModifiers(function() {
+          onMousedown: _cache[12] || (_cache[12] = withModifiers(function() {
           }, ["prevent"])),
@@ -293,5 +318,11 @@ onClick: _ctx.clear
           onClick: _ctx.handlePasswordVisible
-        }, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_9, [createElementVNode(
+        }, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), _ctx.mask && _ctx.state.inputDisabled ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
+          key: 4,
+          class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs fill-color-text-placeholder", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
+          onClick: _cache[13] || (_cache[13] = function($event) {
+            return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
+          })
+        }, null, 8, ["class"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_10, [createElementVNode(
           "span",
-          _hoisted_10,
+          _hoisted_11,
           toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength),
@@ -314,3 +345,3 @@ 1
         "div",
-        _hoisted_11,
+        _hoisted_12,
         [renderSlot(_ctx.$slots, "append")],
@@ -321,3 +352,3 @@ 512
         "div",
-        _hoisted_12,
+        _hoisted_13,
         [renderSlot(_ctx.$slots, "panel")],
@@ -329,3 +360,3 @@ 512
       /* STABLE_FRAGMENT */
-    )) : (openBlock(), createElementBlock("span", _hoisted_13, [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
+    )) : (openBlock(), createElementBlock("span", _hoisted_14, [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
       key: 0,
@@ -335,3 +366,8 @@ effect: "light",
       placement: "top",
-      onMouseenter: _ctx.handleEnterDisplayOnlyContent
+      "popper-options": {
+        bubbling: true
+      },
+      onMouseenter: _cache[14] || (_cache[14] = function($event) {
+        return _ctx.handleEnterDisplayOnlyContent($event, "textarea");
+      })
     }, {
@@ -341,6 +377,8 @@ default: withCtx(function() {
           "span",
-          _hoisted_14,
-          toDisplayString(_ctx.displayOnlyContent || _ctx.state.nativeInputValue),
-          1
-          /* TEXT */
+          {
+            class: normalizeClass(["max-w-full text-ellipsis break-words line-clamp-5 text-sm pt-1.5 text-color-text-primary", [_ctx.state.inputSizeMf === "medium" ? "sm:text-sm" : "sm:text-xs"]])
+          },
+          toDisplayString(_ctx.state.displayOnlyText),
+          3
+          /* TEXT, CLASS */
         )];
@@ -350,17 +388,17 @@ }),
       /* STABLE */
-    }, 8, ["content", "onMouseenter"])) : createCommentVNode("v-if", true), createElementVNode("textarea", mergeProps({
+    }, 8, ["content"])) : createCommentVNode("v-if", true), createElementVNode("textarea", mergeProps({
       ref: "textarea"
     }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]"]), {
       tabindex: _ctx.tabindex,
-      class: ["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 outline-0 rounded placeholder:text-color-text-placeholder placeholder:text-xs text-xs text-color-text-primary bg-white disabled:cursor-not-allowed disabled:text-color-text-disabled disabled:bg-color-bg-4 leading-normal", [_ctx.readonly ? "sm:border-0 px-0 py-0" : "sm:border px-3 py-2", _ctx.state.isDisplayOnly ? "hidden" : ""]],
-      onCompositionstart: _cache[12] || (_cache[12] = function() {
+      class: ["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 outline-0 rounded placeholder:text-color-text-placeholder placeholder:text-sm text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:bg-color-bg-4 leading-normal", [_ctx.readonly ? "sm:border-0 px-0 py-0" : "sm:border px-3 py-2", _ctx.state.isDisplayOnly ? "hidden" : "", _ctx.state.inputSizeMf === "medium" ? "sm:placeholder:text-sm sm:text-sm" : "sm:placeholder:text-xs sm:text-xs"]],
+      onCompositionstart: _cache[15] || (_cache[15] = function() {
         return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
       }),
-      onCompositionupdate: _cache[13] || (_cache[13] = function() {
+      onCompositionupdate: _cache[16] || (_cache[16] = function() {
         return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
       }),
-      onCompositionend: _cache[14] || (_cache[14] = function() {
+      onCompositionend: _cache[17] || (_cache[17] = function() {
         return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
       }),
-      onInput: _cache[15] || (_cache[15] = function() {
+      onInput: _cache[18] || (_cache[18] = function() {
         return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
@@ -373,9 +411,9 @@ }),
       style: _ctx.state.textareaStyle,
-      onFocus: _cache[16] || (_cache[16] = function() {
+      onFocus: _cache[19] || (_cache[19] = function() {
         return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
       }),
-      onBlur: _cache[17] || (_cache[17] = function() {
+      onBlur: _cache[20] || (_cache[20] = function() {
         return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
       }),
-      onChange: _cache[18] || (_cache[18] = function() {
+      onChange: _cache[21] || (_cache[21] = function() {
         return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
@@ -382,0 +420,0 @@ }),

lib/mobile.js

@@ -67,4 +67,3 @@ function _extends() {
 var _sfc_main = defineComponent({
-  inheritAttrs: false,
-  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave"],
+  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "input"],
   components: {
@@ -71,0 +70,0 @@ IconClose: iconClose(),

lib/pc.js

 import { renderless, api } from "@opentiny/vue-renderless/input/vue";
 import { defineComponent, props, setup as _setup } from "@opentiny/vue-common";
 import TinyTallStorage from "./tall-storage";
+import { IconClose, IconEyeopen, IconEyeclose } from "@opentiny/vue-icon";
 import Tooltip from "@opentiny/vue-tooltip";
-import { iconClose, iconEyeopen, iconEyeclose } from "@opentiny/vue-icon";
 import "@opentiny/vue-theme/input/index.css";
 import "@opentiny/vue-theme/textarea/index.css";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderSlot, createCommentVNode, createElementVNode, createBlock, withCtx, toDisplayString, mergeProps, resolveDynamicComponent, createVNode, Transition, withModifiers } from "vue";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderSlot, createCommentVNode, createElementVNode, createBlock, withCtx, toDisplayString, resolveDynamicComponent, mergeProps, createVNode, Transition, withModifiers } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -55,11 +55,11 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 var _sfc_main = defineComponent({
-  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "input", "keydown", "paste", "mouseenter", "mouseleave", "click"],
+  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "click", "input"],
   components: {
-    IconClose: iconClose(),
-    IconEyeopen: iconEyeopen(),
-    IconEyeclose: iconEyeclose(),
+    IconClose: IconClose(),
+    IconEyeopen: IconEyeopen(),
+    IconEyeclose: IconEyeclose(),
     TinyTallStorage,
     TinyTooltip: Tooltip
   },
-  props: [].concat(props, ["name", "size", "form", "type", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "memorySpace", "validateEvent", "showWordLimit", "displayOnly", "displayOnlyContent", "frontClearIcon"]),
+  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"]),
   setup: function setup(props2, context) {
@@ -76,3 +76,4 @@ return _setup({
   key: 0,
-  class: "tiny-input-group__prepend"
+  class: "tiny-input-group__prepend",
+  ref: "prepend"
 };
@@ -88,56 +89,63 @@ var _hoisted_2 = {
   key: 1,
-  class: "tiny-input-display-only__content"
+  class: "tiny-input-display-only__mask"
 };
-var _hoisted_5 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_5 = {
+  class: "tiny-input-display-only__mask-text"
+};
 var _hoisted_6 = {
   key: 2,
+  class: "tiny-input-display-only__content"
+};
+var _hoisted_7 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_8 = {
+  key: 2,
   class: "tiny-input__prefix",
   ref: "prefix"
 };
-var _hoisted_7 = {
-  key: 3
-};
-var _hoisted_8 = {
+var _hoisted_9 = {
   key: 0,
-  class: "tiny-input__suffix"
+  class: "tiny-input__suffix",
+  ref: "suffix"
 };
-var _hoisted_9 = {
+var _hoisted_10 = {
   class: "tiny-input__suffix-inner"
 };
-var _hoisted_10 = {
-  key: 4,
+var _hoisted_11 = {
+  key: 5,
   class: "tiny-input__count"
 };
-var _hoisted_11 = {
+var _hoisted_12 = {
   class: "tiny-input__count-inner"
 };
-var _hoisted_12 = {
+var _hoisted_13 = {
   class: "tiny-input__count-text-length"
 };
-var _hoisted_13 = {
+var _hoisted_14 = {
   class: "tiny-input__count-upper-limit"
 };
-var _hoisted_14 = {
-  key: 4,
-  class: "tiny-input-group__append"
-};
 var _hoisted_15 = {
-  key: 5,
-  class: "tiny-input-group__panel"
+  key: 3,
+  class: "tiny-input-group__append",
+  ref: "append"
 };
 var _hoisted_16 = {
+  key: 4,
+  class: "tiny-input-group__panel",
+  ref: "panel"
+};
+var _hoisted_17 = {
   class: "tiny-textarea-display-only__content"
 };
-var _hoisted_17 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
-var _hoisted_18 = {
+var _hoisted_18 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_19 = {
   key: 2,
   class: "tiny-input__count"
 };
-var _hoisted_19 = {
+var _hoisted_20 = {
   class: "tiny-input__count-inner"
 };
-var _hoisted_20 = {
+var _hoisted_21 = {
   class: "tiny-input__count-text-length"
 };
-var _hoisted_21 = {
+var _hoisted_22 = {
   class: "tiny-input__count-upper-limit"
@@ -159,15 +167,16 @@ };
         "tiny-input-prefix": _ctx.slots.prefix || _ctx.prefixIcon,
-        "tiny-input-suffix": _ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword,
+        "tiny-input-suffix": _ctx.slots.suffix || _ctx.suffixIcon || _ctx.clearable || _ctx.showPassword || _ctx.mask && _ctx.state.inputDisabled,
+        "tiny-input-word-limit": _ctx.state.isWordLimitVisible,
         "is-display-only": _ctx.state.isDisplayOnly
       }]),
       style: normalizeStyle(_ctx.$attrs.style),
-      onMouseenter: _cache[20] || (_cache[20] = function($event) {
+      onMouseenter: _cache[27] || (_cache[27] = function($event) {
         _ctx.state.hovering = true;
         _ctx.$emit("mouseenter", $event);
       }),
-      onMouseleave: _cache[21] || (_cache[21] = function($event) {
+      onMouseleave: _cache[28] || (_cache[28] = function($event) {
         _ctx.state.hovering = false;
         _ctx.$emit("mouseleave", $event);
       }),
-      onClick: _cache[22] || (_cache[22] = function($event) {
+      onClick: _cache[29] || (_cache[29] = function($event) {
         return _ctx.$emit("click", $event);
@@ -181,3 +190,9 @@ })
       },
-      [_ctx.slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "prepend")])) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
+      [_ctx.slots.prepend ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_1,
+        [renderSlot(_ctx.$slots, "prepend")],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
         key: 0,
@@ -197,8 +212,18 @@ effect: "light",
             /* TEXT */
-          )) : (openBlock(), createElementBlock(
+          )) : _ctx.mask ? (openBlock(), createElementBlock("span", _hoisted_4, [createElementVNode(
             "span",
-            _hoisted_4,
-            toDisplayString(_ctx.displayOnlyContent || _ctx.state.nativeInputValue),
+            _hoisted_5,
+            toDisplayString(_ctx.state.displayedMaskValue),
             1
             /* TEXT */
+          ), (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
+            onClick: _cache[0] || (_cache[0] = function($event) {
+              return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
+            })
+          }))])) : (openBlock(), createElementBlock(
+            "span",
+            _hoisted_6,
+            toDisplayString(_ctx.state.displayOnlyText),
+            1
+            /* TEXT */
           ))];
@@ -211,5 +236,6 @@ }),
         ref: "input",
-        name: _ctx.name
+        name: _ctx.name,
+        "data-tag": "tiny-input-inner"
       }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^onw+", "id"]), {
-        class: "tiny-input__inner",
+        class: ["tiny-input__inner", _ctx.mask && _ctx.state.inputDisabled && !_ctx.state.maskValueVisible && "tiny-input__mask"],
         tabindex: _ctx.tabindex,
@@ -221,34 +247,34 @@ type: _ctx.showPassword ? _ctx.state.passwordVisible ? "text" : "password" : _ctx.type,
         autocomplete: _ctx.autocomplete,
-        onCompositionstart: _cache[0] || (_cache[0] = function() {
-          return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
+        onCompositionend: _cache[1] || (_cache[1] = function() {
+          return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
         }),
-        onCompositionupdate: _cache[1] || (_cache[1] = function() {
+        onCompositionupdate: _cache[2] || (_cache[2] = function() {
           return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
         }),
-        onCompositionend: _cache[2] || (_cache[2] = function() {
-          return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
+        onCompositionstart: _cache[3] || (_cache[3] = function() {
+          return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
         }),
-        onInput: _cache[3] || (_cache[3] = function() {
-          return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
+        onBlur: _cache[4] || (_cache[4] = function() {
+          return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
         }),
-        onFocus: _cache[4] || (_cache[4] = function() {
+        onFocus: _cache[5] || (_cache[5] = function() {
           return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
         }),
-        onBlur: _cache[5] || (_cache[5] = function() {
-          return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
+        onInput: _cache[6] || (_cache[6] = function() {
+          return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
         }),
-        onChange: _cache[6] || (_cache[6] = function() {
+        onChange: _cache[7] || (_cache[7] = function() {
           return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
         }),
         "aria-label": _ctx.label,
-        onKeyup: _cache[7] || (_cache[7] = function($event) {
+        onKeyup: _cache[8] || (_cache[8] = function($event) {
           return _ctx.$emit("keyup", $event);
         }),
-        onKeydown: _cache[8] || (_cache[8] = function($event) {
+        onKeydown: _cache[9] || (_cache[9] = function($event) {
           return _ctx.$emit("keydown", $event);
         }),
-        onPaste: _cache[9] || (_cache[9] = function($event) {
+        onPaste: _cache[10] || (_cache[10] = function($event) {
           return _ctx.$emit("paste", $event);
         })
-      }), null, 16, _hoisted_5)) : createCommentVNode("v-if", true)]), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
+      }), null, 16, _hoisted_7)) : createCommentVNode("v-if", true)]), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
         key: 1,
@@ -261,3 +287,3 @@ name: _ctx.name,
         "span",
-        _hoisted_6,
+        _hoisted_8,
         [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
@@ -269,59 +295,83 @@ key: 0,
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), !_ctx.state.isDisplayOnly && _ctx.getSuffixVisible() ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(Transition, {
+      )) : createCommentVNode("v-if", true), createElementVNode("div", null, [createVNode(Transition, {
         name: "tiny-transition-icon-out-in"
       }, {
         default: withCtx(function() {
-          return [_ctx.getSuffixVisible() ? (openBlock(), createElementBlock("span", _hoisted_8, [createElementVNode("span", _hoisted_9, [_ctx.frontClearIcon && _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
-            key: 0,
-            class: "tiny-svg-size tiny-input__icon tiny-input__clear",
-            onMousedown: _cache[10] || (_cache[10] = withModifiers(function() {
-            }, ["prevent"])),
-            onClick: _ctx.clear
-          }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), !_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
-            Fragment,
-            {
-              key: 1
-            },
-            [renderSlot(_ctx.$slots, "suffix"), _ctx.suffixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon), {
-              key: 0,
-              class: "tiny-svg-size tiny-input__icon"
-            })) : createCommentVNode("v-if", true)],
-            64
-            /* STABLE_FRAGMENT */
-          )) : createCommentVNode("v-if", true), !_ctx.frontClearIcon && _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
-            key: 2,
-            class: "tiny-svg-size tiny-input__icon tiny-input__clear",
-            onMousedown: _cache[11] || (_cache[11] = withModifiers(function() {
-            }, ["prevent"])),
-            onClick: _ctx.clear
-          }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.showPassword ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose"), {
-            key: 3,
-            class: "tiny-svg-size tiny-input__icon",
-            onClick: _ctx.handlePasswordVisible
-          }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_10, [createElementVNode("span", _hoisted_11, [createElementVNode(
+          return [!_ctx.state.isDisplayOnly && _ctx.getSuffixVisible() ? (openBlock(), createElementBlock(
             "span",
-            _hoisted_12,
-            toDisplayString(_ctx.state.showWordLimit ? "" + _ctx.state.textLength : ""),
-            1
-            /* TEXT */
-          ), createElementVNode(
-            "span",
-            _hoisted_13,
-            toDisplayString(_ctx.state.showWordLimit ? "/" + _ctx.state.upperLimit : _ctx.state.textLength),
-            1
-            /* TEXT */
-          )])])) : createCommentVNode("v-if", true)]), _ctx.state.validateState ? (openBlock(), createElementBlock(
-            "i",
-            {
+            _hoisted_9,
+            [createElementVNode("span", _hoisted_10, [_ctx.frontClearIcon && _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
               key: 0,
-              class: normalizeClass(["tiny-input__icon", ["tiny-input__validateIcon", _ctx.validateIcon]])
-            },
-            null,
-            2
-            /* CLASS */
-          )) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)];
+              class: "tiny-svg-size tiny-input__icon tiny-input__clear",
+              onMousedown: _cache[11] || (_cache[11] = withModifiers(function() {
+              }, ["prevent"])),
+              onClick: _ctx.clear
+            }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), !_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
+              Fragment,
+              {
+                key: 1
+              },
+              [renderSlot(_ctx.$slots, "suffix"), _ctx.suffixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon), {
+                key: 0,
+                class: "tiny-svg-size tiny-input__icon"
+              })) : createCommentVNode("v-if", true)],
+              64
+              /* STABLE_FRAGMENT */
+            )) : createCommentVNode("v-if", true), !_ctx.frontClearIcon && _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
+              key: 2,
+              class: "tiny-svg-size tiny-input__icon tiny-input__clear",
+              onMousedown: _cache[12] || (_cache[12] = withModifiers(function() {
+              }, ["prevent"])),
+              onClick: _ctx.clear
+            }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.showPassword ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose"), {
+              key: 3,
+              class: "tiny-svg-size tiny-input__icon",
+              onClick: _ctx.handlePasswordVisible
+            }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.mask && _ctx.state.inputDisabled ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
+              key: 4,
+              class: "tiny-svg-size tiny-input__icon",
+              onClick: _cache[13] || (_cache[13] = function($event) {
+                return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
+              })
+            })) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_11, [createElementVNode("span", _hoisted_12, [createElementVNode(
+              "span",
+              _hoisted_13,
+              toDisplayString(_ctx.state.showWordLimit ? "" + _ctx.state.textLength : ""),
+              1
+              /* TEXT */
+            ), createElementVNode(
+              "span",
+              _hoisted_14,
+              toDisplayString(_ctx.state.showWordLimit ? "/" + _ctx.state.upperLimit : _ctx.state.textLength),
+              1
+              /* TEXT */
+            )])])) : createCommentVNode("v-if", true)]), _ctx.state.validateState ? (openBlock(), createElementBlock(
+              "i",
+              {
+                key: 0,
+                class: normalizeClass(["tiny-input__icon", ["tiny-input__validateIcon", _ctx.validateIcon]])
+              },
+              null,
+              2
+              /* CLASS */
+            )) : createCommentVNode("v-if", true)],
+            512
+            /* NEED_PATCH */
+          )) : createCommentVNode("v-if", true)];
         }),
         _: 3
         /* FORWARDED */
-      })])) : createCommentVNode("v-if", true), _ctx.slots.append ? (openBlock(), createElementBlock("div", _hoisted_14, [renderSlot(_ctx.$slots, "append")])) : createCommentVNode("v-if", true), _ctx.slots.panel ? (openBlock(), createElementBlock("div", _hoisted_15, [renderSlot(_ctx.$slots, "panel")])) : createCommentVNode("v-if", true)],
+      })]), _ctx.slots.append ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_15,
+        [renderSlot(_ctx.$slots, "append")],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true), _ctx.slots.panel ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_16,
+        [renderSlot(_ctx.$slots, "panel")],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true)],
       64
@@ -333,3 +383,3 @@ /* STABLE_FRAGMENT */
         key: 1,
-        class: normalizeClass([_ctx.autosize ? "tiny-textarea-autosize-display-only" : "tiny-textarea-display-only"])
+        class: normalizeClass([_ctx.autosize ? "tiny-textarea-autosize-display-only" : "tiny-textarea-display-only", _ctx.hoverExpand && "tiny-textarea__inner-con"])
       },
@@ -341,3 +391,3 @@ [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
         placement: "top",
-        onMouseenter: _cache[12] || (_cache[12] = function($event) {
+        onMouseenter: _cache[14] || (_cache[14] = function($event) {
           return _ctx.handleEnterDisplayOnlyContent($event, "textarea");
@@ -349,4 +399,4 @@ })
             "span",
-            _hoisted_16,
-            toDisplayString(_ctx.displayOnlyContent || _ctx.state.nativeInputValue),
+            _hoisted_17,
+            toDisplayString(_ctx.state.displayOnlyText),
             1
@@ -362,13 +412,13 @@ /* TEXT */
         tabindex: _ctx.tabindex,
-        class: "tiny-textarea__inner",
-        onCompositionstart: _cache[13] || (_cache[13] = function() {
+        class: ["tiny-textarea__inner", _ctx.hoverExpand && !_ctx.state.enteredTextarea && "tiny-textarea__fix-height"],
+        onCompositionstart: _cache[15] || (_cache[15] = function() {
           return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
         }),
-        onCompositionupdate: _cache[14] || (_cache[14] = function() {
+        onCompositionupdate: _cache[16] || (_cache[16] = function() {
           return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
         }),
-        onCompositionend: _cache[15] || (_cache[15] = function() {
+        onCompositionend: _cache[17] || (_cache[17] = function() {
           return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
         }),
-        onInput: _cache[16] || (_cache[16] = function() {
+        onInput: _cache[18] || (_cache[18] = function() {
           return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
@@ -381,18 +431,33 @@ }),
         style: _ctx.state.textareaStyle,
-        onFocus: _cache[17] || (_cache[17] = function() {
+        onFocus: _cache[19] || (_cache[19] = function() {
           return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
         }),
-        onBlur: _cache[18] || (_cache[18] = function() {
+        onBlur: _cache[20] || (_cache[20] = function() {
           return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
         }),
-        onChange: _cache[19] || (_cache[19] = function() {
+        onChange: _cache[21] || (_cache[21] = function() {
           return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
         }),
-        "aria-label": _ctx.label
-      }), "\n      ", 16, _hoisted_17)],
+        onMouseenter: _cache[22] || (_cache[22] = function($event) {
+          return _ctx.handleEnterTextarea($event);
+        }),
+        onMouseleave: _cache[23] || (_cache[23] = function($event) {
+          return _ctx.handleLeaveTextarea($event);
+        }),
+        "aria-label": _ctx.label,
+        onKeyup: _cache[24] || (_cache[24] = function($event) {
+          return _ctx.$emit("keyup", $event);
+        }),
+        onKeydown: _cache[25] || (_cache[25] = function($event) {
+          return _ctx.$emit("keydown", $event);
+        }),
+        onPaste: _cache[26] || (_cache[26] = function($event) {
+          return _ctx.$emit("paste", $event);
+        })
+      }), "\n      ", 16, _hoisted_18)],
       2
       /* CLASS */
-    )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", _hoisted_18, [createElementVNode("span", _hoisted_19, [createElementVNode(
+    )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", _hoisted_19, [createElementVNode("span", _hoisted_20, [createElementVNode(
       "span",
-      _hoisted_20,
+      _hoisted_21,
       toDisplayString(_ctx.state.showWordLimit ? "" + _ctx.state.textLength : ""),
@@ -403,3 +468,3 @@ 1
       "span",
-      _hoisted_21,
+      _hoisted_22,
       toDisplayString(_ctx.state.showWordLimit ? "/" + _ctx.state.upperLimit : _ctx.state.textLength),
@@ -406,0 +471,0 @@ 1

package.json

 {
   "name": "@opentiny/vue-input",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "",
@@ -10,7 +10,9 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-action-sheet": "~3.13.0",
-    "@opentiny/vue-common": "~3.13.0",
-    "@opentiny/vue-icon": "~3.13.0",
-    "@opentiny/vue-tooltip": "~3.13.0",
-    "@opentiny/vue-renderless": "~3.13.0"
+    "@opentiny/vue-action-sheet": "~3.14.0",
+    "@opentiny/vue-common": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-tooltip": "~3.14.0",
+    "@opentiny/vue-renderless": "~3.14.0",
+    "@opentiny/vue-theme-mobile": "~3.14.0",
+    "@opentiny/vue-theme": "~3.14.0"
   },
@@ -17,0 +19,0 @@ "license": "MIT",

src/index.d.ts

@@ -548,7 +548,6 @@ /**
     customClass: string;
-    vertical: boolean;
-    textAlign: string;
     readonly: boolean;
     hoverExpand: boolean;
     memorySpace: number;
+    vertical: boolean;
     selectMenu: {
@@ -572,3 +571,4 @@ id: string;
     showEmptyValue: boolean;
+    textAlign: string;
 }, {}>;
 export default _default;

src/mobile-first.vue.d.ts

@@ -19,2 +19,3 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     suffixIcon?: any;
+    mask?: any;
     customClass?: any;
@@ -33,3 +34,4 @@ resize?: any;
     displayOnlyContent?: any;
-}>, any, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("update:modelValue" | "click" | "change" | "keydown" | "blur" | "focus" | "keyup" | "mouseenter" | "mouseleave" | "paste" | "clear")[], "update:modelValue" | "click" | "change" | "keydown" | "blur" | "focus" | "keyup" | "mouseenter" | "mouseleave" | "paste" | "clear", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+    showEmptyValue?: any;
+}>, any, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("input" | "change" | "update:modelValue" | "click" | "mouseenter" | "mouseleave" | "focus" | "keydown" | "clear" | "blur" | "keyup" | "paste")[], "input" | "change" | "update:modelValue" | "click" | "mouseenter" | "mouseleave" | "focus" | "keydown" | "clear" | "blur" | "keyup" | "paste", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     type?: any;
@@ -52,2 +54,3 @@ form?: any;
     suffixIcon?: any;
+    mask?: any;
     customClass?: any;
@@ -66,2 +69,3 @@ resize?: any;
     displayOnlyContent?: any;
+    showEmptyValue?: any;
 }>>> & {
@@ -72,2 +76,3 @@ onPaste?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
@@ -98,2 +103,3 @@ onKeyup?: ((...args: any[]) => any) | undefined;
     readonly suffixIcon?: any;
+    readonly mask?: any;
     readonly customClass?: any;
@@ -112,3 +118,4 @@ readonly resize?: any;
     readonly displayOnlyContent?: any;
+    readonly showEmptyValue?: any;
 }, {}>;
 export default _default;

src/mobile.vue.d.ts

@@ -21,3 +21,2 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     resize?: any;
-    textAlign?: any;
     readonly?: any;
@@ -35,2 +34,3 @@ prefixIcon?: any;
     validateEvent?: any;
+    textAlign?: any;
     labelWidth?: any;
@@ -45,3 +45,3 @@ }>, {
     gcls: (key: any) => any;
-}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("update:modelValue" | "change" | "keydown" | "blur" | "focus" | "keyup" | "mouseenter" | "mouseleave" | "paste" | "clear")[], "update:modelValue" | "change" | "keydown" | "blur" | "focus" | "keyup" | "mouseenter" | "mouseleave" | "paste" | "clear", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("input" | "change" | "update:modelValue" | "mouseenter" | "mouseleave" | "focus" | "keydown" | "clear" | "blur" | "keyup" | "paste")[], "input" | "change" | "update:modelValue" | "mouseenter" | "mouseleave" | "focus" | "keydown" | "clear" | "blur" | "keyup" | "paste", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     type?: any;
@@ -66,3 +66,2 @@ ellipsis?: any;
     resize?: any;
-    textAlign?: any;
     readonly?: any;
@@ -80,2 +79,3 @@ prefixIcon?: any;
     validateEvent?: any;
+    textAlign?: any;
     labelWidth?: any;
@@ -87,2 +87,3 @@ }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
@@ -114,3 +115,2 @@ onKeyup?: ((...args: any[]) => any) | undefined;
     readonly resize?: any;
-    readonly textAlign?: any;
     readonly readonly?: any;
@@ -128,4 +128,5 @@ readonly prefixIcon?: any;
     readonly validateEvent?: any;
+    readonly textAlign?: any;
     readonly labelWidth?: any;
 }, {}>;
 export default _default;

src/pc.vue.d.ts

@@ -19,4 +19,6 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     suffixIcon?: any;
+    mask?: any;
     resize?: any;
     readonly?: any;
+    hoverExpand?: any;
     prefixIcon?: any;
@@ -34,2 +36,3 @@ memorySpace?: any;
     frontClearIcon?: any;
+    showEmptyValue?: any;
 }>, {
@@ -43,3 +46,3 @@ t: (this: any, path: any, options?: any) => any;
     gcls: (key: any) => any;
-}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("input" | "update:modelValue" | "click" | "change" | "keydown" | "blur" | "focus" | "keyup" | "mouseenter" | "mouseleave" | "paste" | "clear")[], "input" | "update:modelValue" | "click" | "change" | "keydown" | "blur" | "focus" | "keyup" | "mouseenter" | "mouseleave" | "paste" | "clear", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+}, any, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("input" | "change" | "update:modelValue" | "click" | "mouseenter" | "mouseleave" | "focus" | "keydown" | "clear" | "blur" | "keyup" | "paste")[], "input" | "change" | "update:modelValue" | "click" | "mouseenter" | "mouseleave" | "focus" | "keydown" | "clear" | "blur" | "keyup" | "paste", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     type?: any;
@@ -62,4 +65,6 @@ form?: any;
     suffixIcon?: any;
+    mask?: any;
     resize?: any;
     readonly?: any;
+    hoverExpand?: any;
     prefixIcon?: any;
@@ -77,2 +82,3 @@ memorySpace?: any;
     frontClearIcon?: any;
+    showEmptyValue?: any;
 }>>> & {
@@ -109,4 +115,6 @@ onPaste?: ((...args: any[]) => any) | undefined;
     readonly suffixIcon?: any;
+    readonly mask?: any;
     readonly resize?: any;
     readonly readonly?: any;
+    readonly hoverExpand?: any;
     readonly prefixIcon?: any;
@@ -124,3 +132,4 @@ readonly memorySpace?: any;
     readonly frontClearIcon?: any;
+    readonly showEmptyValue?: any;
 }, {}>;
 export default _default;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96004

increased by6.53%

Lines of code

2523

increased by5.04%

Worsened metrics

Dependency count

7

increased by40%

Dependency changes

• + Added@opentiny/vue-theme@~3.14.0

• + Added@opentiny/vue-theme-mobile@~3.14.0

• + Added@opentiny/vue-action-sheet@3.14.0(transitive)

• + Added@opentiny/vue-button@3.14.0(transitive)

• + Added@opentiny/vue-common@3.14.0(transitive)

• + Added@opentiny/vue-drawer@3.14.0(transitive)

• + Added@opentiny/vue-icon@3.14.0(transitive)

• + Added@opentiny/vue-locale@3.14.0(transitive)

• + Added@opentiny/vue-renderless@3.14.1(transitive)

• + Added@opentiny/vue-theme@3.14.1(transitive)

• + Added@opentiny/vue-theme-mobile@3.14.2(transitive)

• + Added@opentiny/vue-tooltip@3.14.0(transitive)

• - Removed@opentiny/vue-action-sheet@3.13.0(transitive)

• - Removed@opentiny/vue-button@3.13.0(transitive)

• - Removed@opentiny/vue-common@3.13.1(transitive)

• - Removed@opentiny/vue-drawer@3.13.0(transitive)

• - Removed@opentiny/vue-icon@3.13.0(transitive)

• - Removed@opentiny/vue-locale@3.13.0(transitive)

• - Removed@opentiny/vue-renderless@3.13.2(transitive)

• - Removed@opentiny/vue-theme@3.13.3(transitive)

• - Removed@opentiny/vue-theme-mobile@3.13.0(transitive)

• - Removed@opentiny/vue-tooltip@3.13.0(transitive)

• Updated@opentiny/vue-action-sheet@~3.14.0

• Updated@opentiny/vue-common@~3.14.0

• Updated@opentiny/vue-icon@~3.14.0

• Updated@opentiny/vue-renderless@~3.14.0

• Updated@opentiny/vue-tooltip@~3.14.0