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

package/dist/column/column-state.svelte.js

@@ -0,0 +1,64 @@
+import { TableState } from '../table/table-state.svelte.js';
+import { getDefaultHeader } from './Column.svelte';
+export class ColumnState {
+    #props = {};
+    id = $derived(this.#props.id);
+    /**
+     * Associated table
+    */
+    table;
+    snippets = $derived({
+        header: typeof this.#props.header === 'string' ? getDefaultHeader(this.#props.header) : this.#props.header,
+        /** Title is the header-snippet, with header-ctx: `{ header: false }` */
+        title: (...args) => {
+            const getData = () => this.table.dataState.current;
+            return this.snippets.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,
+        style: this.#props.style,
+        class: this.#props.class,
+        onclick: this.#props.onclick,
+        padRow: this.#props.pad === 'row' || this.#props.pad === 'both',
+        padHeader: this.#props.pad === 'header' || this.#props.pad === 'both'
+    });
+    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-state.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,26 @@
+import { type ExpandableProps } from './expandable-state.svelte.js';
+import type { AnyRecord } from '../utility.svelte.js';
+declare class __sveltets_Render<T extends AnyRecord> {
+    props(): ExpandableProps<T>;
+    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-state.svelte.d.ts

@@ -0,0 +1,48 @@
+import { type RowCtx } from '../table/table-state.svelte.js';
+import type { AnyRecord } from '../utility.svelte.js';
+import type { Snippet } from 'svelte';
+import type { EasingFunction } from 'svelte/transition';
+export interface ExpandableProps<T extends AnyRecord> {
+    content: Snippet<[item: T, ctx: RowCtx<T>]>;
+    /**
+     * How many ms to slide open?
+     * @default { duration: 200, easing: sineInOut }
+    */
+    slide?: {
+        /** In milliseconds @default 150 */
+        duration?: number;
+        /** @default sineInOut */
+        easing?: EasingFunction;
+    };
+    /**
+     * Whether you can click on a row to expand/collapse it
+     * @default true
+    */
+    click?: boolean;
+    /**
+     * Whether to show the chevron on the left?
+     * @default 'hover'
+     */
+    chevron?: 'always' | 'hover' | 'never';
+    /**
+     * Whether multiple can be open at a time?
+     * @default false
+    */
+    multiple?: boolean;
+}
+export declare class ExpandableState<T extends AnyRecord> {
+    #private;
+    snippets: {
+        content: Snippet<[item: T, ctx: RowCtx<T>]>;
+    };
+    options: {
+        slide: {
+            duration: number;
+            easing: EasingFunction;
+        };
+        click: boolean;
+        chevron: "hover" | "always" | "never";
+        multiple: boolean;
+    };
+    constructor(props: ExpandableProps<T>);
+}

package/dist/expandable/expandable-state.svelte.js

@@ -0,0 +1,27 @@
+import { TableState } from '../table/table-state.svelte.js';
+import { sineInOut } from 'svelte/easing';
+export class ExpandableState {
+    #table;
+    #props = {};
+    snippets = $derived({
+        content: this.#props.content
+    });
+    options = $derived({
+        slide: {
+            duration: this.#props.slide?.duration ?? 150,
+            easing: this.#props.slide?.easing ?? sineInOut
+        },
+        click: this.#props.click ?? true,
+        chevron: this.#props.chevron ?? 'hover',
+        multiple: this.#props.multiple ?? false
+    });
+    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,10 @@
-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';
+export { default as Row } from './row/Row.svelte';
+export { default as Expandable } from './expandable/Expandable.svelte';
+export type { TableState, TableProps } from './table/table-state.svelte.js';
+export type { RowState, RowProps } from './row/row-state.svelte.js';
+export type { ColumnState, ColumnProps } from './column/column-state.svelte.js';
+export type { ExpandableState, ExpandableProps } from './expandable/expandable-state.svelte.js';
+export type { PanelState, PanelProps } from './panel/panel-state.svelte.js';

package/dist/index.js

@@ -1,3 +1,5 @@
-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';
+export { default as Row } from './row/Row.svelte';
+export { default as Expandable } from './expandable/Expandable.svelte';

package/dist/panel/Panel.svelte

@@ -0,0 +1,21 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
+
+	import { PanelState, type PanelProps } from './panel-state.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,32 +1,6 @@
-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;
-    transitioning: boolean;
-    /** bind:clientWidth */
-    width: number;
-    set target(value: number);
-    constructor(cb: () => string | undefined, added?: number);
-}
-import { type Snippet } from 'svelte';
-import { type TableState } from './Table.svelte';
+import { type PanelProps } from './panel-state.svelte.js';
 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>;
     events(): {};
     slots(): {};
     bindings(): "";

package/dist/panel/panel-state.svelte.d.ts

@@ -0,0 +1,25 @@
+import { TableState } from '../table/table-state.svelte.js';
+import { type AnyRecord } from '../utility.svelte.js';
+import type { Snippet } from 'svelte';
+export type PanelProps<T extends AnyRecord> = {
+    id: string;
+    /**
+     * A darkened backdrop?
+     * @default true
+    */
+    backdrop?: boolean;
+    table?: TableState<T>;
+    children: Snippet<[ctx: PanelCtx<T>]>;
+};
+export type PanelCtx<T extends AnyRecord> = {
+    readonly table: TableState<T>;
+    readonly data: T[];
+};
+export declare class PanelState<T extends AnyRecord> {
+    #private;
+    table: TableState<T>;
+    id: string;
+    backdrop: boolean;
+    children: Snippet<[ctx: PanelCtx<T>]>;
+    constructor(props: PanelProps<T>);
+}

package/dist/panel/panel-state.svelte.js

@@ -0,0 +1,18 @@
+import { TableState } from '../table/table-state.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/row/Row.svelte

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

package/dist/row/Row.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type RowProps } from './row-state.svelte.js';
+import type { AnyRecord } from '../utility.svelte.js';
+declare class __sveltets_Render<T extends AnyRecord> {
+    props(): RowProps<T>;
+    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 Row: $$IsomorphicComponent;
+type Row<T extends AnyRecord> = InstanceType<typeof Row<T>>;
+export default Row;

package/dist/row/row-state.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type RowCtx } from '../table/table-state.svelte.js';
+import type { AnyRecord } from '../utility.svelte.js';
+import type { Snippet } from 'svelte';
+type ContextOptions<T extends AnyRecord> = {
+    /**
+     * Only show when hovering the row?
+     * @default true
+    */
+    hover?: boolean;
+    /**
+     * @defualt 'max-content'
+     */
+    width?: string;
+};
+export interface RowProps<T extends AnyRecord> {
+    /**
+     * A sticky context column on the right of each table
+    */
+    context?: Snippet<[item: T, ctx: RowCtx<T>]>;
+    contextOptions?: ContextOptions<T>;
+    contextHeader?: Snippet;
+    onclick?: (event: MouseEvent, ctx: RowCtx<T>) => void;
+    oncontextmenu?: (event: MouseEvent, ctx: RowCtx<T>) => void;
+}
+export declare class RowState<T extends AnyRecord> {
+    #private;
+    snippets: {
+        context: Snippet<[item: T, ctx: RowCtx<T>]> | undefined;
+        contextHeader: Snippet<[]> | undefined;
+    };
+    events: {
+        onclick: ((event: MouseEvent, ctx: RowCtx<T>) => void) | undefined;
+        oncontextmenu: ((event: MouseEvent, ctx: RowCtx<T>) => void) | undefined;
+    };
+    options: {
+        context: {
+            hover: boolean;
+            width: string;
+        };
+    };
+    constructor(props: RowProps<T>);
+}
+export {};

package/dist/row/row-state.svelte.js

@@ -0,0 +1,28 @@
+import { TableState } from '../table/table-state.svelte.js';
+export class RowState {
+    #table;
+    #props = {};
+    snippets = $derived({
+        context: this.#props.context,
+        contextHeader: this.#props.contextHeader
+    });
+    events = $derived({
+        onclick: this.#props.onclick,
+        oncontextmenu: this.#props.oncontextmenu
+    });
+    options = $derived({
+        context: {
+            hover: this.#props.contextOptions?.hover ?? true,
+            width: this.#props.contextOptions?.width ?? 'max-content'
+        }
+    });
+    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.row = this;
+        $effect(() => () => this.#table.row === this && (this.#table.row = undefined));
+    }
+}

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

@@ -0,0 +1,16 @@
+import type { EasingFunction } from 'svelte/transition';
+interface SizeOptions {
+    min?: number;
+    duration?: number;
+    easing?: EasingFunction;
+}
+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,33 @@
+import { 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;
+        }
+        if ('easing' in opts) {
+            this.#tweenOptions.easing = opts.easing;
+        }
+        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;
+        });
+    }
+}