@vef-framework/starter 2.0.10 → 2.0.11

package/dist/types/components/approval-flow-editor/nodes/types.d.ts

@@ -0,0 +1,49 @@
+import { FlowNodeEntity, WorkflowNodeJSON as FlowNodeJSONDefault, WorkflowNodeRegistry as FlowNodeRegistryDefault, FreeLayoutPluginContext, WorkflowEdgeJSON, WorkflowNodeMeta } from '@flowgram.ai/free-layout-editor';
+export declare const ApprovalNodeType: {
+    readonly Start: "start";
+    readonly End: "end";
+    readonly Approval: "approval";
+    readonly Handle: "handle";
+    readonly Condition: "condition";
+    readonly Comment: "comment";
+};
+export type ApprovalNodeType = (typeof ApprovalNodeType)[keyof typeof ApprovalNodeType];
+export interface ApprovalNodeData {
+    title?: string;
+    description?: string;
+    approvers?: string[];
+    approvalType?: "and" | "or";
+    handlers?: string[];
+    instruction?: string;
+    conditions?: ConditionItem[];
+    content?: string;
+    [key: string]: unknown;
+}
+export interface ConditionItem {
+    key: string;
+    label: string;
+    expression?: string;
+}
+export interface ApprovalNodeJSON extends FlowNodeJSONDefault {
+    data: ApprovalNodeData;
+}
+export interface ApprovalNodeMeta extends WorkflowNodeMeta {
+    sidebarDisabled?: boolean;
+    nodePanelHidden?: boolean;
+    wrapperStyle?: React.CSSProperties;
+}
+export interface ApprovalNodeRegistry extends FlowNodeRegistryDefault {
+    meta: ApprovalNodeMeta;
+    info?: {
+        icon: string;
+        label: string;
+        description: string;
+    };
+    canAdd?: (ctx: FreeLayoutPluginContext) => boolean;
+    canDelete?: (ctx: FreeLayoutPluginContext, from: FlowNodeEntity) => boolean;
+    onAdd?: (ctx: FreeLayoutPluginContext) => ApprovalNodeJSON;
+}
+export interface ApprovalFlowDocumentJSON {
+    nodes: ApprovalNodeJSON[];
+    edges: WorkflowEdgeJSON[];
+}

package/dist/types/components/approval-flow-editor/props.d.ts

@@ -0,0 +1,8 @@
+import { ApprovalFlowDocumentJSON } from './nodes/types';
+export interface ApprovalFlowEditorProps {
+    initialData?: ApprovalFlowDocumentJSON;
+    readonly?: boolean;
+    onChange?: (data: ApprovalFlowDocumentJSON) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}

package/dist/types/components/crud/props.d.ts

@@ -2,7 +2,7 @@ import { TableColumn } from '@vef-framework/components';
 import { ApiResult, MutationFunction, MutationMeta, PaginationResult, QueryFunction } from '@vef-framework/core';
 import { AnyObject, Awaitable, DeepKeys, EmptyObject, If, IsNever, Key, MaybeUndefined, PartialDeep } from '@vef-framework/shared';
 import { ReactNode } from 'react';
-import { OperationColumnConfig, RowSelectionConfig } from '../pro-table';
+import { ColumnSettingsProp, OperationColumnConfig, ProTableProps, RowSelectionConfig } from '../pro-table';
 import { CrudFormMutationFns, CrudFormScene, PaginatedQueryParams, QueryParams } from './types';
 /**
  * Base props for the Crud component.
@@ -13,10 +13,21 @@ import { CrudFormMutationFns, CrudFormScene, PaginatedQueryParams, QueryParams }
  * @template TParams - Additional query parameters type
  */
 export interface BaseCrudProps<TRow extends AnyObject, TSearchValues extends AnyObject, TSceneFormValues extends AnyObject, TParams extends AnyObject> {
+    /**
+     * Table size
+     */
+    tableSize?: ProTableProps<TRow, TParams>["size"];
     /**
      * Table column definitions
      */
     tableColumns: Array<TableColumn<NoInfer<TRow>>>;
+    /**
+     * Column settings configuration.
+     * - `false`: Disable column settings feature
+     * - `{ storageKey?: string }`: Enable with optional localStorage persistence
+     * @default {}
+     */
+    columnSettings?: ColumnSettingsProp;
     /**
      * Operation column configuration for per-row actions
      */

package/dist/types/components/index.d.ts

@@ -1,5 +1,6 @@
 export { AccessDenied } from './access-denied';
 export { App, type AppProps } from './app';
+export { ApprovalFlowEditor } from './approval-flow-editor';
 export { BaseLayout, type BaseLayoutProps } from './base-layout';
 export { createCrudKit, Crud, type CrudActionButtonGroupProps, type CrudBasicFormScene, type CrudBasicSceneFormValues, type CrudFormMutationFns, type CrudFormScene, type CrudOperationButtonGroupProps, type CrudProps, type PaginatedQueryParams, type QueryParams } from './crud';
 export { CrudPage, type CrudPageProps } from './crud-page';

package/dist/types/components/pro-table/components/column-setting-item.d.ts

@@ -0,0 +1,12 @@
+import { Key } from '@vef-framework/shared';
+import { ReactNode, NamedExoticComponent } from 'react';
+interface ColumnSettingItemProps {
+    columnId: Key;
+    title: ReactNode;
+    fixed?: "start" | "end" | false;
+    width?: number;
+    visible: boolean;
+    index: number;
+}
+export declare const ColumnSettingItem: NamedExoticComponent<ColumnSettingItemProps>;
+export {};

package/dist/types/components/pro-table/components/column-settings-panel.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const ColumnSettingsPanel: MemoExoticComponent<() => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/types/components/pro-table/components/column-settings.d.ts

@@ -0,0 +1,6 @@
+import { NamedExoticComponent } from 'react';
+interface ColumnSettingsProps {
+    className?: string;
+}
+export declare const ColumnSettings: NamedExoticComponent<ColumnSettingsProps>;
+export {};

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

@@ -1,4 +1,8 @@
+export { ColumnSettingItem } from './column-setting-item';
+export { ColumnSettings } from './column-settings';
+export { ColumnSettingsPanel } from './column-settings-panel';
 export { OperationButtonGroup, type OperationButtonGroupProps } from './operation-button-group';
 export { ProTableRefHolder } from './ref';
 export { NonPaginatedTable, PaginatedTable } from './table';
 export { TableSubscriber, type TableSubscriberProps } from './table-subscriber';
+export { WidthPopover } from './width-popover';

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

@@ -1,6 +1,11 @@
 import { NonPaginatedProTableProps, PaginatedProTableProps } from '../props';
-type PaginatedTableProps<TRow extends object, TParams extends object> = Pick<PaginatedProTableProps<TRow, TParams>, "className" | "style" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange">;
-type NonPaginatedTableProps<TRow extends object, TParams extends object> = Pick<NonPaginatedProTableProps<TRow, TParams>, "className" | "style" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange">;
-export declare function PaginatedTable<TRow extends object, TParams extends object>({ className, style, queryFn, columns, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: PaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function NonPaginatedTable<TRow extends object, TParams extends object>({ className, style, queryFn, columns, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: NonPaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+import { ColumnSettingsProp } from '../types';
+type PaginatedTableProps<TRow extends object, TParams extends object> = Pick<PaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange"> & {
+    columnSettings: ColumnSettingsProp;
+};
+type NonPaginatedTableProps<TRow extends object, TParams extends object> = Pick<NonPaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange"> & {
+    columnSettings: ColumnSettingsProp;
+};
+export declare function PaginatedTable<TRow extends object, TParams extends object>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: PaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function NonPaginatedTable<TRow extends object, TParams extends object>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: NonPaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/pro-table/components/width-popover.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, NamedExoticComponent } from 'react';
+interface WidthPopoverProps {
+    currentWidth?: number;
+    disabled?: boolean;
+    children: ReactNode;
+    onWidthChange: (width: number) => void;
+}
+export declare const WidthPopover: NamedExoticComponent<WidthPopoverProps>;
+export {};

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

@@ -1,3 +1,5 @@
 import { Provider } from 'react';
 export declare const DataProvider: Provider<readonly unknown[]>;
 export declare function useData(): readonly unknown[];
+export declare const ColumnSettingsStorageKeyProvider: Provider<string | undefined>;
+export declare function useColumnSettingsStorageKey(): string | undefined;

package/dist/types/components/pro-table/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export { clearColumnSettingsStorage, useColumnSettingsPersistence } from './use-column-settings-persistence';
 export { useRowSelection } from './use-row-selection';
 export { useTableColumns } from './use-table-columns';

package/dist/types/components/pro-table/hooks/use-column-settings-persistence.d.ts

@@ -0,0 +1,7 @@
+export declare function clearColumnSettingsStorage(storageKey: string): {
+    skipNextSave: () => void;
+};
+/**
+ * Hook to handle column settings persistence to localStorage
+ */
+export declare function useColumnSettingsPersistence(storageKey: string | undefined): void;

package/dist/types/components/pro-table/hooks/use-table-columns.d.ts

@@ -1,11 +1,12 @@
 import { TableColumn } from '@vef-framework/components';
-import { OperationColumnConfig } from '../types';
+import { ColumnSettingsProp, OperationColumnConfig } from '../types';
 /**
  * The hook to use the table columns.
  *
  * @param tableColumns - The columns of the table.
  * @param operationColumn - The operation column of the table.
  * @param showSequenceColumn - Whether to show the sequence column. Default is true.
+ * @param columnSettingsProp - Column settings configuration.
  * @returns The table columns.
  */
-export declare function useTableColumns<TRow extends object>(tableColumns: Array<TableColumn<TRow>>, operationColumn?: OperationColumnConfig<TRow>, showSequenceColumn?: boolean): Array<TableColumn<TRow>>;
+export declare function useTableColumns<TRow extends object>(tableColumns: Array<TableColumn<TRow>>, operationColumn?: OperationColumnConfig<TRow>, showSequenceColumn?: boolean, columnSettingsProp?: ColumnSettingsProp): Array<TableColumn<TRow>>;

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

@@ -8,4 +8,4 @@ export declare const ProTable: (<TRow extends object, TParams extends object>(pr
 export { OperationButtonGroup, TableSubscriber as ProTableSubscriber, type OperationButtonGroupProps, type TableSubscriberProps as ProTableSubscriberProps } from './components';
 export type { ProTableProps } from './props';
 export type { ProTableState } from './store';
-export type { OperationColumnConfig, ParamsWithPagination, ParamsWithSort, ProTableRef, RowSelectionConfig } from './types';
+export type { ColumnSettingsConfig, ColumnSettingsProp, OperationColumnConfig, ParamsWithPagination, ParamsWithSort, ProTableRef, RowSelectionConfig } from './types';

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

@@ -1,15 +1,15 @@
-import { TableColumn } from '@vef-framework/components';
+import { TableColumn, TableProps } from '@vef-framework/components';
 import { PaginationResult, QueryFunction } from '@vef-framework/core';
 import { DeepKeys, Key } from '@vef-framework/shared';
 import { CSSProperties, ReactNode } from 'react';
-import { OperationColumnConfig, ParamsWithPagination, ParamsWithSort, RowSelectionConfig } from './types';
+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, TParams> {
+interface BaseProTableProps<TRow, TParams> extends Pick<TableProps<TRow>, "size"> {
     /**
      * Class name for the table container
      */
@@ -22,6 +22,13 @@ interface BaseProTableProps<TRow, TParams> {
      * 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.
     */

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

@@ -1,8 +1,38 @@
-import { PaginationParams, StoreProviderProps, UseStore, UnboundStore } from '@vef-framework/core';
-import { EventEmitter } from '@vef-framework/shared';
+import { TableColumn } from '@vef-framework/components';
+import { DragDropEvents, PaginationParams, StoreProviderProps, UseStore, UnboundStore } from '@vef-framework/core';
+import { EventEmitter, Key } from '@vef-framework/shared';
+import { ReactNode, ComponentType } from 'react';
 import { OrderSpec } from '../../types';
 import { ProTableEvents } from './event';
-import { ComponentType } from 'react';
+/**
+ * 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
  */
@@ -31,5 +61,45 @@ export interface ProTableState {
      * 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/components/pro-table/types.d.ts

@@ -4,6 +4,23 @@ import { Key } from '@vef-framework/shared';
 import { ReactNode } from 'react';
 import { SYMBOL_PAGINATION, SYMBOL_SORT } from '../../constants';
 import { OrderSpec } from '../../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.

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { createCrudKit, Crud, CrudPage, FlexCard, FormDrawer, FormModal, OperationButtonGroup, Page, ProSearch, ProTable, ProTableSubscriber, useViewportHeight, type CrudActionButtonGroupProps, type CrudBasicFormScene, type CrudBasicSceneFormValues, type CrudFormMutationFns, type CrudFormScene, type CrudOperationButtonGroupProps, type CrudPageProps, type CrudProps, type FlexCardProps, type FormDrawerProps, type FormModalProps, type LoginParams, type LoginResult, type OperationButtonGroupProps, type OperationColumnConfig, type PageProps, type PaginatedQueryParams, type ParamsWithPagination, type ParamsWithSort, type ProSearchProps, type ProTableProps, type ProTableRef, type ProTableState, type ProTableSubscriberProps, type QueryParams, type RowSelectionConfig } from './components';
+export { ApprovalFlowEditor, createCrudKit, Crud, CrudPage, FlexCard, FormDrawer, FormModal, OperationButtonGroup, Page, ProSearch, ProTable, ProTableSubscriber, useViewportHeight, type CrudActionButtonGroupProps, type CrudBasicFormScene, type CrudBasicSceneFormValues, type CrudFormMutationFns, type CrudFormScene, type CrudOperationButtonGroupProps, type CrudPageProps, type CrudProps, type FlexCardProps, type FormDrawerProps, type FormModalProps, type LoginParams, type LoginResult, type OperationButtonGroupProps, type OperationColumnConfig, type PageProps, type PaginatedQueryParams, type ParamsWithPagination, type ParamsWithSort, type ProSearchProps, type ProTableProps, type ProTableRef, type ProTableState, type ProTableSubscriberProps, type QueryParams, type RowSelectionConfig } from './components';
 export * from './constants';
 export * from './helpers';
 export * from './routes';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework/starter",
   "type": "module",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "private": false,
   "description": "Starter for VEF framework",
   "author": {
@@ -54,20 +54,30 @@
     "react-dom": ">=19"
   },
   "dependencies": {
+    "@ant-design/icons": "^6.1.0",
     "@emotion/react": "^11.14.0",
+    "@flowgram.ai/free-auto-layout-plugin": "^1.0.3",
+    "@flowgram.ai/free-container-plugin": "^1.0.3",
+    "@flowgram.ai/free-layout-editor": "^1.0.3",
+    "@flowgram.ai/free-lines-plugin": "^1.0.3",
+    "@flowgram.ai/free-node-panel-plugin": "^1.0.3",
+    "@flowgram.ai/free-snap-plugin": "^1.0.3",
+    "@flowgram.ai/free-stack-plugin": "^1.0.3",
+    "@flowgram.ai/minimap-plugin": "^1.0.3",
+    "@flowgram.ai/panel-manager-plugin": "^1.0.3",
     "@tanem/react-nprogress": "^5.0.56",
-    "antd": "^6.0.0",
+    "antd": "^6.0.1",
     "compare-versions": "^6.1.1",
-    "lucide-react": "^0.554.0"
+    "lucide-react": "^0.555.0"
   },
   "devDependencies": {
-    "@tanstack/react-router": "^1.139.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "@vef-framework/shared": "2.0.10",
-    "@vef-framework/components": "2.0.10",
-    "@vef-framework/core": "2.0.10",
-    "@vef-framework/hooks": "2.0.10"
+    "@tanstack/react-router": "^1.139.14",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "@vef-framework/components": "2.0.11",
+    "@vef-framework/core": "2.0.11",
+    "@vef-framework/hooks": "2.0.11",
+    "@vef-framework/shared": "2.0.11"
   },
   "scripts": {
     "clean": "rimraf dist",