@opentinyvue/vue-input 2.22.0 → 3.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/index.js +1 -1
  2. package/lib/mobile-first.js +494 -344
  3. package/lib/pc.js +538 -365
  4. package/lib/tall-storage.js +73 -68
  5. package/package.json +7 -7
  6. package/src/index.d.ts +406 -2
  7. package/src/mobile-first.vue.d.ts +125 -1
  8. package/src/pc.vue.d.ts +137 -1
  9. package/src/tall-storage.vue.d.ts +18 -1
package/lib/mobile-first.js CHANGED
@@ -2,42 +2,46 @@ import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-rende
2
2
  import { defineComponent, $prefix, setup, props } from '@opentinyvue/vue-common';
3
3
  import { renderless, api } from '@opentinyvue/vue-renderless/tall-storage/vue';
4
4
  import '@opentinyvue/vue-theme/tall-storage/index.css';
5
+ import { openBlock, createElementBlock, createElementVNode, withKeys, Fragment, renderList, normalizeClass, toDisplayString, resolveComponent, normalizeStyle, renderSlot, createCommentVNode, createBlock, withCtx, resolveDynamicComponent, mergeProps, withModifiers, createVNode, createTextVNode } from 'vue';
5
6
  import { IconClose, IconError, IconEyeopen, IconEyeclose } from '@opentinyvue/vue-icon';
6
7
  import Tooltip from '@opentinyvue/vue-tooltip';
7
8
  import Button from '@opentinyvue/vue-button';
8
9
  import DialogBox from '@opentinyvue/vue-dialog-box';
9
10
 
10
- function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
11
- var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
12
- if (render) {
13
- options.render = render;
14
- options.staticRenderFns = staticRenderFns;
15
- options._compiled = true;
11
+ function _createForOfIteratorHelperLoose(r, e) {
12
+ var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
13
+ if (t) return (t = t.call(r)).next.bind(t);
14
+ if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
15
+ t && (r = t);
16
+ var o = 0;
17
+ return function() {
18
+ return o >= r.length ? { done: true } : { done: false, value: r[o++] };
19
+ };
16
20
  }
17
- var hook;
18
- if (injectStyles) {
19
- hook = injectStyles;
20
- }
21
- if (hook) {
22
- if (options.functional) {
23
- options._injectStyles = hook;
24
- var originalRender = options.render;
25
- options.render = function renderWithStyleInjection(h, context) {
26
- hook.call(context);
27
- return originalRender(h, context);
28
- };
29
- } else {
30
- var existing = options.beforeCreate;
31
- options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
32
- }
21
+ throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
22
+ }
23
+ function _unsupportedIterableToArray(r, a) {
24
+ if (r) {
25
+ if ("string" == typeof r) return _arrayLikeToArray(r, a);
26
+ var t = {}.toString.call(r).slice(8, -1);
27
+ return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
33
28
  }
34
- return {
35
- exports: scriptExports,
36
- options
37
- };
38
29
  }
30
+ function _arrayLikeToArray(r, a) {
31
+ (null == a || a > r.length) && (a = r.length);
32
+ for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
33
+ return n;
34
+ }
35
+ var _export_sfc = function _export_sfc2(sfc, props) {
36
+ var target = sfc.__vccOpts || sfc;
37
+ for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
38
+ var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
39
+ target[key] = val;
40
+ }
41
+ return target;
42
+ };
39
43
 
40
- var __vue2_script$1 = defineComponent({
44
+ var _sfc_main$1 = defineComponent({
41
45
  name: $prefix + "TallStorage",
42
46
  inheritAttrs: false,
43
47
  props: {
@@ -53,51 +57,52 @@ var __vue2_script$1 = defineComponent({
53
57
  });
54
58
  }
55
59
  });
56
- var render$1 = function render2() {
57
- var _vm = this;
58
- var _h = _vm.$createElement;
59
- var _c = _vm._self._c || _h;
60
- return _c("div", {
61
- staticClass: "tiny-tall-storage",
62
- on: {
63
- "mousedown": _vm.mousedown
64
- }
65
- }, [_c("div", {
66
- staticClass: "tiny-storage-list-style"
67
- }, [_c("ul", {
68
- staticClass: "tiny-storage-list",
69
- on: {
70
- "keydown": function keydown($event) {
71
- if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
72
- return _vm.keydownEvent.apply(null, arguments);
73
- }
74
- }
75
- }, _vm._l(_vm.localstorageData, function(item) {
76
- return _c("li", {
77
- key: item,
78
- staticClass: "tiny-storage-item",
79
- class: [_vm.state.hoverValue === item ? "item-hover" : ""],
80
- on: {
81
- "click": function click($event) {
82
- return _vm.selectItem(item);
83
- }
84
- }
85
- }, [_vm._v(" " + _vm._s(item) + " ")]);
86
- }), 0)])]);
60
+ var _hoisted_1$1 = {
61
+ class: "tiny-storage-list-style"
87
62
  };
88
- var staticRenderFns$1 = [];
89
- var __cssModules$1 = {};
90
- var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1);
91
- function __vue2_injectStyles$1(context) {
92
- for (var o in __cssModules$1) {
93
- this[o] = __cssModules$1[o];
94
- }
63
+ var _hoisted_2$1 = ["onClick"];
64
+ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
65
+ return openBlock(), createElementBlock(
66
+ "div",
67
+ {
68
+ class: "tiny-tall-storage",
69
+ onMousedown: _cache[1] || (_cache[1] = function() {
70
+ return _ctx.mousedown && _ctx.mousedown.apply(_ctx, arguments);
71
+ })
72
+ },
73
+ [createElementVNode("div", _hoisted_1$1, [createElementVNode(
74
+ "ul",
75
+ {
76
+ onKeydown: _cache[0] || (_cache[0] = withKeys(function() {
77
+ return _ctx.keydownEvent && _ctx.keydownEvent.apply(_ctx, arguments);
78
+ }, ["enter"])),
79
+ class: "tiny-storage-list"
80
+ },
81
+ [(openBlock(true), createElementBlock(
82
+ Fragment,
83
+ null,
84
+ renderList(_ctx.localstorageData, function(item) {
85
+ return openBlock(), createElementBlock("li", {
86
+ key: item,
87
+ class: normalizeClass(["tiny-storage-item", [_ctx.state.hoverValue === item ? "item-hover" : ""]]),
88
+ onClick: function onClick($event) {
89
+ return _ctx.selectItem(item);
90
+ }
91
+ }, toDisplayString(item), 11, _hoisted_2$1);
92
+ }),
93
+ 128
94
+ /* KEYED_FRAGMENT */
95
+ ))],
96
+ 32
97
+ /* NEED_HYDRATION */
98
+ )])],
99
+ 32
100
+ /* NEED_HYDRATION */
101
+ );
95
102
  }
96
- var tallStorage = /* @__PURE__ */ function() {
97
- return __component__$1.exports;
98
- }();
103
+ var tallStorage = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
99
104
 
100
- var __vue2_script = defineComponent({
105
+ var _sfc_main = defineComponent({
101
106
  inheritAttrs: false,
102
107
  emits: ["update:modelValue", "change", "clear", "focus", "blur", "keyup", "keydown", "paste", "mouseenter", "mouseleave", "click", "input"],
103
108
  components: {
@@ -120,284 +125,429 @@ var __vue2_script = defineComponent({
120
125
  });
121
126
  }
122
127
  });
123
- var render = function render2() {
124
- var _vm = this;
125
- var _h = _vm.$createElement;
126
- var _c = _vm._self._c || _h;
127
- return _c("div", {
128
- class: _vm.m("relative text-xs sm:text-sm", _vm.type !== "textarea" || _vm.slots.prepend || _vm.slots.append ? "inline-table" : "", _vm.type !== "textarea" ? "w-full" : "align-bottom", _vm.slots.prepend || _vm.slots.append ? "leading-normal border-separate border-spacing-0" : "", _vm.$attrs.class),
129
- style: _vm.$attrs.style,
130
- attrs: {
131
- "data-tag": "tiny-input"
132
- },
133
- on: {
134
- "mouseenter": function mouseenter($event) {
135
- _vm.state.hovering = true;
136
- _vm.$emit("mouseenter", $event);
137
- },
138
- "mouseleave": function mouseleave($event) {
139
- _vm.state.hovering = false;
140
- _vm.$emit("mouseleave", $event);
141
- },
142
- "click": function click($event) {
143
- return _vm.$emit("click", $event);
144
- }
145
- }
146
- }, [_vm.type !== "textarea" ? [_vm.slots.prepend && !_vm.state.isDisplayOnly ? _c("div", {
147
- ref: "prepend",
148
- staticClass: "border-r-0 rounded-tr-none rounded-br-none bg-color-bg-2 text-color-text-placeholder border border-solid border-color-border rounded px-3 py-0 w-px align-middle table-cell relative whitespace-nowrap",
149
- attrs: {
150
- "data-tag": "tiny-input-prepend"
151
- }
152
- }, [_vm._t("prepend")], 2) : _vm._e(), _c("span", {
153
- staticClass: "relative text-sm block",
154
- class: [_vm.state.inputSizeMf !== "mini" ? "sm:text-sm" : "sm:text-xs"],
155
- attrs: {
156
- "data-tag": "tiny-input-display-only"
157
- }
158
- }, [_vm.state.isDisplayOnly ? _c("tiny-tooltip", {
159
- attrs: {
160
- "disabled": !_vm.showTooltip,
161
- "effect": "light",
162
- "content": _vm.state.displayOnlyTooltip,
163
- "placement": "top",
164
- "popper-class": _vm.state.tooltipConfig.popperClass || "",
165
- "popper-options": {
166
- bubbling: true
167
- }
168
- },
169
- nativeOn: {
170
- "mouseenter": function mouseenter($event) {
171
- return _vm.handleEnterDisplayOnlyContent.apply(null, arguments);
172
- }
173
- }
174
- }, [_vm.type === "password" ? _c("span", {
175
- staticClass: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
176
- }, [_vm._v(_vm._s(_vm.state.hiddenPassword))]) : _vm.mask ? _c("span", {
177
- staticClass: "absolute top-0 left-0 max-w-full flex items-center leading-7 sm:leading-normal text-color-text-primary"
178
- }, [_c("span", {
179
- staticClass: "flex-1 overflow-hidden text-ellipsis whitespace-nowrap mr-4"
180
- }, [_vm._v(" " + _vm._s(_vm.state.displayedMaskValue) + " ")]), _c(_vm.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose", {
181
- tag: "component",
182
- nativeOn: {
183
- "click": function click($event) {
184
- _vm.state.maskValueVisible = !_vm.state.maskValueVisible;
185
- }
186
- }
187
- })], 1) : _c("span", {
188
- staticClass: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
189
- }, [_vm._v(" " + _vm._s(_vm.state.displayOnlyText) + " ")])]) : _vm._e(), _vm.type !== "textarea" ? _c("input", _vm._b({
190
- ref: "input",
191
- class: _vm.m("w-full border-0 sm:border px-0 sm:px-3 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border-separator placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6 py-0 outline-0 transition-colors duration-200 ease-in-out ", _vm.state.inputSizeMf === "medium" ? "h-8 leading-8 " + _vm.m("sm:text-sm") + " placeholder:text-sm" : _vm.state.inputSizeMf === "mini" ? "h-6 leading-6 text-xs placeholder:text-xs" : "h-7 leading-7", _vm.slots.prepend || _vm.slots.append ? "align-middle table-cell" : "inline-block", _vm.slots.prepend && _vm.slots.append ? "rounded-none" : _vm.slots.prepend ? "rounded-tl-none rounded-bl-none rounded-tr rounded-br" : _vm.slots.append ? "rounded-tl rounded-bl rounded-tr-none rounded-br-none" : "rounded", _vm.readonly ? " text-ellipsis overflow-hidden whitespace-nowrap" : "sm:border", (_vm.slots.prefix || _vm.prefixIcon) && (_vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword) ? "px-6 sm:px-6" : _vm.slots.prefix || _vm.prefixIcon ? "pl-6 sm:pl-6 pr-0 sm:pr-3" : _vm.slots.suffix || _vm.suffixIcon || _vm.clearable || _vm.showPassword ? "pl-0 sm:pl-3 pr-6 sm:pr-6" : "", _vm.mask && _vm.state.inputDisabled ? !_vm.state.maskValueVisible ? "font-[serif] pr-6 sm:pr-6" : "pr-6 sm:pr-6" : "", (_vm.slots.suffix || _vm.suffixIcon || _vm.showPassword) && _vm.clearable ? "pr-10 sm:pr-10" : "", _vm.state.isDisplayOnly ? "invisible h-auto leading-none border-0" : "", _vm.state.isWordLimitVisible ? _vm.clearable ? "pr-18 sm:pr-18" : "pr-14 sm:pr-14" : "", _vm.customClass),
192
- attrs: {
193
- "data-tag": "tiny-input-inner",
194
- "name": _vm.name,
195
- "tabindex": _vm.tabindex,
196
- "type": _vm.showPassword ? _vm.state.passwordVisible ? "text" : "password" : _vm.type,
197
- "disabled": _vm.state.inputDisabled,
198
- "readonly": _vm.readonly,
199
- "unselectable": _vm.readonly ? "on" : "off",
200
- "autocomplete": _vm.autocomplete,
201
- "aria-label": _vm.label
202
- },
203
- on: {
204
- "compositionstart": _vm.handleCompositionStart,
205
- "compositionupdate": _vm.handleCompositionUpdate,
206
- "compositionend": _vm.handleCompositionEnd,
207
- "input": _vm.handleInput,
208
- "focus": _vm.handleFocus,
209
- "blur": _vm.handleBlur,
210
- "change": _vm.handleChange,
211
- "keyup": function keyup($event) {
212
- return _vm.$emit("keyup", $event);
213
- },
214
- "keydown": function keydown($event) {
215
- return _vm.$emit("keydown", $event);
216
- },
217
- "paste": function paste($event) {
218
- return _vm.$emit("paste", $event);
219
- }
220
- }
221
- }, "input", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]"]), false)) : _vm._e()], 1), _vm.isMemoryStorage ? _c("tiny-tall-storage", {
222
- attrs: {
223
- "name": _vm.name,
224
- "localstorage-data": _vm.storageData,
225
- "is-memory-storage": _vm.isMemoryStorage
226
- },
227
- on: {
228
- "selected": _vm.selectedMemory
229
- }
230
- }) : _vm._e(), (_vm.slots.prefix || _vm.prefixIcon) && !_vm.state.isDisplayOnly ? _c("span", {
231
- ref: "prefix",
232
- staticClass: "left-2 transition-all duration-300 ease-in-out text-xs sm:text-sm absolute top-1/2 -translate-y-1/2 text-center text-color-text-placeholder flex items-center",
233
- attrs: {
234
- "data-tag": "tiny-input-prefix"
235
- }
236
- }, [_vm._t("prefix"), _vm.prefixIcon ? _c(_vm.prefixIcon, {
237
- tag: "component",
238
- class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs sm:text-sm", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")
239
- }) : _vm._e()], 2) : _vm._e(), !_vm.state.isDisplayOnly && _vm.getSuffixVisible() ? _c("span", {
240
- ref: "suffix",
241
- staticClass: "right-2 transition-all duration-300 ease-in-out pointer-events-none text-xs absolute top-1/2 -translate-y-1/2 text-center text-color-text-placeholder flex items-center z-[1]",
242
- attrs: {
243
- "data-tag": "tiny-input-suffix"
244
- }
245
- }, [_c("span", {
246
- staticClass: "pointer-events-auto text-xs flex justify-start items-center"
247
- }, [_vm.state.showClear ? _c("icon-close", {
248
- class: _vm.m("hidden sm:block text-center transition-all duration-300 ease-in-out text-xs cursor-pointer", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
249
- on: {
250
- "mousedown": function mousedown($event) {
251
- $event.preventDefault();
252
- },
253
- "click": _vm.clear
254
- }
255
- }) : _vm._e(), !_vm.state.showClear || !_vm.state.showPwdVisible || !_vm.state.isWordLimitVisible ? [_vm._t("suffix"), _vm.suffixIcon ? _c(_vm.suffixIcon, {
256
- tag: "component",
257
- class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")
258
- }) : _vm._e()] : _vm._e(), _vm.state.showClear ? _c("icon-error", {
259
- class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs cursor-pointer fill-color-none-hover block sm:hidden", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
260
- on: {
261
- "mousedown": function mousedown($event) {
262
- $event.preventDefault();
263
- },
264
- "click": _vm.clear
265
- }
266
- }) : _vm._e(), _vm.showPassword ? _c(_vm.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose", {
267
- tag: "component",
268
- class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
269
- nativeOn: {
270
- "click": function click($event) {
271
- return _vm.handlePasswordVisible.apply(null, arguments);
272
- }
273
- }
274
- }) : _vm._e(), _vm.mask && _vm.state.inputDisabled ? _c(_vm.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose", {
275
- tag: "component",
276
- class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs fill-color-text-placeholder", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"),
277
- nativeOn: {
278
- "click": function click($event) {
279
- _vm.state.maskValueVisible = !_vm.state.maskValueVisible;
280
- }
281
- }
282
- }) : _vm._e(), _vm.state.isWordLimitVisible ? _c("span", {
283
- staticClass: "h-full inline-flex items-center text-xs sm:text-sm text-color-text-placeholder"
284
- }, [_c("span", {
285
- staticClass: "bg-color-bg-1 leading-none inline-block"
286
- }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))])]) : _vm._e()], 2), _vm.state.validateState ? _c("i", {
287
- class: _vm.m("text-center transition-all duration-300 ease-in-out text-xs pointer-events-none", _vm.state.inputSizeMf === "medium" ? "leading-8" : _vm.state.inputSizeMf === "mini" ? "leading-6" : "leading-7", _vm.state.validateIcon)
288
- }) : _vm._e()]) : _vm._e(), _vm.slots.append && !_vm.state.isDisplayOnly ? _c("div", {
289
- ref: "append",
290
- staticClass: "border-l-0 rounded-tl-none rounded-bl-none bg-color-bg-2 text-color-text-placeholder border border-solid border-color-border rounded-tr rounded-br px-3 py-0 w-px align-middle table-cell relative whitespace-nowrap"
291
- }, [_vm._t("append")], 2) : _vm._e(), _vm.slots.panel && !_vm.state.isDisplayOnly ? _c("div", {
292
- ref: "panel"
293
- }, [_vm._t("panel")], 2) : _vm._e()] : _c("span", {
294
- class: [_vm.hoverExpand && "relative block h-7 w-full", _vm.state.isDisplayOnly && _vm.hoverExpand && "h-auto"],
295
- attrs: {
296
- "data-tag": "tiny-input-textarea"
297
- }
298
- }, [_vm.state.isDisplayOnly ? _c("tiny-tooltip", {
299
- attrs: {
300
- "disabled": !_vm.showTooltip,
301
- "effect": "light",
302
- "content": _vm.state.displayOnlyTooltip,
303
- "placement": "top",
304
- "pre": "",
305
- "popper-class": _vm.state.tooltipConfig.popperClass || "",
306
- "popper-options": {
307
- bubbling: true
308
- }
309
- },
310
- nativeOn: {
311
- "mouseenter": function mouseenter($event) {
312
- return _vm.handleEnterDisplayOnlyContent($event, "textarea");
313
- }
314
- }
315
- }, [_c("div", {
316
- staticClass: "inline-flex"
317
- }, [_c("span", {
318
- ref: "textBox",
319
- staticClass: "text-box max-w-full break-words line-clamp-5 text-sm text-color-text-primary before:content-[''] before:float-right before:h-full before:-mb-4",
320
- class: [_vm.state.inputSizeMf !== "mini" ? "sm:text-sm" : "sm:text-xs", _vm.hoverExpand && "relative left-0 max-w-full leading-normal line-clamp-1", _vm.autosize ? "left-0 max-w-full break-words whitespace-pre-line leading-normal" : "left-0 max-w-full text-ellipsis overflow-hidden break-words whitespace-pre-wrap line-clamp-5"],
321
- on: {
322
- "click": function click($event) {
323
- _vm.state.showDisplayOnlyBox = true;
324
- }
325
- }
326
- }, [_vm.state.showMoreBtn ? _c("span", {
327
- staticClass: "float-right relative top-px clear-both text-color-brand text-sm leading-3 cursor-pointer"
328
- }, [_vm._v(_vm._s(_vm.t("ui.input.more")) + ">")]) : _vm._e(), _c("span", [_vm._v(_vm._s(_vm.state.displayOnlyText))])])])]) : _vm._e(), _vm.state.isDisplayOnly && _vm.popupMore ? _c("tiny-dialog-box", {
329
- attrs: {
330
- "title": _vm.t("ui.input.detail"),
331
- "width": "1000px",
332
- "visible": _vm.state.showDisplayOnlyBox,
333
- "append-to-body": true,
334
- "close-on-click-modal": false
335
- },
336
- on: {
337
- "update:visible": function updateVisible($event) {
338
- _vm.state.showDisplayOnlyBox = $event;
339
- }
128
+ var _hoisted_1 = {
129
+ key: 0,
130
+ "data-tag": "tiny-input-prepend",
131
+ ref: "prepend",
132
+ class: "border-r-0 rounded-tr-none rounded-br-none bg-color-bg-2 text-color-text-placeholder border border-solid border-color-border rounded px-3 py-0 w-px align-middle table-cell relative whitespace-nowrap"
133
+ };
134
+ var _hoisted_2 = {
135
+ key: 0,
136
+ class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
137
+ };
138
+ var _hoisted_3 = {
139
+ key: 1,
140
+ class: "absolute top-0 left-0 max-w-full flex items-center leading-7 sm:leading-normal text-color-text-primary"
141
+ };
142
+ var _hoisted_4 = {
143
+ class: "flex-1 overflow-hidden text-ellipsis whitespace-nowrap mr-4"
144
+ };
145
+ var _hoisted_5 = {
146
+ key: 2,
147
+ class: "absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
148
+ };
149
+ var _hoisted_6 = ["name", "tabindex", "type", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
150
+ var _hoisted_7 = {
151
+ key: 2,
152
+ "data-tag": "tiny-input-prefix",
153
+ ref: "prefix",
154
+ class: "left-2 transition-all duration-300 ease-in-out text-xs sm:text-sm absolute top-1/2 -translate-y-1/2 text-center text-color-text-placeholder flex items-center"
155
+ };
156
+ var _hoisted_8 = {
157
+ key: 3,
158
+ "data-tag": "tiny-input-suffix",
159
+ ref: "suffix",
160
+ 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]"
161
+ };
162
+ var _hoisted_9 = {
163
+ class: "pointer-events-auto text-xs flex justify-start items-center"
164
+ };
165
+ var _hoisted_10 = {
166
+ key: 5,
167
+ class: "h-full inline-flex items-center text-xs sm:text-sm text-color-text-placeholder"
168
+ };
169
+ var _hoisted_11 = {
170
+ class: "bg-color-bg-1 leading-none inline-block"
171
+ };
172
+ var _hoisted_12 = {
173
+ key: 4,
174
+ ref: "append",
175
+ 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"
176
+ };
177
+ var _hoisted_13 = {
178
+ key: 5,
179
+ ref: "panel"
180
+ };
181
+ var _hoisted_14 = {
182
+ class: "inline-flex"
183
+ };
184
+ var _hoisted_15 = {
185
+ key: 0,
186
+ class: "float-right relative top-px clear-both text-color-brand text-sm leading-3 cursor-pointer"
187
+ };
188
+ var _hoisted_16 = {
189
+ class: "font-[inherit]"
190
+ };
191
+ var _hoisted_17 = ["tabindex", "disabled", "readonly", "unselectable", "autocomplete", "aria-label"];
192
+ var _hoisted_18 = {
193
+ key: 2,
194
+ "data-tag": "tiny-input-limit",
195
+ class: "bg-color-bg-1 text-color-text-placeholder text-xs sm:text-sm absolute bottom-1 right-3"
196
+ };
197
+ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
198
+ var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
199
+ var _component_tiny_tall_storage = resolveComponent("tiny-tall-storage");
200
+ var _component_icon_close = resolveComponent("icon-close");
201
+ var _component_icon_error = resolveComponent("icon-error");
202
+ var _component_tiny_button = resolveComponent("tiny-button");
203
+ var _component_tiny_dialog_box = resolveComponent("tiny-dialog-box");
204
+ return openBlock(), createElementBlock(
205
+ "div",
206
+ {
207
+ class: normalizeClass(_ctx.m("relative text-xs sm:text-sm", _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)),
208
+ "data-tag": "tiny-input",
209
+ style: normalizeStyle(_ctx.$attrs.style),
210
+ onMouseenter: _cache[27] || (_cache[27] = function($event) {
211
+ _ctx.state.hovering = true;
212
+ _ctx.$emit("mouseenter", $event);
213
+ }),
214
+ onMouseleave: _cache[28] || (_cache[28] = function($event) {
215
+ _ctx.state.hovering = false;
216
+ _ctx.$emit("mouseleave", $event);
217
+ }),
218
+ onClick: _cache[29] || (_cache[29] = function($event) {
219
+ return _ctx.$emit("click", $event);
220
+ })
340
221
  },
341
- scopedSlots: _vm._u([{
342
- key: "footer",
343
- fn: function fn() {
344
- return [_c("tiny-button", {
345
- on: {
346
- "click": function click($event) {
347
- _vm.state.showDisplayOnlyBox = false;
348
- }
349
- }
350
- }, [_vm._v(_vm._s(_vm.t("ui.input.close")))])];
222
+ [_ctx.type !== "textarea" ? (openBlock(), createElementBlock(
223
+ Fragment,
224
+ {
225
+ key: 0
351
226
  },
352
- proxy: true
353
- }], null, false, 2786811157)
354
- }, [_c("pre", {
355
- staticClass: "font-[inherit]"
356
- }, [_vm._v(_vm._s(_vm.state.displayOnlyText))])]) : _vm._e(), _c("textarea", _vm._b({
357
- ref: "textarea",
358
- staticClass: "block w-full border-0 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border-separator outline-0 rounded placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6",
359
- class: [_vm.readonly ? "sm:border-0 px-0 py-0" : "sm:border px-3 ", _vm.state.isDisplayOnly ? "hidden" : "", _vm.state.inputSizeMf !== "mini" ? "sm:placeholder:text-sm sm:text-sm" : "sm:placeholder:text-xs sm:text-xs", _vm.hoverExpand && "min-w-40 absolute h-7 z-[2000] top-0 left-0", _vm.hoverExpand && _vm.state.enteredTextarea ? "py-2 leading-normal" : "py-0 leading-[1.625rem]", _vm.hoverExpand && !_vm.state.enteredTextarea && "min-h-7 px-2 leading-7 overflow-hidden"],
360
- style: _vm.state.textareaStyle,
361
- attrs: {
362
- "tabindex": _vm.tabindex,
363
- "disabled": _vm.state.inputDisabled,
364
- "readonly": _vm.readonly,
365
- "unselectable": _vm.readonly ? "on" : "off",
366
- "autocomplete": _vm.autocomplete,
367
- "aria-label": _vm.label
368
- },
369
- on: {
370
- "compositionstart": _vm.handleCompositionStart,
371
- "compositionupdate": _vm.handleCompositionUpdate,
372
- "compositionend": _vm.handleCompositionEnd,
373
- "input": _vm.handleInput,
374
- "focus": _vm.handleFocus,
375
- "blur": _vm.handleBlur,
376
- "change": _vm.handleChange,
377
- "mouseenter": function mouseenter($event) {
378
- return _vm.handleEnterTextarea($event);
227
+ [_ctx.slots.prepend && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
228
+ "div",
229
+ _hoisted_1,
230
+ [renderSlot(_ctx.$slots, "prepend")],
231
+ 512
232
+ /* NEED_PATCH */
233
+ )) : createCommentVNode("v-if", true), createElementVNode(
234
+ "span",
235
+ {
236
+ class: normalizeClass(["relative text-sm block", [_ctx.state.inputSizeMf !== "mini" ? "sm:text-sm" : "sm:text-xs"]]),
237
+ "data-tag": "tiny-input-display-only"
238
+ },
239
+ [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
240
+ key: 0,
241
+ disabled: !_ctx.showTooltip,
242
+ effect: "light",
243
+ content: _ctx.state.displayOnlyTooltip,
244
+ placement: "top",
245
+ "popper-class": _ctx.state.tooltipConfig.popperClass || "",
246
+ "popper-options": {
247
+ bubbling: true
248
+ },
249
+ onMouseenter: _ctx.handleEnterDisplayOnlyContent
250
+ }, {
251
+ default: withCtx(function() {
252
+ return [_ctx.type === "password" ? (openBlock(), createElementBlock(
253
+ "span",
254
+ _hoisted_2,
255
+ toDisplayString(_ctx.state.hiddenPassword),
256
+ 1
257
+ /* TEXT */
258
+ )) : _ctx.mask ? (openBlock(), createElementBlock("span", _hoisted_3, [createElementVNode(
259
+ "span",
260
+ _hoisted_4,
261
+ toDisplayString(_ctx.state.displayedMaskValue),
262
+ 1
263
+ /* TEXT */
264
+ ), (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
265
+ onClick: _cache[0] || (_cache[0] = function($event) {
266
+ return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
267
+ })
268
+ }))])) : (openBlock(), createElementBlock(
269
+ "span",
270
+ _hoisted_5,
271
+ toDisplayString(_ctx.state.displayOnlyText),
272
+ 1
273
+ /* TEXT */
274
+ ))];
275
+ }),
276
+ _: 1
277
+ /* STABLE */
278
+ }, 8, ["disabled", "content", "popper-class", "onMouseenter"])) : createCommentVNode("v-if", true), _ctx.type !== "textarea" ? (openBlock(), createElementBlock("input", mergeProps({
279
+ key: 1,
280
+ ref: "input",
281
+ "data-tag": "tiny-input-inner",
282
+ name: _ctx.name
283
+ }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]"]), {
284
+ 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-separator placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6 py-0 outline-0 transition-colors duration-200 ease-in-out ", _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),
285
+ tabindex: _ctx.tabindex,
286
+ type: _ctx.showPassword ? _ctx.state.passwordVisible ? "text" : "password" : _ctx.type,
287
+ disabled: _ctx.state.inputDisabled,
288
+ readonly: _ctx.readonly,
289
+ unselectable: _ctx.readonly ? "on" : "off",
290
+ autocomplete: _ctx.autocomplete,
291
+ onCompositionstart: _cache[1] || (_cache[1] = function() {
292
+ return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
293
+ }),
294
+ onCompositionupdate: _cache[2] || (_cache[2] = function() {
295
+ return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
296
+ }),
297
+ onCompositionend: _cache[3] || (_cache[3] = function() {
298
+ return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
299
+ }),
300
+ onInput: _cache[4] || (_cache[4] = function() {
301
+ return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
302
+ }),
303
+ onFocus: _cache[5] || (_cache[5] = function() {
304
+ return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
305
+ }),
306
+ onBlur: _cache[6] || (_cache[6] = function() {
307
+ return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
308
+ }),
309
+ onChange: _cache[7] || (_cache[7] = function() {
310
+ return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
311
+ }),
312
+ "aria-label": _ctx.label,
313
+ onKeyup: _cache[8] || (_cache[8] = function($event) {
314
+ return _ctx.$emit("keyup", $event);
315
+ }),
316
+ onKeydown: _cache[9] || (_cache[9] = function($event) {
317
+ return _ctx.$emit("keydown", $event);
318
+ }),
319
+ onPaste: _cache[10] || (_cache[10] = function($event) {
320
+ return _ctx.$emit("paste", $event);
321
+ })
322
+ }), null, 16, _hoisted_6)) : createCommentVNode("v-if", true)],
323
+ 2
324
+ /* CLASS */
325
+ ), _ctx.isMemoryStorage ? (openBlock(), createBlock(_component_tiny_tall_storage, {
326
+ key: 1,
327
+ name: _ctx.name,
328
+ "localstorage-data": _ctx.storageData,
329
+ "is-memory-storage": _ctx.isMemoryStorage,
330
+ onSelected: _ctx.selectedMemory
331
+ }, null, 8, ["name", "localstorage-data", "is-memory-storage", "onSelected"])) : createCommentVNode("v-if", true), (_ctx.slots.prefix || _ctx.prefixIcon) && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
332
+ "span",
333
+ _hoisted_7,
334
+ [renderSlot(_ctx.$slots, "prefix"), _ctx.prefixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon), {
335
+ key: 0,
336
+ class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs sm:text-sm", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"))
337
+ }, null, 8, ["class"])) : createCommentVNode("v-if", true)],
338
+ 512
339
+ /* NEED_PATCH */
340
+ )) : createCommentVNode("v-if", true), !_ctx.state.isDisplayOnly && _ctx.getSuffixVisible() ? (openBlock(), createElementBlock(
341
+ "span",
342
+ _hoisted_8,
343
+ [createElementVNode("span", _hoisted_9, [_ctx.state.showClear ? (openBlock(), createBlock(_component_icon_close, {
344
+ key: 0,
345
+ 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")),
346
+ onMousedown: _cache[11] || (_cache[11] = withModifiers(function() {
347
+ }, ["prevent"])),
348
+ onClick: _ctx.clear
349
+ }, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), !_ctx.state.showClear || !_ctx.state.showPwdVisible || !_ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock(
350
+ Fragment,
351
+ {
352
+ key: 1
353
+ },
354
+ [renderSlot(_ctx.$slots, "suffix"), _ctx.suffixIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon), {
355
+ key: 0,
356
+ class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7"))
357
+ }, null, 8, ["class"])) : createCommentVNode("v-if", true)],
358
+ 64
359
+ /* STABLE_FRAGMENT */
360
+ )) : createCommentVNode("v-if", true), _ctx.state.showClear ? (openBlock(), createBlock(_component_icon_error, {
361
+ key: 2,
362
+ 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")),
363
+ onMousedown: _cache[12] || (_cache[12] = withModifiers(function() {
364
+ }, ["prevent"])),
365
+ onClick: _ctx.clear
366
+ }, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), _ctx.showPassword ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.passwordVisible ? "icon-eyeopen" : "icon-eyeclose"), {
367
+ key: 3,
368
+ class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7")),
369
+ onClick: _ctx.handlePasswordVisible
370
+ }, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), _ctx.mask && _ctx.state.inputDisabled ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.state.maskValueVisible ? "icon-eyeopen" : "icon-eyeclose"), {
371
+ key: 4,
372
+ 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")),
373
+ onClick: _cache[13] || (_cache[13] = function($event) {
374
+ return _ctx.state.maskValueVisible = !_ctx.state.maskValueVisible;
375
+ })
376
+ }, null, 8, ["class"])) : createCommentVNode("v-if", true), _ctx.state.isWordLimitVisible ? (openBlock(), createElementBlock("span", _hoisted_10, [createElementVNode(
377
+ "span",
378
+ _hoisted_11,
379
+ toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength),
380
+ 1
381
+ /* TEXT */
382
+ )])) : createCommentVNode("v-if", true)]), _ctx.state.validateState ? (openBlock(), createElementBlock(
383
+ "i",
384
+ {
385
+ key: 0,
386
+ class: normalizeClass(_ctx.m("text-center transition-all duration-300 ease-in-out text-xs pointer-events-none", _ctx.state.inputSizeMf === "medium" ? "leading-8" : _ctx.state.inputSizeMf === "mini" ? "leading-6" : "leading-7", _ctx.state.validateIcon))
387
+ },
388
+ null,
389
+ 2
390
+ /* CLASS */
391
+ )) : createCommentVNode("v-if", true)],
392
+ 512
393
+ /* NEED_PATCH */
394
+ )) : createCommentVNode("v-if", true), _ctx.slots.append && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
395
+ "div",
396
+ _hoisted_12,
397
+ [renderSlot(_ctx.$slots, "append")],
398
+ 512
399
+ /* NEED_PATCH */
400
+ )) : createCommentVNode("v-if", true), _ctx.slots.panel && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
401
+ "div",
402
+ _hoisted_13,
403
+ [renderSlot(_ctx.$slots, "panel")],
404
+ 512
405
+ /* NEED_PATCH */
406
+ )) : createCommentVNode("v-if", true)],
407
+ 64
408
+ /* STABLE_FRAGMENT */
409
+ )) : (openBlock(), createElementBlock(
410
+ "span",
411
+ {
412
+ key: 1,
413
+ "data-tag": "tiny-input-textarea",
414
+ class: normalizeClass([_ctx.hoverExpand && "relative block h-7 w-full", _ctx.state.isDisplayOnly && _ctx.hoverExpand && "h-auto"])
379
415
  },
380
- "mouseleave": function mouseleave($event) {
381
- return _vm.handleLeaveTextarea($event);
382
- }
383
- }
384
- }, "textarea", _vm.a(_vm.$attrs, ["type", "class", "style", "^on[A-Z]"]), false))], 1), _vm.state.isWordLimitVisible && _vm.type === "textarea" ? _c("span", {
385
- staticClass: "bg-color-bg-1 text-color-text-placeholder text-xs sm:text-sm absolute bottom-1 right-3",
386
- attrs: {
387
- "data-tag": "tiny-input-limit"
388
- }
389
- }, [_vm._v(_vm._s(_vm.state.showWordLimit ? _vm.state.textLength + "/" + _vm.state.upperLimit : _vm.state.textLength))]) : _vm._e(), _vm._t("default")], 2);
390
- };
391
- var staticRenderFns = [];
392
- var __cssModules = {};
393
- var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
394
- function __vue2_injectStyles(context) {
395
- for (var o in __cssModules) {
396
- this[o] = __cssModules[o];
397
- }
416
+ [_ctx.state.isDisplayOnly ? (openBlock(), createBlock(_component_tiny_tooltip, {
417
+ key: 0,
418
+ disabled: !_ctx.showTooltip,
419
+ effect: "light",
420
+ content: _ctx.state.displayOnlyTooltip,
421
+ placement: "top",
422
+ pre: "",
423
+ "popper-class": _ctx.state.tooltipConfig.popperClass || "",
424
+ "popper-options": {
425
+ bubbling: true
426
+ },
427
+ onMouseenter: _cache[15] || (_cache[15] = function($event) {
428
+ return _ctx.handleEnterDisplayOnlyContent($event, "textarea");
429
+ })
430
+ }, {
431
+ default: withCtx(function() {
432
+ return [createElementVNode("div", _hoisted_14, [createElementVNode(
433
+ "span",
434
+ {
435
+ ref: "textBox",
436
+ class: normalizeClass(["text-box max-w-full break-words line-clamp-5 text-sm text-color-text-primary before:content-[''] before:float-right before:h-full before:-mb-4", [_ctx.state.inputSizeMf !== "mini" ? "sm:text-sm" : "sm:text-xs", _ctx.hoverExpand && "relative left-0 max-w-full leading-normal line-clamp-1", _ctx.autosize ? "left-0 max-w-full break-words whitespace-pre-line leading-normal" : "left-0 max-w-full text-ellipsis overflow-hidden break-words whitespace-pre-wrap line-clamp-5"]]),
437
+ onClick: _cache[14] || (_cache[14] = function($event) {
438
+ return _ctx.state.showDisplayOnlyBox = true;
439
+ })
440
+ },
441
+ [_ctx.state.showMoreBtn ? (openBlock(), createElementBlock(
442
+ "span",
443
+ _hoisted_15,
444
+ toDisplayString(_ctx.t("ui.input.more")) + ">",
445
+ 1
446
+ /* TEXT */
447
+ )) : createCommentVNode("v-if", true), createElementVNode(
448
+ "span",
449
+ null,
450
+ toDisplayString(_ctx.state.displayOnlyText),
451
+ 1
452
+ /* TEXT */
453
+ )],
454
+ 2
455
+ /* CLASS */
456
+ )])];
457
+ }),
458
+ _: 1
459
+ /* STABLE */
460
+ }, 8, ["disabled", "content", "popper-class"])) : createCommentVNode("v-if", true), _ctx.state.isDisplayOnly && _ctx.popupMore ? (openBlock(), createBlock(_component_tiny_dialog_box, {
461
+ key: 1,
462
+ title: _ctx.t("ui.input.detail"),
463
+ width: "1000px",
464
+ visible: _ctx.state.showDisplayOnlyBox,
465
+ "append-to-body": true,
466
+ "close-on-click-modal": false,
467
+ "onUpdate:visible": _cache[17] || (_cache[17] = function($event) {
468
+ return _ctx.state.showDisplayOnlyBox = $event;
469
+ })
470
+ }, {
471
+ footer: withCtx(function() {
472
+ return [createVNode(_component_tiny_button, {
473
+ onClick: _cache[16] || (_cache[16] = function($event) {
474
+ return _ctx.state.showDisplayOnlyBox = false;
475
+ })
476
+ }, {
477
+ default: withCtx(function() {
478
+ return [createTextVNode(
479
+ toDisplayString(_ctx.t("ui.input.close")),
480
+ 1
481
+ /* TEXT */
482
+ )];
483
+ }),
484
+ _: 1
485
+ /* STABLE */
486
+ })];
487
+ }),
488
+ default: withCtx(function() {
489
+ return [createElementVNode(
490
+ "pre",
491
+ _hoisted_16,
492
+ toDisplayString(_ctx.state.displayOnlyText),
493
+ 1
494
+ /* TEXT */
495
+ )];
496
+ }),
497
+ _: 1
498
+ /* STABLE */
499
+ }, 8, ["title", "visible"])) : createCommentVNode("v-if", true), createElementVNode("textarea", mergeProps({
500
+ ref: "textarea"
501
+ }, _ctx.a(_ctx.$attrs, ["type", "class", "style", "^on[A-Z]"]), {
502
+ tabindex: _ctx.tabindex,
503
+ 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-separator outline-0 rounded placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-disabled sm:disabled:bg-color-bg-6", [_ctx.readonly ? "sm:border-0 px-0 py-0" : "sm:border px-3 ", _ctx.state.isDisplayOnly ? "hidden" : "", _ctx.state.inputSizeMf !== "mini" ? "sm:placeholder:text-sm sm:text-sm" : "sm:placeholder:text-xs sm:text-xs", _ctx.hoverExpand && "min-w-40 absolute h-7 z-[2000] top-0 left-0", _ctx.hoverExpand && _ctx.state.enteredTextarea ? "py-2 leading-normal" : "py-0 leading-[1.625rem]", _ctx.hoverExpand && !_ctx.state.enteredTextarea && "min-h-7 px-2 leading-7 overflow-hidden"]],
504
+ onCompositionstart: _cache[18] || (_cache[18] = function() {
505
+ return _ctx.handleCompositionStart && _ctx.handleCompositionStart.apply(_ctx, arguments);
506
+ }),
507
+ onCompositionupdate: _cache[19] || (_cache[19] = function() {
508
+ return _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate.apply(_ctx, arguments);
509
+ }),
510
+ onCompositionend: _cache[20] || (_cache[20] = function() {
511
+ return _ctx.handleCompositionEnd && _ctx.handleCompositionEnd.apply(_ctx, arguments);
512
+ }),
513
+ onInput: _cache[21] || (_cache[21] = function() {
514
+ return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
515
+ }),
516
+ disabled: _ctx.state.inputDisabled,
517
+ readonly: _ctx.readonly,
518
+ unselectable: _ctx.readonly ? "on" : "off",
519
+ autocomplete: _ctx.autocomplete,
520
+ style: _ctx.state.textareaStyle,
521
+ onFocus: _cache[22] || (_cache[22] = function() {
522
+ return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
523
+ }),
524
+ onBlur: _cache[23] || (_cache[23] = function() {
525
+ return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
526
+ }),
527
+ onChange: _cache[24] || (_cache[24] = function() {
528
+ return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
529
+ }),
530
+ onMouseenter: _cache[25] || (_cache[25] = function($event) {
531
+ return _ctx.handleEnterTextarea($event);
532
+ }),
533
+ onMouseleave: _cache[26] || (_cache[26] = function($event) {
534
+ return _ctx.handleLeaveTextarea($event);
535
+ }),
536
+ "aria-label": _ctx.label
537
+ }), "\n ", 16, _hoisted_17)],
538
+ 2
539
+ /* CLASS */
540
+ )), _ctx.state.isWordLimitVisible && _ctx.type === "textarea" ? (openBlock(), createElementBlock(
541
+ "span",
542
+ _hoisted_18,
543
+ toDisplayString(_ctx.state.showWordLimit ? _ctx.state.textLength + "/" + _ctx.state.upperLimit : _ctx.state.textLength),
544
+ 1
545
+ /* TEXT */
546
+ )) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")],
547
+ 38
548
+ /* CLASS, STYLE, NEED_HYDRATION */
549
+ );
398
550
  }
399
- var mobileFirst = /* @__PURE__ */ function() {
400
- return __component__.exports;
401
- }();
551
+ var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
402
552
 
403
553
  export { mobileFirst as default };