@softwareone/spi-sv5-library 1.9.0 → 1.10.1

package/dist/Table/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_PAGE = 1;
+export declare const DEFAULT_PAGE_LIMIT = 10;
+export declare const DEFAULT_MIN_PAGE_LIMIT = 5;
+export declare const DEFAULT_ITEMS_PER_PAGE_OPTIONS: number[];

package/dist/Table/consts.js

@@ -0,0 +1,4 @@
+export const DEFAULT_PAGE = 1;
+export const DEFAULT_PAGE_LIMIT = 10;
+export const DEFAULT_MIN_PAGE_LIMIT = 5;
+export const DEFAULT_ITEMS_PER_PAGE_OPTIONS = [10, 25, 50, 75, 100];

package/dist/Table/context.d.ts

@@ -0,0 +1,4 @@
+import { type Writable } from 'svelte/store';
+import type { Pagination } from './types.js';
+export declare const setPaginationTableContext: () => Writable<Pagination>;
+export declare const getPaginationTableContext: () => Writable<Pagination> | undefined;

package/dist/Table/context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+const paginationTableKey = Symbol('paginationTableKey');
+export const setPaginationTableContext = () => {
+    const paginationTable = writable({
+        totalPages: 0,
+        totalItems: 0,
+        currentPage: 1
+    });
+    setContext(paginationTableKey, paginationTable);
+    return paginationTable;
+};
+export const getPaginationTableContext = () => {
+    return getContext(paginationTableKey);
+};

package/dist/Table/excel-setting.d.ts

@@ -0,0 +1,8 @@
+export interface ExcelSetting {
+    fileName: string;
+    exportAllColumns: boolean;
+}
+export declare const ColumnFormat: {
+    readonly NUMBER: "#,##0.00";
+};
+export type ColumnFormat = typeof ColumnFormat[keyof typeof ColumnFormat];

package/dist/Table/excel-setting.js

@@ -0,0 +1,3 @@
+export const ColumnFormat = {
+    NUMBER: '#,##0.00'
+};

package/dist/Table/excel.d.ts

@@ -0,0 +1,4 @@
+import type { Table } from './adapter/index.js';
+import { type ExcelSetting } from './excel-setting.js';
+declare const exportExcel: <T>(table: Table<T>, excelSetting: ExcelSetting) => Promise<void>;
+export default exportExcel;

package/dist/Table/excel.js

@@ -0,0 +1,66 @@
+/// <reference path="./types.d.ts" />
+import ExcelJS from 'exceljs';
+import saveAs from 'file-saver';
+import { ColumnFormat } from './excel-setting.js';
+const exportExcel = async (table, excelSetting) => {
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet('Sheet 1');
+    worksheet.columns = getColumns(table, excelSetting);
+    const rows = getRows(table, excelSetting);
+    worksheet.addRows(rows);
+    setStyle(worksheet);
+    await downloadFile(workbook, excelSetting.fileName);
+};
+const getColumns = (table, excelSetting) => {
+    return excelSetting.exportAllColumns ? getAllColumns(table) : getVisibleColumns(table);
+};
+const getAllColumns = (table) => {
+    const allColumns = table.getAllColumns().filter(shouldIncludeColumn);
+    return allColumns.map((column) => getColumnExcel(column.columnDef.header, column.id, column.columnDef.meta?.columnFormatExport));
+};
+const getVisibleColumns = (table) => {
+    const visibleColumns = table.getVisibleLeafColumns().filter(shouldIncludeColumn);
+    return visibleColumns.map((column) => getColumnExcel(column.columnDef.header, column.id, column.columnDef.meta?.columnFormatExport));
+};
+const shouldIncludeColumn = (column) => {
+    return !column.columnDef.meta?.excludeFromExport;
+};
+const getColumnExcel = (header, id, columnFormatExport) => {
+    return {
+        header,
+        key: id,
+        width: 20,
+        ...(columnFormatExport && {
+            style: {
+                numFmt: columnFormatExport
+            }
+        })
+    };
+};
+const getRows = (table, excelSetting) => {
+    return table.getFilteredRowModel().rows.map((row) => getValues(excelSetting, row));
+};
+const getValues = (excelSetting, row) => {
+    const cells = excelSetting.exportAllColumns ? row.getAllCells() : row.getVisibleCells();
+    return cells
+        .filter((cell) => !cell.column.columnDef.meta?.excludeFromExport)
+        .map((cell) => getValue(cell));
+};
+const getValue = (cell) => {
+    let value = cell.getValue() ?? '';
+    if (Array.isArray(value)) {
+        value = value.join(', ');
+    }
+    return value;
+};
+const setStyle = (worksheet) => {
+    worksheet.getRow(1).eachCell((cell) => {
+        cell.font = { bold: true };
+    });
+};
+const downloadFile = async (workbook, fileName) => {
+    const buffer = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([buffer]);
+    saveAs(blob, `${fileName}.xlsx`);
+};
+export default exportExcel;

package/dist/Table/index.d.ts

@@ -0,0 +1,6 @@
+export * from './adapter/index.js';
+export * from './consts.js';
+export * from './context.js';
+export { ColumnFormat, type ExcelSetting } from './excel-setting.js';
+export { default as Table } from './Table.svelte';
+export { createActionsColumn } from './util.js';

package/dist/Table/index.js

@@ -0,0 +1,6 @@
+export * from './adapter/index.js';
+export * from './consts.js';
+export * from './context.js';
+export { ColumnFormat } from './excel-setting.js';
+export { default as Table } from './Table.svelte';
+export { createActionsColumn } from './util.js';

package/dist/Table/types.d.ts

@@ -0,0 +1,16 @@
+import '@tanstack/table-core';
+
+import { ColumnFormat } from './excel-setting.js';
+
+declare module '@tanstack/table-core' {
+	interface ColumnMeta<TData extends RowData, TValue> {
+		alignColumn?: 'left' | 'right' | 'center';
+		className?: string;
+		columnWidth?: string;
+		style?: string;
+		isVisible?: boolean;
+		excludeFromExport?: boolean;
+		columnFormatExport?: ColumnFormat;
+		hideColumnFilter?: boolean;
+	}
+}

package/dist/Table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Table/util.d.ts

@@ -0,0 +1,4 @@
+import { type Row } from './adapter/index.js';
+import type { Action } from './types.js';
+export declare const createCheckedColumn: <T>() => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
+export declare const createActionsColumn: <T>(getActions: (row: Row<T>) => Action[]) => import("./adapter/index.js").DisplayColumnDef<T, unknown>;

package/dist/Table/util.js

@@ -0,0 +1,46 @@
+import ActionsColumn from './ActionsColumn.svelte';
+import RowCheckBox from './RowCheckBox.svelte';
+import { createColumnHelper, renderComponent } from './adapter/index.js';
+export const createCheckedColumn = () => {
+    const columnHelper = createColumnHelper();
+    return columnHelper.display({
+        id: 'checked',
+        header: ({ table }) => renderComponent(RowCheckBox, {
+            checked: table.getIsAllRowsSelected(),
+            indeterminate: table.getIsSomeRowsSelected(),
+            onchange: table.getToggleAllRowsSelectedHandler()
+        }),
+        cell: ({ row }) => renderComponent(RowCheckBox, {
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            indeterminate: row.getIsSomeSelected(),
+            onchange: row.getToggleSelectedHandler()
+        }),
+        meta: {
+            columnWidth: '40px'
+        },
+        enableSorting: false
+    });
+};
+export const createActionsColumn = (getActions) => {
+    const columnHelper = createColumnHelper();
+    return columnHelper.display({
+        id: 'actions',
+        header: 'Actions',
+        enableSorting: false,
+        enableColumnFilter: false,
+        enableGlobalFilter: false,
+        enableHiding: false,
+        meta: {
+            alignColumn: 'center',
+            excludeFromExport: true,
+            columnWidth: '117px',
+            hideColumnFilter: true
+        },
+        cell: ({ row, table }) => renderComponent(ActionsColumn, {
+            actions: getActions(row),
+            isLastChild: table.getRowModel().rows.at(-1).index === row.index,
+            isOnlyOneRow: table.getRowModel().rows.length === 1
+        })
+    });
+};

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import HeaderLogo from './Header/HeaderLogo.svelte';
 import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
 import Home from './Home/Home.svelte';
 import Input from './Controls/Input/Input.svelte';
+import Label from './Controls/Label/Label.svelte';
 import Link from './Link/Link.svelte';
 import Menu from './Menu/Menu.svelte';
 import Modal from './Modal/Modal.svelte';
@@ -52,4 +53,4 @@ import type { Tab } from './Tabs/tabsState.svelte.js';
 import type { Toast } from './Toast/toastState.svelte';
 import type { WaffleItem } from './Waffle/waffleState.svelte.js';
 import type { NotificationProps } from './Notification/notificationState.svelte.js';
-export { Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MainMenu, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type SubMenuItem, type NotificationProps };
+export { Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MainMenu, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type SubMenuItem, type NotificationProps };

package/dist/index.js

@@ -15,6 +15,7 @@ import HeaderLogo from './Header/HeaderLogo.svelte';
 import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
 import Home from './Home/Home.svelte';
 import Input from './Controls/Input/Input.svelte';
+import Label from './Controls/Label/Label.svelte';
 import Link from './Link/Link.svelte';
 import Menu from './Menu/Menu.svelte';
 import Modal from './Modal/Modal.svelte';
@@ -44,7 +45,7 @@ import { addToast } from './Toast/toastState.svelte';
 import { getSubMenuItemsFromMenu } from './Menu/MenuState.svelte';
 export { 
 // Components
-Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, 
+Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, 
 // Functions and helpers
 addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, 
 // Enums

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.9.0",
+	"version": "1.10.1",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -42,10 +42,17 @@
 		"./form": {
 			"types": "./dist/Form/index.d.ts",
 			"svelte": "./dist/Form/index.js"
+		},
+		"./table": {
+			"types": "./dist/Table/index.d.ts",
+			"svelte": "./dist/Table/index.js"
 		}
 	},
 	"peerDependencies": {
+		"@tanstack/table-core": "^8.21.3",
 		"adaptivecards": "^3.0.5",
+		"exceljs": "^4.4.0",
+		"file-saver": "^2.0.5",
 		"svelte": "^5.0.0",
 		"sveltekit-superforms": "^2.0.0",
 		"zod": "^4.0.0"
@@ -59,6 +66,15 @@
 		},
 		"adaptivecards": {
 			"optional": true
+		},
+		"@tanstack/table-core": {
+			"optional": true
+		},
+		"exceljs": {
+			"optional": true
+		},
+		"file-saver": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -67,7 +83,11 @@
 		"@sveltejs/kit": "^2.48.4",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tanstack/table-core": "^8.21.3",
+		"@types/file-saver": "^2.0.7",
 		"adaptivecards": "^3.0.5",
+		"exceljs": "^4.4.0",
+		"file-saver": "^2.0.5",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"publint": "^0.3.15",