@vef-framework-react/components 2.1.4 → 2.1.6

package/dist/types/pro-table/props.d.ts

@@ -0,0 +1,127 @@
+import { TableColumn, TableProps } from '../table';
+import { PaginationResult, QueryFunction } from '@vef-framework-react/core';
+import { AnyObject, DeepKeys, Key } from '@vef-framework-react/shared';
+import { CSSProperties, ReactNode } from 'react';
+import { ColumnSettingsProp, OperationColumnConfig, ParamsWithPagination, ParamsWithSort, RowSelectionConfig } from './types';
+/**
+ * Base props for ProTable component
+ *
+ * @template TRow - The type of table row data
+ * @template TParams - The type of query parameters
+ */
+interface BaseProTableProps<TRow extends AnyObject, TParams extends AnyObject> extends Pick<TableProps<TRow>, "size"> {
+    /**
+     * Class name for the table container
+     */
+    className?: string;
+    /**
+     * Inline styles for the table container
+     */
+    style?: CSSProperties;
+    /**
+     * Table column definitions
+     */
+    columns: Array<TableColumn<NoInfer<TRow>>>;
+    /**
+     * Column settings configuration.
+     * - `false`: Disable column settings feature
+     * - `{ storageKey?: string }`: Enable with optional localStorage persistence
+     *
+     * @default {}
+     */
+    columnSettings?: ColumnSettingsProp;
+    /**
+     * Whether to show the sequence (row number) column. Default is true.
+     */
+    showSequenceColumn?: boolean;
+    /**
+     * Row key extractor: either a deep key of the row model or a function
+     */
+    rowKey?: DeepKeys<NoInfer<TRow>> | ((row: NoInfer<TRow>) => Key);
+    /**
+     * Enable virtual scrolling for the table to improve performance with large datasets
+     *
+     * @default false
+     */
+    virtual?: boolean;
+    /**
+     * Currently selected row keys
+     */
+    selectedRowKeys?: Key[];
+    /**
+     * Operation column configuration for per-row actions
+     */
+    operationColumn?: OperationColumnConfig<NoInfer<TRow>>;
+    /**
+     * Row selection configuration
+     * - `true`: Enable row selection with default configuration
+     * - `RowSelectionConfig<TRow>`: Enable row selection with custom configuration
+     * - `undefined`: Disable row selection (default)
+     */
+    rowSelection?: RowSelectionConfig<NoInfer<TRow>> | true;
+    /**
+     * Function to determine whether the query should be enabled
+     */
+    queryEnabled?: (params?: TParams) => boolean;
+    /**
+     * Query parameters that trigger re-fetching when changed.
+     */
+    queryParams?: TParams;
+    /**
+     * Custom header content to be rendered above the title
+     */
+    header?: ReactNode;
+    /**
+     * Title to be displayed above the table
+     */
+    title?: ReactNode;
+    /**
+     * Summary information to be displayed below the table
+     */
+    summary?: ReactNode;
+    /**
+     * Custom footer content to be rendered below the summary
+     */
+    footer?: ReactNode;
+    /**
+     * Callback when selected row keys change
+     */
+    onSelectedRowKeysChange?: (keys: Key[], rows: TRow[]) => void;
+}
+/**
+ * Props for paginated ProTable
+ *
+ * @template TRow - The type of table row data
+ * @template TParams - The type of query parameters
+ */
+export interface PaginatedProTableProps<TRow extends AnyObject, TParams extends AnyObject> extends BaseProTableProps<TRow, TParams> {
+    /**
+     * Enable pagination mode. Default is true.
+     */
+    isPaginated?: true;
+    /**
+     * Query function for fetching paginated data
+     */
+    queryFn: QueryFunction<PaginationResult<TRow>, ParamsWithSort<ParamsWithPagination<TParams>>>;
+}
+/**
+ * Props for non-paginated ProTable
+ *
+ * @template TRow - The type of table row data
+ * @template TParams - The type of query parameters
+ */
+export interface NonPaginatedProTableProps<TRow extends AnyObject, TParams extends AnyObject> extends BaseProTableProps<TRow, TParams> {
+    /**
+     * Disable pagination mode for this variant
+     */
+    isPaginated: false;
+    /**
+     * Query function for fetching the full list data
+     */
+    queryFn: QueryFunction<TRow[], ParamsWithSort<TParams>>;
+}
+/**
+ * Discriminated union of paginated and non-paginated ProTable props
+ */
+export type ProTableProps<TRow extends AnyObject, TParams extends AnyObject> = PaginatedProTableProps<TRow, TParams> | NonPaginatedProTableProps<TRow, TParams>;
+export {};

package/dist/types/pro-table/store.d.ts

@@ -0,0 +1,105 @@
+import { TableColumn } from '../table';
+import { DragDropEvents, PaginationParams, StoreProviderProps, UseStore, UnboundStore } from '@vef-framework-react/core';
+import { EventEmitter, Key } from '@vef-framework-react/shared';
+import { ReactNode, ComponentType } from 'react';
+import { OrderSpec } from '../_base/types';
+import { ProTableEvents } from './event';
+/**
+ * Column setting configuration
+ */
+export interface ColumnSetting {
+    /**
+     * Column unique identifier
+     */
+    id: Key;
+    /**
+     * Column display title
+     */
+    title: ReactNode;
+    /**
+     * Column fixed position
+     */
+    fixed?: "start" | "end" | false;
+    /**
+     * Column width in pixels
+     */
+    width?: number;
+    /**
+     * Whether the column is visible
+     */
+    visible: boolean;
+    /**
+     * Original column index for reference
+     */
+    originalIndex: number;
+}
+/**
+ * State for the ProTable component
+ */
+export interface ProTableState {
+    /**
+     * Internal event bus used for cross-part communication within ProTable.
+     */
+    eventEmitter: EventEmitter<ProTableEvents>;
+    /**
+     * Current pagination parameters
+     */
+    paginationParams: PaginationParams;
+    /**
+     * Update pagination parameters
+     */
+    setPaginationParams: (params: PaginationParams) => void;
+    /**
+     * Current sort order specifications
+     */
+    sort: OrderSpec[];
+    /**
+     * Update sort order specifications
+     */
+    setSort: (sort: OrderSpec[]) => void;
+    /**
+     * Refetch data with current query params, current pagination and sort parameters
+     */
+    refetch: () => void;
+    /**
+     * Column settings state for customization
+     */
+    columnSettings: ColumnSetting[];
+    /**
+     * Original column settings for reset functionality
+     */
+    originalColumnSettings: ColumnSetting[];
+    /**
+     * Initialize column settings from columns prop
+     */
+    initColumnSettings: (columns: TableColumn[]) => void;
+    /**
+     * Set column settings directly
+     */
+    setColumnSettings: (settings: ColumnSetting[]) => void;
+    /**
+     * Reorder columns by drag event
+     */
+    reorderColumns: (event: Parameters<DragDropEvents["dragend"]>[0]) => void;
+    /**
+     * Toggle column fixed state
+     */
+    setColumnFixed: (id: Key, fixed: "start" | "end" | false) => void;
+    /**
+     * Update column width
+     */
+    setColumnWidth: (id: Key, width: number) => void;
+    /**
+     * Toggle column visibility
+     */
+    setColumnVisible: (id: Key, visible: boolean) => void;
+    /**
+     * Reset column settings to original state
+     *
+     * @param clearStorage - Optional callback to clear localStorage
+     */
+    resetColumnSettings: (clearStorage?: () => void) => void;
+}
+export declare function getColumnId(column: TableColumn, index: number): string;
+export declare function createColumnSetting(column: TableColumn, index: number): ColumnSetting;
+export declare const ProTableStoreProvider: ComponentType<StoreProviderProps<never>>, useProTableStore: UseStore<ProTableState>, useProTableStoreApi: <TStrictState extends ProTableState = ProTableState>() => UnboundStore<TStrictState>;

package/dist/types/pro-table/types.d.ts

@@ -0,0 +1,103 @@
+import { Length } from '../_base';
+import { PaginationParams } from '@vef-framework-react/core';
+import { Key } from '@vef-framework-react/shared';
+import { ReactNode } from 'react';
+import { SYMBOL_PAGINATION, SYMBOL_SORT } from '../_base/constants';
+import { OrderSpec } from '../_base/types';
+/**
+ * Configuration for column settings feature
+ */
+export interface ColumnSettingsConfig {
+    /**
+     * Storage key for persisting column settings to localStorage.
+     * If provided, settings will be saved with key: `__VEF_PRO_TABLE_COLUMN_SETTINGS__${storageKey}`
+     * If not provided, settings will not be persisted.
+     */
+    storageKey?: string;
+}
+/**
+ * Column settings prop type.
+ * - `false`: Disable column settings feature, hide settings icon
+ * - `ColumnSettingsConfig`: Enable column settings with optional persistence
+ */
+export type ColumnSettingsProp = false | ColumnSettingsConfig;
+/**
+ * Imperative handle for ProTable component.
+ * Exposed via ref to allow parent components to programmatically control the table.
+ */
+export interface ProTableRef {
+    /**
+     * Manually trigger a data refetch.
+     * Useful when you need to refresh the table data after external changes.
+     */
+    refetch: () => void;
+    /**
+     * Register a callback to be invoked when table starts loading data
+     */
+    onLoading: (callback: () => void) => () => void;
+    /**
+     * Register a callback to be invoked when table finishes loading data
+     */
+    onLoaded: (callback: () => void) => () => void;
+}
+/**
+ * Represents request parameters enhanced with pagination metadata.
+ */
+export type ParamsWithPagination<TParams> = TParams & {
+    [SYMBOL_PAGINATION]?: PaginationParams;
+};
+/**
+ * Represents request parameters enhanced with sort metadata.
+ */
+export type ParamsWithSort<TParams> = TParams & {
+    [SYMBOL_SORT]?: OrderSpec[];
+};
+/**
+ * Configuration for the operation column which renders per-row actions
+ */
+export interface OperationColumnConfig<TRow> {
+    /**
+     * Column width. Accepts any valid `Length` value.
+     */
+    width?: Length;
+    /**
+     * Column header title. Can be plain text or a React node.
+     */
+    title?: ReactNode;
+    /**
+     * Permission tokens required to display the operation content.
+     * Use this to conditionally hide actions based on authorization.
+     */
+    permTokens?: string[];
+    /**
+     * Render function for the operation cell of a row.
+     * Receives the current row data and its index, and should return a React node
+     * that contains operation elements (e.g., buttons, menus).
+     */
+    render: (row: TRow, index: number) => ReactNode;
+}
+/**
+ * The configuration for the row selection of the table.
+ */
+export interface RowSelectionConfig<TRow> {
+    /**
+     * If set, row selection will be disabled for the row with the function returns true
+     */
+    rowSelectDisabled?: (model: TRow) => boolean;
+    /**
+     * Keep the selection keys in list even the key not exist in `dataSource` anymore
+     */
+    checkStrictly?: boolean;
+    /**
+     * Whether hide select all checkbox
+     */
+    hideSelectAll?: boolean;
+    /**
+     * Keep the selection keys in list even the key not exist in `dataSource` anymore
+     */
+    preserveSelectedRowKeys?: boolean;
+    /**
+     * The default selected row keys
+     */
+    defaultSelectedRowKeys?: Key[];
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework-react/components",
   "type": "module",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "private": false,
   "description": "Components for VEF Framework",
   "author": {
@@ -57,8 +57,8 @@
     "@gsap/react": "^2.1.2",
     "@lucide/icons": "^1.7.0",
     "@radix-ui/react-scroll-area": "^1.2.10",
-    "@tanstack/react-form": "^1.28.5",
-    "antd": "^6.3.4",
+    "@tanstack/react-form": "^1.28.6",
+    "antd": "^6.3.5",
     "antd-img-crop": "^4.30.0",
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.6",
@@ -68,9 +68,9 @@
     "react-error-boundary": "^6.1.1",
     "react-syntax-highlighter": "^16.1.1",
     "tslib": "^2.8.1",
-    "@vef-framework-react/core": "2.1.4",
-    "@vef-framework-react/hooks": "2.1.4",
-    "@vef-framework-react/shared": "2.1.4"
+    "@vef-framework-react/core": "2.1.6",
+    "@vef-framework-react/shared": "2.1.6",
+    "@vef-framework-react/hooks": "2.1.6"
   },
   "devDependencies": {
     "@types/react-syntax-highlighter": "^15.5.13",