compote-ui 0.55.3 → 0.56.0

package/dist/index.js

@@ -17,6 +17,10 @@ export { default as DateInput } from './components/date-input/date-input.svelte'
 export { default as DatePicker } from './components/date-picker/date-picker.svelte';
 export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export * as DataTable from './components/data-table-v9';
+export * as VirtualDataTable from './components/data-table-v9/virtual';
+export * as DataTableV8 from './components/data-table-v8';
+export * as VirtualDataTableV8 from './components/data-table-v8/virtual';
 export * as Drawer from './components/drawer';
 export { default as FileUploadDropzone } from './components/file-upload/file-upload-dropzone.svelte';
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.55.3",
+	"version": "0.56.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -33,16 +33,25 @@
 			"svelte": "./dist/index.js"
 		},
 		"./data-table": {
+			"types": "./dist/components/data-table-v9/index.d.ts",
+			"svelte": "./dist/components/data-table-v9/index.js"
+		},
+		"./data-table/virtual": {
+			"types": "./dist/components/data-table-v9/virtual/index.d.ts",
+			"svelte": "./dist/components/data-table-v9/virtual/index.js"
+		},
+		"./data-table-v8": {
 			"types": "./dist/components/data-table-v8/index.d.ts",
 			"svelte": "./dist/components/data-table-v8/index.js"
 		},
-		"./data-table/virtual": {
+		"./data-table-v8/virtual": {
 			"types": "./dist/components/data-table-v8/virtual/index.d.ts",
 			"svelte": "./dist/components/data-table-v8/virtual/index.js"
 		},
 		"./theme.css": "./dist/theme.css"
 	},
 	"peerDependencies": {
+		"@tanstack/svelte-table": ">=9.0.0-beta.6 <10",
 		"@tanstack/table-core": ">=8.0.0",
 		"@tanstack/svelte-virtual": ">=3.0.0",
 		"svelte": "^5.0.0"
@@ -65,6 +74,7 @@
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.2.4",
+		"@tanstack/svelte-table": "9.0.0-beta.6",
 		"@tanstack/svelte-virtual": "^3.13.28",
 		"@tanstack/table-core": "^8.21.3",
 		"@types/node": "^22.19.18",

package/dist/components/data-table/column-helper.ts.md

@@ -1,96 +0,0 @@
-import type { RowData } from '@tanstack/svelte-table';
-import type {
-DataTableAccessorFnColumn,
-DataTableAccessorKeyColumn,
-DataTableColumn,
-DataTableGroupColumn
-} from './types';
-
-type AccessorKeyColumnOptions<T extends RowData> = Omit<
-DataTableAccessorKeyColumn<T>,
-'accessorKey' | 'accessorFn' | 'columns'
-
-> ;
-
-type AccessorFnColumnOptions<T extends RowData> = Omit<
-DataTableAccessorFnColumn<T>,
-'accessorFn' | 'accessorKey' | 'columns'
-
-> ;
-
-type GroupColumnOptions<T extends RowData> = Omit<
-DataTableGroupColumn<T>,
-| 'columns'
-| 'accessorKey'
-| 'accessorFn'
-| 'cell'
-| 'cellComponent'
-| 'cellProps'
-| 'cellSnippet'
-| 'type'
-| 'formatOptions'
-| 'formatLocale'
-
-> ;
-
-type TypeDefaults = { align?: string; size?: number; enableSorting?: boolean };
-
-const TYPE_DEFAULTS: Partial<Record<string, TypeDefaults>> = {
-number: { align: 'right' },
-currency: { align: 'right' },
-percent: { align: 'right' },
-date: { align: 'center', size: 110 },
-time: { align: 'center', size: 80 },
-'date-time': { align: 'center', size: 160 },
-boolean: { align: 'center', size: 90 },
-url: { align: 'center', size: 60, enableSorting: false }
-};
-
-function applyTypeDefaults<T extends { type?: string; align?: string; enableSorting?: boolean }>(
-options: T
-): T {
-const defaults = options.type ? TYPE_DEFAULTS[options.type] : undefined;
-if (!defaults) return options;
-return { ...defaults, ...options };
-}
-
-export function createDataTableColumnHelper<T extends RowData>() {
-return {
-accessor<K extends Extract<keyof T, string>>(
-accessorKey: K,
-options: AccessorKeyColumnOptions<T>
-): DataTableAccessorKeyColumn<T> {
-return {
-...applyTypeDefaults(options),
-accessorKey
-};
-},
-
-    	accessorFn(
-    		accessorFn: (row: T) => unknown,
-    		options: AccessorFnColumnOptions<T>
-    	): DataTableAccessorFnColumn<T> {
-    		return {
-    			...applyTypeDefaults(options),
-    			accessorFn
-    		};
-    	},
-
-    	group(
-    		header: string,
-    		columns: DataTableColumn<T>[],
-    		options: Omit<GroupColumnOptions<T>, 'header'> = {}
-    	): DataTableGroupColumn<T> {
-    		return {
-    			...options,
-    			header,
-    			columns
-    		};
-    	},
-
-    	columns(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {
-    		return columns;
-    	}
-    };
-
-}

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

@@ -1,386 +0,0 @@
-import {
-columnVisibilityFeature,
-columnResizingFeature,
-columnSizingFeature,
-columnFilteringFeature,
-columnFacetingFeature,
-columnPinningFeature,
-columnOrderingFeature,
-createSortedRowModel,
-createFilteredRowModel,
-// createFacetedRowModel,
-// createFacetedMinMaxValues,
-// createFacetedUniqueValues,
-createTable as createTanStackTable,
-filterFns,
-renderComponent,
-renderSnippet,
-rowSelectionFeature,
-rowSortingFeature,
-sortFns,
-tableFeatures,
-type CellContext,
-type CellData,
-type ColumnDef,
-type ColumnPinningState,
-type ColumnResizeMode,
-type ColumnSizingState,
-type ColumnVisibilityState,
-type Row,
-type RowData,
-type SvelteTable,
-type TableState
-} from '@tanstack/svelte-table';
-import { createAtom } from '@tanstack/svelte-store';
-import type { Component } from 'svelte';
-import { useLocaleContext } from '@ark-ui/svelte/locale';
-import type {
-DataTableColumn,
-DataTableColumnType,
-DataTableGroupColumn,
-DataTableLeafColumn
-} from './types';
-
-const dataTableFeatures = tableFeatures({
-columnVisibilityFeature,
-columnSizingFeature,
-columnResizingFeature,
-columnFilteringFeature,
-columnFacetingFeature,
-columnPinningFeature,
-columnOrderingFeature,
-rowSelectionFeature,
-rowSortingFeature
-});
-
-export type DataTableFeatures = typeof dataTableFeatures;
-export type DataTableSelectedState = Pick<
-TableState<DataTableFeatures>,
-| 'columnVisibility'
-| 'columnSizing'
-| 'columnResizing'
-| 'rowSelection'
-| 'sorting'
-| 'columnFilters'
-
-> ;
-
-function oneOfFilterFn(
-row: Row<DataTableFeatures, RowData>,
-columnId: string,
-filterValue: string[]
-): boolean {
-return filterValue.includes(String(row.getValue(columnId)));
-}
-oneOfFilterFn.autoRemove = (val: unknown): boolean => !Array.isArray(val) || val.length === 0;
-export type DataTableInstance<T extends RowData> = SvelteTable<
-DataTableFeatures,
-T,
-DataTableSelectedState
-
-> ;
-
-export type CreateDataTableOptions<T extends RowData> = {
-data: T[];
-columns: DataTableColumn<T>[];
-columnResizeMode?: ColumnResizeMode;
-initialState?: Partial<TableState<DataTableFeatures>>;
-getRowId?: (row: T, index: number, parent?: Row<DataTableFeatures, T>) => string;
-enableRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
-enableMultiRowSelection?: boolean | ((row: Row<DataTableFeatures, T>) => boolean);
-enableSorting?: boolean;
-debugTable?: boolean;
-onColumnVisibilityChange?: (visibility: ColumnVisibilityState) => void;
-};
-
-export function createTable<T extends RowData>(options: CreateDataTableOptions<T>) {
-const localeCtx = useLocaleContext();
-
-    const initialColumnVisibility = {
-    	...createColumnVisibility(options.columns),
-    	...options.initialState?.columnVisibility
-    };
-
-    const columnVisibilityAtom = options.onColumnVisibilityChange
-    	? createAtom<ColumnVisibilityState>(initialColumnVisibility)
-    	: undefined;
-
-    const table = createTanStackTable(
-    	{
-    		_features: dataTableFeatures,
-    		_rowModels: {
-    			sortedRowModel: createSortedRowModel(sortFns),
-    			filteredRowModel: createFilteredRowModel({ ...filterFns, oneOf: oneOfFilterFn })
-    			// facetedRowModel: createFacetedRowModel(),
-    			// facetedMinMaxValues: createFacetedMinMaxValues(),
-    			// facetedUniqueValues: createFacetedUniqueValues()
-    		},
-    		columnResizeMode: options.columnResizeMode,
-    		getRowId: options.getRowId,
-    		enableRowSelection: options.enableRowSelection ?? false,
-    		enableMultiRowSelection: options.enableMultiRowSelection,
-    		enableSorting: options.enableSorting,
-    		debugTable: options.debugTable,
-    		get data() {
-    			return options.data;
-    		},
-    		columns: createColumns(options.columns, localeCtx),
-    		...(columnVisibilityAtom ? { atoms: { columnVisibility: columnVisibilityAtom } } : {}),
-    		initialState: {
-    			...options.initialState,
-    			columnVisibility: initialColumnVisibility,
-    			columnSizing: {
-    				...createColumnSizing(options.columns),
-    				...options.initialState?.columnSizing
-    			},
-    			columnPinning: options.initialState?.columnPinning ?? createColumnPinning(options.columns),
-    			rowSelection: options.initialState?.rowSelection ?? {},
-    			sorting: options.initialState?.sorting ?? [],
-    			columnFilters: options.initialState?.columnFilters ?? []
-    		}
-    	},
-    	(state): DataTableSelectedState => ({
-    		columnVisibility: state.columnVisibility,
-    		columnSizing: state.columnSizing,
-    		columnResizing: state.columnResizing,
-    		rowSelection: state.rowSelection,
-    		sorting: state.sorting,
-    		columnFilters: state.columnFilters
-    	})
-    );
-
-    if (columnVisibilityAtom && options.onColumnVisibilityChange) {
-    	const { onColumnVisibilityChange } = options;
-    	let initialized = false;
-    	columnVisibilityAtom.subscribe((value) => {
-    		if (!initialized) {
-    			initialized = true;
-    			return;
-    		}
-    		onColumnVisibilityChange(value);
-    	});
-    }
-
-    return table;
-
-}
-
-function createColumnVisibility<T extends RowData>(columns: DataTableColumn<T>[]) {
-return getLeafColumns(columns).reduce<ColumnVisibilityState>((visibility, column) => {
-visibility[getColumnId(column)] = true;
-return visibility;
-}, {});
-}
-
-function createColumnSizing<T extends RowData>(columns: DataTableColumn<T>[]) {
-return getLeafColumns(columns).reduce<ColumnSizingState>((sizes, column) => {
-if (typeof column.size === 'number') {
-sizes[getColumnId(column)] = column.size;
-}
-
-    	return sizes;
-    }, {});
-
-}
-
-function createColumnPinning<T extends RowData>(columns: DataTableColumn<T>[]): ColumnPinningState {
-const leafCols = getLeafColumns(columns);
-return {
-left: leafCols.filter((c) => c.pinned === 'left').map(getColumnId),
-right: leafCols.filter((c) => c.pinned === 'right').map(getColumnId)
-};
-}
-
-function createColumns<T extends RowData>(
-columns: DataTableColumn<T>[],
-localeCtx: ReturnType<typeof useLocaleContext>
-): ColumnDef<DataTableFeatures, T, CellData>[] {
-return columns.map((column) => {
-if (isGroupColumn(column)) {
-return {
-id: getGroupColumnId(column),
-header: column.header,
-columns: createColumns(column.columns, localeCtx),
-meta: {
-align: column.align
-}
-};
-}
-
-    	const columnId = getColumnId(column);
-    	const derivedFilterFn = column.filterFn ?? getFilterFnForType(column.type);
-    	const columnDef = {
-    		id: columnId,
-    		header: column.header,
-    		size: column.size,
-    		minSize: column.minSize,
-    		maxSize: column.maxSize,
-    		enableResizing: column.enableResizing,
-    		enableHiding: getColumnEnableHiding(column, columnId),
-    		enableSorting: column.enableSorting,
-    		enableColumnFilter: column.enableColumnFilter,
-    		sortDescFirst: column.sortDescFirst,
-    		...(derivedFilterFn !== undefined ? { filterFn: derivedFilterFn as never } : {}),
-    		meta: {
-    			align: column.align,
-    			type: column.type,
-    			formatOptions: column.formatOptions,
-    			formatLocale: column.formatLocale,
-    			grow: column.grow
-    		}
-    	} satisfies Partial<ColumnDef<DataTableFeatures, T, CellData>>;
-
-    	if (typeof column.accessorFn === 'function') {
-    		return {
-    			...columnDef,
-    			accessorFn: column.accessorFn,
-    			cell: (context: CellContext<DataTableFeatures, T, CellData>) =>
-    				formatCellValue(column, context.getValue(), context.row.original, localeCtx)
-    		};
-    	}
-
-    	return {
-    		...columnDef,
-    		accessorKey: column.accessorKey,
-    		cell: (context: CellContext<DataTableFeatures, T, CellData>) =>
-    			formatCellValue(column, context.getValue(), context.row.original, localeCtx)
-    	};
-    }) as ColumnDef<DataTableFeatures, T, CellData>[];
-
-}
-
-function isGroupColumn<T extends RowData>(
-column: DataTableColumn<T>
-): column is DataTableGroupColumn<T> {
-return Array.isArray(column.columns);
-}
-
-function getLeafColumns<T extends RowData>(
-columns: DataTableColumn<T>[]
-): DataTableLeafColumn<T>[] {
-return columns.flatMap((column) =>
-isGroupColumn(column) ? getLeafColumns(column.columns) : column
-);
-}
-
-function getGroupColumnId<T extends RowData>(column: DataTableGroupColumn<T>) {
-return column.id ?? column.header;
-}
-
-function getColumnEnableHiding<T extends RowData>(
-column: DataTableLeafColumn<T>,
-columnId: string
-) {
-if (column.enableHiding !== undefined) return column.enableHiding;
-if (columnId === 'id') return false;
-return undefined;
-}
-
-export function getColumnId<T extends RowData>(column: DataTableLeafColumn<T>): string {
-if (column.id !== undefined) return column.id;
-if ('accessorKey' in column && column.accessorKey !== undefined) return column.accessorKey;
-throw new Error('DataTableColumn with accessorFn requires an id.');
-}
-
-const TYPE_FORMAT_DEFAULTS: Partial<Record<DataTableColumnType, Intl.NumberFormatOptions>> = {
-currency: { style: 'currency', currency: 'USD' },
-percent: { style: 'percent' },
-number: {}
-};
-
-const TYPE_DATE_FORMAT_DEFAULTS: Record<'date' | 'time' | 'date-time', Intl.DateTimeFormatOptions> =
-{
-date: { day: '2-digit', month: '2-digit', year: 'numeric' },
-time: { hour: '2-digit', minute: '2-digit' },
-'date-time': {
-day: '2-digit',
-month: '2-digit',
-year: 'numeric',
-hour: '2-digit',
-minute: '2-digit'
-}
-};
-
-function getFilterFnForType(type: DataTableColumnType | undefined): string | undefined {
-switch (type) {
-case 'number':
-case 'currency':
-case 'percent':
-return 'inNumberRange';
-case 'boolean':
-return 'equals';
-case 'select':
-return 'oneOf';
-default:
-return undefined;
-}
-}
-
-function applyTypeFormat<T extends RowData>(
-column: DataTableLeafColumn<T>,
-value: unknown,
-localeCtx: ReturnType<typeof useLocaleContext>
-): string | number | boolean | null | undefined {
-if (value === null || value === undefined || value === '') return undefined;
-
-    const numDefaults = column.type ? TYPE_FORMAT_DEFAULTS[column.type] : undefined;
-    if (numDefaults !== undefined) {
-    	const locale = column.formatLocale ?? localeCtx().locale;
-    	return new Intl.NumberFormat(locale, {
-    		...numDefaults,
-    		...(column.formatOptions as Intl.NumberFormatOptions | undefined)
-    	}).format(Number(value));
-    }
-
-    if (column.type === 'date' || column.type === 'time' || column.type === 'date-time') {
-    	const dateValue = value instanceof Date ? value : new Date(value as string | number);
-    	if (isNaN(dateValue.getTime())) return undefined;
-    	const locale = column.formatLocale ?? localeCtx().locale;
-    	return new Intl.DateTimeFormat(locale, {
-    		...TYPE_DATE_FORMAT_DEFAULTS[column.type],
-    		...(column.formatOptions as Intl.DateTimeFormatOptions | undefined)
-    	}).format(dateValue);
-    }
-
-    if (column.type === 'boolean') return value ? 'Yes' : 'No';
-
-    return value as string | number | boolean;
-
-}
-
-function formatCellValue<T extends RowData>(
-column: DataTableLeafColumn<T>,
-value: unknown,
-row: T,
-localeCtx: ReturnType<typeof useLocaleContext>
-) {
-if (column.cellComponent) {
-return renderComponent(
-column.cellComponent as Component<Record<string, unknown>>,
-getCellComponentProps(column, value, row)
-);
-}
-
-    if (column.cellSnippet) {
-    	return renderSnippet(column.cellSnippet, { value, row });
-    }
-
-    const rendered = column.cell
-    	? column.cell(value, row)
-    	: applyTypeFormat(column, value, localeCtx);
-
-    if (rendered === null || rendered === undefined || rendered === '') {
-    	return '-';
-    }
-
-    return String(rendered);
-
-}
-
-function getCellComponentProps<T extends RowData>(
-column: DataTableLeafColumn<T>,
-value: unknown,
-row: T
-) {
-return column.cellProps ? column.cellProps(value, row) : { value, row };
-}