@warkypublic/svelix 0.2.4 → 0.2.5

package/dist/components/VTree/VTree.svelte

@@ -1,14 +1,17 @@
-<script lang="ts">import { onMount } from "svelte";
+<script lang="ts">import { onMount, untrack } from "svelte";
 import VTreeSearch from "./VTreeSearch.svelte";
 import VTreeVirtualViewport from "./VTreeVirtualViewport.svelte";
 import VTreeContextMenu from "./VTreeContextMenu.svelte";
 import { buildNodeIndex, computeMultiSelectClick, findAncestorIds } from "./VTree.utils.js";
-const { data = [], adapter, idField = "id", labelField = "label", descriptionField = "description", childrenField = "children", hasChildrenField = "hasChildren", height = 420, rowHeight = 36, indent = 18, overscan = 8, searchable = true, searchPlaceholder = "Search tree...", searchValue = "", serverSideSearch = false, autoExpandSearchResults = true, loadOnMount = true, emptyMessage = "Nothing here...", loadingMessage = "Loading...", leftSection, rightSection, contextMenuItems, onselect, onclick, ondoubleclick, oncontext, ontoggle, onsearch, onloaderror, selected, onSelectedChange, multiple = false, selectedItems, onSelectedItemsChange, selectionMode = "modifier", autoMeasure = false, iconField, icon, classes, showRowSeparator = true, hoverEffect = true, onsingleclick, singleClickDelay = 250, onlongpress, longPressDelay = 500, longPressMoveTolerance = 10, onrowhover, onrowhoverend } = $props();
+const { data = [], adapter, idField = "id", labelField = "label", descriptionField = "description", childrenField = "children", hasChildrenField = "hasChildren", height = "100%", rowHeight = 36, indent = 18, overscan = 8, searchable = true, searchPlaceholder = "Search tree...", searchValue = "", serverSideSearch = false, autoExpandSearchResults = true, loadOnMount = true, emptyMessage = "Nothing here...", loadingMessage = "Loading...", leftSection, rightSection, contextMenuItems, onselect, onclick, ondoubleclick, oncontext, ontoggle, onsearch, onloaderror, selected, onSelectedChange, multiple = false, selectedItems, onSelectedItemsChange, selectionMode = "modifier", autoMeasure = false, iconField, icon, classes, showRowSeparator = true, hoverEffect = true, onsingleclick, singleClickDelay = 250, onlongpress, longPressDelay = 500, longPressMoveTolerance = 10, onrowhover, onrowhoverend } = $props();
 let viewportRef = $state(undefined);
 let focusedIndex = $state(0);
 let selectedId = $state(null);
 let searchQuery = $state("");
 let loadingRoot = $state(false);
+let treeElement = $state(null);
+let searchElement = $state(null);
+let viewportHeight = $state("0px");
 let rootNodes = $state([]);
 let searchNodes = $state([]);
 let childrenByParent = $state({});
@@ -93,6 +96,18 @@ function nodeHasChildren(node) {
 function normalizeRows(rows) {
 	return Array.isArray(rows) ? rows : [];
 }
+function toCssSize(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+function updateViewportHeight() {
+	if (!treeElement) return;
+	const styles = getComputedStyle(treeElement);
+	const verticalPadding = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+	const rowGap = parseFloat(styles.rowGap) || 0;
+	const searchHeight = searchElement?.offsetHeight ?? 0;
+	const nextHeight = `${Math.max(0, treeElement.clientHeight - verticalPadding - searchHeight - (searchElement ? rowGap : 0))}px`;
+	if (untrack(() => viewportHeight) !== nextHeight) viewportHeight = nextHeight;
+}
 async function loadRoot() {
 	if (!adapter) {
 		rootNodes = normalizeRows(data ?? []);
@@ -411,6 +426,14 @@ function handleContextMenuItem(item) {
 $effect(() => {
 	if (!adapter) rootNodes = normalizeRows(data ?? []);
 });
+$effect(() => {
+	if (!treeElement) return;
+	const observer = new ResizeObserver(updateViewportHeight);
+	observer.observe(treeElement);
+	if (searchElement) observer.observe(searchElement);
+	updateViewportHeight();
+	return () => observer.disconnect();
+});
 $effect(() => {
 	if (!adapter || !serverSideSearch) return;
 	clearTimeout(lastSearchHandle);
@@ -438,9 +461,11 @@ onMount(() => {
 });
 </script>
 
-<div class="card space-y-2 border border-surface-300-700 bg-surface-100-900 p-2">
+<div class="card flex h-full min-h-0 flex-col gap-2 border border-surface-300-700 bg-surface-100-900 p-2" bind:this={treeElement} style={`height: ${toCssSize(height)};`}>
   {#if searchable}
-    <VTreeSearch value={searchQuery} placeholder={searchPlaceholder} oninputvalue={handleSearchInput} />
+    <div bind:this={searchElement}>
+      <VTreeSearch value={searchQuery} placeholder={searchPlaceholder} oninputvalue={handleSearchInput} />
+    </div>
   {/if}
 
   <VTreeVirtualViewport
@@ -448,7 +473,7 @@ onMount(() => {
     rows={flattenedRows}
     {rowHeight}
     {autoMeasure}
-    {height}
+    height={viewportHeight}
     {indent}
     {overscan}
     {focusedIndex}

package/dist/components/VTree/VTreeVirtualViewport.svelte

@@ -51,7 +51,7 @@ $effect(() => {
 });
 </script>
 
-<div class="card overflow-auto border border-surface-300-700 bg-surface-50-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500" bind:this={viewportRef} style={`height: ${toCssSize(height)};`} onkeydown={(event) => ontreekeydown?.(event)} oncontextmenu={(event) => onviewportcontext?.(event)} tabindex="0" role="tree" aria-label="Virtual tree">
+<div class="card min-h-0 flex-1 basis-0 overflow-auto border border-surface-300-700 bg-surface-50-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500" bind:this={viewportRef} style={`height: ${toCssSize(height)};`} onkeydown={(event) => ontreekeydown?.(event)} oncontextmenu={(event) => onviewportcontext?.(event)} tabindex="0" role="tree" aria-label="Virtual tree">
   {#if loadingRoot}
     <div class="grid min-h-24 place-items-center px-3 text-sm text-surface-500-400-token">{loadingMessage}</div>
   {:else if rows.length === 0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Svelte 5 component library with Skeleton UI and Tailwind CSS",
   "license": "Apache-2.0",
   "exports": {