svelte-tably 1.0.0-next.11 → 1.0.0-next.13

package/README.md

@@ -4,7 +4,7 @@ Work in progress. I needed a break from my primary project, so here's a little s
 
 Example on [Svelte 5 Playground](https://svelte.dev/playground/a16d71c97445455e80a55b77ec1cf915?version=5)
 
-A high performant dynamic table
+A high performant, feature rich, dynamic table
 
 - [x] Sticky columns
 - [x] Show/hide columns
@@ -17,10 +17,10 @@ A high performant dynamic table
 - [x] sorting
 - [x] select
 - [x] filtering
-- [ ] orderable table
+- [x] reorderable table
 - [ ] row context-menu
-- [ ] dropout section
-- [ ] csv export
+- [x] Expandable rows
+- [x] to CSV
 
 ### Usage Notes
 
@@ -34,7 +34,7 @@ A high performant dynamic table
     ])
 
     let activePanel = $state('columns') as string | undefined
-	let selected = $state([]) as typeof data
+    let selected = $state([]) as typeof data
 </script>
 
 <Table {data} panel={activePanel} select bind:selected>

package/dist/column/Column.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang="ts">
+
+	import { fromProps } from '../utility.svelte.js'
+	import { ColumnState, type ColumnProps } from './column.svelte.js'
+
+	type T = $$Generic<Record<PropertyKey, any>>
+	type V = $$Generic
+
+	let {...props}: ColumnProps<T, V> = $props()
+	const properties = fromProps(props)
+	
+	new ColumnState<T, V>(properties)
+	
+</script>

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

@@ -0,0 +1,24 @@
+declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
+    props(): ColumnProps<T_1, V_1>;
+    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/column/column.svelte.js

@@ -0,0 +1,60 @@
+import {} from 'svelte';
+import { TableState } from '../table/table.svelte.js';
+import { assign, pick } from '../utility.svelte.js';
+export class ColumnState {
+    #props = {};
+    id = $derived(this.#props.id);
+    /**
+     * Associated table
+    */
+    table;
+    snippets = $derived({
+        header: this.#props.header,
+        /** Title is the header-snippet, with header-ctx: `{ header: false }` */
+        title: (...args) => {
+            const getData = () => this.table.data.current;
+            return this.#props.header?.(...[args[0], () => ({
+                    get header() { return false; },
+                    get data() {
+                        return getData();
+                    }
+                })]);
+        },
+        row: this.#props.row,
+        statusbar: this.#props.statusbar
+    });
+    /**
+     * Variables that can be saved (e.g. localStorage)
+     * and re-provided, where these are default-fallbacks
+    */
+    defaults = $derived({
+        sticky: this.#props.sticky ?? false,
+        show: this.#props.show ?? true,
+        sortby: this.#props.sortby ?? false,
+        width: this.#props.width ?? 150
+    });
+    /** Static options */
+    options = $derived({
+        fixed: this.#props.fixed ?? false,
+        sort: this.#props.sort ?? false,
+        filter: this.#props.filter,
+        value: this.#props.value,
+        resizeable: this.#props.resizeable ?? true,
+    });
+    toggleVisiblity() {
+        const index = this.table.positions.hidden.indexOf(this);
+        if (index > -1)
+            this.table.positions.hidden.splice(index, 1);
+        else
+            this.table.positions.hidden.push(this);
+    }
+    constructor(props) {
+        this.#props = props;
+        this.table = props.table ?? TableState.getContext();
+        if (!this.table) {
+            throw new Error('svelte-tably: Column must be associated with a Table');
+        }
+        const remove = this.table.add(this);
+        $effect(() => remove);
+    }
+}

package/dist/conditional.svelte.d.ts

@@ -0,0 +1,10 @@
+type Actionable<A extends unknown | unknown[]> = {
+    destroy?: () => void;
+    update?: (args: A) => void;
+};
+export declare function conditional<A extends unknown | unknown[]>(node: HTMLElement, arg: [
+    condition: (() => boolean) | boolean,
+    action: ((node: HTMLElement, args?: A) => void | Actionable<A>),
+    args?: A
+]): void;
+export {};

package/dist/conditional.svelte.js

@@ -0,0 +1,26 @@
+import { untrack } from 'svelte';
+/*
+    use:conditional={[condition, action, arg]}
+    use:conditional={[condition, (node) => action(node, arg), updatedArg]}
+*/
+export function conditional(node, arg) {
+    let prev;
+    let clean;
+    $effect(() => {
+        prev?.destroy?.();
+        clean?.();
+        if (typeof arg[0] === 'function' ? arg[0]() : arg[0]) {
+            untrack(() => {
+                prev = arg[1](node, arg[2]);
+                if (prev?.update) {
+                    clean = $effect.root(() => {
+                        $effect(() => {
+                            prev.update(arg[2]);
+                        });
+                    });
+                }
+            });
+            return clean;
+        }
+    });
+}

package/dist/expandable/Expandable.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang='ts'>
+
+	import { ExpandableState, type ExpandableProps } from './expandable.svelte.js'
+	import type { AnyRecord } from '../utility.svelte.js'
+	import { fromProps } from '../utility.svelte.js'
+
+	type T = $$Generic<AnyRecord>
+
+	let { ...restProps }: ExpandableProps<T> = $props()
+	
+	const properties = fromProps(restProps)
+	new ExpandableState<T>(properties)
+
+</script>

package/dist/expandable/Expandable.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AnyRecord } from '../utility.svelte.js';
+declare class __sveltets_Render<T extends AnyRecord> {
+    props(): ExpandableProps<T_1>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends AnyRecord>(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 AnyRecord>(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 Expandable: $$IsomorphicComponent;
+type Expandable<T extends AnyRecord> = InstanceType<typeof Expandable<T>>;
+export default Expandable;

package/dist/expandable/expandable.svelte.js

@@ -0,0 +1,20 @@
+import { TableState } from '../table/table.svelte.js';
+export class ExpandableState {
+    #table;
+    #props = $state({});
+    snippets = $derived({
+        content: this.#props.content
+    });
+    options = $derived({
+        slide: this.#props.slide ?? 200
+    });
+    constructor(props) {
+        this.#props = props;
+        this.#table = TableState.getContext();
+        if (!this.#table) {
+            throw new Error('svelte-tably: Expandable must be associated with a Table');
+        }
+        this.#table.expandable = this;
+        $effect(() => () => this.#table.expandable === this && (this.#table.expandable = undefined));
+    }
+}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { default as default } from './Table.svelte';
-export { default as Panel } from './Panel.svelte';
-export { default as Column } from './Column.svelte';
+export { default as default } from './table/Table.svelte';
+export { default as Panel } from './panel/Panel.svelte';
+export { default as Column } from './column/Column.svelte';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { default as default } from './Table.svelte';
-export { default as Panel } from './Panel.svelte';
-export { default as Column } from './Column.svelte';
+export { default as default } from './table/Table.svelte';
+export { default as Panel } from './panel/Panel.svelte';
+export { default as Column } from './column/Column.svelte';

package/dist/panel/Panel.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script module lang='ts'>
+
+	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 { Tween } from 'svelte/motion'
+	import { sineInOut } from 'svelte/easing'
+	import { PanelState, type PanelProps } from './panel.svelte.js'
+	import { fromProps } from '../utility.svelte.js'
+
+	let {...props}: PanelProps<T> = $props()
+	const properties = fromProps(props)
+
+	new PanelState<T>(properties)
+
+</script>

package/dist/{Panel.svelte.d.ts → panel/Panel.svelte.d.ts}

@@ -1,11 +1,3 @@
-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 declare class PanelTween {
     #private;
     current: number;
@@ -15,18 +7,8 @@ export declare class PanelTween {
     set target(value: number);
     constructor(cb: () => string | undefined, added?: number);
 }
-import { type Snippet } from 'svelte';
-import { type TableState } from './Table.svelte';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
-    props(): {
-        id: string;
-        /** A darkened backdrop? */
-        backdrop?: boolean;
-        children: Snippet<[context: {
-            readonly table: TableState<T>;
-            readonly data: T[];
-        }]>;
-    };
+    props(): PanelProps<T_1>;
     events(): {};
     slots(): {};
     bindings(): "";

package/dist/panel/panel.svelte.js

@@ -0,0 +1,19 @@
+import { TableState } from '../table/table.svelte.js';
+import {} from '../utility.svelte.js';
+export class PanelState {
+    #props = {};
+    table;
+    id = $derived(this.#props.id);
+    backdrop = $derived(this.#props.backdrop ?? true);
+    children = $derived(this.#props.children);
+    constructor(props) {
+        this.#props = props;
+        const table = props.table ?? TableState.getContext();
+        if (!table) {
+            throw new Error('svelte-tably: Panel must be associated with a Table');
+        }
+        this.table = table;
+        const remove = table.add(this);
+        $effect(() => remove);
+    }
+}

package/dist/size-tween.svelte.d.ts

@@ -0,0 +1,14 @@
+interface SizeOptions {
+    min?: number;
+    duration?: number;
+}
+export declare class SizeTween {
+    #private;
+    current: number;
+    transitioning: boolean;
+    /** bind:offsetWidth bind:offsetHeight */
+    size: number;
+    set target(value: number);
+    constructor(cb: () => boolean | undefined, opts?: SizeOptions);
+}
+export {};

package/dist/size-tween.svelte.js

@@ -0,0 +1,30 @@
+import { tick, untrack } from 'svelte';
+import { sineInOut } from 'svelte/easing';
+import { Tween } from 'svelte/motion';
+export class SizeTween {
+    #tweenOptions = { duration: 300, easing: sineInOut };
+    #tween = new Tween(0, this.#tweenOptions);
+    current = $derived(this.#tween.current);
+    transitioning = $state(false);
+    /** bind:offsetWidth bind:offsetHeight */
+    size = $state(0);
+    set target(value) {
+        this.transitioning = true;
+        this.#tween.set(value, this.#tweenOptions).then(() => this.transitioning = false);
+    }
+    constructor(cb, opts = {}) {
+        if ('duration' in opts) {
+            this.#tweenOptions.duration = opts.duration;
+        }
+        untrack(() => {
+            if (cb()) {
+                requestAnimationFrame(() => {
+                    this.#tween.set(Math.max(this.size, opts.min ?? 0), { duration: 0 });
+                });
+            }
+        });
+        $effect.pre(() => {
+            this.target = cb() ? Math.max(this.size, opts.min ?? 0) : 0;
+        });
+    }
+}