compote-ui 0.79.2 → 0.81.0

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

@@ -0,0 +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>

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

@@ -0,0 +1,28 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from '../features';
+declare function $$render<T extends RowData>(): {
+    props: {
+        column: Column<DataTableFeatures, T, unknown>;
+    };
+    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 DateRangeFilterEditor: $$IsomorphicComponent;
+type DateRangeFilterEditor<T extends RowData> = InstanceType<typeof DateRangeFilterEditor<T>>;
+export default DateRangeFilterEditor;

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

@@ -0,0 +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>

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

@@ -0,0 +1,30 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from '../features';
+import type { ColumnFilterEditing } from '../column-filter-editing.svelte';
+declare function $$render<T extends RowData>(): {
+    props: {
+        column: Column<DataTableFeatures, T, unknown>;
+        editing: ColumnFilterEditing;
+    };
+    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 RangeFilterEditor: $$IsomorphicComponent;
+type RangeFilterEditor<T extends RowData> = InstanceType<typeof RangeFilterEditor<T>>;
+export default RangeFilterEditor;

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

@@ -0,0 +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>

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

@@ -0,0 +1,28 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from '../features';
+declare function $$render<T extends RowData>(): {
+    props: {
+        column: Column<DataTableFeatures, T, unknown>;
+    };
+    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 SelectFilterEditor: $$IsomorphicComponent;
+type SelectFilterEditor<T extends RowData> = InstanceType<typeof SelectFilterEditor<T>>;
+export default SelectFilterEditor;

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

@@ -0,0 +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>

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

@@ -0,0 +1,8 @@
+import type { ColumnFilterEditing, FilterableColumn } from '../column-filter-editing.svelte';
+type Props = {
+    column: FilterableColumn;
+    editing: ColumnFilterEditing;
+};
+declare const TextFilterEditor: import("svelte").Component<Props, {}, "">;
+type TextFilterEditor = ReturnType<typeof TextFilterEditor>;
+export default TextFilterEditor;

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

@@ -0,0 +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>

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

@@ -0,0 +1,30 @@
+import type { Column, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from '../features';
+import { type DataTableInstance } from '../data-table-utils';
+declare function $$render<T extends RowData>(): {
+    props: {
+        table: DataTableInstance<T>;
+        column: Column<DataTableFeatures, T, unknown>;
+    };
+    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 ColumnHeaderFilter: $$IsomorphicComponent;
+type ColumnHeaderFilter<T extends RowData> = InstanceType<typeof ColumnHeaderFilter<T>>;
+export default ColumnHeaderFilter;

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';

package/dist/components/data-table-v9/table-view-state.svelte.d.ts

@@ -19,6 +19,7 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
     readonly columnVisibility: import("@tanstack/table-core").ColumnVisibilityState;
     readonly rowSelection: import("@tanstack/table-core").RowSelectionState;
     readonly sorting: import("@tanstack/table-core").SortingState;
+    readonly columnFilters: import("@tanstack/table-core").ColumnFiltersState;
     readonly rowModel: import("@tanstack/table-core").RowModel<{
         rowSortingFeature: import("@tanstack/table-core").TableFeature;
         rowSelectionFeature: import("@tanstack/table-core").TableFeature;

package/dist/components/data-table-v9/table-view-state.svelte.js

@@ -78,6 +78,9 @@ export function createTableViewState(getTable) {
         get sorting() {
             return sorting;
         },
+        get columnFilters() {
+            return columnFilters;
+        },
         get rowModel() {
             return rowModel;
         },