compote-ui 0.55.3 → 0.56.0

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

@@ -1,249 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import { onDestroy } from 'svelte';
-	import type { CellData, Column, RowData } from '@tanstack/svelte-table';
-	import * as Popover from '../popover';
-	import * as ScrollArea from '../scroll-area';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import { cn } from 'tailwind-variants';
-	import type { DataTableFeatures, DataTableInstance } from './create-table';
-	import NumberInput from '../number-input/number-input.svelte';
-	import * as Field from '../field';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		triggerLabel?: string;
-	};
-
-	let { table, triggerLabel = 'Filters' }: Props = $props();
-
-	let localText: Record<string, string> = $state({});
-	let localNumMin: Record<string, number> = $state({});
-	let localNumMax: Record<string, number> = $state({});
-	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
-
-	const columnFilters = $derived(table.store.state.columnFilters);
-	const activeCount = $derived(columnFilters.length);
-	const filterableColumns = $derived(table.getAllLeafColumns().filter((col) => col.getCanFilter()));
-
-	onDestroy(() => {
-		Object.values(timers).forEach(clearTimeout);
-	});
-
-	function getColumnType(column: Column<DataTableFeatures, T, CellData>): string | undefined {
-		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
-			| string
-			| undefined;
-	}
-
-	function getColumnLabel(column: Column<DataTableFeatures, T, CellData>): string {
-		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-	}
-
-	function clearFilters() {
-		Object.values(timers).forEach(clearTimeout);
-		for (const key of Object.keys(timers)) delete timers[key];
-		localText = {};
-		localNumMin = {};
-		localNumMax = {};
-		table.resetColumnFilters();
-	}
-
-	function handleTextInput(column: Column<DataTableFeatures, T, CellData>, value: string) {
-		localText[column.id] = value;
-		clearTimeout(timers[column.id]);
-		timers[column.id] = setTimeout(() => {
-			column.setFilterValue(value || undefined);
-		}, 300);
-	}
-
-	function handleNumericInput(
-		column: Column<DataTableFeatures, T, CellData>,
-		which: 'min' | 'max',
-		value: number | null
-	) {
-		if (value === null) {
-			if (which === 'min') delete localNumMin[column.id];
-			else delete localNumMax[column.id];
-		} else {
-			if (which === 'min') localNumMin[column.id] = value;
-			else localNumMax[column.id] = value;
-		}
-		clearTimeout(timers[`${column.id}_${which}`]);
-		timers[`${column.id}_${which}`] = setTimeout(() => {
-			const min = localNumMin[column.id];
-			const max = localNumMax[column.id];
-			column.setFilterValue(min === undefined && max === undefined ? undefined : [min, max]);
-		}, 300);
-	}
-
-	function getSelectValues(column: Column<DataTableFeatures, T, CellData>): string[] {
-		return (column.getFilterValue() as string[] | undefined) ?? [];
-	}
-
-	function handleSelectChange(
-		column: Column<DataTableFeatures, T, CellData>,
-		value: string,
-		checked: boolean
-	) {
-		const current = getSelectValues(column);
-		const next = checked ? [...current, value] : current.filter((v) => v !== value);
-		column.setFilterValue(next.length ? next : undefined);
-	}
-
-	function getFacetedValues(column: Column<DataTableFeatures, T, CellData>): string[] {
-		return Array.from(column.getFacetedUniqueValues().keys()).map(String).sort();
-	}
-
-	function getFacetedMinMax(
-		column: Column<DataTableFeatures, T, CellData>
-	): [number | undefined, number | undefined] {
-		const vals = column.getFacetedMinMaxValues();
-		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
-	}
-
-	function getColumnFormatOptions(
-		column: Column<DataTableFeatures, T, CellData>
-	): Intl.NumberFormatOptions | undefined {
-		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
-			| Intl.NumberFormatOptions
-			| undefined;
-	}
-</script>
-
-<Popover.Root positioning={{ placement: 'bottom-end' }}>
-<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}
-</Popover.Trigger>
-
-    <Popover.Content class="w-72 px-0" showArrow={false}>
-    	<div class="mb-2 flex items-center justify-between px-4">
-    		<span class="text-sm font-medium text-ink">Filters</span>
-    		{#if activeCount > 0}
-    			<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">
-    				Clear all
-    			</button>
-    		{/if}
-    	</div>
-    	<div class="mb-2 border-b border-surface-3"></div>
-
-    	<ScrollArea.Root class="h-80">
-    		<ScrollArea.Viewport>
-    			<ScrollArea.Content>
-    				{#each filterableColumns as column (column.id)}
-    					<div class="mb-3">
-    						<p class="mb-1 text-xs font-medium text-ink">{getColumnLabel(column)}</p>
-
-    						{#if getColumnType(column) === 'number' || getColumnType(column) === 'currency' || getColumnType(column) === 'percent'}
-    							{@const [facetMin, facetMax] = getFacetedMinMax(column)}
-    							{@const colFormatOptions = getColumnFormatOptions(column)}
-    							<div class="flex gap-1.5">
-    								<div class="min-w-0 flex-1">
-    									<p class="mb-1 text-xs text-ink-dim">From</p>
-    									<NumberInput
-    										value={localNumMin[column.id] ?? facetMin ?? null}
-    										min={facetMin}
-    										max={facetMax}
-    										formatOptions={colFormatOptions}
-    										onValueChange={({ valueAsNumber }) =>
-    											handleNumericInput(
-    												column,
-    												'min',
-    												isNaN(valueAsNumber) ? null : valueAsNumber
-    											)}
-    									/>
-    								</div>
-    								<div class="min-w-0 flex-1">
-    									<p class="mb-1 text-xs text-ink-dim">To</p>
-    									<NumberInput
-    										value={localNumMax[column.id] ?? facetMax ?? null}
-    										min={facetMin}
-    										max={facetMax}
-    										formatOptions={colFormatOptions}
-    										onValueChange={({ valueAsNumber }) =>
-    											handleNumericInput(
-    												column,
-    												'max',
-    												isNaN(valueAsNumber) ? null : valueAsNumber
-    											)}
-    									/>
-    								</div>
-    							</div>
-    						{:else if getColumnType(column) === 'boolean'}
-    							{@const boolFilter = column.getFilterValue() as boolean | undefined}
-    							<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',
-    										boolFilter === undefined
-    											? 'bg-surface-3 font-medium text-ink'
-    											: 'text-ink-dim hover:bg-surface-2'
-    									)}
-    								>
-    									All
-    								</button>
-    								<button
-    									type="button"
-    									onclick={() => column.setFilterValue(boolFilter === true ? undefined : true)}
-    									class={cn(
-    										'flex-1 border-x border-border px-2 py-1',
-    										boolFilter === true
-    											? 'bg-surface-3 font-medium text-ink'
-    											: 'text-ink-dim hover:bg-surface-2'
-    									)}
-    								>
-    									Yes
-    								</button>
-    								<button
-    									type="button"
-    									onclick={() => column.setFilterValue(boolFilter === false ? undefined : false)}
-    									class={cn(
-    										'flex-1 px-2 py-1',
-    										boolFilter === false
-    											? 'bg-surface-3 font-medium text-ink'
-    											: 'text-ink-dim hover:bg-surface-2'
-    									)}
-    								>
-    									No
-    								</button>
-    							</div>
-    						{:else if getColumnType(column) === 'select'}
-    							{@const options = getFacetedValues(column)}
-    							{@const selected = getSelectValues(column)}
-    							<div class="flex flex-col gap-0.5">
-    								{#each options as option (option)}
-    									<Checkbox
-    										size="sm"
-    										label={option}
-    										class="min-h-7 rounded-sm px-2 hover:bg-surface-2"
-    										checked={selected.includes(option)}
-    										onCheckedChange={({ checked }) =>
-    											handleSelectChange(column, option, checked === true)}
-    									/>
-    								{/each}
-    							</div>
-    						{:else}
-    							<Field.Root>
-    								<Field.Input
-    									placeholder="Search..."
-    									value={localText[column.id] ?? ''}
-    									oninput={(e: Event) =>
-    										handleTextInput(column, (e.currentTarget as HTMLInputElement).value)}
-    								/>
-    							</Field.Root>
-    						{/if}
-    					</div>
-    				{/each}
-    			</ScrollArea.Content>
-    		</ScrollArea.Viewport>
-    		<ScrollArea.Scrollbar orientation="vertical">
-    			<ScrollArea.Thumb />
-    		</ScrollArea.Scrollbar>
-    		<ScrollArea.Corner />
-    	</ScrollArea.Root>
-    </Popover.Content>
-
-</Popover.Root>

package/dist/components/data-table/data-table-column-visibility.svelte.md

@@ -1,74 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import type { CellData, Column, RowData } from '@tanstack/svelte-table';
-	import * as Popover from '../popover';
-	import * as ScrollArea from '../scroll-area';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import type { DataTableFeatures, DataTableInstance } from './create-table';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		triggerLabel?: string;
-	};
-
-	let { table, triggerLabel = 'Columns' }: Props = $props();
-
-	const columnVisibility = $derived(table.store.state.columnVisibility);
-	const allColumnsVisible = $derived(table.getIsAllColumnsVisible());
-	const someColumnsVisible = $derived(
-		table.getAllLeafColumns().some((column) => column.getCanHide() && column.getIsVisible())
-	);
-	const allColumnsVisibilityState = $derived(
-		allColumnsVisible ? true : someColumnsVisible ? 'indeterminate' : false
-	);
-
-	function getColumnLabel(column: Column<DataTableFeatures, T, CellData>) {
-		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-	}
-
-	function getColumnIsVisible(column: Column<DataTableFeatures, T, CellData>, state: unknown) {
-		void state;
-		return column.getIsVisible();
-	}
-</script>
-
-<Popover.Root positioning={{ placement: 'bottom-end' }}>
-<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}
-</Popover.Trigger>
-
-    <Popover.Content class="w-56 p-2" showArrow={false}>
-    	<div class="border-b border-surface-3 px-2 pb-2">
-    		<Checkbox
-    			size="sm"
-    			label="All columns"
-    			checked={allColumnsVisibilityState}
-    			onCheckedChange={({ checked }) => table.toggleAllColumnsVisible(checked === true)}
-    		/>
-    	</div>
-
-    	<ScrollArea.Root class="h-72">
-    		<ScrollArea.Viewport>
-    			<ScrollArea.Content class="py-1 pe-3">
-    				<div class="flex flex-col">
-    					{#each table.getAllLeafColumns() as column (column.id)}
-    						<Checkbox
-    							size="md"
-    							label={getColumnLabel(column)}
-    							class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
-    							checked={getColumnIsVisible(column, columnVisibility)}
-    							disabled={!column.getCanHide()}
-    							onCheckedChange={({ checked }) => column.toggleVisibility(checked === true)}
-    						/>
-    					{/each}
-    				</div>
-    			</ScrollArea.Content>
-    		</ScrollArea.Viewport>
-    		<ScrollArea.Scrollbar orientation="vertical">
-    			<ScrollArea.Thumb />
-    		</ScrollArea.Scrollbar>
-    		<ScrollArea.Corner />
-    	</ScrollArea.Root>
-    </Popover.Content>
-
-</Popover.Root>

package/dist/components/data-table/data-table-new.svelte.md

@@ -1,245 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import { FlexRender } from '@tanstack/svelte-table';
-	import type { RowData } from '@tanstack/svelte-table';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { untrack } from 'svelte';
-	import { createSubscriber } from 'svelte/reactivity';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '$lib/icons';
-	import Checkbox from '../checkbox/checkbox.svelte';
-	import { type DataTableInstance } from './create-table';
-	import {
-		alignClass,
-		getBooleanCellValue,
-		getColumnMeta,
-		getUrlCellValue,
-		justifyClass,
-		openUrlCell
-	} from './data-table-utils';
-
-	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-		table: DataTableInstance<T>;
-		caption?: string;
-		emptyMessage?: string;
-		class?: ClassValue;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		table,
-		caption,
-		emptyMessage = 'No rows found',
-		class: className,
-		onRowClick,
-		onRowDoubleClick,
-		...rest
-	}: Props = $props();
-
-	const subscribeToTable = createSubscriber((update) => {
-		const sub = table.store.subscribe(() => update());
-		return () => sub.unsubscribe();
-	});
-
-	const rowModel = $derived(table.getRowModel());
-	const headerGroups = $derived(table.getHeaderGroups());
-
-	const columnSizes = $derived.by(() => {
-		subscribeToTable();
-		return untrack(() =>
-			table.getVisibleLeafColumns().map((col) => ({
-				id: col.id,
-				size: col.getSize(),
-				grow: getColumnMeta(col.columnDef)?.grow ?? false
-			}))
-		);
-	});
-	const hasGrowColumn = $derived(columnSizes.some((c) => c.grow));
-	const tableWidth = $derived.by(() => {
-		subscribeToTable();
-		return untrack(() => table.getTotalSize());
-	});
-	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
-	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
-	// table.state is the public selected state — safe to read directly in template
-	// table.store.state is the internal TanStack atom — accumulates subscriptions
-	const rowSelection = $derived(table.state.rowSelection);
-	const selectedCount = $derived(Object.keys(rowSelection).length);
-</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}
->
-	<div class="min-h-0 flex-1 overflow-auto">
-		<table
-			class="table-fixed border-separate border-spacing-0 text-sm"
-			style="width: max(100%, {tableWidth + (isRowSelectionEnabled ? 40 : 0)}px)"
-		>
-			<colgroup>
-				{#if isRowSelectionEnabled}
-					<col style="width: 40px" />
-				{/if}
-				{#each columnSizes as col (col.id)}
-					<col style={col.grow ? undefined : `width: ${col.size}px`} />
-				{/each}
-				{#if !hasGrowColumn}
-					<col />
-				{/if}
-			</colgroup>
-			{#if caption}
-				<caption class="sr-only">{caption}</caption>
-			{/if}
-			<thead class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim">
-				{#each headerGroups as headerGroup, headerGroupIndex (headerGroup.id)}
-					<tr class="h-9">
-						{#if isRowSelectionEnabled}
-							<th
-								class="h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 text-center align-middle"
-								style="position: sticky; left: 0; z-index: 15; width: 40px; min-width: 40px; max-width: 40px"
-							>
-								{#if isMultiRowSelectionEnabled && headerGroupIndex === headerGroups.length - 1}
-									<Checkbox
-										size="sm"
-										aria-label="Select all rows"
-										class="mx-auto size-4"
-										checked={table.getIsAllRowsSelected()
-											? true
-											: table.getIsSomeRowsSelected()
-												? 'indeterminate'
-												: false}
-										onCheckedChange={({ checked }) => table.toggleAllRowsSelected(checked === true)}
-									/>
-								{/if}
-							</th>
-						{/if}
-						{#each headerGroup.headers as header (header.id)}
-							{@const columnDef = getColumnMeta(header.column.columnDef)}
-							<th
-								class={cn(
-									'h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
-									alignClass(columnDef?.align)
-								)}
-								colspan={header.colSpan}
-							>
-								{#if !header.isPlaceholder}
-									<FlexRender {header} />
-								{/if}
-							</th>
-						{/each}
-						{#if !hasGrowColumn}
-							<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
-						{/if}
-					</tr>
-				{/each}
-			</thead>
-			<tbody>
-				{#each rowModel.rows as row (row.id)}
-					{@const isSelected = Boolean(rowSelection[row.id])}
-					<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))]',
-							isSelected &&
-								'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 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"
-							>
-								<Checkbox
-									size="sm"
-									aria-label="Select row"
-									class="mx-auto size-4"
-									checked={isSelected}
-									disabled={!row.getCanSelect()}
-									onCheckedChange={({ checked }) => row.toggleSelected(checked === true)}
-								/>
-							</td>
-						{/if}
-						{#each row.getVisibleCells() as cell (cell.id)}
-							{@const columnDef = getColumnMeta(cell.column.columnDef)}
-							<td
-								class={cn(
-									'truncate border-b border-b-surface-2 px-3 py-2 group-last/row:border-b-0',
-									alignClass(columnDef?.align)
-								)}
-							>
-								{#if columnDef?.type === 'boolean'}
-									{@const value = getBooleanCellValue(cell.getValue())}
-									{#if value === true}
-										<span
-											class="inline-flex size-5 items-center justify-center text-success"
-											role="img"
-											aria-label="Yes"
-										>
-											<PhCheck class="size-4" />
-										</span>
-									{:else if value === false}
-										<span
-											class="inline-flex size-5 items-center justify-center text-danger"
-											role="img"
-											aria-label="No"
-										>
-											<PhX class="size-4" />
-										</span>
-									{:else}
-										-
-									{/if}
-								{:else if columnDef?.type === 'url'}
-									{@const value = getUrlCellValue(cell.getValue())}
-									{#if value}
-										<button
-											type="button"
-											class={cn(
-												'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
-												justifyClass(columnDef.align)
-											)}
-											onclick={() => openUrlCell(value)}
-										>
-											<PhArrowSquareOut class="size-3.5 shrink-0" />
-										</button>
-									{:else}
-										-
-									{/if}
-								{:else}
-									<FlexRender {cell} />
-								{/if}
-							</td>
-						{/each}
-						{#if !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={columnSizes.length + (isRowSelectionEnabled ? 2 : 1)}
-						>
-							{emptyMessage}
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-
-    <div class="shrink-0 border-t border-surface-3 bg-surface-2 px-3 py-2 text-sm text-ink-dim">
-    	{#if isRowSelectionEnabled}
-    		{selectedCount} of {rowModel.rows.length} rows selected
-    	{:else}
-    		{rowModel.rows.length} rows
-    	{/if}
-    </div>
-
-</div>