svelte-tably 1.1.2 → 1.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 Via the amazing capabilities braught to us by Svelte 5 — a performant, dynamic, flexible, feature rich table. It's as simple, or as flexible as you need it to be.
 
-Simple example on [Svelte 5 Playground](https://svelte.dev/playground/f79124e8473546d29433a95a68440d6d?version=5.16.0)
+Simple example on [Svelte 5 Playground](https://svelte.dev/playground/f79124e8473546d29433a95a68440d6d?version=5)
 <br>
 Fledged out example on [Svelte 5 Playground](https://svelte.dev/playground/a16d71c97445455e80a55b77ec1cf915?version=5)
 
@@ -51,7 +51,7 @@ On top of that, the library API is extensive, so the table can meet your needs.
 <Table auto {data} resizeable={false} filters={[...]} />
 
 <Table {data} panel={activePanel} select bind:selected>
-    {#snippet content({ Column, Panel, Expandable, Row, state, table })}
+    {#snippet content({ Column, Panel, Expandable, Row, table })}
         <Column id='name' sticky sort value={r => r.name} filter={v => v.includes('Giraffe')}>
             {#snippet header(ctx)}
                 Name
@@ -92,6 +92,13 @@ On top of that, the library API is extensive, so the table can meet your needs.
 </Table>
 ```
 
+> [!NOTE]
+> Animations (panel/expandable) respect `prefers-reduced-motion`.
+
+> [!TIP]
+> To export CSV, you can either `bind:table` to get the `TableState` instance (which exposes `table.toCSV(...)`),
+> or `bind:this` and call the component export `toCSV(...)`.
+
 ### Styling
 
 For quick styling
@@ -248,6 +255,7 @@ This component can add a context-menu on the side of each row, as well as provid
 | - | - | - |
 | hover? | Only show when hovering? | `boolean` |
 | width? | The width for the context-column | `string` |
+| alignHeaderToRows? | If enabled, the header and row context cells share the same measured width | `boolean` |
 
 <br>
 

package/dist/column/Column.svelte

@@ -23,7 +23,7 @@
 	import { fromProps, snippetLiteral } from '../utility.svelte.js'
 	import { ColumnState, type ColumnProps, type HeaderCtx, type ColumnSnippets } from './column-state.svelte.js'
 
-	type T = $$Generic<Record<PropertyKey, any>>
+	type T = $$Generic
 	type V = $$Generic
 
 	let {...props}: ColumnProps<T, V> = $props()

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

@@ -1,6 +1,6 @@
 export declare function getDefaultHeader<T, V>(title: string): () => any;
 import { type HeaderCtx } from './column-state.svelte.js';
-declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
+declare class __sveltets_Render<T, V> {
     props(): {
         id: string;
         table?: import("../index.js").TableState<T> | undefined;
@@ -19,7 +19,7 @@ declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
         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;
+        pad?: "row" | "header" | "statusbar" | "both" | undefined;
     };
     events(): {};
     slots(): {};
@@ -27,10 +27,10 @@ declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
     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']>> & {
+    new <T, 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']>;
+    <T, V>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {}): ReturnType<__sveltets_Render<T, V>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
@@ -41,5 +41,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Column: $$IsomorphicComponent;
-type Column<T extends Record<PropertyKey, any>, V> = InstanceType<typeof Column<T, V>>;
+type Column<T, V> = InstanceType<typeof Column<T, V>>;
 export default Column;

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

@@ -92,7 +92,7 @@ type ColumnOptions<T, V> = {
      * 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';
+    pad?: 'row' | 'header' | 'statusbar' | 'both';
 };
 export declare class ColumnState<T = any, V = any> {
     #private;
@@ -130,6 +130,7 @@ export declare class ColumnState<T = any, V = any> {
         onclick: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
         padRow: boolean;
         padHeader: boolean;
+        padStatusbar: boolean;
     };
     toggleVisiblity(): void;
     constructor(props: ColumnProps<T, V>);

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

@@ -43,7 +43,8 @@ export class ColumnState {
         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'
+        padHeader: this.#props.pad === 'header' || this.#props.pad === 'both',
+        padStatusbar: this.#props.pad === 'statusbar'
     });
     toggleVisiblity() {
         const index = this.table.positions.hidden.indexOf(this);

package/dist/expandable/Expandable.svelte

@@ -11,10 +11,9 @@
 <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>
+	type T = $$Generic
 
 	let { ...restProps }: ExpandableProps<T> = $props()
 	

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

@@ -1,6 +1,5 @@
 import { type ExpandableProps } from './expandable-state.svelte.js';
-import type { AnyRecord } from '../utility.svelte.js';
-declare class __sveltets_Render<T extends AnyRecord> {
+declare class __sveltets_Render<T> {
     props(): ExpandableProps<T>;
     events(): {};
     slots(): {};
@@ -8,10 +7,10 @@ declare class __sveltets_Render<T extends AnyRecord> {
     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']>> & {
+    new <T>(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']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
@@ -22,5 +21,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Expandable: $$IsomorphicComponent;
-type Expandable<T extends AnyRecord> = InstanceType<typeof Expandable<T>>;
+type Expandable<T> = InstanceType<typeof Expandable<T>>;
 export default Expandable;

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 import Table from './table/Table.svelte';
 import type { TableState, TableProps } from './table/table-state.svelte.js';
+import type { ContentCtx as TableContentCtx, ContentSnippet as TableContentSnippet } from './table/Table.svelte';
 declare namespace Table {
     type State<T = unknown> = TableState<T>;
     type Props<T = unknown> = TableProps<T>;
+    type ContentCtx<T = unknown> = TableContentCtx<T>;
+    type ContentSnippet<T = unknown> = TableContentSnippet<T>;
 }
 export default Table;
 export { default as Panel } from './panel/Panel.svelte';
@@ -10,6 +13,7 @@ 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 { ContentCtx, ContentSnippet } from './table/Table.svelte';
 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';

package/dist/panel/Panel.svelte

@@ -8,7 +8,7 @@
 
 -->
 
-<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
+<script lang='ts' generics='T'>
 
 	import { PanelState, type PanelProps } from './panel-state.svelte.js'
 	import { fromProps } from '../utility.svelte.js'

package/dist/panel/Panel.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type PanelProps } from './panel-state.svelte.js';
-declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
+declare class __sveltets_Render<T> {
     props(): PanelProps<T>;
     events(): {};
     slots(): {};
@@ -7,10 +7,10 @@ declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends Record<PropertyKey, unknown>>(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']>> & {
+    new <T>(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 Record<PropertyKey, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
@@ -21,5 +21,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Panel: $$IsomorphicComponent;
-type Panel<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Panel<T>>;
+type Panel<T> = InstanceType<typeof Panel<T>>;
 export default Panel;

package/dist/row/Row.svelte

@@ -11,10 +11,9 @@
 <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>
+	type T = $$Generic
 
 	let { ...restProps }: RowProps<T> = $props()
 	

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

@@ -1,6 +1,5 @@
 import { type RowProps } from './row-state.svelte.js';
-import type { AnyRecord } from '../utility.svelte.js';
-declare class __sveltets_Render<T extends AnyRecord> {
+declare class __sveltets_Render<T> {
     props(): RowProps<T>;
     events(): {};
     slots(): {};
@@ -8,10 +7,10 @@ declare class __sveltets_Render<T extends AnyRecord> {
     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']>> & {
+    new <T>(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']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
@@ -22,5 +21,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Row: $$IsomorphicComponent;
-type Row<T extends AnyRecord> = InstanceType<typeof Row<T>>;
+type Row<T> = InstanceType<typeof Row<T>>;
 export default Row;

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

@@ -2,14 +2,25 @@ import { type RowCtx } from '../table/table-state.svelte.js';
 import type { Snippet } from 'svelte';
 type ContextOptions<T> = {
     /**
-     * Only show when hovering the row?
+     * Only show the context *content* when hovering the row?
+     *
+     * Note: the context column still reserves its width in the grid.
+     * Hover mode only hides the contents / disables interaction.
      * @default true
     */
     hover?: boolean;
     /**
-     * @defualt 'max-content'
+     * @default 'max-content'
      */
     width?: string;
+    /**
+     * Align the header context cell (if any) with the row context cell.
+     *
+     * When enabled, the table measures the rendered context cell width
+     * (from header and rows) and uses a shared fixed width so they line up.
+     * @default false
+     */
+    alignHeaderToRows?: boolean;
 };
 export interface RowProps<T> {
     /**
@@ -35,6 +46,7 @@ export declare class RowState<T> {
         context: {
             hover: boolean;
             width: string;
+            alignHeaderToRows: boolean;
         };
     };
     constructor(props: RowProps<T>);

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

@@ -13,14 +13,15 @@ export class RowState {
     options = $derived({
         context: {
             hover: this.#props.contextOptions?.hover ?? true,
-            width: this.#props.contextOptions?.width ?? 'max-content'
+            width: this.#props.contextOptions?.width ?? 'max-content',
+            alignHeaderToRows: this.#props.contextOptions?.alignHeaderToRows ?? 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');
+            throw new Error('svelte-tably: Row must be associated with a Table');
         }
         this.#table.row = this;
         $effect(() => () => this.#table.row === this && (this.#table.row = undefined));

package/dist/size-tween.svelte.js

@@ -1,6 +1,13 @@
 import { untrack } from 'svelte';
 import { sineInOut } from 'svelte/easing';
 import { Tween } from 'svelte/motion';
+const prefersReducedMotion = () => {
+    if (typeof window === 'undefined')
+        return false;
+    if (!('matchMedia' in window))
+        return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
 export class SizeTween {
     #tweenOptions = { duration: 300, easing: sineInOut };
     #tween = new Tween(0, this.#tweenOptions);
@@ -10,7 +17,8 @@ export class SizeTween {
     size = $state(0);
     set target(value) {
         this.transitioning = true;
-        this.#tween.set(value, this.#tweenOptions).then(() => this.transitioning = false);
+        const duration = prefersReducedMotion() ? 0 : this.#tweenOptions.duration;
+        this.#tween.set(value, { ...this.#tweenOptions, duration }).then(() => this.transitioning = false);
     }
     constructor(cb, opts = {}) {
         if ('duration' in opts) {