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

package/dist/Table/Table.svelte

@@ -1,352 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<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>
-		sortby?: string
-		positions: {
-			sticky: string[]
-			scroll: string[]
-			hidden: string[]
-			toggle(key: string): void
-		}
-		readonly data: T[]
-		addColumn(key: string, options: Column<T, unknown>): void
-		removeColumn(key: string): void
-	}
-
-	export function getTableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>>() {
-		return getContext<TableState<T>>('svelte5-table')
-	}
-
-</script>
-
-<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
-
-	import { getContext, setContext, type Snippet } from 'svelte'
-	import { type Column } from './Column.svelte'
-	import { PanelTween, type Panel } from './Panel.svelte'
-	import { fly } from 'svelte/transition'
-	import { sineInOut } from 'svelte/easing'
-
-	interface Props {
-		children?: Snippet
-		panel?: string
-		data?: T[]
-		id?: string
-	}
-
-	let {
-		children,
-		panel,
-		data: _data = [],
-		id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
-	}: Props = $props()
-	
-	const data = $derived(_data.toSorted())
-
-	const table: TableState<T> = $state({
-		columns: {},
-		panels: {},
-		positions: {
-			sticky: [],
-			scroll: [],
-			hidden: [],
-			toggle(key) {
-				if(table.positions.hidden.includes(key))
-					table.positions.hidden = table.positions.hidden.filter(column => column !== key)
-				else
-					table.positions.hidden.push(key)
-			}
-		},
-		get data() {
-			return data
-		},
-		addColumn(key, column) {
-			table.columns[key] = column
-
-			if(column.defaults.sort)
-				table.sortby = key
-			
-			if(!column.defaults.show)
-				table.positions.hidden.push(key)
-			
-			if(column.defaults.sticky) 
-				table.positions.sticky.push(key)
-			else
-				table.positions.scroll.push(key)
-		},
-		removeColumn(key) {
-			delete table.columns[key]
-			table.positions.sticky = table.positions.sticky.filter(column => column !== key)
-			table.positions.scroll = table.positions.scroll.filter(column => column !== key)
-			table.positions.hidden = table.positions.hidden.filter(column => column !== key)
-		}
-	})
-
-	setContext('svelte5-table', table)
-
-	// * --- *
-	
-	const panelTween = new PanelTween(() => panel)
-	const elements = $state({}) as Record<'headers' | 'statusbar', HTMLElement>
-
-	/** Order of columns */
-	const columns = $derived([...table.positions.sticky, ...table.positions.scroll].filter(key => !table.positions.hidden.includes(key)))
-
-	/** Width of each column */
-	const widths = $state({}) as Record<string, number>
-
-	/** grid-template-columns for widths */
-	const style = $derived(`
-		#${id} > .headers, #${id} > .rows > .row, #${id} > .statusbar {
-			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, column: string) {
-		observer?.observe(node, {attributes: true})
-		return { destroy: () => observer?.disconnect() }
-	}
-
-	function onscroll(event: Event) {
-		const target = event.target as HTMLDivElement
-		elements.headers.scrollLeft = target.scrollLeft
-		elements.statusbar.scrollLeft = target.scrollLeft
-	}
-
-</script>
-<!---------------------------------------------------->
-
-<svelte:head>
-	{@html `<style>${style}</style>`}
-</svelte:head>
-
-<div id={id} class='table'>
-
-	<div class='headers' bind:this={elements.headers}>
-		{#each table.positions.sticky as column, i (column)}
-			{#if !table.positions.hidden.includes(column)}
-				<div class='column sticky' data-column="{column}" use:observe={column}>
-					{@render table.columns[column]?.header()}
-				</div>
-			{/if}
-		{/each}
-		{#each table.positions.scroll as column, i (column)}
-			{#if !table.positions.hidden.includes(column)}
-				<div class='column' use:observe={column}>
-					{@render table.columns[column]?.header()}
-				</div>
-			{/if}
-		{/each}
-	</div>
-
-	<div class="rows" {onscroll}>
-		{#each data as item}
-			<div class='row'>
-				{#each table.positions.sticky as column, i (column)}
-					{#if !table.positions.hidden.includes(column)}
-						{@const col = table.columns[column]}
-						<div class='column sticky' class:border={i == table.positions.sticky.length - 1}>
-							{@render col.row(item, col.options.value ? col.options.value(item) : undefined)}
-						</div>
-					{/if}
-				{/each}
-				{#each table.positions.scroll as column, i (column)}
-					{#if !table.positions.hidden.includes(column)}
-						{@const col = table.columns[column]}
-						<div class='column'>
-							{@render col.row(item, col.options.value ? col.options.value(item) : undefined)}
-						</div>
-					{/if}
-				{/each}
-			</div>
-		{/each}
-	</div>
-	
-	<div class='statusbar' bind:this={elements.statusbar}>
-		{#each table.positions.sticky as column, i (column)}
-			{#if !table.positions.hidden.includes(column)}
-				<div class='column sticky' class:border={i == table.positions.sticky.length - 1}>
-					{@render table.columns[column]?.statusbar?.(data)}
-				</div>
-			{/if}
-		{/each}
-		{#each table.positions.scroll as column, i (column)}
-			{#if !table.positions.hidden.includes(column)}
-				<div class='column'>
-					{@render table.columns[column]?.statusbar?.(data)}
-				</div>
-			{/if}
-		{/each}
-	</div>
-
-	<div class='panel' style='width: {panelTween.current}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
-		{#if panel && panel in table.panels}
-			<div 
-				class="panel-content"
-				bind:clientWidth={panelTween.width}
-				in:fly={{ x: 100, easing: sineInOut, duration:300 }}
-				out:fly={{ x:100, duration:200, easing: sineInOut }}
-			>
-				{@render table.panels[panel].content(table as TableState)}
-			</div>
-		{/if}
-	</div>
-</div>
-
-
-{@render children?.()}
-
-
-
-<!---------------------------------------------------->
-<style>
-	
-	.table, .table * {
-		box-sizing: border-box;
-	}
-
-	.sticky {
-		position: sticky;
-		left: 0px;
-		/* right: 100px; */
-		background-color: white;
-		z-index: 1;
-	}
-
-	.sticky.border {
-		border-right: 1px solid hsla(0, 0%, 90%);
-	}
-
-	.headers > .column {
-		border-right: 1px solid hsla(0, 0%, 90%);
-		resize: horizontal;
-		overflow: hidden;
-		padding: var(--padding-y) 0;
-	}
-	
-	.table {
-		--panel: 250px;
-		--padding-x: 1rem;
-		--padding-y: .5rem;
-		--gap: .25rem;
-		--header-height: 2.5rem;
-
-		display: grid;
-
-		grid-template-areas: 
-			"headers     panel"
-			"rows        panel"
-			"statusbar   panel"
-		;
-
-		grid-template-columns: auto min-content;
-		grid-template-rows: auto 1fr auto;
-
-		border: 1px solid hsla(0, 0%, 90%);
-		border-radius: .25rem;
-
-		max-height: 100%;
-	}
-
-	.headers {
-		grid-area: headers;
-		z-index: 2;
-		overflow: hidden;
-		padding-right: 1rem;
-	}
-
-	.headers > .column {
-		width: auto !important;
-		background-color: hsla(0, 0%, 100%);
-		border-bottom: 1px solid hsla(0, 0%, 90%);
-	}
-
-	.rows {
-		grid-area: rows;
-		display: grid;
-		overflow: auto;
-		scrollbar-width: thin;
-		background-color: hsla(0, 0%, 100%);
-	}
-
-	.statusbar {
-		grid-area: statusbar;
-		overflow: hidden;
-		padding-right: 1rem;
-	}
-
-	.statusbar > .column {
-		background-color: hsla(0, 0%, 99%);
-		border-top: 1px solid hsla(0, 0%, 90%);
-		padding: calc(var(--padding-y) / 2) 0;
-	}
-
-	.headers, .row, .statusbar {
-		display: grid;
-		width: 100%;
-		height: 100%;
-
-		& > .column {
-			display: flex;
-			padding-left: var(--padding-x);
-			overflow: hidden;
-		}
-
-		& > *:last-child {
-			width: 100%;
-			padding-right: var(--padding-x);
-		}
-	}
-
-	.row:nth-child(1) > * {
-		padding-top: calc(var(--padding-y) + var(--gap));
-	}
-	.row:nth-last-child(1) > * {
-		padding-bottom: calc(var(--padding-y) + var(--gap));
-	}
-
-	.row > * {
-		padding: var(--gap) 0;
-	}
-
-	.panel {
-		position: relative;
-		grid-area: panel;
-		width: var(--panel);
-		height: 100%;
-		background-color: white;
-
-		border-left: 1px solid hsla(0, 0%, 90%);
-
-		> .panel-content {
-			position: absolute;
-			top: 0;
-			right: 0;
-			width: min-content;
-			overflow: hidden;
-			padding: var(--padding-y) var(--padding-x);
-		}
-	}
-
-	.statusbar {
-		grid-area: statusbar;
-	}
-
-</style>

package/dist/Table/index.d.ts

@@ -1,12 +0,0 @@
-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 };

package/dist/Table/index.js

@@ -1,31 +0,0 @@
-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 };

package/dist/prototype/Headers.svelte

@@ -1,33 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-	import { getTableState, type ColumnOptions } from '../Table.svelte'
-
-	interface Props {
-		[key: string]: Snippet<[options: ColumnOptions]>
-	}
-
-	let headers: Props = $props()
-	const table = getTableState()
-
-	let keys = [] as string[]
-
-	$effect.pre(() => {
-		keys.forEach((key) => delete table.columns[key].header)
-		keys = []
-
-		for (const [key, value] of Object.entries(headers)) {
-			table.updateColumn(key, { header: value })
-			keys.push(key)
-		}
-	})
-</script>

package/dist/prototype/Headers.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type ColumnOptions } from '../Table.svelte';
-interface Props {
-    [key: string]: Snippet<[options: ColumnOptions]>;
-}
-/**
- * This is a description, \
- * on how to use this.
- *
- * @example
- * <Component />
- */
-declare const Headers: import("svelte").Component<Props, {}, "">;
-type Headers = ReturnType<typeof Headers>;
-export default Headers;

package/dist/prototype/Panels.svelte

@@ -1,25 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script lang='ts'>
-
-	import type { Snippet } from 'svelte'
-	import { getTableState, type TableState } from './Table.svelte'
-
-	interface Props {
-		[key: string]: Snippet<[table: TableState]>
-	}
-
-	let panels: Props = $props()
-
-	getTableState().panels = panels
-
-</script>
-<!---------------------------------------------------->

package/dist/prototype/Panels.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type TableState } from './Table.svelte';
-interface Props {
-    [key: string]: Snippet<[table: TableState]>;
-}
-/**
- * This is a description, \
- * on how to use this.
- *
- * @example
- * <Component />
- */
-declare const Panels: import("svelte").Component<Props, {}, "">;
-type Panels = ReturnType<typeof Panels>;
-export default Panels;

package/dist/prototype/Rows.svelte

@@ -1,35 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
-
-	import type { Snippet } from 'svelte'
-	import { getTableState } from './Table.svelte'
-
-	interface Props {
-		[key: string]: Snippet<[data: T]>
-	}
-
-	let rows: Props = $props()
-	const table = getTableState<T>()
-	
-	let keys = [] as string[]
-
-	$effect.pre(() => {
-		keys.forEach(key => delete table.columns[key].row)
-		keys = []
-
-		for(const [key, value] of Object.entries(rows)) {
-			table.updateColumn(key, { row: value })
-			keys.push(key)
-		}
-	})
-
-</script>

package/dist/prototype/Rows.svelte.d.ts

@@ -1,27 +0,0 @@
-import type { Snippet } from 'svelte';
-declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
-    props(): {
-        [key: string]: Snippet<[data: T]>;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    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 Rows: $$IsomorphicComponent;
-type Rows<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Rows<T>>;
-export default Rows;

package/dist/prototype/Statusbar.svelte

@@ -1,35 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script lang='ts'>
-
-	import type { Snippet } from 'svelte'
-	import { getTableState, type TableState } from './Table.svelte'
-
-	interface Props {
-		[key: string]: Snippet<[data: T[]]>
-	}
-
-	let statusbars: Props = $props()
-	const table = getTableState()
-	
-	let keys = [] as string[]
-
-	$effect.pre(() => {
-		keys.forEach(key => delete table.columns[key].statusbar)
-		keys = []
-		for(const [key, value] of Object.entries(statusbars)) {
-			table.updateColumn(key, { statusbar: value })
-			keys.push(key)
-		}
-	})
-
-</script>
-<!---------------------------------------------------->

package/dist/prototype/Statusbar.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-/**
- * This is a description, \
- * on how to use this.
- *
- * @example
- * <Component />
- */
-declare const Statusbar: import("svelte").Component<{
-    [key: string]: Snippet<[data: T[]]>;
-}, {}, "">;
-type Statusbar = ReturnType<typeof Statusbar>;
-export default Statusbar;