@v-c/textarea 0.0.7 → 1.0.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.
- package/dist/ResizableTextArea.cjs +39 -17
- package/dist/ResizableTextArea.js +38 -17
- package/dist/TextArea.cjs +45 -16
- package/dist/TextArea.js +43 -15
- package/dist/interface.d.ts +3 -2
- package/package.json +4 -3
|
@@ -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,
|
|
@@ -183,20 +195,30 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
183
195
|
required: false,
|
|
184
196
|
default: void 0
|
|
185
197
|
},
|
|
186
|
-
|
|
187
|
-
type:
|
|
198
|
+
hidden: {
|
|
199
|
+
type: Boolean,
|
|
188
200
|
required: false,
|
|
189
201
|
default: void 0
|
|
190
202
|
},
|
|
191
|
-
|
|
203
|
+
readOnly: {
|
|
192
204
|
type: Boolean,
|
|
193
205
|
required: false,
|
|
194
206
|
default: void 0
|
|
195
207
|
},
|
|
196
|
-
|
|
208
|
+
placeholder: {
|
|
209
|
+
type: String,
|
|
210
|
+
required: false,
|
|
211
|
+
default: void 0
|
|
212
|
+
},
|
|
213
|
+
autoFocus: {
|
|
197
214
|
type: Boolean,
|
|
198
215
|
required: false,
|
|
199
216
|
default: void 0
|
|
217
|
+
},
|
|
218
|
+
onKeydown: {
|
|
219
|
+
type: Function,
|
|
220
|
+
required: false,
|
|
221
|
+
default: void 0
|
|
200
222
|
}
|
|
201
223
|
},
|
|
202
224
|
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,
|
|
@@ -179,20 +190,30 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
179
190
|
required: false,
|
|
180
191
|
default: void 0
|
|
181
192
|
},
|
|
182
|
-
|
|
183
|
-
type:
|
|
193
|
+
hidden: {
|
|
194
|
+
type: Boolean,
|
|
184
195
|
required: false,
|
|
185
196
|
default: void 0
|
|
186
197
|
},
|
|
187
|
-
|
|
198
|
+
readOnly: {
|
|
188
199
|
type: Boolean,
|
|
189
200
|
required: false,
|
|
190
201
|
default: void 0
|
|
191
202
|
},
|
|
192
|
-
|
|
203
|
+
placeholder: {
|
|
204
|
+
type: String,
|
|
205
|
+
required: false,
|
|
206
|
+
default: void 0
|
|
207
|
+
},
|
|
208
|
+
autoFocus: {
|
|
193
209
|
type: Boolean,
|
|
194
210
|
required: false,
|
|
195
211
|
default: void 0
|
|
212
|
+
},
|
|
213
|
+
onKeydown: {
|
|
214
|
+
type: Function,
|
|
215
|
+
required: false,
|
|
216
|
+
default: void 0
|
|
196
217
|
}
|
|
197
218
|
},
|
|
198
219
|
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,
|
|
@@ -238,20 +257,30 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
238
257
|
required: false,
|
|
239
258
|
default: void 0
|
|
240
259
|
},
|
|
241
|
-
|
|
242
|
-
type:
|
|
260
|
+
hidden: {
|
|
261
|
+
type: Boolean,
|
|
243
262
|
required: false,
|
|
244
263
|
default: void 0
|
|
245
264
|
},
|
|
246
|
-
|
|
265
|
+
readOnly: {
|
|
247
266
|
type: Boolean,
|
|
248
267
|
required: false,
|
|
249
268
|
default: void 0
|
|
250
269
|
},
|
|
251
|
-
|
|
270
|
+
placeholder: {
|
|
271
|
+
type: String,
|
|
272
|
+
required: false,
|
|
273
|
+
default: void 0
|
|
274
|
+
},
|
|
275
|
+
autoFocus: {
|
|
252
276
|
type: Boolean,
|
|
253
277
|
required: false,
|
|
254
278
|
default: void 0
|
|
279
|
+
},
|
|
280
|
+
onKeydown: {
|
|
281
|
+
type: Function,
|
|
282
|
+
required: false,
|
|
283
|
+
default: void 0
|
|
255
284
|
}
|
|
256
285
|
}, { prefixCls: "vc-textarea" }),
|
|
257
286
|
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,
|
|
@@ -236,20 +254,30 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
236
254
|
required: false,
|
|
237
255
|
default: void 0
|
|
238
256
|
},
|
|
239
|
-
|
|
240
|
-
type:
|
|
257
|
+
hidden: {
|
|
258
|
+
type: Boolean,
|
|
241
259
|
required: false,
|
|
242
260
|
default: void 0
|
|
243
261
|
},
|
|
244
|
-
|
|
262
|
+
readOnly: {
|
|
245
263
|
type: Boolean,
|
|
246
264
|
required: false,
|
|
247
265
|
default: void 0
|
|
248
266
|
},
|
|
249
|
-
|
|
267
|
+
placeholder: {
|
|
268
|
+
type: String,
|
|
269
|
+
required: false,
|
|
270
|
+
default: void 0
|
|
271
|
+
},
|
|
272
|
+
autoFocus: {
|
|
250
273
|
type: Boolean,
|
|
251
274
|
required: false,
|
|
252
275
|
default: void 0
|
|
276
|
+
},
|
|
277
|
+
onKeydown: {
|
|
278
|
+
type: Function,
|
|
279
|
+
required: false,
|
|
280
|
+
default: void 0
|
|
253
281
|
}
|
|
254
282
|
}, { prefixCls: "vc-textarea" }),
|
|
255
283
|
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: {
|
|
@@ -35,9 +34,11 @@ export interface TextAreaProps {
|
|
|
35
34
|
onClear?: InputProps['onClear'];
|
|
36
35
|
onChange?: ChangeEventHandler;
|
|
37
36
|
maxLength?: number;
|
|
38
|
-
minLength?: number;
|
|
39
37
|
hidden?: boolean;
|
|
40
38
|
readOnly?: boolean;
|
|
39
|
+
placeholder?: string;
|
|
40
|
+
autoFocus?: boolean;
|
|
41
|
+
onKeydown?: (e: KeyboardEvent) => void;
|
|
41
42
|
}
|
|
42
43
|
export interface TextAreaRef {
|
|
43
44
|
resizableTextArea: ResizableTextAreaRef;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/textarea",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0
|
|
4
|
+
"version": "1.0.0",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"vue": "^3.0.0"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@v-c/input": "^0.0
|
|
26
|
+
"@v-c/input": "^1.0.0",
|
|
27
27
|
"@v-c/resize-observer": "^1.0.0",
|
|
28
28
|
"@v-c/util": "^1.0.1"
|
|
29
29
|
},
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"build": "vite build",
|
|
32
32
|
"prepublish": "pnpm build",
|
|
33
33
|
"test": "vitest run",
|
|
34
|
-
"
|
|
34
|
+
"patch": "bumpp --release patch",
|
|
35
|
+
"bump": "bumpp"
|
|
35
36
|
}
|
|
36
37
|
}
|