compote-ui 0.41.2 → 0.42.0

package/dist/components/combobox/combobox.svelte

@@ -18,6 +18,7 @@
 		readOnly,
 		multiple,
 		loading = false,
+		class: className,
 		...restProps
 	}: ComboboxProps<T> = $props();
 
@@ -87,7 +88,11 @@
 	{multiple}
 	{readOnly}
 	{...restProps}
-	class={cn(layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5')}
+	class={cn(
+		layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5',
+		'w-full',
+		className
+	)}
 >
 	{#if label}
 		<Combobox.Label class="text-sm">
@@ -98,7 +103,7 @@
 
 	<Combobox.Control
 		class={cn(
-			'flex min-h-9 items-center gap-1 rounded border bg-surface-1 px-3 shadow-sm',
+			'flex min-h-9 min-w-0 items-center gap-1 rounded border bg-surface-1 px-3 shadow-sm',
 			'focus-within:ring-1 focus-within:ring-ring',
 			'data-invalid:border-danger data-invalid:focus-within:ring-danger',
 			multiple && 'flex-wrap py-1'
@@ -118,7 +123,7 @@
 		{/if}
 		<Combobox.Input
 			placeholder={placeholder ?? 'Search...'}
-			class="flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed disabled:opacity-50"
+			class="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed disabled:opacity-50"
 		/>
 		{#if !readOnly}
 			<Combobox.ClearTrigger class="text-ink-dim transition-colors hover:text-ink">

package/dist/components/combobox/types.d.ts

@@ -9,4 +9,5 @@ export interface ComboboxProps<T extends ListItem> extends Omit<ComboboxRootBase
     multiple?: boolean;
     layout?: 'vertical' | 'horizontal';
     loading?: boolean;
+    class?: string;
 }

package/dist/components/data-table/create-table.d.ts

@@ -1,4 +1,4 @@
-import { type ColumnResizeMode, type Row, type RowData, type SvelteTable, type TableState } from '@tanstack/svelte-table';
+import { type ColumnResizeMode, type ColumnVisibilityState, type Row, type RowData, type SvelteTable, type TableState } from '@tanstack/svelte-table';
 import type { DataTableColumn, DataTableLeafColumn } from './types';
 declare const dataTableFeatures: {
     columnVisibilityFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnVisibilityFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
@@ -24,6 +24,7 @@ export type CreateDataTableOptions<T extends RowData> = {
     enableMultiRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
     enableSorting?: boolean;
     debugTable?: boolean;
+    onColumnVisibilityChange?: (visibility: ColumnVisibilityState) => void;
 };
 export declare function createTable<T extends RowData>(options: CreateDataTableOptions<T>): SvelteTable<{
     columnVisibilityFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnVisibilityFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;

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

@@ -17,7 +17,7 @@ function oneOfFilterFn(row, columnId, filterValue) {
 oneOfFilterFn.autoRemove = (val) => !Array.isArray(val) || val.length === 0;
 export function createTable(options) {
     const localeCtx = useLocaleContext();
-    return createTanStackTable({
+    const table = createTanStackTable({
         _features: dataTableFeatures,
         _rowModels: {
             sortedRowModel: createSortedRowModel(sortFns),
@@ -61,6 +61,15 @@ export function createTable(options) {
         sorting: state.sorting,
         columnFilters: state.columnFilters
     }));
+    if (options.onColumnVisibilityChange) {
+        const { onColumnVisibilityChange } = options;
+        const orig = table.setColumnVisibility.bind(table);
+        table.setColumnVisibility = (updater) => {
+            orig(updater);
+            onColumnVisibilityChange(table.store.state.columnVisibility);
+        };
+    }
+    return table;
 }
 function createColumnVisibility(columns) {
     return getLeafColumns(columns).reduce((visibility, column) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.41.2",
+	"version": "0.42.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -11,7 +11,9 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"patch": "npm version patch && npm publish",
+		"minor": "npm version minor && npm publish"
 	},
 	"files": [
 		"dist",
@@ -69,7 +71,7 @@
 		"eslint-plugin-svelte": "^3.17.0",
 		"globals": "^17.5.0",
 		"prettier": "^3.8.3",
-		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-svelte": "^3.5.2",
 		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.17",
 		"svelte": "^5.55.4",
@@ -77,9 +79,9 @@
 		"tailwindcss": "^4.2.4",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.59.1",
+		"typescript-eslint": "^8.59.3",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.0.10"
+		"vite": "^8.0.12"
 	},
 	"keywords": [
 		"svelte"