@vizejs/composable 0.454.0 → 0.458.0

package/dist/textarea-autosize.d.mts

@@ -44,9 +44,9 @@ interface TextareaAutosizeControls {
  * Grow a textarea to fit its content.
  *
  * On each input change (and when the element width changes), the style
- * property is reset to `auto`, `scrollHeight` is read, and the height is
- * written back in pixels. Nothing is measured during server rendering, so the
- * markup keeps its declared `rows`.
+ * property is reset to `auto`, and `scrollHeight` is adjusted for the element's
+ * padding, borders and box sizing before writing the CSS height in pixels.
+ * Nothing is measured during server rendering; markup keeps its declared `rows`.
  *
  * @param target Reactive textarea target.
  * @param options Bound input, style property, callback, and observer capability.

package/dist/textarea-autosize.mjs

@@ -7,9 +7,9 @@ import { ref, watch } from "vue";
 * Grow a textarea to fit its content.
 *
 * On each input change (and when the element width changes), the style
-* property is reset to `auto`, `scrollHeight` is read, and the height is
-* written back in pixels. Nothing is measured during server rendering, so the
-* markup keeps its declared `rows`.
+* property is reset to `auto`, and `scrollHeight` is adjusted for the element's
+* padding, borders and box sizing before writing the CSS height in pixels.
+* Nothing is measured during server rendering; markup keeps its declared `rows`.
 *
 * @param target Reactive textarea target.
 * @param options Bound input, style property, callback, and observer capability.
@@ -24,7 +24,9 @@ function useTextareaAutosize(target, options = {}) {
 		const element = resolveElement(target);
 		if (!element || !isAutosizeElement(element)) return;
 		element.style.setProperty(styleProp, "auto");
-		const height = element.scrollHeight;
+		const style = element.ownerDocument?.defaultView?.getComputedStyle(element);
+		const offset = style?.boxSizing === "border-box" ? cssPixels(style.borderTopWidth) + cssPixels(style.borderBottomWidth) : -cssPixels(style?.paddingTop) - cssPixels(style?.paddingBottom);
+		const height = Math.max(0, element.scrollHeight + offset);
 		element.style.setProperty(styleProp, `${height}px`);
 		options.onResize?.(height);
 	};
@@ -50,5 +52,8 @@ function useTextareaAutosize(target, options = {}) {
 function isAutosizeElement(element) {
 	return "style" in element && typeof element.scrollHeight === "number";
 }
+function cssPixels(value) {
+	return Number.parseFloat(value ?? "0") || 0;
+}
 //#endregion
 export { useTextareaAutosize };

package/dist/virtual-list.d.mts

@@ -1,6 +1,6 @@
 import { ResizeObserverHost } from "./resize-observer.mjs";
 import { ElementRefSetter } from "./element-ref.mjs";
-import { ComputedRef, MaybeRefOrGetter } from "vue";
+import { CSSProperties, ComputedRef, MaybeRefOrGetter } from "vue";
 
 //#region src/virtual-list.d.ts
 /** Item size: a fixed size in CSS pixels or a per-item function. */
@@ -49,14 +49,14 @@ interface VirtualListItem<Item> {
   readonly size: number;
 }
 /** Inline style for the scroll container. */
-interface VirtualContainerStyle {
+interface VirtualContainerStyle extends CSSProperties {
   /** Vertical overflow. */
   readonly overflowY: "auto" | "hidden";
   /** Horizontal overflow. */
   readonly overflowX: "auto" | "hidden";
 }
 /** Inline style for the inner wrapper that holds the rendered items. */
-interface VirtualWrapperStyle {
+interface VirtualWrapperStyle extends CSSProperties {
   /** Wrapper width. */
   readonly width: string;
   /** Wrapper height. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/composable",
-  "version": "0.454.0",
+  "version": "0.458.0",
   "description": "Lifecycle-safe composable foundations for Vize applications",
   "keywords": [
     "composables",
@@ -977,7 +977,7 @@
   },
   "devDependencies": {
     "@types/node": "25.9.2",
-    "@vizejs/native": "0.454.0",
+    "@vizejs/native": "0.458.0",
     "happy-dom": "20.11.2",
     "typescript": "6.0.3",
     "vite-plus": "0.1.24",

package/registry/files/textarea-autosize.ts

@@ -61,9 +61,9 @@ export interface TextareaAutosizeControls {
  * Grow a textarea to fit its content.
  *
  * On each input change (and when the element width changes), the style
- * property is reset to `auto`, `scrollHeight` is read, and the height is
- * written back in pixels. Nothing is measured during server rendering, so the
- * markup keeps its declared `rows`.
+ * property is reset to `auto`, and `scrollHeight` is adjusted for the element's
+ * padding, borders and box sizing before writing the CSS height in pixels.
+ * Nothing is measured during server rendering; markup keeps its declared `rows`.
  *
  * @param target Reactive textarea target.
  * @param options Bound input, style property, callback, and observer capability.
@@ -82,7 +82,12 @@ export function useTextareaAutosize(
     const element = resolveElement(target);
     if (!element || !isAutosizeElement(element)) return;
     element.style.setProperty(styleProp, "auto");
-    const height = element.scrollHeight;
+    const style = element.ownerDocument?.defaultView?.getComputedStyle(element);
+    const offset =
+      style?.boxSizing === "border-box"
+        ? cssPixels(style.borderTopWidth) + cssPixels(style.borderBottomWidth)
+        : -cssPixels(style?.paddingTop) - cssPixels(style?.paddingBottom);
+    const height = Math.max(0, element.scrollHeight + offset);
     element.style.setProperty(styleProp, `${height}px`);
     options.onResize?.(height);
   };
@@ -112,3 +117,7 @@ export function useTextareaAutosize(
 function isAutosizeElement(element: Element): element is AutosizeElement {
   return "style" in element && typeof element.scrollHeight === "number";
 }
+
+function cssPixels(value: string | undefined): number {
+  return Number.parseFloat(value ?? "0") || 0;
+}

package/registry/files/virtual-list.ts

@@ -1,5 +1,5 @@
 import { computed, shallowRef, toValue } from "vue";
-import type { ComputedRef, MaybeRefOrGetter } from "vue";
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from "vue";
 
 import { useElementRef } from "./element-ref.ts";
 import type { ElementRefSetter } from "./element-ref.ts";
@@ -60,7 +60,7 @@ export interface VirtualListItem<Item> {
 }
 
 /** Inline style for the scroll container. */
-export interface VirtualContainerStyle {
+export interface VirtualContainerStyle extends CSSProperties {
   /** Vertical overflow. */
   readonly overflowY: "auto" | "hidden";
   /** Horizontal overflow. */
@@ -68,7 +68,7 @@ export interface VirtualContainerStyle {
 }
 
 /** Inline style for the inner wrapper that holds the rendered items. */
-export interface VirtualWrapperStyle {
+export interface VirtualWrapperStyle extends CSSProperties {
   /** Wrapper width. */
   readonly width: string;
   /** Wrapper height. */

package/registry/registry.json

@@ -3,7 +3,7 @@
   "registryKind": "vize-lib",
   "package": {
     "name": "@vizejs/composable",
-    "version": "0.454.0"
+    "version": "0.458.0"
   },
   "kind": "composable",
   "filesDirectory": "files",
@@ -2179,8 +2179,8 @@
         {
           "path": "textarea-autosize.ts",
           "role": "entry",
-          "sha256": "4f7c142eacab4a82e492bba55652a8d6e02132245c6fa4410fb3c180bda52776",
-          "size": 3576
+          "sha256": "83c46e693c6ffb6ba0ff427f9bed73842289886f105cad037da5a00684be1e8b",
+          "size": 4047
         }
       ],
       "registryDependencies": [
@@ -2195,7 +2195,7 @@
           "kind": "peer"
         }
       ],
-      "contentHash": "3916d3669ccd4feaa5839a237d194eb4f9ddb128527137f92bf596302f00b7f7",
+      "contentHash": "b98040d2d64f4c695225dc282b4203c6fc1853e4e428f6688d61e6a0a79b19d1",
       "examples": []
     },
     {
@@ -5521,8 +5521,8 @@
         {
           "path": "virtual-list.ts",
           "role": "entry",
-          "sha256": "e3ba302ebd836881b81aeb0cc12df31812b97c855ca064ee6e7882ae77810232",
-          "size": 8025
+          "sha256": "e7b9f8c0059b85ecb71ac909bce323876ed625df42bc2836e16ccd766c7be07f",
+          "size": 8084
         }
       ],
       "registryDependencies": [
@@ -5538,7 +5538,7 @@
           "kind": "peer"
         }
       ],
-      "contentHash": "9faf1b67039f540505ca459988a60d902bf09845eb837dc0698b5dc05ee80f55",
+      "contentHash": "44506accc8b59b4778c28d23f7aa12cb655b0c033f5d165ee2580ae44a4f1368",
       "examples": []
     },
     {