svelte-tably 1.0.0-next.5 → 1.0.0-next.6

package/README.md

@@ -65,7 +65,7 @@ A high performant dynamic table
         <Panel id='columns'>
             <!-- Anything you might like -->
         </Panel>
-        <Panel ...>
+        <Panel ... backdrop={false}>
             ...
         </Panel>
     {/snippet}
@@ -81,6 +81,7 @@ For quick styling
 | --tably-bg | background-color | `hsl(0, 0%, 100%)` |
 | --tably-color | color | `hsl(0, 0%, 0%)` |
 | --tably-border | border | `hsl(0, 0%, 90%)` |
+| --tably-statusbar | background-color for the statusbar | `hsl(0, 0%, 98%)` |
 | --tably-padding-y | Padding above/below each column | `.5rem` |
 | --tably-padding-x | Padding left of each column | `1rem` |
 | --tably-radius | Table radius | `.25rem` |

package/dist/{Table/Column.svelte → Column.svelte}

@@ -11,8 +11,19 @@
 <script module lang='ts'>
 	
 	export interface Column<T = unknown, V = unknown> {
-		header: Snippet
-		row: Snippet<[item: T, value?: V]>
+		header?: Snippet<[
+			/** 
+			 * Is true when displaying in the header,
+			 * so additional content can be shown if desired,
+			 * so the header snippet can be re-used.
+			*/
+			header?: boolean
+		]>
+		row: Snippet<[item: T, row: {
+			readonly value: V
+			readonly isHovered: boolean
+			readonly index: number
+		}]>
 		statusbar?: Snippet
 		
 		/** Default options for initial table */
@@ -20,11 +31,13 @@
 			sticky?: boolean
 			sort?: boolean
 			show?: boolean
+			width?: number
 		}
 		/** More options */
 		options: {
 			value?: (item: T) => V
 			sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number
+			resizeable: boolean
 		}
 	}
 
@@ -36,7 +49,7 @@
 	import { getTableState } from './Table.svelte'
 
 	interface Props {
-		header: Column<T, V>['header']
+		header?: Column<T, V>['header']
 		row: Column<T, V>['row']
 		statusbar?: Column<T, V>['statusbar']
 
@@ -46,8 +59,11 @@
 		sticky?: boolean
 		sort?: boolean
 		show?: boolean
+		width?: number
 		value?: Column<T, V>['options']['value']
 		sorting?: Column<T, V>['options']['sorting']
+		/** @default true */
+		resizeable?: boolean
 	}
 
 	let { 
@@ -56,7 +72,9 @@
 		sticky = false,
 		sort = false, 
 		show = true,
-
+		width,
+		
+		resizeable = true,
 		value, sorting
 	}: Props = $props()
 
@@ -67,11 +85,13 @@
 		defaults: {
 			sticky,
 			sort,
-			show
+			show,
+			width
 		},
 		options: {
 			value,
-			sorting
+			sorting,
+			resizeable
 		}
 	})
 
@@ -82,16 +102,4 @@
 		table.removeColumn(id)
 	})
 
-</script>
-<!---------------------------------------------------->
-
-
-
-
-
-<!---------------------------------------------------->
-<style>
-	
-	
-
-</style>
+</script>

package/dist/{Table/Column.svelte.d.ts → Column.svelte.d.ts}

@@ -1,31 +1,50 @@
 export interface Column<T = unknown, V = unknown> {
-    header: Snippet;
-    row: Snippet<[item: T, value?: V]>;
+    header?: Snippet<[
+        /**
+         * Is true when displaying in the header,
+         * so additional content can be shown if desired,
+         * so the header snippet can be re-used.
+        */
+        header?: boolean
+    ]>;
+    row: Snippet<[
+        item: T,
+        row: {
+            readonly value: V;
+            readonly isHovered: boolean;
+            readonly index: number;
+        }
+    ]>;
     statusbar?: Snippet;
     /** Default options for initial table */
     defaults: {
         sticky?: boolean;
         sort?: boolean;
         show?: boolean;
+        width?: number;
     };
     /** More options */
     options: {
         value?: (item: T) => V;
         sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number;
+        resizeable: boolean;
     };
 }
 import { type Snippet } from 'svelte';
 declare class __sveltets_Render<T extends Record<PropertyKey, any>, V = unknown> {
     props(): {
-        header: Column<T_1, V_1>["header"];
+        header?: Column<T_1, V_1>["header"];
         row: Column<T_1, V_1>["row"];
         statusbar?: Column<T_1, V_1>["statusbar"];
         id: string;
         sticky?: boolean;
         sort?: boolean;
         show?: boolean;
+        width?: number;
         value?: Column<T_1, V_1>["options"]["value"];
         sorting?: Column<T_1, V_1>["options"]["sorting"];
+        /** @default true */
+        resizeable?: boolean;
     };
     events(): {};
     slots(): {};

package/dist/{Table/Panel.svelte → Panel.svelte}

@@ -10,10 +10,10 @@
 
 <script module lang='ts'>
 	
-	export interface Panel {
+	export interface Panel<T extends Record<PropertyKey, unknown> = Record<PropertyKey, unknown>> {
 		/** A darkened backdrop? */
 		backdrop: boolean
-		content: Snippet
+		content: Snippet<[context: { readonly table: TableState<T>, readonly data: T[] }]>
 	}
 
 	export class PanelTween {
@@ -38,10 +38,10 @@
 
 </script>
 
-<script lang='ts'>
+<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
 
 	import { onDestroy, type Snippet } from 'svelte'
-	import { getTableState, type TableState } from './Table.svelte'
+	import Table, { getTableState, type TableState } from './Table.svelte'
 	import { Tween } from 'svelte/motion'
 	import { sineInOut } from 'svelte/easing'
 
@@ -50,7 +50,7 @@
 
 		/** A darkened backdrop? */
 		backdrop?: boolean
-		children: Snippet
+		children: Snippet<[context: { readonly table: TableState<T>, readonly data: T[] }]>
 	}
 
 	let {
@@ -59,7 +59,7 @@
 		id
 	}: Props = $props()
 
-	const panel: Panel = $state({
+	const panel: Panel<T> = $state({
 		backdrop,
 		content: children
 	})

package/dist/{prototype/Table.svelte.d.ts → Panel.svelte.d.ts}

@@ -1,35 +1,35 @@
-export interface ColumnOptions {
-    sticky(): ColumnOptions;
+export interface Panel<T extends Record<PropertyKey, unknown> = Record<PropertyKey, unknown>> {
+    /** A darkened backdrop? */
+    backdrop: boolean;
+    content: Snippet<[context: {
+        readonly table: TableState<T>;
+        readonly data: T[];
+    }]>;
 }
-interface Column<T = unknown> {
-    header?: Snippet<[options: ColumnOptions]>;
-    row?: Snippet<[data: T]>;
-    statusbar?: Snippet<[data: T[]]>;
-    defaults?: {
-        sticky?: boolean;
-    };
-}
-export interface TableState<T = unknown> {
-    columns: Record<string, Column<T>>;
-    order: {
-        sticky: string[];
-        scroll: string[];
-    };
-    panels: Record<string, Snippet<[table: TableState]>>;
-    readonly data: T[];
-    updateColumn(key: string, options: Column<T>): void;
+export declare class PanelTween {
+    #private;
+    current: number;
+    transitioning: boolean;
+    /** bind:clientWidth */
+    width: number;
+    set target(value: number);
+    constructor(cb: () => string | undefined, added?: number);
 }
-export declare function getTableState<T>(): TableState<T>;
 import { type Snippet } from 'svelte';
+import { type TableState } from './Table.svelte';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     props(): {
-        children?: Snippet;
-        data: T[];
-        panel?: string;
+        id: string;
+        /** A darkened backdrop? */
+        backdrop?: boolean;
+        children: Snippet<[context: {
+            readonly table: TableState<T>;
+            readonly data: T[];
+        }]>;
     };
     events(): {};
     slots(): {};
-    bindings(): "panel";
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
@@ -46,6 +46,6 @@ interface $$IsomorphicComponent {
  * @example
  * <Component />
  */
-declare const Table: $$IsomorphicComponent;
-type Table<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Table<T>>;
-export default Table;
+declare const Panel: $$IsomorphicComponent;
+type Panel<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Panel<T>>;
+export default Panel;