sv5ui 1.3.0 → 1.5.0

package/dist/Table/Table.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TableProps } from './table.types.js';
+export type Props = TableProps;
+declare function $$render<T extends Record<string, any>>(): {
+    props: TableProps<T>;
+    exports: {};
+    bindings: "ref" | "page" | "sorting" | "globalFilter" | "columnFilters" | "selectedRows" | "columnVisibility" | "columnPinning" | "pinnedRows" | "expandedRows" | "columnSizing";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, any>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "page" | "sorting" | "globalFilter" | "columnFilters" | "selectedRows" | "columnVisibility" | "columnPinning" | "pinnedRows" | "expandedRows" | "columnSizing";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<string, any>> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Table } from './Table.svelte';
+export type { TableProps, TableColumn, SortState, TableHeaderSlotProps, TableCellSlotProps, TableFooterSlotProps } from './table.types.js';

package/dist/Table/index.js

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/Table/table.types.d.ts

@@ -0,0 +1,199 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { TableVariantProps, TableSlots } from './table.variants.js';
+export interface TableColumn<T> {
+    /** Data accessor key. */
+    key: keyof T & string;
+    /** Header label text. Defaults to capitalized `key`. */
+    label?: string;
+    /** Enable sorting on this column. @default false */
+    sortable?: boolean;
+    /** Custom sort comparator. Receives two rows, returns -1/0/1. */
+    sortFn?: (a: T, b: T) => number;
+    /** Enable column-level filtering. @default false */
+    filterable?: boolean;
+    /** Custom filter function. */
+    filterFn?: (row: T, filterValue: string) => boolean;
+    /** Pin this column to left or right. */
+    pinned?: 'left' | 'right';
+    /** Enable drag-resize on this column. @default false */
+    resizable?: boolean;
+    /** Initial column width in px. */
+    width?: number;
+    /** Minimum column width in px. @default 50 */
+    minWidth?: number;
+    /** Maximum column width in px. */
+    maxWidth?: number;
+    /** Text alignment. @default 'left' */
+    align?: 'left' | 'center' | 'right';
+    /** Header cell colspan. */
+    colspan?: number;
+    /** Header cell rowspan. */
+    rowspan?: number;
+    /** Data cell colspan. */
+    cellColspan?: number;
+    /** Data cell rowspan. */
+    cellRowspan?: number;
+    /** Column visibility. @default true */
+    visible?: boolean;
+    /** Additional CSS class for this column's header cell. */
+    headerClass?: ClassNameValue;
+    /** Additional CSS class for this column's data cell. */
+    cellClass?: ClassNameValue;
+    /** Custom header snippet for this column. */
+    header?: Snippet<[TableHeaderSlotProps<T>]>;
+    /** Custom cell snippet for this column. */
+    cell?: Snippet<[TableCellSlotProps<T>]>;
+    /** Custom footer snippet for this column. */
+    footer?: Snippet<[TableFooterSlotProps<T>]>;
+}
+export interface TableHeaderSlotProps<T> {
+    column: TableColumn<T>;
+    columnIndex: number;
+    sortDirection: 'asc' | 'desc' | null;
+    toggleSort: () => void;
+}
+export interface TableCellSlotProps<T> {
+    row: T;
+    column: TableColumn<T>;
+    rowIndex: number;
+    columnIndex: number;
+    value: unknown;
+}
+export interface TableFooterSlotProps<T> {
+    column: TableColumn<T>;
+    columnIndex: number;
+    rows: T[];
+}
+export interface TableRowSlotProps<T> {
+    row: T;
+    rowIndex: number;
+    selected: boolean;
+    expanded: boolean;
+    toggleExpand: () => void;
+    toggleSelect: () => void;
+}
+export type SortDirection = 'asc' | 'desc';
+export interface SortItem {
+    key: string;
+    direction: SortDirection;
+}
+export type SortState = SortItem[];
+export interface TableProps<T extends Record<string, any> = Record<string, any>> extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    /** Bindable reference to the root wrapper DOM element. */
+    ref?: HTMLElement | null;
+    /**
+     * The HTML element the root should render as.
+     * @default 'div'
+     */
+    as?: 'div' | 'section' | 'article' | 'aside' | 'main';
+    /** Array of row data objects. @default [] */
+    data?: T[];
+    /** Column definitions. Auto-generated from data keys if omitted. */
+    columns?: TableColumn<T>[];
+    /** Unique row identifier key. Falls back to row index. */
+    rowKey?: keyof T & string;
+    /** Table caption text (rendered as sr-only for accessibility). */
+    caption?: string;
+    /** Current sort state. Use `bind:sorting` for two-way binding. */
+    sorting?: SortState;
+    /** Allow multi-column sorting via shift+click. @default false */
+    multiSort?: boolean;
+    /** Disable client-side sorting (for server-side). @default false */
+    manualSorting?: boolean;
+    /** Callback fired when sort state changes. */
+    onSortingChange?: (sorting: SortState) => void;
+    /** Global filter search string. Use `bind:globalFilter`. */
+    globalFilter?: string;
+    /** Limit global filter to specific column keys. Defaults to all string columns. */
+    globalFilterKeys?: (keyof T & string)[];
+    /** Disable client-side filtering. @default false */
+    manualFiltering?: boolean;
+    /** Callback fired when global filter changes. */
+    onGlobalFilterChange?: (value: string) => void;
+    /** Per-column filter values. Use `bind:columnFilters`. */
+    columnFilters?: Record<string, string>;
+    /** Callback fired when column filters change. */
+    onColumnFiltersChange?: (filters: Record<string, string>) => void;
+    /** Current page index (0-based). Use `bind:page`. */
+    page?: number;
+    /** Rows per page. @default 10 */
+    pageSize?: number;
+    /** Disable client-side pagination. @default false */
+    manualPagination?: boolean;
+    /** Total row count (required for manualPagination). */
+    total?: number;
+    /** Callback fired when page changes. */
+    onPageChange?: (page: number) => void;
+    /** Selection mode. undefined = disabled. */
+    selection?: 'single' | 'multiple';
+    /** Currently selected rows. Use `bind:selectedRows`. */
+    selectedRows?: T[];
+    /** Callback fired when selection changes. */
+    onSelectionChange?: (rows: T[]) => void;
+    /** Column visibility map. Use `bind:columnVisibility`. */
+    columnVisibility?: Record<string, boolean>;
+    /** Callback fired when visibility changes. */
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
+    /** Column pinning configuration. Use `bind:columnPinning`. */
+    columnPinning?: {
+        left?: string[];
+        right?: string[];
+    };
+    /** Row keys to pin at the top of the table. Use `bind:pinnedRows`. */
+    pinnedRows?: (string | number)[];
+    /** Callback fired when pinned rows change. */
+    onPinnedRowsChange?: (keys: (string | number)[]) => void;
+    /** Expanded row keys. Use `bind:expandedRows`. */
+    expandedRows?: (string | number)[];
+    /** Callback fired when expanded rows change. */
+    onExpandedChange?: (keys: (string | number)[]) => void;
+    /** Column width overrides (key -> px). Use `bind:columnSizing`. */
+    columnSizing?: Record<string, number>;
+    /** Callback fired when column sizing changes. */
+    onColumnSizingChange?: (sizing: Record<string, number>) => void;
+    /** Show loading progress bar. @default false */
+    loading?: boolean;
+    /** Loading bar color. @default 'primary' */
+    loadingColor?: NonNullable<TableVariantProps['loadingColor']>;
+    /** Loading bar animation. @default 'carousel' */
+    loadingAnimation?: NonNullable<TableVariantProps['loadingAnimation']>;
+    /** Text shown when data is empty. @default 'No data.' */
+    empty?: string;
+    /** Alternate row background colors. @default false */
+    striped?: boolean;
+    /** Show hover effect on interactive rows. @default true */
+    hoverable?: boolean;
+    /** Sticky header/footer. @default false */
+    sticky?: boolean | 'header' | 'footer';
+    /** Callback fired when a row is clicked. */
+    onRowClick?: (row: T, index: number, event: MouseEvent) => void;
+    /** Callback fired when pointer enters/leaves a row. Passes `null` on leave. */
+    onRowHover?: (row: T | null, index: number, event: PointerEvent) => void;
+    /** Callback fired on row right-click. */
+    onRowContextmenu?: (row: T, index: number, event: MouseEvent) => void;
+    /** Additional CSS classes for the root element. */
+    class?: ClassNameValue;
+    /** Override styles for specific table slots. */
+    ui?: Partial<Record<TableSlots, ClassNameValue>>;
+    /** Custom caption snippet. */
+    captionSlot?: Snippet;
+    /** Custom empty state snippet. */
+    emptySlot?: Snippet;
+    /** Custom loading state snippet. */
+    loadingSlot?: Snippet;
+    /** Custom expanded row content. */
+    expandedSlot?: Snippet<[{
+        row: T;
+        rowIndex: number;
+    }]>;
+    /** Custom content rendered before data rows in tbody. */
+    bodyTopSlot?: Snippet;
+    /** Custom content rendered after data rows in tbody. */
+    bodyBottomSlot?: Snippet;
+    /** Global header override snippet. */
+    headerSlot?: Snippet<[TableHeaderSlotProps<T>]>;
+    /** Global cell override snippet. */
+    cellSlot?: Snippet<[TableCellSlotProps<T>]>;
+}

package/dist/Table/table.types.js

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

package/dist/Table/table.utils.d.ts

@@ -0,0 +1,51 @@
+import type { TableColumn, SortState } from './table.types.js';
+/**
+ * Auto-generate columns from the first data row's keys.
+ */
+export declare function autoGenerateColumns<T extends Record<string, any>>(data: T[]): TableColumn<T>[];
+/**
+ * Resolve a row's unique key.
+ */
+export declare function getRowKey<T extends Record<string, any>>(row: T, rowKey: (keyof T & string) | undefined, index: number): string | number;
+/**
+ * Sort data by the given sort state, supporting multi-column sort.
+ */
+export declare function sortData<T extends Record<string, any>>(data: T[], sorting: SortState, columns: TableColumn<T>[]): T[];
+/**
+ * Filter data by global filter string across specified keys.
+ */
+export declare function filterByGlobal<T extends Record<string, any>>(data: T[], globalFilter: string, filterKeys?: (keyof T & string)[]): T[];
+/**
+ * Filter data by per-column filter values.
+ */
+export declare function filterByColumns<T extends Record<string, any>>(data: T[], columnFilters: Record<string, string>, columns: TableColumn<T>[]): T[];
+/**
+ * Paginate data — returns a slice for the given page.
+ */
+export declare function paginateData<T>(data: T[], page: number, pageSize: number): T[];
+/**
+ * Compute total pages.
+ */
+export declare function getTotalPages(totalRows: number, pageSize: number): number;
+/**
+ * Order columns: left-pinned first, unpinned in original order, right-pinned last.
+ * Also filter by visibility.
+ */
+export declare function resolveVisibleColumns<T extends Record<string, any>>(columns: TableColumn<T>[], columnVisibility?: Record<string, boolean>, columnPinning?: {
+    left?: string[];
+    right?: string[];
+}): TableColumn<T>[];
+/**
+ * Compute cumulative left/right offsets for pinned columns.
+ */
+export declare function computePinOffsets<T extends Record<string, any>>(columns: TableColumn<T>[], columnSizing: Record<string, number>, columnPinning?: {
+    left?: string[];
+    right?: string[];
+}): Map<string, {
+    side: 'left' | 'right';
+    offset: number;
+}>;
+/**
+ * Format cell value for display — handles null/undefined/empty string.
+ */
+export declare function formatCellValue(value: unknown): string;

package/dist/Table/table.utils.js

@@ -0,0 +1,166 @@
+/**
+ * Auto-generate columns from the first data row's keys.
+ */
+export function autoGenerateColumns(data) {
+    if (data.length === 0)
+        return [];
+    return Object.keys(data[0]).map((key) => ({
+        key: key,
+        label: key.charAt(0).toUpperCase() + key.slice(1)
+    }));
+}
+/**
+ * Resolve a row's unique key.
+ */
+export function getRowKey(row, rowKey, index) {
+    if (rowKey && row[rowKey] !== undefined)
+        return row[rowKey];
+    return index;
+}
+/**
+ * Default sort comparator — handles string, number, boolean, null/undefined.
+ */
+function defaultCompare(a, b) {
+    if (a === b)
+        return 0;
+    if (a === null || a === undefined)
+        return 1;
+    if (b === null || b === undefined)
+        return -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    if (typeof a === 'boolean' && typeof b === 'boolean')
+        return a === b ? 0 : a ? -1 : 1;
+    return String(a).localeCompare(String(b));
+}
+/**
+ * Sort data by the given sort state, supporting multi-column sort.
+ */
+export function sortData(data, sorting, columns) {
+    if (sorting.length === 0)
+        return data;
+    const columnMap = new Map(columns.map((c) => [c.key, c]));
+    const sorted = [...data];
+    sorted.sort((a, b) => {
+        for (const { key, direction } of sorting) {
+            const col = columnMap.get(key);
+            const multiplier = direction === 'desc' ? -1 : 1;
+            let result;
+            if (col?.sortFn) {
+                result = col.sortFn(a, b);
+            }
+            else {
+                result = defaultCompare(a[key], b[key]);
+            }
+            if (result !== 0)
+                return result * multiplier;
+        }
+        return 0;
+    });
+    return sorted;
+}
+/**
+ * Filter data by global filter string across specified keys.
+ */
+export function filterByGlobal(data, globalFilter, filterKeys) {
+    if (!globalFilter)
+        return data;
+    const search = globalFilter.toLowerCase();
+    return data.filter((row) => {
+        const keys = filterKeys ?? Object.keys(row);
+        return keys.some((key) => {
+            const val = row[key];
+            if (val === null || val === undefined)
+                return false;
+            return String(val).toLowerCase().includes(search);
+        });
+    });
+}
+/**
+ * Filter data by per-column filter values.
+ */
+export function filterByColumns(data, columnFilters, columns) {
+    const activeFilters = Object.entries(columnFilters).filter(([, v]) => v !== '');
+    if (activeFilters.length === 0)
+        return data;
+    const columnMap = new Map(columns.map((c) => [c.key, c]));
+    return data.filter((row) => activeFilters.every(([key, filterValue]) => {
+        const col = columnMap.get(key);
+        if (col?.filterFn)
+            return col.filterFn(row, filterValue);
+        const val = row[key];
+        if (val === null || val === undefined)
+            return false;
+        return String(val).toLowerCase().includes(filterValue.toLowerCase());
+    }));
+}
+/**
+ * Paginate data — returns a slice for the given page.
+ */
+export function paginateData(data, page, pageSize) {
+    const start = page * pageSize;
+    return data.slice(start, start + pageSize);
+}
+/**
+ * Compute total pages.
+ */
+export function getTotalPages(totalRows, pageSize) {
+    return Math.max(1, Math.ceil(totalRows / pageSize));
+}
+/**
+ * Order columns: left-pinned first, unpinned in original order, right-pinned last.
+ * Also filter by visibility.
+ */
+export function resolveVisibleColumns(columns, columnVisibility, columnPinning) {
+    const visible = columns.filter((col) => {
+        if (col.visible === false)
+            return false;
+        if (columnVisibility && columnVisibility[col.key] === false)
+            return false;
+        return true;
+    });
+    if (!columnPinning)
+        return visible;
+    const leftKeys = new Set(columnPinning.left ?? []);
+    const rightKeys = new Set(columnPinning.right ?? []);
+    const left = visible.filter((c) => leftKeys.has(c.key));
+    const center = visible.filter((c) => !leftKeys.has(c.key) && !rightKeys.has(c.key));
+    const right = visible.filter((c) => rightKeys.has(c.key));
+    return [...left, ...center, ...right];
+}
+/**
+ * Compute cumulative left/right offsets for pinned columns.
+ */
+export function computePinOffsets(columns, columnSizing, columnPinning) {
+    const offsets = new Map();
+    if (!columnPinning)
+        return offsets;
+    const leftKeys = columnPinning.left ?? [];
+    const rightKeys = columnPinning.right ?? [];
+    let leftOffset = 0;
+    for (const key of leftKeys) {
+        const col = columns.find((c) => c.key === key);
+        if (!col)
+            continue;
+        offsets.set(key, { side: 'left', offset: leftOffset });
+        leftOffset += columnSizing[key] ?? col.width ?? 150;
+    }
+    let rightOffset = 0;
+    for (let i = rightKeys.length - 1; i >= 0; i--) {
+        const key = rightKeys[i];
+        const col = columns.find((c) => c.key === key);
+        if (!col)
+            continue;
+        offsets.set(key, { side: 'right', offset: rightOffset });
+        rightOffset += columnSizing[key] ?? col.width ?? 150;
+    }
+    return offsets;
+}
+/**
+ * Format cell value for display — handles null/undefined/empty string.
+ */
+export function formatCellValue(value) {
+    if (value === null || value === undefined || value === '')
+        return '\u00A0';
+    return String(value);
+}

package/dist/Table/table.variants.d.ts

@@ -0,0 +1,205 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tableVariants: import("tailwind-variants").TVReturnType<{
+    pinned: {
+        true: {
+            th: string;
+            td: string;
+        };
+    };
+    hoverable: {
+        true: {
+            tbody: string;
+        };
+    };
+    sticky: {
+        true: {
+            thead: string;
+            tfoot: string;
+        };
+        header: {
+            thead: string;
+        };
+        footer: {
+            tfoot: string;
+        };
+    };
+    striped: {
+        true: {
+            tbody: string;
+        };
+    };
+    loading: {
+        true: {
+            thead: string;
+        };
+    };
+    loadingColor: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    loadingAnimation: {
+        carousel: string;
+        'carousel-inverse': string;
+        swing: string;
+        elastic: string;
+    };
+}, {
+    root: string;
+    base: string;
+    caption: string;
+    thead: string;
+    tbody: string[];
+    tfoot: string;
+    tr: string;
+    th: string[];
+    td: string[];
+    separator: string;
+    empty: string;
+    loading: string;
+}, undefined, {
+    pinned: {
+        true: {
+            th: string;
+            td: string;
+        };
+    };
+    hoverable: {
+        true: {
+            tbody: string;
+        };
+    };
+    sticky: {
+        true: {
+            thead: string;
+            tfoot: string;
+        };
+        header: {
+            thead: string;
+        };
+        footer: {
+            tfoot: string;
+        };
+    };
+    striped: {
+        true: {
+            tbody: string;
+        };
+    };
+    loading: {
+        true: {
+            thead: string;
+        };
+    };
+    loadingColor: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    loadingAnimation: {
+        carousel: string;
+        'carousel-inverse': string;
+        swing: string;
+        elastic: string;
+    };
+}, {
+    root: string;
+    base: string;
+    caption: string;
+    thead: string;
+    tbody: string[];
+    tfoot: string;
+    tr: string;
+    th: string[];
+    td: string[];
+    separator: string;
+    empty: string;
+    loading: string;
+}, import("tailwind-variants").TVReturnType<{
+    pinned: {
+        true: {
+            th: string;
+            td: string;
+        };
+    };
+    hoverable: {
+        true: {
+            tbody: string;
+        };
+    };
+    sticky: {
+        true: {
+            thead: string;
+            tfoot: string;
+        };
+        header: {
+            thead: string;
+        };
+        footer: {
+            tfoot: string;
+        };
+    };
+    striped: {
+        true: {
+            tbody: string;
+        };
+    };
+    loading: {
+        true: {
+            thead: string;
+        };
+    };
+    loadingColor: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    loadingAnimation: {
+        carousel: string;
+        'carousel-inverse': string;
+        swing: string;
+        elastic: string;
+    };
+}, {
+    root: string;
+    base: string;
+    caption: string;
+    thead: string;
+    tbody: string[];
+    tfoot: string;
+    tr: string;
+    th: string[];
+    td: string[];
+    separator: string;
+    empty: string;
+    loading: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableVariantProps = VariantProps<typeof tableVariants>;
+export type TableSlots = keyof ReturnType<typeof tableVariants>;
+export declare const tableDefaults: {
+    defaultVariants: {
+        hoverable: true;
+        loadingColor: "primary";
+        loadingAnimation: "carousel";
+        loading?: boolean | undefined;
+        sticky?: boolean | "footer" | "header" | undefined;
+        pinned?: boolean | undefined;
+        striped?: boolean | undefined;
+    };
+    slots: Partial<Record<TableSlots, string>>;
+};