compote-ui 0.40.2 → 0.41.1

package/dist/components/card/card-content.svelte

@@ -5,6 +5,6 @@
 	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class={cn('p-6 pt-0', className)} {...rest}>
+<div class={cn('p-4 pt-0', className)} {...rest}>
 	{@render children?.()}
 </div>

package/dist/components/card/card-header.svelte

@@ -5,6 +5,6 @@
 	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class={cn('flex flex-col gap-1.5 pb-4', className)} {...rest}>
+<div class={cn('flex flex-col gap-1.5 p-4', className)} {...rest}>
 	{@render children?.()}
 </div>

package/dist/components/data-table/create-table.js

@@ -113,7 +113,8 @@ function createColumns(columns, localeCtx) {
                 align: column.align,
                 type: column.type,
                 formatOptions: column.formatOptions,
-                formatLocale: column.formatLocale
+                formatLocale: column.formatLocale,
+                grow: column.grow
             }
         };
         if (typeof column.accessorFn === 'function') {

package/dist/components/data-table/data-table-head.svelte

@@ -18,6 +18,8 @@
 		resizeHandleStyle,
 		sortButtonDirectionClass,
 		virtualColumnSizeStyle,
+		virtualGroupWithGrowSizeStyle,
+		virtualGrowColumnSizeStyle,
 		virtualSelectionColumnSizeStyle
 	} from './data-table-utils';
 
@@ -29,6 +31,7 @@
 		isMultiRowSelectionEnabled: boolean;
 		allRowsSelectionState: boolean | 'indeterminate';
 		isVirtual?: boolean;
+		hasGrowColumn?: boolean;
 	};
 
 	let {
@@ -38,14 +41,41 @@
 		isRowSelectionEnabled,
 		isMultiRowSelectionEnabled,
 		allRowsSelectionState,
-		isVirtual = false
+		isVirtual = false,
+		hasGrowColumn = false
 	}: Props = $props();
 
-	function headerCellStyle(header: HeaderGroup<DataTableFeatures, T>['headers'][number]) {
+	type Header = HeaderGroup<DataTableFeatures, T>['headers'][number];
+
+	function findGrowLeafHeader(header: Header): Header | undefined {
+		if (header.subHeaders.length === 0) {
+			return getColumnMeta(header.column.columnDef)?.grow ? header : undefined;
+		}
+		for (const sub of header.subHeaders) {
+			const found = findGrowLeafHeader(sub);
+			if (found) return found;
+		}
+		return undefined;
+	}
+
+	function headerCellStyle(header: Header) {
 		const canPinHeader = header.subHeaders.length === 0;
 
+		let virtualSizeStyle: string | undefined;
+		if (isVirtual) {
+			const isGrowLeaf = canPinHeader && getColumnMeta(header.column.columnDef)?.grow;
+			if (isGrowLeaf) {
+				virtualSizeStyle = virtualGrowColumnSizeStyle();
+			} else {
+				const growLeaf = findGrowLeafHeader(header);
+				virtualSizeStyle = growLeaf
+					? virtualGroupWithGrowSizeStyle(header.getSize() - growLeaf.getSize())
+					: virtualColumnSizeStyle(header.getSize());
+			}
+		}
+
 		return joinStyles(
-			isVirtual ? virtualColumnSizeStyle(header.getSize()) : undefined,
+			virtualSizeStyle,
 			canPinHeader ? getPinningStyle(header.column, true, isRowSelectionEnabled) : undefined
 		);
 	}
@@ -155,7 +185,7 @@
 					{/if}
 				</th>
 			{/each}
-			{#if !isVirtual}
+			{#if !isVirtual && !hasGrowColumn}
 				<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
 			{/if}
 		</tr>

package/dist/components/data-table/data-table-head.svelte.d.ts

@@ -9,6 +9,7 @@ declare function $$render<T extends RowData>(): {
         isMultiRowSelectionEnabled: boolean;
         allRowsSelectionState: boolean | "indeterminate";
         isVirtual?: boolean;
+        hasGrowColumn?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/components/data-table/data-table-utils.d.ts

@@ -16,6 +16,8 @@ export declare function selectionColumnSizeStyle(): string;
 export declare function virtualColumnSizeStyle(size: number): string;
 export declare function virtualSelectionColumnSizeStyle(): string;
 export declare function tableSizeStyle<T extends RowData>(table: DataTableInstance<T>, isRowSelectionEnabled: boolean): string;
+export declare function virtualGrowColumnSizeStyle(): string;
+export declare function virtualGroupWithGrowSizeStyle(fixedPortion: number): string;
 export declare function resizeHandleStyle<T extends RowData>(table: DataTableInstance<T>, header: Header<DataTableFeatures, T, CellData>): string | undefined;
 export declare function resizeHandleClass(headerIndex: number, headerCount: number): import("tailwind-variants").CnReturn;
 export declare function getHeaderSortDirection<T extends RowData>(header: Header<DataTableFeatures, T, CellData>, sortingState: unknown): false | import("@tanstack/table-core").SortDirection;

package/dist/components/data-table/data-table-utils.js

@@ -27,6 +27,12 @@ export function virtualSelectionColumnSizeStyle() {
 export function tableSizeStyle(table, isRowSelectionEnabled) {
     return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
 }
+export function virtualGrowColumnSizeStyle() {
+    return 'display: flex; flex: 1; min-width: 0';
+}
+export function virtualGroupWithGrowSizeStyle(fixedPortion) {
+    return `display: flex; flex: 1 0 ${fixedPortion}px; width: ${fixedPortion}px`;
+}
 export function resizeHandleStyle(table, header) {
     if (table.options.columnResizeMode !== 'onEnd')
         return undefined;

package/dist/components/data-table/data-table-virtual-rows.svelte

@@ -18,6 +18,7 @@
 		justifyClass,
 		openUrlCell,
 		virtualColumnSizeStyle,
+		virtualGrowColumnSizeStyle,
 		virtualSelectionColumnSizeStyle
 	} from './data-table-utils';
 
@@ -116,7 +117,9 @@
 							cell.column.getIsPinned() && 'bg-(--row-bg)'
 						)}
 						style={joinStyles(
-							virtualColumnSizeStyle(cell.column.getSize()),
+							getColumnMeta(cell.column.columnDef)?.grow
+								? virtualGrowColumnSizeStyle()
+								: virtualColumnSizeStyle(cell.column.getSize()),
 							getPinningStyle(cell.column, false, isRowSelectionEnabled)
 						)}
 					>

package/dist/components/data-table/data-table.svelte

@@ -59,6 +59,8 @@
 		trackTableState();
 		return table.getVisibleLeafColumns();
 	});
+	const growColumn = $derived(visibleLeafColumns.find((col) => getColumnMeta(col.columnDef)?.grow));
+	const hasGrowColumn = $derived(growColumn !== undefined);
 	const visibleColumnCount = $derived(visibleLeafColumns.length);
 	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
 	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
@@ -93,9 +95,15 @@
 					<col style={selectionColumnSizeStyle()} />
 				{/if}
 				{#each visibleLeafColumns as column (column.id)}
-					<col style={columnSizeStyle(column.getSize())} />
+					<col
+						style={getColumnMeta(column.columnDef)?.grow
+							? undefined
+							: columnSizeStyle(column.getSize())}
+					/>
 				{/each}
-				<col />
+				{#if !hasGrowColumn}
+					<col />
+				{/if}
 			</colgroup>
 			{#if caption}
 				<caption class="sr-only">{caption}</caption>
@@ -107,6 +115,7 @@
 				{isRowSelectionEnabled}
 				{isMultiRowSelectionEnabled}
 				{allRowsSelectionState}
+				{hasGrowColumn}
 			/>
 			<tbody>
 				{#each rowModel.rows as row (row.id)}
@@ -189,8 +198,10 @@
 								{/if}
 							</td>
 						{/each}
-						<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
-						></td>
+						{#if !hasGrowColumn}
+							<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
+							></td>
+						{/if}
 					</tr>
 				{:else}
 					<tr>

package/dist/components/data-table/types.d.ts

@@ -22,6 +22,7 @@ export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<
     formatOptions?: Intl.NumberFormatOptions;
     formatLocale?: string;
     pinned?: 'left' | 'right';
+    grow?: boolean;
     columns?: never;
 };
 export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
@@ -54,4 +55,5 @@ export type DataTableColumnMeta = {
     type?: DataTableColumnType;
     formatOptions?: Intl.NumberFormatOptions;
     formatLocale?: string;
+    grow?: boolean;
 };

package/dist/components/scroll-area/scroll-area-viewport.svelte

@@ -13,7 +13,7 @@
 <ScrollArea.Viewport
 	{...rest}
 	class={cn(
-		'h-full [scrollbar-width:none] overscroll-contain outline-none [&::-webkit-scrollbar]:hidden',
+		'h-full scrollbar-none overscroll-contain outline-none [&::-webkit-scrollbar]:hidden',
 		'focus-visible:ring-2 focus-visible:ring-ring',
 		className
 	)}

package/dist/components/splitter/splitter.svelte

@@ -2,6 +2,7 @@
 	import { Splitter } from '@ark-ui/svelte/splitter';
 	import { cn } from 'tailwind-variants';
 	import type { SplitterProps } from './types';
+	import { ClientOnly } from '@ark-ui/svelte/client-only';
 
 	let {
 		panels,
@@ -15,46 +16,48 @@
 	const arkPanels = $derived(panels.map(({ content: _content, ...rest }) => rest));
 </script>
 
-<Splitter.Root
-	{orientation}
-	panels={arkPanels}
-	{...restProps}
-	class={cn('flex h-full w-full', !isHorizontal && 'flex-col', className)}
->
-	{#each panels as panelConfig, i (panelConfig.id)}
-		<Splitter.Panel
-			id={panelConfig.id}
-			class={cn('overflow-auto p-2', isHorizontal ? 'min-w-0' : 'min-h-0')}
-		>
-			{@render panelConfig.content()}
-		</Splitter.Panel>
-
-		{#if i < panels.length - 1}
-			<Splitter.ResizeTrigger
-				id={`${panelConfig.id}:${panels[i + 1].id}`}
-				aria-label={`Resize ${panelConfig.id} and ${panels[i + 1].id}`}
-				class={cn(
-					'group relative flex shrink-0 items-center justify-center border-none bg-transparent p-0 outline-none',
-					isHorizontal ? 'w-1.5 cursor-col-resize' : 'h-1.5 cursor-row-resize'
-				)}
+<ClientOnly>
+	<Splitter.Root
+		{orientation}
+		panels={arkPanels}
+		{...restProps}
+		class={cn('flex h-full w-full', !isHorizontal && 'flex-col', className)}
+	>
+		{#each panels as panelConfig, i (panelConfig.id)}
+			<Splitter.Panel
+				id={panelConfig.id}
+				class={cn('overflow-auto p-2', isHorizontal ? 'min-w-0' : 'min-h-0')}
 			>
-				<!-- Divider line -->
-				<div
-					class={cn(
-						'absolute bg-surface-3 transition-colors group-focus-within:bg-primary group-hover:bg-primary/40 group-data-dragging:bg-primary',
-						isHorizontal
-							? 'inset-y-0 left-1/2 w-px -translate-x-1/2'
-							: 'inset-x-0 top-1/2 h-px -translate-y-1/2'
-					)}
-				></div>
-				<!-- Handle pill -->
-				<div
+				{@render panelConfig.content()}
+			</Splitter.Panel>
+
+			{#if i < panels.length - 1}
+				<Splitter.ResizeTrigger
+					id={`${panelConfig.id}:${panels[i + 1].id}`}
+					aria-label={`Resize ${panelConfig.id} and ${panels[i + 1].id}`}
 					class={cn(
-						'relative z-10 rounded-full bg-surface-3 shadow-sm transition-colors group-hover:bg-primary/40 group-data-dragging:bg-primary',
-						isHorizontal ? 'h-6 w-1' : 'h-1 w-6'
+						'group relative flex shrink-0 items-center justify-center border-none bg-transparent p-0 outline-none',
+						isHorizontal ? 'w-1.5 cursor-col-resize' : 'h-1.5 cursor-row-resize'
 					)}
-				></div>
-			</Splitter.ResizeTrigger>
-		{/if}
-	{/each}
-</Splitter.Root>
+				>
+					<!-- Divider line -->
+					<div
+						class={cn(
+							'absolute bg-surface-3 transition-colors group-focus-within:bg-primary group-hover:bg-primary/40 group-data-dragging:bg-primary',
+							isHorizontal
+								? 'inset-y-0 left-1/2 w-px -translate-x-1/2'
+								: 'inset-x-0 top-1/2 h-px -translate-y-1/2'
+						)}
+					></div>
+					<!-- Handle pill -->
+					<div
+						class={cn(
+							'relative z-10 rounded-full bg-surface-3 shadow-sm transition-colors group-hover:bg-primary/40 group-data-dragging:bg-primary',
+							isHorizontal ? 'h-6 w-1' : 'h-1 w-6'
+						)}
+					></div>
+				</Splitter.ResizeTrigger>
+			{/if}
+		{/each}
+	</Splitter.Root>
+</ClientOnly>

package/dist/components/tree-view/tree-view.svelte

@@ -74,8 +74,7 @@
 	}
 </script>
 
-<div class="flex h-full flex-col" role="none" oncontextmenu={handleContextMenu}>
-	<!--
+<!--
     | Varijabla       | Vrednost | Opis |
     |---|---|---|
     | `--tree-indent` | `0.75rem` | indent po nivou |
@@ -83,70 +82,69 @@
     | `--tree-gap`    | `0.5rem`  | razmak između elemenata |
     | `--tree-px`     | `0.75rem` | bazni levi padding
     -->
-	<TreeView.Root
-		{...restProps}
-		{collection}
-		{selectionMode}
-		{selectedValue}
-		{expandedValue}
-		{checkedValue}
-		onSelectionChange={(details) => {
-			onSelectionChange?.(details);
-		}}
-		onExpandedChange={(details) => {
-			userExpandedValue = details.expandedValue;
-			onExpandedChange?.(details);
-		}}
-		onCheckedChange={(details) => {
-			checkedValue = details.checkedValue;
-			onCheckedChange?.(details);
-		}}
-		class="flex h-full flex-col"
-		style="--tree-indent: 0rem; --tree-icon: 1rem; --tree-gap: 0.5rem; --tree-px: 0.75rem"
-	>
-		{#if label}
-			<TreeView.Label class="px-3 pt-3 text-sm font-medium">{label}</TreeView.Label>
-		{/if}
-
-		<div class="flex gap-2 p-3">
-			<TreeView.Context>
-				{#snippet render(tree)}
-					<Button
-						variant="outline"
-						size="icon-lg"
-						title="Collapse all"
-						onclick={() => tree().collapse()}
-					>
-						<PhArrowsInSimple class="size-4" />
-					</Button>
-				{/snippet}
-			</TreeView.Context>
+<TreeView.Root
+	oncontextmenu={handleContextMenu}
+	{...restProps}
+	{collection}
+	{selectionMode}
+	{selectedValue}
+	{expandedValue}
+	{checkedValue}
+	onSelectionChange={(details) => {
+		onSelectionChange?.(details);
+	}}
+	onExpandedChange={(details) => {
+		userExpandedValue = details.expandedValue;
+		onExpandedChange?.(details);
+	}}
+	onCheckedChange={(details) => {
+		checkedValue = details.checkedValue;
+		onCheckedChange?.(details);
+	}}
+	class="flex h-full flex-col gap-3"
+	style="--tree-indent: 0rem; --tree-icon: 1rem; --tree-gap: 0.5rem; --tree-px: 0.75rem"
+>
+	{#if label}
+		<TreeView.Label class="font-medium">{label}</TreeView.Label>
+	{/if}
 
-			<div class="flex-1">
-				<Field.Root>
-					<Field.Input bind:value={searchTerm} placeholder="Search...">
-						{#snippet startIcon()}
-							<PhMagnifyingGlass class="size-4" />
-						{/snippet}
-						{#snippet endIcon()}
-							<Button variant="ghost" size="icon" onclick={() => (searchTerm = '')}>
-								<PhX />
-							</Button>
-						{/snippet}
-					</Field.Input>
-				</Field.Root>
-			</div>
+	<div class="flex gap-1">
+		<TreeView.Context>
+			{#snippet render(tree)}
+				<Button
+					variant="outline"
+					size="icon-lg"
+					title="Collapse all"
+					onclick={() => tree().collapse()}
+				>
+					<PhArrowsInSimple class="size-4" />
+				</Button>
+			{/snippet}
+		</TreeView.Context>
+		<div class="flex-1">
+			<Field.Root>
+				<Field.Input bind:value={searchTerm} placeholder="Search...">
+					{#snippet startIcon()}
+						<PhMagnifyingGlass class="size-4" />
+					{/snippet}
+					{#snippet endIcon()}
+						<Button variant="ghost" size="icon" onclick={() => (searchTerm = '')}>
+							<PhX />
+						</Button>
+					{/snippet}
+				</Field.Input>
+			</Field.Root>
 		</div>
+	</div>
 
-		<div class="flex-1 overflow-x-hidden overflow-y-auto">
-			<TreeView.Tree class="flex flex-col text-sm">
-				{#each collection.rootNode.children ?? [] as node, index (node.value)}
-					{@render renderNode(node as T, [index])}
-				{/each}
-			</TreeView.Tree>
-		</div>
-	</TreeView.Root>
-</div>
+	<div class="flex-1 overflow-x-hidden overflow-y-auto">
+		<TreeView.Tree class="flex flex-col text-sm">
+			{#each collection.rootNode.children ?? [] as node, index (node.value)}
+				{@render renderNode(node as T, [index])}
+			{/each}
+		</TreeView.Tree>
+	</div>
+</TreeView.Root>
 
 {#snippet nodeCheckbox()}
 	<TreeView.NodeCheckbox
@@ -186,7 +184,7 @@
 					</TreeView.BranchText>
 				</TreeView.BranchControl>
 				<TreeView.BranchContent class="relative">
-					<TreeView.BranchIndentGuide class="absolute inset-y-0 w-px bg-border" />
+					<!-- <TreeView.BranchIndentGuide class="absolute inset-y-0 w-px bg-border" /> -->
 					{#each node.children as child, childIndex (child.value)}
 						{@render renderNode(child as T, [...indexPath, childIndex])}
 					{/each}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.40.2",
+	"version": "0.41.1",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",