svelte-tably 1.0.0-next.9 → 1.0.0

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.svelte.js';
+export type { RowState, RowProps } from './row/row.svelte.js';
+export type { ColumnState, ColumnProps } from './column/column.svelte.js';
+export type { ExpandableState, ExpandableProps } from './expandable/expandable.svelte.js';
+export type { PanelState, PanelProps } from './panel/panel.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.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,5 @@
-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';
 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,18 @@
+import { TableState } from '../table/table.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.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,25 @@
+import type { AnyRecord } from '../utility.svelte.js';
+declare class __sveltets_Render<T extends AnyRecord> {
+    props(): RowProps<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 Row: $$IsomorphicComponent;
+type Row<T extends AnyRecord> = InstanceType<typeof Row<T>>;
+export default Row;

package/dist/row/row.svelte.js

@@ -0,0 +1,28 @@
+import { TableState } from '../table/table.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;
+        });
+    }
+}