@casinogate/ui 1.11.14 → 2.0.0

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { DataTableBodyProps } from '../types.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { DataTableStylesContext, dataTableBodyVariants } from '../styles.js';
+  import { DataTableBodyState } from './data-table.svelte.js';
+
+  let { ref = $bindable(null), id = useId(), children, class: className, ...restProps }: DataTableBodyProps = $props();
+
+  const bodyState = DataTableBodyState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const styles = DataTableStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, bodyState.props));
+</script>
+
+<tbody
+  class={cn(dataTableBodyVariants({ variant: styles.current.variant, stripped: styles.current.stripped }), className)}
+  {...mergedProps}
+>
+  {@render children?.()}
+</tbody>

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

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

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { DataTableCellProps } from '../types.js';
+  import { DataTableStylesContext, dataTableCellVariants } from '../styles.js';
+
+  import { DataTableCellState } from './data-table.svelte.js';
+
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    children,
+    class: className,
+    cell,
+    depth = 0,
+    ...restProps
+  }: DataTableCellProps = $props();
+
+  const cellState = DataTableCellState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+    cell: box.with(() => cell),
+  });
+
+  const styles = DataTableStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, cellState.props));
+</script>
+
+<td
+  style:--depth={depth}
+  style:padding-left={depth > 0 ? `calc((var(--cgui-spacing)*2) + ${depth} * 1rem)` : undefined}
+  class={cn(dataTableCellVariants({ align: styles.current.align }), className)}
+  {...mergedProps}
+>
+  {@render children?.()}
+</td>

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

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

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+
+  let {
+    canExpand,
+    isExpanded,
+    depth = 0,
+    onToggle,
+  }: {
+    canExpand: boolean;
+    isExpanded: boolean;
+    depth?: number;
+    onToggle: () => void;
+  } = $props();
+</script>
+
+{#if canExpand}
+  <button onclick={onToggle} class="cgui:flex cgui:items-center cgui:justify-center cgui:cursor-pointer">
+    {#if isExpanded}
+      <Icon.ChevronDown width={16} height={16} />
+    {:else}
+      <Icon.ChevronRight width={16} height={16} />
+    {/if}
+  </button>
+{:else}
+  <span style="padding-left: {depth}rem; display: inline-block; width: 16px;"></span>
+{/if}

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    canExpand: boolean;
+    isExpanded: boolean;
+    depth?: number;
+    onToggle: () => void;
+};
+declare const DataTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { DataTableHeadProps } from '../types.js';
+  import { DataTableStylesContext, dataTableHeadVariants } from '../styles.js';
+
+  import { DataTableHeadState } from './data-table.svelte.js';
+
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    children,
+    class: className,
+    header,
+    ...restProps
+  }: DataTableHeadProps = $props();
+
+  const headState = DataTableHeadState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+    header: box.with(() => header),
+  });
+
+  const styles = DataTableStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, headState.props));
+</script>
+
+<th
+  class={cn(dataTableHeadVariants({ align: styles.current.align, resizable: styles.current.resizable }), className)}
+  {...mergedProps}
+>
+  {@render children?.()}
+</th>

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

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

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { DataTableHeaderState } from './data-table.svelte.js';
+
+  import { DataTableStylesContext, dataTableHeaderVariants } from '../styles.js';
+  import type { DataTableHeaderProps } from '../types.js';
+
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    id = useId(),
+    ...restProps
+  }: DataTableHeaderProps = $props();
+
+  const headerState = DataTableHeaderState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const styles = DataTableStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, headerState.props));
+</script>
+
+<thead class={cn(dataTableHeaderVariants({ variant: styles.current.variant }), className)} {...mergedProps}>
+  {@render children?.()}
+</thead>

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

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

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { DataTableResizeHandlerProps } from '../types.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { DataTableStylesContext, dataTableResizeHandlerVariants } from '../styles.js';
+  import { DataTableResizeHandlerState } from './data-table.svelte.js';
+
+  let { ref = $bindable(null), id = useId(), class: className, ...restProps }: DataTableResizeHandlerProps = $props();
+
+  const resizeHandlerState = DataTableResizeHandlerState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const styles = DataTableStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, resizeHandlerState.props));
+</script>
+
+<div
+  class={cn(dataTableResizeHandlerVariants({ resizable: styles.current.resizable }), className)}
+  {...mergedProps}
+></div>

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

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

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

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  type TData = unknown;
+</script>
+
+<script lang="ts" generics="TData extends RowData = RowData">
+  import type { DataTableRootProps } from '../types.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import type { RowData } from '@tanstack/table-core';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { DataTableStylesContext, dataTableRootVariants } from '../styles.js';
+  import { DataTableRootState } from './data-table.svelte.js';
+
+  let {
+    table,
+    ref = $bindable(null),
+    id = useId(),
+    class: className,
+    variant = 'primary',
+    stripped = true,
+    align = 'start',
+    rounded = 'sm',
+    resizable = false,
+    children,
+    ...restProps
+  }: DataTableRootProps<TData> = $props();
+
+  const rootState = DataTableRootState.create({
+    table: box.with(() => table),
+    id: box.with(() => id),
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+  });
+
+  const variants = $derived({ variant, stripped, align, rounded, resizable });
+
+  DataTableStylesContext.set(box.with(() => variants));
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<div class={cn(dataTableRootVariants({ rounded }), className)} {...mergedProps}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,26 @@
+import type { DataTableRootProps } from '../types.js';
+import type { RowData } from '@tanstack/table-core';
+declare function $$render<TData extends RowData = RowData>(): {
+    props: DataTableRootProps<TData>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData = RowData> {
+    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 = RowData>(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 = RowData>(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 = RowData> = InstanceType<typeof DataTable<TData>>;
+export default DataTable;

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

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

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

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

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { DataTableSortButtonProps } from '../types.js';
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { dataTableSortButtonVariants } from '../styles.js';
+  import { DataTableSortButtonState } from './data-table.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    class: className,
+    direction,
+    children,
+    child,
+    ...restProps
+  }: DataTableSortButtonProps = $props();
+
+  const sortButtonState = DataTableSortButtonState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const attrs = $derived({
+    'data-direction': direction,
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, sortButtonState.props, attrs, { class: cn(dataTableSortButtonVariants(), className) })
+  );
+</script>
+
+{#if child}
+  {@render child?.({ props: mergedProps })}
+{:else}
+  <button {...mergedProps}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      <Icon.SortUp class="cgui:-mb-0.5" data-direction="asc" />
+
+      <Icon.SortDown class="cgui:-mt-0.5" data-direction="desc" />
+    {/if}
+  </button>
+{/if}

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

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

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

@@ -0,0 +1,143 @@
+import type { CreateTableReturn } from '../models/create-table.svelte.js';
+import type { RefAttachment } from '../../../internal/types/common.js';
+import type { Cell, Header, RowData } from '@tanstack/table-core';
+import { type ReadableBoxedValues, type WithRefProps } from 'svelte-toolbelt';
+type DataTableRootOpts<TData extends RowData> = WithRefProps<ReadableBoxedValues<{
+    table: CreateTableReturn<TData>;
+}>>;
+export declare class DataTableRootState<TData extends RowData> {
+    static create<TData extends RowData>(opts: DataTableRootOpts<TData>): DataTableRootState<any>;
+    readonly opts: DataTableRootOpts<TData>;
+    readonly attachment: RefAttachment;
+    observedRow: HTMLElement | null;
+    columnSizingVars: {
+        [key: string]: number;
+    };
+    constructor(opts: DataTableRootOpts<TData>);
+    onLastRowReached: () => void;
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "root";
+        readonly style: {
+            readonly [key: string]: number;
+        };
+    };
+}
+type DataTableTableOpts = WithRefProps<{}>;
+export declare class DataTableTableState {
+    static create(opts: DataTableTableOpts): DataTableTableState;
+    readonly opts: DataTableTableOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: DataTableTableOpts);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "table";
+    };
+}
+type DataTableHeaderOpts = WithRefProps<{}>;
+export declare class DataTableHeaderState {
+    static create(opts: DataTableHeaderOpts): DataTableHeaderState;
+    readonly opts: DataTableHeaderOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: DataTableHeaderOpts);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "header";
+    };
+}
+type DataTableRowOpts = WithRefProps<{}>;
+export declare class DataTableRowState {
+    static create(opts: DataTableRowOpts): DataTableRowState;
+    readonly opts: DataTableRowOpts;
+    readonly attachment: RefAttachment;
+    readonly rootState: DataTableRootState<any>;
+    constructor(opts: DataTableRowOpts, root: DataTableRootState<any>);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "row";
+    };
+}
+type DataTableBodyOpts = WithRefProps<{}>;
+export declare class DataTableBodyState {
+    #private;
+    static create(opts: DataTableBodyOpts): DataTableBodyState;
+    readonly opts: DataTableBodyOpts;
+    readonly attachment: RefAttachment;
+    readonly rootState: DataTableRootState<any>;
+    constructor(opts: DataTableBodyOpts, root: DataTableRootState<any>);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "body";
+    };
+}
+type DataTableHeadOpts = WithRefProps<ReadableBoxedValues<{
+    header: Header<any, unknown>;
+}>>;
+export declare class DataTableHeadState {
+    #private;
+    static create(opts: DataTableHeadOpts): DataTableHeadState;
+    readonly opts: DataTableHeadOpts;
+    readonly attachment: RefAttachment;
+    readonly rootState: DataTableRootState<any>;
+    constructor(opts: DataTableHeadOpts, root: DataTableRootState<any>);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "head";
+        readonly 'data-id': string;
+        readonly style: {
+            readonly width: "undefinedpx" | `${number}px`;
+            readonly 'min-width': string | undefined;
+            readonly 'max-width': string | undefined;
+        };
+        readonly colspan: number;
+    };
+}
+type DataTableCellOpts = WithRefProps<ReadableBoxedValues<{
+    cell: Cell<any, unknown> | null;
+}>>;
+export declare class DataTableCellState {
+    #private;
+    static create(opts: DataTableCellOpts): DataTableCellState;
+    readonly opts: DataTableCellOpts;
+    readonly attachment: RefAttachment;
+    readonly rootState: DataTableRootState<any>;
+    constructor(opts: DataTableCellOpts, root: DataTableRootState<any>);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "cell";
+        readonly style: {
+            readonly width: "undefinedpx" | `${number}px`;
+            readonly 'min-width': string | undefined;
+            readonly 'max-width': string | undefined;
+        };
+    };
+}
+type DataTableSortButtonOpts = WithRefProps<{}>;
+export declare class DataTableSortButtonState {
+    static create(opts: DataTableSortButtonOpts): DataTableSortButtonState;
+    readonly opts: DataTableSortButtonOpts;
+    readonly attachment: RefAttachment;
+    readonly headState: DataTableHeadState;
+    constructor(opts: DataTableSortButtonOpts, head: DataTableHeadState);
+    readonly props: {
+        readonly "data-slot": "sort-button";
+        readonly id: string;
+    };
+}
+type DataTableResizeHandlerOpts = WithRefProps<{}>;
+export declare class DataTableResizeHandlerState {
+    #private;
+    static create(opts: DataTableResizeHandlerOpts): DataTableResizeHandlerState;
+    readonly opts: DataTableResizeHandlerOpts;
+    readonly attachment: RefAttachment;
+    readonly headState: DataTableHeadState;
+    constructor(opts: DataTableResizeHandlerOpts, head: DataTableHeadState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "resize-handler";
+        readonly ondblclick: () => void;
+        readonly onmousedown: (event: unknown) => void;
+        readonly ontouchstart: (event: unknown) => void;
+    };
+}
+export {};