@opentiny/vue-input - npm Package Compare versions

Comparing version 3.8.3 to 3.9.0

lib/index.js

@@ -168,3 +168,3 @@ function _extends() {
 });
-var version = "3.7.0";
+var version = "3.9.0";
 Input.model = {
@@ -171,0 +171,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -5,3 +5,4 @@ import { renderless, api } from "@opentiny/vue-renderless/input/vue";
 import { IconClose, IconError, IconEyeopen, IconEyeclose } from "@opentiny/vue-icon";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, createCommentVNode, renderSlot, mergeProps, createBlock, resolveDynamicComponent, createElementVNode, withModifiers, toDisplayString } from "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";
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
@@ -60,5 +61,6 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
     IconEyeclose: IconEyeclose(),
-    TinyTallStorage
+    TinyTallStorage,
+    TinyTooltip: Tooltip
   },
-  props: [].concat(props, ["name", "size", "form", "type", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit", "inputClass"]),
+  props: [].concat(props, ["name", "size", "form", "type", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit", "inputClass", "displayOnly", "displayOnlyContent"]),
   setup: function setup(props2, context) {
@@ -78,34 +80,51 @@ return _setup({
 };
-var _hoisted_2 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_2 = {
+  class: "relative"
+};
 var _hoisted_3 = {
-  key: 3,
+  key: 0,
+  class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+};
+var _hoisted_4 = {
+  key: 1,
+  class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+};
+var _hoisted_5 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_6 = {
+  key: 2,
   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_4 = {
-  key: 4,
+var _hoisted_7 = {
+  key: 3,
   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"
 };
-var _hoisted_5 = {
+var _hoisted_8 = {
   class: "pointer-events-auto text-xs flex justify-start items-center"
 };
-var _hoisted_6 = {
+var _hoisted_9 = {
   key: 4,
   class: "h-full inline-flex items-center text-xs text-color-text-placeholder"
 };
-var _hoisted_7 = {
+var _hoisted_10 = {
   class: "bg-white leading-none inline-block"
 };
-var _hoisted_8 = {
-  key: 5,
+var _hoisted_11 = {
+  key: 4,
   ref: "append",
   class: "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"
 };
-var _hoisted_9 = {
-  key: 6,
+var _hoisted_12 = {
+  key: 5,
   ref: "panel"
 };
-var _hoisted_10 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
-var _hoisted_11 = {
+var _hoisted_13 = {
+  key: 1
+};
+var _hoisted_14 = {
+  class: "max-w-full text-ellipsis break-words line-clamp-5"
+};
+var _hoisted_15 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_16 = {
   key: 2,
@@ -115,2 +134,3 @@ class: "bg-white text-color-text-placeholder text-xs absolute bottom-1 right-3"
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
   var _component_tiny_tall_storage = resolveComponent("tiny-tall-storage");
@@ -142,3 +162,3 @@ var _component_icon_error = resolveComponent("icon-error");
       },
-      [createCommentVNode(" 前置元素 "), _ctx.slots.prepend ? (openBlock(), createElementBlock(
+      [_ctx.slots.prepend && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
         "div",
@@ -149,3 +169,28 @@ _hoisted_1,
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
+      )) : 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({
         key: 1,
@@ -155,3 +200,3 @@ ref: "input",
       }, _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-white disabled:cursor-not-allowed disabled:text-color-text-disabled disabled:bg-color-bg-2 h-7 leading-7 py-0 outline-0 transition-colors duration-200 ease-in-out ", _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-sm", _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.inputClass),
+        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-white disabled:cursor-not-allowed disabled:text-color-text-disabled disabled:bg-color-bg-2 h-7 leading-7 py-0 outline-0 transition-colors duration-200 ease-in-out ", _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-sm", _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.inputClass),
         tabindex: _ctx.tabindex,
@@ -194,4 +239,4 @@ type: _ctx.showPassword ? _ctx.state.passwordVisible ? "text" : "password" : _ctx.type,
         })
-      }), null, 16, _hoisted_2)) : createCommentVNode("v-if", true), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
-        key: 2,
+      }), null, 16, _hoisted_5)) : createCommentVNode("v-if", true)]), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
+        key: 1,
         name: _ctx.name,
@@ -201,5 +246,5 @@ "localstorage-data": _ctx.storageData,
         onSelected: _ctx.selectedMemory
-      }, null, 8, ["name", "localstorage-data", "is-memory-storage", "onSelected"])) : createCommentVNode("v-if", true), createCommentVNode(" 前置内容 "), _ctx.slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock(
+      }, null, 8, ["name", "localstorage-data", "is-memory-storage", "onSelected"])) : createCommentVNode("v-if", true), (_ctx.slots.prefix || _ctx.prefixIcon) && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_3,
+        _hoisted_6,
         [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
@@ -211,6 +256,6 @@ key: 0,
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), createCommentVNode(" 后置内容 "), _ctx.getSuffixVisible() ? (openBlock(), createElementBlock(
+      )) : createCommentVNode("v-if", true), !_ctx.state.isDisplayOnly && _ctx.getSuffixVisible() ? (openBlock(), createElementBlock(
         "span",
-        _hoisted_4,
-        [createElementVNode("span", _hoisted_5, [!_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
+        _hoisted_7,
+        [createElementVNode("span", _hoisted_8, [!_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
           Fragment,
@@ -242,5 +287,5 @@ {
           onClick: _ctx.handlePasswordVisible
-        }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_6, [createElementVNode(
+        }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_9, [createElementVNode(
           "span",
-          _hoisted_7,
+          _hoisted_10,
           toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength),
@@ -261,11 +306,11 @@ 1
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), createCommentVNode(" 后置元素 "), _ctx.slots.append ? (openBlock(), createElementBlock(
+      )) : createCommentVNode("v-if", true), _ctx.slots.append && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
         "div",
-        _hoisted_8,
+        _hoisted_11,
         [renderSlot(_ctx.$slots, "append")],
         512
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), createCommentVNode(" Panel弹窗（例如时间组件的非范围选择窗口） "), _ctx.slots.panel ? (openBlock(), createElementBlock(
+      )) : createCommentVNode("v-if", true), _ctx.slots.panel && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
         "div",
-        _hoisted_9,
+        _hoisted_12,
         [renderSlot(_ctx.$slots, "panel")],
@@ -277,8 +322,25 @@ 512
       /* STABLE_FRAGMENT */
-    )) : (openBlock(), createElementBlock("textarea", mergeProps({
-      key: 1,
+    )) : (openBlock(), createElementBlock("span", _hoisted_13, [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
+      key: 0,
+      effect: "light",
+      content: _ctx.state.displayOnlyTooltip,
+      placement: "top",
+      onMouseenter: _ctx.handleEnterDisplayOnlyContent
+    }, {
+      default: withCtx(function() {
+        return [createElementVNode(
+          "span",
+          _hoisted_14,
+          toDisplayString(_ctx.displayOnlyContent || _ctx.state.nativeInputValue),
+          1
+          /* TEXT */
+        )];
+      }),
+      _: 1
+      /* STABLE */
+    }, 8, ["content", "onMouseenter"])) : createCommentVNode("v-if", true), createElementVNode("textarea", mergeProps({
       ref: "textarea"
     }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]"]), {
       tabindex: _ctx.tabindex,
-      class: ["block 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-2 leading-normal", [_ctx.readonly ? "sm:border-0 px-0 py-0" : "sm:border px-3 py-2"]],
+      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-2 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() {
@@ -311,5 +373,5 @@ return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
       "aria-label": _ctx.label
-    }), "\n    ", 16, _hoisted_10)), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock(
+    }), "\n      ", 16, _hoisted_15)])), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock(
       "span",
-      _hoisted_11,
+      _hoisted_16,
       toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength),
@@ -316,0 +378,0 @@ 1

lib/mobile.js

@@ -6,3 +6,3 @@ import { renderless, api } from "@opentiny/vue-renderless/input/vue";
 import "@opentiny/vue-theme-mobile/input/index.css";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createCommentVNode, renderSlot, mergeProps, createBlock, resolveDynamicComponent, createElementVNode, withModifiers, toDisplayString, normalizeStyle, createVNode } from "vue";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderSlot, createCommentVNode, mergeProps, createBlock, resolveDynamicComponent, createElementVNode, withModifiers, toDisplayString, normalizeStyle, createVNode } from "vue";
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
@@ -153,3 +153,3 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
       },
-      [createCommentVNode(" 前置元素 "), _ctx.slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "prepend")])) : createCommentVNode("v-if", true), _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
+      [_ctx.slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "prepend")])) : createCommentVNode("v-if", true), _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
         key: 1,
@@ -187,6 +187,6 @@ ref: "input",
         "aria-label": _ctx.label
-      }), null, 16, _hoisted_2)) : createCommentVNode("v-if", true), createCommentVNode(" 前置内容 "), _ctx.slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
+      }), null, 16, _hoisted_2)) : createCommentVNode("v-if", true), _ctx.slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
         key: 0,
         class: "tiny-mobile-input__icon"
-      })) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), createCommentVNode(" 后置内容 "), _ctx.getSuffixVisible() ? (openBlock(), createElementBlock("span", _hoisted_4, [createElementVNode("span", _hoisted_5, [!_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
+      })) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), _ctx.getSuffixVisible() ? (openBlock(), createElementBlock("span", _hoisted_4, [createElementVNode("span", _hoisted_5, [!_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
         Fragment,
@@ -227,3 +227,3 @@ {
         /* CLASS */
-      )) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), createCommentVNode(" 后置元素 "), _ctx.slots.append ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "append")])) : createCommentVNode("v-if", true)],
+      )) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), _ctx.slots.append ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "append")])) : createCommentVNode("v-if", true)],
       64
@@ -230,0 +230,0 @@ /* STABLE_FRAGMENT */

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 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, createCommentVNode, renderSlot, mergeProps, createBlock, resolveDynamicComponent, createVNode, Transition, withCtx, createElementVNode, withModifiers, toDisplayString } from "vue";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderSlot, createCommentVNode, createElementVNode, createBlock, withCtx, toDisplayString, mergeProps, resolveDynamicComponent, createVNode, Transition, withModifiers } from "vue";
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
@@ -60,5 +61,6 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
     IconEyeclose: iconEyeclose(),
-    TinyTallStorage
+    TinyTallStorage,
+    TinyTooltip: Tooltip
   },
-  props: [].concat(props, ["name", "size", "form", "type", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit"]),
+  props: [].concat(props, ["name", "size", "form", "type", "label", "modelValue", "height", "resize", "counter", "autosize", "disabled", "readonly", "tabindex", "clearable", "suffixIcon", "prefixIcon", "autocomplete", "showPassword", "validateEvent", "showWordLimit", "displayOnly", "displayOnlyContent", "frontClearIcon"]),
   setup: function setup(props2, context) {
@@ -77,50 +79,69 @@ return _setup({
 };
-var _hoisted_2 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_2 = {
+  class: "tiny-input-display-only"
+};
 var _hoisted_3 = {
-  key: 3,
-  class: "tiny-input__prefix"
+  key: 0,
+  class: "tiny-input-display-only__content"
 };
 var _hoisted_4 = {
+  key: 1,
+  class: "tiny-input-display-only__content"
+};
+var _hoisted_5 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_6 = {
+  key: 2,
+  class: "tiny-input__prefix",
+  ref: "prefix"
+};
+var _hoisted_7 = {
+  key: 3
+};
+var _hoisted_8 = {
   key: 0,
   class: "tiny-input__suffix"
 };
-var _hoisted_5 = {
+var _hoisted_9 = {
   class: "tiny-input__suffix-inner"
 };
-var _hoisted_6 = {
-  key: 3,
+var _hoisted_10 = {
+  key: 4,
   class: "tiny-input__count"
 };
-var _hoisted_7 = {
+var _hoisted_11 = {
   class: "tiny-input__count-inner"
 };
-var _hoisted_8 = {
+var _hoisted_12 = {
   class: "tiny-input__count-text-length"
 };
-var _hoisted_9 = {
+var _hoisted_13 = {
   class: "tiny-input__count-upper-limit"
 };
-var _hoisted_10 = {
+var _hoisted_14 = {
   key: 4,
   class: "tiny-input-group__append"
 };
-var _hoisted_11 = {
+var _hoisted_15 = {
   key: 5,
   class: "tiny-input-group__panel"
 };
-var _hoisted_12 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
-var _hoisted_13 = {
+var _hoisted_16 = {
+  class: "tiny-textarea-display-only__content"
+};
+var _hoisted_17 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
+var _hoisted_18 = {
   key: 2,
   class: "tiny-input__count"
 };
-var _hoisted_14 = {
+var _hoisted_19 = {
   class: "tiny-input__count-inner"
 };
-var _hoisted_15 = {
+var _hoisted_20 = {
   class: "tiny-input__count-text-length"
 };
-var _hoisted_16 = {
+var _hoisted_21 = {
   class: "tiny-input__count-upper-limit"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
   var _component_tiny_tall_storage = resolveComponent("tiny-tall-storage");
@@ -138,14 +159,15 @@ var _component_icon_close = resolveComponent("icon-close");
         "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,
+        "is-display-only": _ctx.state.isDisplayOnly
       }]),
       style: normalizeStyle(_ctx.$attrs.style),
-      onMouseenter: _cache[18] || (_cache[18] = function($event) {
+      onMouseenter: _cache[22] || (_cache[22] = function($event) {
         _ctx.state.hovering = true;
         _ctx.$emit("mouseenter", $event);
       }),
-      onMouseleave: _cache[19] || (_cache[19] = function($event) {
+      onMouseleave: _cache[23] || (_cache[23] = function($event) {
         _ctx.state.hovering = false;
         _ctx.$emit("mouseleave", $event);
       }),
-      onClick: _cache[20] || (_cache[20] = function($event) {
+      onClick: _cache[24] || (_cache[24] = function($event) {
         return _ctx.$emit("click", $event);
@@ -159,3 +181,28 @@ })
       },
-      [createCommentVNode(" 前置元素 "), _ctx.slots.prepend ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "prepend")])) : createCommentVNode("v-if", true), _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
+      [_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, {
+        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({
         key: 1,
@@ -203,4 +250,4 @@ ref: "input",
         })
-      }), null, 16, _hoisted_2)) : createCommentVNode("v-if", true), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
-        key: 2,
+      }), null, 16, _hoisted_5)) : createCommentVNode("v-if", true)]), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
+        key: 1,
         name: _ctx.name,
@@ -210,13 +257,25 @@ "localstorage-data": _ctx.storageData,
         onSelected: _ctx.selectedMemory
-      }, null, 8, ["name", "localstorage-data", "is-memory-storage", "onSelected"])) : createCommentVNode("v-if", true), createCommentVNode(" 前置内容 "), _ctx.slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
-        key: 0,
-        class: "tiny-svg-size tiny-input__icon"
-      })) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), createCommentVNode(" 后置内容 "), createVNode(Transition, {
+      }, null, 8, ["name", "localstorage-data", "is-memory-storage", "onSelected"])) : createCommentVNode("v-if", true), !_ctx.state.isDisplayOnly && (_ctx.slots.prefix || _ctx.prefixIcon) ? (openBlock(), createElementBlock(
+        "span",
+        _hoisted_6,
+        [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
+          key: 0,
+          class: "tiny-svg-size tiny-input__icon"
+        })) : createCommentVNode("v-if", true)],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true), !_ctx.state.isDisplayOnly && _ctx.getSuffixVisible() ? (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(Transition, {
         name: "tiny-transition-icon-out-in"
       }, {
         default: withCtx(function() {
-          return [_ctx.getSuffixVisible() ? (openBlock(), createElementBlock("span", _hoisted_4, [createElementVNode("span", _hoisted_5, [!_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
+          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: 0
+              key: 1
             },
@@ -229,15 +288,15 @@ [renderSlot(_ctx.$slots, "suffix"), _ctx.suffixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon), {
             /* STABLE_FRAGMENT */
-          )) : createCommentVNode("v-if", true), _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
-            key: 1,
+          )) : 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[10] || (_cache[10] = withModifiers(function() {
+            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: 2,
+            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_6, [createElementVNode("span", _hoisted_7, [createElementVNode(
+          }, null, 8, ["onClick"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_10, [createElementVNode("span", _hoisted_11, [createElementVNode(
             "span",
-            _hoisted_8,
+            _hoisted_12,
             toDisplayString(_ctx.state.showWordLimit ? "" + _ctx.state.textLength : ""),
@@ -248,3 +307,3 @@ 1
             "span",
-            _hoisted_9,
+            _hoisted_13,
             toDisplayString(_ctx.state.showWordLimit ? "/" + _ctx.state.upperLimit : _ctx.state.textLength),
@@ -266,41 +325,75 @@ 1
         /* FORWARDED */
-      }), createCommentVNode(" 后置元素 "), _ctx.slots.append ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "append")])) : createCommentVNode("v-if", true), createCommentVNode(" Panel弹窗（例如时间组件的非范围选择窗口） "), _ctx.slots.panel ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "panel")])) : createCommentVNode("v-if", true)],
+      })])) : 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)],
       64
       /* STABLE_FRAGMENT */
-    )) : (openBlock(), createElementBlock("textarea", mergeProps({
-      key: 1,
-      ref: "textarea"
-    }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]"]), {
-      tabindex: _ctx.tabindex,
-      class: "tiny-textarea__inner",
-      onCompositionstart: _cache[11] || (_cache[11] = function() {
-        return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
-      }),
-      onCompositionupdate: _cache[12] || (_cache[12] = function() {
-        return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
-      }),
-      onCompositionend: _cache[13] || (_cache[13] = function() {
-        return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
-      }),
-      onInput: _cache[14] || (_cache[14] = function() {
-        return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
-      }),
-      disabled: _ctx.state.inputDisabled,
-      readonly: _ctx.readonly,
-      unselectable: _ctx.readonly ? "on" : "off",
-      autocomplete: _ctx.autocomplete,
-      style: _ctx.state.textareaStyle,
-      onFocus: _cache[15] || (_cache[15] = function() {
-        return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
-      }),
-      onBlur: _cache[16] || (_cache[16] = function() {
-        return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
-      }),
-      onChange: _cache[17] || (_cache[17] = function() {
-        return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
-      }),
-      "aria-label": _ctx.label
-    }), "\n    ", 16, _hoisted_12)), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", _hoisted_13, [createElementVNode("span", _hoisted_14, [createElementVNode(
+    )) : (openBlock(), createElementBlock(
       "span",
-      _hoisted_15,
+      {
+        key: 1,
+        class: normalizeClass([_ctx.autosize ? "tiny-textarea-autosize-display-only" : "tiny-textarea-display-only"])
+      },
+      [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
+        key: 0,
+        effect: "light",
+        content: _ctx.state.displayOnlyTooltip,
+        placement: "top",
+        onMouseenter: _cache[12] || (_cache[12] = function($event) {
+          return _ctx.handleEnterDisplayOnlyContent($event, "textarea");
+        })
+      }, {
+        default: withCtx(function() {
+          return [createElementVNode(
+            "span",
+            _hoisted_16,
+            toDisplayString(_ctx.displayOnlyContent || _ctx.state.nativeInputValue),
+            1
+            /* TEXT */
+          )];
+        }),
+        _: 1
+        /* STABLE */
+      }, 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: "tiny-textarea__inner",
+        onCompositionstart: _cache[13] || (_cache[13] = function() {
+          return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
+        }),
+        onCompositionupdate: _cache[14] || (_cache[14] = function() {
+          return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
+        }),
+        onCompositionend: _cache[15] || (_cache[15] = function() {
+          return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
+        }),
+        onInput: _cache[16] || (_cache[16] = function() {
+          return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
+        }),
+        disabled: _ctx.state.inputDisabled,
+        readonly: _ctx.readonly,
+        unselectable: _ctx.readonly ? "on" : "off",
+        autocomplete: _ctx.autocomplete,
+        style: _ctx.state.textareaStyle,
+        onFocus: _cache[17] || (_cache[17] = function() {
+          return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+        }),
+        onBlur: _cache[18] || (_cache[18] = function() {
+          return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
+        }),
+        onChange: _cache[19] || (_cache[19] = function() {
+          return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
+        }),
+        onDrop: _cache[20] || (_cache[20] = withModifiers(function() {
+          return _ctx.handleDrop && _ctx.handleDrop.apply(_ctx, arguments);
+        }, ["stop"])),
+        onDragstart: _cache[21] || (_cache[21] = withModifiers(function() {
+          return _ctx.handleDragStart && _ctx.handleDragStart.apply(_ctx, arguments);
+        }, ["stop"])),
+        "aria-label": _ctx.label
+      }), "\n      ", 16, _hoisted_17)],
+      2
+      /* CLASS */
+    )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock("span", _hoisted_18, [createElementVNode("span", _hoisted_19, [createElementVNode(
+      "span",
+      _hoisted_20,
       toDisplayString(_ctx.state.showWordLimit ? "" + _ctx.state.textLength : ""),
@@ -311,3 +404,3 @@ 1
       "span",
-      _hoisted_16,
+      _hoisted_21,
       toDisplayString(_ctx.state.showWordLimit ? "/" + _ctx.state.upperLimit : _ctx.state.textLength),
@@ -314,0 +407,0 @@ 1

lib/tall-storage.js

@@ -62,4 +62,3 @@ import { $prefix, setup as _setup } from "@opentiny/vue-common";
       renderless,
-      api,
-      mono: true
+      api
     });
@@ -66,0 +65,0 @@ }

package.json

 {
   "name": "@opentiny/vue-input",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "description": "",
@@ -9,6 +9,7 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-action-sheet": "~3.8.3",
-    "@opentiny/vue-common": "~3.8.3",
-    "@opentiny/vue-icon": "~3.8.3",
-    "@opentiny/vue-renderless": "~3.8.3"
+    "@opentiny/vue-action-sheet": "~3.9.0",
+    "@opentiny/vue-common": "~3.9.0",
+    "@opentiny/vue-icon": "~3.9.0",
+    "@opentiny/vue-tooltip": "~3.9.0",
+    "@opentiny/vue-renderless": "~3.9.0"
   },
@@ -15,0 +16,0 @@ "license": "MIT",

src/index.d.ts

@@ -0,1 +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 { type PropType } from '@opentiny/vue-common';
 declare const _default: import("@vue/runtime-core").DefineComponent<{
@@ -36,3 +48,3 @@ _constants: {
     prefixIcon: (ObjectConstructor | StringConstructor)[];
-    modelValue: (NumberConstructor | StringConstructor)[];
+    modelValue: PropType<string | number | null>;
     type: {
@@ -158,3 +170,3 @@ type: StringConstructor;
     prefixIcon: (ObjectConstructor | StringConstructor)[];
-    modelValue: (NumberConstructor | StringConstructor)[];
+    modelValue: PropType<string | number | null>;
     type: {
@@ -252,6 +264,6 @@ type: StringConstructor;
     clearable: boolean;
+    displayOnly: boolean;
     showTitle: boolean;
     vertical: boolean;
     validateEvent: boolean;
-    displayOnly: boolean;
     readonly: boolean;
@@ -258,0 +270,0 @@ selectMenu: unknown[];

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

75452

increased by8.57%

Lines of code

1845

increased by9.89%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@opentiny/vue-tooltip@~3.9.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@opentiny/vue-common@~3.9.0

• Updated@opentiny/vue-icon@~3.9.0

• Updated@opentiny/vue-renderless@~3.9.0