@casinogate/ui 1.10.4 → 1.10.6

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

@@ -28,8 +28,10 @@ export class DataTableRootState {
         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();
+            if (!header)
+                continue;
+            colSizes[`--header-${header?.id}-size`] = header.getSize();
+            colSizes[`--col-${header?.column.id}-size`] = header.column.getSize();
         }
         return colSizes;
     });

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

@@ -1,6 +1,6 @@
 export * as DataTablePrimitive from './exports-primitive.js';
 export * from './exports.js';
-export type { ColumnSizingState, ExpandedState, ExpandedStateList, GroupingState, PaginationState, RowSelectionState, SortingState, TableState, Updater, } from '@tanstack/table-core';
+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 { rowModels, usePaginationState, useResizeState, useRowSelectionState, useSortState } from './utils/index.js';
+export * from './utils/index.js';

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

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

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

@@ -28,7 +28,11 @@ export const dataTableVariants = tv({
             'cgui:data-[direction=asc]:[&_[data-direction=asc]]:text-icon-regular',
             'cgui:data-[direction=desc]:[&_[data-direction=desc]]:text-icon-regular',
         ],
-        cell: ['cgui:whitespace-nowrap cgui:bg-clip-padding cgui:p-2', 'cgui:font-normal cgui:align-middle'],
+        cell: [
+            'cgui:whitespace-nowrap cgui:bg-clip-padding cgui:p-2',
+            'cgui:font-normal cgui:align-middle',
+            'cgui:truncate',
+        ],
         resizeHandler: [
             'cgui:absolute cgui:hidden cgui:top-0 cgui:right-0 cgui:w-1.5 cgui:h-full',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',

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

@@ -2,4 +2,5 @@ export { usePaginationState } from './pagination-state.svelte.js';
 export { useResizeState } from './resize-state.svelte.js';
 export { rowModels } from './row-models.js';
 export { useRowSelectionState } from './row-selection-state.svelte.js';
-export { useSortState } from './use-sort-sate.svelte.js';
+export { useSortState } from './use-sort-state.svelte.js';
+export { useVisibilityState } from './use-visibility-state.svelte.js';

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

@@ -2,4 +2,5 @@ export { usePaginationState } from './pagination-state.svelte.js';
 export { useResizeState } from './resize-state.svelte.js';
 export { rowModels } from './row-models.js';
 export { useRowSelectionState } from './row-selection-state.svelte.js';
-export { useSortState } from './use-sort-sate.svelte.js';
+export { useSortState } from './use-sort-state.svelte.js';
+export { useVisibilityState } from './use-visibility-state.svelte.js';

package/dist/components/data-table/utils/row-models.d.ts

@@ -1,7 +1,9 @@
-import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/table-core';
+import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/table-core';
 export declare const rowModels: {
     coreRowModel: typeof getCoreRowModel;
     paginationRowModel: typeof getPaginationRowModel;
     sortedRowModel: typeof getSortedRowModel;
     filteredRowModel: typeof getFilteredRowModel;
+    expandedRowModel: typeof getExpandedRowModel;
+    groupedRowModel: typeof getGroupedRowModel;
 };

package/dist/components/data-table/utils/row-models.js

@@ -1,7 +1,9 @@
-import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/table-core';
+import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, } from '@tanstack/table-core';
 export const rowModels = {
     coreRowModel: getCoreRowModel,
     paginationRowModel: getPaginationRowModel,
     sortedRowModel: getSortedRowModel,
     filteredRowModel: getFilteredRowModel,
+    expandedRowModel: getExpandedRowModel,
+    groupedRowModel: getGroupedRowModel,
 };

package/dist/components/data-table/utils/{use-sort-sate.svelte.d.ts → use-sort-state.svelte.d.ts}

@@ -7,6 +7,8 @@ declare class SortState {
     #private;
     constructor(opts?: Opts);
     updater: OnChangeFn<SortingState>;
+    get dir(): "asc" | "desc" | null;
+    get field(): string | null;
     get current(): SortingState;
     set current(value: SortingState);
 }

package/dist/components/data-table/utils/{use-sort-sate.svelte.js → use-sort-state.svelte.js}

@@ -16,8 +16,17 @@ class SortState {
         }
         this.current = newSort;
         this.#onValueChange(newSort);
-        console.log(newSort);
     };
+    get dir() {
+        if (!this.#current?.[0])
+            return null;
+        return this.#current?.[0]?.desc ? 'desc' : 'asc';
+    }
+    get field() {
+        if (!this.#current?.[0])
+            return null;
+        return this.#current?.[0]?.id;
+    }
     get current() {
         return this.#current;
     }

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

@@ -0,0 +1,14 @@
+import type { OnChangeFn, VisibilityState as VisibilityStateType } from '@tanstack/table-core';
+type Opts = {
+    defaultValue?: () => VisibilityStateType;
+    onValueChange?: (value: VisibilityStateType) => void;
+};
+declare class VisibilityState {
+    #private;
+    constructor(opts?: Opts);
+    updater: OnChangeFn<VisibilityStateType>;
+    get current(): VisibilityStateType;
+    set current(value: VisibilityStateType);
+}
+export declare const useVisibilityState: (opts?: Opts) => VisibilityState;
+export {};

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

@@ -0,0 +1,29 @@
+import { noop } from '../../../internal/utils/common.js';
+class VisibilityState {
+    #current;
+    #onValueChange;
+    constructor(opts) {
+        this.#current = $state(opts?.defaultValue?.() ?? {});
+        this.#onValueChange = opts?.onValueChange ?? noop;
+    }
+    updater = (updater) => {
+        let newVisibility;
+        if (updater instanceof Function) {
+            newVisibility = updater(this.#current);
+        }
+        else {
+            newVisibility = updater;
+        }
+        this.current = newVisibility;
+        this.#onValueChange(newVisibility);
+    };
+    get current() {
+        return this.#current;
+    }
+    set current(value) {
+        this.#current = value;
+    }
+}
+export const useVisibilityState = (opts) => {
+    return new VisibilityState(opts);
+};

package/package.json

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