svelte-tably 1.0.0-next.9 → 1.0.1-next.0

package/package.json

@@ -1,54 +1,30 @@
 {
-	"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",
+    "description": "A high performant dynamic table for Svelte 5",
+    "version": "1.0.1-next.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"
+    ],
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js",
+            "svelte": "./dist/index.js"
+        }
+    },
+    "dependencies": {
+        "runic-reorder": "^1"
+    },
+    "peerDependencies": {
+        "svelte": "^5"
+    }
+}

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>

package/dist/Column.svelte.d.ts

@@ -1,115 +0,0 @@
-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;
-    /**
-     * 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;
-    };
-}
-import { type Snippet } from 'svelte';
-import { type TableState } from './Table.svelte';
-declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
-    props(): ColumnProps<T, V>;
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    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']>> & {
-        $$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']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-/**
- * This is a description, \
- * on how to use this.
- *
- * @example
- * <Component />
- */
-declare const Column: $$IsomorphicComponent;
-type Column<T extends Record<PropertyKey, any>, V> = InstanceType<typeof Column<T, V>>;
-export default Column;

package/dist/Panel.svelte

@@ -1,74 +0,0 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script module lang='ts'>
-	
-	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[] }]>
-	}
-
-	export class PanelTween {
-		#tween = new Tween(0, { duration: 300, easing: sineInOut })
-		current = $derived(this.#tween.current)
-		transitioning = $state(false)
-
-		/** bind:clientWidth */
-		width = $state(0)
-
-		set target(value: number) {
-			this.transitioning = true
-			this.#tween.set(value).then(() => this.transitioning = false)
-		}
-
-		constructor(cb: () => string | undefined, added = 0) {
-			$effect.pre(() => {
-				this.target = cb() ? this.width + added : 0
-			})
-		}
-	}
-
-</script>
-
-<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
-
-	import { onDestroy, type Snippet } from 'svelte'
-	import Table, { getTableState, type TableState } from './Table.svelte'
-	import { Tween } from 'svelte/motion'
-	import { sineInOut } from 'svelte/easing'
-
-	interface Props {
-		id: string
-
-		/** A darkened backdrop? */
-		backdrop?: boolean
-		children: Snippet<[context: { readonly table: TableState<T>, readonly data: T[] }]>
-	}
-
-	let {
-		backdrop = true,
-		children,
-		id
-	}: Props = $props()
-
-	const panel: Panel<T> = $state({
-		backdrop,
-		content: children
-	})
-
-	const table = getTableState()
-	table.panels[id] = panel
-
-	onDestroy(() => {
-		delete table.panels[id]
-	})
-
-</script>