@v-c/textarea 0.0.7 → 0.0.8
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.
- package/dist/ResizableTextArea.cjs +40 -13
- package/dist/ResizableTextArea.js +39 -13
- package/dist/TextArea.cjs +46 -12
- package/dist/TextArea.js +44 -11
- package/dist/interface.d.ts +3 -1
- package/package.json +1 -1
|
@@ -5,6 +5,8 @@ let vue = require("vue");
|
|
|
5
5
|
let __v_c_resize_observer = require("@v-c/resize-observer");
|
|
6
6
|
__v_c_resize_observer = require_rolldown_runtime.__toESM(__v_c_resize_observer);
|
|
7
7
|
let __v_c_util = require("@v-c/util");
|
|
8
|
+
let __v_c_util_dist_omit = require("@v-c/util/dist/omit");
|
|
9
|
+
__v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
|
|
8
10
|
let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
9
11
|
let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
|
|
10
12
|
__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
|
|
@@ -18,7 +20,7 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
18
20
|
});
|
|
19
21
|
const mergedValue = (0, vue.computed)(() => internalValue.value ?? "");
|
|
20
22
|
const onInternalChange = (e) => {
|
|
21
|
-
internalValue.value = e.target.value;
|
|
23
|
+
if (props.value === void 0) internalValue.value = e.target.value;
|
|
22
24
|
props?.onChange?.(e);
|
|
23
25
|
};
|
|
24
26
|
const textareaRef = (0, vue.shallowRef)();
|
|
@@ -45,15 +47,15 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
45
47
|
await (0, vue.nextTick)();
|
|
46
48
|
if (needAutoSize.value) startResize();
|
|
47
49
|
}, { immediate: true });
|
|
48
|
-
(0, vue.watch)(resizeState,
|
|
49
|
-
|
|
50
|
+
(0, vue.watch)(resizeState, () => {
|
|
51
|
+
if (!textareaRef.value) return;
|
|
50
52
|
if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
|
|
51
53
|
else if (resizeState.value === RESIZE_MEASURING) {
|
|
52
54
|
const textareaStyles = require_calculateNodeHeight.default(textareaRef.value, false, minRows.value, maxRows.value);
|
|
53
55
|
resizeState.value = RESIZE_STABLE;
|
|
54
56
|
autoSizeStyle.value = textareaStyles;
|
|
55
57
|
}
|
|
56
|
-
}
|
|
58
|
+
});
|
|
57
59
|
const resizeRafRef = (0, vue.shallowRef)();
|
|
58
60
|
const cleanRaf = () => {
|
|
59
61
|
__v_c_util_dist_raf.default.cancel(resizeRafRef.value);
|
|
@@ -73,8 +75,8 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
73
75
|
cleanRaf();
|
|
74
76
|
});
|
|
75
77
|
return () => {
|
|
76
|
-
const { autoSize, onResize, prefixCls, disabled
|
|
77
|
-
const { style, restAttrs } = (0, __v_c_util_dist_props_util.getAttrStyleAndClass)(attrs, { omits: ["onKeydown"] });
|
|
78
|
+
const { autoSize, onResize, prefixCls, disabled } = props;
|
|
79
|
+
const { style, restAttrs, className } = (0, __v_c_util_dist_props_util.getAttrStyleAndClass)(attrs, { omits: ["onKeydown"] });
|
|
78
80
|
const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
|
|
79
81
|
const mergedStyle = {
|
|
80
82
|
...style,
|
|
@@ -87,13 +89,28 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
87
89
|
return (0, vue.createVNode)(__v_c_resize_observer.default, {
|
|
88
90
|
"onResize": onInternalResize,
|
|
89
91
|
"disabled": !(autoSize || onResize)
|
|
90
|
-
}, { default: () => [(0, vue.createVNode)("textarea", (0, vue.mergeProps)(restAttrs,
|
|
92
|
+
}, { default: () => [(0, vue.createVNode)("textarea", (0, vue.mergeProps)(restAttrs, (0, __v_c_util_dist_omit.default)(props, [
|
|
93
|
+
"suffix",
|
|
94
|
+
"classNames",
|
|
95
|
+
"styles",
|
|
96
|
+
"prefixCls",
|
|
97
|
+
"allowClear",
|
|
98
|
+
"autoSize",
|
|
99
|
+
"showCount",
|
|
100
|
+
"disabled",
|
|
101
|
+
"hidden",
|
|
102
|
+
"readOnly",
|
|
103
|
+
"onClear",
|
|
104
|
+
"maxLength",
|
|
105
|
+
"onResize",
|
|
106
|
+
"onChange"
|
|
107
|
+
]), {
|
|
91
108
|
"ref": textareaRef,
|
|
92
109
|
"style": mergedStyle,
|
|
93
110
|
"class": (0, __v_c_util.clsx)(prefixCls, className, { [`${prefixCls}-disabled`]: disabled }),
|
|
94
111
|
"disabled": disabled,
|
|
95
112
|
"value": mergedValue.value,
|
|
96
|
-
"
|
|
113
|
+
"onInput": onInternalChange
|
|
97
114
|
}), null)] });
|
|
98
115
|
};
|
|
99
116
|
}, {
|
|
@@ -118,11 +135,6 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
118
135
|
required: false,
|
|
119
136
|
default: void 0
|
|
120
137
|
},
|
|
121
|
-
className: {
|
|
122
|
-
type: String,
|
|
123
|
-
required: false,
|
|
124
|
-
default: void 0
|
|
125
|
-
},
|
|
126
138
|
autoSize: {
|
|
127
139
|
type: [Boolean, Object],
|
|
128
140
|
required: false,
|
|
@@ -197,6 +209,21 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
197
209
|
type: Boolean,
|
|
198
210
|
required: false,
|
|
199
211
|
default: void 0
|
|
212
|
+
},
|
|
213
|
+
placeholder: {
|
|
214
|
+
type: String,
|
|
215
|
+
required: false,
|
|
216
|
+
default: void 0
|
|
217
|
+
},
|
|
218
|
+
autoFocus: {
|
|
219
|
+
type: Boolean,
|
|
220
|
+
required: false,
|
|
221
|
+
default: void 0
|
|
222
|
+
},
|
|
223
|
+
onKeydown: {
|
|
224
|
+
type: Function,
|
|
225
|
+
required: false,
|
|
226
|
+
default: void 0
|
|
200
227
|
}
|
|
201
228
|
},
|
|
202
229
|
name: "ResizableTextArea",
|
|
@@ -2,6 +2,7 @@ import calculateAutoSizeStyle from "./calculateNodeHeight.js";
|
|
|
2
2
|
import { computed, createVNode, defineComponent, mergeProps, nextTick, onUnmounted, ref, shallowRef, watch } from "vue";
|
|
3
3
|
import ResizeObserver from "@v-c/resize-observer";
|
|
4
4
|
import { clsx } from "@v-c/util";
|
|
5
|
+
import omit from "@v-c/util/dist/omit";
|
|
5
6
|
import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
|
|
6
7
|
import raf from "@v-c/util/dist/raf";
|
|
7
8
|
var RESIZE_START = 0;
|
|
@@ -14,7 +15,7 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
14
15
|
});
|
|
15
16
|
const mergedValue = computed(() => internalValue.value ?? "");
|
|
16
17
|
const onInternalChange = (e) => {
|
|
17
|
-
internalValue.value = e.target.value;
|
|
18
|
+
if (props.value === void 0) internalValue.value = e.target.value;
|
|
18
19
|
props?.onChange?.(e);
|
|
19
20
|
};
|
|
20
21
|
const textareaRef = shallowRef();
|
|
@@ -41,15 +42,15 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
41
42
|
await nextTick();
|
|
42
43
|
if (needAutoSize.value) startResize();
|
|
43
44
|
}, { immediate: true });
|
|
44
|
-
watch(resizeState,
|
|
45
|
-
|
|
45
|
+
watch(resizeState, () => {
|
|
46
|
+
if (!textareaRef.value) return;
|
|
46
47
|
if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
|
|
47
48
|
else if (resizeState.value === RESIZE_MEASURING) {
|
|
48
49
|
const textareaStyles = calculateAutoSizeStyle(textareaRef.value, false, minRows.value, maxRows.value);
|
|
49
50
|
resizeState.value = RESIZE_STABLE;
|
|
50
51
|
autoSizeStyle.value = textareaStyles;
|
|
51
52
|
}
|
|
52
|
-
}
|
|
53
|
+
});
|
|
53
54
|
const resizeRafRef = shallowRef();
|
|
54
55
|
const cleanRaf = () => {
|
|
55
56
|
raf.cancel(resizeRafRef.value);
|
|
@@ -69,8 +70,8 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
69
70
|
cleanRaf();
|
|
70
71
|
});
|
|
71
72
|
return () => {
|
|
72
|
-
const { autoSize, onResize, prefixCls, disabled
|
|
73
|
-
const { style, restAttrs } = getAttrStyleAndClass(attrs, { omits: ["onKeydown"] });
|
|
73
|
+
const { autoSize, onResize, prefixCls, disabled } = props;
|
|
74
|
+
const { style, restAttrs, className } = getAttrStyleAndClass(attrs, { omits: ["onKeydown"] });
|
|
74
75
|
const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
|
|
75
76
|
const mergedStyle = {
|
|
76
77
|
...style,
|
|
@@ -83,13 +84,28 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
83
84
|
return createVNode(ResizeObserver, {
|
|
84
85
|
"onResize": onInternalResize,
|
|
85
86
|
"disabled": !(autoSize || onResize)
|
|
86
|
-
}, { default: () => [createVNode("textarea", mergeProps(restAttrs,
|
|
87
|
+
}, { default: () => [createVNode("textarea", mergeProps(restAttrs, omit(props, [
|
|
88
|
+
"suffix",
|
|
89
|
+
"classNames",
|
|
90
|
+
"styles",
|
|
91
|
+
"prefixCls",
|
|
92
|
+
"allowClear",
|
|
93
|
+
"autoSize",
|
|
94
|
+
"showCount",
|
|
95
|
+
"disabled",
|
|
96
|
+
"hidden",
|
|
97
|
+
"readOnly",
|
|
98
|
+
"onClear",
|
|
99
|
+
"maxLength",
|
|
100
|
+
"onResize",
|
|
101
|
+
"onChange"
|
|
102
|
+
]), {
|
|
87
103
|
"ref": textareaRef,
|
|
88
104
|
"style": mergedStyle,
|
|
89
105
|
"class": clsx(prefixCls, className, { [`${prefixCls}-disabled`]: disabled }),
|
|
90
106
|
"disabled": disabled,
|
|
91
107
|
"value": mergedValue.value,
|
|
92
|
-
"
|
|
108
|
+
"onInput": onInternalChange
|
|
93
109
|
}), null)] });
|
|
94
110
|
};
|
|
95
111
|
}, {
|
|
@@ -114,11 +130,6 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
114
130
|
required: false,
|
|
115
131
|
default: void 0
|
|
116
132
|
},
|
|
117
|
-
className: {
|
|
118
|
-
type: String,
|
|
119
|
-
required: false,
|
|
120
|
-
default: void 0
|
|
121
|
-
},
|
|
122
133
|
autoSize: {
|
|
123
134
|
type: [Boolean, Object],
|
|
124
135
|
required: false,
|
|
@@ -193,6 +204,21 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
193
204
|
type: Boolean,
|
|
194
205
|
required: false,
|
|
195
206
|
default: void 0
|
|
207
|
+
},
|
|
208
|
+
placeholder: {
|
|
209
|
+
type: String,
|
|
210
|
+
required: false,
|
|
211
|
+
default: void 0
|
|
212
|
+
},
|
|
213
|
+
autoFocus: {
|
|
214
|
+
type: Boolean,
|
|
215
|
+
required: false,
|
|
216
|
+
default: void 0
|
|
217
|
+
},
|
|
218
|
+
onKeydown: {
|
|
219
|
+
type: Function,
|
|
220
|
+
required: false,
|
|
221
|
+
default: void 0
|
|
196
222
|
}
|
|
197
223
|
},
|
|
198
224
|
name: "ResizableTextArea",
|
package/dist/TextArea.cjs
CHANGED
|
@@ -3,9 +3,11 @@ const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
|
3
3
|
const require_ResizableTextArea = require("./ResizableTextArea.cjs");
|
|
4
4
|
let vue = require("vue");
|
|
5
5
|
let __v_c_util = require("@v-c/util");
|
|
6
|
+
let __v_c_util_dist_omit = require("@v-c/util/dist/omit");
|
|
7
|
+
__v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
|
|
6
8
|
let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
7
9
|
let __v_c_input = require("@v-c/input");
|
|
8
|
-
let
|
|
10
|
+
let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
|
|
9
11
|
var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs }) => {
|
|
10
12
|
const { count, showCount } = (0, __v_c_util_dist_props_util.toPropsRefs)(props, "count", "showCount");
|
|
11
13
|
const value = (0, vue.shallowRef)(props?.value ?? props?.defaultValue ?? "");
|
|
@@ -50,8 +52,11 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
50
52
|
let cutValue = currentValue;
|
|
51
53
|
if (!compositionRef.value && countConfig.value.exceedFormatter && countConfig.value.max && countConfig.value.strategy(currentValue) > countConfig.value.max) {
|
|
52
54
|
cutValue = countConfig.value.exceedFormatter(currentValue, { max: countConfig.value.max });
|
|
53
|
-
|
|
55
|
+
const textarea$1 = getTextArea();
|
|
56
|
+
if (currentValue !== cutValue) selection.value = [textarea$1.selectionStart || 0, textarea$1.selectionEnd || 0];
|
|
54
57
|
}
|
|
58
|
+
const textarea = getTextArea();
|
|
59
|
+
if (!compositionRef.value && textarea && textarea.value !== cutValue) textarea.value = cutValue;
|
|
55
60
|
value.value = cutValue;
|
|
56
61
|
(0, __v_c_input.resolveOnChange)(e.currentTarget, e, props.onChange, cutValue);
|
|
57
62
|
};
|
|
@@ -67,7 +72,8 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
67
72
|
};
|
|
68
73
|
const handleKeyDown = (e) => {
|
|
69
74
|
const { onPressEnter } = props;
|
|
70
|
-
if (e.key ===
|
|
75
|
+
if (e.key === __v_c_util_dist_KeyCode.KeyCodeStr.Enter && onPressEnter && !e.isComposing) onPressEnter(e);
|
|
76
|
+
props?.onKeydown?.(e);
|
|
71
77
|
};
|
|
72
78
|
const handleFocus = () => {
|
|
73
79
|
focused.value = true;
|
|
@@ -85,8 +91,8 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
85
91
|
if (getTextArea()?.style.height) textareaResized.value = true;
|
|
86
92
|
};
|
|
87
93
|
return () => {
|
|
88
|
-
const { suffix,
|
|
89
|
-
const { style, restAttrs } = (0, __v_c_util_dist_props_util.getAttrStyleAndClass)(attrs);
|
|
94
|
+
const { suffix, classNames, styles, prefixCls = "vc-textarea", allowClear, autoSize, showCount: showCount$1, disabled, hidden, readOnly, onClear, maxLength } = props;
|
|
95
|
+
const { style, restAttrs, className } = (0, __v_c_util_dist_props_util.getAttrStyleAndClass)(attrs);
|
|
90
96
|
let suffixNode = suffix;
|
|
91
97
|
let dataCount;
|
|
92
98
|
if (countConfig.value.show) {
|
|
@@ -134,17 +140,35 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
134
140
|
"hidden": hidden,
|
|
135
141
|
"readOnly": readOnly,
|
|
136
142
|
"onClear": onClear
|
|
137
|
-
}, { default: () => [(0, vue.createVNode)(require_ResizableTextArea.default, (0, vue.mergeProps)(restAttrs,
|
|
143
|
+
}, { default: () => [(0, vue.createVNode)(require_ResizableTextArea.default, (0, vue.mergeProps)(restAttrs, (0, __v_c_util_dist_omit.default)(props, [
|
|
144
|
+
"suffix",
|
|
145
|
+
"classNames",
|
|
146
|
+
"styles",
|
|
147
|
+
"prefixCls",
|
|
148
|
+
"allowClear",
|
|
149
|
+
"autoSize",
|
|
150
|
+
"showCount",
|
|
151
|
+
"disabled",
|
|
152
|
+
"hidden",
|
|
153
|
+
"readOnly",
|
|
154
|
+
"onClear",
|
|
155
|
+
"maxLength",
|
|
156
|
+
"onResize",
|
|
157
|
+
"onChange",
|
|
158
|
+
"onKeydown",
|
|
159
|
+
"onPressEnter"
|
|
160
|
+
]), {
|
|
138
161
|
"autoSize": autoSize,
|
|
139
162
|
"maxLength": maxLength,
|
|
140
163
|
"onChange": onInternalChange
|
|
141
164
|
}, textareaProps, {
|
|
142
|
-
"
|
|
165
|
+
"class": (0, __v_c_util.clsx)(classNames?.textarea),
|
|
143
166
|
"style": {
|
|
144
167
|
resize: style?.resize,
|
|
145
168
|
...styles?.textarea
|
|
146
169
|
},
|
|
147
170
|
"disabled": disabled,
|
|
171
|
+
"value": value.value,
|
|
148
172
|
"prefixCls": prefixCls,
|
|
149
173
|
"onResize": handleResize,
|
|
150
174
|
"ref": resizableTextAreaRef,
|
|
@@ -173,11 +197,6 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
173
197
|
required: false,
|
|
174
198
|
default: void 0
|
|
175
199
|
},
|
|
176
|
-
className: {
|
|
177
|
-
type: String,
|
|
178
|
-
required: false,
|
|
179
|
-
default: void 0
|
|
180
|
-
},
|
|
181
200
|
autoSize: {
|
|
182
201
|
type: [Boolean, Object],
|
|
183
202
|
required: false,
|
|
@@ -252,6 +271,21 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
252
271
|
type: Boolean,
|
|
253
272
|
required: false,
|
|
254
273
|
default: void 0
|
|
274
|
+
},
|
|
275
|
+
placeholder: {
|
|
276
|
+
type: String,
|
|
277
|
+
required: false,
|
|
278
|
+
default: void 0
|
|
279
|
+
},
|
|
280
|
+
autoFocus: {
|
|
281
|
+
type: Boolean,
|
|
282
|
+
required: false,
|
|
283
|
+
default: void 0
|
|
284
|
+
},
|
|
285
|
+
onKeydown: {
|
|
286
|
+
type: Function,
|
|
287
|
+
required: false,
|
|
288
|
+
default: void 0
|
|
255
289
|
}
|
|
256
290
|
}, { prefixCls: "vc-textarea" }),
|
|
257
291
|
name: "TextArea",
|
package/dist/TextArea.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import ResizableTextArea_default from "./ResizableTextArea.js";
|
|
2
2
|
import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
|
|
3
3
|
import { clsx } from "@v-c/util";
|
|
4
|
+
import omit from "@v-c/util/dist/omit";
|
|
4
5
|
import { getAttrStyleAndClass, toPropsRefs } from "@v-c/util/dist/props-util";
|
|
5
6
|
import { BaseInput, resolveOnChange, useCount } from "@v-c/input";
|
|
6
|
-
import { KeyCodeStr } from "@v-c/util/dist/KeyCode
|
|
7
|
+
import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
|
|
7
8
|
var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
|
|
8
9
|
const { count, showCount } = toPropsRefs(props, "count", "showCount");
|
|
9
10
|
const value = shallowRef(props?.value ?? props?.defaultValue ?? "");
|
|
@@ -48,8 +49,11 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
48
49
|
let cutValue = currentValue;
|
|
49
50
|
if (!compositionRef.value && countConfig.value.exceedFormatter && countConfig.value.max && countConfig.value.strategy(currentValue) > countConfig.value.max) {
|
|
50
51
|
cutValue = countConfig.value.exceedFormatter(currentValue, { max: countConfig.value.max });
|
|
51
|
-
|
|
52
|
+
const textarea$1 = getTextArea();
|
|
53
|
+
if (currentValue !== cutValue) selection.value = [textarea$1.selectionStart || 0, textarea$1.selectionEnd || 0];
|
|
52
54
|
}
|
|
55
|
+
const textarea = getTextArea();
|
|
56
|
+
if (!compositionRef.value && textarea && textarea.value !== cutValue) textarea.value = cutValue;
|
|
53
57
|
value.value = cutValue;
|
|
54
58
|
resolveOnChange(e.currentTarget, e, props.onChange, cutValue);
|
|
55
59
|
};
|
|
@@ -66,6 +70,7 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
66
70
|
const handleKeyDown = (e) => {
|
|
67
71
|
const { onPressEnter } = props;
|
|
68
72
|
if (e.key === KeyCodeStr.Enter && onPressEnter && !e.isComposing) onPressEnter(e);
|
|
73
|
+
props?.onKeydown?.(e);
|
|
69
74
|
};
|
|
70
75
|
const handleFocus = () => {
|
|
71
76
|
focused.value = true;
|
|
@@ -83,8 +88,8 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
83
88
|
if (getTextArea()?.style.height) textareaResized.value = true;
|
|
84
89
|
};
|
|
85
90
|
return () => {
|
|
86
|
-
const { suffix,
|
|
87
|
-
const { style, restAttrs } = getAttrStyleAndClass(attrs);
|
|
91
|
+
const { suffix, classNames, styles, prefixCls = "vc-textarea", allowClear, autoSize, showCount: showCount$1, disabled, hidden, readOnly, onClear, maxLength } = props;
|
|
92
|
+
const { style, restAttrs, className } = getAttrStyleAndClass(attrs);
|
|
88
93
|
let suffixNode = suffix;
|
|
89
94
|
let dataCount;
|
|
90
95
|
if (countConfig.value.show) {
|
|
@@ -132,17 +137,35 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
132
137
|
"hidden": hidden,
|
|
133
138
|
"readOnly": readOnly,
|
|
134
139
|
"onClear": onClear
|
|
135
|
-
}, { default: () => [createVNode(ResizableTextArea_default, mergeProps(restAttrs,
|
|
140
|
+
}, { default: () => [createVNode(ResizableTextArea_default, mergeProps(restAttrs, omit(props, [
|
|
141
|
+
"suffix",
|
|
142
|
+
"classNames",
|
|
143
|
+
"styles",
|
|
144
|
+
"prefixCls",
|
|
145
|
+
"allowClear",
|
|
146
|
+
"autoSize",
|
|
147
|
+
"showCount",
|
|
148
|
+
"disabled",
|
|
149
|
+
"hidden",
|
|
150
|
+
"readOnly",
|
|
151
|
+
"onClear",
|
|
152
|
+
"maxLength",
|
|
153
|
+
"onResize",
|
|
154
|
+
"onChange",
|
|
155
|
+
"onKeydown",
|
|
156
|
+
"onPressEnter"
|
|
157
|
+
]), {
|
|
136
158
|
"autoSize": autoSize,
|
|
137
159
|
"maxLength": maxLength,
|
|
138
160
|
"onChange": onInternalChange
|
|
139
161
|
}, textareaProps, {
|
|
140
|
-
"
|
|
162
|
+
"class": clsx(classNames?.textarea),
|
|
141
163
|
"style": {
|
|
142
164
|
resize: style?.resize,
|
|
143
165
|
...styles?.textarea
|
|
144
166
|
},
|
|
145
167
|
"disabled": disabled,
|
|
168
|
+
"value": value.value,
|
|
146
169
|
"prefixCls": prefixCls,
|
|
147
170
|
"onResize": handleResize,
|
|
148
171
|
"ref": resizableTextAreaRef,
|
|
@@ -171,11 +194,6 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
171
194
|
required: false,
|
|
172
195
|
default: void 0
|
|
173
196
|
},
|
|
174
|
-
className: {
|
|
175
|
-
type: String,
|
|
176
|
-
required: false,
|
|
177
|
-
default: void 0
|
|
178
|
-
},
|
|
179
197
|
autoSize: {
|
|
180
198
|
type: [Boolean, Object],
|
|
181
199
|
required: false,
|
|
@@ -250,6 +268,21 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
250
268
|
type: Boolean,
|
|
251
269
|
required: false,
|
|
252
270
|
default: void 0
|
|
271
|
+
},
|
|
272
|
+
placeholder: {
|
|
273
|
+
type: String,
|
|
274
|
+
required: false,
|
|
275
|
+
default: void 0
|
|
276
|
+
},
|
|
277
|
+
autoFocus: {
|
|
278
|
+
type: Boolean,
|
|
279
|
+
required: false,
|
|
280
|
+
default: void 0
|
|
281
|
+
},
|
|
282
|
+
onKeydown: {
|
|
283
|
+
type: Function,
|
|
284
|
+
required: false,
|
|
285
|
+
default: void 0
|
|
253
286
|
}
|
|
254
287
|
}, { prefixCls: "vc-textarea" }),
|
|
255
288
|
name: "TextArea",
|
package/dist/interface.d.ts
CHANGED
|
@@ -13,7 +13,6 @@ export interface TextAreaProps {
|
|
|
13
13
|
defaultValue?: any;
|
|
14
14
|
prefixCls?: string;
|
|
15
15
|
disabled?: boolean;
|
|
16
|
-
className?: string;
|
|
17
16
|
autoSize?: boolean | AutoSizeType;
|
|
18
17
|
onPressEnter?: (e: any) => void;
|
|
19
18
|
onResize?: (size: {
|
|
@@ -38,6 +37,9 @@ export interface TextAreaProps {
|
|
|
38
37
|
minLength?: number;
|
|
39
38
|
hidden?: boolean;
|
|
40
39
|
readOnly?: boolean;
|
|
40
|
+
placeholder?: string;
|
|
41
|
+
autoFocus?: boolean;
|
|
42
|
+
onKeydown?: (e: KeyboardEvent) => void;
|
|
41
43
|
}
|
|
42
44
|
export interface TextAreaRef {
|
|
43
45
|
resizableTextArea: ResizableTextAreaRef;
|