svelte-tably 1.0.0-next.1 → 1.0.0-next.11

package/dist/Table.svelte.d.ts

@@ -0,0 +1,107 @@
+import { SvelteComponent } from "svelte";
+export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
+    columns: Record<string, ColumnState<T>>;
+    panels: Record<string, TPanel<T>>;
+    selected: T[] | null;
+    sortby?: string;
+    sortReverse: boolean;
+    positions: {
+        sticky: string[];
+        scroll: string[];
+        hidden: string[];
+        toggle(key: string): void;
+    };
+    readonly resizeable: boolean;
+    readonly data: T[];
+    /** Rows become anchors */
+    readonly href?: (item: T) => string;
+    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 { 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: {
+                <V>(internal: unknown, props: ColumnProps<T, V>): {};
+                new <V>(options: import("svelte").ComponentConstructorOptions<ColumnProps<T, V>>): SvelteComponent<ColumnProps<T, V>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                } & {};
+            };
+            Panel: typeof Panel;
+            readonly table: TableState<T>;
+            readonly data: T[];
+        }]>;
+        panel?: string;
+        data?: T[] | undefined;
+        id?: string;
+        href?: ((item: T) => string) | undefined;
+        /**
+         * Can you change the width of the columns?
+         * @default true
+         */
+        resizeable?: boolean;
+        filters?: ((item: T) => boolean)[] | undefined;
+        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(): "selected" | "panel";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<PropertyKey, unknown>>(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<PropertyKey, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/index.d.ts

@@ -1 +1,3 @@
-export * from './Table/index.js';
+export { default as default } from './Table.svelte';
+export { default as Panel } from './Panel.svelte';
+export { default as Column } from './Column.svelte';

package/dist/index.js

@@ -1 +1,3 @@
-export * from './Table/index.js';
+export { default as default } from './Table.svelte';
+export { default as Panel } from './Panel.svelte';
+export { default as Column } from './Column.svelte';

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.1",
+	"version": "1.0.0-next.11",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {
@@ -11,7 +11,9 @@
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"floating-runes": "^1.0.0",
 		"publint": "^0.2.0",
+		"runic-reorder": "^1.0.0-next.1",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",

package/dist/Table/Column.svelte

@@ -1,98 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script module lang='ts'>
-	
-	export interface Column<T = unknown, V = unknown> {
-		header: Snippet
-		row: Snippet<[item: T, value?: V]>
-		statusbar?: Snippet<[data: T[]]>
-		
-		/** Default options for initial table */
-		defaults: {
-			sticky?: boolean
-			sort?: boolean
-			show?: boolean
-		}
-		/** More options */
-		options: {
-			value?: (item: T) => V
-			sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number
-		}
-	}
-
-</script>
-
-<script lang='ts' generics='T extends Record<PropertyKey, any>, V'>
-
-	import { onDestroy, type Snippet } from 'svelte'
-	import { getTableState } from './Table.svelte'
-
-	interface Props {
-		header: Column<T, V>['header']
-		row: Column<T, V>['row']
-		statusbar?: Column<T, V>['statusbar']
-
-		// options
-		sticky?: boolean
-		sort?: boolean
-		show?: boolean
-		value?: Column<T, V>['options']['value']
-		sorting?: Column<T, V>['options']['sorting']
-	}
-
-	let { 
-		header, row, statusbar, 
-		
-		sticky = false,
-		sort = false, 
-		show = true,
-
-		value, sorting,
-
-		...rest
-	}: Props = $props()
-	const key = (rest as unknown as { __key: string }).__key
-
-	const column: Column<T, V> = $state({
-		header,
-		row,
-		statusbar,
-		defaults: {
-			sticky,
-			sort,
-			show
-		},
-		options: {
-			value,
-			sorting
-		}
-	})
-
-	const table = getTableState()
-	table.addColumn(key, column as Column)
-
-	onDestroy(() => {
-		table.removeColumn(key)
-	})
-
-</script>
-<!---------------------------------------------------->
-
-
-
-
-
-<!---------------------------------------------------->
-<style>
-	
-	
-
-</style>

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

@@ -1,50 +0,0 @@
-export interface Column<T = unknown, V = unknown> {
-    header: Snippet;
-    row: Snippet<[item: T, value?: V]>;
-    statusbar?: Snippet<[data: T[]]>;
-    /** Default options for initial table */
-    defaults: {
-        sticky?: boolean;
-        sort?: boolean;
-        show?: boolean;
-    };
-    /** More options */
-    options: {
-        value?: (item: T) => V;
-        sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number;
-    };
-}
-import { type Snippet } from 'svelte';
-declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
-    props(): {
-        header: Column<T_1, V_1>["header"];
-        row: Column<T_1, V_1>["row"];
-        statusbar?: Column<T_1, V_1>["statusbar"];
-        sticky?: boolean;
-        sort?: boolean;
-        show?: boolean;
-        value?: Column<T_1, V_1>["options"]["value"];
-        sorting?: Column<T_1, V_1>["options"]["sorting"];
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Record<PropertyKey, any>, V>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, V>['props']>, ReturnType<__sveltets_Render<T, V>['events']>, ReturnType<__sveltets_Render<T, V>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, V>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, V>['exports']>;
-    <T extends Record<PropertyKey, any>, V>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {}): ReturnType<__sveltets_Render<T, V>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-/**
- * This is a description, \
- * on how to use this.
- *
- * @example
- * <Component />
- */
-declare const Column: $$IsomorphicComponent;
-type Column<T extends Record<PropertyKey, any>, V> = InstanceType<typeof Column<T, V>>;
-export default Column;

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

@@ -1,31 +0,0 @@
-export interface Panel {
-    /** A darkened backdrop? */
-    backdrop: boolean;
-    content: Snippet<[table: TableState]>;
-}
-export declare class PanelTween {
-    #private;
-    current: number;
-    transitioning: boolean;
-    /** bind:clientWidth */
-    width: number;
-    set target(value: number);
-    constructor(cb: () => string | undefined);
-}
-import { type Snippet } from 'svelte';
-import { type TableState } from './Table.svelte';
-interface Props {
-    /** A darkened backdrop? */
-    backdrop?: boolean;
-    children: Snippet<[table: TableState]>;
-}
-/**
- * This is a description, \
- * on how to use this.
- *
- * @example
- * <Component />
- */
-declare const Panel: import("svelte").Component<Props, {}, "">;
-type Panel = ReturnType<typeof Panel>;
-export default Panel;