@coding-form/form-engine 0.0.3 → 0.0.5

package/README.md

@@ -1,233 +1,23 @@
-[![npm](https://img.shields.io/npm/v/@coding-form/form-engine.svg)](https://www.npmjs.com/package/@coding-form/form-engine)
-# Form Engine
+# Rslib project
 
-一个基于 React 的动态表单引擎，支持表单动态渲染、字段验证、事件处理和布局控制。
+## Setup
 
-## 项目结构
-
-```
-coding-form/
-├── packages/
-│   └── form-engine/          # 核心表单视图库
-│       ├── src/
-│       │   ├── form/       # 表单组件
-│       │   ├── factory/    # 表单项工厂
-│       │   ├── register/   # 组件注册中心
-│       │   ├── store/      # Redux 状态管理
-│       │   ├── context/    # React Context
-│       │   ├── instance/   # 表单实例控制
-│       │   ├── presenters/ # 表单展示层
-│       │   ├── validate/   # 表单验证
-│       │   ├── event/      # 事件处理
-│       │   ├── layout/     # 布局系统
-│       │   ├── hooks/      # 自定义 Hooks
-│       │   └── types/      # TypeScript 类型定义
-│       └── dist/           # 构建输出
-├── apps/                   # 示例应用
-│   ├── app-pc/            # PC 端示例
-│   └── app-mobile/        # 移动端示例
-└── package.json           # 工作区配置
-```
-
-## 核心功能
-
-### 1. 动态表单渲染
-
-通过元数据（Meta）动态生成表单，支持：
-- 多种数据类型：`STRING`, `INTEGER`, `LONG`, `DOUBLE`, `BOOLEAN`
-- 字段属性：名称、编码、类型、默认值、提示等
-- 嵌套子表单（subForms）
-
-### 2. 表单验证
-
-```typescript
-interface FormFieldValidator {
-    target: FieldKey;           // 校验目标字段
-    validator: (instance: FormInstance, value: any) => boolean | string;
-}
-```
-
-- 支持自定义验证规则
-- 异步验证支持
-- 隐藏字段自动跳过验证
-
-### 3. 事件系统
-
-支持表单事件绑定和处理：
-
-```typescript
-interface FormEvent {
-    type: 'load' | 'change' | 'blur';  // 事件类型
-    target: FieldKey;                   // 事件目标
-    event: (formInstance: FormInstance, value: any) => void;
-}
-```
-
-- `load`: 表单加载时触发
-- `change`: 字段值变化时触发
-- `blur`: 字段失去焦点时触发
-
-### 4. 布局控制
-
-支持卡片布局和默认布局：
-
-```typescript
-interface FormLayout {
-    formCode: string;
-    type: 'card';
-    props: CardLayout
-}
-
-interface CardLayout {
-    title: string;
-    layout: 'horizontal' | 'vertical';
-    fields: FieldLayout[];
-    mainFields: string[];
-}
-```
-
-### 5. 刷新组件
-
-通过增加字段 `version` 版本号来触发组件的重新渲染：
-
-```typescript
-interface StateField {
-    version?: number;  // 版本号，每次刷新时递增
-}
-```
-
-- `refreshFields`: 刷新指定字段，触发组件重新渲染
-- 支持单个字段或字段数组
-- 支持主表单和子表单
-- 通过递增 `version` 值实现强制刷新
-
-```typescript
-// 刷新单个字段
-form.refreshFields('field_code');
-
-// 刷新多个字段
-form.refreshFields(['field1', 'field2']);
-
-// 刷转子表单字段
-form.refreshFields(['field1'], 'sub_form_code');
-```
-
-### 6. 表单实例控制
-
-提供丰富的表单操作方法：
-
-```typescript
-// 获取/设置字段值
-getFieldValue(name: string, formCode?: string)
-getFieldsValue(formCode?: string)
-setFieldValue(name: string, value: any, formCode?: string)
-setFieldsValue(values: any, formCode?: string)
-
-// 表单操作
-resetFields(nameList?: string[], formCode?: string)
-validateFields(nameList?: string[], formCode?: string)
-submit(formCode?: string)
-
-// 动态控制
-hiddenFields(hidden: boolean, nameList: string[]|string, formCode?: string)
-requiredFields(required: boolean, nameList: string[]|string, formCode?: string)
-refreshFields(nameList: string[]|string, formCode?: string)  // 刷新字段，触发重新渲染
-```
-
-## 快速开始
-
-### 1. 安装依赖
+Install the dependencies:
 
 ```bash
 pnpm install
 ```
 
-### 2. 注册表单组件
-
-```tsx
-import { FormRegistry } from '@coding-form/form-engine';
-import YourFormComponent from './YourFormComponent';
-import formInstanceFactory from './formInstanceFactory';
-
-FormRegistry.getInstance().register(YourFormComponent, formInstanceFactory);
-```
-
-### 3. 使用表单视图
-
-```tsx
-import { FormView } from '@coding-form/form-engine';
-
-const meta = {
-    name: '用户信息',
-    code: 'user_form',
-    fields: [
-        {
-            id: '1',
-            name: '姓名',
-            code: 'name',
-            type: 'text_input',
-            dataType: 'STRING',
-            hidden: false,
-            required: true,
-            placeholder: '请输入姓名'
-        }
-    ]
-};
+## Get started
 
-<FormView meta={meta} />;
-```
-
-### 4. 开发模式
+Build the library:
 
 ```bash
-# 监听构建 form-view
-pnpm watch:form-view
-
-# 运行 PC 示例应用
-pnpm dev:app-pc
-
-# 运行移动端示例应用
-pnpm dev:app-mobile
+pnpm run build
 ```
 
-### 5. 构建
+Build the library in watch mode:
 
 ```bash
-pnpm build
-```
-
-## 技术栈
-
-- **React 18** - UI 框架
-- **TypeScript** - 类型系统
-- **Redux Toolkit** - 状态管理
-- **React Redux** - React 绑定
-- **Rslib** - 构建工具
-
-## API 参考
-
-### FormView 组件属性
-
-| 属性 | 类型 | 说明 |
-|------|------|------|
-| meta | FormMeta | 表单元数据定义 |
-| form | FormInstance | 表单实例 |
-| onValuesChange | (values: any) => void | 值变化回调 |
-| review | boolean | 是否预览模式 |
-| validators | FormFieldValidator[] | 验证规则数组 |
-| events | FormEvent[] | 事件定义数组 |
-| layouts | FormLayout[] | 布局定义数组 |
-
-### 数据类型
-
-| 类型 | 说明 |
-|------|------|
-| STRING | 字符串 |
-| INTEGER | 整数 |
-| LONG | 长整数 |
-| DOUBLE | 小数 |
-| BOOLEAN | 布尔值 |
-
-## 许可证
-
-[LICENSE](./LICENSE)
+pnpm run dev
+```

package/dist/form/index.js

@@ -12,17 +12,22 @@ const FormViewContent = (props)=>{
     const meta = props.meta;
     const subFormList = meta.subForms || [];
     const review = props.review || false;
+    const handleOnSubmit = (values, formCode)=>{
+        props.onFinish?.(values, formCode);
+    };
     return /*#__PURE__*/ react.createElement(FormContext.Provider, {
         value: context
-    }, /*#__PURE__*/ react.createElement(FormSubView, {
+    }, props.header, /*#__PURE__*/ react.createElement(FormSubView, {
         Form: Form,
         formCode: meta.code,
-        review: review
+        review: review,
+        onFinish: handleOnSubmit
     }), subFormList && subFormList.map((item)=>/*#__PURE__*/ react.createElement(FormSubView, {
             Form: Form,
             formCode: item.code,
-            review: review
-        })));
+            review: review,
+            onFinish: handleOnSubmit
+        })), props.footer);
 };
 const FormView = (props)=>{
     const Form = FormRegistry.getInstance().getFormComponent();

package/dist/form/sub-view.d.ts

@@ -3,6 +3,7 @@ interface FormSubViewProps {
     formCode: string;
     Form: React.ComponentType<any>;
     review: boolean;
+    onFinish: (values: any, formCode: string) => void;
 }
 export declare const FormSubView: React.FC<FormSubViewProps>;
 export {};

package/dist/form/sub-view.js

@@ -23,7 +23,10 @@ const FormSubView = (props)=>{
         if (events && events.length > 0) for (const event of events)event.event(formInstance);
     }, []);
     return /*#__PURE__*/ react.createElement(Form, {
-        form: formTarget
+        form: formTarget,
+        onFinish: (values)=>{
+            props.onFinish(values, props.formCode);
+        }
     }, layoutContext.render(props.formCode, fields, review, context));
 };
 export { FormSubView };

package/dist/instance/control.d.ts

@@ -1,14 +1,15 @@
+import { NamePath } from "../types";
 export declare class FormControl {
     private readonly formCode;
     private readonly proxyTarget;
     constructor(formCode: string, target: any);
     getFormCode(): string;
     getProxyTarget(): any;
-    getFieldValue(name: string): any;
+    getFieldValue(name: NamePath): any;
     getFieldsValue(): any;
-    resetFields(nameList?: string[]): void;
+    resetFields(nameList?: NamePath[] | NamePath): void;
     setFieldsValue(values: any): void;
-    setFieldValue(name: string, value: any): void;
+    setFieldValue(name: NamePath, value: any): void;
     submit(): void;
-    validateFields(nameList?: string[]): Promise<any>;
+    validateFields(nameList?: NamePath[] | NamePath): Promise<any>;
 }

package/dist/instance/index.d.ts

@@ -1,7 +1,7 @@
-import { FormMeta } from "../types";
+import { FormInstanceInterface, FormMeta, NamePath } from "../types";
 import { FormControl } from "./control";
 import { FormPresenter } from "../presenters";
-export declare class FormInstance {
+export declare class FormInstance implements FormInstanceInterface {
     private readonly instanceList;
     private readonly meta;
     private presenter;
@@ -11,14 +11,14 @@ export declare class FormInstance {
     private initInstanceList;
     getFormControl(formCode?: string): FormControl | undefined;
     getProxyTarget(formCode?: string): any;
-    getFieldValue(name: string, formCode?: string): void;
+    getFieldValue(name: NamePath, formCode?: string): void;
     getFieldsValue(formCode?: string): any;
-    resetFields(nameList?: string[], formCode?: string): void;
+    resetFields(nameList?: NamePath[] | NamePath, formCode?: string): void;
     setFieldsValue(values: any, formCode?: string): void;
-    setFieldValue(name: string, value: any, formCode?: string): void;
+    setFieldValue(name: NamePath, value: any, formCode?: string): void;
     submit(formCode?: string): void;
-    validateFields(nameList?: string[], formCode?: string): Promise<any>;
-    hiddenFields(hidden: boolean, nameList: string[] | string, formCode?: string): void;
-    requiredFields(required: boolean, nameList: string[] | string, formCode?: string): void;
-    refreshFields(nameList: string[] | string, formCode?: string): void;
+    validateFields(nameList?: NamePath[] | NamePath, formCode?: string): Promise<any>;
+    hiddenFields(hidden: boolean, nameList: NamePath[] | NamePath, formCode?: string): void;
+    requiredFields(required: boolean, nameList: NamePath[] | NamePath, formCode?: string): void;
+    refreshFields(nameList: NamePath[] | NamePath, formCode?: string): void;
 }

package/dist/presenters/form-presenter.d.ts

@@ -1,13 +1,13 @@
-import { Dispatch, FormMeta, FormState } from "../types";
+import { Dispatch, FormMeta, FormState, NamePath } from "../types";
 export declare class FormPresenter {
     private state;
     private readonly dispatch;
     constructor(state: FormState, dispatch: Dispatch<FormState>);
     syncState(state: FormState): void;
     initialState(meta: FormMeta): void;
-    hiddenFields(hidden: boolean, nameList: string[] | string, formCode?: string): void;
-    refreshFields(nameList: string[] | string, formCode?: string): void;
-    requiredFields(required: boolean, nameList: string[] | string, formCode?: string): void;
+    hiddenFields(hidden: boolean, nameList: NamePath[] | NamePath, formCode?: string): void;
+    refreshFields(nameList: NamePath[] | NamePath, formCode?: string): void;
+    requiredFields(required: boolean, nameList: NamePath[] | NamePath, formCode?: string): void;
     private hiddenMapFields;
     private refreshMapFields;
     private requiredMapFields;

package/dist/types/index.d.ts

@@ -6,3 +6,4 @@ export * from "./validate";
 export * from "./event";
 export * from "./dispatch";
 export * from "./layout";
+export * from "./instance";

package/dist/types/index.js

@@ -6,3 +6,4 @@ export * from "./validate.js";
 export * from "./event.js";
 export * from "./dispatch.js";
 export * from "./layout.js";
+export * from "./instance.js";

package/dist/types/instance.d.ts

@@ -0,0 +1,26 @@
+export type NamePath = string | string[];
+/**
+ *  表单实例对象能力
+ */
+export interface FormInstanceInterface {
+    /** 获取表某个单值 **/
+    getFieldValue: (name: NamePath, formCode?: string) => any;
+    /** 获取表所有值 **/
+    getFieldsValue: (formCode?: string) => any;
+    /** 重置表单值 **/
+    resetFields: (fields?: NamePath[] | NamePath, formCode?: string) => void;
+    /** 设置表单所有值 **/
+    setFieldsValue: (values: any, formCode?: string) => void;
+    /** 设置表单值 **/
+    setFieldValue: (name: NamePath, value: any, formCode?: string) => void;
+    /** 表单提交 **/
+    submit: (formCode?: string) => void;
+    /** 校验字段 **/
+    validateFields: (nameList?: NamePath[] | NamePath, formCode?: string) => Promise<any>;
+    /** 隐藏字段控制 **/
+    hiddenFields: (hidden: boolean, nameList: NamePath[] | NamePath, formCode?: string) => void;
+    /** 必填字段控制 **/
+    requiredFields: (required: boolean, nameList: NamePath[] | NamePath, formCode?: string) => void;
+    /** 刷新字段控制 **/
+    refreshFields: (nameList: NamePath[] | NamePath, formCode?: string) => void;
+}

package/dist/types/types.d.ts

@@ -6,11 +6,3 @@ export declare const dataTypeOptions: {
     label: string;
     value: string;
 }[];
-/**
- * 表单类型
- */
-export interface FormType {
-    name: string;
-    type: string;
-    dataType: DataType;
-}

package/dist/types/view.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { DataType } from "./types";
 import { FormInstance } from "../instance";
 import { FormEvent, FormFieldValidator } from "./";
@@ -69,6 +70,12 @@ export interface FormViewProps {
     form?: FormInstance;
     /** 表单数据更新事件 */
     onValuesChange?: (values: any) => void;
+    /** 表单提交数据 **/
+    onFinish?: (values: any, formCode?: string) => void;
+    /** 表单头内容 **/
+    header?: React.ReactNode;
+    /** 表单底部内容 **/
+    footer?: React.ReactNode;
     /** 是否预览模式 */
     review?: boolean;
     /** 字段校验逻辑 */

package/dist/types/view.js

@@ -0,0 +1 @@
+import "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-form/form-engine",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "form-engine components",
   "keywords": [
     "coding-flow",