svelte-tably 1.0.0 → 1.0.1

package/dist/column/Column.svelte

@@ -1,41 +1,39 @@
-<!-- @component
-
-	This is a description, \
-	on how to use this.
-
-@example
-<Component />
-
--->
-
-<script lang="ts">
-
-	import { fromProps, type AnyRecord } from '../utility.svelte.js'
-	import type { Snippet } from 'svelte'
-	import { ColumnState, type ColumnProps, type HeaderCtx, type ColumnSnippets } 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>
-
-<script module lang='ts'>
-	
-	declare const defaultHeader: <T extends AnyRecord>(anchor: unknown, title: () => string, ctx: HeaderCtx<T>) => ReturnType<Snippet>
-	
-	export function getDefaultHeader<T extends AnyRecord,V>(title: string) {
-		return (
-			(anchor: unknown, ctx: HeaderCtx<T>) => defaultHeader<T>(anchor, () => title, ctx)
-		) as Exclude<ColumnSnippets<T, V>['header'], string>
-	}
-
-</script>
-
-{#snippet defaultHeader(title: string, ctx: HeaderCtx<T>)}
-	{title}
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script module lang='ts'>
+
+	export function getDefaultHeader<T extends AnyRecord,V>(title: string) {
+		return (
+			(anchor: Comment) => snippetLiteral(defaultHeader)(anchor, () => title)
+		) as unknown as () => any
+	}
+
+</script>
+
+<script lang='ts'>
+
+	import { fromProps, snippetLiteral, type AnyRecord } from '../utility.svelte.js'
+	import { ColumnState, type ColumnProps, type HeaderCtx, type ColumnSnippets } from './column-state.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>
+
+
+{#snippet defaultHeader(title: string)}
+	{title}
 {/snippet}

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

@@ -1,8 +1,27 @@
-export declare function getDefaultHeader<T extends AnyRecord, V>(title: string): Exclude<ColumnSnippets<T, V>["header"], string>;
+export declare function getDefaultHeader<T extends AnyRecord, V>(title: string): () => any;
 import { type AnyRecord } from '../utility.svelte.js';
-import { type ColumnSnippets } from './column.svelte.js';
+import { type HeaderCtx } from './column-state.svelte.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
-    props(): ColumnProps<T_1, V_1>;
+    props(): {
+        id: string;
+        table?: import("../index.js").TableState<T> | undefined;
+        header?: string | import("svelte").Snippet<[ctx: HeaderCtx<T>]> | undefined;
+        row?: import("svelte").Snippet<[item: T, ctx: import("./column-state.svelte.js").RowColumnCtx<T, V>]> | undefined;
+        statusbar?: import("svelte").Snippet<[ctx: import("./column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+        sticky?: boolean | undefined;
+        show?: boolean | undefined;
+        sortby?: boolean | undefined;
+        width?: number | undefined;
+        fixed?: boolean | undefined;
+        value?: ((item: T) => V) | undefined;
+        sort?: boolean | ((a: V, b: V) => number) | undefined;
+        resizeable?: boolean | undefined;
+        filter?: ((value: V) => boolean) | undefined;
+        style?: string | undefined;
+        class?: string | undefined;
+        onclick?: ((event: MouseEvent, rowColumnCtx: import("./column-state.svelte.js").RowColumnCtx<T, V>) => void) | undefined;
+        pad?: "row" | "header" | "both" | undefined;
+    };
     events(): {};
     slots(): {};
     bindings(): "";

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

@@ -0,0 +1,138 @@
+import { type Snippet } from 'svelte';
+import { TableState, type RowCtx } from '../table/table-state.svelte.js';
+import { type AnyRecord } from '../utility.svelte.js';
+export type ColumnProps<T extends AnyRecord, V> = ({
+    id: string;
+    table?: TableState<T>;
+} & ColumnSnippets<T, V> & ColumnDefaults<T> & ColumnOptions<T, V>) extends infer K ? {
+    [P in keyof K]: K[P];
+} : never;
+export interface HeaderCtx<T> {
+    readonly data: T[];
+    /**
+     * Is true when displaying in the header,
+     * so additional content can be shown if desired,
+     * so the header snippet can be re-used.
+     */
+    readonly header?: boolean;
+}
+export interface RowColumnCtx<T extends AnyRecord, V> extends RowCtx<T> {
+    readonly value: V;
+    readonly columnHovered: boolean;
+}
+export type StatusbarCtx<T extends AnyRecord> = {
+    readonly data: T[];
+};
+export type ColumnSnippets<T extends AnyRecord, V> = {
+    header?: Snippet<[ctx: HeaderCtx<T>]> | string;
+    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]>;
+    statusbar?: Snippet<[ctx: StatusbarCtx<T>]>;
+};
+type ColumnDefaults<T> = {
+    /**
+     * Is this column sticky by default?
+     * @default false
+    */
+    sticky?: boolean;
+    /**
+     * Is this column visible by default?
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Is this column sorted by default?
+     * @default false
+    */
+    sortby?: boolean;
+    /**
+     * The width of the column in pixels by default
+     * @default 150
+     */
+    width?: number;
+};
+type ColumnOptions<T extends AnyRecord, V> = {
+    /**
+     * Fixed is like sticky, but in its own category — meant to not be moved/hidden ex. select-boxes
+     * @default false
+    */
+    fixed?: boolean;
+    /**
+     * 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
+    */
+    sort?: 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;
+    /**
+     *
+     * @example (value) => value.includes(search)
+    */
+    filter?: (value: V) => boolean;
+    /** Styling for the column element (td) */
+    style?: string;
+    /** Class for the column element (td) */
+    class?: string;
+    /** Event when the row-column is clicked */
+    onclick?: (event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void;
+    /**
+     * Pad child element of `td`/`th` instead of the column element itself.
+     * This ensures the child element "fills" the whole column.
+     * Ex. good if you want to make the column an anchor link; `<a href='...'>`
+    */
+    pad?: 'row' | 'header' | 'both';
+};
+export declare class ColumnState<T extends AnyRecord = any, V = any> {
+    #private;
+    id: string;
+    /**
+     * Associated table
+    */
+    table: TableState<T>;
+    snippets: {
+        header: Snippet<[ctx: HeaderCtx<T>]> | (() => any) | undefined;
+        /** Title is the header-snippet, with header-ctx: `{ header: false }` */
+        title: (...args: any[]) => any;
+        row: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+        statusbar: Snippet<[ctx: StatusbarCtx<T>]> | undefined;
+    };
+    /**
+     * Variables that can be saved (e.g. localStorage)
+     * and re-provided, where these are default-fallbacks
+    */
+    defaults: {
+        sticky: boolean;
+        show: boolean;
+        sortby: boolean;
+        width: number;
+    };
+    /** Static options */
+    options: {
+        fixed: boolean;
+        sort: boolean | ((a: V, b: V) => number);
+        filter: ((value: V) => boolean) | undefined;
+        value: ((item: T) => V) | undefined;
+        resizeable: boolean;
+        style: string | undefined;
+        class: string | undefined;
+        onclick: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+        padRow: boolean;
+        padHeader: boolean;
+    };
+    toggleVisiblity(): void;
+    constructor(props: ColumnProps<T, V>);
+}
+export {};

package/dist/column/{column.svelte.js → column-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 import { getDefaultHeader } from './Column.svelte';
 export class ColumnState {
     #props = {};

package/dist/expandable/Expandable.svelte

@@ -1,24 +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>
+<!-- @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

@@ -1,6 +1,7 @@
+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_1>;
+    props(): ExpandableProps<T>;
     events(): {};
     slots(): {};
     bindings(): "";

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.svelte.js → expandable-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 import { sineInOut } from 'svelte/easing';
 export class ExpandableState {
     #table;

package/dist/index.d.ts

@@ -3,8 +3,8 @@ 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';
+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/panel/Panel.svelte

@@ -1,21 +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)
-
+<!-- @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/Panel.svelte.d.ts

@@ -1,5 +1,6 @@
+import { type PanelProps } from './panel-state.svelte.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
-    props(): PanelProps<T_1>;
+    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.svelte.js → panel-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 export class PanelState {
     #props = {};
     table;

package/dist/row/Row.svelte

@@ -1,24 +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>
+<!-- @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

@@ -1,6 +1,7 @@
+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_1>;
+    props(): RowProps<T>;
     events(): {};
     slots(): {};
     bindings(): "";

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.svelte.js → row-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 export class RowState {
     #table;
     #props = {};