svelte-tably 1.0.0 → 1.0.1

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

@@ -1,8 +1,100 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
+import { TableState, type TableProps } from './table-state.svelte.js';
+import { type RowColumnCtx } from '../column/column-state.svelte.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
-    props(): any;
+    props(): TableProps<T> & {
+        content?: Snippet<[context: {
+            Column: {
+                <V>(internal: unknown, props: {
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }): {};
+                new <V>(options: import("svelte").ComponentConstructorOptions<{
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }>): SvelteComponent<{
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                } & {};
+            };
+            Panel: {
+                (internal: unknown, props: import("../index.js").PanelProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").PanelProps<T>>): SvelteComponent<import("../index.js").PanelProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Expandable: {
+                (internal: unknown, props: import("../index.js").ExpandableProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").ExpandableProps<T>>): SvelteComponent<import("../index.js").ExpandableProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Row: {
+                (internal: unknown, props: import("../index.js").RowProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").RowProps<T>>): SvelteComponent<import("../index.js").RowProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            readonly table: TableState<T>;
+        }]> | undefined;
+    };
     events(): {};
     slots(): {};
-    bindings(): "data" | "selected" | "panel";
+    bindings(): "selected" | "panel" | "data";
     exports(): {
         toCSV: (opts?: {
             /** Semi-colons as separator? */

package/dist/table/data.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TableProps, TableState } from './table.svelte.js';
+import type { TableProps, TableState } from './table-state.svelte.js';
 export declare class Data<T extends Record<PropertyKey, unknown>> {
     #private;
     origin: T[];

package/dist/table/table-state.svelte.d.ts

@@ -0,0 +1,107 @@
+import { type Snippet } from 'svelte';
+import { ColumnState, type RowColumnCtx } from '../column/column-state.svelte.js';
+import { PanelState } from '../panel/panel-state.svelte.js';
+import { Data } from './data.svelte.js';
+import { type AnyRecord } from '../utility.svelte.js';
+import type { ExpandableState } from '../expandable/expandable-state.svelte.js';
+import type { ItemState } from 'runic-reorder';
+import type { RowState } from '../row/row-state.svelte.js';
+export type HeaderSelectCtx<T extends AnyRecord = any> = {
+    isSelected: boolean;
+    /** The list of selected items */
+    readonly selected: T[];
+    /**
+     * See [MDN :indeterminate](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)
+     */
+    readonly indeterminate: boolean;
+};
+export type RowSelectCtx<T extends AnyRecord = any> = {
+    readonly item: T;
+    readonly row: RowColumnCtx<T, unknown>;
+    data: T[];
+    isSelected: boolean;
+};
+export interface RowCtx<T extends AnyRecord> {
+    readonly rowHovered: boolean;
+    readonly index: number;
+    readonly itemState: ItemState<T> | undefined;
+    selected: boolean;
+    expanded: boolean;
+}
+type SelectOptions<T extends AnyRecord> = {
+    /**
+     * The style, in which the selection is shown
+     *
+     * NOTE: If using `edge` | 'side', "show" will always be `hover`. This is due to
+     * an inconsistency/limitation of matching the scroll between the selection div and the rows.
+     *
+     * @default 'column'
+     */
+    style?: 'column';
+    /**
+     * When to show the row-select, when not selected?
+     * @default 'hover'
+     */
+    show?: 'hover' | 'always' | 'never';
+    /**
+     * Custom snippet
+     */
+    headerSnippet?: Snippet<[context: HeaderSelectCtx]>;
+    rowSnippet?: Snippet<[context: RowSelectCtx<T>]>;
+};
+export type TableProps<T extends AnyRecord> = {
+    id?: string;
+    data: T[];
+    selected?: T[];
+    /** Current visible panel */
+    panel?: string;
+    filters?: ((item: T) => boolean)[];
+    /**
+     * **For a reorderable table, the data is mutated when reordered.**
+     *
+     * Reorderable tables cannot
+     * - Be filtered
+     * - Be sorted
+     * @default false
+    */
+    reorderable?: boolean;
+    /** Whether columns in this table can be resized */
+    resizeable?: boolean;
+    /** Whether to enable selection */
+    select?: boolean | SelectOptions<T>;
+    /** Create missing columns automatically. */
+    auto?: boolean;
+};
+export declare class TableState<T extends AnyRecord> {
+    #private;
+    id: string;
+    dataState: Data<T>;
+    data: T[];
+    columns: Record<string, ColumnState<T, any>>;
+    panels: Record<string, PanelState<T>>;
+    expandable: undefined | ExpandableState<T>;
+    row: undefined | RowState<T>;
+    /** Currently selected items */
+    get selected(): T[];
+    set selected(items: T[]);
+    /** Column positions based on column ids */
+    positions: {
+        fixed: ColumnState<T, any>[];
+        sticky: ColumnState<T, any>[];
+        scroll: ColumnState<T, any>[];
+        hidden: ColumnState<T, any>[];
+    };
+    /** Primarily externally managed options */
+    options: {
+        panel: string | undefined;
+        filters: boolean | ((item: T) => boolean)[];
+        resizeable: boolean;
+        reorderable: boolean;
+        select: boolean | SelectOptions<T>;
+        auto: boolean;
+    };
+    add(state: ColumnState<T, any> | PanelState<T>): (() => void) | undefined;
+    static getContext<T extends AnyRecord>(): TableState<T> | undefined;
+    constructor(tableProps: TableProps<T>);
+}
+export {};

package/dist/table/{table.svelte.js → table-state.svelte.js}

@@ -1,6 +1,6 @@
 import { getContext, setContext } from 'svelte';
-import { ColumnState } from '../column/column.svelte.js';
-import { PanelState } from '../panel/panel.svelte.js';
+import { ColumnState } from '../column/column-state.svelte.js';
+import { PanelState } from '../panel/panel-state.svelte.js';
 import { Data } from './data.svelte.js';
 export class TableState {
     #props = {};

package/dist/table/virtualization.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TableState } from './table.svelte.js';
+import type { TableState } from './table-state.svelte.js';
 export declare class Virtualization<T extends Record<PropertyKey, unknown>> {
     #private;
     scrollTop: number;

package/dist/utility.svelte.d.ts

@@ -1,3 +1,4 @@
+import { Snippet } from 'svelte';
 export type Simplify<T> = T extends infer V ? {
     [K in keyof V]: V[K];
 } : never;
@@ -18,4 +19,6 @@ export declare function assignDescriptors<T extends AnyRecord, B extends AnyReco
 export declare function capitalize(str: string): string;
 /** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
 export declare function segmentize(str: string): string;
+type SnippetLiteralProperties<K extends unknown[], Result extends (() => unknown)[] = []> = K extends [infer First, ...infer Rest] ? SnippetLiteralProperties<Rest, [...Result, () => First]> : Result;
+export declare function snippetLiteral<K extends unknown[]>(snippet: Snippet<K>): ((anchor: Comment, ...args: SnippetLiteralProperties<K>) => ReturnType<typeof snippet>);
 export {};

package/dist/utility.svelte.js

@@ -102,3 +102,6 @@ export function segmentize(str) {
     }
     return result.trim();
 }
+export function snippetLiteral(snippet) {
+    return snippet;
+}

package/package.json

@@ -1,35 +1,30 @@
 {
     "name": "svelte-tably",
-    "version": "1.0.0",
+    "version": "1.0.1",
+    "description": "A high performant dynamic table for Svelte 5",
+    "license": "MIT",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/Refzlund/svelte-tably.git"
     },
-    "license": "MIT",
     "bugs": {
         "url": "https://github.com/Refzlund/svelte-tably/issues"
     },
     "files": [
-        "dist",
-        "!dist/**/*.test.*",
-        "!dist/**/*.spec.*"
-    ],
-    "sideEffects": [
-        "**/*.css"
+        "dist"
     ],
-    "svelte": "./dist/index.js",
-    "types": "./dist/index.d.ts",
     "type": "module",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "default": "./dist/index.js"
+            "default": "./dist/index.js",
+            "svelte": "./dist/index.js"
         }
     },
     "dependencies": {
-        "runic-reorder": "^1.0.0"
+        "runic-reorder": "^1"
     },
     "peerDependencies": {
-        "svelte": "^5.0.0"
+        "svelte": "^5"
     }
 }