compote-ui 0.79.2 → 0.80.0

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/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;
         },