compote-ui 0.80.0 → 0.81.0

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

@@ -1,51 +1,51 @@
-<script lang="ts" generics="T extends RowData">
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import NumberInput from '../../number-input/number-input.svelte';
-	import type { DataTableFeatures } from '../features';
-	import { getColumnMeta } from '../data-table-utils';
-	import type { ColumnFilterEditing } from '../column-filter-editing.svelte';
-
-	type Props = {
-		column: Column<DataTableFeatures, T, unknown>;
-		editing: ColumnFilterEditing;
-	};
-
-	let { column, editing }: Props = $props();
-
-	const facetBounds = $derived.by((): [number | undefined, number | undefined] => {
-		const vals = column.getFacetedMinMaxValues();
-		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
-	});
-	const formatOptions = $derived(
-		getColumnMeta(column.columnDef)?.formatOptions as Intl.NumberFormatOptions | undefined
-	);
-</script>
-
-<div class="flex flex-col gap-1.5">
-	<div class="min-w-0 flex-1">
-		<NumberInput
-			layout="horizontal"
-			label="From"
-			bind:value={
-				() => editing.rangeBound(column, 'min'),
-				(bound) => editing.editRange(column, 'min', bound ?? null)
-			}
-			min={facetBounds[0]}
-			max={facetBounds[1]}
-			{formatOptions}
-		/>
-	</div>
-	<div class="min-w-0 flex-1">
-		<NumberInput
-			layout="horizontal"
-			label="To"
-			bind:value={
-				() => editing.rangeBound(column, 'max'),
-				(bound) => editing.editRange(column, 'max', bound ?? null)
-			}
-			min={facetBounds[0]}
-			max={facetBounds[1]}
-			{formatOptions}
-		/>
-	</div>
-</div>
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import NumberInput from '../../number-input/number-input.svelte';
+	import type { DataTableFeatures } from '../features';
+	import { getColumnMeta } from '../data-table-utils';
+	import type { ColumnFilterEditing } from '../column-filter-editing.svelte';
+
+	type Props = {
+		column: Column<DataTableFeatures, T, unknown>;
+		editing: ColumnFilterEditing;
+	};
+
+	let { column, editing }: Props = $props();
+
+	const facetBounds = $derived.by((): [number | undefined, number | undefined] => {
+		const vals = column.getFacetedMinMaxValues();
+		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
+	});
+	const formatOptions = $derived(
+		getColumnMeta(column.columnDef)?.formatOptions as Intl.NumberFormatOptions | undefined
+	);
+</script>
+
+<div class="flex flex-col gap-1.5">
+	<div class="min-w-0 flex-1">
+		<NumberInput
+			layout="horizontal"
+			label="From"
+			bind:value={
+				() => editing.rangeBound(column, 'min'),
+				(bound) => editing.editRange(column, 'min', bound ?? null)
+			}
+			min={facetBounds[0]}
+			max={facetBounds[1]}
+			{formatOptions}
+		/>
+	</div>
+	<div class="min-w-0 flex-1">
+		<NumberInput
+			layout="horizontal"
+			label="To"
+			bind:value={
+				() => editing.rangeBound(column, 'max'),
+				(bound) => editing.editRange(column, 'max', bound ?? null)
+			}
+			min={facetBounds[0]}
+			max={facetBounds[1]}
+			{formatOptions}
+		/>
+	</div>
+</div>

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

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T extends RowData">
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import * as Field from '../../field';
-	import * as ScrollArea from '../../scroll-area';
-	import Checkbox from '../../checkbox/checkbox.svelte';
-	import type { DataTableFeatures } from '../features';
-	import { selectFilterOptions, type SelectFilterValue } from '../../../utils/select-filter';
-
-	type Props = {
-		column: Column<DataTableFeatures, T, unknown>;
-	};
-
-	let { column }: Props = $props();
-
-	let search = $state('');
-
-	const allOptions = $derived(selectFilterOptions(column.getFacetedUniqueValues()));
-	const options = $derived(
-		search
-			? allOptions.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
-			: allOptions
-	);
-	const selected = $derived((column.getFilterValue() as SelectFilterValue[] | undefined) ?? []);
-
-	function toggle(value: SelectFilterValue, checked: boolean) {
-		const next = checked ? [...selected, value] : selected.filter((v) => v !== value);
-		column.setFilterValue(next.length ? next : undefined);
-	}
-</script>
-
-<div class="flex flex-col gap-1">
-	<Field.Root hideMessageLine>
-		<Field.Input placeholder="Search..." bind:value={search} />
-	</Field.Root>
-	<ScrollArea.Root>
-		<ScrollArea.Viewport class="max-h-40">
-			<ScrollArea.Content>
-				<div class="flex flex-col gap-0.5">
-					{#each options as option (option.value)}
-						<div class="flex min-h-7 items-center gap-2 rounded-sm pr-2 hover:bg-surface-2">
-							<Checkbox
-								size="sm"
-								label={option.label}
-								class="min-h-7 flex-1 px-2"
-								checked={selected.includes(option.value)}
-								onCheckedChange={({ checked }) => toggle(option.value, checked === true)}
-							/>
-							<span class="text-xs text-ink-dim tabular-nums">{option.count}</span>
-						</div>
-					{/each}
-				</div>
-			</ScrollArea.Content>
-		</ScrollArea.Viewport>
-		<ScrollArea.Scrollbar orientation="vertical">
-			<ScrollArea.Thumb />
-		</ScrollArea.Scrollbar>
-		<ScrollArea.Corner />
-	</ScrollArea.Root>
-</div>
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import * as Field from '../../field';
+	import * as ScrollArea from '../../scroll-area';
+	import Checkbox from '../../checkbox/checkbox.svelte';
+	import type { DataTableFeatures } from '../features';
+	import { selectFilterOptions, type SelectFilterValue } from '../../../utils/select-filter';
+
+	type Props = {
+		column: Column<DataTableFeatures, T, unknown>;
+	};
+
+	let { column }: Props = $props();
+
+	let search = $state('');
+
+	const allOptions = $derived(selectFilterOptions(column.getFacetedUniqueValues()));
+	const options = $derived(
+		search
+			? allOptions.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+			: allOptions
+	);
+	const selected = $derived((column.getFilterValue() as SelectFilterValue[] | undefined) ?? []);
+
+	function toggle(value: SelectFilterValue, checked: boolean) {
+		const next = checked ? [...selected, value] : selected.filter((v) => v !== value);
+		column.setFilterValue(next.length ? next : undefined);
+	}
+</script>
+
+<div class="flex flex-col gap-1">
+	<Field.Root hideMessageLine>
+		<Field.Input placeholder="Search..." bind:value={search} />
+	</Field.Root>
+	<ScrollArea.Root>
+		<ScrollArea.Viewport class="max-h-40">
+			<ScrollArea.Content>
+				<div class="flex flex-col gap-0.5">
+					{#each options as option (option.value)}
+						<div class="flex min-h-7 items-center gap-2 rounded-sm pr-2 hover:bg-surface-2">
+							<Checkbox
+								size="sm"
+								label={option.label}
+								class="min-h-7 flex-1 px-2"
+								checked={selected.includes(option.value)}
+								onCheckedChange={({ checked }) => toggle(option.value, checked === true)}
+							/>
+							<span class="text-xs text-ink-dim tabular-nums">{option.count}</span>
+						</div>
+					{/each}
+				</div>
+			</ScrollArea.Content>
+		</ScrollArea.Viewport>
+		<ScrollArea.Scrollbar orientation="vertical">
+			<ScrollArea.Thumb />
+		</ScrollArea.Scrollbar>
+		<ScrollArea.Corner />
+	</ScrollArea.Root>
+</div>

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

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import * as Field from '../../field';
-	import type { ColumnFilterEditing, FilterableColumn } from '../column-filter-editing.svelte';
-
-	type Props = {
-		column: FilterableColumn;
-		editing: ColumnFilterEditing;
-	};
-
-	let { column, editing }: Props = $props();
-</script>
-
-<Field.Root hideMessageLine>
-	<Field.Input
-		placeholder="Search..."
-		bind:value={
-			() => editing.textValue(column), (text) => editing.editText(column, String(text ?? ''))
-		}
-	/>
-</Field.Root>
+<script lang="ts">
+	import * as Field from '../../field';
+	import type { ColumnFilterEditing, FilterableColumn } from '../column-filter-editing.svelte';
+
+	type Props = {
+		column: FilterableColumn;
+		editing: ColumnFilterEditing;
+	};
+
+	let { column, editing }: Props = $props();
+</script>
+
+<Field.Root hideMessageLine>
+	<Field.Input
+		placeholder="Search..."
+		bind:value={
+			() => editing.textValue(column), (text) => editing.editText(column, String(text ?? ''))
+		}
+	/>
+</Field.Root>

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

@@ -1,66 +1,66 @@
-<script lang="ts" generics="T extends RowData">
-	import type { Column, RowData } from '@tanstack/svelte-table';
-	import * as Popover from '../../popover';
-	import { PhFunnel, PhFunnelFill } from '../../../icons';
-	import type { DataTableFeatures } from '../features';
-	import { cn } from 'tailwind-variants';
-	import { getColumnLabel, getColumnMeta, type DataTableInstance } from '../data-table-utils';
-	import { ColumnFilterEditing } from '../column-filter-editing.svelte';
-	import ColumnFilterEditor from '../filter-editors/column-filter-editor.svelte';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		column: Column<DataTableFeatures, T, unknown>;
-	};
-
-	let { table, column }: Props = $props();
-
-	// Pending edits belong to the table: shared with the other filter hosts, and they still
-	// commit after this popover closes.
-	const editing = new ColumnFilterEditing({ table: () => table });
-
-	const isFiltered = $derived(
-		table.atoms.columnFilters.get().some((filter) => filter.id === column.id)
-	);
-	const label = $derived(getColumnLabel(column));
-	const align = $derived(getColumnMeta(column.columnDef)?.align);
-
-	function clear() {
-		editing.cancel(column.id);
-		column.setFilterValue(undefined);
-	}
-</script>
-
-<Popover.Root positioning={{ placement: 'bottom-start' }}>
-	<Popover.Trigger
-		aria-label={`Filter ${label}`}
-		data-active={isFiltered ? '' : undefined}
-		class={cn(
-			'inline-flex size-5 shrink-0 items-center justify-center rounded-sm bg-surface-2 text-ink-dim opacity-0 outline-none group-hover/th:opacity-100 hover:bg-surface-3 hover:text-ink focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:opacity-100 pointer-coarse:opacity-100',
-			// Floats over the cell's inner edge, opposite the label, so while inactive it never
-			// takes width from a narrow column; its background hides label text running under it.
-			// Once a filter is set the header cell pads that edge (see data-table-head).
-			'absolute top-1/2 -translate-y-1/2',
-			align === 'right' ? 'left-1' : 'right-1',
-			'data-active:text-primary data-active:opacity-100'
-		)}
-	>
-		{#if isFiltered}
-			<PhFunnelFill class="size-3.5" />
-		{:else}
-			<PhFunnel class="size-3.5" />
-		{/if}
-	</Popover.Trigger>
-
-	<Popover.Content class="flex w-64 flex-col gap-3 p-3" showArrow={false}>
-		<div class="flex min-h-5 items-center justify-between gap-2">
-			<Popover.Title class="truncate text-sm font-medium text-ink">{label}</Popover.Title>
-			{#if isFiltered}
-				<button type="button" onclick={clear} class="text-xs text-primary hover:underline">
-					Clear
-				</button>
-			{/if}
-		</div>
-		<ColumnFilterEditor {column} {editing} />
-	</Popover.Content>
-</Popover.Root>
+<script lang="ts" generics="T extends RowData">
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import * as Popover from '../../popover';
+	import { PhFunnel, PhFunnelFill } from '../../../icons';
+	import type { DataTableFeatures } from '../features';
+	import { cn } from 'tailwind-variants';
+	import { getColumnLabel, getColumnMeta, type DataTableInstance } from '../data-table-utils';
+	import { ColumnFilterEditing } from '../column-filter-editing.svelte';
+	import ColumnFilterEditor from '../filter-editors/column-filter-editor.svelte';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		column: Column<DataTableFeatures, T, unknown>;
+	};
+
+	let { table, column }: Props = $props();
+
+	// Pending edits belong to the table: shared with the other filter hosts, and they still
+	// commit after this popover closes.
+	const editing = new ColumnFilterEditing({ table: () => table });
+
+	const isFiltered = $derived(
+		table.atoms.columnFilters.get().some((filter) => filter.id === column.id)
+	);
+	const label = $derived(getColumnLabel(column));
+	const align = $derived(getColumnMeta(column.columnDef)?.align);
+
+	function clear() {
+		editing.cancel(column.id);
+		column.setFilterValue(undefined);
+	}
+</script>
+
+<Popover.Root positioning={{ placement: 'bottom-start' }}>
+	<Popover.Trigger
+		aria-label={`Filter ${label}`}
+		data-active={isFiltered ? '' : undefined}
+		class={cn(
+			'inline-flex size-5 shrink-0 items-center justify-center rounded-sm bg-surface-2 text-ink-dim opacity-0 outline-none group-hover/th:opacity-100 hover:bg-surface-3 hover:text-ink focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:opacity-100 pointer-coarse:opacity-100',
+			// Floats over the cell's inner edge, opposite the label, so while inactive it never
+			// takes width from a narrow column; its background hides label text running under it.
+			// Once a filter is set the header cell pads that edge (see data-table-head).
+			'absolute top-1/2 -translate-y-1/2',
+			align === 'right' ? 'left-1' : 'right-1',
+			'data-active:text-primary data-active:opacity-100'
+		)}
+	>
+		{#if isFiltered}
+			<PhFunnelFill class="size-3.5" />
+		{:else}
+			<PhFunnel class="size-3.5" />
+		{/if}
+	</Popover.Trigger>
+
+	<Popover.Content class="flex w-64 flex-col gap-3 p-3" showArrow={false}>
+		<div class="flex min-h-5 items-center justify-between gap-2">
+			<Popover.Title class="truncate text-sm font-medium text-ink">{label}</Popover.Title>
+			{#if isFiltered}
+				<button type="button" onclick={clear} class="text-xs text-primary hover:underline">
+					Clear
+				</button>
+			{/if}
+		</div>
+		<ColumnFilterEditor {column} {editing} />
+	</Popover.Content>
+</Popover.Root>

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

@@ -8,5 +8,13 @@ export { default as ColumnFilter } from './toolbar/data-table-column-filter.svel
 export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
 export { default as Search } from './toolbar/data-table-search.svelte';
 export { default as Refresh } from './toolbar/data-table-refresh.svelte';
+export { default as ColumnFilterEditor } from './filter-editors/column-filter-editor.svelte';
+export { ColumnFilterEditing } from './column-filter-editing.svelte';
+export { filterKindFor, getColumnFilterKind } from './column-filter-kind';
+export { getColumnLabel } from './data-table-utils';
+export { EMPTY_SELECT_VALUE, selectFilterOptions } from '../../utils/select-filter';
 export type { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
-export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';
+export type { ColumnFilterEditingOptions, FilterableColumn } from './column-filter-editing.svelte';
+export type { ColumnFilterKind } from './column-filter-kind';
+export type { SelectFilterOption, SelectFilterValue } from '../../utils/select-filter';
+export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnInstance, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

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

@@ -8,3 +8,10 @@ export { default as ColumnFilter } from './toolbar/data-table-column-filter.svel
 export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
 export { default as Search } from './toolbar/data-table-search.svelte';
 export { default as Refresh } from './toolbar/data-table-refresh.svelte';
+// Building blocks for filter UI outside the toolbar and header popups (e.g. a facet panel):
+// the same editors, pending-edit handling and select options the Funnel uses.
+export { default as ColumnFilterEditor } from './filter-editors/column-filter-editor.svelte';
+export { ColumnFilterEditing } from './column-filter-editing.svelte';
+export { filterKindFor, getColumnFilterKind } from './column-filter-kind';
+export { getColumnLabel } from './data-table-utils';
+export { EMPTY_SELECT_VALUE, selectFilterOptions } from '../../utils/select-filter';