compote-ui 0.47.1 → 0.47.3

package/dist/components/data-table-v8/toolbar/data-table-column-filter.svelte

@@ -8,6 +8,7 @@
 	import { getReactiveTableState, type DataTableInstance } from '../data-table-utils';
 	import NumberInput from '../../number-input/number-input.svelte';
 	import * as Field from '../../field';
+	import { PhX, PhMagnifyingGlass } from '../../../icons';
 
 	type Props = {
 		table: DataTableInstance<T>;
@@ -19,13 +20,33 @@
 	let localText: Record<string, string> = $state({});
 	let localNumMin: Record<string, number> = $state({});
 	let localNumMax: Record<string, number> = $state({});
+	let localSelectSearch: Record<string, string> = $state({});
 	const timers: Record<string, ReturnType<typeof setTimeout>> = {};
 
 	const columnFilters = $derived(getReactiveTableState(table).columnFilters);
 	const activeCount = $derived(columnFilters.length);
-	const filterableColumns = $derived.by(() => {
+
+	let activeFilterIds: string[] = $derived(columnFilters.map((f) => f.id));
+	let showColumnPicker = $state(false);
+	let columnSearchText = $state('');
+
+	const activeColumns = $derived.by(() => {
+		getReactiveTableState(table);
+		return activeFilterIds
+			.map((id) => table.getColumn(id))
+			.filter((col): col is Column<T, unknown> => col != null);
+	});
+
+	const availableColumns = $derived.by(() => {
 		getReactiveTableState(table);
-		return table.getAllLeafColumns().filter((col) => col.getCanFilter());
+		return table
+			.getAllLeafColumns()
+			.filter((col) => col.getCanFilter() && !activeFilterIds.includes(col.id))
+			.filter(
+				(col) =>
+					!columnSearchText ||
+					getColumnLabel(col).toLowerCase().includes(columnSearchText.toLowerCase())
+			);
 	});
 
 	onDestroy(() => {
@@ -42,12 +63,33 @@
 		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 	}
 
+	function addFilter(column: Column<T, unknown>) {
+		activeFilterIds = [...activeFilterIds, column.id];
+		showColumnPicker = false;
+		columnSearchText = '';
+	}
+
+	function removeFilter(column: Column<T, unknown>) {
+		activeFilterIds = activeFilterIds.filter((id) => id !== column.id);
+		column.setFilterValue(undefined);
+		delete localText[column.id];
+		delete localNumMin[column.id];
+		delete localNumMax[column.id];
+		delete localSelectSearch[column.id];
+		clearTimeout(timers[column.id]);
+		clearTimeout(timers[`${column.id}_min`]);
+		clearTimeout(timers[`${column.id}_max`]);
+	}
+
 	function clearFilters() {
 		Object.values(timers).forEach(clearTimeout);
 		for (const key of Object.keys(timers)) delete timers[key];
 		localText = {};
 		localNumMin = {};
 		localNumMax = {};
+		localSelectSearch = {};
+		showColumnPicker = false;
+		columnSearchText = '';
 		table.resetColumnFilters();
 	}
 
@@ -117,8 +159,8 @@
 		{/if}
 	</Popover.Trigger>
 
-	<Popover.Content class="w-72 px-0" showArrow={false}>
-		<div class="mb-2 flex items-center justify-between px-4">
+	<Popover.Content class="w-72 p-0" showArrow={false}>
+		<div class="flex items-center justify-between px-3 py-2.5">
 			<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">
@@ -126,123 +168,208 @@
 				</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
-												)}
-										/>
+
+		{#if activeColumns.length > 0}
+			<div class="overflow-hidden border-t border-surface-3">
+				<ScrollArea.Root class="h-96">
+					<ScrollArea.Viewport>
+						<ScrollArea.Content>
+							{#each activeColumns as column (column.id)}
+								<div class="border border-surface-3 p-3">
+									<div class="mb-2 flex items-center justify-between">
+										<span class="text-sm font-medium text-ink">{getColumnLabel(column)}</span>
+										<button
+											type="button"
+											onclick={() => removeFilter(column)}
+											class="text-ink-dim transition-colors hover:text-ink"
+										>
+											<PhX class="size-3.5" />
+										</button>
 									</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
+
+									{#if getColumnType(column) === 'number' || getColumnType(column) === 'currency' || getColumnType(column) === 'percent'}
+										{@const [facetMin, facetMax] = getFacetedMinMax(column)}
+										{@const colFormatOptions = getColumnFormatOptions(column)}
+										<div class="flex flex-col gap-1.5">
+											<div class="min-w-0 flex-1">
+												<NumberInput
+													layout="horizontal"
+													label="From"
+													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">
+												<NumberInput
+													layout="horizontal"
+													label="To"
+													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'
 												)}
-										/>
-									</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}
+											>
+												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 allOptions = getFacetedValues(column)}
+										{@const search = localSelectSearch[column.id] ?? ''}
+										{@const options = search
+											? allOptions.filter((o) => o.toLowerCase().includes(search.toLowerCase()))
+											: allOptions}
+										{@const selected = getSelectValues(column)}
+										<div class="flex flex-col gap-1">
+											<Field.Root>
+												<Field.Input
+													placeholder="Search..."
+													value={search}
+													oninput={(e: Event) => {
+														localSelectSearch[column.id] = (
+															e.currentTarget as HTMLInputElement
+														).value;
+													}}
+												/>
+											</Field.Root>
+											<div class="max-h-44 overflow-hidden">
+												<ScrollArea.Root class="h-full">
+													<ScrollArea.Viewport>
+														<ScrollArea.Content>
+															<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>
+														</ScrollArea.Content>
+													</ScrollArea.Viewport>
+													<ScrollArea.Scrollbar orientation="vertical">
+														<ScrollArea.Thumb />
+													</ScrollArea.Scrollbar>
+													<ScrollArea.Corner />
+												</ScrollArea.Root>
+											</div>
+										</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>
-							{: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>
+			</div>
+		{/if}
+
+		{#if showColumnPicker}
+			<div class="border-t border-surface-3 p-3">
+				<div class="relative mb-1">
+					<PhMagnifyingGlass
+						class="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-ink-dim"
+					/>
+					<input
+						type="text"
+						placeholder="Search columns..."
+						bind:value={columnSearchText}
+						class="h-8 w-full rounded border border-border bg-surface-1 pr-3 pl-7 text-sm text-ink outline-none placeholder:text-ink-dim focus:ring-1 focus:ring-ring"
+					/>
+				</div>
+				<div class="max-h-48 overflow-y-auto">
+					{#each availableColumns as column (column.id)}
+						<button
+							type="button"
+							onclick={() => addFilter(column)}
+							class="w-full rounded px-2 py-1.5 text-left text-sm text-ink hover:bg-surface-2"
+						>
+							{getColumnLabel(column)}
+						</button>
+					{:else}
+						<p class="px-2 py-3 text-center text-sm text-ink-dim">No more columns</p>
 					{/each}
-				</ScrollArea.Content>
-			</ScrollArea.Viewport>
-			<ScrollArea.Scrollbar orientation="vertical">
-				<ScrollArea.Thumb />
-			</ScrollArea.Scrollbar>
-			<ScrollArea.Corner />
-		</ScrollArea.Root>
+				</div>
+			</div>
+		{:else}
+			<div class="border-t border-surface-3">
+				<button
+					type="button"
+					onclick={() => (showColumnPicker = true)}
+					class="flex w-full items-center gap-2 px-3 py-2.5 text-sm text-ink-dim hover:bg-surface-2 hover:text-ink"
+				>
+					<span class="text-base leading-none">+</span>
+					Add Filter
+				</button>
+			</div>
+		{/if}
 	</Popover.Content>
 </Popover.Root>

package/dist/components/drawer/drawer-root.svelte

@@ -2,13 +2,20 @@
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerRootProps } from '@ark-ui/svelte/drawer';
 
-	interface Props extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
+	interface Props extends Omit<DrawerRootProps, 'open'> {
 		open?: boolean;
 	}
 
-	let { children, open = $bindable(), ...rest }: Props = $props();
+	let { children, open = $bindable(), onOpenChange, ...rest }: Props = $props();
 </script>
 
-<Drawer.Root bind:open {...rest}>
+<Drawer.Root
+	{open}
+	onOpenChange={(details) => {
+		open = details.open;
+		onOpenChange?.(details);
+	}}
+	{...rest}
+>
 	{@render children?.()}
 </Drawer.Root>

package/dist/components/drawer/drawer-root.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DrawerRootProps } from '@ark-ui/svelte/drawer';
-interface Props extends Omit<DrawerRootProps, 'open' | 'onOpenChange'> {
+interface Props extends Omit<DrawerRootProps, 'open'> {
     open?: boolean;
 }
 declare const DrawerRoot: import("svelte").Component<Props, {}, "open">;

package/dist/components/number-input/number-input.svelte

@@ -17,7 +17,7 @@
 	const locale = useLocaleContext();
 	const rootClass = $derived(
 		layout === 'horizontal'
-			? 'flex items-center gap-1.5 w-full max-w-48 data-disabled:opacity-50 data-disabled:grayscale'
+			? 'flex items-center justify-between gap-1.5 w-full data-disabled:opacity-50 data-disabled:grayscale'
 			: 'flex flex-col gap-1.5 w-full max-w-48 data-disabled:opacity-50 data-disabled:grayscale'
 	);
 </script>
@@ -28,7 +28,12 @@
 	{...restProps}
 	allowMouseWheel
 	locale={locale().locale}
-	value={value != null ? new Intl.NumberFormat(locale().locale, { useGrouping: false, maximumFractionDigits: 20 }).format(value) : undefined}
+	value={value != null
+		? new Intl.NumberFormat(locale().locale, {
+				useGrouping: false,
+				maximumFractionDigits: 20
+			}).format(value)
+		: undefined}
 	readOnly={readonly}
 	onValueChange={(valueChangeDetails) => {
 		onValueChange?.(valueChangeDetails);
@@ -48,7 +53,7 @@
 	{/if}
 	<NumberInput.Control class="relative isolate">
 		<NumberInput.Input
-			class="h-9 w-full rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
+			class="h-9 w-full max-w-48 rounded-md border bg-surface-1 px-3 pr-8 text-right text-sm font-medium tabular-nums shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
 		/>
 		<div
 			class="absolute top-px right-px bottom-px z-10 flex w-6 flex-col overflow-hidden rounded-r border-l"

package/dist/components/scroll-area/scroll-area-content.svelte

@@ -10,6 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<ScrollArea.Content {...rest} class={cn('py-3 ps-4 pe-6', className)}>
+<ScrollArea.Content {...rest} class={cn('p-3', className)}>
 	{@render children?.()}
 </ScrollArea.Content>

package/dist/components/scroll-area/scroll-area-scrollbar.svelte

@@ -13,7 +13,7 @@
 <ScrollArea.Scrollbar
 	{...rest}
 	class={cn(
-		'group pointer-events-none relative m-2 flex rounded-md bg-well opacity-0 transition-opacity duration-150',
+		'group pointer-events-none relative m-1 flex rounded-md bg-well opacity-0 transition-opacity duration-150',
 		'data-hover:pointer-events-auto data-hover:opacity-100',
 		'data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0',
 		'data-[orientation=vertical]:w-1 data-[orientation=vertical]:[&:not([data-overflow-y])]:hidden',

package/dist/components/tabs/tabs.svelte

@@ -18,6 +18,7 @@
 		bind:value
 		{defaultValue}
 		{orientation}
+		lazyMount
 		class="flex data-[orientation='horizontal']:flex-col data-[orientation='vertical']:flex-row"
 	>
 		{@render children?.()}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.47.1",
+	"version": "0.47.3",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",