compote-ui 0.56.1 → 0.57.0

package/dist/components/data-table-v8/data-table.svelte

@@ -1,273 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import type { RowData } from '@tanstack/table-core';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
-	import type { DataTableInstance } from './data-table-utils';
-	import DataTableHead from './data-table-head.svelte';
-	import DataTableFoot from './data-table-foot.svelte';
-	import FlexRender from './flex-render.svelte';
-	import {
-		alignClass,
-		columnSizeStyle,
-		getBooleanCellValue,
-		getColumnMeta,
-		getPinningStyle,
-		getAllRowsSelectionState,
-		getReactiveCells,
-		getReactiveTableState,
-		getSelectedRowCount,
-		getUrlCellValue,
-		justifyClass,
-		openUrlCell,
-		selectionColumnSizeStyle,
-		tableSizeStyle
-	} 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 tableState = $derived(getReactiveTableState(table));
-	const rowModel = $derived.by(() => {
-		getReactiveTableState(table);
-		return table.getRowModel();
-	});
-	const headerGroups = $derived.by(() => {
-		const { columnPinning, columnVisibility } = getReactiveTableState(table);
-		void columnPinning;
-		void columnVisibility;
-
-		const leftHeaderGroups = table.getLeftHeaderGroups();
-		const centerHeaderGroups = table.getCenterHeaderGroups();
-		const rightHeaderGroups = table.getRightHeaderGroups();
-
-		return centerHeaderGroups.map((headerGroup, index) => {
-			const merged = [
-				...(leftHeaderGroups[index]?.headers ?? []),
-				...headerGroup.headers,
-				...(rightHeaderGroups[index]?.headers ?? [])
-			];
-
-			// When a column group spans pinned and unpinned columns, TanStack splits it
-			// into separate header objects (one per section). Merge adjacent headers that
-			// share the same column.id so the group label renders once.
-			const headers = merged.reduce<typeof merged>((acc, header) => {
-				const prev = acc[acc.length - 1];
-				if (prev && prev.column.id === header.column.id) {
-					acc[acc.length - 1] = { ...prev, colSpan: prev.colSpan + header.colSpan };
-				} else {
-					acc.push(header);
-				}
-				return acc;
-			}, []);
-
-			return {
-				...headerGroup,
-				id: `${leftHeaderGroups[index]?.id ?? ''}|${headerGroup.id}|${rightHeaderGroups[index]?.id ?? ''}`,
-				headers
-			};
-		});
-	});
-	const visibleLeafColumns = $derived.by(() => {
-		const { columnVisibility } = getReactiveTableState(table);
-		void columnVisibility;
-		return table.getVisibleLeafColumns();
-	});
-	const growColumn = $derived(visibleLeafColumns.find((col) => getColumnMeta(col.columnDef)?.grow));
-	const hasGrowColumn = $derived(growColumn !== undefined);
-	const visibleColumnCount = $derived(visibleLeafColumns.length);
-	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
-	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
-	const tableColumnCount = $derived(visibleColumnCount + (isRowSelectionEnabled ? 1 : 0));
-	const renderedColumnCount = $derived(tableColumnCount + 1);
-	const headerGroupCount = $derived(headerGroups.length);
-	const allRowsSelectionState = $derived.by(() => {
-		getReactiveTableState(table);
-		return getAllRowsSelectionState(table);
-	});
-	const selectedRowCount = $derived.by(() => {
-		getReactiveTableState(table);
-		return getSelectedRowCount(table);
-	});
-	const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
-	const hasFooter = $derived(
-		visibleLeafColumns.some((col) => {
-			const meta = getColumnMeta(col.columnDef);
-			return !!(meta?.sum || meta?.footer);
-		})
-	);
-</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}
->
-	{#if isColumnResizing}
-		<div aria-hidden="true" class="fixed inset-0 z-50 cursor-col-resize select-none"></div>
-	{/if}
-
-	<div class="min-h-0 flex-1 overflow-auto">
-		<table
-			class="table-fixed border-separate border-spacing-0 text-sm"
-			style={tableSizeStyle(table, isRowSelectionEnabled)}
-		>
-			<colgroup>
-				{#if isRowSelectionEnabled}
-					<col style={selectionColumnSizeStyle()} />
-				{/if}
-				{#each visibleLeafColumns as column (column.id)}
-					<col
-						style={getColumnMeta(column.columnDef)?.grow
-							? undefined
-							: columnSizeStyle(column.getSize())}
-					/>
-				{/each}
-				{#if !hasGrowColumn}
-					<col />
-				{/if}
-			</colgroup>
-			{#if caption}
-				<caption class="sr-only">{caption}</caption>
-			{/if}
-			<DataTableHead
-				{table}
-				{headerGroups}
-				{headerGroupCount}
-				{isRowSelectionEnabled}
-				{isMultiRowSelectionEnabled}
-				{allRowsSelectionState}
-				{hasGrowColumn}
-			/>
-			<tbody>
-				{#each rowModel.rows as row (row.id)}
-					{@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
-					<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))]',
-							rowSelected &&
-								'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"
-							>
-								<input
-									type="checkbox"
-									aria-label="Select row"
-									class="table-checkbox mx-auto block size-4"
-									checked={rowSelected}
-									disabled={!row.getCanSelect()}
-									onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
-								/>
-							</td>
-						{/if}
-						{#each getReactiveCells(row, getReactiveTableState(table).columnVisibility) 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),
-									cell.column.getIsPinned() && 'bg-(--row-bg)'
-								)}
-								style={getPinningStyle(cell.column, table, false, isRowSelectionEnabled)}
-							>
-								{#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 content={cell.column.columnDef.cell} context={cell.getContext()} />
-								{/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={renderedColumnCount}>
-							{emptyMessage}
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-			{#if hasFooter}
-				<DataTableFoot
-					{table}
-					{visibleLeafColumns}
-					rows={rowModel.rows}
-					{isRowSelectionEnabled}
-					{hasGrowColumn}
-				/>
-			{/if}
-		</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}
-			{selectedRowCount} of {rowModel.rows.length} rows selected
-		{:else}
-			{rowModel.rows.length} rows
-		{/if}
-	</div>
-</div>

package/dist/components/data-table-v8/data-table.svelte.d.ts

@@ -1,41 +0,0 @@
-import type { RowData } from '@tanstack/table-core';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type ClassValue } from 'tailwind-variants';
-import type { DataTableInstance } from './data-table-utils';
-declare function $$render<T extends RowData>(): {
-    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;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends RowData> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DataTable: $$IsomorphicComponent;
-type DataTable<T extends RowData> = InstanceType<typeof DataTable<T>>;
-export default DataTable;

package/dist/components/data-table-v8/flex-render.svelte

@@ -1,35 +0,0 @@
-<script
-	lang="ts"
-	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
-	import { RenderComponentConfig, RenderSnippetConfig } from './render-helpers.js';
-
-	type Props = {
-		content?:
-			| (TContext extends HeaderContext<TData, TValue>
-					? ColumnDefTemplate<HeaderContext<TData, TValue>>
-					: TContext extends CellContext<TData, TValue>
-						? ColumnDefTemplate<CellContext<TData, TValue>>
-						: never)
-			| undefined;
-		context: TContext;
-	};
-
-	let { content, context }: Props = $props();
-</script>
-
-{#if typeof content === 'string'}
-	{content}
-{:else if content instanceof Function}
-	{@const result = content(context as never)}
-	{#if result instanceof RenderComponentConfig}
-		{@const { component: Component, props } = result}
-		<Component {...props} />
-	{:else if result instanceof RenderSnippetConfig}
-		{@const { snippet, params } = result}
-		{@render snippet(params)}
-	{:else}
-		{result}
-	{/if}
-{/if}

package/dist/components/data-table-v8/flex-render.svelte.d.ts

@@ -1,28 +0,0 @@
-import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
-declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
-    props: {
-        content?: (TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never) | undefined;
-        context: TContext;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
-    props(): ReturnType<typeof $$render<TData, TValue, TContext>>['props'];
-    events(): ReturnType<typeof $$render<TData, TValue, TContext>>['events'];
-    slots(): ReturnType<typeof $$render<TData, TValue, TContext>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
-    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const FlexRender: $$IsomorphicComponent;
-type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
-export default FlexRender;

package/dist/components/data-table-v8/index.d.ts

@@ -1,12 +0,0 @@
-export { createDataTableColumnHelper } from './column-helper';
-export { createTable } from './create-table.svelte';
-export { renderComponent, renderSnippet } from './render-helpers';
-export { default as FlexRender } from './flex-render.svelte';
-export { default as Root } from './data-table.svelte';
-export { default as Title } from './data-table-title.svelte';
-export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
-export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
-export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
-export { default as Search } from './toolbar/data-table-search.svelte';
-export type { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
-export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

package/dist/components/data-table-v8/index.js

@@ -1,10 +0,0 @@
-export { createDataTableColumnHelper } from './column-helper';
-export { createTable } from './create-table.svelte';
-export { renderComponent, renderSnippet } from './render-helpers';
-export { default as FlexRender } from './flex-render.svelte';
-export { default as Root } from './data-table.svelte';
-export { default as Title } from './data-table-title.svelte';
-export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
-export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
-export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
-export { default as Search } from './toolbar/data-table-search.svelte';

package/dist/components/data-table-v8/render-helpers.d.ts

@@ -1,13 +0,0 @@
-import type { Component, ComponentProps, Snippet } from 'svelte';
-export declare class RenderComponentConfig<TComponent extends Component> {
-    component: TComponent;
-    props: ComponentProps<TComponent> | Record<string, never>;
-    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
-}
-export declare class RenderSnippetConfig<TProps> {
-    snippet: Snippet<[TProps]>;
-    params: TProps;
-    constructor(snippet: Snippet<[TProps]>, params: TProps);
-}
-export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
-export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/components/data-table-v8/render-helpers.js

@@ -1,23 +0,0 @@
-export class RenderComponentConfig {
-    component;
-    props;
-    constructor(component, props = {}) {
-        this.component = component;
-        this.props = props;
-    }
-}
-export class RenderSnippetConfig {
-    snippet;
-    params;
-    constructor(snippet, params) {
-        this.snippet = snippet;
-        this.params = params;
-    }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function renderComponent(component, props = {}) {
-    return new RenderComponentConfig(component, props);
-}
-export function renderSnippet(snippet, params = {}) {
-    return new RenderSnippetConfig(snippet, params);
-}