compote-ui 0.43.15 → 0.44.0

package/dist/components/data-table-v8/data-table-column-filter.svelte

@@ -111,8 +111,10 @@
 	<Popover.Trigger
 		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
 	>
-		{triggerLabel}{#if activeCount > 0}
-			({activeCount}){/if}
+		{triggerLabel}
+		{#if activeCount > 0}
+			({activeCount})
+		{/if}
 	</Popover.Trigger>
 
 	<Popover.Content class="w-72 px-0" showArrow={false}>

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

@@ -0,0 +1,57 @@
+<script lang="ts" generics="T extends RowData">
+	import { onDestroy } from 'svelte';
+	import type { RowData } from '@tanstack/table-core';
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import { PhMagnifyingGlass, PhX } from '../../icons';
+	import * as Field from '../field';
+	import { getReactiveTableState, type DataTableInstance } from './data-table-utils';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		placeholder?: string;
+		class?: ClassValue;
+	};
+
+	let { table, placeholder = 'Search...', class: className }: Props = $props();
+
+	const globalFilter = $derived(
+		(getReactiveTableState(table).globalFilter as string | undefined) ?? ''
+	);
+
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	onDestroy(() => clearTimeout(timer));
+
+	function handleInput(e: Event) {
+		const value = (e.currentTarget as HTMLInputElement).value;
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			table.setGlobalFilter(value || undefined);
+		}, 300);
+	}
+
+	function clearFilter() {
+		clearTimeout(timer);
+		table.setGlobalFilter(undefined);
+	}
+</script>
+
+<Field.Root class={cn(className)}>
+	<Field.Input {placeholder} value={globalFilter} oninput={handleInput}>
+		{#snippet startIcon()}
+			<PhMagnifyingGlass class="size-4" />
+		{/snippet}
+		{#snippet endIcon()}
+			{#if globalFilter}
+				<button
+					type="button"
+					onclick={clearFilter}
+					aria-label="Clear search"
+					class="flex size-5 items-center justify-center rounded text-ink-dim hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
+				>
+					<PhX class="size-3.5" />
+				</button>
+			{/if}
+		{/snippet}
+	</Field.Input>
+</Field.Root>

package/dist/components/data-table-v8/data-table-search.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { RowData } from '@tanstack/table-core';
+import { type ClassValue } from 'tailwind-variants';
+import { type DataTableInstance } from './data-table-utils';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        placeholder?: string;
+        class?: ClassValue;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableSearch: $$IsomorphicComponent;
+type DataTableSearch<T extends RowData> = InstanceType<typeof DataTableSearch<T>>;
+export default DataTableSearch;

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

@@ -69,6 +69,7 @@
 	{:else}
 		{#each $rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.index)}
 			{@const row = rows[virtualRow.index]}
+			{#if row}
 			{@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
 			<tr
 				data-index={virtualRow.index}
@@ -161,6 +162,7 @@
 					</td>
 				{/each}
 			</tr>
+			{/if}
 		{/each}
 	{/if}
 </tbody>

package/dist/components/data-table-v8/index.d.ts

@@ -7,5 +7,6 @@ export { default as Toolbar } from './data-table-toolbar.svelte';
 export { default as Title } from './data-table-title.svelte';
 export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
 export { default as ColumnFilter } from './data-table-column-filter.svelte';
+export { default as Search } from './data-table-search.svelte';
 export type { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
 export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

package/dist/components/data-table-v8/index.js

@@ -7,3 +7,4 @@ export { default as Toolbar } from './data-table-toolbar.svelte';
 export { default as Title } from './data-table-title.svelte';
 export { default as ColumnVisibility } from './data-table-column-visibility.svelte';
 export { default as ColumnFilter } from './data-table-column-filter.svelte';
+export { default as Search } from './data-table-search.svelte';

package/dist/components/data-table-v8/virtual/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Root } from '../data-table-virtualized.svelte';
-export { ColumnFilter, ColumnVisibility, FlexRender, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
+export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
 export type { CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase } from '../index';

package/dist/components/data-table-v8/virtual/index.js

@@ -1,2 +1,2 @@
 export { default as Root } from '../data-table-virtualized.svelte';
-export { ColumnFilter, ColumnVisibility, FlexRender, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
+export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';

package/dist/components/select/select.svelte

@@ -47,7 +47,7 @@
 	<Select.Control>
 		<Select.Trigger
 			class={cn(
-				'flex w-full cursor-pointer items-center justify-between rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger',
+				'flex w-full cursor-pointer items-center justify-between rounded-md border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger data-invalid:focus-visible:ring-danger',
 				size === 'sm' ? 'h-8' : 'h-9'
 			)}
 		>

package/dist/components/splitter/splitter.svelte

@@ -37,13 +37,15 @@
 					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'
+						isHorizontal
+							? 'w-1.5 cursor-col-resize data-disabled:cursor-default'
+							: 'h-1.5 cursor-row-resize data-disabled:cursor-default'
 					)}
 				>
 					<!-- 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',
+							'absolute bg-surface-3 transition-colors group-focus-within:bg-primary group-hover:bg-primary/40 group-data-dragging:bg-primary group-data-disabled:bg-border',
 							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'
@@ -52,7 +54,7 @@
 					<!-- 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',
+							'relative z-10 rounded-full bg-surface-3 shadow-sm transition-colors group-hover:bg-primary/40 group-data-dragging:bg-primary group-data-disabled:invisible',
 							isHorizontal ? 'h-6 w-1' : 'h-1 w-6'
 						)}
 					></div>

package/package.json

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