@v-c/textarea 0.0.5 → 0.0.7

package/dist/TextArea.js

@@ -1,208 +1,146 @@
 import ResizableTextArea_default from "./ResizableTextArea.js";
-import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, watch } from "vue";
-import { classNames } from "@v-c/util";
-import omit from "@v-c/util/dist/omit";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { getAttrStyleAndClass, toPropsRefs } from "@v-c/util/dist/props-util";
 import { BaseInput, resolveOnChange, useCount } from "@v-c/input";
-var defaults = { prefixCls: "vc-textarea" };
-var TextArea_default = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots, emit }) => {
-	const stateValue = shallowRef(props.value ?? props.defaultValue);
-	watch(() => props.value, (newValue) => {
-		if ("value" in props || {}) stateValue.value = newValue;
+import { KeyCodeStr } from "@v-c/util/dist/KeyCode.ts";
+var TextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+	const { count, showCount } = toPropsRefs(props, "count", "showCount");
+	const value = shallowRef(props?.value ?? props?.defaultValue ?? "");
+	watch(() => props.value, () => {
+		value.value = props.value;
 	});
-	const setValue = (val, callback) => {
-		if (stateValue.value === val) return;
-		if (props.value === void 0) stateValue.value = val;
-		nextTick(() => {
-			callback?.();
-		});
-	};
-	const formatValue = computed(() => stateValue.value === void 0 || stateValue.value === null ? "" : String(stateValue.value));
+	const formatValue = computed(() => value.value === void 0 || value.value === null ? "" : String(value.value));
 	const focused = shallowRef(false);
 	const compositionRef = shallowRef(false);
-	const textareaResized = shallowRef(false);
+	const textareaResized = shallowRef();
 	const holderRef = shallowRef();
 	const resizableTextAreaRef = shallowRef();
-	const getTextArea = () => resizableTextAreaRef.value?.textArea();
+	const getTextArea = () => resizableTextAreaRef.value?.textArea;
 	const focus = () => {
-		getTextArea()?.focus();
+		getTextArea().focus();
 	};
 	expose({
-		resizableTextArea: computed(() => resizableTextAreaRef.value),
+		resizableTextArea: resizableTextAreaRef,
 		focus,
 		blur: () => {
-			getTextArea()?.blur();
+			getTextArea().blur();
 		},
-		nativeElement: computed(() => holderRef.value?.nativeElement || getTextArea() || null)
+		nativeElement: computed(() => holderRef.value?.nativeElement || getTextArea())
 	});
-	watch(() => props.disabled, (newDisabled) => {
-		focused.value = !newDisabled && focused.value;
+	watch(() => props.disabled, () => {
+		const prev = focused.value;
+		if (props.disabled && prev) focused.value = !props?.disabled && prev;
+	}, {
+		immediate: true,
+		flush: "post"
 	});
 	const selection = shallowRef(null);
-	watch(selection, (newSelection) => {
-		if (newSelection) getTextArea()?.setSelectionRange(...newSelection);
+	watch(selection, () => {
+		if (selection.value) getTextArea().setSelectionRange(...selection.value);
 	});
-	const countConfig = useCount(computed(() => props.count), computed(() => props.showCount));
+	const countConfig = useCount(count, showCount);
 	const mergedMax = computed(() => countConfig.value.max ?? props.maxLength);
 	const hasMaxLength = computed(() => Number(mergedMax.value) > 0);
 	const valueLength = computed(() => countConfig.value.strategy(formatValue.value));
 	const isOutOfRange = 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 });
+			if (currentValue !== cutValue) selection.value = [getTextArea().selectionStart || 0, getTextArea().selectionEnd || 0];
 		}
-		setValue(cutValue);
-		emit("update:value", cutValue);
-		nextTick(() => {
-			resizableTextAreaRef.value?.setValue?.(cutValue);
-		});
-		resolveOnChange(e.currentTarget, e, onChange, cutValue);
+		value.value = cutValue;
+		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 === KeyCodeStr.Enter && onPressEnter && !e.isComposing) onPressEnter(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) => {
-		resolveOnChange(getTextArea(), e, onChange);
-		setValue("", () => focus());
-		emit("update:value", "");
+		value.value = "";
+		focus();
+		resolveOnChange(getTextArea(), e, props.onChange);
 	};
 	const handleResize = (size) => {
-		props.onResize?.(size);
+		props?.onResize?.(size);
 		if (getTextArea()?.style.height) textareaResized.value = true;
 	};
-	const mergedAllowClear = 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: classNames$1, 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, className, classNames, styles, prefixCls = "vc-textarea", allowClear, autoSize, showCount: showCount$1, disabled, hidden, readOnly, onClear, maxLength } = props;
+		const { style, restAttrs } = 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 = createVNode(Fragment, null, [suffixNode, createVNode("span", {
-				"class": classNames(`${prefixCls}-data-count`, classNames$1?.count),
+				"class": clsx(`${prefixCls}-data-count`, classNames?.count),
 				"style": styles?.count
 			}, [dataCount])]);
 		}
-		const isPureTextArea = !autoSize && !showCount && !allowClear;
-		const baseInputClassNames = {
-			...classNames$1,
-			affixWrapper: classNames(classNames$1?.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 = omit(restAttrs, [
-			"class",
-			"style",
-			"onFocus",
-			"onBlur",
-			"onChange",
-			"onCompositionstart",
-			"onCompositionend",
-			"onKeydown",
-			"onKeyup",
-			"onInput"
-		]);
-		const restProps = omit(props, [
-			"class",
-			"style",
-			"onFocus",
-			"onBlur",
-			"onChange",
-			"onCompositionEnd",
-			"onCompositionStart",
-			"onKeyDown",
-			"allowClear",
-			"maxLength",
-			"prefixCls",
-			"showCount",
-			"disabled",
-			"hidden",
-			"classNames",
-			"styles",
-			"onClear",
-			"readOnly",
-			"autoSize",
-			"suffix",
-			"onResize"
-		]);
 		return createVNode(BaseInput, {
 			"ref": holderRef,
 			"value": formatValue.value,
-			"allowClear": mergedAllowClear.value,
+			"allowClear": allowClear,
 			"handleReset": handleReset,
 			"suffix": suffixNode,
 			"prefixCls": prefixCls,
-			"classNames": baseInputClassNames,
+			"classNames": {
+				...classNames,
+				affixWrapper: clsx(classNames?.affixWrapper, {
+					[`${prefixCls}-show-count`]: showCount$1,
+					[`${prefixCls}-textarea-allow-clear`]: allowClear
+				})
+			},
 			"disabled": disabled,
 			"focused": focused.value,
-			"class": classNames([mergedClassName], isOutOfRange.value && `${prefixCls}-out-of-range`),
+			"class": 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: () => [createVNode(ResizableTextArea_default, mergeProps(inputAttrs, restProps, {
-			"value": stateValue.value,
+		}, { default: () => [createVNode(ResizableTextArea_default, mergeProps(restAttrs, {
 			"autoSize": autoSize,
 			"maxLength": maxLength,
-			"onKeydown": handleKeyDown,
-			"onChange": onInternalChange,
-			"onFocus": handleFocus,
-			"onBlur": handleBlur,
-			"onCompositionstart": onInternalCompositionStart,
-			"onCompositionend": onInternalCompositionEnd,
-			"class": classNames(classNames$1?.textarea),
+			"onChange": onInternalChange
+		}, textareaProps, {
+			"className": clsx(classNames?.textarea),
 			"style": {
-				...styles?.textarea,
-				resize: attrStyle?.resize
+				resize: style?.resize,
+				...styles?.textarea
 			},
 			"disabled": disabled,
 			"prefixCls": prefixCls,
@@ -214,12 +152,12 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { attrs, expose,
 }, {
 	props: /* @__PURE__ */ mergeDefaults({
 		value: {
-			type: [String, Number],
+			type: null,
 			required: false,
 			default: void 0
 		},
 		defaultValue: {
-			type: [String, Number],
+			type: null,
 			required: false,
 			default: void 0
 		},
@@ -228,28 +166,28 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { attrs, expose,
 			required: false,
 			default: void 0
 		},
-		autoSize: {
-			type: [Boolean, Object],
+		disabled: {
+			type: Boolean,
 			required: false,
 			default: void 0
 		},
-		onPressEnter: {
-			type: Function,
+		className: {
+			type: String,
 			required: false,
 			default: void 0
 		},
-		onResize: {
-			type: Function,
+		autoSize: {
+			type: [Boolean, Object],
 			required: false,
 			default: void 0
 		},
-		onClear: {
+		onPressEnter: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
-		readOnly: {
-			type: Boolean,
+		onResize: {
+			type: Function,
 			required: false,
 			default: void 0
 		},
@@ -268,106 +206,53 @@ var TextArea_default = /* @__PURE__ */ defineComponent((props, { attrs, expose,
 			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,
+			type: null,
 			required: false,
 			default: void 0
 		},
-		onBlur: {
-			type: Function,
+		showCount: {
+			type: [Boolean, Object],
 			required: false,
 			default: void 0
 		},
-		onCompositionStart: {
-			type: Function,
+		count: {
+			type: null,
 			required: false,
 			default: void 0
 		},
-		onCompositionEnd: {
+		onClear: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
-		onKeyDown: {
+		onChange: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
-		className: {
-			type: String,
+		maxLength: {
+			type: Number,
 			required: false,
 			default: void 0
 		},
-		class: {
-			type: null,
+		minLength: {
+			type: Number,
 			required: false,
 			default: void 0
 		},
-		style: {
-			type: null,
+		hidden: {
+			type: Boolean,
 			required: false,
 			default: void 0
 		},
-		placeholder: {
-			type: String,
+		readOnly: {
+			type: Boolean,
 			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
 });
 export { TextArea_default as default };

package/dist/calculateNodeHeight.cjs

@@ -34,7 +34,7 @@ var SIZING_STYLE = [
 var computedStyleCache = {};
 var hiddenTextarea;
 function calculateNodeStyling(node, useCache = false) {
-	const nodeRef = node.getAttribute("id") || node.getAttribute("data-id") || node.getAttribute("name");
+	const nodeRef = node.getAttribute("id") || node.getAttribute("data-reactid") || node.getAttribute("name");
 	if (useCache && computedStyleCache[nodeRef]) return computedStyleCache[nodeRef];
 	const style = window.getComputedStyle(node);
 	const boxSizing = style.getPropertyValue("box-sizing") || style.getPropertyValue("-moz-box-sizing") || style.getPropertyValue("-webkit-box-sizing");

package/dist/calculateNodeHeight.js

@@ -33,7 +33,7 @@ var SIZING_STYLE = [
 var computedStyleCache = {};
 var hiddenTextarea;
 function calculateNodeStyling(node, useCache = false) {
-	const nodeRef = node.getAttribute("id") || node.getAttribute("data-id") || node.getAttribute("name");
+	const nodeRef = node.getAttribute("id") || node.getAttribute("data-reactid") || node.getAttribute("name");
 	if (useCache && computedStyleCache[nodeRef]) return computedStyleCache[nodeRef];
 	const style = window.getComputedStyle(node);
 	const boxSizing = style.getPropertyValue("box-sizing") || style.getPropertyValue("-moz-box-sizing") || style.getPropertyValue("-webkit-box-sizing");

package/dist/interface.d.ts

@@ -1,58 +1,47 @@
-import { CountConfig, ShowCountFormatter } from '@v-c/input';
-import { VueNode } from '@v-c/util/dist/type';
+import { BaseInputProps, CommonInputProps, InputProps } from '@v-c/input';
+import { ChangeEventHandler } from '@v-c/util/dist/EventInterface';
 import { CSSProperties } from 'vue';
 export interface AutoSizeType {
     minRows?: number;
     maxRows?: number;
 }
+export interface ResizableTextAreaRef {
+    textArea: HTMLTextAreaElement;
+}
 export interface TextAreaProps {
-    value?: string | number;
-    defaultValue?: string | number;
+    value?: any;
+    defaultValue?: any;
     prefixCls?: string;
+    disabled?: boolean;
+    className?: string;
     autoSize?: boolean | AutoSizeType;
-    onPressEnter?: (e: KeyboardEvent) => void;
+    onPressEnter?: (e: any) => void;
     onResize?: (size: {
         width: number;
         height: number;
     }) => void;
-    onClear?: () => void;
-    readOnly?: boolean;
-    classNames?: {
-        affixWrapper?: string;
+    classNames?: CommonInputProps['classNames'] & {
         textarea?: string;
         count?: string;
     };
     styles?: {
-        affixWrapper?: CSSProperties;
         textarea?: CSSProperties;
         count?: CSSProperties;
     };
-    allowClear?: boolean | {
-        clearIcon?: VueNode;
-    };
-    showCount?: boolean | {
-        formatter: ShowCountFormatter;
-    };
-    count?: CountConfig;
+    allowClear?: BaseInputProps['allowClear'];
+    suffix?: BaseInputProps['suffix'];
+    showCount?: InputProps['showCount'];
+    count?: InputProps['count'];
+    onClear?: InputProps['onClear'];
+    onChange?: ChangeEventHandler;
     maxLength?: number;
-    suffix?: VueNode;
-    disabled?: boolean;
+    minLength?: number;
     hidden?: boolean;
-    onChange?: (e: Event) => void;
-    onFocus?: (e: FocusEvent) => void;
-    onBlur?: (e: FocusEvent) => void;
-    onCompositionStart?: (e: CompositionEvent) => void;
-    onCompositionEnd?: (e: CompositionEvent) => void;
-    onKeyDown?: (e: KeyboardEvent) => void;
-    className?: string;
-    class?: any;
-    style?: CSSProperties;
-    placeholder?: string;
+    readOnly?: boolean;
 }
 export interface TextAreaRef {
-    resizableTextArea?: any;
+    resizableTextArea: ResizableTextAreaRef;
     focus: () => void;
     blur: () => void;
-    nativeElement: HTMLElement | null;
+    nativeElement: HTMLElement;
 }
-export type HTMLTextareaProps = HTMLTextAreaElement;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/textarea",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,7 @@
   "dependencies": {
     "@v-c/input": "^0.0.2",
     "@v-c/resize-observer": "^1.0.0",
-    "@v-c/util": "^1.0.0"
+    "@v-c/util": "^1.0.1"
   },
   "scripts": {
     "build": "vite build",