compote-ui 0.84.0 → 0.86.0

package/dist/components/data-table-v9/toolbar/data-table-export.svelte

@@ -1,146 +1,146 @@
-<script lang="ts" generics="T extends RowData">
-	import type { RowData } from '@tanstack/svelte-table';
-	import { Menu as ArkMenu } from '@ark-ui/svelte/menu';
-	import * as Menu from '../../menu';
-	import * as Tooltip from '../../tooltip';
-	import { button } from '../../button/button.variants';
-	import { PhDownloadSimple } from '../../../icons';
-	import type { DataTableInstance } from '../data-table-utils';
-	import { csvExporter } from '../export/csv-exporter';
-	import { getExportData, getExportRows, type DataTableExportScope } from '../export/export-data';
-	import type { DataTableExporter } from '../export/types';
-
-	type Props = {
-		table: DataTableInstance<T>;
-		/** File formats to offer. One format and no selected rows: a plain button; otherwise a menu. */
-		exporters?: DataTableExporter[];
-		/** File name without extension. */
-		filename?: string;
-		/** Text label for the trigger. When omitted, a download icon is shown instead. */
-		triggerLabel?: string;
-	};
-
-	let { table, exporters = [csvExporter], filename = 'export', triggerLabel }: Props = $props();
-
-	// Menu and tooltip share one trigger element, so both must agree on its id.
-	const triggerId = $props.id();
-
-	let pending = $state(false);
-
-	// Row model reads aren't reactive on their own: read the slices they depend on first.
-	const rowSlices = $derived.by(() => [
-		table.options.data,
-		table.atoms.columnFilters.get(),
-		table.atoms.globalFilter.get(),
-		table.atoms.sorting.get(),
-		table.atoms.rowSelection.get()
-	]);
-	const rowCount = $derived.by(() => {
-		void rowSlices;
-		return getExportRows(table, 'filtered').length;
-	});
-	// Counted exactly as the export picks them: selected rows the filter keeps.
-	const selectedCount = $derived.by(() => {
-		void rowSlices;
-		return getExportRows(table, 'selected').length;
-	});
-	const hasSelection = $derived(selectedCount > 0);
-	// The menu's choice, reset to all rows whenever the selection empties or starts again, so a
-	// "Selected rows" pick from an earlier selection never carries over to a new one.
-	let chosenScope = $derived.by<DataTableExportScope>(() => {
-		void hasSelection;
-		return 'filtered';
-	});
-	// `selected` with nothing selected would write an empty file: fall back to all rows.
-	const scope = $derived<DataTableExportScope>(hasSelection ? chosenScope : 'filtered');
-	const showMenu = $derived(exporters.length > 1 || hasSelection);
-
-	async function runExport(exporter: DataTableExporter) {
-		if (pending) return;
-		pending = true;
-		const exportScope = scope;
-		try {
-			await exporter.export({
-				table,
-				scope: exportScope,
-				filename,
-				getData: () => getExportData(table, exportScope)
-			});
-		} finally {
-			pending = false;
-		}
-	}
-</script>
-
-{#snippet triggerContent()}
-	<PhDownloadSimple />
-	{triggerLabel}
-{/snippet}
-
-{#if showMenu}
-	<Menu.Root ids={{ trigger: triggerId }} positioning={{ placement: 'bottom-end' }}>
-		<Tooltip.Root ids={{ trigger: triggerId }} disabled={!!triggerLabel}>
-			<Tooltip.Trigger>
-				{#snippet asChild(tooltipProps)}
-					<ArkMenu.Trigger
-						{...tooltipProps()}
-						aria-label={triggerLabel ? undefined : 'Export'}
-						aria-busy={pending}
-						class={button({ variant: 'outline', size: triggerLabel ? 'default' : 'icon' })}
-					>
-						{@render triggerContent()}
-					</ArkMenu.Trigger>
-				{/snippet}
-			</Tooltip.Trigger>
-			<Tooltip.Content>Export</Tooltip.Content>
-		</Tooltip.Root>
-
-		<Menu.Content class="min-w-44">
-			{#if hasSelection}
-				<Menu.RadioItemGroup
-					value={scope}
-					onValueChange={(details) => (chosenScope = details.value as DataTableExportScope)}
-				>
-					<Menu.RadioItem value="filtered" closeOnSelect={false}>
-						All rows ({rowCount})
-					</Menu.RadioItem>
-					<Menu.RadioItem value="selected" closeOnSelect={false}>
-						Selected rows ({selectedCount})
-					</Menu.RadioItem>
-				</Menu.RadioItemGroup>
-				<Menu.Separator />
-			{/if}
-			{#each exporters as exporter (exporter.id)}
-				{@const Icon = exporter.icon}
-				<Menu.Item
-					value={`export:${exporter.id}`}
-					disabled={pending}
-					onSelect={() => runExport(exporter)}
-				>
-					{#if Icon}<Icon class="text-ink-dim" />{/if}
-					{exporter.label}
-				</Menu.Item>
-			{/each}
-		</Menu.Content>
-	</Menu.Root>
-{:else}
-	{@const exporter = exporters[0]}
-	{#if exporter}
-		<Tooltip.Root disabled={!!triggerLabel}>
-			<!-- aria-disabled instead of disabled so keyboard focus isn't lost mid-export -->
-			<Tooltip.Trigger
-				type="button"
-				variant="outline"
-				size={triggerLabel ? 'default' : 'icon'}
-				class="aria-disabled:cursor-default"
-				aria-label={triggerLabel ? undefined : `Export ${exporter.label}`}
-				aria-busy={pending}
-				aria-disabled={pending}
-				onclick={() => runExport(exporter)}
-			>
-				{@render triggerContent()}
-			</Tooltip.Trigger>
-			<Tooltip.Content>Export {exporter.label}</Tooltip.Content>
-		</Tooltip.Root>
-	{/if}
-{/if}
+<script lang="ts" generics="T extends RowData">
+	import type { RowData } from '@tanstack/svelte-table';
+	import { Menu as ArkMenu } from '@ark-ui/svelte/menu';
+	import * as Menu from '../../menu';
+	import * as Tooltip from '../../tooltip';
+	import { button } from '../../button/button.variants';
+	import { PhDownloadSimple } from '../../../icons';
+	import type { DataTableInstance } from '../data-table-utils';
+	import { csvExporter } from '../export/csv-exporter';
+	import { getExportData, getExportRows, type DataTableExportScope } from '../export/export-data';
+	import type { DataTableExporter } from '../export/types';
+
+	type Props = {
+		table: DataTableInstance<T>;
+		/** File formats to offer. One format and no selected rows: a plain button; otherwise a menu. */
+		exporters?: DataTableExporter[];
+		/** File name without extension. */
+		filename?: string;
+		/** Text label for the trigger. When omitted, a download icon is shown instead. */
+		triggerLabel?: string;
+	};
+
+	let { table, exporters = [csvExporter], filename = 'export', triggerLabel }: Props = $props();
+
+	// Menu and tooltip share one trigger element, so both must agree on its id.
+	const triggerId = $props.id();
+
+	let pending = $state(false);
+
+	// Row model reads aren't reactive on their own: read the slices they depend on first.
+	const rowSlices = $derived.by(() => [
+		table.options.data,
+		table.atoms.columnFilters.get(),
+		table.atoms.globalFilter.get(),
+		table.atoms.sorting.get(),
+		table.atoms.rowSelection.get()
+	]);
+	const rowCount = $derived.by(() => {
+		void rowSlices;
+		return getExportRows(table, 'filtered').length;
+	});
+	// Counted exactly as the export picks them: selected rows the filter keeps.
+	const selectedCount = $derived.by(() => {
+		void rowSlices;
+		return getExportRows(table, 'selected').length;
+	});
+	const hasSelection = $derived(selectedCount > 0);
+	// The menu's choice, reset to all rows whenever the selection empties or starts again, so a
+	// "Selected rows" pick from an earlier selection never carries over to a new one.
+	let chosenScope = $derived.by<DataTableExportScope>(() => {
+		void hasSelection;
+		return 'filtered';
+	});
+	// `selected` with nothing selected would write an empty file: fall back to all rows.
+	const scope = $derived<DataTableExportScope>(hasSelection ? chosenScope : 'filtered');
+	const showMenu = $derived(exporters.length > 1 || hasSelection);
+
+	async function runExport(exporter: DataTableExporter) {
+		if (pending) return;
+		pending = true;
+		const exportScope = scope;
+		try {
+			await exporter.export({
+				table,
+				scope: exportScope,
+				filename,
+				getData: () => getExportData(table, exportScope)
+			});
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+{#snippet triggerContent()}
+	<PhDownloadSimple />
+	{triggerLabel}
+{/snippet}
+
+{#if showMenu}
+	<Menu.Root ids={{ trigger: triggerId }} positioning={{ placement: 'bottom-end' }}>
+		<Tooltip.Root ids={{ trigger: triggerId }} disabled={!!triggerLabel}>
+			<Tooltip.Trigger>
+				{#snippet asChild(tooltipProps)}
+					<ArkMenu.Trigger
+						{...tooltipProps()}
+						aria-label={triggerLabel ? undefined : 'Export'}
+						aria-busy={pending}
+						class={button({ variant: 'outline', size: triggerLabel ? 'default' : 'icon' })}
+					>
+						{@render triggerContent()}
+					</ArkMenu.Trigger>
+				{/snippet}
+			</Tooltip.Trigger>
+			<Tooltip.Content>Export</Tooltip.Content>
+		</Tooltip.Root>
+
+		<Menu.Content class="min-w-44">
+			{#if hasSelection}
+				<Menu.RadioItemGroup
+					value={scope}
+					onValueChange={(details) => (chosenScope = details.value as DataTableExportScope)}
+				>
+					<Menu.RadioItem value="filtered" closeOnSelect={false}>
+						All rows ({rowCount})
+					</Menu.RadioItem>
+					<Menu.RadioItem value="selected" closeOnSelect={false}>
+						Selected rows ({selectedCount})
+					</Menu.RadioItem>
+				</Menu.RadioItemGroup>
+				<Menu.Separator />
+			{/if}
+			{#each exporters as exporter (exporter.id)}
+				{@const Icon = exporter.icon}
+				<Menu.Item
+					value={`export:${exporter.id}`}
+					disabled={pending}
+					onSelect={() => runExport(exporter)}
+				>
+					{#if Icon}<Icon class="text-ink-dim" />{/if}
+					{exporter.label}
+				</Menu.Item>
+			{/each}
+		</Menu.Content>
+	</Menu.Root>
+{:else}
+	{@const exporter = exporters[0]}
+	{#if exporter}
+		<Tooltip.Root disabled={!!triggerLabel}>
+			<!-- aria-disabled instead of disabled so keyboard focus isn't lost mid-export -->
+			<Tooltip.Trigger
+				type="button"
+				variant="outline"
+				size={triggerLabel ? 'default' : 'icon'}
+				class="aria-disabled:cursor-default"
+				aria-label={triggerLabel ? undefined : `Export ${exporter.label}`}
+				aria-busy={pending}
+				aria-disabled={pending}
+				onclick={() => runExport(exporter)}
+			>
+				{@render triggerContent()}
+			</Tooltip.Trigger>
+			<Tooltip.Content>Export {exporter.label}</Tooltip.Content>
+		</Tooltip.Root>
+	{/if}
+{/if}

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

@@ -1,14 +1,22 @@
 import type { DataTableExportData } from '../export/export-data';
 import type { DataTableExporter } from '../export/types';
 import { type XlsxCell, type XlsxDateFormats } from './xlsx-cell';
+import { type XlsxRowsColumn } from './xlsx-rows';
 export { DEFAULT_XLSX_DATE_FORMATS, toXlsxCell, xlsxNumberFormat } from './xlsx-cell';
 export type { XlsxCell, XlsxDateFormats, XlsxDatePart } from './xlsx-cell';
+export { rowsToExportData } from './xlsx-rows';
+export type { XlsxRowsColumn } from './xlsx-rows';
 export type XlsxExporterOptions = Partial<XlsxDateFormats> & {
     id?: string;
     label?: string;
     /** Sheet name (Excel allows 31 characters, without `[ ] : * ? / \`). */
     sheet?: string;
 };
+/**
+ * A width per column that fits its header and the longest cell text (the text the table
+ * shows, which is close to what Excel shows), plus padding, between 8 and 60 characters.
+ */
+export declare function xlsxColumnWidths(data: DataTableExportData): number[];
 /** The export data as sheet rows: a bold header row, then typed cells. */
 export declare function exportDataToSheet(data: DataTableExportData, formats?: XlsxDateFormats): XlsxCell[][];
 /**
@@ -16,6 +24,20 @@ export declare function exportDataToSheet(data: DataTableExportData, formats?: X
  * 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>;
+export type XlsxRowsOptions = XlsxExporterOptions & {
+    /**
+     * Locale the values are formatted in: the text that sets column widths, the text of cells
+     * written as text (a number format Excel can't express), and the decimals of a number format.
+     * Default `en-US`.
+     */
+    locale?: string;
+};
+/**
+ * Plain row objects as an .xlsx file, for an export that isn't a DataTable: typed cells, a bold
+ * frozen header row and content-fitted column widths, exactly like a table export. Download
+ * the result with `downloadBlob(blob, 'name.xlsx')`.
+ */
+export declare function exportRowsToXlsxBlob(rows: ReadonlyArray<Record<string, unknown>>, columns: ReadonlyArray<XlsxRowsColumn>, options?: XlsxRowsOptions): Promise<Blob>;
 /**
  * An Excel exporter: numbers, dates and booleans as typed cells, formatted like the table.
  * Needs `write-excel-file` installed.

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

@@ -1,9 +1,37 @@
 import { PhMicrosoftExcelLogo } from '../../../icons';
 import { downloadBlob } from '../../../utils/download';
 import { DEFAULT_XLSX_DATE_FORMATS, toXlsxCell } from './xlsx-cell';
+import { rowsToExportData } from './xlsx-rows';
 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;
+export { rowsToExportData } from './xlsx-rows';
+// Column widths in characters of Excel's default font.
+const MIN_COLUMN_WIDTH = 8;
+const MAX_COLUMN_WIDTH = 60;
+// One character of slack: char counts already overshoot narrow lowercase text, and this keeps
+// wide letters (W, M, capitals) from being cut off.
+const COLUMN_WIDTH_PADDING = 1;
+/** Characters in the longest line of `text` (code points, so č or 🙂 count once). */
+function longestLine(text) {
+    let longest = 0;
+    for (const line of text.split(/\r\n|\r|\n/))
+        longest = Math.max(longest, Array.from(line).length);
+    return longest;
+}
+/**
+ * A width per column that fits its header and the longest cell text (the text the table
+ * shows, which is close to what Excel shows), plus padding, between 8 and 60 characters.
+ */
+export function xlsxColumnWidths(data) {
+    return data.columns.map((column, index) => {
+        let longest = longestLine(column.header);
+        for (const cells of data.rows) {
+            const text = cells[index]?.text;
+            if (text)
+                longest = Math.max(longest, longestLine(text));
+        }
+        return Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, longest + COLUMN_WIDTH_PADDING));
+    });
+}
 /** 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) => ({
@@ -29,11 +57,17 @@ export async function exportDataToXlsxBlob(data, options = {}) {
     return writeXlsxFile(sheetData, {
         sheet: options.sheet,
         stickyRowsCount: 1,
-        columns: data.columns.map((column) => ({
-            width: Math.max(8, Math.round(column.size / PX_PER_CHAR))
-        }))
+        columns: xlsxColumnWidths(data).map((width) => ({ width }))
     }).toBlob();
 }
+/**
+ * Plain row objects as an .xlsx file, for an export that isn't a DataTable: typed cells, a bold
+ * frozen header row and content-fitted column widths, exactly like a table export. Download
+ * the result with `downloadBlob(blob, 'name.xlsx')`.
+ */
+export async function exportRowsToXlsxBlob(rows, columns, options = {}) {
+    return exportDataToXlsxBlob(rowsToExportData(rows, columns, options.locale), options);
+}
 function pickFormats({ date, time, dateTime }) {
     return {
         ...(date !== undefined ? { date } : {}),

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

@@ -0,0 +1,31 @@
+import type { DataTableExportData } from '../export/export-data';
+import type { DataTableColumnType } from '../types';
+/**
+ * A column of plain row objects for `exportRowsToXlsxBlob`: which key to read, and how the
+ * values are typed (the same `type` and `formatOptions` a DataTable column has).
+ */
+export type XlsxRowsColumn = {
+    /** The key to read from each row object. */
+    key: string;
+    /** The header cell; defaults to `key`. */
+    header?: string;
+    /**
+     * How the value is written. `number`, `currency` and `percent` become Excel numbers, `date`,
+     * `time` and `date-time` Excel dates, `boolean` TRUE/FALSE. Without a type (or `text`) the
+     * value is written as text, so a numeric column needs a type to stay computable.
+     */
+    type?: DataTableColumnType;
+    /**
+     * Intl options for the Excel format of a typed column: `{ minimumFractionDigits: 2,
+     * maximumFractionDigits: 2 }` for fixed decimals, `{ useGrouping: false,
+     * maximumFractionDigits: 0 }` for whole numbers without a thousands separator (`useGrouping:
+     * false` alone keeps the decimals a value has). A `number` column with none shows as many
+     * decimals as each value has (up to 3).
+     */
+    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+};
+/**
+ * Plain row objects as the export data the xlsx exporter takes, so they get the same typed
+ * cells, bold frozen header and content-fitted widths as a DataTable export.
+ */
+export declare function rowsToExportData(rows: ReadonlyArray<Record<string, unknown>>, columns: ReadonlyArray<XlsxRowsColumn>, locale?: string): DataTableExportData;

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

@@ -0,0 +1,60 @@
+import { TYPE_NUMBER_FORMAT_DEFAULTS } from '../data-table-utils';
+import { formatDateCell } from '../date-cell';
+const NUMBER_TYPES = new Set(['number', 'currency', 'percent']);
+const isEmpty = (value) => value === null || value === undefined || value === '';
+/**
+ * The text a DataTable cell of this type would show (same rules as the table's own cell text):
+ * what text and fallback cells write, and what column widths are measured on. `''` when the
+ * table would show `-`.
+ */
+function cellText(column, value, locale) {
+    if (isEmpty(value))
+        return '';
+    const { type } = column;
+    try {
+        if (type && NUMBER_TYPES.has(type)) {
+            // Like the table: numeric strings count as numbers, anything else shows nothing.
+            const number = Number(value);
+            if (Number.isNaN(number))
+                return '';
+            return new Intl.NumberFormat(locale, {
+                ...TYPE_NUMBER_FORMAT_DEFAULTS[type],
+                ...column.formatOptions
+            }).format(number);
+        }
+        if (type === 'date' || type === 'time' || type === 'date-time') {
+            // Reads a Date, an ISO/DB string, an epoch number... the way the table does.
+            return (formatDateCell(value, type, locale, column.formatOptions) ??
+                '');
+        }
+        if (type === 'boolean')
+            return value ? 'Yes' : 'No';
+    }
+    catch {
+        // Invalid Intl options: fall back to the plain string.
+    }
+    return String(value);
+}
+/**
+ * Plain row objects as the export data the xlsx exporter takes, so they get the same typed
+ * cells, bold frozen header and content-fitted widths as a DataTable export.
+ */
+export function rowsToExportData(rows, columns, locale = 'en-US') {
+    return {
+        columns: columns.map((column) => ({
+            id: column.key,
+            header: column.header ?? column.key,
+            type: column.type,
+            formatOptions: column.formatOptions,
+            hasCustomCell: false,
+            hasExportValue: false,
+            locale,
+            // Only a table has a width in px; an xlsx export measures the content instead.
+            size: 0
+        })),
+        rows: rows.map((row) => columns.map((column) => {
+            const value = row[column.key];
+            return { value, text: cellText(column, value, locale) };
+        }))
+    };
+}

package/dist/icons/PhDownloadSimple.svelte

@@ -1,18 +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 -->
+<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/index.d.ts

@@ -11,6 +11,7 @@ export * as HoverCard from './components/hover-card';
 export * as ScrollArea from './components/scroll-area';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export type { ProcessImageOptions, CropRegion } from './utils/image-processing';
+export { downloadBlob } from './utils/download';
 export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';

package/dist/index.js

@@ -9,6 +9,7 @@ export * as Collapsible from './components/collapsible';
 export * as HoverCard from './components/hover-card';
 export * as ScrollArea from './components/scroll-area';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
+export { downloadBlob } from './utils/download';
 export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';