compote-ui 0.82.0 → 0.84.0

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

@@ -1,4 +1,5 @@
 import type { RowData } from '@tanstack/svelte-table';
+import { type ClassValue } from 'tailwind-variants';
 import type { DataTableInstance } from '../data-table-utils';
 import type { DataTableViewState } from '../table-view-state.svelte';
 declare function $$render<T extends RowData>(): {
@@ -15,6 +16,7 @@ declare function $$render<T extends RowData>(): {
             row: T;
             event: MouseEvent;
         }) => void;
+        rowClass?: (row: T) => ClassValue;
     };
     exports: {};
     bindings: "";

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

@@ -18,6 +18,8 @@
 		headerFilters?: boolean;
 		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
 		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
+		/** Extra classes for a row's `<tr>`; `row` is `row.original`. */
+		rowClass?: (row: T) => ClassValue;
 	};
 
 	let {
@@ -28,6 +30,7 @@
 		headerFilters = false,
 		onRowClick,
 		onRowDoubleClick,
+		rowClass,
 		...rest
 	}: Props = $props();
 
@@ -64,6 +67,7 @@
 					{emptyMessage}
 					{onRowClick}
 					{onRowDoubleClick}
+					{rowClass}
 				/>
 			{/if}
 			{#if view.hasFooter}

package/dist/components/data-table-v9/virtual/data-table-virtualized.svelte.d.ts

@@ -18,6 +18,8 @@ declare function $$render<T extends RowData>(): {
             row: T;
             event: MouseEvent;
         }) => void;
+        /** Extra classes for a row's `<tr>`; `row` is `row.original`. */
+        rowClass?: (row: T) => ClassValue;
     };
     exports: {};
     bindings: "";

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

@@ -1,3 +1,3 @@
 export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, filterKindFor, getColumnFilterKind, getColumnLabel, renderComponent, renderSnippet, selectFilterOptions } from '../index';
-export type { ColumnFilterEditingOptions, ColumnFilterKind, CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnInstance, DataTableColumnOptions, DataTableColumnType, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase, FilterableColumn, SelectFilterOption, SelectFilterValue } from '../index';
+export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, Export, FlexRender, Refresh, Search, Title, Toolbar, createCsvExporter, createDataTableColumnHelper, createTable, csvExporter, filterKindFor, getColumnFilterKind, getColumnLabel, getExportColumns, getExportData, getExportRows, renderComponent, renderSnippet, selectFilterOptions } from '../index';
+export type { ColumnFilterEditingOptions, ColumnFilterKind, CreateDataTableOptions, CsvExporterOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnInstance, DataTableColumnOptions, DataTableColumnType, DataTableExportCell, DataTableExportColumn, DataTableExportContext, DataTableExportData, DataTableExporter, DataTableExportScope, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase, FilterableColumn, SelectFilterOption, SelectFilterValue } from '../index';

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

@@ -1,2 +1,2 @@
 export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, filterKindFor, getColumnFilterKind, getColumnLabel, renderComponent, renderSnippet, selectFilterOptions } from '../index';
+export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, Export, FlexRender, Refresh, Search, Title, Toolbar, createCsvExporter, createDataTableColumnHelper, createTable, csvExporter, filterKindFor, getColumnFilterKind, getColumnLabel, getExportColumns, getExportData, getExportRows, renderComponent, renderSnippet, selectFilterOptions } from '../index';

package/dist/components/data-table-v9/xlsx/index.d.ts

@@ -0,0 +1,24 @@
+import type { DataTableExportData } from '../export/export-data';
+import type { DataTableExporter } from '../export/types';
+import { type XlsxCell, type XlsxDateFormats } from './xlsx-cell';
+export { DEFAULT_XLSX_DATE_FORMATS, toXlsxCell, xlsxNumberFormat } from './xlsx-cell';
+export type { XlsxCell, XlsxDateFormats, XlsxDatePart } from './xlsx-cell';
+export type XlsxExporterOptions = Partial<XlsxDateFormats> & {
+    id?: string;
+    label?: string;
+    /** Sheet name (Excel allows 31 characters, without `[ ] : * ? / \`). */
+    sheet?: string;
+};
+/** The export data as sheet rows: a bold header row, then typed cells. */
+export declare function exportDataToSheet(data: DataTableExportData, formats?: XlsxDateFormats): XlsxCell[][];
+/**
+ * The export data as an .xlsx file. Loads `write-excel-file` (an optional peer dependency) on
+ * first call, so importing this module costs nothing until an export runs — and stays SSR-safe.
+ */
+export declare function exportDataToXlsxBlob(data: DataTableExportData, options?: XlsxExporterOptions): Promise<Blob>;
+/**
+ * An Excel exporter: numbers, dates and booleans as typed cells, formatted like the table.
+ * Needs `write-excel-file` installed.
+ */
+export declare function createXlsxExporter(options?: XlsxExporterOptions): DataTableExporter;
+export declare const xlsxExporter: DataTableExporter;

package/dist/components/data-table-v9/xlsx/index.js

@@ -0,0 +1,60 @@
+import { PhMicrosoftExcelLogo } from '../../../icons';
+import { downloadBlob } from '../../../utils/download';
+import { DEFAULT_XLSX_DATE_FORMATS, toXlsxCell } from './xlsx-cell';
+export { DEFAULT_XLSX_DATE_FORMATS, toXlsxCell, xlsxNumberFormat } from './xlsx-cell';
+// Roughly how many px a character of Excel's default font takes.
+const PX_PER_CHAR = 7;
+/** The export data as sheet rows: a bold header row, then typed cells. */
+export function exportDataToSheet(data, formats = DEFAULT_XLSX_DATE_FORMATS) {
+    const header = data.columns.map((column) => ({
+        type: String,
+        value: column.header,
+        fontWeight: 'bold'
+    }));
+    const rows = data.rows.map((cells) => data.columns.map((column, index) => {
+        const cell = cells[index];
+        return cell ? toXlsxCell(column, cell, formats) : null;
+    }));
+    return [header, ...rows];
+}
+/**
+ * The export data as an .xlsx file. Loads `write-excel-file` (an optional peer dependency) on
+ * first call, so importing this module costs nothing until an export runs — and stays SSR-safe.
+ */
+export async function exportDataToXlsxBlob(data, options = {}) {
+    const { default: writeXlsxFile } = await import('write-excel-file/browser');
+    const formats = { ...DEFAULT_XLSX_DATE_FORMATS, ...pickFormats(options) };
+    const sheetData = exportDataToSheet(data, formats);
+    // XlsxCell is a subset of the package's cell shape; cast via its own (type-only) type.
+    return writeXlsxFile(sheetData, {
+        sheet: options.sheet,
+        stickyRowsCount: 1,
+        columns: data.columns.map((column) => ({
+            width: Math.max(8, Math.round(column.size / PX_PER_CHAR))
+        }))
+    }).toBlob();
+}
+function pickFormats({ date, time, dateTime }) {
+    return {
+        ...(date !== undefined ? { date } : {}),
+        ...(time !== undefined ? { time } : {}),
+        ...(dateTime !== undefined ? { dateTime } : {})
+    };
+}
+/**
+ * An Excel exporter: numbers, dates and booleans as typed cells, formatted like the table.
+ * Needs `write-excel-file` installed.
+ */
+export function createXlsxExporter(options = {}) {
+    const { id = 'xlsx', label = 'Excel' } = options;
+    return {
+        id,
+        label,
+        icon: PhMicrosoftExcelLogo,
+        export: async ({ filename, getData }) => {
+            const blob = await exportDataToXlsxBlob(getData(), options);
+            downloadBlob(blob, `${filename}.xlsx`);
+        }
+    };
+}
+export const xlsxExporter = createXlsxExporter();

package/dist/components/data-table-v9/xlsx/xlsx-cell.d.ts

@@ -0,0 +1,51 @@
+import { type ZonedOrCalendarDate } from '../../../utils/date';
+import type { DataTableExportCell, DataTableExportColumn } from '../export/export-data';
+/** Excel number formats for date columns. */
+export type XlsxDateFormats = {
+    date: string;
+    time: string;
+    dateTime: string;
+};
+export declare const DEFAULT_XLSX_DATE_FORMATS: XlsxDateFormats;
+/**
+ * One sheet cell, in the shape `write-excel-file` takes. Declared here so the published types
+ * don't depend on the optional peer.
+ */
+export type XlsxCell = null | {
+    type: StringConstructor;
+    value: string;
+    fontWeight?: 'bold';
+} | {
+    type: NumberConstructor;
+    value: number;
+    format: string;
+} | {
+    type: DateConstructor;
+    value: Date;
+    format: string;
+} | {
+    type: BooleanConstructor;
+    value: boolean;
+};
+/**
+ * The Excel format string matching how the table shows `value`, or undefined when the
+ * column's Intl options have no faithful Excel equivalent (the cell is then written as text).
+ * Decimals are chosen per value, exactly as many as Intl shows (read from `formatToParts`, so
+ * Intl's own rounding decides): `#,##0.###` would leave a trailing `.` on whole numbers.
+ */
+export declare function xlsxNumberFormat(column: DataTableExportColumn, value: number): string | undefined;
+/** Which part of a date a column shows, and so which part Excel gets. */
+export type XlsxDatePart = 'date' | 'time' | 'date-time';
+/**
+ * The date as Excel should show it. Excel dates have no zone, and `write-excel-file` reads a
+ * `Date` in UTC, so the wall clock of the zone the table shows is written as UTC. A `date`
+ * column drops the time (midnight); a `time` column keeps only the time of day, on Excel's day
+ * zero (1899-12-30), so times sort and compare by time alone.
+ */
+export declare function toXlsxDate(date: ZonedOrCalendarDate, part?: XlsxDatePart): Date;
+/**
+ * One export cell as a typed sheet cell: numbers, dates and booleans stay computable in Excel;
+ * everything else — and any column with its own `cell` renderer but no `exportValue` — is the
+ * text the table shows. Typed cells can't hold formulas, so no `'` guard is needed.
+ */
+export declare function toXlsxCell(column: DataTableExportColumn, cell: DataTableExportCell, formats?: XlsxDateFormats): XlsxCell;

package/dist/components/data-table-v9/xlsx/xlsx-cell.js

@@ -0,0 +1,123 @@
+import { GregorianCalendar, toCalendar } from '@internationalized/date';
+import { readDateInZone } from '../../../utils/date';
+import { dateCellTimeZone } from '../date-cell';
+import { TYPE_NUMBER_FORMAT_DEFAULTS } from '../data-table-utils';
+export const DEFAULT_XLSX_DATE_FORMATS = {
+    date: 'dd.mm.yyyy',
+    time: 'hh:mm',
+    dateTime: 'dd.mm.yyyy hh:mm'
+};
+const NUMBER_TYPES = new Set(['number', 'currency', 'percent']);
+const DATE_TYPES = new Set(['date', 'time', 'date-time']);
+const isEmpty = (value) => value === null || value === undefined || value === '';
+function textCell(cell) {
+    return cell.text === '' ? null : { type: String, value: cell.text };
+}
+/**
+ * The Excel format string matching how the table shows `value`, or undefined when the
+ * column's Intl options have no faithful Excel equivalent (the cell is then written as text).
+ * Decimals are chosen per value, exactly as many as Intl shows (read from `formatToParts`, so
+ * Intl's own rounding decides): `#,##0.###` would leave a trailing `.` on whole numbers.
+ */
+export function xlsxNumberFormat(column, value) {
+    const defaults = column.type ? TYPE_NUMBER_FORMAT_DEFAULTS[column.type] : undefined;
+    let formatter;
+    try {
+        formatter = new Intl.NumberFormat(column.locale, {
+            ...defaults,
+            ...column.formatOptions
+        });
+    }
+    catch {
+        return undefined;
+    }
+    const resolved = formatter.resolvedOptions();
+    const unsupported = resolved.notation !== 'standard' ||
+        resolved.minimumSignificantDigits !== undefined ||
+        resolved.maximumSignificantDigits !== undefined ||
+        resolved.signDisplay !== 'auto' ||
+        resolved.minimumIntegerDigits !== 1 ||
+        (resolved.roundingIncrement ?? 1) !== 1 ||
+        // Excel display rounds half away from zero, which is Intl's `halfExpand` only.
+        (resolved.roundingMode ?? 'halfExpand') !== 'halfExpand' ||
+        resolved.style === 'unit' ||
+        (resolved.style === 'currency' &&
+            (resolved.currencyDisplay === 'name' || resolved.currencySign === 'accounting'));
+    if (unsupported)
+        return undefined;
+    const fraction = formatter.formatToParts(value).find((part) => part.type === 'fraction');
+    const decimals = fraction?.value.length ?? 0;
+    const grouping = resolved.useGrouping === false ? '0' : '#,##0';
+    const format = decimals > 0 ? `${grouping}.${'0'.repeat(decimals)}` : grouping;
+    if (resolved.style === 'percent')
+        return `${format}%`;
+    if (resolved.style === 'currency')
+        return `${format} "${resolved.currency}"`;
+    return format;
+}
+/**
+ * The date as Excel should show it. Excel dates have no zone, and `write-excel-file` reads a
+ * `Date` in UTC, so the wall clock of the zone the table shows is written as UTC. A `date`
+ * column drops the time (midnight); a `time` column keeps only the time of day, on Excel's day
+ * zero (1899-12-30), so times sort and compare by time alone.
+ */
+export function toXlsxDate(date, part = 'date-time') {
+    const gregorian = toCalendar(date, new GregorianCalendar());
+    const year = gregorian.era === 'BC' ? 1 - gregorian.year : gregorian.year;
+    const result = new Date(0);
+    // Not Date.UTC: it reads years 0–99 as 1900–1999.
+    if (part === 'time')
+        result.setUTCFullYear(1899, 11, 30);
+    else
+        result.setUTCFullYear(year, gregorian.month - 1, gregorian.day);
+    if (part !== 'date' && 'hour' in gregorian) {
+        result.setUTCHours(gregorian.hour, gregorian.minute, gregorian.second, gregorian.millisecond);
+    }
+    return result;
+}
+function dateFormatFor(type, formats) {
+    if (type === 'time')
+        return formats.time;
+    if (type === 'date-time')
+        return formats.dateTime;
+    return formats.date;
+}
+/**
+ * One export cell as a typed sheet cell: numbers, dates and booleans stay computable in Excel;
+ * everything else — and any column with its own `cell` renderer but no `exportValue` — is the
+ * text the table shows. Typed cells can't hold formulas, so no `'` guard is needed.
+ */
+export function toXlsxCell(column, cell, formats = DEFAULT_XLSX_DATE_FORMATS) {
+    const { type } = column;
+    if (column.hasCustomCell && !column.hasExportValue)
+        return textCell(cell);
+    if (type === undefined)
+        return textCell(cell);
+    if (NUMBER_TYPES.has(type)) {
+        if (isEmpty(cell.value))
+            return null;
+        const value = Number(cell.value);
+        if (!Number.isFinite(value))
+            return textCell(cell);
+        const format = xlsxNumberFormat(column, value);
+        return format === undefined ? textCell(cell) : { type: Number, value, format };
+    }
+    if (DATE_TYPES.has(type)) {
+        if (isEmpty(cell.value))
+            return null;
+        const formatOptions = column.formatOptions;
+        const date = readDateInZone(cell.value, dateCellTimeZone(formatOptions));
+        if (!date)
+            return textCell(cell);
+        return {
+            type: Date,
+            value: toXlsxDate(date, type),
+            format: dateFormatFor(type, formats)
+        };
+    }
+    if (type === 'boolean') {
+        // Like the table, only a real true/false is a checkbox; anything else shows `-`.
+        return typeof cell.value === 'boolean' ? { type: Boolean, value: cell.value } : null;
+    }
+    return textCell(cell);
+}

package/dist/icons/PhDownloadSimple.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0m-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 124.69V32a8 8 0 0 0-16 0v92.69L93.66 98.34a8 8 0 0 0-11.32 11.32Z"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhDownloadSimple.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhDownloadSimple: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhDownloadSimple = ReturnType<typeof PhDownloadSimple>;
+export default PhDownloadSimple;

package/dist/icons/index.d.ts

@@ -10,6 +10,7 @@ export { default as PhCaretRight } from './PhCaretRight.svelte';
 export { default as PhCaretUp } from './PhCaretUp.svelte';
 export { default as PhCheck } from './PhCheck.svelte';
 export { default as PhColumns } from './PhColumns.svelte';
+export { default as PhDownloadSimple } from './PhDownloadSimple.svelte';
 export { default as PhEye } from './PhEye.svelte';
 export { default as PhEyeSlash } from './PhEyeSlash.svelte';
 export { default as PhFile } from './PhFile.svelte';

package/dist/icons/index.js

@@ -10,6 +10,7 @@ export { default as PhCaretRight } from './PhCaretRight.svelte';
 export { default as PhCaretUp } from './PhCaretUp.svelte';
 export { default as PhCheck } from './PhCheck.svelte';
 export { default as PhColumns } from './PhColumns.svelte';
+export { default as PhDownloadSimple } from './PhDownloadSimple.svelte';
 export { default as PhEye } from './PhEye.svelte';
 export { default as PhEyeSlash } from './PhEyeSlash.svelte';
 export { default as PhFile } from './PhFile.svelte';

package/dist/utils/csv.d.ts

@@ -0,0 +1,13 @@
+export type CsvOptions = {
+    /** Field separator. Defaults to `;`, which Excel expects under most European locales. */
+    separator?: string;
+    /**
+     * Prepend a UTF-8 BOM so Excel reads the file as UTF-8 (otherwise č/ć/š/đ/ž break).
+     * Defaults to `true`.
+     */
+    bom?: boolean;
+};
+/** Quotes a field when it holds a quote, the separator or a line break (RFC 4180). */
+export declare function escapeCsvField(value: string, separator: string): string;
+/** Serializes rows of text as CSV, records separated by CRLF. */
+export declare function toCsv(rows: string[][], { separator, bom }?: CsvOptions): string;

package/dist/utils/csv.js

@@ -0,0 +1,18 @@
+const BOM = '';
+/** Quotes a field when it holds a quote, the separator or a line break (RFC 4180). */
+export function escapeCsvField(value, separator) {
+    if (value.includes('"') || value.includes(separator) || /[\r\n]/.test(value)) {
+        return `"${value.replaceAll('"', '""')}"`;
+    }
+    return value;
+}
+/** Serializes rows of text as CSV, records separated by CRLF. */
+export function toCsv(rows, { separator = ';', bom = true } = {}) {
+    if (separator.length === 0 || /["\r\n]/.test(separator)) {
+        throw new Error(`Invalid CSV separator: ${JSON.stringify(separator)}`);
+    }
+    const body = rows
+        .map((row) => row.map((field) => escapeCsvField(field, separator)).join(separator))
+        .join('\r\n');
+    return bom ? BOM + body : body;
+}

package/dist/utils/download.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hands `blob` to the browser as a download named `filename`. Browser-only: call it from an
+ * event handler, never during SSR.
+ */
+export declare function downloadBlob(blob: Blob, filename: string): void;

package/dist/utils/download.js

@@ -0,0 +1,17 @@
+/**
+ * Hands `blob` to the browser as a download named `filename`. Browser-only: call it from an
+ * event handler, never during SSR.
+ */
+export function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.style.display = 'none';
+    document.body.append(link);
+    link.click();
+    link.remove();
+    // Revoking right away can cancel the download in some browsers (Safari); the URL only
+    // pins the blob in memory until then.
+    setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}

package/dist/utils/select-filter.js

@@ -62,7 +62,12 @@ export function selectFilterOptions(facets, emptyLabel = '(empty)') {
         label: value,
         count
     }));
-    options.sort((a, b) => a.label.localeCompare(b.label));
+    // A column whose values are all numbers sorts by magnitude (so 2 < 10, -5 < 1.5); anything
+    // else sorts by label with digit runs compared numerically ("Item 2" < "Item 10").
+    const allNumbers = [...facets.keys()].every((key) => isEmpty(key) || Number.isFinite(key));
+    options.sort(allNumbers
+        ? (a, b) => Number(a.value) - Number(b.value)
+        : (a, b) => a.label.localeCompare(b.label, undefined, { numeric: true }));
     if (emptyCount > 0) {
         options.push({ value: EMPTY_SELECT_VALUE, label: emptyLabel, count: emptyCount });
     }