svelte-tably 1.0.0-next.9 → 1.0.0

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

@@ -0,0 +1,31 @@
+declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
+    props(): any;
+    events(): {};
+    slots(): {};
+    bindings(): "data" | "selected" | "panel";
+    exports(): {
+        toCSV: (opts?: {
+            /** Semi-colons as separator? */
+            semicolon?: boolean;
+            /** Only selected rows */
+            selected?: boolean;
+        }) => Promise<string>;
+    };
+}
+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/table/data.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TableProps, TableState } from './table.svelte.js';
+export declare class Data<T extends Record<PropertyKey, unknown>> {
+    #private;
+    origin: T[];
+    sorted: T[];
+    filtered: T[];
+    sortby: string | undefined;
+    sortReverse: boolean;
+    current: T[];
+    sortBy(column: string): void;
+    sortAction(node: HTMLElement, column: string): void;
+    sortTable(): void;
+    constructor(table: TableState<T>, props: TableProps<T>);
+}

package/dist/table/data.svelte.js

@@ -0,0 +1,81 @@
+import { on } from 'svelte/events';
+import { untrack } from 'svelte';
+export class Data {
+    #table = $state();
+    origin = $state([]);
+    sorted = $state([]);
+    filtered = $state([]);
+    sortby = $state();
+    sortReverse = $state(false);
+    current = $derived(this.#table?.options.reorderable ? this.origin : this.filtered);
+    sortBy(column) {
+        if (this.#table.options.reorderable)
+            return;
+        const { sort, value } = this.#table.columns[column].options;
+        if (!sort || !value)
+            return;
+        if (this.sortby === column) {
+            this.sortReverse = !this.sortReverse;
+        }
+        else {
+            this.sortReverse = false;
+            this.sortby = column;
+        }
+    }
+    sortAction(node, column) {
+        $effect(() => on(node, 'click', () => {
+            this.sortBy(column);
+        }));
+    }
+    sortTable() {
+        if (!this.sortby || this.#table.options.reorderable) {
+            this.sorted = [...this.origin];
+            return;
+        }
+        const column = this.#table.columns[this.sortby];
+        let { sort, value } = column?.options ?? {};
+        if (!sort || !value) {
+            this.sorted = [...this.origin];
+            return;
+        }
+        if (sort === true) {
+            sort = (a, b) => String(a).localeCompare(String(b));
+        }
+        if (this.sortReverse) {
+            this.sorted = this.origin.toSorted((a, b) => sort(value(b), value(a)));
+        }
+        else {
+            this.sorted = this.origin.toSorted((a, b) => sort(value(a), value(b)));
+        }
+    }
+    constructor(table, props) {
+        this.#table = table;
+        this.origin = props.data;
+        this.sorted = this.origin.toSorted();
+        this.filtered = this.sorted;
+        $effect(() => {
+            this.origin = props.data;
+            if (this.#table.options.reorderable)
+                return;
+            props.data;
+            props.data.length;
+            this.sortby;
+            this.sortReverse;
+            untrack(() => this.sortTable());
+        });
+        $effect(() => {
+            const table = this.#table;
+            if (props.reorderable)
+                return;
+            const filters = [...props.filters ?? []];
+            for (const key in table.columns) {
+                const filter = table.columns[key].options.filter;
+                const valueOf = table.columns[key].options.value;
+                if (filter && valueOf) {
+                    filters.push((item) => filter(valueOf(item)));
+                }
+            }
+            this.filtered = filters.length === 0 ? this.sorted : this.sorted.filter((value) => filters.every((filter) => filter(value)));
+        });
+    }
+}

package/dist/table/table.svelte.js

@@ -0,0 +1,76 @@
+import { getContext, setContext } from 'svelte';
+import { ColumnState } from '../column/column.svelte.js';
+import { PanelState } from '../panel/panel.svelte.js';
+import { Data } from './data.svelte.js';
+export class TableState {
+    #props = {};
+    id = $state();
+    dataState = $state({});
+    data = $derived(this.dataState.current ?? []);
+    columns = $state({});
+    panels = $state({});
+    expandable = $state();
+    row = $state();
+    /** Currently selected items */
+    get selected() { return this.#props.selected ??= []; }
+    set selected(items) { this.#props.selected = items; }
+    /** Column positions based on column ids */
+    positions = $state({
+        fixed: [],
+        sticky: [],
+        scroll: [],
+        hidden: []
+    });
+    /** Primarily externally managed options */
+    options = $derived({
+        panel: this.#props.panel,
+        filters: this.#props.reorderable ? false : (this.#props.filters ?? []),
+        resizeable: this.#props.resizeable ?? true,
+        reorderable: this.#props.reorderable ?? false,
+        select: this.#props.select ?? false,
+        auto: this.#props.auto ?? false
+    });
+    add(state) {
+        if (state instanceof ColumnState) {
+            const key = state.id;
+            this.columns[key] = state;
+            const clean = () => {
+                delete this.columns[key];
+                this.positions.fixed = this.positions.fixed.filter((column) => column !== state);
+                this.positions.sticky = this.positions.sticky.filter((column) => column !== state);
+                this.positions.scroll = this.positions.scroll.filter((column) => column !== state);
+                this.positions.hidden = this.positions.hidden.filter((column) => column !== state);
+            };
+            if (state.defaults.sortby)
+                this.dataState.sortBy(key);
+            if (state.options.fixed) {
+                this.positions.fixed.push(state);
+                return clean;
+            }
+            if (state.defaults.show === false) {
+                this.positions.hidden.push(state);
+            }
+            if (state.defaults.sticky) {
+                this.positions.sticky.push(state);
+            }
+            else {
+                this.positions.scroll.push(state);
+            }
+            return clean;
+        }
+        if (state instanceof PanelState) {
+            const key = state.id;
+            this.panels[key] = state;
+            return () => delete this.panels[key];
+        }
+    }
+    static getContext() {
+        return getContext('svelte-tably');
+    }
+    constructor(tableProps) {
+        this.#props = tableProps;
+        this.id = tableProps.id ?? Array.from({ length: 12 }, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('');
+        this.dataState = new Data(this, tableProps);
+        setContext('svelte-tably', this);
+    }
+}

package/dist/table/virtualization.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TableState } from './table.svelte.js';
+export declare class Virtualization<T extends Record<PropertyKey, unknown>> {
+    #private;
+    scrollTop: number;
+    viewport: {
+        height: number;
+        element: HTMLDivElement | null;
+    };
+    get topIndex(): number;
+    get virtualTop(): number;
+    get virtualBottom(): number;
+    get area(): T[];
+    constructor(table: TableState<T>);
+}

package/dist/table/virtualization.svelte.js

@@ -0,0 +1,86 @@
+import { tick, untrack } from 'svelte';
+export class Virtualization {
+    scrollTop = $state(0);
+    viewport = $state({
+        height: 0,
+        element: null
+    });
+    get topIndex() { return this.#topIndex; }
+    get virtualTop() { return this.#virtualTop; }
+    get virtualBottom() { return this.#virtualBottom; }
+    get area() { return this.#area; }
+    #topIndex = 0;
+    #heightPerItem = $state(8);
+    #virtualTop = $state(0);
+    #virtualBottom = $state(0);
+    #area = $state([]);
+    #spacing = $derived(this.viewport.height / 2);
+    #renderItemLength = $derived(Math.ceil(Math.max(30, (this.viewport.height / this.#heightPerItem) * 2)));
+    constructor(table) {
+        let ticked = $state(false);
+        $effect.pre(() => {
+            table.dataState.origin;
+            untrack(() => {
+                ticked = false;
+                requestAnimationFrame(() => ticked = true);
+            });
+        });
+        $effect(() => {
+            if (!ticked)
+                return;
+            table.dataState.current;
+            untrack(() => {
+                if (!this.viewport.element) {
+                    this.#heightPerItem = 8;
+                    return;
+                }
+                tick().then(() => {
+                    const target = this.viewport.element;
+                    if (target.children.length === 0)
+                        return;
+                    const firstRow = target.children[0]?.getBoundingClientRect().top;
+                    const lastRow = target.children[target.children.length - 1].getBoundingClientRect().bottom;
+                    this.#heightPerItem = (lastRow - firstRow) / this.#area.length;
+                });
+            });
+        });
+        let waitAnimationFrame = false;
+        $effect(() => {
+            if (!ticked)
+                return;
+            this.scrollTop;
+            this.#heightPerItem;
+            table.dataState.current.length;
+            table.dataState.current;
+            untrack(() => {
+                if (!waitAnimationFrame) {
+                    setTimeout(() => {
+                        waitAnimationFrame = false;
+                        let virtualTop = Math.max(this.scrollTop - this.#spacing, 0);
+                        virtualTop -= virtualTop % this.#heightPerItem;
+                        this.#virtualTop = virtualTop;
+                        let virtualBottom = this.#heightPerItem * table.dataState.current.length - virtualTop - this.#spacing * 4;
+                        virtualBottom = Math.max(virtualBottom, 0);
+                        this.#virtualBottom = virtualBottom;
+                    }, 1000 / 60);
+                }
+                waitAnimationFrame = true;
+            });
+        });
+        $effect(() => {
+            if (!ticked)
+                return;
+            table.dataState.sortReverse;
+            table.dataState.sortby;
+            this.#heightPerItem;
+            this.#virtualTop;
+            table.dataState.current.length;
+            table.dataState.current;
+            untrack(() => {
+                this.#topIndex = Math.round(this.#virtualTop / this.#heightPerItem || 0);
+                const end = this.#topIndex + this.#renderItemLength;
+                this.#area = table.dataState.current.slice(this.#topIndex, end);
+            });
+        });
+    }
+}

package/dist/utility.svelte.d.ts

@@ -0,0 +1,21 @@
+export type Simplify<T> = T extends infer V ? {
+    [K in keyof V]: V[K];
+} : never;
+export type AnyRecord = Record<PropertyKey, any>;
+export declare function pick<T extends Record<PropertyKey, any>, K extends (keyof T)[]>(item: T, keys: K): Simplify<Pick<T, K[number]>>;
+export declare function boundPick<T extends Record<PropertyKey, any>, K extends (keyof T)[]>(item: T, keys: K): {};
+export declare function assign(item: Record<PropertyKey, any>, props?: Partial<Record<PropertyKey, any>>): void;
+export declare function boundAssign(item: Record<PropertyKey, any>, props?: Partial<Record<PropertyKey, any>>): void;
+export declare function mounted(): {
+    readonly isMounted: boolean;
+};
+export declare function getters<T extends AnyRecord>(obj: T): { readonly [K in keyof T]: T[K]; };
+type SetterRecord = Record<PropertyKey, [() => any, (v: any) => void]>;
+export declare function withSetters<T extends SetterRecord>(obj: T): T;
+export declare function fromProps<T extends AnyRecord, B extends SetterRecord>(props: T, boundProps?: B): Simplify<{ [K in keyof B]: ReturnType<B[K][0]>; } & { readonly [K in keyof T]: T[K]; }>;
+export declare function assignDescriptors<T extends AnyRecord, B extends AnyRecord>(target: T, source: B): T & B;
+/** Capitalize by space */
+export declare function capitalize(str: string): string;
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export declare function segmentize(str: string): string;
+export {};

package/dist/utility.svelte.js

@@ -0,0 +1,104 @@
+import { onMount } from 'svelte';
+export function pick(item, keys) {
+    return keys.reduce((acc, key) => ({ ...acc, [key]: item[key] }), {});
+}
+export function boundPick(item, keys) {
+    const obj = {};
+    for (const key in keys) {
+        obj[key] = [() => item[key], (v) => item[key] = v];
+    }
+    return Object.defineProperties({}, withSetters(obj));
+}
+export function assign(item, props = {}) {
+    for (const key in props) {
+        const value = props[key];
+        if (value === undefined)
+            continue;
+        if (typeof value === 'object') {
+            assign(item[key], value);
+            continue;
+        }
+        item[key] = value;
+    }
+}
+export function boundAssign(item, props = {}) {
+    for (const key in props) {
+        const value = props[key];
+        if (value === undefined)
+            continue;
+        if (typeof value === 'object') {
+            boundAssign(item[key], value);
+            continue;
+        }
+        Object.defineProperty(item, value, {
+            get() { return props[key]; },
+            set(v) { props[key] = v; }
+        });
+    }
+}
+export function mounted() {
+    let isMounted = $state(false);
+    onMount(() => { isMounted = true; });
+    return {
+        get isMounted() { return isMounted; }
+    };
+}
+export function getters(obj) {
+    let items = {};
+    for (const key in obj) {
+        items[key] = { get: () => obj[key] };
+    }
+    return items;
+}
+export function withSetters(obj) {
+    let items = {};
+    for (const key in obj) {
+        items[key] = {
+            get: () => obj[key][0](),
+            set: (v) => obj[key][1](v)
+        };
+    }
+    return items;
+}
+export function fromProps(props, boundProps) {
+    return Object.defineProperties({}, {
+        ...getters(props),
+        ...withSetters(boundProps ?? {})
+    });
+}
+export function assignDescriptors(target, source) {
+    for (const key of Object.keys(source)) {
+        const descriptor = Object.getOwnPropertyDescriptor(source, key);
+        if (descriptor) {
+            Object.defineProperty(target, key, descriptor);
+        }
+        else {
+            target[key] = source[key]; // Copy regular values if descriptor is missing
+        }
+    }
+    return target;
+}
+/** Capitalize by space */
+export function capitalize(str) {
+    let parts = str.split(' ');
+    let result = '';
+    for (let part of parts) {
+        result += part.charAt(0).toUpperCase() + part.slice(1) + ' ';
+    }
+    return result;
+}
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export function segmentize(str) {
+    let result = '';
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        const prevChar = i > 0 ? str[i - 1] : '';
+        if ((char === '-' || char === char.toUpperCase()) && prevChar !== ' ' && prevChar !== prevChar.toUpperCase()) {
+            result += ' ';
+            if (char === '-')
+                continue;
+        }
+        result += char;
+    }
+    return result.trim();
+}

package/package.json

@@ -1,54 +1,35 @@
 {
-	"name": "svelte-tably",
-	"version": "1.0.0-next.9",
-	"repository": "github:refzlund/svelte-tably",
-	"homepage": "https://github.com/Refzlund/svelte-tably",
-	"bugs": {
-		"url": "https://github.com/Refzlund/svelte-tably/issues"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@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",
-		"vite": "^6.0.0"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"type": "module",
-	"types": "./dist/index.d.ts",
-	"dependencies": {
-		"@faker-js/faker": "^9.3.0"
-	}
-}
+    "name": "svelte-tably",
+    "version": "1.0.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Refzlund/svelte-tably.git"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/Refzlund/svelte-tably/issues"
+    },
+    "files": [
+        "dist",
+        "!dist/**/*.test.*",
+        "!dist/**/*.spec.*"
+    ],
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "svelte": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        }
+    },
+    "dependencies": {
+        "runic-reorder": "^1.0.0"
+    },
+    "peerDependencies": {
+        "svelte": "^5.0.0"
+    }
+}

package/dist/Column.svelte

@@ -1,164 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script module lang="ts">
-	export type RowCtx<V> = {
-		readonly value: V
-		readonly isHovered: boolean
-		readonly index: number
-		selected: boolean
-	}
-
-	export interface ColumnProps<T, 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: RowCtx<V>]>
-		statusbar?: Snippet
-
-		id: string
-
-		// options
-		/**
-		 * Is this column sticky by default?
-		 * @default false
-		*/
-		sticky?: boolean
-		/** 
-		 * Fixed is like sticky, but in its own category — meant to not be moved/hidden ex. select-boxes
-		 * @default false
-		*/
-		fixed?: boolean
-		/**
-		 * Is this column sorted by default?
-		 * @default false
-		*/
-		sort?: boolean
-		/**
-		 * Is this column visible by default?
-		 * @default true
-		 */
-		show?: boolean
-		/**
-		 * The width of the column in pixels by default
-		 * @default 150
-		 */
-		width?: number
-		/**
-		 * The value of the row. Required for sorting/filtering
-		 * @example row => row.name
-		*/
-		value?: (item: T) => V
-		/**
-		 * Makes the column sortable. Sorts based of a sorting function.
-		 * 
-		 * **Important**   `value`-attribute is required adjacent to this.
-		 * 
-		 * If `true` uses the default `.sort()` algorithm.
-		 * 
-		 * @default false
-		*/
-		sorting?: boolean | ((a: V, b: V) => number)
-		/**
-		 * Is this column resizeable?  
-		 * Can not be resized if Table is marked as `resizeable={false}` 
-		 * @default true
-		*/
-		resizeable?: boolean
-
-		/**
-		 * Optional: Provide the table it is a part of
-		*/
-		table?: TableState
-	}
-
-	export interface ColumnState<T = unknown, V = unknown, C extends ColumnProps<T, V> = ColumnProps<T, V>> {
-		id: C['id']
-		header?: C['header']
-		row: C['row']
-		statusbar?: C['statusbar']
-
-		fixed?: boolean
-
-		/** Default options for initial table */
-		defaults: {
-			sticky?: boolean
-			sort?: boolean
-			show?: boolean
-			width?: number
-		}
-		/** More options */
-		options: {
-			value?: C['value']
-			sorting?: boolean | ((a: any, b: any) => number)
-			resizeable: boolean
-		}
-	}
-</script>
-
-<script lang="ts">
-	import { onDestroy, type Snippet } from 'svelte'
-	import { getTableState, type TableState } from './Table.svelte'
-
-	type T = $$Generic<Record<PropertyKey, any>>
-	type V = $$Generic
-
-	let {
-		header,
-		row,
-		statusbar,
-		id,
-
-		sticky = false,
-		fixed = false,
-		sort = false,
-		show = true,
-		width,
-
-		resizeable = true,
-		value,
-		sorting,
-
-		table
-	}: ColumnProps<T, V> = $props()
-
-	const column: ColumnState<T, V> = $state({
-		id,
-		header,
-		row,
-		statusbar,
-		fixed,
-		defaults: {
-			sticky,
-			sort,
-			show,
-			width
-		},
-		options: {
-			value,
-			sorting,
-			resizeable
-		}
-	})
-
-	table ??= getTableState()
-	table.addColumn(id, column as ColumnState)
-
-	onDestroy(() => {
-		table.removeColumn(id)
-	})
-</script>