compote-ui 0.78.1 → 0.79.0

package/dist/components/data-table-v9/create-table.svelte.js

@@ -4,8 +4,9 @@ import { onDestroy } from 'svelte';
 import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
 import { dataTableFeatures } from './features';
 import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
+import { formatSelectValue, matchesSelectFilter, selectCellValues } from '../../utils/select-filter';
 const oneOfFilterFn = (row, columnId, filterValue) => {
-    return filterValue.includes(String(row.getValue(columnId)));
+    return matchesSelectFilter(row.getValue(columnId), filterValue);
 };
 oneOfFilterFn.autoRemove = (val) => !Array.isArray(val) || val.length === 0;
 export function createTable(options) {
@@ -137,7 +138,12 @@ function createColumns(columns, localeCtx) {
                 grow: column.grow,
                 sum: column.sum,
                 footer: column.footer
-            }
+            },
+            // Select cells may hold an array (multi-value / tag columns): facet each item
+            // separately so the Funnel lists options, not value combinations.
+            ...(column.type === 'select'
+                ? { getUniqueValues: (row) => selectCellValues(readColumnValue(column, row)) }
+                : {})
         };
         if (typeof column.accessorFn === 'function') {
             return {
@@ -153,6 +159,11 @@ function createColumns(columns, localeCtx) {
         };
     });
 }
+function readColumnValue(column, row) {
+    return typeof column.accessorFn === 'function'
+        ? column.accessorFn(row)
+        : row[column.accessorKey];
+}
 function isGroupColumn(column) {
     return Array.isArray(column.columns);
 }
@@ -220,6 +231,8 @@ function applyTypeFormat(column, value, localeCtx) {
     }
     if (column.type === 'boolean')
         return value ? 'Yes' : 'No';
+    if (column.type === 'select')
+        return formatSelectValue(value);
     return value;
 }
 function formatCellValue(column, value, row, localeCtx) {

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

@@ -13,6 +13,11 @@
 	import Badge from '../../badge/badge.svelte';
 	import { button } from '../../button/button.variants';
 	import { PhX, PhMagnifyingGlass, PhFunnel } from '../../../icons';
+	import {
+		selectFilterOptions,
+		type SelectFilterOption,
+		type SelectFilterValue
+	} from '../../../utils/select-filter';
 
 	type Props = {
 		table: DataTableInstance<T>;
@@ -139,13 +144,13 @@
 		}, 300);
 	}
 
-	function getSelectValues(column: Column<DataTableFeatures, T, unknown>): string[] {
-		return (column.getFilterValue() as string[] | undefined) ?? [];
+	function getSelectValues(column: Column<DataTableFeatures, T, unknown>): SelectFilterValue[] {
+		return (column.getFilterValue() as SelectFilterValue[] | undefined) ?? [];
 	}
 
 	function handleSelectChange(
 		column: Column<DataTableFeatures, T, unknown>,
-		value: string,
+		value: SelectFilterValue,
 		checked: boolean
 	) {
 		const current = getSelectValues(column);
@@ -153,8 +158,8 @@
 		column.setFilterValue(next.length ? next : undefined);
 	}
 
-	function getFacetedValues(column: Column<DataTableFeatures, T, unknown>): string[] {
-		return Array.from(column.getFacetedUniqueValues().keys()).map(String).sort();
+	function getSelectOptions(column: Column<DataTableFeatures, T, unknown>): SelectFilterOption[] {
+		return selectFilterOptions(column.getFacetedUniqueValues());
 	}
 
 	function getFacetedMinMax(
@@ -313,10 +318,12 @@
 											</button>
 										</div>
 									{:else if getColumnType(column) === 'select'}
-										{@const allOptions = getFacetedValues(column)}
+										{@const allOptions = getSelectOptions(column)}
 										{@const search = localSelectSearch[column.id] ?? ''}
 										{@const options = search
-											? allOptions.filter((o) => o.toLowerCase().includes(search.toLowerCase()))
+											? allOptions.filter((o) =>
+													o.label.toLowerCase().includes(search.toLowerCase())
+												)
 											: allOptions}
 										{@const selected = getSelectValues(column)}
 										<div class="flex flex-col gap-1">
@@ -335,15 +342,22 @@
 												<ScrollArea.Viewport class="max-h-40">
 													<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 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 }) =>
+																			handleSelectChange(column, option.value, checked === true)}
+																	/>
+																	<span class="text-xs text-ink-dim tabular-nums"
+																		>{option.count}</span
+																	>
+																</div>
 															{/each}
 														</div>
 													</ScrollArea.Content>

package/dist/components/image-cropper/image-cropper.svelte

@@ -55,11 +55,11 @@
 		}
 	}));
 
-	// eslint-disable-next-line no-useless-assignment
+	// eslint-disable-next-line no-useless-assignment, @typescript-eslint/no-unused-vars
 	getCroppedImage = (options) => imageCropper().getCroppedImage(options);
-	// eslint-disable-next-line no-useless-assignment
+	// eslint-disable-next-line no-useless-assignment, @typescript-eslint/no-unused-vars
 	getCropData = () => imageCropper().getCropData();
-	// eslint-disable-next-line no-useless-assignment
+	// eslint-disable-next-line no-useless-assignment, @typescript-eslint/no-unused-vars
 	getProcessedImage = (opts?: ProcessImageOptions) =>
 		cropImage(src, imageCropper().getCropData(), opts);
 

package/dist/utils/select-filter.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Value handling for `type: 'select'` data-table columns. A select cell holds either one
+ * value or an array of values (multi-value / tag columns); both facet, filter and render
+ * through the same helpers so the Funnel works the same for either shape.
+ */
+/**
+ * Filter value standing for "no value". It is `null`, not a string, so it can never
+ * collide with a real option — a cell whose value is the string `'null'` stays a regular
+ * option. Every other selected option is the `String()` of the cell value.
+ */
+export declare const EMPTY_SELECT_VALUE: null;
+export type SelectFilterValue = string | typeof EMPTY_SELECT_VALUE;
+/**
+ * The values a select cell contributes to facets and filters: each distinct item of an
+ * array, or the scalar itself. Items are distinct by their filter value (`String()`), so a
+ * row counts once per option even when its array repeats an item. A missing cell (null,
+ * undefined, '' or an empty array) is one `EMPTY_SELECT_VALUE`, so it facets and filters
+ * as a single "empty" option.
+ */
+export declare function selectCellValues(value: unknown): unknown[];
+/** One-of filter: the cell matches when any of its values is among the selected options. */
+export declare function matchesSelectFilter(value: unknown, filterValue: SelectFilterValue[]): boolean;
+export type SelectFilterOption = {
+    value: SelectFilterValue;
+    label: string;
+    count: number;
+};
+/**
+ * Filter options from a column's faceted unique values: sorted by label, with the empty
+ * option (labelled `emptyLabel`) last.
+ */
+export declare function selectFilterOptions(facets: Map<unknown, number>, emptyLabel?: string): SelectFilterOption[];
+/** Cell text for a select value: array items joined with `, `; undefined when empty. */
+export declare function formatSelectValue(value: unknown): string | number | boolean | undefined;

package/dist/utils/select-filter.js

@@ -0,0 +1,78 @@
+/**
+ * Value handling for `type: 'select'` data-table columns. A select cell holds either one
+ * value or an array of values (multi-value / tag columns); both facet, filter and render
+ * through the same helpers so the Funnel works the same for either shape.
+ */
+/**
+ * Filter value standing for "no value". It is `null`, not a string, so it can never
+ * collide with a real option — a cell whose value is the string `'null'` stays a regular
+ * option. Every other selected option is the `String()` of the cell value.
+ */
+export const EMPTY_SELECT_VALUE = null;
+function isEmpty(value) {
+    return value == null || value === '';
+}
+/**
+ * The values a select cell contributes to facets and filters: each distinct item of an
+ * array, or the scalar itself. Items are distinct by their filter value (`String()`), so a
+ * row counts once per option even when its array repeats an item. A missing cell (null,
+ * undefined, '' or an empty array) is one `EMPTY_SELECT_VALUE`, so it facets and filters
+ * as a single "empty" option.
+ */
+export function selectCellValues(value) {
+    if (!Array.isArray(value))
+        return [isEmpty(value) ? EMPTY_SELECT_VALUE : value];
+    const seen = new Set();
+    const items = [];
+    for (const item of value) {
+        if (isEmpty(item))
+            continue;
+        const key = String(item);
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        items.push(item);
+    }
+    return items.length ? items : [EMPTY_SELECT_VALUE];
+}
+function toFilterValue(item) {
+    return item === EMPTY_SELECT_VALUE ? EMPTY_SELECT_VALUE : String(item);
+}
+/** One-of filter: the cell matches when any of its values is among the selected options. */
+export function matchesSelectFilter(value, filterValue) {
+    return selectCellValues(value).some((item) => filterValue.includes(toFilterValue(item)));
+}
+/**
+ * Filter options from a column's faceted unique values: sorted by label, with the empty
+ * option (labelled `emptyLabel`) last.
+ */
+export function selectFilterOptions(facets, emptyLabel = '(empty)') {
+    const counts = new Map();
+    let emptyCount = 0;
+    for (const [key, count] of facets) {
+        if (isEmpty(key)) {
+            emptyCount += count;
+            continue;
+        }
+        const value = String(key);
+        counts.set(value, (counts.get(value) ?? 0) + count);
+    }
+    const options = [...counts].map(([value, count]) => ({
+        value,
+        label: value,
+        count
+    }));
+    options.sort((a, b) => a.label.localeCompare(b.label));
+    if (emptyCount > 0) {
+        options.push({ value: EMPTY_SELECT_VALUE, label: emptyLabel, count: emptyCount });
+    }
+    return options;
+}
+/** Cell text for a select value: array items joined with `, `; undefined when empty. */
+export function formatSelectValue(value) {
+    if (Array.isArray(value)) {
+        const items = value.filter((item) => !isEmpty(item));
+        return items.length ? items.join(', ') : undefined;
+    }
+    return isEmpty(value) ? undefined : value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.78.1",
+	"version": "0.79.0",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -72,28 +72,28 @@
 		"@sveltejs/adapter-cloudflare": "^8.0.0",
 		"@sveltejs/kit": "^3.0.1",
 		"@sveltejs/package": "^3.0.0",
-		"@sveltejs/vite-plugin-svelte": "^7.3.0",
+		"@sveltejs/vite-plugin-svelte": "^7.3.1",
 		"@tailwindcss/vite": "^4.3.3",
-		"@tanstack/intent": "^0.4.0",
-		"@tanstack/svelte-table": "9.2.4",
-		"@types/node": "^24",
-		"eslint": "^10.10.0",
+		"@tanstack/intent": "^0.5.4",
+		"@tanstack/svelte-table": "9.2.6",
+		"@types/node": "^24.19.1",
+		"eslint": "^10.12.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.0",
-		"globals": "^17.12.0",
-		"prettier": "^3.9.7",
+		"globals": "^17.13.0",
+		"prettier": "^3.9.9",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
-		"publint": "^0.3.24",
-		"svelte": "^5.57.1",
+		"publint": "^0.3.25",
+		"svelte": "^5.57.2",
 		"svelte-check": "^4.7.6",
 		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.70.0",
+		"typescript-eslint": "^8.71.1",
 		"unplugin-icons": "^24.0.0",
-		"vite": "^8.3.0",
-		"vitest": "^5.0.1",
+		"vite": "^8.3.3",
+		"vitest": "^5.0.3",
 		"wrangler": "^4.118.0"
 	},
 	"keywords": [
@@ -101,7 +101,7 @@
 		"tanstack-intent"
 	],
 	"dependencies": {
-		"@ark-ui/svelte": "^5.24.2",
+		"@ark-ui/svelte": "^5.24.3",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@internationalized/date": "^3.12.4",
 		"@tanstack/svelte-virtual": "^3.13.39",

package/skills/data-table/SKILL.md

@@ -8,7 +8,7 @@ description: >
 metadata:
   type: composition
   library: compote-ui
-  library_version: '0.75.5'
+  library_version: '0.79.0'
 requires:
   - component-usage
   - theming

package/skills/data-table/references/column-options.md

@@ -58,6 +58,29 @@ Type defaults:
 
 Use one `grow: true` column to absorb extra horizontal space.
 
+## Select columns with multiple values
+
+A `type: 'select'` column may return an array (tags, multi-select attributes). The Funnel then
+lists each item as its own option with a row count, a row matches when any of its items is
+selected, and the cell renders the items joined with `, `. A row counts once per option even
+when its array repeats an item. Missing values — `null`, `undefined`, `''` or an empty array —
+share one `(empty)` option.
+
+The filter value is an array of selected options: each is the `String()` of the cell value, and
+the empty option is `null` — so a real `'null'` string stays its own option:
+
+```ts
+table.getColumn('tags')?.setFilterValue(['Battery', null]); // Battery or no tags
+```
+
+```ts
+col.accessorFn((row) => row.tags.map((tag) => tag.name), {
+	id: 'tags',
+	header: 'Tags',
+	type: 'select'
+});
+```
+
 ## Locale for number/currency/percent
 
 Priority: `formatLocale` prop → `useLocaleContext().locale` → browser default. Wrap the app in