@v-c/textarea 0.0.6 → 0.0.8

package/dist/TextArea.cjs

@@ -5,209 +5,170 @@ let vue = require("vue");
 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_input = require("@v-c/input");
-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;
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+var TextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, attrs }) => {
+	const { count, showCount } = (0, __v_c_util_dist_props_util.toPropsRefs)(props, "count", "showCount");
+	const value = (0, vue.shallowRef)(props?.value ?? props?.defaultValue ?? "");
+	(0, vue.watch)(() => props.value, () => {
+		value.value = props.value;
 	});
-	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 formatValue = (0, vue.computed)(() => value.value === void 0 || value.value === null ? "" : String(value.value));
 	const focused = (0, vue.shallowRef)(false);
 	const compositionRef = (0, vue.shallowRef)(false);
-	const textareaResized = (0, vue.shallowRef)(false);
+	const textareaResized = (0, vue.shallowRef)();
 	const holderRef = (0, vue.shallowRef)();
 	const resizableTextAreaRef = (0, vue.shallowRef)();
 	const getTextArea = () => resizableTextAreaRef.value?.textArea;
 	const focus = () => {
-		getTextArea()?.focus();
+		getTextArea().focus();
 	};
 	expose({
 		resizableTextArea: resizableTextAreaRef,
 		focus,
 		blur: () => {
-			getTextArea()?.blur();
+			getTextArea().blur();
 		},
-		nativeElement: (0, vue.computed)(() => holderRef.value?.nativeElement || getTextArea() || null)
+		nativeElement: (0, vue.computed)(() => holderRef.value?.nativeElement || getTextArea())
 	});
-	(0, vue.watch)(() => props.disabled, (newDisabled) => {
-		focused.value = !newDisabled && focused.value;
+	(0, vue.watch)(() => props.disabled, () => {
+		const prev = focused.value;
+		if (props.disabled && prev) focused.value = !props?.disabled && prev;
+	}, {
+		immediate: true,
+		flush: "post"
 	});
 	const selection = (0, vue.shallowRef)(null);
-	(0, vue.watch)(selection, (newSelection) => {
-		if (newSelection) getTextArea()?.setSelectionRange(...newSelection);
+	(0, vue.watch)(selection, () => {
+		if (selection.value) getTextArea().setSelectionRange(...selection.value);
 	});
-	const countConfig = (0, __v_c_input.useCount)((0, vue.computed)(() => props.count), (0, vue.computed)(() => props.showCount));
+	const countConfig = (0, __v_c_input.useCount)(count, 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) => {
-		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];
+		if (!compositionRef.value && countConfig.value.exceedFormatter && countConfig.value.max && countConfig.value.strategy(currentValue) > countConfig.value.max) {
+			cutValue = countConfig.value.exceedFormatter(currentValue, { max: countConfig.value.max });
+			const textarea$1 = getTextArea();
+			if (currentValue !== cutValue) selection.value = [textarea$1.selectionStart || 0, textarea$1.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 textarea = getTextArea();
+		if (!compositionRef.value && textarea && textarea.value !== cutValue) textarea.value = cutValue;
+		value.value = cutValue;
+		(0, __v_c_input.resolveOnChange)(e.currentTarget, e, props.onChange, cutValue);
 	};
-	const onInternalCompositionStart = (e) => {
+	const onInternalCompositionStart = () => {
 		compositionRef.value = true;
-		props.onCompositionStart?.(e);
 	};
 	const onInternalCompositionEnd = (e) => {
 		compositionRef.value = false;
-		triggerChange(e, e.target.value);
-		props.onCompositionEnd?.(e);
+		triggerChange(e, e.currentTarget.value);
 	};
 	const onInternalChange = (e) => {
 		triggerChange(e, e.target.value);
 	};
 	const handleKeyDown = (e) => {
-		if (e.key === "Enter" && props.onPressEnter && !e.isComposing) props.onPressEnter?.(e);
-		props.onKeyDown?.(e);
+		const { onPressEnter } = props;
+		if (e.key === __v_c_util_dist_KeyCode.KeyCodeStr.Enter && onPressEnter && !e.isComposing) onPressEnter(e);
+		props?.onKeydown?.(e);
 	};
-	const handleFocus = (e) => {
+	const handleFocus = () => {
 		focused.value = true;
-		props.onFocus?.(e);
 	};
-	const handleBlur = (e) => {
+	const handleBlur = () => {
 		focused.value = false;
-		props.onBlur?.(e);
 	};
 	const handleReset = (e) => {
-		(0, __v_c_input.resolveOnChange)(getTextArea(), e, onChange);
-		setValue("", () => focus());
-		emit("update:value", "");
+		value.value = "";
+		focus();
+		(0, __v_c_input.resolveOnChange)(getTextArea(), e, props.onChange);
 	};
 	const handleResize = (size) => {
-		props.onResize?.(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;
+		const { suffix, classNames, styles, prefixCls = "vc-textarea", allowClear, autoSize, showCount: showCount$1, disabled, hidden, readOnly, onClear, maxLength } = props;
+		const { style, restAttrs, className } = (0, __v_c_util_dist_props_util.getAttrStyleAndClass)(attrs);
+		let suffixNode = suffix;
 		let dataCount;
 		if (countConfig.value.show) {
-			if (countConfig.value.showFormatter) dataCount = countConfig.value.showFormatter({
+			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),
+				"class": (0, __v_c_util.clsx)(`${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 isPureTextArea = !autoSize && !showCount$1 && !allowClear;
+		const textareaProps = {
+			onKeydown: handleKeyDown,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			onCompositionstart: onInternalCompositionStart,
+			onCompositionend: onInternalCompositionEnd
 		};
-		const inputAttrs = (0, __v_c_util_dist_omit.default)(restAttrs, [
-			"class",
-			"style",
-			"onFocus",
-			"onBlur",
-			"onChange",
-			"onCompositionstart",
-			"onCompositionend",
-			"onKeydown",
-			"onKeyup",
-			"onInput"
-		]);
-		const restProps = (0, __v_c_util_dist_omit.default)(props, [
-			"class",
-			"style",
-			"onFocus",
-			"onBlur",
-			"onChange",
-			"onCompositionEnd",
-			"onCompositionStart",
-			"onKeyDown",
-			"allowClear",
-			"maxLength",
-			"prefixCls",
-			"showCount",
-			"disabled",
-			"hidden",
-			"classNames",
-			"styles",
-			"onClear",
-			"readOnly",
-			"autoSize",
-			"suffix",
-			"onResize"
-		]);
 		return (0, vue.createVNode)(__v_c_input.BaseInput, {
 			"ref": holderRef,
 			"value": formatValue.value,
-			"allowClear": mergedAllowClear.value,
+			"allowClear": allowClear,
 			"handleReset": handleReset,
 			"suffix": suffixNode,
 			"prefixCls": prefixCls,
-			"classNames": baseInputClassNames,
+			"classNames": {
+				...classNames,
+				affixWrapper: (0, __v_c_util.clsx)(classNames?.affixWrapper, {
+					[`${prefixCls}-show-count`]: showCount$1,
+					[`${prefixCls}-textarea-allow-clear`]: allowClear
+				})
+			},
 			"disabled": disabled,
 			"focused": focused.value,
-			"class": (0, __v_c_util.classNames)([mergedClassName], isOutOfRange.value && `${prefixCls}-out-of-range`),
+			"class": (0, __v_c_util.clsx)(className, isOutOfRange.value && `${prefixCls}-out-of-range`),
 			"style": {
-				...mergedStyle,
+				...style,
 				...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, restProps, {
-			"value": stateValue.value,
+		}, { default: () => [(0, vue.createVNode)(require_ResizableTextArea.default, (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",
+			"onKeydown",
+			"onPressEnter"
+		]), {
 			"autoSize": autoSize,
 			"maxLength": maxLength,
-			"onKeydown": handleKeyDown,
-			"onChange": onInternalChange,
-			"onFocus": handleFocus,
-			"onBlur": handleBlur,
-			"onCompositionstart": onInternalCompositionStart,
-			"onCompositionend": onInternalCompositionEnd,
-			"class": (0, __v_c_util.classNames)(classNames?.textarea),
+			"onChange": onInternalChange
+		}, textareaProps, {
+			"class": (0, __v_c_util.clsx)(classNames?.textarea),
 			"style": {
-				...styles?.textarea,
-				resize: attrStyle?.resize
+				resize: style?.resize,
+				...styles?.textarea
 			},
 			"disabled": disabled,
+			"value": value.value,
 			"prefixCls": prefixCls,
 			"onResize": handleResize,
 			"ref": resizableTextAreaRef,
@@ -217,12 +178,12 @@ var TextArea_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs,
 }, {
 	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
 		value: {
-			type: [String, Number],
+			type: null,
 			required: false,
 			default: void 0
 		},
 		defaultValue: {
-			type: [String, Number],
+			type: null,
 			required: false,
 			default: void 0
 		},
@@ -231,6 +192,11 @@ var TextArea_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs,
 			required: false,
 			default: void 0
 		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		autoSize: {
 			type: [Boolean, Object],
 			required: false,
@@ -246,16 +212,6 @@ var TextArea_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs,
 			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,
@@ -271,106 +227,69 @@ var TextArea_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs,
 			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
-			],
+			type: null,
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
-		disabled: {
-			type: Boolean,
+		showCount: {
+			type: [Boolean, Object],
 			required: false,
 			default: void 0
 		},
-		hidden: {
-			type: Boolean,
+		count: {
+			type: null,
 			required: false,
 			default: void 0
 		},
-		onChange: {
+		onClear: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
-		onFocus: {
+		onChange: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
-		onBlur: {
-			type: Function,
+		maxLength: {
+			type: Number,
 			required: false,
 			default: void 0
 		},
-		onCompositionStart: {
-			type: Function,
+		minLength: {
+			type: Number,
 			required: false,
 			default: void 0
 		},
-		onCompositionEnd: {
-			type: Function,
+		hidden: {
+			type: Boolean,
 			required: false,
 			default: void 0
 		},
-		onKeyDown: {
-			type: Function,
+		readOnly: {
+			type: Boolean,
 			required: false,
 			default: void 0
 		},
-		className: {
+		placeholder: {
 			type: String,
 			required: false,
 			default: void 0
 		},
-		class: {
-			type: null,
-			required: false,
-			default: void 0
-		},
-		style: {
-			type: null,
+		autoFocus: {
+			type: Boolean,
 			required: false,
 			default: void 0
 		},
-		placeholder: {
-			type: String,
+		onKeydown: {
+			type: Function,
 			required: false,
 			default: void 0
 		}
-	}, defaults),
+	}, { prefixCls: "vc-textarea" }),
 	name: "TextArea",
-	inheritAttrs: false,
-	emits: [
-		"update:value",
-		"change",
-		"compositionStart",
-		"compositionEnd",
-		"pressEnter",
-		"keydown",
-		"focus",
-		"blur",
-		"resize"
-	]
+	inheritAttrs: false
 });
+var TextArea_default = TextArea;
 exports.default = TextArea_default;

package/dist/TextArea.d.ts

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