@casinogate/ui 1.11.3 → 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;
   }

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

@@ -15,11 +15,7 @@
 </script>
 
 {#if canExpand}
-  <button
-    onclick={onToggle}
-    class="cgui:flex cgui:items-center cgui:justify-center cgui:cursor-pointer"
-    style="padding-left: {depth}rem"
-  >
+  <button onclick={onToggle} class="cgui:flex cgui:items-center cgui:justify-center cgui:cursor-pointer">
     {#if isExpanded}
       <Icon.ChevronDown width={16} height={16} />
     {:else}

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/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/package.json

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