compote-ui 0.31.1 → 0.33.0

package/dist/components/checkbox/checkbox.svelte

@@ -1,26 +1,51 @@
 <script lang="ts">
 	import { Checkbox } from '@ark-ui/svelte/checkbox';
+	import { cn } from 'tailwind-variants';
 	import type { CheckboxProps as Props } from './checkbox.types.js';
 	import { PhCheck, PhMinus } from '../../icons';
 
-	let { checked = $bindable(), label, children, ...rest }: Props = $props();
+	let {
+		checked = $bindable(),
+		label,
+		children,
+		size = 'md',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const checkboxSize = {
+		sm: {
+			control: 'size-4',
+			icon: 'size-3'
+		},
+		md: {
+			control: 'size-5',
+			icon: 'size-3.5'
+		}
+	};
 </script>
 
 <Checkbox.Root
 	bind:checked
-	class="inline-flex cursor-pointer gap-2 {children ? 'items-start' : 'items-center'}"
+	class={cn(
+		'inline-flex cursor-pointer gap-2 leading-none',
+		children ? 'items-start' : 'items-center',
+		className
+	)}
 	{...rest}
 >
 	<Checkbox.Control
-		class="{children
-			? 'mt-0.5'
-			: ''} flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
+		class={cn(
+			children ? 'mt-0.5' : '',
+			checkboxSize[size].control,
+			'relative grid shrink-0 place-items-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary'
+		)}
 	>
-		<Checkbox.Indicator>
-			<PhCheck class="size-3.5 text-ink-inverse" />
+		<Checkbox.Indicator class="absolute inset-0 grid place-items-center leading-none">
+			<PhCheck class={cn(checkboxSize[size].icon, 'block text-ink-inverse')} />
 		</Checkbox.Indicator>
-		<Checkbox.Indicator indeterminate>
-			<PhMinus class="size-3.5 text-ink-inverse" />
+		<Checkbox.Indicator indeterminate class="absolute inset-0 grid place-items-center leading-none">
+			<PhMinus class={cn(checkboxSize[size].icon, 'block text-ink-inverse')} />
 		</Checkbox.Indicator>
 	</Checkbox.Control>
 	{#if label}

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

@@ -1,6 +1,9 @@
-import type { CheckboxRootBaseProps } from '@ark-ui/svelte/checkbox';
+import type { CheckboxRootProps } from '@ark-ui/svelte/checkbox';
 import type { Snippet } from 'svelte';
-export interface CheckboxProps extends Omit<CheckboxRootBaseProps, 'children' | 'asChild' | 'ref'> {
+import type { ClassValue } from 'tailwind-variants';
+export interface CheckboxProps extends Omit<CheckboxRootProps, 'children' | 'asChild' | 'class' | 'ref'> {
+    class?: ClassValue;
     label?: string;
+    size?: 'sm' | 'md';
     children?: Snippet;
 }

package/dist/components/data-table/core/cells.d.ts

@@ -0,0 +1,78 @@
+import type { AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellData, ColumnDef, DisplayColumnDef, GroupColumnDef, RowData } from '@tanstack/svelte-table';
+import type { DataTableFeatures } from './create-table.svelte';
+type NumericFormat = {
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    fractionDigits?: number;
+};
+export type DataTableCellConfig<TData extends RowData = RowData, TValue = unknown> = ({
+    type: 'text';
+} & {
+    fallback?: string;
+}) | ({
+    type: 'number';
+} & NumericFormat) | ({
+    type: 'currency';
+    currency: string;
+    currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
+} & NumericFormat) | ({
+    type: 'percentage';
+} & NumericFormat) | {
+    type: 'boolean';
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+} | {
+    type: 'link';
+    href?: string | ((value: TValue, row: TData) => string);
+    target?: HTMLAnchorElement['target'];
+    fallback?: string;
+};
+export type DataTableCellType<TData extends RowData = RowData, TValue = unknown> = DataTableCellConfig<TData, TValue> | Exclude<DataTableCellConfig<TData, TValue>['type'], 'currency' | 'link'>;
+export type DataTableColumnMeta<TData extends RowData = RowData, TValue = unknown> = {
+    dataTable?: {
+        align?: DataTableColumnAlign;
+        cell?: DataTableCellConfig<TData, TValue>;
+        filter?: DataTableFilterConfig<TValue>;
+        hasCustomCell?: boolean;
+    };
+};
+export type DataTableColumnAlign = 'left' | 'center' | 'right';
+export type DataTableFilterOption<TValue = unknown> = {
+    label: string;
+    value: TValue;
+};
+export type DataTableFilterConfig<TValue = unknown> = {
+    type: 'text';
+    placeholder?: string;
+} | {
+    type: 'facet';
+    options?: DataTableFilterOption<TValue>[];
+    maxOptions?: number;
+} | {
+    type: 'number-range';
+    min?: number;
+    max?: number;
+    step?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+} | {
+    type: 'boolean';
+    trueLabel?: string;
+    falseLabel?: string;
+};
+export type DataTableFilterType<TValue = unknown> = DataTableFilterConfig<TValue> | DataTableFilterConfig<TValue>['type'];
+type DataTableColumnDefOptions<TData extends RowData, TValue> = {
+    align?: DataTableColumnAlign;
+    cellType?: DataTableCellType<TData, TValue>;
+    filter?: DataTableFilterType<TValue>;
+};
+export type DataTableColumnDef<TData extends RowData, TValue extends CellData = CellData> = (AccessorKeyColumnDef<DataTableFeatures, TData, TValue> & DataTableColumnDefOptions<TData, TValue>) | (AccessorFnColumnDef<DataTableFeatures, TData, TValue> & DataTableColumnDefOptions<TData, TValue>) | (DisplayColumnDef<DataTableFeatures, TData, TValue> & DataTableColumnDefOptions<TData, TValue>) | (Omit<GroupColumnDef<DataTableFeatures, TData, TValue>, 'columns'> & DataTableColumnDefOptions<TData, TValue> & {
+    columns?: DataTableColumnDef<TData, CellData>[];
+});
+export type DataTableCell<TData extends RowData = RowData, TValue = unknown> = Cell<DataTableFeatures, TData, TValue>;
+export declare function getDataTableCellConfig<TData extends RowData, TValue>(cell: DataTableCell<TData, TValue>): DataTableCellConfig<TData, TValue> | undefined;
+export declare function getDataTableFilterConfig<TData extends RowData, TValue>(columnDef: ColumnDef<DataTableFeatures, TData, TValue>): DataTableFilterConfig<TValue> | undefined;
+export declare function hasCustomDataTableCell<TData extends RowData, TValue>(cell: DataTableCell<TData, TValue>): boolean;
+export declare function normalizeDataTableColumns<TData extends RowData>(columns: DataTableColumnDef<TData>[]): ColumnDef<DataTableFeatures, TData, CellData>[];
+export {};

package/dist/components/data-table/core/cells.js

@@ -0,0 +1,66 @@
+export function getDataTableCellConfig(cell) {
+    return cell.column.columnDef.meta?.dataTable
+        ?.cell;
+}
+export function getDataTableFilterConfig(columnDef) {
+    return columnDef.meta?.dataTable?.filter;
+}
+export function hasCustomDataTableCell(cell) {
+    return (cell.column.columnDef.meta?.dataTable
+        ?.hasCustomCell ?? false);
+}
+export function normalizeDataTableColumns(columns) {
+    return columns.map((columnDef) => {
+        const { cellType, filter, align, columns: childColumns, meta, ...column } = columnDef;
+        const cell = normalizeDataTableCellType(cellType);
+        const filterConfig = normalizeDataTableFilterType(filter);
+        const hasCustomCell = 'cell' in column;
+        const filterFn = 'filterFn' in column ? column.filterFn : getDefaultDataTableFilterFn(filterConfig);
+        const nextMeta = cell || align || filterConfig
+            ? {
+                ...(meta ?? {}),
+                dataTable: {
+                    ...(meta?.dataTable ?? {}),
+                    ...(align ? { align } : {}),
+                    ...(cell ? { cell } : {}),
+                    ...(filterConfig ? { filter: filterConfig } : {}),
+                    hasCustomCell
+                }
+            }
+            : meta;
+        return {
+            ...column,
+            ...(childColumns ? { columns: normalizeDataTableColumns(childColumns) } : {}),
+            ...(filterFn ? { filterFn } : {}),
+            ...(nextMeta ? { meta: nextMeta } : {})
+        };
+    });
+}
+function normalizeDataTableCellType(cellType) {
+    if (!cellType)
+        return undefined;
+    return typeof cellType === 'string' ? { type: cellType } : cellType;
+}
+function normalizeDataTableFilterType(filter) {
+    if (!filter)
+        return undefined;
+    return typeof filter === 'string' ? { type: filter } : filter;
+}
+function getDefaultDataTableFilterFn(filter) {
+    if (!filter)
+        return undefined;
+    if (filter.type === 'facet')
+        return dataTableFacetFilter;
+    if (filter.type === 'number-range')
+        return 'inNumberRange';
+    if (filter.type === 'boolean')
+        return 'equals';
+    return 'includesString';
+}
+const dataTableFacetFilter = (row, columnId, filterValue) => {
+    if (!Array.isArray(filterValue) || filterValue.length === 0)
+        return true;
+    const value = row.getValue(columnId);
+    return filterValue.some((filterItem) => Object.is(filterItem, value));
+};
+dataTableFacetFilter.autoRemove = (filterValue) => !Array.isArray(filterValue) || filterValue.length === 0;

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

@@ -0,0 +1,24 @@
+import type { RowData, SvelteTable, TableOptions, TableState, Updater } from '@tanstack/svelte-table';
+import { type DataTableColumnDef } from './cells';
+declare const dataTableFeatures: {
+    columnFilteringFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFilteringFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnFacetingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnFacetingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnVisibilityFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnSizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    columnResizingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").ColumnResizingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSelectionFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+    rowSortingFeature: import("@tanstack/table-core").TableFeature<import("@tanstack/table-core").RowSortingFeatureConstructors<import("@tanstack/table-core").TableFeatures, RowData>>;
+};
+export type DataTableFeatures = typeof dataTableFeatures;
+type DataTableData<TData extends RowData> = ReadonlyArray<TData> | (() => ReadonlyArray<TData>);
+export type DataTableSelectedState = Pick<TableState<DataTableFeatures>, 'columnFilters' | 'columnResizing' | 'columnVisibility' | 'rowSelection' | 'sorting'>;
+export type DataTableOptions<TData extends RowData> = Omit<TableOptions<DataTableFeatures, TData>, '_features' | 'data' | 'columns'> & {
+    data: DataTableData<TData>;
+    columns: DataTableColumnDef<TData>[];
+} & Partial<Pick<TableOptions<DataTableFeatures, TData>, '_features'>>;
+export type DataTable<TData extends RowData, TSelected = DataTableSelectedState> = SvelteTable<DataTableFeatures, TData, TSelected> & {
+    setData: (data: ReadonlyArray<TData>) => void;
+    updateData: (updater: Updater<ReadonlyArray<TData>>) => void;
+};
+export declare function createDataTable<TData extends RowData, TSelected = DataTableSelectedState>(options: DataTableOptions<TData>, selector?: (state: TableState<DataTableFeatures>) => TSelected): DataTable<TData, TSelected>;
+export {};

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

@@ -0,0 +1,74 @@
+import { columnFacetingFeature, columnFilteringFeature, columnVisibilityFeature, columnResizingFeature, columnSizingFeature, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createCoreRowModel, createFilteredRowModel, createSortedRowModel, createTable as createTanStackTable, filterFns, functionalUpdate, rowSortingFeature, rowSelectionFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
+import { normalizeDataTableColumns } from './cells';
+const dataTableFeatures = tableFeatures({
+    columnFilteringFeature,
+    columnFacetingFeature,
+    columnVisibilityFeature,
+    columnSizingFeature,
+    columnResizingFeature,
+    rowSelectionFeature,
+    rowSortingFeature
+});
+const dataTableStateSelector = (state) => ({
+    columnFilters: state.columnFilters,
+    columnResizing: state.columnResizing,
+    columnVisibility: state.columnVisibility,
+    rowSelection: state.rowSelection,
+    sorting: state.sorting
+});
+class DataTableState {
+    #options = $state.raw({});
+    #table;
+    #columns;
+    constructor(options, selector) {
+        this.#options = options;
+        this.#columns = normalizeDataTableColumns(options.columns);
+        const getData = () => this.#getData();
+        this.#table = createTanStackTable({
+            ...options,
+            columns: this.#columns,
+            enableRowSelection: options.enableRowSelection ?? false,
+            get data() {
+                return getData();
+            },
+            _features: options._features ?? dataTableFeatures,
+            _rowModels: {
+                coreRowModel: createCoreRowModel(),
+                filteredRowModel: createFilteredRowModel(filterFns),
+                facetedRowModel: createFacetedRowModel(),
+                facetedUniqueValues: createFacetedUniqueValues(),
+                facetedMinMaxValues: createFacetedMinMaxValues(),
+                sortedRowModel: createSortedRowModel(sortFns),
+                ...options._rowModels
+            }
+        }, selector ?? dataTableStateSelector);
+    }
+    get table() {
+        const table = this.#table;
+        table.setData = (data) => {
+            this.setData(data);
+        };
+        table.updateData = (updater) => {
+            this.updateData(updater);
+        };
+        return table;
+    }
+    setData(data) {
+        this.#options = {
+            ...this.#options,
+            data
+        };
+    }
+    updateData(updater) {
+        this.setData(functionalUpdate(updater, this.#getData()));
+    }
+    #resolveData(data) {
+        return typeof data === 'function' ? data() : data;
+    }
+    #getData() {
+        return this.#resolveData(this.#options.data);
+    }
+}
+export function createDataTable(options, selector) {
+    return new DataTableState(options, selector).table;
+}

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

@@ -0,0 +1,3 @@
+export { createDataTable } from './create-table.svelte';
+export type { DataTable, DataTableFeatures, DataTableOptions, DataTableSelectedState } from './create-table.svelte';
+export { getDataTableCellConfig, getDataTableFilterConfig, hasCustomDataTableCell, normalizeDataTableColumns, type DataTableCell, type DataTableCellConfig, type DataTableCellType, type DataTableColumnAlign, type DataTableColumnDef, type DataTableColumnMeta, type DataTableFilterConfig, type DataTableFilterOption, type DataTableFilterType } from './cells';

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

@@ -0,0 +1,2 @@
+export { createDataTable } from './create-table.svelte';
+export { getDataTableCellConfig, getDataTableFilterConfig, hasCustomDataTableCell, normalizeDataTableColumns } from './cells';

package/dist/components/data-table/data-table-column-visibility.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" generics="TData extends RowData, TSelected = object">
+	import * as Popover from '../popover';
+	import * as ScrollArea from '../scroll-area';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { Column, RowData } from '@tanstack/svelte-table';
+	import type { DataTable, DataTableFeatures, DataTableSelectedState } from './core';
+
+	type Props = {
+		table: DataTable<TData, TSelected>;
+		triggerLabel?: string;
+	};
+
+	let { table, triggerLabel = 'Columns' }: Props = $props();
+
+	const columnVisibility = $derived(
+		(table.state as unknown as DataTableSelectedState).columnVisibility
+	);
+	const allColumnsVisible = $derived(table.getIsAllColumnsVisible());
+	const someColumnsVisible = $derived(
+		table.getAllLeafColumns().some((column) => column.getCanHide() && column.getIsVisible())
+	);
+	const allColumnsVisibilityState = $derived(
+		allColumnsVisible ? true : someColumnsVisible ? 'indeterminate' : false
+	);
+
+	function getColumnLabel(column: Column<DataTableFeatures, TData, unknown>) {
+		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+	}
+
+	function getColumnIsVisible(
+		column: Column<DataTableFeatures, TData, unknown>,
+		visibilityState: unknown
+	) {
+		void visibilityState;
+		return column.getIsVisible();
+	}
+</script>
+
+<Popover.Root positioning={{ placement: 'bottom-end' }}>
+	<Popover.Trigger
+		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+	>
+		{triggerLabel}
+	</Popover.Trigger>
+
+	<Popover.Content class="w-56 p-2" showArrow={false}>
+		<div class="border-b border-surface-3 px-2 pb-2">
+			<Checkbox
+				size="sm"
+				label="All columns"
+				checked={allColumnsVisibilityState}
+				onCheckedChange={({ checked }) => table.toggleAllColumnsVisible(checked === true)}
+			/>
+		</div>
+
+		<ScrollArea.Root class="h-72">
+			<ScrollArea.Viewport>
+				<ScrollArea.Content class="py-1 pe-3">
+					<div class="flex flex-col">
+						{#each table.getAllLeafColumns() as column (column.id)}
+							<Checkbox
+								size="md"
+								label={getColumnLabel(column)}
+								class="min-h-8 rounded-sm px-2 hover:bg-surface-2"
+								checked={getColumnIsVisible(column, columnVisibility)}
+								disabled={!column.getCanHide()}
+								onCheckedChange={({ checked }) => column.toggleVisibility(checked === true)}
+							/>
+						{/each}
+					</div>
+				</ScrollArea.Content>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar orientation="vertical">
+				<ScrollArea.Thumb />
+			</ScrollArea.Scrollbar>
+			<ScrollArea.Corner />
+		</ScrollArea.Root>
+	</Popover.Content>
+</Popover.Root>

package/dist/components/data-table/data-table-column-visibility.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { DataTable } from './core';
+declare function $$render<TData extends RowData, TSelected = object>(): {
+    props: {
+        table: DataTable<TData, TSelected>;
+        triggerLabel?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData, TSelected = object> {
+    props(): ReturnType<typeof $$render<TData, TSelected>>['props'];
+    events(): ReturnType<typeof $$render<TData, TSelected>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TSelected>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends RowData, TSelected = object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TSelected>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TSelected>['props']>, ReturnType<__sveltets_Render<TData, TSelected>['events']>, ReturnType<__sveltets_Render<TData, TSelected>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TSelected>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
+    <TData extends RowData, TSelected = object>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TSelected>['props']> & {}): ReturnType<__sveltets_Render<TData, TSelected>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DataTableColumnVisibility: $$IsomorphicComponent;
+type DataTableColumnVisibility<TData extends RowData, TSelected = object> = InstanceType<typeof DataTableColumnVisibility<TData, TSelected>>;
+export default DataTableColumnVisibility;