@casinogate/ui 1.11.2 → 1.11.4

package/dist/assets/css/root.css

@@ -463,6 +463,9 @@
   .cgui\:h-\[300px\] {
     height: 300px;
   }
+  .cgui\:h-\[600px\] {
+    height: 600px;
+  }
   .cgui\:h-auto {
     height: auto;
   }
@@ -652,6 +655,9 @@
   .cgui\:basis-1\/2 {
     flex-basis: calc(1 / 2 * 100%);
   }
+  .cgui\:table-fixed {
+    table-layout: fixed;
+  }
   .cgui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
     transform-origin: var(--bits-dropdown-menu-content-transform-origin);
   }

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

@@ -13,6 +13,7 @@
     children,
     class: className,
     cell,
+    depth = 0,
     ...restProps
   }: DataTableCellProps = $props();
 
@@ -30,6 +31,11 @@
   const mergedProps = $derived(mergeProps(restProps, cellState.props));
 </script>
 
-<td class={cn(styles.current.cell(), className)} {...mergedProps}>
+<td
+  style:--depth={depth}
+  style:padding-left={depth > 0 ? `calc((var(--cgui-spacing)*2) + ${depth} * 1rem)` : undefined}
+  class={cn(styles.current.cell(), className)}
+  {...mergedProps}
+>
   {@render children?.()}
 </td>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Icon } from '../../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/components/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/components/data-table/components/data-table.svelte.d.ts

@@ -85,7 +85,9 @@ export declare class DataTableHeadState {
         readonly "data-slot": "head";
         readonly 'data-id': string;
         readonly style: {
-            readonly width: "calc(undefined * 1px)" | `calc(${number} * 1px)`;
+            readonly width: "undefinedpx" | `${number}px`;
+            readonly 'min-width': string | undefined;
+            readonly 'max-width': string | undefined;
         };
         readonly colspan: number;
     };
@@ -104,7 +106,9 @@ export declare class DataTableCellState {
         readonly id: string;
         readonly "data-slot": "cell";
         readonly style: {
-            readonly width: "calc(undefined * 1px)" | `calc(${number} * 1px)`;
+            readonly width: "undefinedpx" | `${number}px`;
+            readonly 'min-width': string | undefined;
+            readonly 'max-width': string | undefined;
         };
     };
 }

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

@@ -117,8 +117,8 @@ export class DataTableBodyState {
         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;
+            const target = mutations[mutations.length - 1]?.target;
+            this.#lastRow = target?.lastElementChild;
         }, { childList: true, subtree: true });
         let observer = null;
         watch.pre(() => this.#lastRow, () => {
@@ -138,7 +138,7 @@ export class DataTableBodyState {
     #rowObserver = () => {
         const observer = new IntersectionObserver((entries) => {
             const entry = entries[0];
-            if (entry.isIntersecting) {
+            if (entry?.isIntersecting) {
                 this.rootState.opts.table.current?.features?.onLastRowReached?.();
                 if (this.#lastRow) {
                     observer.unobserve(this.#lastRow);
@@ -173,12 +173,22 @@ export class DataTableHeadState {
         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: `calc(${this.#width} * 1px)`,
+            width: `${this.#width}px`,
+            'min-width': this.#minSize,
+            'max-width': this.#maxSize,
         },
         colspan: this.opts.header.current.colSpan,
         ...this.attachment,
@@ -197,11 +207,21 @@ export class DataTableCellState {
         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: `calc(${this.#width} * 1px)`,
+            width: `${this.#width}px`,
+            'min-width': this.#minSize,
+            'max-width': this.#maxSize,
         },
         ...this.attachment,
     }));

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

@@ -15,7 +15,7 @@
   import FlexRender from './components/flex-render.svelte';
   import { type DataTableProps, type RowData } from './types.js';
 
-  let { ref = $bindable(null), table, empty, ...restProps }: DataTableProps<TData> = $props();
+  let { ref = $bindable(null), table, empty, class: className, ...restProps }: DataTableProps<TData> = $props();
 
   let isFirstLoaded = $state(false);
 
@@ -37,8 +37,8 @@
   );
 </script>
 
-<DataTableRoot bind:ref {table} {...restProps}>
-  <DataTableTable>
+<DataTableRoot bind:ref {table} class={cn(className, { 'cgui:h-full': isEmpty })} {...restProps}>
+  <DataTableTable class={cn({ 'cgui:h-full': isEmpty })}>
     <DataTableHeader>
       {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
         <DataTableRow>
@@ -96,7 +96,8 @@
           {/if}
           <DataTableRow>
             {#each row.getVisibleCells() as cell (cell.id)}
-              <DataTableCell {cell}>
+              {console.log(row.depth)}
+              <DataTableCell {cell} depth={row.depth}>
                 <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
               </DataTableCell>
             {/each}

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

@@ -1,5 +1,6 @@
 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';

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

@@ -1,5 +1,6 @@
 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';

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

@@ -9,7 +9,7 @@ export const dataTableVariants = tv({
             'cgui:border cgui:border-stroke-divider',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         ],
-        table: ['cgui:w-full'],
+        table: ['cgui:w-full', 'cgui:table-fixed'],
         header: ['cgui:font-medium cgui:text-body-2 cgui:text-fg-darkest cgui:sticky cgui:z-1 cgui:top-0'],
         body: [
             'cgui:relative',

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

@@ -14,6 +14,7 @@ type DataTableBodyPropsWithoutHTML = WithElementRef<WithChildren<{}>>;
 export type DataTableBodyProps = DataTableBodyPropsWithoutHTML & Without<PrimitiveDivAttributes, DataTableBodyPropsWithoutHTML>;
 type DataTableCellPropsWithoutHTML = WithElementRef<WithChildren<{
     cell: Cell<any, unknown> | null;
+    depth?: number;
 }>>;
 export type DataTableCellProps = DataTableCellPropsWithoutHTML & Without<PrimitiveTdAttributes, DataTableCellPropsWithoutHTML>;
 type DataTableHeadPropsWithoutHTML = WithElementRef<WithChildren<{

package/dist/components/data-table/utils/expanded-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ExpandedState as ExpandedStateValue, Updater } from '@tanstack/table-core';
+type ExpandedStateOpts = {
+    defaultValue?: ExpandedStateValue;
+    onValueChange?: (value: ExpandedStateValue) => void;
+};
+export declare const useExpandedState: (opts?: ExpandedStateOpts) => {
+    value: ExpandedStateValue;
+    updater: (updater: Updater<ExpandedStateValue>) => void;
+};
+export {};

package/dist/components/data-table/utils/expanded-state.svelte.js

@@ -0,0 +1,23 @@
+export const useExpandedState = (opts) => {
+    let value = $state(opts?.defaultValue ?? {});
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
+        },
+        updater: (updater) => {
+            let newExpandedState;
+            if (updater instanceof Function) {
+                newExpandedState = updater(value);
+            }
+            else {
+                newExpandedState = updater;
+            }
+            value = newExpandedState;
+            opts?.onValueChange?.(newExpandedState);
+        },
+    };
+};

package/dist/components/data-table/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { useExpandedState } from './expanded-state.svelte.js';
 export { usePaginationState } from './pagination-state.svelte.js';
 export { useResizeState } from './resize-state.svelte.js';
 export { rowModels } from './row-models.js';

package/dist/components/data-table/utils/index.js

@@ -1,3 +1,4 @@
+export { useExpandedState } from './expanded-state.svelte.js';
 export { usePaginationState } from './pagination-state.svelte.js';
 export { useResizeState } from './resize-state.svelte.js';
 export { rowModels } from './row-models.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",