@casinogate/ui 1.11.14 → 2.0.0

package/dist/composed/data-table/components/data-table.svelte.js

@@ -0,0 +1,270 @@
+import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { Context, useMutationObserver, watch } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
+const SLOT_ATTR_VALUES = {
+    root: 'root',
+    header: 'header',
+    head: 'head',
+    body: 'body',
+    table: 'table',
+    footer: 'footer',
+    row: 'row',
+    cell: 'cell',
+    sortButton: 'sort-button',
+    resizeHandler: 'resize-handler',
+};
+const DataTableRootContext = new Context(keyWithPrefix('data-table-root'));
+const DataTableHeadContext = new Context(keyWithPrefix('data-table-head'));
+export class DataTableRootState {
+    static create(opts) {
+        return DataTableRootContext.set(new DataTableRootState(opts));
+    }
+    opts;
+    attachment;
+    observedRow = $state(null);
+    columnSizingVars = $derived.by(() => {
+        const headers = this.opts.table.current.getFlatHeaders();
+        const colSizes = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            if (!header)
+                continue;
+            colSizes[`--header-${header?.id}-size`] = header.getSize();
+            colSizes[`--col-${header?.column.id}-size`] = header.column.getSize();
+        }
+        return colSizes;
+    });
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    onLastRowReached = () => {
+        this.opts.table.current?.features?.onLastRowReached?.();
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.root,
+        style: {
+            ...this.columnSizingVars,
+        },
+        ...this.attachment,
+    }));
+}
+export class DataTableTableState {
+    static create(opts) {
+        return new DataTableTableState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.table,
+        ...this.attachment,
+    }));
+}
+export class DataTableHeaderState {
+    static create(opts) {
+        return new DataTableHeaderState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.header,
+        ...this.attachment,
+    }));
+}
+export class DataTableRowState {
+    static create(opts) {
+        return new DataTableRowState(opts, DataTableRootContext.get());
+    }
+    opts;
+    attachment;
+    rootState;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.rootState = root;
+        this.attachment = attachRef(opts.ref, (ref) => {
+            if (!ref)
+                return;
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.row,
+        ...this.attachment,
+    }));
+}
+export class DataTableBodyState {
+    static create(opts) {
+        return new DataTableBodyState(opts, DataTableRootContext.get());
+    }
+    opts;
+    attachment;
+    rootState;
+    #lastRow = $state(null);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.rootState = root;
+        this.attachment = attachRef(opts.ref);
+        const { stop } = useMutationObserver(() => opts.ref.current, (mutations) => {
+            const target = mutations[mutations.length - 1]?.target;
+            this.#lastRow = target?.lastElementChild;
+        }, { childList: true, subtree: true });
+        let observer = null;
+        watch.pre(() => this.#lastRow, () => {
+            if (!this.#lastRow || this.rootState.opts.table.current.features?.isLoading)
+                return;
+            observer = this.#rowObserver();
+        });
+        $effect.pre(() => {
+            return () => {
+                stop();
+                observer?.disconnect();
+                observer = null;
+                this.#lastRow = null;
+            };
+        });
+    }
+    #rowObserver = () => {
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry?.isIntersecting) {
+                this.rootState.opts.table.current?.features?.onLastRowReached?.();
+                if (this.#lastRow) {
+                    observer.unobserve(this.#lastRow);
+                    this.#lastRow = null;
+                }
+            }
+        }, {
+            root: this.rootState.opts.ref.current,
+            threshold: 0.5,
+        });
+        if (this.#lastRow) {
+            observer.observe(this.#lastRow);
+        }
+        return observer;
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.body,
+        ...this.attachment,
+    }));
+}
+export class DataTableHeadState {
+    static create(opts) {
+        return DataTableHeadContext.set(new DataTableHeadState(opts, DataTableRootContext.get()));
+    }
+    opts;
+    attachment;
+    rootState;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.rootState = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    #width = $derived.by(() => this.rootState.columnSizingVars[`--header-${this.opts.header.current.id}-size`]);
+    #minSize = $derived.by(() => {
+        const min = this.opts.header.current.column.columnDef.minSize;
+        return min !== undefined ? `${min}px` : undefined;
+    });
+    #maxSize = $derived.by(() => {
+        const max = this.opts.header.current.column.columnDef.maxSize;
+        return max !== undefined && max !== Number.MAX_SAFE_INTEGER ? `${max}px` : undefined;
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.head,
+        'data-id': this.opts.header.current.id,
+        style: {
+            width: `${this.#width}px`,
+            'min-width': this.#minSize,
+            'max-width': this.#maxSize,
+        },
+        colspan: this.opts.header.current.colSpan,
+        ...this.attachment,
+    }));
+}
+export class DataTableCellState {
+    static create(opts) {
+        return new DataTableCellState(opts, DataTableRootContext.get());
+    }
+    opts;
+    attachment;
+    rootState;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.rootState = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    #width = $derived.by(() => this.rootState.columnSizingVars[`--col-${this.opts.cell.current?.column.id}-size`]);
+    #minSize = $derived.by(() => {
+        const min = this.opts.cell.current?.column.columnDef.minSize;
+        return min !== undefined ? `${min}px` : undefined;
+    });
+    #maxSize = $derived.by(() => {
+        const max = this.opts.cell.current?.column.columnDef.maxSize;
+        return max !== undefined && max !== Number.MAX_SAFE_INTEGER ? `${max}px` : undefined;
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.cell,
+        style: {
+            width: `${this.#width}px`,
+            'min-width': this.#minSize,
+            'max-width': this.#maxSize,
+        },
+        ...this.attachment,
+    }));
+}
+export class DataTableSortButtonState {
+    static create(opts) {
+        return new DataTableSortButtonState(opts, DataTableHeadContext.get());
+    }
+    opts;
+    attachment;
+    headState;
+    constructor(opts, head) {
+        this.opts = opts;
+        this.headState = head;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        ...this.attachment,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.sortButton,
+    }));
+}
+export class DataTableResizeHandlerState {
+    static create(opts) {
+        return new DataTableResizeHandlerState(opts, DataTableHeadContext.get());
+    }
+    opts;
+    attachment;
+    headState;
+    constructor(opts, head) {
+        this.opts = opts;
+        this.headState = head;
+        this.attachment = attachRef(opts.ref);
+    }
+    #onDoubleClick = () => {
+        return this.headState.opts.header.current.column.resetSize();
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.resizeHandler,
+        ondblclick: this.#onDoubleClick,
+        onmousedown: this.headState.opts.header.current.getResizeHandler(),
+        ontouchstart: this.headState.opts.header.current.getResizeHandler(),
+        ...this.attachment,
+    }));
+}

package/dist/composed/data-table/components/data-table.table.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { DataTableTableProps } from '../types.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { dataTableTableVariants } from '../styles.js';
+  import { DataTableTableState } from './data-table.svelte.js';
+
+  let { ref = $bindable(null), id = useId(), children, class: className, ...restProps }: DataTableTableProps = $props();
+
+  const rootState = DataTableTableState.create({
+    id: box.with(() => id),
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<table class={cn(dataTableTableVariants(), className)} {...mergedProps}>
+  {@render children?.()}
+</table>

package/dist/composed/data-table/components/data-table.table.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DataTableTableProps } from '../types.js';
+declare const DataTable: import("svelte").Component<DataTableTableProps, {}, "ref">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

package/dist/composed/data-table/components/flex-render.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>">
+  import { RenderComponentConfig, RenderSnippetConfig } from '../../../internal/index.js';
+  import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+  type Props = {
+    /** The cell or header field of the current cell's column definition. */
+    content?: TContext extends HeaderContext<TData, TValue>
+      ? ColumnDefTemplate<HeaderContext<TData, TValue>>
+      : TContext extends CellContext<TData, TValue>
+        ? ColumnDefTemplate<CellContext<TData, TValue>>
+        : never;
+    /** The result of the `getContext()` function of the header or cell */
+    context: TContext;
+  };
+  let { content, context }: Props = $props();
+</script>
+
+{#if typeof content === 'string'}
+  {content}
+{:else if content instanceof Function}
+  <!-- It's unlikely that a CellContext will be passed to a Header -->
+  <!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+  {@const result = content(context as any)}
+  {#if result instanceof RenderComponentConfig}
+    {@const { component: Component, props } = result}
+    <Component {...props} />
+  {:else if result instanceof RenderSnippetConfig}
+    {@const { snippet, params } = result}
+    {@render snippet(params)}
+  {:else}
+    {result}
+  {/if}
+{/if}

package/dist/composed/data-table/components/flex-render.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
+    props: {
+        /** The cell or header field of the current cell's column definition. */
+        content?: TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never;
+        /** The result of the `getContext()` function of the header or cell */
+        context: TContext;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
+    props(): ReturnType<typeof $$render<TData, TValue, TContext>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue, TContext>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue, TContext>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FlexRender: $$IsomorphicComponent;
+type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
+export default FlexRender;

package/dist/composed/data-table/data-table.svelte

@@ -0,0 +1,124 @@
+<script lang="ts" generics="TData extends RowData = any">
+  import { Spinner } from '../../primitives/spinner/index.js';
+  import { atom, cn } from '../../internal/utils/common.js';
+  import { watch } from 'runed';
+  import { fade } from 'svelte/transition';
+  import DataTableBody from './components/data-table.body.svelte';
+  import DataTableCell from './components/data-table.cell.svelte';
+  import DataTableHead from './components/data-table.head.svelte';
+  import DataTableHeader from './components/data-table.header.svelte';
+  import DataTableResizeHandler from './components/data-table.resize-handler.svelte';
+  import DataTableRoot from './components/data-table.root.svelte';
+  import DataTableRow from './components/data-table.row.svelte';
+  import DataTableSortButton from './components/data-table.sort-button.svelte';
+  import DataTableTable from './components/data-table.table.svelte';
+  import FlexRender from './components/flex-render.svelte';
+  import { type DataTableProps, type RowData } from './types.js';
+
+  let { ref = $bindable(null), table, empty, class: className, ...restProps }: DataTableProps<TData> = $props();
+
+  let isFirstLoaded = $state(false);
+
+  const isLoading = $derived.by(() => table.features?.isLoading);
+
+  const isEmpty = $derived.by(() => {
+    if (isLoading) return false;
+
+    return table.getRowModel().rows.length === 0;
+  });
+
+  watch.pre(
+    () => isLoading,
+    (current, previous) => {
+      if (current && !previous) return;
+
+      isFirstLoaded = true;
+    }
+  );
+</script>
+
+<DataTableRoot bind:ref {table} class={cn(className, { 'cgui:h-full': isEmpty })} {...restProps}>
+  <DataTableTable class={cn({ 'cgui:h-full cgui:flex-1': isEmpty })}>
+    <DataTableHeader>
+      {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+        <DataTableRow>
+          {#each headerGroup.headers as header (header.id)}
+            <DataTableHead
+              {header}
+              class={cn({
+                'cgui:cursor-pointer cgui:select-none': header.column.getCanSort(),
+              })}
+              onclick={() => {
+                if (header.column.getCanSort()) {
+                  header.column.toggleSorting();
+                }
+              }}
+            >
+              {#if !header.isPlaceholder}
+                <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+
+                {#if header.column.getCanSort()}
+                  {@const dir = atom(() => {
+                    const val = header.column.getIsSorted();
+
+                    return typeof val === 'boolean' ? null : val;
+                  })}
+
+                  <DataTableSortButton direction={dir} disabled={isEmpty} />
+                {/if}
+
+                {#if restProps.resizable && header.column.getCanResize()}
+                  <DataTableResizeHandler />
+                {/if}
+              {/if}
+            </DataTableHead>
+          {/each}
+        </DataTableRow>
+      {/each}
+    </DataTableHeader>
+
+    <DataTableBody>
+      {#if !isFirstLoaded && isLoading}
+        <div
+          transition:fade={{ duration: 250 }}
+          class="cgui:flex cgui:flex-col cgui:items-center cgui:justify-center cgui:absolute cgui:inset-0"
+        >
+          <Spinner />
+        </div>
+      {:else}
+        {#each table.getRowModel().rows as row, idx (row.id)}
+          {#if idx === table.getRowModel().rows.length - 1 && isFirstLoaded && isLoading}
+            <div
+              class="cgui:pointer-events-none cgui:flex cgui:absolute cgui:inset-x-0 cgui:bottom-0 cgui:z-1 cgui:flex-col cgui:items-center cgui:justify-center cgui:py-1 cgui:bg-linear-to-t cgui:from-neutral-40/30 cgui:to-neutral-10/0"
+            >
+              <Spinner />
+            </div>
+          {/if}
+          <DataTableRow>
+            {#each row.getVisibleCells() as cell (cell.id)}
+              <DataTableCell {cell} depth={row.depth}>
+                <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+              </DataTableCell>
+            {/each}
+          </DataTableRow>
+        {:else}
+          {#if isEmpty}
+            <DataTableRow>
+              <DataTableCell cell={null} colspan={table.getAllColumns().length}>
+                {#if empty}
+                  {@render empty()}
+                {:else}
+                  <div
+                    class="cgui:text-body-2 cgui:text-fg-darkest cgui:text-center cgui:h-34 cgui:flex cgui:items-center cgui:justify-center"
+                  >
+                    No results.
+                  </div>
+                {/if}
+              </DataTableCell>
+            </DataTableRow>
+          {/if}
+        {/each}
+      {/if}
+    </DataTableBody>
+  </DataTableTable>
+</DataTableRoot>

package/dist/composed/data-table/data-table.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type DataTableProps, type RowData } from './types.js';
+declare function $$render<TData extends RowData = any>(): {
+    props: DataTableProps<TData>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData = any> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends RowData = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends RowData = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<TData extends RowData = any> = InstanceType<typeof DataTable<TData>>;
+export default DataTable;

package/dist/composed/data-table/exports-primitive.d.ts

@@ -0,0 +1,11 @@
+export { default as Body } from './components/data-table.body.svelte';
+export { default as Cell } from './components/data-table.cell.svelte';
+export { default as ExpandButton } from './components/data-table.expand-button.svelte';
+export { default as Head } from './components/data-table.head.svelte';
+export { default as Header } from './components/data-table.header.svelte';
+export { default as ResizeHandler } from './components/data-table.resize-handler.svelte';
+export { default as Root } from './components/data-table.root.svelte';
+export { default as Row } from './components/data-table.row.svelte';
+export { default as SortButton } from './components/data-table.sort-button.svelte';
+export { default as Table } from './components/data-table.table.svelte';
+export { default as FlexRender } from './components/flex-render.svelte';

package/dist/composed/data-table/exports-primitive.js

@@ -0,0 +1,11 @@
+export { default as Body } from './components/data-table.body.svelte';
+export { default as Cell } from './components/data-table.cell.svelte';
+export { default as ExpandButton } from './components/data-table.expand-button.svelte';
+export { default as Head } from './components/data-table.head.svelte';
+export { default as Header } from './components/data-table.header.svelte';
+export { default as ResizeHandler } from './components/data-table.resize-handler.svelte';
+export { default as Root } from './components/data-table.root.svelte';
+export { default as Row } from './components/data-table.row.svelte';
+export { default as SortButton } from './components/data-table.sort-button.svelte';
+export { default as Table } from './components/data-table.table.svelte';
+export { default as FlexRender } from './components/flex-render.svelte';

package/dist/composed/data-table/exports.d.ts

@@ -0,0 +1 @@
+export { default as DataTable } from './data-table.svelte';

package/dist/composed/data-table/exports.js

@@ -0,0 +1 @@
+export { default as DataTable } from './data-table.svelte';

package/dist/composed/data-table/index.d.ts

@@ -0,0 +1,6 @@
+export * as DataTablePrimitive from './exports-primitive.js';
+export * from './exports.js';
+export type { ColumnOrderState, ColumnPinningState, ColumnSizingState, ExpandedState, ExpandedStateList, GroupingState, PaginationState, RowSelectionState, SortingState, TableState, Updater, VisibilityState, } from '@tanstack/table-core';
+export { createTable } from './models/index.js';
+export type { ColumnDef, DataTableBodyProps, DataTableCellProps, DataTableHeaderProps, DataTableHeadProps, DataTableProps, DataTableResizeHandlerProps, DataTableRootProps, DataTableRowProps, DataTableSortButtonProps, DataTableTableProps, RowData, } from './types.js';
+export * from './utils/index.js';

package/dist/composed/data-table/index.js

@@ -0,0 +1,4 @@
+export * as DataTablePrimitive from './exports-primitive.js';
+export * from './exports.js';
+export { createTable } from './models/index.js';
+export * from './utils/index.js';

package/dist/composed/data-table/models/create-table.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { RowData, Table, TableOptionsResolved, TableOptions as TableOptionsType } from '@tanstack/table-core';
+type TableFeatures = {
+    onLastRowReached?: () => void;
+    isLoading?: boolean;
+};
+type TableOptions<TData extends RowData, TMeta extends Record<string, any> = Record<string, any>> = Omit<TableOptionsType<TData>, 'meta'> & {
+    meta?: TMeta;
+    features?: TableFeatures;
+};
+type TableReturn<TData extends RowData, TMeta extends Record<string, any> = Record<string, any>> = Omit<Table<TData>, 'options'> & {
+    options: Omit<TableOptionsResolved<TData>, 'meta'> & {
+        meta?: TMeta;
+    };
+} & {
+    features: TableFeatures;
+};
+export declare function createTable<TData extends RowData, TMeta extends Record<string, any>>(options: TableOptions<TData, TMeta>): TableReturn<TData, TMeta>;
+export type CreateTableReturn<TData extends RowData, TMeta extends Record<string, any> = Record<string, any>> = ReturnType<typeof createTable<TData, TMeta>>;
+export {};

package/dist/composed/data-table/models/create-table.svelte.js

@@ -0,0 +1,35 @@
+import { mergeObjects } from '../../../internal/utils/objects.js';
+import { createTable as constructTable } from '@tanstack/table-core';
+export function createTable(options) {
+    const resolvedFeatures = options?.features || {};
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    }, options);
+    const table = constructTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state || {}),
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                },
+                meta: mergeObjects(prev.meta || {}, options.meta || {}),
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return Object.assign(table, { features: resolvedFeatures });
+}

package/dist/composed/data-table/models/index.d.ts

@@ -0,0 +1 @@
+export { createTable } from './create-table.svelte.js';

package/dist/composed/data-table/models/index.js

@@ -0,0 +1 @@
+export { createTable } from './create-table.svelte.js';