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

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
@@ -16,8 +16,8 @@ A high performant dynamic table
 - [x] Virtual elements
 - [x] sorting
 - [x] select
-- [ ] filtering
-- [ ] orderable table
+- [x] filtering
+- [x] reorderable table
 - [ ] row context-menu
 - [ ] dropout section
 - [ ] csv export

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/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);
+    }
+}