runeforge 0.0.18 → 0.0.19

package/dist/components/crud/GenericCRUD.svelte

@@ -12,6 +12,7 @@
 		inferType
 	} from './utils/resolution.js';
 	import { isFilterable } from '../table/utils.js';
+	import type { XlsxModule } from '../table/export.js';
 	import type { AttributeMetadata } from '../../types/attribute.js';
 	import type {
 		ActionConfiguration,
@@ -47,7 +48,10 @@
 		columns = undefined as ColumnDefinition<T>[] | undefined,
 		fields = undefined as FieldDefinition<T>[] | undefined,
 		meta = undefined as Partial<Record<string, AttributeMetadata>> | undefined,
-		form = null as { error?: string } | null
+		form = null as { error?: string } | null,
+		enableExport = false,
+		onExport = undefined as ((query: TableQuery) => Promise<T[]>) | undefined,
+		xlsx = undefined as XlsxModule | undefined
 	}: {
 		data?: Record<string, unknown>;
 		dataKey?: string;
@@ -68,6 +72,14 @@
 		fields?: FieldDefinition<T>[];
 		meta?: Partial<Record<string, AttributeMetadata>>;
 		form?: { error?: string } | null;
+		/** Shows an icon-only export button (CSV, and Excel if `xlsx` is provided). */
+		enableExport?: boolean;
+		/** Server-pagination mode only: fetch all rows matching the current query
+		 * (unpaginated) for export. Without it, export falls back to the loaded page. */
+		onExport?: (query: TableQuery) => Promise<T[]>;
+		/** Resolved `xlsx` (SheetJS) module, e.g. `import * as xlsx from 'xlsx'`.
+		 * Enables the "Export as Excel" option; omit to only offer CSV. */
+		xlsx?: XlsxModule;
 	} = $props();
 
 	function isEnvelope(value: unknown): value is PaginatedEnvelope<T> {
@@ -342,6 +354,9 @@
 		{initialSort}
 		{initialFilters}
 		onPaginationChange={handlePaginationChange}
+		{enableExport}
+		{onExport}
+		{xlsx}
 		onCreate={navCreate}
 		onEdit={navEdit}
 		onView={navRead}

package/dist/components/crud/GenericCRUD.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { XlsxModule } from '../table/export.js';
 import type { AttributeMetadata } from '../../types/attribute.js';
 import type { ActionConfiguration, ColumnDefinition, CustomAction, CustomBulkAction, FieldDefinition, SearchConfiguration } from '../../types/crud.js';
+import type { TableQuery } from '../../types/table.js';
 declare function $$render<T extends object = Record<string, unknown>>(): {
     props: {
         data?: Record<string, unknown>;
@@ -22,6 +24,14 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         form?: {
             error?: string;
         } | null;
+        /** Shows an icon-only export button (CSV, and Excel if `xlsx` is provided). */
+        enableExport?: boolean;
+        /** Server-pagination mode only: fetch all rows matching the current query
+         * (unpaginated) for export. Without it, export falls back to the loaded page. */
+        onExport?: (query: TableQuery) => Promise<T[]>;
+        /** Resolved `xlsx` (SheetJS) module, e.g. `import * as xlsx from 'xlsx'`.
+         * Enables the "Export as Excel" option; omit to only offer CSV. */
+        xlsx?: XlsxModule;
     };
     exports: {};
     bindings: "";

package/dist/components/crud/views/List.svelte

@@ -6,6 +6,7 @@
 	import Modal from '../../Modal.svelte';
 	import PaginatedTable from '../../table/PaginatedTable.svelte';
 	import SearchInput from '../SearchInput.svelte';
+	import { downloadCsv, downloadXlsx, type XlsxModule } from '../../table/export.js';
 	import { getIconSet } from '../../../icons/context.js';
 	import { defaultIconSet } from '../../../icons/sets/default.js';
 	import type {
@@ -45,6 +46,9 @@
 		initialSort = undefined as { column: string; direction: SortDirection } | undefined,
 		initialFilters = undefined as Partial<FilterSnapshot> | undefined,
 		onPaginationChange = undefined as ((query: TableQuery) => void) | undefined,
+		enableExport = false,
+		onExport = undefined as ((query: TableQuery) => Promise<T[]>) | undefined,
+		xlsx = undefined as XlsxModule | undefined,
 		onCreate,
 		onEdit,
 		onView,
@@ -69,6 +73,14 @@
 		initialSort?: { column: string; direction: SortDirection };
 		initialFilters?: Partial<FilterSnapshot>;
 		onPaginationChange?: (query: TableQuery) => void;
+		/** Shows an icon-only export button (CSV, and Excel if `xlsx` is provided). */
+		enableExport?: boolean;
+		/** Server-pagination mode only: fetch all rows matching the current query
+		 * (unpaginated) for export. Without it, export falls back to the loaded page. */
+		onExport?: (query: TableQuery) => Promise<T[]>;
+		/** Resolved `xlsx` (SheetJS) module, e.g. `import * as xlsx from 'xlsx'`.
+		 * Enables the "Export as Excel" option; omit to only offer CSV. */
+		xlsx?: XlsxModule;
 		onCreate?: () => void;
 		onEdit?: (item: T) => void;
 		onView?: (item: T) => void;
@@ -92,6 +104,25 @@
 	let pendingBulkAction = $state<{ action: CustomBulkAction<T>; items: T[] } | null>(null);
 	const selectedItems = $derived([...selected].map((i) => data[i]));
 
+	let visibleRows = $state<T[]>([]);
+	let exportQuery = $state<TableQuery | undefined>(undefined);
+	let exportPopoverEl: HTMLElement | undefined = $state();
+	const exportId = $props.id();
+
+	async function resolveExportRows(): Promise<T[]> {
+		if (!pagination) return visibleRows;
+		if (!onExport || !exportQuery) return data;
+		return onExport(exportQuery);
+	}
+
+	async function handleExport(format: 'csv' | 'xlsx') {
+		exportPopoverEl?.hidePopover();
+		const rows = await resolveExportRows();
+		const filename = `${labelMany || 'export'}-${new Date().toISOString().slice(0, 10)}`;
+		if (format === 'csv') downloadCsv(rows, columns, filename);
+		else if (xlsx) downloadXlsx(rows, columns, filename, xlsx);
+	}
+
 	// `selected` holds indices into `data`; if `data` is swapped for a different
 	// slice (page/sort/filter change in server mode) stale indices could point
 	// at unrelated rows, so clear on any data reference change.
@@ -230,6 +261,44 @@
 				<SearchInput config={search} />
 			{/if}
 
+			{#if enableExport}
+				{@const ExportIcon = icons.download}
+				<Button
+					variant="ghost"
+					class="btn-square"
+					popovertarget="export-menu-{exportId}"
+					style="anchor-name:--export-anchor-{exportId}"
+					aria-label={strings.export}
+					title={strings.export}
+				>
+					<ExportIcon class="size-4" />
+				</Button>
+				<div
+					popover="auto"
+					id="export-menu-{exportId}"
+					style="position-anchor:--export-anchor-{exportId}"
+					class="dropdown dropdown-end w-40 rounded-box border border-base-content/10 bg-base-100 p-1 shadow-lg"
+					bind:this={exportPopoverEl}
+				>
+					<Button
+						variant="ghost"
+						class="btn-sm w-full justify-start"
+						onclick={() => handleExport('csv')}
+					>
+						{strings.exportCsv}
+					</Button>
+					{#if xlsx}
+						<Button
+							variant="ghost"
+							class="btn-sm w-full justify-start"
+							onclick={() => handleExport('xlsx')}
+						>
+							{strings.exportExcel}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+
 			{#each customBulkActions as bulkAction (bulkAction.label)}
 				{#if bulkAction.condition?.(selectedItems) ?? true}
 					{@const BulkIcon = bulkAction.icon}
@@ -282,6 +351,8 @@
 			{initialSort}
 			{initialFilters}
 			{onPaginationChange}
+			bind:visibleRows
+			bind:query={exportQuery}
 		/>
 	</div>
 </div>

package/dist/components/crud/views/List.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type XlsxModule } from '../../table/export.js';
 import type { ActionConfiguration, ColumnDefinition, CustomAction, CustomBulkAction, SearchConfiguration } from '../../../types/crud.js';
 import type { FilterSnapshot, ServerPagination, SortDirection, TableQuery } from '../../../types/table.js';
 declare function $$render<T extends object = Record<string, unknown>>(): {
@@ -23,6 +24,14 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         };
         initialFilters?: Partial<FilterSnapshot>;
         onPaginationChange?: (query: TableQuery) => void;
+        /** Shows an icon-only export button (CSV, and Excel if `xlsx` is provided). */
+        enableExport?: boolean;
+        /** Server-pagination mode only: fetch all rows matching the current query
+         * (unpaginated) for export. Without it, export falls back to the loaded page. */
+        onExport?: (query: TableQuery) => Promise<T[]>;
+        /** Resolved `xlsx` (SheetJS) module, e.g. `import * as xlsx from 'xlsx'`.
+         * Enables the "Export as Excel" option; omit to only offer CSV. */
+        xlsx?: XlsxModule;
         onCreate?: () => void;
         onEdit?: (item: T) => void;
         onView?: (item: T) => void;

package/dist/components/table/PaginatedTable.svelte

@@ -30,6 +30,8 @@
     initialSort = undefined as { column: string; direction: SortDirection } | undefined,
     initialFilters = undefined as Partial<FilterSnapshot> | undefined,
     onPaginationChange = undefined as ((query: TableQuery) => void) | undefined,
+    visibleRows = $bindable<T[]>([]),
+    query = $bindable<TableQuery | undefined>(undefined),
   }: {
     data?: T[];
     columns?: ColumnDefinition<T>[];
@@ -45,6 +47,12 @@
     initialSort?: { column: string; direction: SortDirection };
     initialFilters?: Partial<FilterSnapshot>;
     onPaginationChange?: (query: TableQuery) => void;
+    /** Filtered + sorted rows before page slicing (client mode), or the
+     * current page's rows as-is (server mode). Read-only for callers. */
+    visibleRows?: T[];
+    /** Current ordering + filters snapshot, kept in sync for callers that
+     * need to replicate the active query (e.g. exporting server-side). */
+    query?: TableQuery;
   } = $props();
 
   // Intentional one-time hydration of local state from the initial prop
@@ -107,6 +115,14 @@
     }
   });
 
+  // Surface the filtered+sorted rows and current query for callers (e.g. export).
+  $effect(() => {
+    visibleRows = sorted.map((e) => e.row);
+  });
+  $effect(() => {
+    query = currentQuery(displayPage);
+  });
+
   function currentQuery(page: number): TableQuery {
     return {
       page,

package/dist/components/table/PaginatedTable.svelte.d.ts

@@ -21,9 +21,15 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         };
         initialFilters?: Partial<FilterSnapshot>;
         onPaginationChange?: (query: TableQuery) => void;
+        /** Filtered + sorted rows before page slicing (client mode), or the
+         * current page's rows as-is (server mode). Read-only for callers. */
+        visibleRows?: T[];
+        /** Current ordering + filters snapshot, kept in sync for callers that
+         * need to replicate the active query (e.g. exporting server-side). */
+        query?: TableQuery;
     };
     exports: {};
-    bindings: "selected";
+    bindings: "selected" | "visibleRows" | "query";
     slots: {};
     events: {};
 };
@@ -31,7 +37,7 @@ declare class __sveltets_Render<T extends object = Record<string, unknown>> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "selected";
+    bindings(): "selected" | "visibleRows" | "query";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/table/export.d.ts

@@ -0,0 +1,17 @@
+import type { ColumnDefinition } from '../../types/crud.js';
+/**
+ * Minimal duck-typed subset of the SheetJS (`xlsx`) module API used for
+ * building a workbook. Runeforge never imports `xlsx` itself — the consumer
+ * installs it and passes the resolved module in, so the dependency stays
+ * fully optional and never affects consumers who don't use Excel export.
+ */
+export interface XlsxModule {
+    utils: {
+        aoa_to_sheet: (data: unknown[][]) => unknown;
+        book_new: () => unknown;
+        book_append_sheet: (workbook: unknown, worksheet: unknown, name?: string) => void;
+    };
+    writeFile: (workbook: unknown, filename: string) => void;
+}
+export declare function downloadCsv<T extends object>(rows: T[], columns: ColumnDefinition<T>[], filename: string): void;
+export declare function downloadXlsx<T extends object>(rows: T[], columns: ColumnDefinition<T>[], filename: string, xlsx: XlsxModule): void;

package/dist/components/table/export.js

@@ -0,0 +1,31 @@
+import { cellRenderedText } from './utils.js';
+function buildTable(rows, columns) {
+    const headers = columns.map((col) => col.title ?? col.attribute);
+    const body = rows.map((row) => columns.map((col) => cellRenderedText(row, col)));
+    return { headers, body };
+}
+function escapeCsvCell(value) {
+    return /[",\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+}
+function triggerDownload(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(url);
+}
+export function downloadCsv(rows, columns, filename) {
+    const { headers, body } = buildTable(rows, columns);
+    const csv = [headers, ...body]
+        .map((line) => line.map(escapeCsvCell).join(','))
+        .join('\r\n');
+    triggerDownload(new Blob([csv], { type: 'text/csv;charset=utf-8;' }), `${filename}.csv`);
+}
+export function downloadXlsx(rows, columns, filename, xlsx) {
+    const { headers, body } = buildTable(rows, columns);
+    const worksheet = xlsx.utils.aoa_to_sheet([headers, ...body]);
+    const workbook = xlsx.utils.book_new();
+    xlsx.utils.book_append_sheet(workbook, worksheet);
+    xlsx.writeFile(workbook, `${filename}.xlsx`);
+}

package/dist/i18n/en.js

@@ -16,6 +16,9 @@ export const en = {
     delete: 'Delete',
     create: 'Create',
     searchPlaceholder: 'Search...',
+    export: 'Export',
+    exportCsv: 'Export as CSV',
+    exportExcel: 'Export as Excel',
     save: 'Save',
     saveAndContinue: 'Save and continue',
     cancel: 'Cancel',

package/dist/i18n/es.js

@@ -16,6 +16,9 @@ export const es = {
     delete: 'Eliminar',
     create: 'Crear',
     searchPlaceholder: 'Buscar...',
+    export: 'Exportar',
+    exportCsv: 'Exportar a CSV',
+    exportExcel: 'Exportar a Excel',
     save: 'Guardar',
     saveAndContinue: 'Guardar y continuar',
     cancel: 'Cancelar',

package/dist/i18n/types.d.ts

@@ -16,6 +16,9 @@ export interface RuneforgeStrings {
     delete: string;
     create: string;
     searchPlaceholder: string;
+    export: string;
+    exportCsv: string;
+    exportExcel: string;
     save: string;
     saveAndContinue: string;
     cancel: string;

package/dist/icons/defaults/Download.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { size = '1em', class: cls = '' }: { size?: string | number; class?: string } = $props();
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16" fill="currentColor" class={cls}>
+  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
+  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
+</svg>

package/dist/icons/defaults/Download.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: string | number;
+    class?: string;
+};
+declare const Download: import("svelte").Component<$$ComponentProps, {}, "">;
+type Download = ReturnType<typeof Download>;
+export default Download;

package/dist/icons/sets/bootstrap.js

@@ -10,7 +10,7 @@
  *   setIconSet(bootstrapIconSet);
  */
 import * as Icons from 'svelte-bootstrap-icons';
-const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, X, } = Icons;
+const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, X, Download, } = Icons;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function asIcon(c) { return c; }
 export const bootstrapIconSet = {
@@ -28,6 +28,7 @@ export const bootstrapIconSet = {
     folder: asIcon(Folder),
     passwordShow: asIcon(Eye),
     passwordHide: asIcon(EyeSlash),
+    download: asIcon(Download),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getByName: (name) => asIcon(Icons[name]) ?? null,
 };

package/dist/icons/sets/default.js

@@ -12,6 +12,7 @@ import Home from '../defaults/Home.svelte';
 import Folder from '../defaults/Folder.svelte';
 import PasswordShow from '../defaults/PasswordShow.svelte';
 import PasswordHide from '../defaults/PasswordHide.svelte';
+import Download from '../defaults/Download.svelte';
 export const defaultIconSet = {
     sortNone: SortNone,
     sortAsc: SortAsc,
@@ -27,4 +28,5 @@ export const defaultIconSet = {
     folder: Folder,
     passwordShow: PasswordShow,
     passwordHide: PasswordHide,
+    download: Download,
 };

package/dist/icons/types.d.ts

@@ -18,5 +18,6 @@ export interface CRUDIconSet {
     folder: IconComponent;
     passwordShow: IconComponent;
     passwordHide: IconComponent;
+    download: IconComponent;
     getByName?: (name: string) => IconComponent | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",