compote-ui 0.56.0 → 0.57.0

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

@@ -1,73 +0,0 @@
-import type { FilterFnOption, RowData } from '@tanstack/table-core';
-import type { Snippet } from 'svelte';
-export type DataTableAlign = 'left' | 'center' | 'right';
-export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'date' | 'time' | 'date-time';
-export type DataTableCellRenderer<T extends RowData> = (value: unknown, row: T) => string | number | boolean | null | undefined;
-export type DataTableCellRenderProps<T extends RowData> = {
-    value: unknown;
-    row: T;
-};
-export type DataTableCellPropsResolver<T extends RowData> = (value: unknown, row: T) => Record<string, unknown>;
-export type DataTableColumnOptions<T extends RowData> = {
-    size?: number;
-    minSize?: number;
-    maxSize?: number;
-    enableResizing?: boolean;
-    enableHiding?: boolean;
-    enableSorting?: boolean;
-    sortDescFirst?: boolean;
-    enableColumnFilter?: boolean;
-    filterFn?: FilterFnOption<T>;
-};
-export type DataTableColumnBase = {
-    header: string;
-    align?: DataTableAlign;
-};
-export type DataTableLeafColumnBase<T extends RowData> = DataTableColumnOptions<T> & DataTableColumnBase & {
-    cell?: DataTableCellRenderer<T>;
-    cellComponent?: unknown;
-    cellProps?: DataTableCellPropsResolver<T>;
-    cellSnippet?: Snippet<[DataTableCellRenderProps<T>]>;
-    type?: DataTableColumnType;
-    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
-    formatLocale?: string;
-    pinned?: 'left' | 'right';
-    grow?: boolean;
-    sum?: boolean;
-    footer?: (values: unknown[]) => string | number | undefined;
-    columns?: never;
-};
-export type DataTableAccessorKeyColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
-    accessorKey: Extract<keyof T, string>;
-    id?: string;
-    accessorFn?: never;
-};
-export type DataTableAccessorFnColumn<T extends RowData> = DataTableLeafColumnBase<T> & {
-    accessorFn: (row: T) => unknown;
-    id: string;
-    accessorKey?: never;
-};
-export type DataTableLeafColumn<T extends RowData> = DataTableAccessorKeyColumn<T> | DataTableAccessorFnColumn<T>;
-export type DataTableGroupColumn<T extends RowData> = DataTableColumnBase & {
-    id?: string;
-    columns: DataTableColumn<T>[];
-    accessorKey?: never;
-    accessorFn?: never;
-    cell?: never;
-    cellComponent?: never;
-    cellProps?: never;
-    cellSnippet?: never;
-    type?: never;
-    formatOptions?: never;
-    formatLocale?: never;
-};
-export type DataTableColumn<T extends RowData> = DataTableLeafColumn<T> | DataTableGroupColumn<T>;
-export type DataTableColumnMeta = {
-    align?: DataTableAlign;
-    type?: DataTableColumnType;
-    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
-    formatLocale?: string;
-    grow?: boolean;
-    sum?: boolean;
-    footer?: (values: unknown[]) => string | number | undefined;
-};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,176 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import type { Row, RowData } from '@tanstack/table-core';
-	import { createVirtualizer } from '@tanstack/svelte-virtual';
-	import { untrack } from 'svelte';
-	import { cn } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '../../../icons';
-	import type { DataTableInstance } from '../data-table-utils';
-	import FlexRender from '../flex-render.svelte';
-	import {
-		alignClass,
-		getBooleanCellValue,
-		getColumnMeta,
-		getPinningStyle,
-		getReactiveCells,
-		getReactiveTableState,
-		getUrlCellValue,
-		joinStyles,
-		justifyClass,
-		openUrlCell,
-		virtualColumnSizeStyle,
-		virtualGrowColumnSizeStyle,
-		virtualSelectionColumnSizeStyle
-	} from '../data-table-utils';
-
-	type Props = {
-		rows: Row<T>[];
-		scrollContainer: HTMLDivElement;
-		isRowSelectionEnabled: boolean;
-		table: DataTableInstance<T>;
-		emptyMessage: string;
-		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
-		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
-	};
-
-	let {
-		rows,
-		scrollContainer,
-		isRowSelectionEnabled,
-		table,
-		emptyMessage,
-		onRowClick,
-		onRowDoubleClick
-	}: Props = $props();
-
-	const rowVirtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
-		get count() {
-			return rows.length;
-		},
-		estimateSize: () => 37,
-		getScrollElement: () => scrollContainer,
-		measureElement:
-			typeof window !== 'undefined' && !navigator.userAgent.includes('Firefox')
-				? (element) => element.getBoundingClientRect().height
-				: undefined,
-		overscan: 5
-	});
-
-	function measureRowElement(node: HTMLTableRowElement) {
-		$rowVirtualizer.measureElement(node);
-	}
-
-	$effect(() => {
-		const count = rows.length;
-		untrack(() => {
-			$rowVirtualizer.setOptions({ ...$rowVirtualizer.options, count });
-		});
-	});
-</script>
-
-<tbody style="display: grid; height: {$rowVirtualizer.getTotalSize()}px; position: relative">
-	{#if rows.length === 0}
-		<tr style="display: flex; position: absolute; width: 100%; top: 0">
-			<td class="px-3 py-10 text-center text-sm text-ink-dim" style="flex: 1">
-				{emptyMessage}
-			</td>
-		</tr>
-	{:else}
-		{#each $rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.index)}
-			{@const row = rows[virtualRow.index]}
-			{#if row}
-				{@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
-				<tr
-					data-index={virtualRow.index}
-					use:measureRowElement
-					class={cn(
-						'group/row border-b border-surface-2 last:border-b-0',
-						'[--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))]'
-					)}
-					style="display: flex; position: absolute; transform: translateY({virtualRow.start}px); width: 100%"
-					onclick={(event) => onRowClick?.({ row: row.original, event })}
-					ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
-				>
-					{#if isRowSelectionEnabled}
-						<td
-							class="items-center justify-center bg-(--row-bg) px-3 py-2 text-center align-middle"
-							style={joinStyles(
-								virtualSelectionColumnSizeStyle(),
-								'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(
-								'items-center truncate px-3 py-2',
-								alignClass(columnDef?.align),
-								justifyClass(columnDef?.align),
-								cell.column.getIsPinned() && 'bg-(--row-bg)'
-							)}
-							style={joinStyles(
-								getColumnMeta(cell.column.columnDef)?.grow
-									? virtualGrowColumnSizeStyle()
-									: virtualColumnSizeStyle(cell.column.getSize()),
-								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}
-				</tr>
-			{/if}
-		{/each}
-	{/if}
-</tbody>

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

@@ -1,40 +0,0 @@
-import type { Row, RowData } from '@tanstack/table-core';
-import type { DataTableInstance } from '../data-table-utils';
-declare function $$render<T extends RowData>(): {
-    props: {
-        rows: Row<T>[];
-        scrollContainer: HTMLDivElement;
-        isRowSelectionEnabled: boolean;
-        table: DataTableInstance<T>;
-        emptyMessage: string;
-        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 DataTableVirtualRows: $$IsomorphicComponent;
-type DataTableVirtualRows<T extends RowData> = InstanceType<typeof DataTableVirtualRows<T>>;
-export default DataTableVirtualRows;

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

@@ -1,146 +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 type { DataTableInstance } from '../data-table-utils';
-	import DataTableHead from '../data-table-head.svelte';
-	import DataTableFoot from '../data-table-foot.svelte';
-	import DataTableVirtualRows from './data-table-virtual-rows.svelte';
-	import {
-		getAllRowsSelectionState,
-		getColumnMeta,
-		getReactiveTableState,
-		getSelectedRowCount,
-		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();
-
-	let scrollContainerRef = $state<HTMLDivElement | undefined>(undefined);
-
-	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) => ({
-			...headerGroup,
-			id: `${leftHeaderGroups[index]?.id ?? ''}|${headerGroup.id}|${rightHeaderGroups[index]?.id ?? ''}`,
-			headers: [
-				...(leftHeaderGroups[index]?.headers ?? []),
-				...headerGroup.headers,
-				...(rightHeaderGroups[index]?.headers ?? [])
-			]
-		}));
-	});
-	const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
-	const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
-	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 visibleLeafColumns = $derived.by(() => {
-		const { columnVisibility } = getReactiveTableState(table);
-		void columnVisibility;
-		return table.getVisibleLeafColumns();
-	});
-	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" bind:this={scrollContainerRef}>
-		<table
-			class="table-fixed border-separate border-spacing-0 text-sm"
-			style="display: grid; {tableSizeStyle(table, isRowSelectionEnabled)}"
-		>
-			{#if caption}
-				<caption class="sr-only">{caption}</caption>
-			{/if}
-			<DataTableHead
-				{table}
-				{headerGroups}
-				{headerGroupCount}
-				{isRowSelectionEnabled}
-				{isMultiRowSelectionEnabled}
-				{allRowsSelectionState}
-				isVirtual
-			/>
-			{#if scrollContainerRef}
-				<DataTableVirtualRows
-					rows={rowModel.rows}
-					scrollContainer={scrollContainerRef}
-					{isRowSelectionEnabled}
-					{table}
-					{emptyMessage}
-					{onRowClick}
-					{onRowDoubleClick}
-				/>
-			{/if}
-			{#if hasFooter}
-				<DataTableFoot
-					{table}
-					{visibleLeafColumns}
-					rows={rowModel.rows}
-					{isRowSelectionEnabled}
-					hasGrowColumn={false}
-					isVirtual
-				/>
-			{/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/virtual/data-table-virtualized.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 DataTableVirtualized: $$IsomorphicComponent;
-type DataTableVirtualized<T extends RowData> = InstanceType<typeof DataTableVirtualized<T>>;
-export default DataTableVirtualized;

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

@@ -1,3 +0,0 @@
-export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
-export type { CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase } from '../index';

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

@@ -1,2 +0,0 @@
-export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';