@v-c/textarea 1.0.0 → 1.0.2
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 +42 -25
- package/dist/ResizableTextArea.js +28 -13
- package/dist/TextArea.cjs +44 -26
- package/dist/TextArea.js +22 -7
- package/dist/calculateNodeHeight.cjs +4 -1
- package/dist/index.cjs +4 -1
- package/dist/index.d.ts +1 -1
- package/dist/interface.cjs +1 -0
- package/dist/interface.d.ts +3 -0
- package/package.json +4 -4
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
3
6
|
const require_calculateNodeHeight = require("./calculateNodeHeight.cjs");
|
|
4
7
|
let vue = require("vue");
|
|
5
|
-
let
|
|
6
|
-
|
|
7
|
-
let
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
let
|
|
11
|
-
|
|
12
|
-
__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
|
|
8
|
+
let _v_c_resize_observer = require("@v-c/resize-observer");
|
|
9
|
+
let _v_c_util = require("@v-c/util");
|
|
10
|
+
let _v_c_util_dist_omit = require("@v-c/util/dist/omit");
|
|
11
|
+
_v_c_util_dist_omit = require_rolldown_runtime.__toESM(_v_c_util_dist_omit);
|
|
12
|
+
let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
13
|
+
let _v_c_util_dist_raf = require("@v-c/util/dist/raf");
|
|
14
|
+
_v_c_util_dist_raf = require_rolldown_runtime.__toESM(_v_c_util_dist_raf);
|
|
13
15
|
var RESIZE_START = 0;
|
|
14
16
|
var RESIZE_MEASURING = 1;
|
|
15
17
|
var RESIZE_STABLE = 2;
|
|
@@ -46,8 +48,11 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
46
48
|
], async () => {
|
|
47
49
|
await (0, vue.nextTick)();
|
|
48
50
|
if (needAutoSize.value) startResize();
|
|
49
|
-
}, {
|
|
50
|
-
|
|
51
|
+
}, {
|
|
52
|
+
immediate: true,
|
|
53
|
+
flush: "post"
|
|
54
|
+
});
|
|
55
|
+
(0, vue.watch)([resizeState, textareaRef], () => {
|
|
51
56
|
if (!textareaRef.value) return;
|
|
52
57
|
if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
|
|
53
58
|
else if (resizeState.value === RESIZE_MEASURING) {
|
|
@@ -58,14 +63,14 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
58
63
|
});
|
|
59
64
|
const resizeRafRef = (0, vue.shallowRef)();
|
|
60
65
|
const cleanRaf = () => {
|
|
61
|
-
|
|
66
|
+
_v_c_util_dist_raf.default.cancel(resizeRafRef.value);
|
|
62
67
|
};
|
|
63
68
|
const onInternalResize = (size) => {
|
|
64
69
|
if (resizeState.value === RESIZE_STABLE) {
|
|
65
70
|
props?.onResize?.(size);
|
|
66
71
|
if (props.autoSize) {
|
|
67
72
|
cleanRaf();
|
|
68
|
-
resizeRafRef.value = (0,
|
|
73
|
+
resizeRafRef.value = (0, _v_c_util_dist_raf.default)(() => {
|
|
69
74
|
startResize();
|
|
70
75
|
});
|
|
71
76
|
}
|
|
@@ -74,9 +79,12 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
74
79
|
(0, vue.onUnmounted)(() => {
|
|
75
80
|
cleanRaf();
|
|
76
81
|
});
|
|
82
|
+
(0, _v_c_resize_observer.useResizeObserver)((0, vue.computed)(() => {
|
|
83
|
+
return !!(props.autoSize || props.onResize);
|
|
84
|
+
}), textareaRef, onInternalResize);
|
|
77
85
|
return () => {
|
|
78
|
-
const {
|
|
79
|
-
const { style, restAttrs, className } = (0,
|
|
86
|
+
const { prefixCls, disabled, readOnly } = props;
|
|
87
|
+
const { style, restAttrs, className } = (0, _v_c_util_dist_props_util.getAttrStyleAndClass)(attrs, { omits: ["onKeydown"] });
|
|
80
88
|
const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
|
|
81
89
|
const mergedStyle = {
|
|
82
90
|
...style,
|
|
@@ -86,10 +94,7 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
86
94
|
mergedStyle.overflowY = "hidden";
|
|
87
95
|
mergedStyle.overflowX = "hidden";
|
|
88
96
|
}
|
|
89
|
-
return (0, vue.createVNode)(
|
|
90
|
-
"onResize": onInternalResize,
|
|
91
|
-
"disabled": !(autoSize || onResize)
|
|
92
|
-
}, { default: () => [(0, vue.createVNode)("textarea", (0, vue.mergeProps)(restAttrs, (0, __v_c_util_dist_omit.default)(props, [
|
|
97
|
+
return (0, vue.createVNode)("textarea", (0, vue.mergeProps)((0, _v_c_util_dist_omit.default)(restAttrs, ["readonly"]), (0, _v_c_util_dist_omit.default)(props, [
|
|
93
98
|
"suffix",
|
|
94
99
|
"classNames",
|
|
95
100
|
"styles",
|
|
@@ -105,23 +110,22 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
105
110
|
"onResize",
|
|
106
111
|
"onChange"
|
|
107
112
|
]), {
|
|
113
|
+
"readonly": restAttrs?.readonly ?? readOnly,
|
|
108
114
|
"ref": textareaRef,
|
|
109
115
|
"style": mergedStyle,
|
|
110
|
-
"class": (0,
|
|
116
|
+
"class": (0, _v_c_util.clsx)(prefixCls, className, { [`${prefixCls}-disabled`]: disabled }),
|
|
111
117
|
"disabled": disabled,
|
|
112
118
|
"value": mergedValue.value,
|
|
113
119
|
"onInput": onInternalChange
|
|
114
|
-
}), null)
|
|
120
|
+
}), null);
|
|
115
121
|
};
|
|
116
122
|
}, {
|
|
117
123
|
props: {
|
|
118
124
|
value: {
|
|
119
|
-
type: null,
|
|
120
125
|
required: false,
|
|
121
126
|
default: void 0
|
|
122
127
|
},
|
|
123
128
|
defaultValue: {
|
|
124
|
-
type: null,
|
|
125
129
|
required: false,
|
|
126
130
|
default: void 0
|
|
127
131
|
},
|
|
@@ -166,7 +170,6 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
166
170
|
default: void 0
|
|
167
171
|
},
|
|
168
172
|
suffix: {
|
|
169
|
-
type: null,
|
|
170
173
|
required: false,
|
|
171
174
|
default: void 0
|
|
172
175
|
},
|
|
@@ -176,7 +179,6 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
176
179
|
default: void 0
|
|
177
180
|
},
|
|
178
181
|
count: {
|
|
179
|
-
type: null,
|
|
180
182
|
required: false,
|
|
181
183
|
default: void 0
|
|
182
184
|
},
|
|
@@ -219,6 +221,21 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
|
|
|
219
221
|
type: Function,
|
|
220
222
|
required: false,
|
|
221
223
|
default: void 0
|
|
224
|
+
},
|
|
225
|
+
onKeyup: {
|
|
226
|
+
type: Function,
|
|
227
|
+
required: false,
|
|
228
|
+
default: void 0
|
|
229
|
+
},
|
|
230
|
+
onFocus: {
|
|
231
|
+
type: Function,
|
|
232
|
+
required: false,
|
|
233
|
+
default: void 0
|
|
234
|
+
},
|
|
235
|
+
onBlur: {
|
|
236
|
+
type: Function,
|
|
237
|
+
required: false,
|
|
238
|
+
default: void 0
|
|
222
239
|
}
|
|
223
240
|
},
|
|
224
241
|
name: "ResizableTextArea",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import calculateAutoSizeStyle from "./calculateNodeHeight.js";
|
|
2
2
|
import { computed, createVNode, defineComponent, mergeProps, nextTick, onUnmounted, ref, shallowRef, watch } from "vue";
|
|
3
|
-
import
|
|
3
|
+
import { useResizeObserver } from "@v-c/resize-observer";
|
|
4
4
|
import { clsx } from "@v-c/util";
|
|
5
5
|
import omit from "@v-c/util/dist/omit";
|
|
6
6
|
import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
|
|
@@ -41,8 +41,11 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
41
41
|
], async () => {
|
|
42
42
|
await nextTick();
|
|
43
43
|
if (needAutoSize.value) startResize();
|
|
44
|
-
}, {
|
|
45
|
-
|
|
44
|
+
}, {
|
|
45
|
+
immediate: true,
|
|
46
|
+
flush: "post"
|
|
47
|
+
});
|
|
48
|
+
watch([resizeState, textareaRef], () => {
|
|
46
49
|
if (!textareaRef.value) return;
|
|
47
50
|
if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
|
|
48
51
|
else if (resizeState.value === RESIZE_MEASURING) {
|
|
@@ -69,8 +72,11 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
69
72
|
onUnmounted(() => {
|
|
70
73
|
cleanRaf();
|
|
71
74
|
});
|
|
75
|
+
useResizeObserver(computed(() => {
|
|
76
|
+
return !!(props.autoSize || props.onResize);
|
|
77
|
+
}), textareaRef, onInternalResize);
|
|
72
78
|
return () => {
|
|
73
|
-
const {
|
|
79
|
+
const { prefixCls, disabled, readOnly } = props;
|
|
74
80
|
const { style, restAttrs, className } = getAttrStyleAndClass(attrs, { omits: ["onKeydown"] });
|
|
75
81
|
const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
|
|
76
82
|
const mergedStyle = {
|
|
@@ -81,10 +87,7 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
81
87
|
mergedStyle.overflowY = "hidden";
|
|
82
88
|
mergedStyle.overflowX = "hidden";
|
|
83
89
|
}
|
|
84
|
-
return createVNode(
|
|
85
|
-
"onResize": onInternalResize,
|
|
86
|
-
"disabled": !(autoSize || onResize)
|
|
87
|
-
}, { default: () => [createVNode("textarea", mergeProps(restAttrs, omit(props, [
|
|
90
|
+
return createVNode("textarea", mergeProps(omit(restAttrs, ["readonly"]), omit(props, [
|
|
88
91
|
"suffix",
|
|
89
92
|
"classNames",
|
|
90
93
|
"styles",
|
|
@@ -100,23 +103,22 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
100
103
|
"onResize",
|
|
101
104
|
"onChange"
|
|
102
105
|
]), {
|
|
106
|
+
"readonly": restAttrs?.readonly ?? readOnly,
|
|
103
107
|
"ref": textareaRef,
|
|
104
108
|
"style": mergedStyle,
|
|
105
109
|
"class": clsx(prefixCls, className, { [`${prefixCls}-disabled`]: disabled }),
|
|
106
110
|
"disabled": disabled,
|
|
107
111
|
"value": mergedValue.value,
|
|
108
112
|
"onInput": onInternalChange
|
|
109
|
-
}), null)
|
|
113
|
+
}), null);
|
|
110
114
|
};
|
|
111
115
|
}, {
|
|
112
116
|
props: {
|
|
113
117
|
value: {
|
|
114
|
-
type: null,
|
|
115
118
|
required: false,
|
|
116
119
|
default: void 0
|
|
117
120
|
},
|
|
118
121
|
defaultValue: {
|
|
119
|
-
type: null,
|
|
120
122
|
required: false,
|
|
121
123
|
default: void 0
|
|
122
124
|
},
|
|
@@ -161,7 +163,6 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
161
163
|
default: void 0
|
|
162
164
|
},
|
|
163
165
|
suffix: {
|
|
164
|
-
type: null,
|
|
165
166
|
required: false,
|
|
166
167
|
default: void 0
|
|
167
168
|
},
|
|
@@ -171,7 +172,6 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
171
172
|
default: void 0
|
|
172
173
|
},
|
|
173
174
|
count: {
|
|
174
|
-
type: null,
|
|
175
175
|
required: false,
|
|
176
176
|
default: void 0
|
|
177
177
|
},
|
|
@@ -214,6 +214,21 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
|
|
|
214
214
|
type: Function,
|
|
215
215
|
required: false,
|
|
216
216
|
default: void 0
|
|
217
|
+
},
|
|
218
|
+
onKeyup: {
|
|
219
|
+
type: Function,
|
|
220
|
+
required: false,
|
|
221
|
+
default: void 0
|
|
222
|
+
},
|
|
223
|
+
onFocus: {
|
|
224
|
+
type: Function,
|
|
225
|
+
required: false,
|
|
226
|
+
default: void 0
|
|
227
|
+
},
|
|
228
|
+
onBlur: {
|
|
229
|
+
type: Function,
|
|
230
|
+
required: false,
|
|
231
|
+
default: void 0
|
|
217
232
|
}
|
|
218
233
|
},
|
|
219
234
|
name: "ResizableTextArea",
|
package/dist/TextArea.cjs
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
3
6
|
const require_ResizableTextArea = require("./ResizableTextArea.cjs");
|
|
4
7
|
let vue = require("vue");
|
|
5
|
-
let
|
|
6
|
-
let
|
|
7
|
-
|
|
8
|
-
let
|
|
9
|
-
let
|
|
10
|
-
let
|
|
8
|
+
let _v_c_util = require("@v-c/util");
|
|
9
|
+
let _v_c_util_dist_omit = require("@v-c/util/dist/omit");
|
|
10
|
+
_v_c_util_dist_omit = require_rolldown_runtime.__toESM(_v_c_util_dist_omit);
|
|
11
|
+
let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
12
|
+
let _v_c_input = require("@v-c/input");
|
|
13
|
+
let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
|
|
11
14
|
var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs }) => {
|
|
12
|
-
const { count, showCount } = (0,
|
|
15
|
+
const { count, showCount } = (0, _v_c_util_dist_props_util.toPropsRefs)(props, "count", "showCount");
|
|
13
16
|
const value = (0, vue.shallowRef)(props?.value ?? props?.defaultValue ?? "");
|
|
14
17
|
(0, vue.watch)(() => props.value, () => {
|
|
15
18
|
value.value = props.value;
|
|
@@ -43,7 +46,7 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
43
46
|
(0, vue.watch)(selection, () => {
|
|
44
47
|
if (selection.value) getTextArea().setSelectionRange(...selection.value);
|
|
45
48
|
});
|
|
46
|
-
const countConfig = (0,
|
|
49
|
+
const countConfig = (0, _v_c_input.useCount)(count, showCount);
|
|
47
50
|
const mergedMax = (0, vue.computed)(() => countConfig.value.max ?? props.maxLength);
|
|
48
51
|
const hasMaxLength = (0, vue.computed)(() => Number(mergedMax.value) > 0);
|
|
49
52
|
const valueLength = (0, vue.computed)(() => countConfig.value.strategy(formatValue.value));
|
|
@@ -58,7 +61,7 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
58
61
|
const textarea = getTextArea();
|
|
59
62
|
if (!compositionRef.value && textarea && textarea.value !== cutValue) textarea.value = cutValue;
|
|
60
63
|
value.value = cutValue;
|
|
61
|
-
(0,
|
|
64
|
+
(0, _v_c_input.resolveOnChange)(e.currentTarget, e, props.onChange, cutValue);
|
|
62
65
|
};
|
|
63
66
|
const onInternalCompositionStart = () => {
|
|
64
67
|
compositionRef.value = true;
|
|
@@ -72,19 +75,21 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
72
75
|
};
|
|
73
76
|
const handleKeyDown = (e) => {
|
|
74
77
|
const { onPressEnter } = props;
|
|
75
|
-
if (e.key ===
|
|
78
|
+
if (e.key === _v_c_util_dist_KeyCode.KeyCodeStr.Enter && onPressEnter && !e.isComposing) onPressEnter(e);
|
|
76
79
|
props?.onKeydown?.(e);
|
|
77
80
|
};
|
|
78
|
-
const handleFocus = () => {
|
|
81
|
+
const handleFocus = (e) => {
|
|
79
82
|
focused.value = true;
|
|
83
|
+
props?.onFocus?.(e);
|
|
80
84
|
};
|
|
81
|
-
const handleBlur = () => {
|
|
85
|
+
const handleBlur = (e) => {
|
|
82
86
|
focused.value = false;
|
|
87
|
+
props?.onBlur?.(e);
|
|
83
88
|
};
|
|
84
89
|
const handleReset = (e) => {
|
|
85
90
|
value.value = "";
|
|
86
91
|
focus();
|
|
87
|
-
(0,
|
|
92
|
+
(0, _v_c_input.resolveOnChange)(getTextArea(), e, props.onChange);
|
|
88
93
|
};
|
|
89
94
|
const handleResize = (size) => {
|
|
90
95
|
props?.onResize?.(size);
|
|
@@ -92,7 +97,7 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
92
97
|
};
|
|
93
98
|
return () => {
|
|
94
99
|
const { suffix, classNames, styles, prefixCls = "vc-textarea", allowClear, autoSize, showCount: showCount$1, disabled, hidden, readOnly, onClear, maxLength } = props;
|
|
95
|
-
const { style, restAttrs, className } = (0,
|
|
100
|
+
const { style, restAttrs, className } = (0, _v_c_util_dist_props_util.getAttrStyleAndClass)(attrs);
|
|
96
101
|
let suffixNode = suffix;
|
|
97
102
|
let dataCount;
|
|
98
103
|
if (countConfig.value.show) {
|
|
@@ -103,7 +108,7 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
103
108
|
});
|
|
104
109
|
else dataCount = `${valueLength.value}${hasMaxLength.value ? ` / ${mergedMax.value}` : ""}`;
|
|
105
110
|
suffixNode = (0, vue.createVNode)(vue.Fragment, null, [suffixNode, (0, vue.createVNode)("span", {
|
|
106
|
-
"class": (0,
|
|
111
|
+
"class": (0, _v_c_util.clsx)(`${prefixCls}-data-count`, classNames?.count),
|
|
107
112
|
"style": styles?.count
|
|
108
113
|
}, [dataCount])]);
|
|
109
114
|
}
|
|
@@ -115,7 +120,7 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
115
120
|
onCompositionstart: onInternalCompositionStart,
|
|
116
121
|
onCompositionend: onInternalCompositionEnd
|
|
117
122
|
};
|
|
118
|
-
return (0, vue.createVNode)(
|
|
123
|
+
return (0, vue.createVNode)(_v_c_input.BaseInput, {
|
|
119
124
|
"ref": holderRef,
|
|
120
125
|
"value": formatValue.value,
|
|
121
126
|
"allowClear": allowClear,
|
|
@@ -124,14 +129,14 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
124
129
|
"prefixCls": prefixCls,
|
|
125
130
|
"classNames": {
|
|
126
131
|
...classNames,
|
|
127
|
-
affixWrapper: (0,
|
|
132
|
+
affixWrapper: (0, _v_c_util.clsx)(classNames?.affixWrapper, {
|
|
128
133
|
[`${prefixCls}-show-count`]: showCount$1,
|
|
129
134
|
[`${prefixCls}-textarea-allow-clear`]: allowClear
|
|
130
135
|
})
|
|
131
136
|
},
|
|
132
137
|
"disabled": disabled,
|
|
133
138
|
"focused": focused.value,
|
|
134
|
-
"class": (0,
|
|
139
|
+
"class": (0, _v_c_util.clsx)(className, isOutOfRange.value && `${prefixCls}-out-of-range`),
|
|
135
140
|
"style": {
|
|
136
141
|
...style,
|
|
137
142
|
...textareaResized.value && !isPureTextArea ? { height: "auto" } : {}
|
|
@@ -140,7 +145,7 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
140
145
|
"hidden": hidden,
|
|
141
146
|
"readOnly": readOnly,
|
|
142
147
|
"onClear": onClear
|
|
143
|
-
}, { default: () => [(0, vue.createVNode)(require_ResizableTextArea.default, (0, vue.mergeProps)(restAttrs, (0,
|
|
148
|
+
}, { default: () => [(0, vue.createVNode)(require_ResizableTextArea.default, (0, vue.mergeProps)(restAttrs, (0, _v_c_util_dist_omit.default)(props, [
|
|
144
149
|
"suffix",
|
|
145
150
|
"classNames",
|
|
146
151
|
"styles",
|
|
@@ -156,13 +161,15 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
156
161
|
"onResize",
|
|
157
162
|
"onChange",
|
|
158
163
|
"onKeydown",
|
|
159
|
-
"onPressEnter"
|
|
164
|
+
"onPressEnter",
|
|
165
|
+
"onFocus",
|
|
166
|
+
"onBlur"
|
|
160
167
|
]), {
|
|
161
168
|
"autoSize": autoSize,
|
|
162
169
|
"maxLength": maxLength,
|
|
163
170
|
"onChange": onInternalChange
|
|
164
171
|
}, textareaProps, {
|
|
165
|
-
"class": (0,
|
|
172
|
+
"class": (0, _v_c_util.clsx)(classNames?.textarea),
|
|
166
173
|
"style": {
|
|
167
174
|
resize: style?.resize,
|
|
168
175
|
...styles?.textarea
|
|
@@ -178,12 +185,10 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
178
185
|
}, {
|
|
179
186
|
props: /* @__PURE__ */ (0, vue.mergeDefaults)({
|
|
180
187
|
value: {
|
|
181
|
-
type: null,
|
|
182
188
|
required: false,
|
|
183
189
|
default: void 0
|
|
184
190
|
},
|
|
185
191
|
defaultValue: {
|
|
186
|
-
type: null,
|
|
187
192
|
required: false,
|
|
188
193
|
default: void 0
|
|
189
194
|
},
|
|
@@ -228,7 +233,6 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
228
233
|
default: void 0
|
|
229
234
|
},
|
|
230
235
|
suffix: {
|
|
231
|
-
type: null,
|
|
232
236
|
required: false,
|
|
233
237
|
default: void 0
|
|
234
238
|
},
|
|
@@ -238,7 +242,6 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
238
242
|
default: void 0
|
|
239
243
|
},
|
|
240
244
|
count: {
|
|
241
|
-
type: null,
|
|
242
245
|
required: false,
|
|
243
246
|
default: void 0
|
|
244
247
|
},
|
|
@@ -281,6 +284,21 @@ var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs
|
|
|
281
284
|
type: Function,
|
|
282
285
|
required: false,
|
|
283
286
|
default: void 0
|
|
287
|
+
},
|
|
288
|
+
onKeyup: {
|
|
289
|
+
type: Function,
|
|
290
|
+
required: false,
|
|
291
|
+
default: void 0
|
|
292
|
+
},
|
|
293
|
+
onFocus: {
|
|
294
|
+
type: Function,
|
|
295
|
+
required: false,
|
|
296
|
+
default: void 0
|
|
297
|
+
},
|
|
298
|
+
onBlur: {
|
|
299
|
+
type: Function,
|
|
300
|
+
required: false,
|
|
301
|
+
default: void 0
|
|
284
302
|
}
|
|
285
303
|
}, { prefixCls: "vc-textarea" }),
|
|
286
304
|
name: "TextArea",
|
package/dist/TextArea.js
CHANGED
|
@@ -72,11 +72,13 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
72
72
|
if (e.key === KeyCodeStr.Enter && onPressEnter && !e.isComposing) onPressEnter(e);
|
|
73
73
|
props?.onKeydown?.(e);
|
|
74
74
|
};
|
|
75
|
-
const handleFocus = () => {
|
|
75
|
+
const handleFocus = (e) => {
|
|
76
76
|
focused.value = true;
|
|
77
|
+
props?.onFocus?.(e);
|
|
77
78
|
};
|
|
78
|
-
const handleBlur = () => {
|
|
79
|
+
const handleBlur = (e) => {
|
|
79
80
|
focused.value = false;
|
|
81
|
+
props?.onBlur?.(e);
|
|
80
82
|
};
|
|
81
83
|
const handleReset = (e) => {
|
|
82
84
|
value.value = "";
|
|
@@ -153,7 +155,9 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
153
155
|
"onResize",
|
|
154
156
|
"onChange",
|
|
155
157
|
"onKeydown",
|
|
156
|
-
"onPressEnter"
|
|
158
|
+
"onPressEnter",
|
|
159
|
+
"onFocus",
|
|
160
|
+
"onBlur"
|
|
157
161
|
]), {
|
|
158
162
|
"autoSize": autoSize,
|
|
159
163
|
"maxLength": maxLength,
|
|
@@ -175,12 +179,10 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
175
179
|
}, {
|
|
176
180
|
props: /* @__PURE__ */ mergeDefaults({
|
|
177
181
|
value: {
|
|
178
|
-
type: null,
|
|
179
182
|
required: false,
|
|
180
183
|
default: void 0
|
|
181
184
|
},
|
|
182
185
|
defaultValue: {
|
|
183
|
-
type: null,
|
|
184
186
|
required: false,
|
|
185
187
|
default: void 0
|
|
186
188
|
},
|
|
@@ -225,7 +227,6 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
225
227
|
default: void 0
|
|
226
228
|
},
|
|
227
229
|
suffix: {
|
|
228
|
-
type: null,
|
|
229
230
|
required: false,
|
|
230
231
|
default: void 0
|
|
231
232
|
},
|
|
@@ -235,7 +236,6 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
235
236
|
default: void 0
|
|
236
237
|
},
|
|
237
238
|
count: {
|
|
238
|
-
type: null,
|
|
239
239
|
required: false,
|
|
240
240
|
default: void 0
|
|
241
241
|
},
|
|
@@ -278,6 +278,21 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
|
|
|
278
278
|
type: Function,
|
|
279
279
|
required: false,
|
|
280
280
|
default: void 0
|
|
281
|
+
},
|
|
282
|
+
onKeyup: {
|
|
283
|
+
type: Function,
|
|
284
|
+
required: false,
|
|
285
|
+
default: void 0
|
|
286
|
+
},
|
|
287
|
+
onFocus: {
|
|
288
|
+
type: Function,
|
|
289
|
+
required: false,
|
|
290
|
+
default: void 0
|
|
291
|
+
},
|
|
292
|
+
onBlur: {
|
|
293
|
+
type: Function,
|
|
294
|
+
required: false,
|
|
295
|
+
default: void 0
|
|
281
296
|
}
|
|
282
297
|
}, { prefixCls: "vc-textarea" }),
|
|
283
298
|
name: "TextArea",
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
var HIDDEN_TEXTAREA_STYLE = `
|
|
3
6
|
min-height:0 !important;
|
|
4
7
|
max-height:none !important;
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_ResizableTextArea = require("./ResizableTextArea.cjs");
|
|
3
6
|
const require_TextArea = require("./TextArea.cjs");
|
|
4
7
|
var src_default = require_TextArea.default;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { default as TextArea } from './TextArea';
|
|
2
|
-
export type { AutoSizeType, TextAreaProps, } from './interface';
|
|
2
|
+
export type { AutoSizeType, TextAreaProps, TextAreaRef, } from './interface';
|
|
3
3
|
export { default as ResizableTextArea } from './ResizableTextArea';
|
|
4
4
|
export default TextArea;
|
package/dist/interface.cjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
package/dist/interface.d.ts
CHANGED
|
@@ -39,6 +39,9 @@ export interface TextAreaProps {
|
|
|
39
39
|
placeholder?: string;
|
|
40
40
|
autoFocus?: boolean;
|
|
41
41
|
onKeydown?: (e: KeyboardEvent) => void;
|
|
42
|
+
onKeyup?: (e: KeyboardEvent) => void;
|
|
43
|
+
onFocus?: (e: FocusEvent) => void;
|
|
44
|
+
onBlur?: (e: FocusEvent) => void;
|
|
42
45
|
}
|
|
43
46
|
export interface TextAreaRef {
|
|
44
47
|
resizableTextArea: ResizableTextAreaRef;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/textarea",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"vue": "^3.0.0"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@v-c/input": "^1.0.
|
|
27
|
-
"@v-c/resize-observer": "^1.0.
|
|
28
|
-
"@v-c/util": "^1.0.
|
|
26
|
+
"@v-c/input": "^1.0.1",
|
|
27
|
+
"@v-c/resize-observer": "^1.0.7",
|
|
28
|
+
"@v-c/util": "^1.0.8"
|
|
29
29
|
},
|
|
30
30
|
"scripts": {
|
|
31
31
|
"build": "vite build",
|