compote-ui 0.56.0 → 0.57.0

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

@@ -1,33 +0,0 @@
-import type { Column, Row, RowData } from '@tanstack/table-core';
-import type { DataTableInstance } from './data-table-utils';
-declare function $$render<T extends RowData>(): {
-    props: {
-        table: DataTableInstance<T>;
-        visibleLeafColumns: Column<T, unknown>[];
-        rows: Row<T>[];
-        isRowSelectionEnabled: boolean;
-        hasGrowColumn: boolean;
-        isVirtual?: boolean;
-    };
-    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 DataTableFoot: $$IsomorphicComponent;
-type DataTableFoot<T extends RowData> = InstanceType<typeof DataTableFoot<T>>;
-export default DataTableFoot;

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

@@ -1,196 +0,0 @@
-<script lang="ts" generics="T extends RowData">
-	import type { HeaderGroup, RowData } from '@tanstack/table-core';
-	import { cn } from 'tailwind-variants';
-	import { PhCaretDown, PhCaretUp } from '../../icons';
-	import type { DataTableInstance } from './data-table-utils';
-	import FlexRender from './flex-render.svelte';
-	import {
-		alignClass,
-		getColumnMeta,
-		getHeaderAriaSort,
-		getHeaderSortDirection,
-		getHeaderSortLabel,
-		getPinningStyle,
-		joinStyles,
-		justifyClass,
-		resizeHandleClass,
-		resizeHandleStyle,
-		sortButtonDirectionClass,
-		virtualColumnSizeStyle,
-		virtualGroupWithGrowSizeStyle,
-		virtualGrowColumnSizeStyle,
-		virtualSelectionColumnSizeStyle
-	} from './data-table-utils';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		headerGroups: HeaderGroup<T>[];
-		headerGroupCount: number;
-		isRowSelectionEnabled: boolean;
-		isMultiRowSelectionEnabled: boolean;
-		allRowsSelectionState: boolean | 'indeterminate';
-		isVirtual?: boolean;
-		hasGrowColumn?: boolean;
-	};
-
-	let {
-		table,
-		headerGroups,
-		headerGroupCount,
-		isRowSelectionEnabled,
-		isMultiRowSelectionEnabled,
-		allRowsSelectionState,
-		isVirtual = false,
-		hasGrowColumn = false
-	}: Props = $props();
-
-	type Header = HeaderGroup<T>['headers'][number];
-
-	function findGrowLeafHeader(header: Header): Header | undefined {
-		if (header.subHeaders.length === 0) {
-			return getColumnMeta(header.column.columnDef)?.grow ? header : undefined;
-		}
-		for (const sub of header.subHeaders) {
-			const found = findGrowLeafHeader(sub);
-			if (found) return found;
-		}
-		return undefined;
-	}
-
-	function headerCellStyle(header: Header) {
-		const canPinHeader = header.subHeaders.length === 0;
-
-		let virtualSizeStyle: string | undefined;
-		if (isVirtual) {
-			const isGrowLeaf = canPinHeader && getColumnMeta(header.column.columnDef)?.grow;
-			if (isGrowLeaf) {
-				virtualSizeStyle = virtualGrowColumnSizeStyle();
-			} else {
-				const growLeaf = findGrowLeafHeader(header);
-				virtualSizeStyle = growLeaf
-					? virtualGroupWithGrowSizeStyle(header.getSize() - growLeaf.getSize())
-					: virtualColumnSizeStyle(header.getSize());
-			}
-		}
-
-		return joinStyles(
-			virtualSizeStyle,
-			canPinHeader ? getPinningStyle(header.column, table, true, isRowSelectionEnabled) : undefined
-		);
-	}
-
-	function selectionHeaderStyle() {
-		return isVirtual
-			? joinStyles(
-					virtualSelectionColumnSizeStyle(),
-					'min-width: 40px',
-					'max-width: 40px',
-					'position: sticky',
-					'left: 0',
-					'z-index: 30'
-				)
-			: 'width: 40px; min-width: 40px; max-width: 40px; position: sticky; left: 0; z-index: 15';
-	}
-
-	function headerRowStyle() {
-		if (!isVirtual) return undefined;
-		return joinStyles('display: flex', 'width: 100%');
-	}
-
-	function shouldRenderSelectionCheckbox(headerGroupIndex: number) {
-		if (!isMultiRowSelectionEnabled) return false;
-		return headerGroupIndex === headerGroupCount - 1;
-	}
-</script>
-
-<thead
-	class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim"
-	style={isVirtual ? 'display: grid; position: sticky; top: 0; z-index: 20' : undefined}
->
-	{#each headerGroups as headerGroup, headerGroupIndex (`${headerGroup.id}:${headerGroup.headers.map((header) => `${header.id}:${header.colSpan}`).join('|')}`)}
-		{@const visibleHeaders = headerGroup.headers.filter((header) => header.colSpan > 0)}
-		<tr class="h-9" style={headerRowStyle()}>
-			{#if isRowSelectionEnabled}
-				<th
-					class={cn(
-						'h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 text-center align-middle leading-5 font-medium',
-						isVirtual && 'items-center justify-center'
-					)}
-					style={selectionHeaderStyle()}
-				>
-					{#if shouldRenderSelectionCheckbox(headerGroupIndex)}
-						<input
-							type="checkbox"
-							aria-label="Select all rows"
-							class="table-checkbox mx-auto block size-4"
-							checked={allRowsSelectionState === true}
-							indeterminate={allRowsSelectionState === 'indeterminate'}
-							onchange={(e) => table.toggleAllRowsSelected(e.currentTarget.checked)}
-						/>
-					{/if}
-				</th>
-			{/if}
-			{#each visibleHeaders as header, headerIndex (`${header.id}:${header.colSpan}:${header.column.getIsVisible()}`)}
-				{@const columnDef = getColumnMeta(header.column.columnDef)}
-				{@const sortDirection = getHeaderSortDirection(header)}
-				<th
-					class={cn(
-						'relative h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
-						isVirtual && 'items-center',
-						isVirtual && justifyClass(columnDef?.align),
-						alignClass(columnDef?.align)
-					)}
-					colspan={header.colSpan}
-					aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
-					style={headerCellStyle(header)}
-				>
-					{#if !header.isPlaceholder}
-						{#if header.column.getCanSort()}
-							<button
-								type="button"
-								class={cn(
-									'inline-flex max-w-full appearance-none items-center gap-1 rounded-sm border-0 bg-transparent p-0 align-middle text-sm leading-5 text-inherit outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
-									justifyClass(columnDef?.align),
-									sortButtonDirectionClass(columnDef?.align)
-								)}
-								aria-label={`${getHeaderSortLabel(sortDirection)}. Toggle sorting.`}
-								onclick={header.column.getToggleSortingHandler()}
-							>
-								<span class="min-w-0 truncate">
-									<FlexRender
-										content={header.column.columnDef.header}
-										context={header.getContext()}
-									/>
-								</span>
-								<span
-									class="inline-flex size-3.5 shrink-0 items-center justify-center text-ink-dim"
-								>
-									{#if sortDirection === 'asc'}
-										<PhCaretUp class="size-3.5" />
-									{:else if sortDirection === 'desc'}
-										<PhCaretDown class="size-3.5" />
-									{/if}
-								</span>
-							</button>
-						{:else}
-							<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
-						{/if}
-					{/if}
-					{#if header.column.getCanResize()}
-						<div
-							aria-hidden="true"
-							class={resizeHandleClass(headerIndex, visibleHeaders.length)}
-							style={resizeHandleStyle(table, header)}
-							ondblclick={() => header.column.resetSize()}
-							onmousedown={header.getResizeHandler()}
-							ontouchstart={header.getResizeHandler()}
-						></div>
-					{/if}
-				</th>
-			{/each}
-			{#if !isVirtual && !hasGrowColumn}
-				<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
-			{/if}
-		</tr>
-	{/each}
-</thead>

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

@@ -1,35 +0,0 @@
-import type { HeaderGroup, RowData } from '@tanstack/table-core';
-import type { DataTableInstance } from './data-table-utils';
-declare function $$render<T extends RowData>(): {
-    props: {
-        table: DataTableInstance<T>;
-        headerGroups: HeaderGroup<T>[];
-        headerGroupCount: number;
-        isRowSelectionEnabled: boolean;
-        isMultiRowSelectionEnabled: boolean;
-        allRowsSelectionState: boolean | "indeterminate";
-        isVirtual?: boolean;
-        hasGrowColumn?: boolean;
-    };
-    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 DataTableHead: $$IsomorphicComponent;
-type DataTableHead<T extends RowData> = InstanceType<typeof DataTableHead<T>>;
-export default DataTableHead;

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

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type ClassValue } from 'tailwind-variants';
-
-	type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
-		class?: ClassValue;
-		children?: Snippet;
-	};
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<h2 class={cn('text-lg font-semibold text-ink', className)} {...rest}>
-	{@render children?.()}
-</h2>

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

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type ClassValue } from 'tailwind-variants';
-type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
-    class?: ClassValue;
-    children?: Snippet;
-};
-declare const DataTableTitle: import("svelte").Component<Props, {}, "">;
-type DataTableTitle = ReturnType<typeof DataTableTitle>;
-export default DataTableTitle;

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

@@ -1,32 +0,0 @@
-import type { Column, Header, Row, RowData, Table, TableState, VisibilityState } from '@tanstack/table-core';
-import type { DataTableColumnMeta } from './types';
-export type DataTableInstance<T extends RowData> = Table<T>;
-export declare function getReactiveTableState<T extends RowData>(table: DataTableInstance<T>): TableState;
-export declare function alignClass(align: DataTableColumnMeta['align']): "text-right" | "text-center" | "text-left";
-export declare function justifyClass(align: DataTableColumnMeta['align']): "justify-end" | "justify-center" | "justify-start";
-export declare function sortButtonDirectionClass(align: DataTableColumnMeta['align']): "flex-row-reverse" | "flex-row";
-export declare function columnSizeStyle(size: number): string;
-export declare function selectionColumnSizeStyle(): string;
-export declare function virtualColumnSizeStyle(size: number): string;
-export declare function virtualSelectionColumnSizeStyle(): string;
-export declare function tableSizeStyle<T extends RowData>(table: DataTableInstance<T>, isRowSelectionEnabled: boolean): string;
-export declare function virtualGrowColumnSizeStyle(): string;
-export declare function virtualGroupWithGrowSizeStyle(fixedPortion: number): string;
-export declare function resizeHandleStyle<T extends RowData>(table: DataTableInstance<T>, header: Header<T, unknown>): string | undefined;
-export declare function resizeHandleClass(headerIndex: number, headerCount: number): import("tailwind-variants").CnReturn;
-export declare function getHeaderSortDirection<T extends RowData>(header: Header<T, unknown>): false | import("@tanstack/table-core").SortDirection;
-export declare function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc'): "Sorted ascending" | "Sorted descending" | "Not sorted";
-export declare function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc'): "none" | "ascending" | "descending";
-export declare function getAllRowsSelectionState<T extends RowData>(table: DataTableInstance<T>): boolean | 'indeterminate';
-export declare function getRowSelectionState<T extends RowData>(table: DataTableInstance<T>, rowId: string): boolean;
-export declare function getReactiveCells<T extends RowData>(row: Row<T>, columnVisibility: VisibilityState): import("@tanstack/table-core").Cell<T, unknown>[];
-export declare function getSelectedRowCount<T extends RowData>(table: DataTableInstance<T>): number;
-export declare function getBooleanCellValue(value: unknown): boolean | undefined;
-export declare function getPinningStyle<T extends RowData>(column: Column<T, unknown>, table: DataTableInstance<T>, isHeader?: boolean, isRowSelectionEnabled?: boolean): string | undefined;
-export declare function getUrlCellValue(value: unknown): string | undefined;
-export declare function openUrlCell(value: string): void;
-export declare function getColumnMeta(columnDef: {
-    meta?: unknown;
-}): DataTableColumnMeta | undefined;
-export declare function joinStyles(...styles: Array<string | undefined>): string;
-export declare function formatColumnFooter(meta: DataTableColumnMeta, values: unknown[], locale: string): string | undefined;

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

@@ -1,160 +0,0 @@
-import { cn } from 'tailwind-variants';
-export function getReactiveTableState(table) {
-    return table._svelteState ?? table.getState();
-}
-export function alignClass(align) {
-    return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
-}
-export function justifyClass(align) {
-    return align === 'right'
-        ? 'justify-end'
-        : align === 'center'
-            ? 'justify-center'
-            : 'justify-start';
-}
-export function sortButtonDirectionClass(align) {
-    return align === 'right' ? 'flex-row-reverse' : 'flex-row';
-}
-export function columnSizeStyle(size) {
-    return `width: ${size}px`;
-}
-export function selectionColumnSizeStyle() {
-    return 'width: 40px';
-}
-export function virtualColumnSizeStyle(size) {
-    return `display: flex; flex: 0 0 ${size}px; width: ${size}px`;
-}
-export function virtualSelectionColumnSizeStyle() {
-    return 'display: flex; flex: 0 0 40px; width: 40px';
-}
-export function tableSizeStyle(table, isRowSelectionEnabled) {
-    return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
-}
-export function virtualGrowColumnSizeStyle() {
-    return 'display: flex; flex: 1; min-width: 0';
-}
-export function virtualGroupWithGrowSizeStyle(fixedPortion) {
-    return `display: flex; flex: 1 0 ${fixedPortion}px; width: ${fixedPortion}px`;
-}
-export function resizeHandleStyle(table, header) {
-    if (table.options.columnResizeMode !== 'onEnd')
-        return undefined;
-    const deltaOffset = table.getState().columnSizingInfo.deltaOffset;
-    if (!header.column.getIsResizing() || deltaOffset === null)
-        return undefined;
-    return `transform: translateX(${deltaOffset}px)`;
-}
-export function resizeHandleClass(headerIndex, headerCount) {
-    return cn('absolute top-0 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none before:h-4 before:w-px before:bg-border before:content-[""]', headerIndex === headerCount - 1 ? 'right-0' : '-right-1');
-}
-export function getHeaderSortDirection(header) {
-    return header.column.getIsSorted();
-}
-export function getHeaderSortLabel(sortDirection) {
-    if (sortDirection === 'asc')
-        return 'Sorted ascending';
-    if (sortDirection === 'desc')
-        return 'Sorted descending';
-    return 'Not sorted';
-}
-export function getHeaderAriaSort(sortDirection) {
-    if (sortDirection === 'asc')
-        return 'ascending';
-    if (sortDirection === 'desc')
-        return 'descending';
-    return 'none';
-}
-export function getAllRowsSelectionState(table) {
-    const allRowsSelected = table.getIsAllRowsSelected();
-    const someRowsSelected = table.getIsSomeRowsSelected();
-    return allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false;
-}
-export function getRowSelectionState(table, rowId) {
-    return table.getRow(rowId).getIsSelected();
-}
-export function getReactiveCells(row, columnVisibility) {
-    void columnVisibility;
-    return [
-        ...row.getLeftVisibleCells(),
-        ...row.getCenterVisibleCells(),
-        ...row.getRightVisibleCells()
-    ];
-}
-export function getSelectedRowCount(table) {
-    return table.getSelectedRowModel().rows.length;
-}
-export function getBooleanCellValue(value) {
-    if (value === true)
-        return true;
-    if (value === false)
-        return false;
-    return undefined;
-}
-export function getPinningStyle(column, table, isHeader = false, isRowSelectionEnabled = false) {
-    const isPinned = column.getIsPinned();
-    if (!isPinned)
-        return undefined;
-    const zIndex = isHeader ? 15 : 1;
-    const selectionOffset = isRowSelectionEnabled ? 40 : 0;
-    if (isPinned === 'left') {
-        const left = column.getStart('left') + selectionOffset;
-        const leftCols = table.getLeftLeafColumns();
-        const isLastLeft = leftCols[leftCols.length - 1]?.id === column.id;
-        const shadow = !isHeader && isLastLeft
-            ? 'box-shadow: -4px 0 4px -4px var(--compote-border) inset'
-            : undefined;
-        return ['position: sticky', `z-index: ${zIndex}`, `left: ${left}px`, shadow]
-            .filter(Boolean)
-            .join('; ');
-    }
-    else {
-        const right = column.getAfter('right');
-        const rightCols = table.getRightLeafColumns();
-        const isFirstRight = rightCols[0]?.id === column.id;
-        const shadow = !isHeader && isFirstRight
-            ? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
-            : undefined;
-        return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]
-            .filter(Boolean)
-            .join('; ');
-    }
-}
-export function getUrlCellValue(value) {
-    if (typeof value !== 'string' || value.trim() === '')
-        return undefined;
-    return value;
-}
-export function openUrlCell(value) {
-    window.open(value, '_blank', 'noopener,noreferrer');
-}
-export function getColumnMeta(columnDef) {
-    return columnDef.meta;
-}
-export function joinStyles(...styles) {
-    return styles.filter(Boolean).join('; ');
-}
-const FOOTER_SUM_FORMAT_DEFAULTS = {
-    currency: { style: 'currency', currency: 'USD' },
-    percent: { style: 'percent' },
-    number: {}
-};
-export function formatColumnFooter(meta, values, locale) {
-    if (meta.footer) {
-        const result = meta.footer(values);
-        if (result === null || result === undefined)
-            return undefined;
-        return String(result);
-    }
-    if (meta.sum) {
-        const sum = values.reduce((acc, val) => acc + (typeof val === 'number' ? val : Number(val) || 0), 0);
-        const numDefaults = meta.type ? FOOTER_SUM_FORMAT_DEFAULTS[meta.type] : undefined;
-        if (numDefaults !== undefined) {
-            return new Intl.NumberFormat(meta.formatLocale ?? locale, {
-                ...numDefaults,
-                ...meta.formatOptions
-            }).format(sum);
-        }
-        return String(sum);
-    }
-    return undefined;
-}