@v-c/textarea 0.0.6 → 0.0.8

package/dist/ResizableTextArea.cjs

@@ -7,134 +7,227 @@ __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_omit = require("@v-c/util/dist/omit");
 __v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
+let __v_c_util_dist_props_util = require("@v-c/util/dist/props-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,
-			setValue: (val) => {
-				mergedValue.value = val;
+var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs }) => {
+	const internalValue = (0, vue.ref)(props?.value ?? props?.defaultValue ?? "");
+	(0, vue.watch)(() => props.value, () => {
+		internalValue.value = props.value;
+	});
+	const mergedValue = (0, vue.computed)(() => internalValue.value ?? "");
+	const onInternalChange = (e) => {
+		if (props.value === void 0) internalValue.value = e.target.value;
+		props?.onChange?.(e);
+	};
+	const textareaRef = (0, vue.shallowRef)();
+	expose({ textArea: textareaRef });
+	const autoSizeData = (0, vue.computed)(() => {
+		const autoSize = props.autoSize;
+		if (autoSize && typeof autoSize === "object") return [autoSize.minRows, autoSize.maxRows];
+		return [];
+	});
+	const minRows = (0, vue.computed)(() => autoSizeData?.value?.[0]);
+	const maxRows = (0, vue.computed)(() => autoSizeData?.value?.[1]);
+	const resizeState = (0, vue.ref)(RESIZE_STABLE);
+	const autoSizeStyle = (0, vue.shallowRef)({});
+	const startResize = () => {
+		resizeState.value = RESIZE_START;
+	};
+	const needAutoSize = (0, vue.computed)(() => !!props.autoSize);
+	(0, vue.watch)([
+		() => props.value,
+		minRows,
+		maxRows,
+		needAutoSize
+	], async () => {
+		await (0, vue.nextTick)();
+		if (needAutoSize.value) startResize();
+	}, { immediate: true });
+	(0, vue.watch)(resizeState, () => {
+		if (!textareaRef.value) return;
+		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;
+		}
+	});
+	const resizeRafRef = (0, vue.shallowRef)();
+	const cleanRaf = () => {
+		__v_c_util_dist_raf.default.cancel(resizeRafRef.value);
+	};
+	const onInternalResize = (size) => {
+		if (resizeState.value === RESIZE_STABLE) {
+			props?.onResize?.(size);
+			if (props.autoSize) {
+				cleanRaf();
+				resizeRafRef.value = (0, __v_c_util_dist_raf.default)(() => {
+					startResize();
+				});
 			}
-		});
-		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);
+		}
+	};
+	(0, vue.onUnmounted)(() => {
+		cleanRaf();
+	});
+	return () => {
+		const { autoSize, onResize, prefixCls, disabled } = props;
+		const { style, restAttrs, className } = (0, __v_c_util_dist_props_util.getAttrStyleAndClass)(attrs, { omits: ["onKeydown"] });
+		const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
+		const mergedStyle = {
+			...style,
+			...mergedAutoSizeStyle
 		};
-		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
-			};
-			const restAttrs = (0, __v_c_util_dist_omit.default)(attrs, ["class", "style"]);
-			return (0, vue.createVNode)(__v_c_resize_observer.default, {
-				"onResize": onInternalResize,
-				"disabled": !(autoSize || onResize)
-			}, { default: () => [(0, vue.createVNode)("textarea", (0, vue.mergeProps)(restAttrs, resetProps, {
-				"ref": textareaRef,
-				"style": mergedStyle,
-				"class": (0, __v_c_util.classNames)(prefixCls, [attrs.class], { [`${prefixCls}-disabled`]: disabled }),
-				"disabled": disabled,
-				"value": mergedValue.value,
-				"onChange": onInternalChange,
-				"onInput": onInternalChange
-			}), null)] });
-		};
-	}
+		if (resizeState.value === RESIZE_START || resizeState.value === RESIZE_MEASURING) {
+			mergedStyle.overflowY = "hidden";
+			mergedStyle.overflowX = "hidden";
+		}
+		return (0, vue.createVNode)(__v_c_resize_observer.default, {
+			"onResize": onInternalResize,
+			"disabled": !(autoSize || onResize)
+		}, { default: () => [(0, vue.createVNode)("textarea", (0, vue.mergeProps)(restAttrs, (0, __v_c_util_dist_omit.default)(props, [
+			"suffix",
+			"classNames",
+			"styles",
+			"prefixCls",
+			"allowClear",
+			"autoSize",
+			"showCount",
+			"disabled",
+			"hidden",
+			"readOnly",
+			"onClear",
+			"maxLength",
+			"onResize",
+			"onChange"
+		]), {
+			"ref": textareaRef,
+			"style": mergedStyle,
+			"class": (0, __v_c_util.clsx)(prefixCls, className, { [`${prefixCls}-disabled`]: disabled }),
+			"disabled": disabled,
+			"value": mergedValue.value,
+			"onInput": onInternalChange
+		}), null)] });
+	};
+}, {
+	props: {
+		value: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			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
+		},
+		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
+		},
+		suffix: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		showCount: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		onClear: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		minLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		hidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onKeydown: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ResizableTextArea",
+	inheritAttrs: false
 });
+var ResizableTextArea_default = ResizableTextArea;
 exports.default = ResizableTextArea_default;

package/dist/ResizableTextArea.d.ts

@@ -1,41 +1,3 @@
-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;
+import { TextAreaProps } from './interface';
+declare const ResizableTextArea: import('vue').DefineSetupFnComponent<TextAreaProps, {}, {}, TextAreaProps & {}, import('vue').PublicProps>;
+export default ResizableTextArea;