svelte-tably 1.0.0-next.3 → 1.0.0-next.4

package/README.md

@@ -23,52 +23,48 @@ A high performant dynamic table
 
 ### Usage Notes
 
-Simple example.
-
-Create a state for your data and a state for your active panel:
-
-```markdown
+```html
 <script lang='ts'>
-  import { Table } from '$lib/index.js'
+    import Table from 'svelte-tably'
 
-  const data = $state([
-    { name: 'John Doe', age: 30, email: 'johndoe@example.com' },
-    { name: 'Jane Doe', age: 25, email: 'janedoe@example.com' },
-  ])
-</script>
+    const data = $state([
+        { name: 'John Doe', age: 30, email: 'johndoe@example.com' },
+        { name: 'Jane Doe', age: 25, email: 'janedoe@example.com' },
+    ])
 
-<Table {data}>
-  <Table.Name>
-    {#snippet header()}
-      Name
-    {/snippet}
-    {#snippet row(item)}
-      {item.name}
-    {/snippet}
-  </Table.Name>
-  <Table.Age>
-    {#snippet header()}
-      Age
-    {/snippet}
-    {#snippet row(item)}
-      {item.age}
-    {/snippet}
-  </Table.Age>
-  <Table.Email>
-    {#snippet header()}
-      Email
-    {/snippet}
-    {#snippet row(item)}
-      {item.email}
-    {/snippet}
-  </Table.Email>
-</Table>
-```
+	let activePanel = $state('columns') as string | undefined
+</script>
 
-To create a column, simply add a new `<Table.ColumnName>` component inside the `<Table>` component. Replace `ColumnName` with the actual name of the column you want to create.
+<Table {data} panel={activePanel}>
+    {#snippet content({ Column, Panel, state, data })}
+        <Column id='name' sticky>
+		    {#snippet header()}
+			    Name
+			{/snippet}
+		    {#snippet row(row)}
+			    {row.name}
+			{/snippet}
 
-Inside the column component, you need to define three snippets:
+			<!-- Optional per column. -->
+		    {#snippet statusbar()}
+			    {data.length}
+			{/snippet}
+		</Column>
+		<Column ...>
+		   ...
+		</Column>
+		<!-- If you want to sort/filter a virtual value, that does not exist in the data -->
+		<Column id='virtual' value={row => row.age > 18}>
+			...
+			{#snippet row(row, virtual)}
+			    {virtual ? 'Adult' : 'Adolescent'}
+			{/snippet}
+			...
+		</Column>
 
-* `header`: the content of the column header
-* `row`: the content of each row in the column
-* `statusbar`: (optional) the content of the status bar for the column
+		<Panel id='columns'>
+			<!-- Anything you might like -->
+		</Panel>
+    {/snippet}
+</Table>
+```

package/dist/Table/Column.svelte

@@ -30,7 +30,7 @@
 
 </script>
 
-<script lang='ts' generics='T extends Record<PropertyKey, any>, V'>
+<script lang='ts' generics='T extends Record<PropertyKey, any>, V = unknown'>
 
 	import { onDestroy, type Snippet } from 'svelte'
 	import { getTableState } from './Table.svelte'
@@ -40,6 +40,8 @@
 		row: Column<T, V>['row']
 		statusbar?: Column<T, V>['statusbar']
 
+		id: string
+
 		// options
 		sticky?: boolean
 		sort?: boolean
@@ -49,17 +51,14 @@
 	}
 
 	let { 
-		header, row, statusbar, 
+		header, row, statusbar, id,
 		
 		sticky = false,
 		sort = false, 
 		show = true,
 
-		value, sorting,
-
-		...rest
+		value, sorting
 	}: Props = $props()
-	const key = (rest as unknown as { __key: string }).__key
 
 	const column: Column<T, V> = $state({
 		header,
@@ -77,10 +76,10 @@
 	})
 
 	const table = getTableState()
-	table.addColumn(key, column as Column)
+	table.addColumn(id, column as Column)
 
 	onDestroy(() => {
-		table.removeColumn(key)
+		table.removeColumn(id)
 	})
 
 </script>

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

@@ -15,11 +15,12 @@ export interface Column<T = unknown, V = unknown> {
     };
 }
 import { type Snippet } from 'svelte';
-declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
+declare class __sveltets_Render<T extends Record<PropertyKey, any>, V = unknown> {
     props(): {
         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;
@@ -32,10 +33,10 @@ declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
     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']>> & {
+    new <T extends Record<PropertyKey, any>, V = unknown>(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']>;
+    <T extends Record<PropertyKey, any>, V = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {}): ReturnType<__sveltets_Render<T, V>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
@@ -46,5 +47,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Column: $$IsomorphicComponent;
-type Column<T extends Record<PropertyKey, any>, V> = InstanceType<typeof Column<T, V>>;
+type Column<T extends Record<PropertyKey, any>, V = unknown> = InstanceType<typeof Column<T, V>>;
 export default Column;

package/dist/Table/Panel.svelte

@@ -46,6 +46,8 @@
 	import { sineInOut } from 'svelte/easing'
 
 	interface Props {
+		id: string
+
 		/** A darkened backdrop? */
 		backdrop?: boolean
 		children: Snippet<[table: TableState]>
@@ -54,20 +56,19 @@
 	let {
 		backdrop = true,
 		children,
-		...rest
+		id
 	}: Props = $props()
-	const key = (rest as unknown as { __key: string }).__key
-	
+
 	const panel: Panel = $state({
 		backdrop,
 		content: children
 	})
 
 	const table = getTableState()
-	table.panels[key] = panel
+	table.panels[id] = panel
 
 	onDestroy(() => {
-		delete table.panels[key]
+		delete table.panels[id]
 	})
 
 </script>

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

@@ -15,6 +15,7 @@ export declare class PanelTween {
 import { type Snippet } from 'svelte';
 import { type TableState } from './Table.svelte';
 interface Props {
+    id: string;
     /** A darkened backdrop? */
     backdrop?: boolean;
     children: Snippet<[table: TableState]>;

package/dist/Table/Table.svelte

@@ -11,8 +11,8 @@
 <script module lang='ts'>
 	
 	export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
-		columns: Record<string, Column<T, unknown>>
-		panels: Record<string, Panel>
+		columns: Record<string, TColumn<T, unknown>>
+		panels: Record<string, TPanel>
 		sortby?: string
 		positions: {
 			sticky: string[]
@@ -21,7 +21,7 @@
 			toggle(key: string): void
 		}
 		readonly data: T[]
-		addColumn(key: string, options: Column<T, unknown>): void
+		addColumn(key: string, options: TColumn<T, unknown>): void
 		removeColumn(key: string): void
 	}
 
@@ -34,20 +34,22 @@
 <script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
 
 	import { getContext, setContext, untrack, type Snippet } from 'svelte'
-	import { type Column } from './Column.svelte'
-	import { PanelTween, type Panel } from './Panel.svelte'
+	import Column, { type Column as TColumn } from './Column.svelte'
+	import Panel, { PanelTween, type Panel as TPanel } from './Panel.svelte'
 	import { fly } from 'svelte/transition'
 	import { sineInOut } from 'svelte/easing'
 
 	interface Props {
-		children?: Snippet
+		content: Snippet<[context: { Column: typeof Column<T>, Panel: typeof Panel, state: TableState<T> }]>
+
 		panel?: string
 		data?: T[]
 		id?: string
 	}
 
 	let {
-		children,
+		content,
+
 		panel,
 		data: _data = [],
 		id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
@@ -55,7 +57,7 @@
 	
 	const data = $derived(_data.toSorted())
 
-	const elements = $state({}) as Record<'headers' | 'statusbar' | 'content', HTMLElement>
+	const elements = $state({}) as Record<'headers' | 'statusbar' | 'rows', HTMLElement>
 
 
 	// * --- Virtualization --- *
@@ -66,12 +68,10 @@
 	let renderItemLength = $derived(Math.ceil(Math.max(30, viewportHeight / (_heightPerItem / 3))))
 
 	let heightPerItem = $derived.by(() => {
-		if(!elements.content)
+		data
+		if(!elements.rows)
 			return 8
-		const rows = elements.content.querySelectorAll('.row') as NodeListOf<HTMLDivElement>
-		const result = ((
-			rows[rows.length - 1].offsetTop - rows[0].offsetTop
-		) / rows.length)
+		const result = elements.rows.scrollHeight / elements.rows.childNodes.length
 		_heightPerItem = result
 		return result
 	})
@@ -80,17 +80,17 @@
 		let spacing = untrack(() => (renderItemLength/3)) * heightPerItem
 		let scroll = scrollTop - spacing
 		let virtualTop = Math.max(scroll, 0)
-		virtualTop -= virtualTop % untrack(() => heightPerItem)
+		virtualTop -= virtualTop % heightPerItem
 		return virtualTop
 	})
 	let virtualBottom = $derived.by(() => {
-		const virtualBottom = (untrack(() => heightPerItem) * data.length) - virtualTop
+		const virtualBottom = (heightPerItem * data.length) - virtualTop
 		return virtualBottom
 	})
 
 	/** The area of data that is rendered */
 	const area = $derived.by(() => {
-		const index = (virtualTop / untrack(() => heightPerItem)) || 0
+		const index = (virtualTop / heightPerItem) || 0
 		return data.slice(
 			index, 
 			index + untrack(() => renderItemLength)
@@ -217,10 +217,10 @@
 		{@render columnsSnippet((column) => table.columns[column]?.header, null, true)}
 	</div>
 
-	<div class='content' {onscroll} bind:clientHeight={viewportHeight} bind:this={elements.content}>
+	<div class='content' {onscroll} bind:clientHeight={viewportHeight}>
 		<div class='virtual top' style='height: {virtualTop}px'></div>
 		
-		<div class="rows">
+		<div class='rows' bind:this={elements.rows}>
 			{#each area as item, i (item)}
 				<div class='row'>
 					{@render columnsSnippet(
@@ -245,7 +245,7 @@
 	<div class='panel' style='width: {panelTween.current + 30}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
 		{#if panel && panel in table.panels}
 			<div 
-				class="panel-content"
+				class='panel-content'
 				bind:clientWidth={panelTween.width}
 				in:fly={{ x: 100, easing: sineInOut, duration:300 }}
 				out:fly={{ x:100, duration:200, easing: sineInOut }}
@@ -257,7 +257,7 @@
 </div>
 
 
-{@render children?.()}
+{@render content?.({ Column, Panel, state: table })}
 
 
 
@@ -298,9 +298,9 @@
 		height: 100%;
 
 		grid-template-areas: 
-			"headers     panel"
-			"rows        panel"
-			"statusbar   panel"
+			'headers     panel'
+			'rows        panel'
+			'statusbar   panel'
 		;
 
 		grid-template-columns: auto min-content;

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

@@ -1,6 +1,7 @@
+import { SvelteComponent } from "svelte";
 export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
-    columns: Record<string, Column<T, unknown>>;
-    panels: Record<string, Panel>;
+    columns: Record<string, TColumn<T, unknown>>;
+    panels: Record<string, TPanel>;
     sortby?: string;
     positions: {
         sticky: string[];
@@ -9,16 +10,56 @@ export interface TableState<T extends Record<PropertyKey, any> = Record<Property
         toggle(key: string): void;
     };
     readonly data: T[];
-    addColumn(key: string, options: Column<T, unknown>): void;
+    addColumn(key: string, options: TColumn<T, unknown>): void;
     removeColumn(key: string): void;
 }
 export declare function getTableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>>(): TableState<T>;
 import { type Snippet } from 'svelte';
-import { type Column } from './Column.svelte';
-import { type Panel } from './Panel.svelte';
+import Column, { type Column as TColumn } from './Column.svelte';
+import Panel, { type Panel as TPanel } from './Panel.svelte';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     props(): {
-        children?: Snippet;
+        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;
+                    value?: Column<T_1, V>["options"]["value"];
+                    sorting?: Column<T_1, V>["options"]["sorting"];
+                }): {};
+                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;
+                    value?: Column<T_1, V>["options"]["value"];
+                    sorting?: Column<T_1, V>["options"]["sorting"];
+                }>): 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;
+                    value?: Column<T_1, V>["options"]["value"];
+                    sorting?: Column<T_1, V>["options"]["sorting"];
+                }, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Panel: typeof Panel;
+            state: TableState<T>;
+        }]>;
         panel?: string;
         data?: T[] | undefined;
         id?: string;

package/dist/Table/index.d.ts

@@ -1,12 +1 @@
-import { default as _Table } from './Table.svelte';
-import Column from './Column.svelte';
-import { default as _Panel } from './Panel.svelte';
-declare const LATIN: readonly ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
-type Capital = typeof LATIN[number];
-declare const Table: typeof _Table & {
-    [key: `${Capital}${string}`]: typeof Column;
-};
-declare const Panel: {
-    [key: `${Capital}${string}`]: typeof _Panel;
-};
-export { Table, Panel };
+export { default as Table } from './Table.svelte';

package/dist/Table/index.js

@@ -1,31 +1 @@
-import { default as _Table } from './Table.svelte';
-import Column from './Column.svelte';
-import { default as _Panel } from './Panel.svelte';
-const LATIN = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
-const Table = new Proxy(_Table, {
-    get(target, p, receiver) {
-        if (typeof p !== 'string' || !LATIN.includes(p[0])) {
-            return Reflect.get(target, p, receiver);
-        }
-        return new Proxy(Column, {
-            apply(_, __, [anchor, props]) {
-                Object.assign(props, { __key: p });
-                return Column(anchor, props);
-            },
-        });
-    }
-});
-const Panel = new Proxy(_Panel, {
-    get(target, p, receiver) {
-        if (typeof p !== 'string' || !LATIN.includes(p[0])) {
-            return Reflect.get(target, p, receiver);
-        }
-        return new Proxy(_Panel, {
-            apply(_, __, [anchor, props]) {
-                Object.assign(props, { __key: p });
-                return _Panel(anchor, props);
-            },
-        });
-    },
-});
-export { Table, Panel };
+export { default as Table } from './Table.svelte';

package/dist/index.d.ts

@@ -1 +1,2 @@
-export * from './Table/index.js';
+import { Table } from './Table/index.js';
+export default Table;

package/dist/index.js

@@ -1 +1,2 @@
-export * from './Table/index.js';
+import { Table } from './Table/index.js';
+export default Table;

package/package.json

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