@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.
@@ -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, async () => {
49
- await (0, vue.nextTick)();
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
- }, { immediate: true });
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, className } = props;
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
- "onChange": onInternalChange
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, async () => {
45
- await nextTick();
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
- }, { immediate: true });
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, className } = props;
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
- "onChange": onInternalChange
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 __v_c_util_dist_KeyCode_ts = require("@v-c/util/dist/KeyCode.ts");
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
- if (currentValue !== cutValue) selection.value = [getTextArea().selectionStart || 0, getTextArea().selectionEnd || 0];
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 === __v_c_util_dist_KeyCode_ts.KeyCodeStr.Enter && onPressEnter && !e.isComposing) onPressEnter(e);
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, className, classNames, styles, prefixCls = "vc-textarea", allowClear, autoSize, showCount: showCount$1, disabled, hidden, readOnly, onClear, maxLength } = props;
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
- "className": (0, __v_c_util.clsx)(classNames?.textarea),
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.ts";
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
- if (currentValue !== cutValue) selection.value = [getTextArea().selectionStart || 0, getTextArea().selectionEnd || 0];
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, className, classNames, styles, prefixCls = "vc-textarea", allowClear, autoSize, showCount: showCount$1, disabled, hidden, readOnly, onClear, maxLength } = props;
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
- "className": clsx(classNames?.textarea),
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",
@@ -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;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@v-c/textarea",
3
3
  "type": "module",
4
- "version": "0.0.7",
4
+ "version": "0.0.8",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },