@pixelium/web-vue 0.0.2-fix → 0.0.3-alpha

package/es/share/hook/use-index-of-children.js

@@ -1,48 +1,50 @@
-import { onUpdated, ref, getCurrentInstance, onMounted, nextTick, onBeforeUnmount } from "vue";
-import { i as inBrowser } from "../util/env.js";
-import { E as EventBus } from "../util/event-bus.js";
-const useIndexOfChildren = (eventBusKey) => {
-  const index = ref(-1);
-  const last = ref(false);
-  const first = ref(false);
-  const instance = getCurrentInstance();
-  const callback = () => {
-    if (instance && instance.vnode.el instanceof HTMLElement) {
-      const parent = instance.vnode.el.parentElement;
-      if (parent && parent.children.length) {
-        const arr = [...parent.children];
-        index.value = arr.indexOf(instance.vnode.el);
-        last.value = index.value === parent.children.length - 1;
-        first.value = index.value === 0;
-      } else {
-        index.value = -1;
-        last.value = false;
-        first.value = false;
-      }
-    }
-  };
-  if (inBrowser()) {
-    EventBus.on(eventBusKey, callback);
-    onMounted(() => {
-      nextTick(() => {
-        callback();
-      });
-    });
-    onUpdated(() => {
-      callback();
-    });
-    onBeforeUnmount(() => {
-      EventBus.off(eventBusKey, callback);
-    });
-  }
-  return [index, first, last];
+import { t as inBrowser } from "../util/env.js";
+import { t as EventBus } from "../util/event-bus.js";
+import { getCurrentInstance, nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
+const useIndexOfChildren = (eventBusKey, elGetter) => {
+	const index = ref(-1);
+	const last = ref(false);
+	const first = ref(false);
+	const instance = getCurrentInstance();
+	const callback = () => {
+		if (instance) {
+			var _instance$vnode$el;
+			const parent = (_instance$vnode$el = instance.vnode.el) === null || _instance$vnode$el === void 0 ? void 0 : _instance$vnode$el.parentElement;
+			const el = elGetter ? elGetter(instance) : instance.vnode.el;
+			if (el && parent && parent.children.length) {
+				index.value = [...parent.children].indexOf(el);
+				last.value = index.value === parent.children.length - 1;
+				first.value = index.value === 0;
+			} else {
+				index.value = -1;
+				last.value = false;
+				first.value = false;
+			}
+		}
+	};
+	if (inBrowser()) {
+		EventBus.on(eventBusKey, callback);
+		onMounted(() => {
+			nextTick(() => {
+				callback();
+			});
+		});
+		onUpdated(() => {
+			callback();
+		});
+		onBeforeUnmount(() => {
+			EventBus.off(eventBusKey, callback);
+		});
+	}
+	return [
+		index,
+		first,
+		last
+	];
 };
 const emitParentUpdate = (eventBusKey) => {
-  onUpdated(() => {
-    EventBus.emit(eventBusKey);
-  });
-};
-export {
-  emitParentUpdate as e,
-  useIndexOfChildren as u
+	onUpdated(() => {
+		EventBus.emit(eventBusKey);
+	});
 };
+export { useIndexOfChildren as n, emitParentUpdate as t };

package/es/share/hook/use-lazy-load.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+type LazyLoadOptions = {
+    onLoad?: (img: HTMLImageElement, event: Event) => void;
+    onError?: (img: HTMLImageElement, error: string | Event) => void;
+    onLoading?: (img: HTMLImageElement) => void;
+    rootMargin?: number | [number, number];
+    root?: HTMLElement | string;
+};
+export declare function useLazyLoad(imgRef: Ref<HTMLImageElement | null>, options?: LazyLoadOptions): void;
+export {};

package/es/share/hook/use-lazy-load.js

@@ -0,0 +1,133 @@
+import { B as y, D as S, _ as E, w as Qn } from "../../vendor.js";
+import { n as logWarn } from "../util/console.js";
+import { n as checkIntersection } from "../util/dom.js";
+import { nextTick, onMounted, onUnmounted } from "vue";
+var observedElementMap = /* @__PURE__ */ new WeakMap();
+var VIEWPORT_FAKE_ELEMENT = {};
+var observerMap = /* @__PURE__ */ new WeakMap();
+var imgOptionsMap = /* @__PURE__ */ new WeakMap();
+function useLazyLoad(imgRef, options = {}) {
+	const curOptions = Qn(options, { lazyOffset: 0 });
+	let curRoot = void 0;
+	const loadImageImpl = (img, imgOptions, src, srcset) => {
+		var _imgOptions$onLoading;
+		(_imgOptions$onLoading = imgOptions.onLoading) === null || _imgOptions$onLoading === void 0 || _imgOptions$onLoading.call(imgOptions, img);
+		const tempImg = new Image();
+		tempImg.src = src || "";
+		tempImg.referrerPolicy = img.referrerPolicy;
+		tempImg.crossOrigin = img.crossOrigin;
+		tempImg.srcset = srcset || "";
+		tempImg.onload = (e) => {
+			var _imgOptions$onLoad;
+			(_imgOptions$onLoad = imgOptions.onLoad) === null || _imgOptions$onLoad === void 0 || _imgOptions$onLoad.call(imgOptions, img, e);
+		};
+		tempImg.onerror = (error) => {
+			var _imgOptions$onError;
+			(_imgOptions$onError = imgOptions.onError) === null || _imgOptions$onError === void 0 || _imgOptions$onError.call(imgOptions, img, error);
+		};
+	};
+	const loadImage = (img) => {
+		const src = img.dataset.src;
+		const srcset = img.dataset.srcset;
+		if (!src && !srcset) return;
+		loadImageImpl(img, imgOptionsMap.get(img), src, srcset);
+	};
+	const key = S(curOptions.rootMargin) ? `${curOptions.rootMargin[0]}-${curOptions.rootMargin[1]}` : String(curOptions.rootMargin);
+	const getObserver = () => {
+		const keyEl = curRoot || VIEWPORT_FAKE_ELEMENT;
+		let observers = observerMap.get(keyEl);
+		if (!observers) {
+			observerMap.set(keyEl, /* @__PURE__ */ new Map());
+			observers = observerMap.get(keyEl);
+		}
+		const observer = observers.get(key);
+		return {
+			observers,
+			observer
+		};
+	};
+	const getObservedElements = (key$1) => {
+		const keyEl = curRoot || VIEWPORT_FAKE_ELEMENT;
+		let observedSetMap = observedElementMap.get(keyEl);
+		if (!observedSetMap) {
+			observedElementMap.set(keyEl, /* @__PURE__ */ new Map());
+			observedSetMap = observedElementMap.get(keyEl);
+		}
+		let observedSet = observedSetMap.get(key$1);
+		if (!observedSet) {
+			observedSetMap.set(key$1, /* @__PURE__ */ new Set());
+			observedSet = observedSetMap.get(key$1);
+		}
+		return {
+			observedSet,
+			observedSetMap
+		};
+	};
+	const initObserver = () => {
+		const { observer, observers } = getObserver();
+		if (observer) return;
+		const rootMargin = !E(curOptions.rootMargin) ? S(curOptions.rootMargin) ? `${curOptions.rootMargin[1]}px ${curOptions.rootMargin[0]}px` : `${curOptions.rootMargin}px` : void 0;
+		const curObserver = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					const img = entry.target;
+					loadImage(img);
+					unobserve(img);
+				}
+			});
+		}, {
+			root: curRoot,
+			rootMargin
+		});
+		observers.set(key, curObserver);
+	};
+	const observe = (img) => {
+		const { observedSet } = getObservedElements(key);
+		if (observedSet.has(img) || img.dataset.loaded === "true") return;
+		const { observers } = getObserver();
+		observers.get(key).observe(img);
+		observedSet.add(img);
+		imgOptionsMap.set(img, curOptions);
+	};
+	const unobserve = (img) => {
+		const { observedSet, observedSetMap } = getObservedElements(key);
+		const { observers } = getObserver();
+		observers.get(key).unobserve(img);
+		observedSet.delete(img);
+		imgOptionsMap.delete(img);
+		if (observedSet.size === 0) {
+			observers.get(key).disconnect();
+			observers.delete(key);
+			observedSetMap.delete(key);
+		}
+	};
+	const scanImages = () => {
+		if (!imgRef.value) return;
+		observe(imgRef.value);
+	};
+	const init = () => {
+		nextTick(() => {
+			if (!imgRef.value) return;
+			if (y(curOptions.root)) {
+				const dom = document.querySelector(curOptions.root);
+				if (dom instanceof HTMLElement) curRoot = dom;
+				else logWarn(`The DOM node for the visible area of lazy loading was not found, and the viewport is used as the visible area by default.`, true);
+			} else curRoot = curOptions.root;
+			initObserver();
+			const intersection = checkIntersection(imgRef.value, curRoot);
+			const marginX = S(curOptions.rootMargin) ? curOptions.rootMargin[0] : curOptions.rootMargin || 0;
+			const marginY = S(curOptions.rootMargin) ? curOptions.rootMargin[1] : curOptions.rootMargin || 0;
+			if (intersection.hasIntersection || intersection.x < marginX && intersection.y < marginY) {
+				const src = imgRef.value.dataset.src;
+				const srcset = imgRef.value.dataset.srcset;
+				if (src || srcset) loadImageImpl(imgRef.value, curOptions, src, srcset);
+			} else scanImages();
+		});
+	};
+	const destroy = () => {
+		if (imgRef.value) unobserve(imgRef.value);
+	};
+	onMounted(init);
+	onUnmounted(destroy);
+}
+export { useLazyLoad as t };

package/es/share/hook/use-props-detect.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare function usePropsDetect<T extends Record<string, any>, U extends keyof T>(props: T, fields?: Array<U> | U, emptyValues?: Record<U, any>): Ref<Record<U, boolean>, Record<U, boolean>>;

package/es/share/hook/use-resize-observer.d.ts

@@ -1,3 +1,2 @@
-import type { Nullish } from 'parsnip-kit';
 import { type Ref } from 'vue';
-export declare const useResizeObserver: (ref: Ref<Nullish | HTMLElement>, callback: () => any, leading?: boolean) => ResizeObserver | null;
+export declare const useResizeObserver: (ref: Ref<HTMLElement | null | undefined>, callback: () => void, leading?: boolean) => void;

package/es/share/hook/use-resize-observer.js

@@ -1,21 +1,29 @@
-import { onMounted, onBeforeUnmount } from "vue";
-import { i as inBrowser } from "../util/env.js";
-const useResizeObserver = (ref, callback, leading) => {
-  if (!inBrowser()) {
-    return null;
-  }
-  const resizeObserver = new ResizeObserver(callback);
-  onMounted(() => {
-    setTimeout(() => {
-      leading && callback();
-      ref.value && resizeObserver.observe(ref.value);
-    });
-  });
-  onBeforeUnmount(() => {
-    resizeObserver.disconnect();
-  });
-  return resizeObserver;
-};
-export {
-  useResizeObserver as u
+import { n as inVitest, t as inBrowser } from "../util/env.js";
+import { nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+const useResizeObserver = (ref$1, callback, leading) => {
+	if (leading) onMounted(() => {
+		nextTick(() => {
+			callback();
+		});
+	});
+	if (!inBrowser()) return;
+	if (inVitest()) return;
+	let resizeObserver = null;
+	watch(ref$1, (element) => {
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+			resizeObserver = null;
+		}
+		if (element) {
+			resizeObserver = new ResizeObserver(callback);
+			resizeObserver.observe(element);
+		}
+	}, { flush: "post" });
+	onBeforeUnmount(() => {
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+			resizeObserver = null;
+		}
+	});
 };
+export { useResizeObserver as t };

package/es/share/hook/use-screen-width.js

@@ -1,38 +1,29 @@
-import { ref, computed, onBeforeUnmount } from "vue";
-import { S as SCREEN_SIZE_TYPE } from "../const/index.js";
-import { i as inBrowser } from "../util/env.js";
+import { s as SCREEN_SIZE_TYPE } from "../const/index.js";
+import { t as inBrowser } from "../util/env.js";
+import { computed, onBeforeUnmount, ref } from "vue";
 const useScreenWidth = () => {
-  const screenWidth = ref(0);
-  function handleResize() {
-    if (!inBrowser()) return;
-    screenWidth.value = window.innerWidth;
-  }
-  handleResize();
-  const screenSizeType = computed(() => {
-    let type;
-    if (screenWidth.value <= 576) {
-      type = SCREEN_SIZE_TYPE.XS;
-    } else if (screenWidth.value <= 768) {
-      type = SCREEN_SIZE_TYPE.SM;
-    } else if (screenWidth.value <= 992) {
-      type = SCREEN_SIZE_TYPE.MD;
-    } else if (screenWidth.value <= 1200) {
-      type = SCREEN_SIZE_TYPE.LG;
-    } else if (screenWidth.value <= 1600) {
-      type = SCREEN_SIZE_TYPE.XL;
-    } else {
-      type = SCREEN_SIZE_TYPE.XXL;
-    }
-    return type;
-  });
-  if (inBrowser()) {
-    window.addEventListener("resize", handleResize);
-    onBeforeUnmount(() => {
-      window.removeEventListener("resize", handleResize);
-    });
-  }
-  return [screenSizeType, screenWidth];
-};
-export {
-  useScreenWidth as u
+	const screenWidth = ref(0);
+	function handleResize() {
+		if (!inBrowser()) return;
+		screenWidth.value = window.innerWidth;
+	}
+	handleResize();
+	const screenSizeType = computed(() => {
+		let type;
+		if (screenWidth.value <= 576) type = SCREEN_SIZE_TYPE.XS;
+		else if (screenWidth.value <= 768) type = SCREEN_SIZE_TYPE.SM;
+		else if (screenWidth.value <= 992) type = SCREEN_SIZE_TYPE.MD;
+		else if (screenWidth.value <= 1200) type = SCREEN_SIZE_TYPE.LG;
+		else if (screenWidth.value <= 1600) type = SCREEN_SIZE_TYPE.XL;
+		else type = SCREEN_SIZE_TYPE.XXL;
+		return type;
+	});
+	if (inBrowser()) {
+		window.addEventListener("resize", handleResize);
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", handleResize);
+		});
+	}
+	return [screenSizeType, screenWidth];
 };
+export { useScreenWidth as t };

package/es/share/hook/use-smooth-transition.d.ts

@@ -0,0 +1,2 @@
+export type TransitionDirection = 'forward' | 'backward';
+export declare function useSmoothTransition(duration?: number, initialValue?: number): readonly [import("vue").Ref<number, number>, (direction: TransitionDirection, newDuration?: number) => void, () => void, import("vue").Ref<boolean, boolean>];

package/es/share/hook/use-smooth-transition.js

@@ -0,0 +1,65 @@
+import { _ as E } from "../../vendor.js";
+import { ref } from "vue";
+function cubicBezier(t, x1, y1, x2, y2) {
+	const calcBezier = (t$1, a1, a2) => {
+		return 3 * a1 * t$1 * (1 - t$1) ** 2 + 3 * a2 * t$1 ** 2 * (1 - t$1) + t$1 ** 3;
+	};
+	const getTForX = (x) => {
+		let low = 0, high = 1;
+		let tMid = x;
+		for (let i = 0; i < 8; i++) {
+			const xMid = calcBezier(tMid, x1, x2);
+			if (Math.abs(x - xMid) < 1e-6) return tMid;
+			if (x < xMid) high = tMid;
+			else low = tMid;
+			tMid = (low + high) / 2;
+		}
+		return tMid;
+	};
+	return calcBezier(getTForX(t), y1, y2);
+}
+var ease = (t) => cubicBezier(t, .25, .1, .25, 1);
+function useSmoothTransition(duration = 250, initialValue = 0) {
+	const value = ref(Math.max(0, Math.min(1, initialValue)));
+	const isPlaying = ref(false);
+	let animationFrameId = null;
+	let startTime = null;
+	let startValue = null;
+	let targetValue = null;
+	const pause = () => {
+		if (animationFrameId) {
+			cancelAnimationFrame(animationFrameId);
+			animationFrameId = null;
+		}
+		isPlaying.value = false;
+	};
+	const update = (timestamp) => {
+		if (!startTime || E(startValue) || E(targetValue) || !duration) return;
+		const elapsed = timestamp - startTime;
+		const progress = Math.min(elapsed / duration, 1);
+		const easedProgress = ease(progress);
+		value.value = startValue + (targetValue - startValue) * easedProgress;
+		if (progress < 1) animationFrameId = requestAnimationFrame(update);
+		else {
+			pause();
+			value.value = targetValue;
+		}
+	};
+	const play = (direction, newDuration = duration) => {
+		if (newDuration <= 0) return;
+		if (isPlaying.value && animationFrameId) cancelAnimationFrame(animationFrameId);
+		isPlaying.value = true;
+		startTime = performance.now();
+		startValue = value.value;
+		targetValue = direction === "forward" ? 1 : 0;
+		duration = newDuration;
+		animationFrameId = requestAnimationFrame(update);
+	};
+	return [
+		value,
+		play,
+		pause,
+		isPlaying
+	];
+}
+export { useSmoothTransition as t };

package/es/share/hook/use-textarea-height.js

@@ -1,10 +1,9 @@
-import { C as Cn } from "../../aside/index.js";
-import { c as clamp } from "../util/common.js";
-import { ref, onBeforeUnmount } from "vue";
-import { u as useResizeObserver } from "./use-resize-observer.js";
-import { i as inBrowser } from "../util/env.js";
-let hiddenTextarea = null;
-const HIDDEN_STYLE = `
+import { P as ke, x as Nn } from "../../vendor.js";
+import { t as inBrowser } from "../util/env.js";
+import { t as useResizeObserver } from "./use-resize-observer.js";
+import { onBeforeUnmount, ref } from "vue";
+var hiddenTextarea = null;
+var HIDDEN_STYLE = `
   position:absolute!important;
   top:-9999px!important;
   left:-9999px!important;
@@ -16,101 +15,96 @@ const HIDDEN_STYLE = `
   height:0!important;
   z-index:-9999!important;
 `;
-const SIZING_STYLE = [
-  "letter-spacing",
-  "line-height",
-  "padding-top",
-  "padding-bottom",
-  "font-family",
-  "font-weight",
-  "font-size",
-  "font-variant",
-  "text-rendering",
-  "text-transform",
-  "width",
-  "padding-left",
-  "padding-right",
-  "border-width",
-  "box-sizing"
+var SIZING_STYLE = [
+	"letter-spacing",
+	"line-height",
+	"padding-top",
+	"padding-bottom",
+	"font-family",
+	"font-weight",
+	"font-size",
+	"font-variant",
+	"text-rendering",
+	"text-transform",
+	"width",
+	"padding-left",
+	"padding-right",
+	"border-width",
+	"box-sizing"
 ];
 function calculateNodeStyling(target) {
-  const style = window.getComputedStyle(target);
-  const boxSizing = style.getPropertyValue("box-sizing");
-  const paddingSize = parseFloat(style.getPropertyValue("padding-top")) + parseFloat(style.getPropertyValue("padding-bottom"));
-  const borderSize = parseFloat(style.getPropertyValue("border-top-width")) + parseFloat(style.getPropertyValue("border-bottom-width"));
-  const sizingStyle = SIZING_STYLE.map(
-    (name) => `${name}:${style.getPropertyValue(name)}`
-  ).join(";");
-  return { sizingStyle, paddingSize, borderSize, boxSizing };
+	const style = window.getComputedStyle(target);
+	const boxSizing = style.getPropertyValue("box-sizing");
+	const paddingSize = parseFloat(style.getPropertyValue("padding-top")) + parseFloat(style.getPropertyValue("padding-bottom"));
+	const borderSize = parseFloat(style.getPropertyValue("border-top-width")) + parseFloat(style.getPropertyValue("border-bottom-width"));
+	return {
+		sizingStyle: SIZING_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";"),
+		paddingSize,
+		borderSize,
+		boxSizing
+	};
 }
 function getHeight(node, minRows = 1, maxRows = Infinity) {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement("textarea");
-    document.body.appendChild(hiddenTextarea);
-  }
-  const { sizingStyle, paddingSize, borderSize, boxSizing } = calculateNodeStyling(node);
-  const nodeWidth = node.getBoundingClientRect().width;
-  hiddenTextarea.setAttribute(
-    "style",
-    `${sizingStyle};${Cn(HIDDEN_STYLE, (pattern) => pattern === "width" ? String(nodeWidth) : "")}`
-  );
-  hiddenTextarea.value = "";
-  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-  const minHeight = singleRowHeight * minRows + (boxSizing === "border-box" ? paddingSize + borderSize : 0);
-  const maxHeight = singleRowHeight * maxRows + (boxSizing === "border-box" ? paddingSize + borderSize : 0);
-  hiddenTextarea.value = node.value || node.placeholder || "";
-  let height = hiddenTextarea.scrollHeight;
-  height += +(boxSizing === "border-box") * borderSize;
-  height = clamp(height, minHeight, maxHeight);
-  return {
-    height,
-    minHeight,
-    maxHeight
-  };
+	if (!hiddenTextarea) {
+		hiddenTextarea = document.createElement("textarea");
+		document.body.appendChild(hiddenTextarea);
+	}
+	const { sizingStyle, paddingSize, borderSize, boxSizing } = calculateNodeStyling(node);
+	const nodeWidth = node.getBoundingClientRect().width;
+	hiddenTextarea.setAttribute("style", `${sizingStyle};${Nn(HIDDEN_STYLE, (pattern) => pattern === "width" ? String(nodeWidth) : "")}`);
+	hiddenTextarea.value = "";
+	let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+	const minHeight = singleRowHeight * minRows + (boxSizing === "border-box" ? paddingSize + borderSize : 0);
+	const maxHeight = singleRowHeight * maxRows + (boxSizing === "border-box" ? paddingSize + borderSize : 0);
+	hiddenTextarea.value = node.value || node.placeholder || "";
+	let height = hiddenTextarea.scrollHeight;
+	height += +(boxSizing === "border-box") * borderSize;
+	height = ke(height, minHeight, maxHeight);
+	return {
+		height,
+		minHeight,
+		maxHeight
+	};
 }
-let textareaMounted = 0;
+var textareaMounted = 0;
 function calcTextareaHeight(textarea, minRows, maxRows) {
-  const height = getHeight(textarea, minRows, maxRows);
-  return height;
+	return getHeight(textarea, minRows, maxRows);
 }
 function destroyHiddenTextarea() {
-  textareaMounted--;
-  if (hiddenTextarea && textareaMounted <= 0) {
-    hiddenTextarea.remove();
-    hiddenTextarea = null;
-  }
+	textareaMounted--;
+	if (hiddenTextarea && textareaMounted <= 0) {
+		hiddenTextarea.remove();
+		hiddenTextarea = null;
+	}
 }
 function recordTextareaMounted() {
-  textareaMounted++;
+	textareaMounted++;
 }
 const useTextareaHeight = (textareaRef, props) => {
-  const height = ref(void 0);
-  const minHeight = ref(void 0);
-  const maxHeight = ref(void 0);
-  const callback = () => {
-    if (!inBrowser()) {
-      return;
-    }
-    if (textareaRef.value) {
-      const data = calcTextareaHeight(
-        textareaRef.value,
-        props.minRows || 1,
-        props.maxRows || Infinity
-      );
-      height.value = data.height;
-      maxHeight.value = data.maxHeight;
-      minHeight.value = data.minHeight;
-    }
-  };
-  if (inBrowser()) {
-    recordTextareaMounted();
-    useResizeObserver(textareaRef, callback, true);
-    onBeforeUnmount(() => {
-      destroyHiddenTextarea();
-    });
-  }
-  return [height, minHeight, maxHeight, callback];
-};
-export {
-  useTextareaHeight as u
+	const height = ref(void 0);
+	const minHeight = ref(void 0);
+	const maxHeight = ref(void 0);
+	const callback = () => {
+		if (!inBrowser()) return;
+		if (textareaRef.value) {
+			const data = calcTextareaHeight(textareaRef.value, props.minRows || 1, props.maxRows || Infinity);
+			height.value = data.height;
+			maxHeight.value = data.maxHeight;
+			minHeight.value = data.minHeight;
+		}
+	};
+	if (inBrowser()) {
+		recordTextareaMounted();
+		useResizeObserver(textareaRef, callback, true);
+		onBeforeUnmount(() => {
+			destroyHiddenTextarea();
+		});
+	}
+	return [
+		height,
+		minHeight,
+		maxHeight,
+		callback
+	];
 };
+export { useTextareaHeight as t };