@v-c/textarea 1.0.1 → 1.0.3

package/dist/ResizableTextArea.cjs

@@ -6,7 +6,6 @@ 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_omit = require("@v-c/util/dist/omit");
 _v_c_util_dist_omit = require_rolldown_runtime.__toESM(_v_c_util_dist_omit);
@@ -49,8 +48,11 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
 	], async () => {
 		await (0, vue.nextTick)();
 		if (needAutoSize.value) startResize();
-	}, { immediate: true });
-	(0, vue.watch)(resizeState, () => {
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	(0, vue.watch)([resizeState, textareaRef], () => {
 		if (!textareaRef.value) return;
 		if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
 		else if (resizeState.value === RESIZE_MEASURING) {
@@ -77,8 +79,11 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
 	(0, vue.onUnmounted)(() => {
 		cleanRaf();
 	});
+	(0, _v_c_resize_observer.useResizeObserver)((0, vue.computed)(() => {
+		return !!(props.autoSize || props.onResize);
+	}), textareaRef, onInternalResize);
 	return () => {
-		const { autoSize, onResize, prefixCls, disabled, readOnly } = props;
+		const { prefixCls, disabled, readOnly } = 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 = {
@@ -89,10 +94,7 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
 			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)((0, _v_c_util_dist_omit.default)(restAttrs, ["readonly"]), (0, _v_c_util_dist_omit.default)(props, [
+		return (0, vue.createVNode)("textarea", (0, vue.mergeProps)((0, _v_c_util_dist_omit.default)(restAttrs, ["readonly"]), (0, _v_c_util_dist_omit.default)(props, [
 			"suffix",
 			"classNames",
 			"styles",
@@ -115,7 +117,7 @@ var ResizableTextArea = /* @__PURE__ */ (0, vue.defineComponent)((props, { expos
 			"disabled": disabled,
 			"value": mergedValue.value,
 			"onInput": onInternalChange
-		}), null)] });
+		}), null);
 	};
 }, {
 	props: {

package/dist/ResizableTextArea.js

@@ -1,6 +1,6 @@
 import calculateAutoSizeStyle from "./calculateNodeHeight.js";
 import { computed, createVNode, defineComponent, mergeProps, nextTick, onUnmounted, ref, shallowRef, watch } from "vue";
-import ResizeObserver from "@v-c/resize-observer";
+import { useResizeObserver } from "@v-c/resize-observer";
 import { clsx } from "@v-c/util";
 import omit from "@v-c/util/dist/omit";
 import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
@@ -41,8 +41,11 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
 	], async () => {
 		await nextTick();
 		if (needAutoSize.value) startResize();
-	}, { immediate: true });
-	watch(resizeState, () => {
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	watch([resizeState, textareaRef], () => {
 		if (!textareaRef.value) return;
 		if (resizeState.value === RESIZE_START) resizeState.value = RESIZE_MEASURING;
 		else if (resizeState.value === RESIZE_MEASURING) {
@@ -69,8 +72,11 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
 	onUnmounted(() => {
 		cleanRaf();
 	});
+	useResizeObserver(computed(() => {
+		return !!(props.autoSize || props.onResize);
+	}), textareaRef, onInternalResize);
 	return () => {
-		const { autoSize, onResize, prefixCls, disabled, readOnly } = props;
+		const { prefixCls, disabled, readOnly } = props;
 		const { style, restAttrs, className } = getAttrStyleAndClass(attrs, { omits: ["onKeydown"] });
 		const mergedAutoSizeStyle = needAutoSize.value ? autoSizeStyle.value : null;
 		const mergedStyle = {
@@ -81,10 +87,7 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
 			mergedStyle.overflowY = "hidden";
 			mergedStyle.overflowX = "hidden";
 		}
-		return createVNode(ResizeObserver, {
-			"onResize": onInternalResize,
-			"disabled": !(autoSize || onResize)
-		}, { default: () => [createVNode("textarea", mergeProps(omit(restAttrs, ["readonly"]), omit(props, [
+		return createVNode("textarea", mergeProps(omit(restAttrs, ["readonly"]), omit(props, [
 			"suffix",
 			"classNames",
 			"styles",
@@ -107,7 +110,7 @@ var ResizableTextArea_default = /* @__PURE__ */ defineComponent((props, { expose
 			"disabled": disabled,
 			"value": mergedValue.value,
 			"onInput": onInternalChange
-		}), null)] });
+		}), null);
 	};
 }, {
 	props: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/textarea",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "publishConfig": {
     "access": "public"
   },
@@ -23,9 +23,9 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/input": "^1.0.0",
-    "@v-c/resize-observer": "^1.0.3",
-    "@v-c/util": "^1.0.4"
+    "@v-c/input": "^1.0.2",
+    "@v-c/resize-observer": "^1.0.8",
+    "@v-c/util": "^1.0.9"
   },
   "scripts": {
     "build": "vite build",