svelte-tably 1.0.0-next.7 → 1.0.0-next.9

package/dist/Table.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
 export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
-    columns: Record<string, TColumn<T, unknown>>;
+    columns: Record<string, ColumnState<T>>;
     panels: Record<string, TPanel<T>>;
     selected: T[] | null;
     sortby?: string;
+    sortReverse: boolean;
     positions: {
         sticky: string[];
         scroll: string[];
@@ -14,58 +15,36 @@ export interface TableState<T extends Record<PropertyKey, any> = Record<Property
     readonly data: T[];
     /** Rows become anchors */
     readonly href?: (item: T) => string;
-    addColumn(key: string, options: TColumn<T, unknown>): void;
+    addColumn(key: string, options: ColumnState<T>): void;
     removeColumn(key: string): void;
 }
 export declare function getTableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>>(): TableState<T>;
+export type HeaderSelectCtx<T = 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 = any> = {
+    readonly item: T;
+    readonly row: RowCtx<unknown>;
+    data: T[];
+    isSelected: boolean;
+};
 import { type Snippet } from 'svelte';
-import Column, { type Column as TColumn } from './Column.svelte';
+import { type ColumnProps, type RowCtx, type ColumnState } from './Column.svelte';
 import Panel, { type Panel as TPanel } from './Panel.svelte';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     props(): {
         content: Snippet<[context: {
             Column: {
-                (internal: unknown, props: {
-                    header?: Column<T_1, V>["header"];
-                    row: Column<T_1, V>["row"];
-                    statusbar?: Column<T_1, V>["statusbar"];
-                    id: string;
-                    sticky?: boolean;
-                    sort?: boolean;
-                    show?: boolean;
-                    width?: number;
-                    value?: Column<T_1, V>["options"]["value"];
-                    sorting?: Column<T_1, V>["options"]["sorting"];
-                    resizeable?: boolean;
-                }): {};
-                new (options: import("svelte").ComponentConstructorOptions<{
-                    header?: Column<T_1, V>["header"];
-                    row: Column<T_1, V>["row"];
-                    statusbar?: Column<T_1, V>["statusbar"];
-                    id: string;
-                    sticky?: boolean;
-                    sort?: boolean;
-                    show?: boolean;
-                    width?: number;
-                    value?: Column<T_1, V>["options"]["value"];
-                    sorting?: Column<T_1, V>["options"]["sorting"];
-                    resizeable?: boolean;
-                }>): SvelteComponent<{
-                    header?: Column<T_1, V>["header"];
-                    row: Column<T_1, V>["row"];
-                    statusbar?: Column<T_1, V>["statusbar"];
-                    id: string;
-                    sticky?: boolean;
-                    sort?: boolean;
-                    show?: boolean;
-                    width?: number;
-                    value?: Column<T_1, V>["options"]["value"];
-                    sorting?: Column<T_1, V>["options"]["sorting"];
-                    resizeable?: boolean;
-                }, {}, {}> & {
+                <V>(internal: unknown, props: ColumnProps<T, V>): {};
+                new <V>(options: import("svelte").ComponentConstructorOptions<ColumnProps<T, V>>): SvelteComponent<ColumnProps<T, V>, {}, {}> & {
                     $$bindings?: ReturnType<() => "">;
-                };
-                z_$$bindings?: ReturnType<() => "">;
+                } & {};
             };
             Panel: typeof Panel;
             readonly table: TableState<T>;
@@ -78,15 +57,40 @@ declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
         /**
          * Can you change the width of the columns?
          * @default true
-        */
+         */
         resizeable?: boolean;
-        selectable?: "hover" | "always" | "never";
+        selected?: T[] | undefined;
+        select?: boolean | {
+            /**
+             * 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>]> | undefined;
+        } | undefined;
     };
     events(): {};
     slots(): {};
-    bindings(): "panel";
+    bindings(): "selected" | "panel";
     exports(): {
-        state: TableState<T>;
+        selected: T[];
+        positions: TableState<T_1>["positions"];
+        data: T[];
+        href: ((item: T) => string) | undefined;
+        columns: Record<string, ColumnState<T, unknown, ColumnProps<T, unknown>>>;
     };
 }
 interface $$IsomorphicComponent {

package/dist/trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare class Trigger<T> {
+    #private;
+    constructor();
+    trigger(value?: T): void;
+    onTrigger<E extends HTMLElement>(node: E, fn: (node: E, value?: T) => void): {
+        destroy: () => boolean;
+    };
+    /** Subscribe to the trigger; returns the value if any. */
+    get current(): T | undefined;
+}

package/dist/trigger.svelte.js

@@ -0,0 +1,27 @@
+import { createSubscriber } from 'svelte/reactivity';
+export class Trigger {
+    #subscribe;
+    #update = () => { };
+    #subscribers = new Set();
+    #value;
+    constructor() {
+        this.#subscribe = createSubscriber(update => this.#update = update);
+    }
+    trigger(value) {
+        this.#value = value;
+        this.#update();
+        this.#subscribers.forEach(fn => fn(value));
+    }
+    onTrigger(node, fn) {
+        const f = (value) => fn(node, value);
+        this.#subscribers.add(f);
+        return {
+            destroy: () => this.#subscribers.delete(f)
+        };
+    }
+    /** Subscribe to the trigger; returns the value if any. */
+    get current() {
+        this.#subscribe();
+        return this.#value;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.7",
+	"version": "1.0.0-next.9",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {