@v-c/textarea 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/ResizableTextArea.cjs

@@ -0,0 +1,137 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_calculateNodeHeight = require("./calculateNodeHeight.cjs");
+let vue = require("vue");
+let __v_c_resize_observer = require("@v-c/resize-observer");
+__v_c_resize_observer = require_rolldown_runtime.__toESM(__v_c_resize_observer);
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
+__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
+var RESIZE_START = 0;
+var RESIZE_MEASURING = 1;
+var RESIZE_STABLE = 2;
+var ResizableTextArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "ResizableTextArea",
+	props: {
+		prefixCls: String,
+		defaultValue: [String, Number],
+		value: [String, Number],
+		autoSize: [Boolean, Object],
+		onResize: Function,
+		disabled: Boolean,
+		onChange: Function,
+		onInternalAutoSize: Function,
+		onKeydown: Function,
+		onFocus: Function,
+		onBlur: Function,
+		onCompositionstart: Function,
+		onCompositionend: Function,
+		readOnly: Boolean,
+		maxLength: Number
+	},
+	emits: [
+		"change",
+		"internalAutoSize",
+		"resize"
+	],
+	setup(props, { expose, attrs, emit }) {
+		const mergedValue = (0, vue.shallowRef)(props.value || props.defaultValue);
+		(0, vue.watch)(() => props.value, (val) => {
+			mergedValue.value = val;
+		});
+		const onInternalChange = (event) => {
+			mergedValue.value = event.target.value;
+			emit("change", event);
+		};
+		const textareaRef = (0, vue.ref)();
+		expose({
+			textArea: () => textareaRef.value,
+			setValue: (val) => {
+				mergedValue.value = val;
+			}
+		});
+		const minRows = (0, vue.ref)();
+		const maxRows = (0, vue.ref)();
+		(0, vue.watch)(() => props.autoSize, () => {
+			const { autoSize } = props;
+			if (autoSize && typeof autoSize === "object") {
+				minRows.value = autoSize.minRows;
+				maxRows.value = autoSize.maxRows;
+			} else {
+				minRows.value = void 0;
+				maxRows.value = void 0;
+			}
+		}, { immediate: true });
+		const needAutoSize = (0, vue.computed)(() => !!props.autoSize);
+		const fixFirefoxAutoScroll = () => {
+			try {
+				if (document.activeElement === textareaRef.value) {
+					const { selectionStart, selectionEnd, scrollTop } = textareaRef.value;
+					textareaRef.value.setSelectionRange(selectionStart, selectionEnd);
+					textareaRef.value.scrollTop = scrollTop;
+				}
+			} catch (e) {}
+		};
+		const resizeState = (0, vue.ref)(RESIZE_STABLE);
+		const autoSizeStyle = (0, vue.ref)();
+		const startResize = () => {
+			resizeState.value = RESIZE_START;
+			if (process.env.NODE_ENV === "test") emit("internalAutoSize");
+		};
+		(0, vue.watch)([
+			() => props.value,
+			minRows,
+			maxRows,
+			needAutoSize
+		], () => {
+			if (needAutoSize.value) startResize();
+		});
+		(0, vue.watch)(resizeState, () => {
+			if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
+			else if (resizeState.value === RESIZE_MEASURING) {
+				const textareaStyles = require_calculateNodeHeight.default(textareaRef.value, false, minRows.value, maxRows.value);
+				resizeState.value = RESIZE_STABLE;
+				autoSizeStyle.value = textareaStyles;
+			} else fixFirefoxAutoScroll();
+		});
+		const resizeRafRef = (0, vue.ref)();
+		const cleanRaf = () => {
+			__v_c_util_dist_raf.default.cancel(resizeRafRef.value);
+		};
+		const onInternalResize = (size) => {
+			if (resizeState.value === RESIZE_STABLE) {
+				emit("resize", size);
+				if (props.autoSize) {
+					cleanRaf();
+					resizeRafRef.value = (0, __v_c_util_dist_raf.default)(() => {
+						startResize();
+					});
+				}
+			}
+		};
+		(0, vue.onBeforeUnmount)(() => cleanRaf());
+		return () => {
+			const { prefixCls, autoSize, onResize, disabled,...resetProps } = props;
+			const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
+			const mergedStyle = {
+				...attrs.style,
+				...mergedAutoSizeStyle,
+				overflowY: resizeState.value === RESIZE_START || resizeState.value === RESIZE_MEASURING ? "hidden" : void 0,
+				overflowX: resizeState.value === RESIZE_START || resizeState.value === RESIZE_MEASURING ? "hidden" : void 0
+			};
+			return (0, vue.createVNode)(__v_c_resize_observer.default, {
+				"onResize": onInternalResize,
+				"disabled": !(autoSize || onResize)
+			}, { default: () => [(0, vue.createVNode)("textarea", (0, vue.mergeProps)(attrs, resetProps, {
+				"ref": textareaRef,
+				"style": mergedStyle,
+				"class": (0, __v_c_util.classNames)(prefixCls, [attrs.className], { [`${prefixCls}-disabled`]: disabled }),
+				"disabled": disabled,
+				"value": mergedValue.value,
+				"onChange": onInternalChange,
+				"onInput": onInternalChange
+			}), null)] });
+		};
+	}
+});
+exports.default = ResizableTextArea_default;

package/dist/ResizableTextArea.d.ts

@@ -0,0 +1,41 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: StringConstructor;
+    defaultValue: (StringConstructor | NumberConstructor)[];
+    value: (StringConstructor | NumberConstructor)[];
+    autoSize: (BooleanConstructor | ObjectConstructor)[];
+    onResize: FunctionConstructor;
+    disabled: BooleanConstructor;
+    onChange: FunctionConstructor;
+    onInternalAutoSize: FunctionConstructor;
+    onKeydown: FunctionConstructor;
+    onFocus: FunctionConstructor;
+    onBlur: FunctionConstructor;
+    onCompositionstart: FunctionConstructor;
+    onCompositionend: FunctionConstructor;
+    readOnly: BooleanConstructor;
+    maxLength: NumberConstructor;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("resize" | "change" | "internalAutoSize")[], "resize" | "change" | "internalAutoSize", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: StringConstructor;
+    defaultValue: (StringConstructor | NumberConstructor)[];
+    value: (StringConstructor | NumberConstructor)[];
+    autoSize: (BooleanConstructor | ObjectConstructor)[];
+    onResize: FunctionConstructor;
+    disabled: BooleanConstructor;
+    onChange: FunctionConstructor;
+    onInternalAutoSize: FunctionConstructor;
+    onKeydown: FunctionConstructor;
+    onFocus: FunctionConstructor;
+    onBlur: FunctionConstructor;
+    onCompositionstart: FunctionConstructor;
+    onCompositionend: FunctionConstructor;
+    readOnly: BooleanConstructor;
+    maxLength: NumberConstructor;
+}>> & Readonly<{
+    onResize?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onInternalAutoSize?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readOnly: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/ResizableTextArea.js

@@ -0,0 +1,133 @@
+import calculateAutoSizeStyle from "./calculateNodeHeight.js";
+import { computed, createVNode, defineComponent, mergeProps, onBeforeUnmount, ref, shallowRef, watch } from "vue";
+import ResizeObserver from "@v-c/resize-observer";
+import { classNames } from "@v-c/util";
+import raf from "@v-c/util/dist/raf";
+var RESIZE_START = 0;
+var RESIZE_MEASURING = 1;
+var RESIZE_STABLE = 2;
+var ResizableTextArea_default = /* @__PURE__ */ defineComponent({
+	name: "ResizableTextArea",
+	props: {
+		prefixCls: String,
+		defaultValue: [String, Number],
+		value: [String, Number],
+		autoSize: [Boolean, Object],
+		onResize: Function,
+		disabled: Boolean,
+		onChange: Function,
+		onInternalAutoSize: Function,
+		onKeydown: Function,
+		onFocus: Function,
+		onBlur: Function,
+		onCompositionstart: Function,
+		onCompositionend: Function,
+		readOnly: Boolean,
+		maxLength: Number
+	},
+	emits: [
+		"change",
+		"internalAutoSize",
+		"resize"
+	],
+	setup(props, { expose, attrs, emit }) {
+		const mergedValue = shallowRef(props.value || props.defaultValue);
+		watch(() => props.value, (val) => {
+			mergedValue.value = val;
+		});
+		const onInternalChange = (event) => {
+			mergedValue.value = event.target.value;
+			emit("change", event);
+		};
+		const textareaRef = ref();
+		expose({
+			textArea: () => textareaRef.value,
+			setValue: (val) => {
+				mergedValue.value = val;
+			}
+		});
+		const minRows = ref();
+		const maxRows = ref();
+		watch(() => props.autoSize, () => {
+			const { autoSize } = props;
+			if (autoSize && typeof autoSize === "object") {
+				minRows.value = autoSize.minRows;
+				maxRows.value = autoSize.maxRows;
+			} else {
+				minRows.value = void 0;
+				maxRows.value = void 0;
+			}
+		}, { immediate: true });
+		const needAutoSize = computed(() => !!props.autoSize);
+		const fixFirefoxAutoScroll = () => {
+			try {
+				if (document.activeElement === textareaRef.value) {
+					const { selectionStart, selectionEnd, scrollTop } = textareaRef.value;
+					textareaRef.value.setSelectionRange(selectionStart, selectionEnd);
+					textareaRef.value.scrollTop = scrollTop;
+				}
+			} catch (e) {}
+		};
+		const resizeState = ref(RESIZE_STABLE);
+		const autoSizeStyle = ref();
+		const startResize = () => {
+			resizeState.value = RESIZE_START;
+			if (process.env.NODE_ENV === "test") emit("internalAutoSize");
+		};
+		watch([
+			() => props.value,
+			minRows,
+			maxRows,
+			needAutoSize
+		], () => {
+			if (needAutoSize.value) startResize();
+		});
+		watch(resizeState, () => {
+			if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
+			else if (resizeState.value === RESIZE_MEASURING) {
+				const textareaStyles = calculateAutoSizeStyle(textareaRef.value, false, minRows.value, maxRows.value);
+				resizeState.value = RESIZE_STABLE;
+				autoSizeStyle.value = textareaStyles;
+			} else fixFirefoxAutoScroll();
+		});
+		const resizeRafRef = ref();
+		const cleanRaf = () => {
+			raf.cancel(resizeRafRef.value);
+		};
+		const onInternalResize = (size) => {
+			if (resizeState.value === RESIZE_STABLE) {
+				emit("resize", size);
+				if (props.autoSize) {
+					cleanRaf();
+					resizeRafRef.value = raf(() => {
+						startResize();
+					});
+				}
+			}
+		};
+		onBeforeUnmount(() => cleanRaf());
+		return () => {
+			const { prefixCls, autoSize, onResize, disabled,...resetProps } = props;
+			const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
+			const mergedStyle = {
+				...attrs.style,
+				...mergedAutoSizeStyle,
+				overflowY: resizeState.value === RESIZE_START || resizeState.value === RESIZE_MEASURING ? "hidden" : void 0,
+				overflowX: resizeState.value === RESIZE_START || resizeState.value === RESIZE_MEASURING ? "hidden" : void 0
+			};
+			return createVNode(ResizeObserver, {
+				"onResize": onInternalResize,
+				"disabled": !(autoSize || onResize)
+			}, { default: () => [createVNode("textarea", mergeProps(attrs, resetProps, {
+				"ref": textareaRef,
+				"style": mergedStyle,
+				"class": classNames(prefixCls, [attrs.className], { [`${prefixCls}-disabled`]: disabled }),
+				"disabled": disabled,
+				"value": mergedValue.value,
+				"onChange": onInternalChange,
+				"onInput": onInternalChange
+			}), null)] });
+		};
+	}
+});
+export { ResizableTextArea_default as default };

package/dist/TextArea.cjs

@@ -0,0 +1,363 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_ResizableTextArea = require("./ResizableTextArea.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_input = require("@v-c/input");
+let __v_c_util_dist_omit = require("@v-c/util/dist/omit");
+__v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
+var defaults = { prefixCls: "vc-textarea" };
+var TextArea_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, expose, slots, emit }) => {
+	const stateValue = (0, vue.shallowRef)(props.value ?? props.defaultValue);
+	(0, vue.watch)(() => props.value, (newValue) => {
+		if ("value" in props || {}) stateValue.value = newValue;
+	});
+	const setValue = (val, callback) => {
+		if (stateValue.value === val) return;
+		if (props.value === void 0) stateValue.value = val;
+		(0, vue.nextTick)(() => {
+			callback?.();
+		});
+	};
+	const formatValue = (0, vue.computed)(() => stateValue.value === void 0 || stateValue.value === null ? "" : String(stateValue.value));
+	const focused = (0, vue.shallowRef)(false);
+	const compositionRef = (0, vue.shallowRef)(false);
+	const textareaResized = (0, vue.shallowRef)(false);
+	const holderRef = (0, vue.shallowRef)();
+	const resizableTextAreaRef = (0, vue.shallowRef)();
+	const getTextArea = () => resizableTextAreaRef.value?.textArea();
+	const focus = () => {
+		getTextArea()?.focus();
+	};
+	expose({
+		resizableTextArea: (0, vue.computed)(() => resizableTextAreaRef.value),
+		focus,
+		blur: () => {
+			getTextArea()?.blur();
+		},
+		nativeElement: (0, vue.computed)(() => holderRef.value?.nativeElement || getTextArea() || null)
+	});
+	(0, vue.watch)(() => props.disabled, (newDisabled) => {
+		focused.value = !newDisabled && focused.value;
+	});
+	const selection = (0, vue.shallowRef)(null);
+	(0, vue.watch)(selection, (newSelection) => {
+		if (newSelection) getTextArea()?.setSelectionRange(...newSelection);
+	});
+	const countConfig = (0, __v_c_input.useCount)((0, vue.computed)(() => props.count), (0, vue.computed)(() => props.showCount));
+	const mergedMax = (0, vue.computed)(() => countConfig.value.max ?? props.maxLength);
+	const hasMaxLength = (0, vue.computed)(() => Number(mergedMax.value) > 0);
+	const valueLength = (0, vue.computed)(() => countConfig.value.strategy(formatValue.value));
+	const isOutOfRange = (0, vue.computed)(() => !!mergedMax.value && valueLength.value > mergedMax.value);
+	const onChange = (e) => {
+		emit("change", e);
+		props.onChange?.(e);
+	};
+	const triggerChange = (e, currentValue) => {
+		let cutValue = currentValue;
+		const cfg = countConfig.value;
+		if (!compositionRef.value && cfg.exceedFormatter && cfg.max && cfg.strategy(currentValue) > cfg.max) {
+			cutValue = cfg.exceedFormatter(currentValue, { max: cfg.max });
+			if (currentValue !== cutValue) selection.value = [getTextArea()?.selectionStart || 0, getTextArea()?.selectionEnd || 0];
+		}
+		setValue(cutValue);
+		emit("update:value", cutValue);
+		(0, vue.nextTick)(() => {
+			resizableTextAreaRef.value?.setValue?.(cutValue);
+		});
+		(0, __v_c_input.resolveOnChange)(e.currentTarget, e, onChange, cutValue);
+	};
+	const onInternalCompositionStart = (e) => {
+		compositionRef.value = true;
+		emit("compositionStart", e);
+		props.onCompositionStart?.(e);
+	};
+	const onInternalCompositionEnd = (e) => {
+		compositionRef.value = false;
+		triggerChange(e, e.target.value);
+		emit("compositionEnd", e);
+		props.onCompositionEnd?.(e);
+	};
+	const onInternalChange = (e) => {
+		triggerChange(e, e.target.value);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && props.onPressEnter && !e.isComposing) {
+			emit("pressEnter", e);
+			props.onPressEnter?.(e);
+		}
+		emit("keydown", e);
+		props.onKeyDown?.(e);
+	};
+	const handleFocus = (e) => {
+		focused.value = true;
+		emit("focus", e);
+		props.onFocus?.(e);
+	};
+	const handleBlur = (e) => {
+		focused.value = false;
+		emit("blur", e);
+		props.onBlur?.(e);
+	};
+	const handleReset = (e) => {
+		(0, __v_c_input.resolveOnChange)(getTextArea(), e, onChange);
+		setValue("", () => focus());
+		emit("update:value", "");
+	};
+	const handleResize = (size) => {
+		emit("resize", size);
+		props.onResize?.(size);
+		if (getTextArea()?.style.height) textareaResized.value = true;
+	};
+	const mergedAllowClear = (0, vue.computed)(() => {
+		if (!props.allowClear) return props.allowClear;
+		const clearIcon = slots.clearIcon?.();
+		if (clearIcon) return {
+			...typeof props.allowClear === "object" ? props.allowClear : {},
+			clearIcon
+		};
+		return props.allowClear;
+	});
+	return () => {
+		const { allowClear, maxLength, prefixCls = defaults.prefixCls, showCount, disabled, hidden, classNames, styles, onClear, readOnly, autoSize, suffix } = props;
+		const { class: attrClass, style: attrStyle,...restAttrs } = attrs;
+		const mergedClassName = props.className || attrClass;
+		const mergedStyle = {
+			...props.style,
+			...attrStyle
+		};
+		let suffixNode = slots.suffix?.() ?? suffix;
+		let dataCount;
+		if (countConfig.value.show) {
+			if (countConfig.value.showFormatter) dataCount = countConfig.value.showFormatter({
+				value: formatValue.value,
+				count: valueLength.value,
+				maxLength: mergedMax.value
+			});
+			else dataCount = `${valueLength.value}${hasMaxLength.value ? ` / ${mergedMax.value}` : ""}`;
+			suffixNode = (0, vue.createVNode)(vue.Fragment, null, [suffixNode, (0, vue.createVNode)("span", {
+				"class": (0, __v_c_util.classNames)(`${prefixCls}-data-count`, classNames?.count),
+				"style": styles?.count
+			}, [dataCount])]);
+		}
+		const isPureTextArea = !autoSize && !showCount && !allowClear;
+		const baseInputClassNames = {
+			...classNames,
+			affixWrapper: (0, __v_c_util.classNames)(classNames?.affixWrapper, {
+				[`${prefixCls}-show-count`]: showCount,
+				[`${prefixCls}-textarea-allow-clear`]: allowClear
+			})
+		};
+		const inputAttrs = (0, __v_c_util_dist_omit.default)(restAttrs, [
+			"class",
+			"style",
+			"onFocus",
+			"onBlur",
+			"onChange",
+			"onCompositionstart",
+			"onCompositionend",
+			"onKeydown",
+			"onKeyup",
+			"onInput"
+		]);
+		return (0, vue.createVNode)(__v_c_input.BaseInput, {
+			"ref": holderRef,
+			"value": formatValue.value,
+			"allowClear": mergedAllowClear.value,
+			"handleReset": handleReset,
+			"suffix": suffixNode,
+			"prefixCls": prefixCls,
+			"classNames": baseInputClassNames,
+			"disabled": disabled,
+			"focused": focused.value,
+			"class": (0, __v_c_util.classNames)([mergedClassName], isOutOfRange.value && `${prefixCls}-out-of-range`),
+			"style": {
+				...mergedStyle,
+				...textareaResized.value && !isPureTextArea ? { height: "auto" } : {}
+			},
+			"dataAttrs": { affixWrapper: { "data-count": typeof dataCount === "string" ? dataCount : void 0 } },
+			"hidden": hidden,
+			"readOnly": readOnly,
+			"onClear": onClear
+		}, { default: () => [(0, vue.createVNode)(require_ResizableTextArea.default, (0, vue.mergeProps)(inputAttrs, {
+			"value": stateValue.value,
+			"autoSize": autoSize,
+			"maxLength": maxLength,
+			"onKeydown": handleKeyDown,
+			"onChange": onInternalChange,
+			"onFocus": handleFocus,
+			"onBlur": handleBlur,
+			"onCompositionstart": onInternalCompositionStart,
+			"onCompositionend": onInternalCompositionEnd,
+			"class": (0, __v_c_util.classNames)(classNames?.textarea),
+			"style": {
+				...styles?.textarea,
+				resize: attrStyle?.resize
+			},
+			"disabled": disabled,
+			"prefixCls": prefixCls,
+			"onResize": handleResize,
+			"ref": resizableTextAreaRef,
+			"readOnly": readOnly
+		}), null)] });
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		value: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		autoSize: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		onPressEnter: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onClear: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		showCount: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		hidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onCompositionStart: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onCompositionEnd: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		class: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	name: "TextArea",
+	inheritAttrs: false,
+	emits: [
+		"update:value",
+		"change",
+		"compositionStart",
+		"compositionEnd",
+		"pressEnter",
+		"keydown",
+		"focus",
+		"blur",
+		"resize"
+	]
+});
+exports.default = TextArea_default;

package/dist/TextArea.d.ts

@@ -0,0 +1,3 @@
+import { TextAreaProps } from './interface';
+declare const _default: import('vue').DefineSetupFnComponent<TextAreaProps, {}, {}, TextAreaProps & {}, import('vue').PublicProps>;
+export default _default;