@v-c/textarea 0.0.6 → 0.0.7

package/dist/ResizableTextArea.js

@@ -1,135 +1,201 @@
 import calculateAutoSizeStyle from "./calculateNodeHeight.js";
-import { computed, createVNode, defineComponent, mergeProps, onBeforeUnmount, ref, shallowRef, watch } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, nextTick, onUnmounted, ref, shallowRef, watch } from "vue";
 import ResizeObserver from "@v-c/resize-observer";
-import { classNames } from "@v-c/util";
-import omit from "@v-c/util/dist/omit";
+import { clsx } from "@v-c/util";
+import { getAttrStyleAndClass } from "@v-c/util/dist/props-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,
-			setValue: (val) => {
-				mergedValue.value = val;
+var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+	const internalValue = ref(props?.value ?? props?.defaultValue ?? "");
+	watch(() => props.value, () => {
+		internalValue.value = props.value;
+	});
+	const mergedValue = computed(() => internalValue.value ?? "");
+	const onInternalChange = (e) => {
+		internalValue.value = e.target.value;
+		props?.onChange?.(e);
+	};
+	const textareaRef = shallowRef();
+	expose({ textArea: textareaRef });
+	const autoSizeData = computed(() => {
+		const autoSize = props.autoSize;
+		if (autoSize && typeof autoSize === "object") return [autoSize.minRows, autoSize.maxRows];
+		return [];
+	});
+	const minRows = computed(() => autoSizeData?.value?.[0]);
+	const maxRows = computed(() => autoSizeData?.value?.[1]);
+	const resizeState = ref(RESIZE_STABLE);
+	const autoSizeStyle = shallowRef({});
+	const startResize = () => {
+		resizeState.value = RESIZE_START;
+	};
+	const needAutoSize = computed(() => !!props.autoSize);
+	watch([
+		() => props.value,
+		minRows,
+		maxRows,
+		needAutoSize
+	], async () => {
+		await nextTick();
+		if (needAutoSize.value) startResize();
+	}, { immediate: true });
+	watch(resizeState, async () => {
+		await nextTick();
+		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;
+		}
+	}, { immediate: true });
+	const resizeRafRef = shallowRef();
+	const cleanRaf = () => {
+		raf.cancel(resizeRafRef.value);
+	};
+	const onInternalResize = (size) => {
+		if (resizeState.value === RESIZE_STABLE) {
+			props?.onResize?.(size);
+			if (props.autoSize) {
+				cleanRaf();
+				resizeRafRef.value = raf(() => {
+					startResize();
+				});
 			}
-		});
-		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);
+		}
+	};
+	onUnmounted(() => {
+		cleanRaf();
+	});
+	return () => {
+		const { autoSize, onResize, prefixCls, disabled, className } = props;
+		const { style, restAttrs } = 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 = 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
-			};
-			const restAttrs = omit(attrs, ["class", "style"]);
-			return createVNode(ResizeObserver, {
-				"onResize": onInternalResize,
-				"disabled": !(autoSize || onResize)
-			}, { default: () => [createVNode("textarea", mergeProps(restAttrs, resetProps, {
-				"ref": textareaRef,
-				"style": mergedStyle,
-				"class": 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 createVNode(ResizeObserver, {
+			"onResize": onInternalResize,
+			"disabled": !(autoSize || onResize)
+		}, { default: () => [createVNode("textarea", mergeProps(restAttrs, {
+			"ref": textareaRef,
+			"style": mergedStyle,
+			"class": clsx(prefixCls, className, { [`${prefixCls}-disabled`]: disabled }),
+			"disabled": disabled,
+			"value": mergedValue.value,
+			"onChange": 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
+		},
+		className: {
+			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
+		},
+		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
+		}
+	},
+	name: "ResizableTextArea",
+	inheritAttrs: false
 });
 export { ResizableTextArea_default as default };