@casinogate/ui 0.0.4 → 1.0.1

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

@@ -0,0 +1,248 @@
+import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { Context, useMutationObserver, watch } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
+const SLOT_ATTR_NAME = 'data-slot';
+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];
+            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`]);
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.head,
+        'data-id': this.opts.header.current.id,
+        style: {
+            width: `calc(${this.#width} * 1px)`,
+        },
+        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`]);
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.cell,
+        style: {
+            width: `calc(${this.#width} * 1px)`,
+        },
+        ...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/components/data-table/components/data-table.table.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+  type DataTableTablePropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+
+  export type DataTableTableProps = DataTableTablePropsWithoutHTML &
+    Without<PrimitiveTableAttributes, DataTableTablePropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { PrimitiveTableAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { useId, type Without } from 'bits-ui';
+  import { box, mergeProps, type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+  import { DataTableStylesContext } 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 variants = DataTableStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<table class={cn(variants.current.table(), className)} {...mergedProps}>
+  {@render children?.()}
+</table>

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

@@ -0,0 +1,8 @@
+type DataTableTablePropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type DataTableTableProps = DataTableTablePropsWithoutHTML & Without<PrimitiveTableAttributes, DataTableTablePropsWithoutHTML>;
+import type { PrimitiveTableAttributes } from '../../../internal/types/html-attributes.js';
+import { type Without } from 'bits-ui';
+import { type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+declare const DataTable: import("svelte").Component<DataTableTableProps, {}, "ref">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

package/dist/components/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 type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+  import { RenderComponentConfig, RenderSnippetConfig } from '../utils/render-helper.js';
+  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/components/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/components/data-table/data-table.stories.svelte

@@ -0,0 +1,327 @@
+<script lang="ts" module>
+  import type { ColumnDef } from './types.js';
+  import { MOCK_DATA_TABLE } from '../../internal/mocks/data-table.js';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import { untrack, type ComponentProps } from 'svelte';
+  import { Pagination } from '../pagination/index.js';
+  import DataTableRoot from './components/data-table.root.svelte';
+  import { createTable, DataTable, DataTablePrimitive } from './index.js';
+  import { rowModels, usePaginationState, useResizeState } from './utils/index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['table', 'resizable', 'rounded', 'align', 'stripped'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/DataTable',
+    component: DataTableRoot<(typeof MOCK_DATA_TABLE)[0]>,
+    tags: ['autodocs'],
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof DataTableRoot<(typeof MOCK_DATA_TABLE)[0]>>;
+
+  const args: Omit<Args, 'table'> = {
+    resizable: false,
+    rounded: 'md',
+    variant: 'primary',
+    align: 'start',
+    stripped: true,
+  };
+</script>
+
+<script lang="ts">
+  const columns: ColumnDef<(typeof MOCK_DATA_TABLE)[0]>[] = [
+    {
+      accessorKey: 'id',
+      header: 'ID',
+
+      enableSorting: false,
+    },
+    {
+      accessorKey: 'first_name',
+      header: 'First Name',
+
+      enableSorting: false,
+    },
+    {
+      accessorKey: 'last_name',
+      header: 'Last Name',
+
+      enableSorting: false,
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+
+      enableSorting: true,
+    },
+    {
+      accessorKey: 'gender',
+      header: 'Gender',
+
+      enableSorting: true,
+    },
+    {
+      accessorKey: 'ip_address',
+      header: 'IP Address',
+
+      enableSorting: false,
+    },
+    {
+      accessorKey: 'Bank',
+      header: 'Bank',
+
+      enableSorting: false,
+    },
+  ];
+
+  const primitiveTable = createTable({
+    get data() {
+      return MOCK_DATA_TABLE;
+    },
+    columns,
+
+    getCoreRowModel: rowModels.coreRowModel(),
+  });
+
+  const paginationState = usePaginationState();
+
+  const basicPresetTable = createTable({
+    get data() {
+      return MOCK_DATA_TABLE;
+    },
+
+    columns,
+    getCoreRowModel: rowModels.coreRowModel(),
+    getPaginationRowModel: rowModels.paginationRowModel(),
+
+    state: {
+      get pagination() {
+        return paginationState.value;
+      },
+    },
+
+    columnResizeMode: 'onChange',
+
+    onPaginationChange: paginationState.updater,
+  });
+
+  type RemoteData = {
+    id: number;
+    title: string;
+    body: string;
+    userId: number;
+  };
+
+  type CatData = {
+    id: string;
+    url: string;
+    width: number;
+    height: number;
+  };
+
+  const remoteColumns: ColumnDef<RemoteData>[] = [
+    { accessorKey: 'id', header: 'ID' },
+    { accessorKey: 'title', header: 'Title' },
+    // { accessorKey: 'body', header: 'Body' },
+    // { accessorKey: 'userId', header: 'User ID' },
+  ];
+
+  let remoteData = $state<RemoteData[]>([]);
+
+  const remoteDataPagination = usePaginationState();
+  const remoteDataResize = useResizeState();
+
+  const remoteDataTable = createTable({
+    get data() {
+      return remoteData;
+    },
+
+    columns: remoteColumns,
+
+    getCoreRowModel: rowModels.coreRowModel(),
+    getPaginationRowModel: rowModels.paginationRowModel(),
+
+    columnResizeMode: 'onChange',
+
+    state: {
+      get pagination() {
+        return remoteDataPagination.value;
+      },
+      get columnSizing() {
+        return remoteDataResize.value;
+      },
+    },
+
+    onPaginationChange: remoteDataPagination.updater,
+    onColumnSizingChange: remoteDataResize.updater,
+  });
+
+  let catsIsLoaded = $state(false);
+  let catsIsLoading = $state(false);
+  let catsData = $state<CatData[]>([]);
+  let catsPage = $state(1);
+  let catsLimit = $state(20);
+
+  const infiniteColumns: ColumnDef<CatData>[] = [
+    { accessorKey: 'id', header: 'ID' },
+    { accessorKey: 'url', header: 'URL' },
+    { accessorKey: 'width', header: 'Width' },
+    { accessorKey: 'height', header: 'Height' },
+  ];
+
+  async function fetchCatData(page = 1, limit = 20) {
+    catsIsLoading = true;
+    const res = await fetch(`https://api.thecatapi.com/v1/images/search?limit=${limit}&page=${page}`, {
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': 'live_V1XvjJ84eY5LPP29tbKPJXDiRFPg0WgkDjRtCsocndgnNrVtiUDP25W9rp3QuwbX',
+      },
+    });
+
+    const data = (await res.json()) as CatData[];
+
+    const newData = new Map(catsData.map((item) => [item.id, item]));
+
+    data.forEach((item) => {
+      newData.set(item.id, item);
+    });
+
+    catsData = Array.from(newData.values());
+    catsIsLoaded = true;
+    catsIsLoading = false;
+  }
+
+  const infiniteResize = useResizeState();
+
+  const infiniteTable = createTable({
+    get data() {
+      return catsData;
+    },
+
+    columns: infiniteColumns,
+
+    defaultColumn: {
+      minSize: 100,
+    },
+
+    state: {
+      get columnSizing() {
+        return infiniteResize.value;
+      },
+    },
+
+    getCoreRowModel: rowModels.coreRowModel(),
+
+    columnResizeMode: 'onChange',
+
+    onColumnSizingChange: infiniteResize.updater,
+
+    features: {
+      onLastRowReached: () => {
+        catsPage++;
+        fetchCatData(catsPage, catsLimit);
+      },
+
+      get isLoading() {
+        return catsIsLoading;
+      },
+    },
+  });
+
+  $effect(() => {
+    untrack(() => {
+      fetch('https://jsonplaceholder.typicode.com/posts')
+        .then((res) => res.json())
+        .then((data) => {
+          remoteData = data;
+        });
+    });
+
+    if (!catsIsLoaded) {
+      untrack(() => {
+        fetchCatData(catsPage, catsLimit);
+      });
+    }
+  });
+</script>
+
+<Story name="Primitive" {args}>
+  {#snippet template(args: Args)}
+    <div class="cgui:w-full">
+      <DataTablePrimitive.Root {...args} table={primitiveTable}>
+        <DataTablePrimitive.Table>
+          <DataTablePrimitive.Header>
+            {#each primitiveTable.getHeaderGroups() as headerGroup (headerGroup.id)}
+              <DataTablePrimitive.Row>
+                {#each headerGroup.headers as header (header.id)}
+                  <DataTablePrimitive.Head {header}>
+                    {#if !header.isPlaceholder}
+                      <DataTablePrimitive.FlexRender
+                        content={header.column.columnDef.header}
+                        context={header.getContext()}
+                      />
+
+                      {#if header.column.getCanSort()}
+                        <DataTablePrimitive.SortButton />
+                      {/if}
+
+                      {#if args.resizable && header.column.getCanResize()}
+                        <DataTablePrimitive.ResizeHandler />
+                      {/if}
+                    {/if}
+                  </DataTablePrimitive.Head>
+                {/each}
+              </DataTablePrimitive.Row>
+            {/each}
+          </DataTablePrimitive.Header>
+
+          <DataTablePrimitive.Body>
+            {#each primitiveTable.getRowModel().rows as row}
+              <DataTablePrimitive.Row>
+                {#each row.getVisibleCells() as cell}
+                  <DataTablePrimitive.Cell {cell}>
+                    <DataTablePrimitive.FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+                  </DataTablePrimitive.Cell>
+                {/each}
+              </DataTablePrimitive.Row>
+            {/each}
+          </DataTablePrimitive.Body>
+        </DataTablePrimitive.Table>
+      </DataTablePrimitive.Root>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Basic Preset" {args}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:flex-col cgui:gap-4">
+      <DataTable {...args} table={basicPresetTable} />
+
+      <Pagination.Basic
+        bind:page={
+          () => basicPresetTable.getState().pagination.pageIndex + 1,
+          (value) => basicPresetTable.setPageIndex(value - 1)
+        }
+        count={MOCK_DATA_TABLE.length}
+        perPage={basicPresetTable.getState().pagination.pageSize}
+        siblingCount={1}
+        orientation="horizontal"
+        size="md"
+        centered={true}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Infinite" {args}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:flex-col cgui:gap-4">
+      <DataTable {...args} table={infiniteTable} resizable class="cgui:h-[300px]" />
+    </div>
+  {/snippet}
+</Story>

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

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