compote-ui 0.80.0 → 0.81.0

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

@@ -1,154 +1,154 @@
-<script lang="ts" generics="T extends RowData">
-	import type { RowData } from '@tanstack/svelte-table';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import type { DataTableInstance } from './data-table-utils';
-	import { createTableViewState } from './table-view-state.svelte';
-	import DataTableHead from './data-table-head.svelte';
-	import DataTableFoot from './data-table-foot.svelte';
-	import DataTableCellContent from './data-table-cell-content.svelte';
-	import {
-		alignClass,
-		columnSizeStyle,
-		getColumnMeta,
-		getPinningStyle,
-		getRowCells,
-		selectionColumnSizeStyle,
-		tableSizeStyle
-	} from './data-table-utils';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTableInstance<T>;
-		caption?: string;
-		emptyMessage?: string;
-		class?: ClassValue;
-		/** Show a filter funnel in the header of every filterable column. */
-		headerFilters?: boolean;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		table,
-		caption,
-		emptyMessage = 'No rows found',
-		class: className,
-		headerFilters = false,
-		onRowClick,
-		onRowDoubleClick,
-		...rest
-	}: Props = $props();
-
-	const view = createTableViewState(() => table);
-
-	const visibleColumnCount = $derived(view.visibleLeafColumns.length);
-	const tableColumnCount = $derived(visibleColumnCount + (view.isRowSelectionEnabled ? 1 : 0));
-	const renderedColumnCount = $derived(tableColumnCount + 1);
-</script>
-
-<div
-	class={cn(
-		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
-		className
-	)}
-	{...rest}
->
-	{#if view.isColumnResizing}
-		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
-	{/if}
-
-	<div class="min-h-0 flex-1 overflow-auto">
-		<table
-			class="table-fixed border-separate border-spacing-0 text-sm"
-			style={tableSizeStyle(table, view.isRowSelectionEnabled, view)}
-		>
-			<colgroup>
-				{#if view.isRowSelectionEnabled}
-					<col style={selectionColumnSizeStyle()} />
-				{/if}
-				{#each view.visibleLeafColumns as column (column.id)}
-					<col
-						style={getColumnMeta(column.columnDef)?.grow
-							? undefined
-							: columnSizeStyle(column.getSize())}
-					/>
-				{/each}
-				{#if !view.hasGrowColumn}
-					<col />
-				{/if}
-			</colgroup>
-			{#if caption}
-				<caption class="sr-only">{caption}</caption>
-			{/if}
-			<DataTableHead {table} {view} hasGrowColumn={view.hasGrowColumn} {headerFilters} />
-			<tbody>
-				{#each view.rowModel.rows as row (row.id)}
-					{@const rowSelected = view.rowSelection[row.id] === true}
-					<tr
-						class={cn(
-							'group/row',
-							'[--row-bg:var(--compote-surface-1)]',
-							'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
-							rowSelected &&
-								'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
-						)}
-						onclick={(event) => onRowClick?.({ row: row.original, event })}
-						ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
-					>
-						{#if view.isRowSelectionEnabled}
-							<td
-								class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
-								style="position: sticky; left: 0; z-index: 1"
-								onclick={(event) => event.stopPropagation()}
-								ondblclick={(event) => event.stopPropagation()}
-							>
-								<input
-									type="checkbox"
-									aria-label="Select row"
-									class="table-checkbox mx-auto block size-4"
-									checked={rowSelected}
-									disabled={!row.getCanSelect()}
-									onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
-								/>
-							</td>
-						{/if}
-						{#each getRowCells(row, view) as cell (cell.id)}
-							{@const meta = getColumnMeta(cell.column.columnDef)}
-							<td
-								class={cn(
-									'h-9 truncate border-b border-b-surface-2 px-3 py-0 align-middle group-last/row:border-b-0',
-									alignClass(meta?.align),
-									cell.column.getIsPinned() && 'bg-(--row-bg)'
-								)}
-								style={getPinningStyle(cell.column, table, view, false, view.isRowSelectionEnabled)}
-							>
-								<DataTableCellContent {cell} />
-							</td>
-						{/each}
-						{#if !view.hasGrowColumn}
-							<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
-							></td>
-						{/if}
-					</tr>
-				{:else}
-					<tr>
-						<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
-							{emptyMessage}
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-			{#if view.hasFooter}
-				<DataTableFoot {table} {view} hasGrowColumn={view.hasGrowColumn} />
-			{/if}
-		</table>
-	</div>
-
-	<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
-		{#if view.isRowSelectionEnabled}
-			{view.selectedRowCount} of {view.rowModel.rows.length} rows selected
-		{:else}
-			{view.rowModel.rows.length} rows
-		{/if}
-	</div>
-</div>
+<script lang="ts" generics="T extends RowData">
+	import type { RowData } from '@tanstack/svelte-table';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type ClassValue } from 'tailwind-variants';
+	import type { DataTableInstance } from './data-table-utils';
+	import { createTableViewState } from './table-view-state.svelte';
+	import DataTableHead from './data-table-head.svelte';
+	import DataTableFoot from './data-table-foot.svelte';
+	import DataTableCellContent from './data-table-cell-content.svelte';
+	import {
+		alignClass,
+		columnSizeStyle,
+		getColumnMeta,
+		getPinningStyle,
+		getRowCells,
+		selectionColumnSizeStyle,
+		tableSizeStyle
+	} from './data-table-utils';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+		table: DataTableInstance<T>;
+		caption?: string;
+		emptyMessage?: string;
+		class?: ClassValue;
+		/** Show a filter funnel in the header of every filterable column. */
+		headerFilters?: boolean;
+		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
+		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+	};
+
+	let {
+		table,
+		caption,
+		emptyMessage = 'No rows found',
+		class: className,
+		headerFilters = false,
+		onRowClick,
+		onRowDoubleClick,
+		...rest
+	}: Props = $props();
+
+	const view = createTableViewState(() => table);
+
+	const visibleColumnCount = $derived(view.visibleLeafColumns.length);
+	const tableColumnCount = $derived(visibleColumnCount + (view.isRowSelectionEnabled ? 1 : 0));
+	const renderedColumnCount = $derived(tableColumnCount + 1);
+</script>
+
+<div
+	class={cn(
+		'flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border border-surface-3 bg-surface-1',
+		className
+	)}
+	{...rest}
+>
+	{#if view.isColumnResizing}
+		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
+	{/if}
+
+	<div class="min-h-0 flex-1 overflow-auto">
+		<table
+			class="table-fixed border-separate border-spacing-0 text-sm"
+			style={tableSizeStyle(table, view.isRowSelectionEnabled, view)}
+		>
+			<colgroup>
+				{#if view.isRowSelectionEnabled}
+					<col style={selectionColumnSizeStyle()} />
+				{/if}
+				{#each view.visibleLeafColumns as column (column.id)}
+					<col
+						style={getColumnMeta(column.columnDef)?.grow
+							? undefined
+							: columnSizeStyle(column.getSize())}
+					/>
+				{/each}
+				{#if !view.hasGrowColumn}
+					<col />
+				{/if}
+			</colgroup>
+			{#if caption}
+				<caption class="sr-only">{caption}</caption>
+			{/if}
+			<DataTableHead {table} {view} hasGrowColumn={view.hasGrowColumn} {headerFilters} />
+			<tbody>
+				{#each view.rowModel.rows as row (row.id)}
+					{@const rowSelected = view.rowSelection[row.id] === true}
+					<tr
+						class={cn(
+							'group/row',
+							'[--row-bg:var(--compote-surface-1)]',
+							'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
+							rowSelected &&
+								'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
+						)}
+						onclick={(event) => onRowClick?.({ row: row.original, event })}
+						ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
+					>
+						{#if view.isRowSelectionEnabled}
+							<td
+								class="border-b border-surface-2 bg-(--row-bg) px-3 py-2 text-center align-middle group-last/row:border-b-0"
+								style="position: sticky; left: 0; z-index: 1"
+								onclick={(event) => event.stopPropagation()}
+								ondblclick={(event) => event.stopPropagation()}
+							>
+								<input
+									type="checkbox"
+									aria-label="Select row"
+									class="table-checkbox mx-auto block size-4"
+									checked={rowSelected}
+									disabled={!row.getCanSelect()}
+									onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
+								/>
+							</td>
+						{/if}
+						{#each getRowCells(row, view) as cell (cell.id)}
+							{@const meta = getColumnMeta(cell.column.columnDef)}
+							<td
+								class={cn(
+									'h-9 truncate border-b border-b-surface-2 px-3 py-0 align-middle group-last/row:border-b-0',
+									alignClass(meta?.align),
+									cell.column.getIsPinned() && 'bg-(--row-bg)'
+								)}
+								style={getPinningStyle(cell.column, table, view, false, view.isRowSelectionEnabled)}
+							>
+								<DataTableCellContent {cell} />
+							</td>
+						{/each}
+						{#if !view.hasGrowColumn}
+							<td aria-hidden="true" class="border-b border-surface-2 p-0 group-last/row:border-b-0"
+							></td>
+						{/if}
+					</tr>
+				{:else}
+					<tr>
+						<td class="px-3 py-10 text-center text-sm text-ink-dim" colspan={renderedColumnCount}>
+							{emptyMessage}
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+			{#if view.hasFooter}
+				<DataTableFoot {table} {view} hasGrowColumn={view.hasGrowColumn} />
+			{/if}
+		</table>
+	</div>
+
+	<div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
+		{#if view.isRowSelectionEnabled}
+			{view.selectedRowCount} of {view.rowModel.rows.length} rows selected
+		{:else}
+			{view.rowModel.rows.length} rows
+		{/if}
+	</div>
+</div>

package/dist/components/data-table-v9/filter-editors/boolean-filter-editor.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-	import { cn } from 'tailwind-variants';
-	import type { FilterableColumn } from '../column-filter-editing.svelte';
-
-	type Props = {
-		column: FilterableColumn;
-	};
-
-	let { column }: Props = $props();
-
-	const value = $derived(column.getFilterValue() as boolean | undefined);
-</script>
-
-<div class="flex overflow-hidden rounded border border-border text-xs">
-	<button
-		type="button"
-		onclick={() => column.setFilterValue(undefined)}
-		class={cn(
-			'flex-1 px-2 py-1',
-			value === undefined ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
-		)}
-	>
-		All
-	</button>
-	<button
-		type="button"
-		onclick={() => column.setFilterValue(value === true ? undefined : true)}
-		class={cn(
-			'flex-1 border-x border-border px-2 py-1',
-			value === true ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
-		)}
-	>
-		Yes
-	</button>
-	<button
-		type="button"
-		onclick={() => column.setFilterValue(value === false ? undefined : false)}
-		class={cn(
-			'flex-1 px-2 py-1',
-			value === false ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
-		)}
-	>
-		No
-	</button>
-</div>
+<script lang="ts">
+	import { cn } from 'tailwind-variants';
+	import type { FilterableColumn } from '../column-filter-editing.svelte';
+
+	type Props = {
+		column: FilterableColumn;
+	};
+
+	let { column }: Props = $props();
+
+	const value = $derived(column.getFilterValue() as boolean | undefined);
+</script>
+
+<div class="flex overflow-hidden rounded border border-border text-xs">
+	<button
+		type="button"
+		onclick={() => column.setFilterValue(undefined)}
+		class={cn(
+			'flex-1 px-2 py-1',
+			value === undefined ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
+		)}
+	>
+		All
+	</button>
+	<button
+		type="button"
+		onclick={() => column.setFilterValue(value === true ? undefined : true)}
+		class={cn(
+			'flex-1 border-x border-border px-2 py-1',
+			value === true ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
+		)}
+	>
+		Yes
+	</button>
+	<button
+		type="button"
+		onclick={() => column.setFilterValue(value === false ? undefined : false)}
+		class={cn(
+			'flex-1 px-2 py-1',
+			value === false ? 'bg-surface-3 font-medium text-ink' : 'text-ink-dim hover:bg-surface-2'
+		)}
+	>
+		No
+	</button>
+</div>

package/dist/components/data-table-v9/filter-editors/column-filter-editor.svelte

@@ -1,33 +1,39 @@
-<script lang="ts" generics="T extends RowData">
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import type { DataTableFeatures } from '../features';
-	import { getColumnMeta } from '../data-table-utils';
-	import { filterKindFor } from '../column-filter-kind';
-	import type { ColumnFilterEditing } from '../column-filter-editing.svelte';
-	import TextFilterEditor from './text-filter-editor.svelte';
-	import RangeFilterEditor from './range-filter-editor.svelte';
-	import BooleanFilterEditor from './boolean-filter-editor.svelte';
-	import SelectFilterEditor from './select-filter-editor.svelte';
-	import DateRangeFilterEditor from './date-range-filter-editor.svelte';
-
-	type Props = {
-		column: Column<DataTableFeatures, T, unknown>;
-		editing: ColumnFilterEditing;
-	};
-
-	let { column, editing }: Props = $props();
-
-	const kind = $derived(filterKindFor(getColumnMeta(column.columnDef)?.type));
-</script>
-
-{#if kind === 'range'}
-	<RangeFilterEditor {column} {editing} />
-{:else if kind === 'boolean'}
-	<BooleanFilterEditor {column} />
-{:else if kind === 'select'}
-	<SelectFilterEditor {column} />
-{:else if kind === 'date'}
-	<DateRangeFilterEditor {column} />
-{:else if kind === 'text'}
-	<TextFilterEditor {column} {editing} />
-{/if}
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import type { DataTableFeatures } from '../features';
+	import { getColumnFilterKind } from '../column-filter-kind';
+	import { ColumnFilterEditing } from '../column-filter-editing.svelte';
+	import TextFilterEditor from './text-filter-editor.svelte';
+	import RangeFilterEditor from './range-filter-editor.svelte';
+	import BooleanFilterEditor from './boolean-filter-editor.svelte';
+	import SelectFilterEditor from './select-filter-editor.svelte';
+	import DateRangeFilterEditor from './date-range-filter-editor.svelte';
+
+	type Props = {
+		column: Column<DataTableFeatures, T, unknown>;
+		/**
+		 * Pending (debounced) text and range edits. Hosts that can tear an editor down while
+		 * it still holds an edit pass their own, with `isActive`; otherwise the editor uses
+		 * one bound to the column's table.
+		 */
+		editing?: ColumnFilterEditing;
+	};
+
+	let { column, editing: editingProp }: Props = $props();
+
+	const ownEditing = new ColumnFilterEditing({ table: () => column.table });
+	const editing = $derived(editingProp ?? ownEditing);
+	const kind = $derived(getColumnFilterKind(column));
+</script>
+
+{#if kind === 'range'}
+	<RangeFilterEditor {column} {editing} />
+{:else if kind === 'boolean'}
+	<BooleanFilterEditor {column} />
+{:else if kind === 'select'}
+	<SelectFilterEditor {column} />
+{:else if kind === 'date'}
+	<DateRangeFilterEditor {column} />
+{:else if kind === 'text'}
+	<TextFilterEditor {column} {editing} />
+{/if}

package/dist/components/data-table-v9/filter-editors/column-filter-editor.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { Column, RowData } from '@tanstack/svelte-table';
 import type { DataTableFeatures } from '../features';
-import type { ColumnFilterEditing } from '../column-filter-editing.svelte';
+import { ColumnFilterEditing } from '../column-filter-editing.svelte';
 declare function $$render<T extends RowData>(): {
     props: {
         column: Column<DataTableFeatures, T, unknown>;
-        editing: ColumnFilterEditing;
+        /**
+         * Pending (debounced) text and range edits. Hosts that can tear an editor down while
+         * it still holds an edit pass their own, with `isActive`; otherwise the editor uses
+         * one bound to the column's table.
+         */
+        editing?: ColumnFilterEditing;
     };
     exports: {};
     bindings: "";

package/dist/components/data-table-v9/filter-editors/date-range-filter-editor.svelte

@@ -1,52 +1,52 @@
-<script lang="ts" generics="T extends RowData">
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import DatePicker from '../../date-picker/date-picker.svelte';
-	import type { DataTableFeatures } from '../features';
-	import { getColumnMeta } from '../data-table-utils';
-	import { dateCellTimeZone } from '../date-cell';
-	import type { DateRangeFilterValue } from '../../../utils/date-filter';
-
-	type Props = {
-		column: Column<DataTableFeatures, T, unknown>;
-	};
-
-	let { column }: Props = $props();
-
-	const meta = $derived(getColumnMeta(column.columnDef));
-	// Pick days in the zone the column is shown and filtered in, so "today" matches the cells.
-	const timeZone = $derived(
-		dateCellTimeZone(meta?.formatOptions as Intl.DateTimeFormatOptions | undefined)
-	);
-
-	function bound(index: 0 | 1): string | null {
-		const value = column.getFilterValue();
-		const bound = Array.isArray(value) ? value[index] : undefined;
-		return typeof bound === 'string' ? bound : null;
-	}
-
-	// Each picked bound applies at once. The picker emits `YYYY-MM-DD` for a day it accepted
-	// and null when cleared; a half-typed date never reaches here.
-	function setBound(index: 0 | 1, next: unknown) {
-		const value = column.getFilterValue();
-		const range: DateRangeFilterValue = Array.isArray(value)
-			? [value[0] as string | undefined, value[1] as string | undefined]
-			: [undefined, undefined];
-		range[index] = typeof next === 'string' && next ? next : undefined;
-		column.setFilterValue(range[0] || range[1] ? range : undefined);
-	}
-</script>
-
-<div class="flex flex-col gap-2">
-	<DatePicker
-		label="From"
-		locale={meta?.formatLocale}
-		{timeZone}
-		bind:value={() => bound(0), (next) => setBound(0, next)}
-	/>
-	<DatePicker
-		label="To"
-		locale={meta?.formatLocale}
-		{timeZone}
-		bind:value={() => bound(1), (next) => setBound(1, next)}
-	/>
-</div>
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import DatePicker from '../../date-picker/date-picker.svelte';
+	import type { DataTableFeatures } from '../features';
+	import { getColumnMeta } from '../data-table-utils';
+	import { dateCellTimeZone } from '../date-cell';
+	import type { DateRangeFilterValue } from '../../../utils/date-filter';
+
+	type Props = {
+		column: Column<DataTableFeatures, T, unknown>;
+	};
+
+	let { column }: Props = $props();
+
+	const meta = $derived(getColumnMeta(column.columnDef));
+	// Pick days in the zone the column is shown and filtered in, so "today" matches the cells.
+	const timeZone = $derived(
+		dateCellTimeZone(meta?.formatOptions as Intl.DateTimeFormatOptions | undefined)
+	);
+
+	function bound(index: 0 | 1): string | null {
+		const value = column.getFilterValue();
+		const bound = Array.isArray(value) ? value[index] : undefined;
+		return typeof bound === 'string' ? bound : null;
+	}
+
+	// Each picked bound applies at once. The picker emits `YYYY-MM-DD` for a day it accepted
+	// and null when cleared; a half-typed date never reaches here.
+	function setBound(index: 0 | 1, next: unknown) {
+		const value = column.getFilterValue();
+		const range: DateRangeFilterValue = Array.isArray(value)
+			? [value[0] as string | undefined, value[1] as string | undefined]
+			: [undefined, undefined];
+		range[index] = typeof next === 'string' && next ? next : undefined;
+		column.setFilterValue(range[0] || range[1] ? range : undefined);
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	<DatePicker
+		label="From"
+		locale={meta?.formatLocale}
+		{timeZone}
+		bind:value={() => bound(0), (next) => setBound(0, next)}
+	/>
+	<DatePicker
+		label="To"
+		locale={meta?.formatLocale}
+		{timeZone}
+		bind:value={() => bound(1), (next) => setBound(1, next)}
+	/>
+</div>