fat-design 0.0.1-beta.20250927201707 → 0.0.1-beta.20250929012932

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fat-design",
-    "version": "0.0.1-beta.20250927201707",
+    "version": "0.0.1-beta.20250929012932",
     "scripts": {},
     "main": "index.umd.js",
     "module": "index.js",
@@ -16,5 +16,5 @@
     "publishConfig": {
         "registry": "https://registry.npmjs.org"
     },
-    "buildTime": "Sat, 27 Sep 2025 12:17:07 GMT"
+    "buildTime": "Sun, 28 Sep 2025 17:29:32 GMT"
 }

package/types/editable-table/index.d.ts

@@ -0,0 +1,122 @@
+/// <reference types="react" />
+import { TableProps, ColumnProps } from '../table';
+import { TinyEmitter } from '../util';
+
+export interface EditableTableProps extends Omit<TableProps, 'columns'> {
+    /**
+     * 样式前缀
+     */
+    prefix?: string;
+    
+    /**
+     * 表格列配置，支持可编辑组件配置
+     */
+    columns?: EditableColumnProps[];
+    
+    /**
+     * 表格数据源
+     */
+    dataSource?: any[];
+    
+    /**
+     * 自定义组件映射，用于扩展可编辑组件类型
+     */
+    components?: Record<string, React.ComponentType<any>>;
+    
+    /**
+     * 行数据变化回调函数
+     */
+    onRowValueChange?: (row: any, column: EditableColumnProps) => void;
+    
+    /**
+     * 事件发射器，用于组件间通信
+     */
+    actionEmitter?: TinyEmitter;
+    
+    /**
+     * 是否显示添加行功能
+     */
+    isShowAddRow?: boolean;
+
+    /**
+     * 表格创建完成回调
+     */
+    onCreated?: (params: { actions: EditableTableActions }) => void;
+}
+
+export interface EditableColumnProps extends ColumnProps {
+    /**
+     * 可编辑组件类型
+     */
+    component?: string | React.ComponentType<any>;
+    
+    /**
+     * 传递给可编辑组件的属性
+     */
+    xProps?: Record<string, any>;
+    
+    /**
+     * 值变化时是否强制更新整行
+     */
+    forceUpdateRow?: boolean;
+    
+    /**
+     * 值变化时是否强制更新整个表格
+     */
+    forceUpdateTable?: boolean;
+}
+
+export interface SettingTableProps {
+    /**
+     * 样式前缀
+     */
+    prefix?: string;
+    
+    /**
+     * 表格列配置
+     */
+    columns?: ColumnProps[];
+    
+    /**
+     * 表格数据源
+     */
+    dataSource?: any[];
+    
+    /**
+     * 自定义组件映射
+     */
+    components?: Record<string, React.ComponentType<any>>;
+    
+    /**
+     * 添加数据回调函数
+     */
+    onAddData?: (newRow?: any) => void;
+}
+
+interface SettingTableStatic {
+    /**
+     * 注册组件
+     */
+    registerComponents: (components: Record<string, React.ComponentType<any>>) => void;
+}
+
+export interface EditableTableActions {
+    /**
+     * 强制更新整个表格
+     */
+    forceUpdateTable: () => void;
+    
+    /**
+     * 强制更新指定行
+     */
+    forceUpdateRow: (row: any, column: EditableColumnProps) => void;
+}
+
+declare const EditableTable: React.ForwardRefExoticComponent<EditableTableProps & React.RefAttributes<any>> & {
+    /**
+     * 配置表格组件，专门用于配置管理场景
+     */
+    SettingTable: React.ComponentType<SettingTableProps> & SettingTableStatic;
+};
+
+export default EditableTable;

package/types/index.d.ts

@@ -59,7 +59,8 @@ export { default as Upload } from './upload';
 export { default as VirtualList } from './virtual-list';
 export { default as Image } from './image';
 export { default as QueryForm } from './query-form';
-export { default as SortableList } from './0buildTypes/sortable-list';
+export { default as EditableTable } from './editable-table';
+export { default as SortableList } from './sortable-list';
 export { default as hooks } from './0buildTypes/hooks';
 export { default as Empty } from './0buildTypes/empty';
 

package/types/sortable-list/index.d.ts

@@ -0,0 +1,166 @@
+/// <reference types="react" />
+import { HTMLAttributes } from 'react';
+import { EditableTableProps } from '../editable-table';
+import { ColumnProps } from '../table';
+import { TinyEmitter } from '../util';
+
+export interface Point {
+    x: number;
+    y: number;
+}
+
+export interface SortableListProps<TTag extends keyof JSX.IntrinsicElements = 'div'> 
+    extends HTMLAttributes<HTMLElement> {
+    /**
+     * 子元素，需要包装在 SortableItem 中
+     */
+    children: React.ReactNode;
+    
+    /**
+     * 是否允许拖拽，默认为 true
+     */
+    allowDrag?: boolean;
+    
+    /**
+     * 排序结束时的回调函数
+     */
+    onSortEnd: (oldIndex: number, newIndex: number) => void;
+    
+    /**
+     * 拖拽时应用的 CSS 类名
+     */
+    draggedItemClassName?: string;
+    
+    /**
+     * 容器元素类型
+     */
+    as?: TTag;
+    
+    /**
+     * 锁定拖拽轴向
+     */
+    lockAxis?: 'x' | 'y';
+    
+    /**
+     * 自定义拖拽容器引用
+     */
+    customHolderRef?: React.RefObject<HTMLElement | null>;
+}
+
+export interface SortableItemProps {
+    /**
+     * 单个可排序项的内容
+     */
+    children: React.ReactElement;
+}
+
+export interface SortableKnobProps {
+    /**
+     * 拖拽把手的内容
+     */
+    children: React.ReactElement;
+}
+
+export interface SortableTableProps {
+    /**
+     * 表格尺寸
+     */
+    size?: 'small' | 'medium' | 'large';
+    
+    /**
+     * 是否显示斑马纹
+     */
+    isZebra?: boolean;
+    
+    /**
+     * 样式前缀
+     */
+    prefix?: string;
+    
+    /**
+     * 表格数据源
+     */
+    dataSource: any[];
+    
+    /**
+     * 表格列配置，支持 draggable 属性指定拖拽列
+     */
+    columns: (ColumnProps & { draggable?: boolean })[];
+    
+    /**
+     * 行数据变化回调函数
+     */
+    onRowValueChange?: (row: any, column: ColumnProps) => void;
+    
+    /**
+     * 事件发射器
+     */
+    actionEmitter?: TinyEmitter;
+    
+    /**
+     * 排序结束回调函数
+     */
+    onSortEnd?: (newDataSource: any[], oldIndex: number, newIndex: number) => void;
+    
+    /**
+     * 表格创建完成回调
+     */
+    onCreated?: (actions: SortableTableActions) => void;
+}
+
+export interface SortableTableActions {
+    /**
+     * 事件发射器
+     */
+    actionEmitter?: TinyEmitter;
+    
+    /**
+     * 设置数据源
+     */
+    setDataSource: (dataSource: any[]) => void;
+    
+    /**
+     * 获取数据源
+     */
+    getDataSource: () => any[];
+}
+
+export interface SortableEditableTableProps extends EditableTableProps {
+    /**
+     * 排序结束回调函数
+     */
+    onSortEnd?: (newDataSource: any[], oldIndex: number, newIndex: number) => void;
+}
+
+declare const SortableList: {
+    <TTag extends keyof JSX.IntrinsicElements = 'div'>(
+        props: SortableListProps<TTag>
+    ): React.JSX.Element;
+    
+    /**
+     * 可排序项组件
+     */
+    SortableItem: React.ComponentType<SortableItemProps>;
+    
+    /**
+     * 拖拽把手组件
+     */
+    SortableKnob: React.ComponentType<SortableKnobProps>;
+    
+    /**
+     * 可排序列表（等同于默认导出）
+     */
+    SortableList: typeof SortableList;
+    
+    /**
+     * 可排序表格组件
+     */
+    SortableTable: React.ComponentType<SortableTableProps>;
+    
+    /**
+     * 可排序编辑表格组件
+     */
+    SortableEditableTable: React.ComponentType<SortableEditableTableProps>;
+};
+
+export default SortableList;

package/types/util.d.ts

@@ -4,6 +4,36 @@ export interface IconsType {
     [key: string]: ReactNode;
 }
 
+/**
+ * 事件监听器类型
+ */
+export type ListenerType = (...args: any[]) => any;
+
+/**
+ * 事件发射器接口
+ */
+export interface TinyEmitter {
+    /**
+     * 添加事件监听器
+     */
+    on: (eventName: string, listener: ListenerType) => void;
+    
+    /**
+     * 移除事件监听器
+     */
+    off: (eventName: string, listener?: ListenerType) => void;
+    
+    /**
+     * 清除所有事件监听器
+     */
+    clear: () => void;
+    
+    /**
+     * 触发事件
+     */
+    emit: (eventName: string, ...args: any[]) => any[];
+}
+
 export default interface CommonProps {
     /**
      * 样式类名的品牌前缀