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

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

@@ -12,7 +12,8 @@
 	
 	export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
 		columns: Record<string, TColumn<T, unknown>>
-		panels: Record<string, TPanel>
+		panels: Record<string, TPanel<T>>
+		selected: T[] | null
 		sortby?: string
 		positions: {
 			sticky: string[]
@@ -20,7 +21,10 @@
 			hidden: string[]
 			toggle(key: string): void
 		}
+		readonly resizeable: boolean
 		readonly data: T[]
+		/** Rows become anchors */
+		readonly href?: (item: T) => string
 		addColumn(key: string, options: TColumn<T, unknown>): void
 		removeColumn(key: string): void
 	}
@@ -38,24 +42,37 @@
 	import Panel, { PanelTween, type Panel as TPanel } from './Panel.svelte'
 	import { fly } from 'svelte/transition'
 	import { sineInOut } from 'svelte/easing'
+	import { get } from 'svelte/store'
+	import { on } from 'svelte/events'
+	import { ka_GE } from '@faker-js/faker'
 
 	interface Props {
-		content: Snippet<[context: { Column: typeof Column<T>, Panel: typeof Panel, state: TableState<T> }]>
+		content: Snippet<[context: { Column: typeof Column<T>, Panel: typeof Panel, readonly table: TableState<T>, readonly data: T[] }]>
 
 		panel?: string
 		data?: T[]
 		id?: string
+		href?: (item: T) => string
+		/**
+		 * Can you change the width of the columns?
+		 * @default true
+		*/
+		resizeable?: boolean
+		selectable?: 'hover' | 'always' | 'never'
 	}
 
 	let {
 		content,
 
-		panel,
+		panel = $bindable(),
 		data: _data = [],
-		id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
+		id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join(''),
+		href,
+		resizeable = true,
+		selectable = 'never'
 	}: Props = $props()
 	
-	const data = $derived(_data.toSorted())
+	const data = $derived([..._data])
 
 	const elements = $state({}) as Record<'headers' | 'statusbar' | 'rows', HTMLElement>
 
@@ -64,36 +81,34 @@
 	let scrollTop = $state(0)
 	let viewportHeight = $state(0)
 
-	let _heightPerItem = 24
-	let renderItemLength = $derived(Math.ceil(Math.max(30, viewportHeight / (_heightPerItem / 3))))
-
 	let heightPerItem = $derived.by(() => {
 		data
 		if(!elements.rows)
 			return 8
 		const result = elements.rows.scrollHeight / elements.rows.childNodes.length
-		_heightPerItem = result
 		return result
 	})
 
+	let renderItemLength = $derived(Math.ceil(Math.max(30, (viewportHeight / heightPerItem) * 2)))
+
+	const spacing = () => viewportHeight / 2
 	let virtualTop = $derived.by(() => {
-		let spacing = untrack(() => (renderItemLength/3)) * heightPerItem
-		let scroll = scrollTop - spacing
+		let scroll = scrollTop - spacing()
 		let virtualTop = Math.max(scroll, 0)
 		virtualTop -= virtualTop % heightPerItem
 		return virtualTop
 	})
 	let virtualBottom = $derived.by(() => {
-		const virtualBottom = (heightPerItem * data.length) - virtualTop
-		return virtualBottom
+		const virtualBottom = (heightPerItem * data.length) - virtualTop - spacing() * 4
+		return Math.max(virtualBottom, 0)
 	})
-
 	/** The area of data that is rendered */
 	const area = $derived.by(() => {
 		const index = (virtualTop / heightPerItem) || 0
+		const end = index + untrack(() => renderItemLength)
 		return data.slice(
 			index, 
-			index + untrack(() => renderItemLength)
+			end
 		)
 	})
 	// * --- Virtualization --- *
@@ -101,6 +116,7 @@
 
 	const table: TableState<T> = $state({
 		columns: {},
+		selected: selectable === 'never' ? null : [],
 		panels: {},
 		positions: {
 			sticky: [],
@@ -113,9 +129,15 @@
 					table.positions.hidden.push(key)
 			}
 		},
+		get href() {
+			return href
+		},
 		get data() {
 			return data
 		},
+		get resizeable() {
+			return resizeable
+		},
 		addColumn(key, column) {
 			table.columns[key] = column
 
@@ -142,30 +164,50 @@
 
 	// * --- *
 	
-	const panelTween = new PanelTween(() => panel)
+	const panelTween = new PanelTween(() => panel, 24)
+
+	let hoveredRow: T | null = $state(null)
 
 	/** Order of columns */
-	const columns = $derived([...table.positions.sticky, ...table.positions.scroll].filter(key => !table.positions.hidden.includes(key)))
+	const notHidden = (key: string) => !table.positions.hidden.includes(key)
+	const sticky = $derived(table.positions.sticky.filter(notHidden))
+	const scrolled = $derived(table.positions.scroll.filter(notHidden))
+	const columns = $derived([...sticky, ...scrolled])
 
 	/** Width of each column */
-	const widths = $state({}) as Record<string, number>
+	const columnWidths = $state({}) as Record<string, number>
+
+	const getWidth = (key: string, def: number = 150) => columnWidths[key] || table.columns[key]?.defaults.width || def
 
 	/** grid-template-columns for widths */
 	const style = $derived(`
-		#${id} > .headers, #${id} > .content > .rows > .row, #${id} > .statusbar, #${id} > .content > .virtual.bottom {
-			grid-template-columns: ${columns.map((key, i, arr) => i === arr.length - 1 ? `minmax(${widths[key] || 150}px, 1fr)` : `${widths[key] || 150}px`).join(' ')};
-		}
-	`)
-
-	const observer = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(mutations => {
-		const target = mutations[0].target as HTMLDivElement
-		widths[target.getAttribute('data-column')!] = parseFloat(target.style.width)
-	})
-
-	function observe(node: HTMLDivElement, isHeader = false) {
+	#${id} > .headers,
+	#${id} > .content > .rows > .row,
+	#${id} > .statusbar,
+	#${id} > .content > .virtual.bottom {
+		grid-template-columns: ${
+			columns.map((key, i, arr) => {
+				const width = getWidth(key)
+				if(i === arr.length - 1)
+					return `minmax(${width}px, 1fr)`
+				return `${width}px`
+			}).join(' ')
+		};
+	}
+	` + sticky.map((key, i, arr) => `
+	#${id} .column.sticky[data-column='${key}'] {
+		left: ${getWidth(arr[i - 1], 0)}px;
+	}
+	`).join(''))
+	
+	function observeColumnWidth(node: HTMLDivElement, isHeader = false) {
 		if(!isHeader) return
-		observer?.observe(node, {attributes: true})
-		return { destroy: () => observer?.disconnect() }
+		const observer = new MutationObserver(mutations => {
+			const target = mutations[0].target as HTMLElement
+			columnWidths[target.getAttribute('data-column')!] = parseFloat(target.style.width)
+		})
+		observer.observe(node, {attributes: true})
+		return { destroy: () => observer.disconnect() }
 	}
 
 	function onscroll(event: Event) {
@@ -179,6 +221,10 @@
 		elements.statusbar.scrollLeft = target.scrollLeft
 	}
 
+	export {
+		table as state
+	}
+
 </script>
 <!---------------------------------------------------->
 
@@ -187,34 +233,43 @@
 </svelte:head>
 
 {#snippet columnsSnippet(
-	renderable: (column: string) => Snippet<[arg0?: any, arg1?: any, arg2?: any, arg3?: any]> | undefined, 
+	renderable: (column: string) => Snippet<[arg0?: any, arg1?: any]> | undefined, 
 	arg: null | ((column: string) => any[]) = null,
 	isHeader = false
 )}
 	{#each table.positions.sticky as column, i (column)}
 		{#if !table.positions.hidden.includes(column)}
 			{@const args = arg ? arg(column) : []}
-			{@const props = isHeader ? { 'data-column': column } : {}}
-			<div class='column sticky' {...props} use:observe={isHeader} class:border={i == table.positions.sticky.length - 1}>
-				{@render renderable(column)?.(args[0], args[1], args[2], args[3])}
+			<div
+				class='column sticky' 
+				use:observeColumnWidth={isHeader}
+				data-column={column}
+				class:resizeable={table.columns[column].options.resizeable && table.resizeable}
+				class:border={i == table.positions.sticky.length - 1}
+			>
+				{@render renderable(column)?.(args[0], args[1])}
 			</div>
 		{/if}
 	{/each}
 	{#each table.positions.scroll as column, i (column)}
 		{#if !table.positions.hidden.includes(column)}
 			{@const args = arg ? arg(column) : []}
-			{@const props = isHeader ? { 'data-column': column } : {}}
-			<div class='column' {...props} use:observe={isHeader}>
-				{@render renderable(column)?.(args[0], args[1], args[2], args[3])}
+			<div
+				class='column'
+				data-column={column}
+				use:observeColumnWidth={isHeader}
+				class:resizeable={table.columns[column].options.resizeable && table.resizeable}
+			>
+				{@render renderable(column)?.(args[0], args[1])}
 			</div>
 		{/if}
 	{/each}
 {/snippet}
 
-<div id={id} class='table'>
+<div id={id} class='table svelte-tably'>
 
 	<div class='headers' bind:this={elements.headers}>
-		{@render columnsSnippet((column) => table.columns[column]?.header, null, true)}
+		{@render columnsSnippet((column) => table.columns[column]?.header, () => [true], true)}
 	</div>
 
 	<div class='content' {onscroll} bind:clientHeight={viewportHeight}>
@@ -222,15 +277,35 @@
 		
 		<div class='rows' bind:this={elements.rows}>
 			{#each area as item, i (item)}
-				<div class='row'>
+				{@const props = table.href ? { href: table.href(item) } : {}}
+				<!-- note: <svelte:element this={table.href ? 'a' : 'div'}> will break the virtualization for some reason -->
+				<a
+					class='row'
+					{...props}
+					onpointerenter={() => hoveredRow = item}
+					onpointerleave={() => hoveredRow = null}
+				>
+					{#if table.selected && (((selectable === 'hover' && hoveredRow === item) || selectable === 'always') || table.selected.includes(item))}
+						<div class='select' class:hover={selectable === 'hover'}>
+							<input type='checkbox' bind:checked={
+								() => table.selected!.includes(item),
+								(value) => value ? table.selected!.push(item) : table.selected!.splice(table.selected!.indexOf(item), 1)
+							}>
+						</div>
+					{/if}
+
 					{@render columnsSnippet(
 						(column) => table.columns[column]!.row,
 						(column) => {
 							const col = table.columns[column]!
-							return [item, col.options.value ? col.options.value(item) : undefined]
+							return [item, {
+								get index() { return _data.indexOf(item) },
+								get value() { return col.options.value ? col.options.value(item) : undefined },
+								get isHovered() { return hoveredRow === item }
+							}]
 						}
 					)}
-				</div>
+				</a>
 			{/each}
 		</div>
 		<div class='virtual bottom' style='height: {virtualBottom}px'>
@@ -239,10 +314,10 @@
 	</div>
 	
 	<div class='statusbar' bind:this={elements.statusbar}>
-		{@render columnsSnippet((column) => table.columns[column]?.statusbar, () => [data])}
+		{@render columnsSnippet((column) => table.columns[column]?.statusbar)}
 	</div>
 
-	<div class='panel' style='width: {panelTween.current + 30}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
+	<div class='panel' style='width: {(panelTween.current)}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
 		{#if panel && panel in table.panels}
 			<div 
 				class='panel-content'
@@ -250,29 +325,97 @@
 				in:fly={{ x: 100, easing: sineInOut, duration:300 }}
 				out:fly={{ x:100, duration:200, easing: sineInOut }}
 			>
-				{@render table.panels[panel].content(table as TableState)}
+				{@render table.panels[panel].content({ get table() { return table }, get data() { return data } })}
 			</div>
 		{/if}
 	</div>
+	<button 
+		class='backdrop' 
+		aria-label='Panel backdrop'
+		tabindex='-1'
+		aria-hidden={panel && table.panels[panel]?.backdrop ? false : true}
+		onclick={() => panel = undefined}
+	></button>
 </div>
 
 
-{@render content?.({ Column, Panel, state: table })}
+{@render content?.({ Column, Panel, get table() { return table }, get data() { return data } })}
 
 
 
 <!---------------------------------------------------->
 <style>
+
+	.row {
+		> .select {
+			display: block;
+			position: absolute;
+			z-index: 3;
+			opacity: 1;
+			left: 2px;
+			overflow: visible;
+			background-color: transparent;
+			transition: .15s ease;
+			> input {
+				width: 18px;
+				height: 18px;
+				border-radius: 1rem;
+				cursor: pointer;
+			}
+
+			&.hover {
+				@starting-style {
+					opacity: 0;
+					left: -2px;
+				}
+			}
+		}
+	}
+	
+
+	a.row {
+		color: inherit;
+		text-decoration: inherit;
+	}
 	
 	.table, .table * {
 		box-sizing: border-box;
+		background-color: inherit;
+	}
+
+	.backdrop {
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		bottom: 0px;
+		right: 0px;
+		background-color: hsla(0, 0%, 0%, .3);
+		z-index: 3;
+		opacity: 1;
+		transition: .15s ease;
+		border: none;
+		outline: none;
+		cursor: pointer;
+
+		&[aria-hidden='true'] {
+			opacity: 0;
+			pointer-events: none;
+		}
+	}
+
+	.headers, .statusbar {
+		/* So that the scrollbar doesn't cause the headers/statusbar to shift */
+		padding-right: 11px;
+	}
+
+	.table {
+		color: var(--tably-color, hsl(0, 0%, 0%));
+		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 	}
 
 	.sticky {
 		position: sticky;
-		left: 0px;
 		/* right: 100px; */
-		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 		z-index: 1;
 	}
 
@@ -282,20 +425,18 @@
 
 	.headers > .column {
 		border-right: 1px solid var(--tably-border, hsl(0, 0%, 90%));
-		resize: horizontal;
 		overflow: hidden;
-		padding: var(--padding-y) 0;
+		padding: var(--tably-padding-y, .5rem) 0;
+
+		&.resizeable {
+			resize: horizontal;
+		}
 	}
 	
 	.table {
-		--panel: 250px;
-		--padding-x: 1rem;
-		--padding-y: .5rem;
-		--gap: .25rem;
-		--header-height: 2.5rem;
-
 		display: grid;
 		height: 100%;
+		position: relative;
 
 		grid-template-areas: 
 			'headers     panel'
@@ -307,7 +448,7 @@
 		grid-template-rows: auto 1fr auto;
 
 		border: 1px solid var(--tably-border, hsl(0, 0%, 90%));
-		border-radius: .25rem;
+		border-radius: var(--tably-radius, .25rem);
 
 		max-height: 100%;
 	}
@@ -320,7 +461,6 @@
 
 	.headers > .column {
 		width: auto !important;
-		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 		border-bottom: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 	}
 
@@ -343,51 +483,52 @@
 	.statusbar {
 		grid-area: statusbar;
 		overflow: hidden;
+		background-color: var(--tably-statusbar, hsl(0, 0%, 98%));
 	}
 
 	.statusbar > .column {
-		background-color: var(--tably-bg-statusbar, hsl(0, 0%, 99%));
 		border-top: 1px solid var(--tably-border, hsl(0, 0%, 90%));
-		padding: calc(var(--padding-y) / 2) 0;
+		padding: calc(var(--tably-padding-y, .5rem) / 2) 0;
 	}
 
 	.headers, .row, .statusbar {
+		position: relative;
 		display: grid;
 		width: 100%;
 		height: 100%;
 
 		& > .column {
 			display: flex;
-			padding-left: var(--padding-x);
+			padding-left: var(--tably-padding-x, 1rem);
 			overflow: hidden;
 		}
 
 		& > *:last-child {
 			width: 100%;
-			padding-right: var(--padding-x);
+			padding-right: var(--tably-padding-x, 1rem);
 		}
 	}
 
-	/* .row:nth-child(1) > * {
-		padding-top: calc(var(--padding-y) + var(--gap));
+	.row:first-child > * {
+		padding-top: calc(var(--tably-padding-y, .5rem) + calc(var(--tably-padding-y, .5rem) / 2));
+	}
+	.row:last-child > * {
+		padding-bottom: calc(var(--tably-padding-y, .5rem) + calc(var(--tably-padding-y, .5rem) / 2));
 	}
-	.row:nth-last-child(1) > * {
-		padding-bottom: calc(var(--padding-y) + var(--gap));
-	} */
 
 	.row > * {
-		padding: var(--gap) 0;
+		padding: calc(var(--tably-padding-y, .5rem) / 2) 0;
 	}
 
 	.panel {
 		position: relative;
 		grid-area: panel;
 		height: 100%;
-		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 
 		border-left: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 		scrollbar-gutter: stable both-edges;
 		scrollbar-width: thin;
+		z-index: 4;
 
 		> .panel-content {
 			position: absolute;
@@ -395,7 +536,7 @@
 			right: 0;
 			width: min-content;
 			overflow: auto;
-			padding: var(--padding-y) 0;
+			padding: var(--tably-padding-y, .5rem) 0;
 		}
 	}
 

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

@@ -1,7 +1,8 @@
 import { SvelteComponent } from "svelte";
 export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
     columns: Record<string, TColumn<T, unknown>>;
-    panels: Record<string, TPanel>;
+    panels: Record<string, TPanel<T>>;
+    selected: T[] | null;
     sortby?: string;
     positions: {
         sticky: string[];
@@ -9,7 +10,10 @@ export interface TableState<T extends Record<PropertyKey, any> = Record<Property
         hidden: string[];
         toggle(key: string): void;
     };
+    readonly resizeable: boolean;
     readonly data: T[];
+    /** Rows become anchors */
+    readonly href?: (item: T) => string;
     addColumn(key: string, options: TColumn<T, unknown>): void;
     removeColumn(key: string): void;
 }
@@ -22,52 +26,68 @@ declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
         content: Snippet<[context: {
             Column: {
                 (internal: unknown, props: {
-                    header: Column<T_1, V>["header"];
+                    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"];
+                    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"];
+                    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;
                 }, {}, {}> & {
                     $$bindings?: ReturnType<() => "">;
                 };
                 z_$$bindings?: ReturnType<() => "">;
             };
             Panel: typeof Panel;
-            state: TableState<T>;
+            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;
+        selectable?: "hover" | "always" | "never";
     };
     events(): {};
     slots(): {};
-    bindings(): "";
-    exports(): {};
+    bindings(): "panel";
+    exports(): {
+        state: TableState<T>;
+    };
 }
 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']>> & {

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-import { Table } from './Table/index.js';
-export default Table;
+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,2 +1,3 @@
-import { Table } from './Table/index.js';
-export default Table;
+export { default as default } from './Table.svelte';
+export { default as Panel } from './Panel.svelte';
+export { default as Column } from './Column.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.4",
+	"version": "1.0.0-next.6",
 	"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/Panel.svelte.d.ts

@@ -1,32 +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 {
-    id: string;
-    /** 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;

package/dist/Table/index.d.ts

@@ -1 +0,0 @@
-export { default as Table } from './Table.svelte';