update

Author: zhangfisher

docs/.vitepress/config.mts

@@ -89,22 +89,11 @@ export default defineConfig({
               ]
             },
             {
-              text: '表单',
+              text: '表单绑定',
               collapsed: true,
               items: [
-                { text: '关于', link: '/guide/form/about' },
-                { text:"快速入门",link:"/guide/form/get-started"},
-                { text:"字段",
-                  collapsed:false,
-                  items:[
-                      { text: '关于', link: '/guide/form/field/about' },
-                      { text: 'bind', link: '/guide/form/field/bind' },
-                      { text: 'useField', link: '/guide/form/field/use-field' },
-                      { text: 'useFields', link: '/guide/form/field/use-fields' },
-                      { text:"字段拆分",link:"/guide/form/field/split-field"}, 
-                      { text:"字段组件",link:"/guide/form/field/field"}, 
-                  ]
-                },                
+                { text: '关于', link: '/guide/form/form/about' },
+                { text:"快速入门",link:"/guide/form/get-started"},              
                 { 
                   text: '表单', 
                   collapsed: true,
@@ -115,6 +104,17 @@ export default defineConfig({
                     { text:"提交表单",link:"/guide/form/form/submit"},                     
                   ]
                 },
+                { text:"字段",
+                  collapsed:false,
+                  items:[
+                      { text: '关于', link: '/guide/form/field/about' },
+                      { text: 'useField', link: '/guide/form/field/use-field' },
+                      { text: 'useFields', link: '/guide/form/field/use-fields' },
+                      { text:"字段拆分",link:"/guide/form/field/split-field"}, 
+                      { text:"字段组件",link:"/guide/form/field/component"}, 
+                      { text:"渲染字段",link:"/guide/form/field/render-field"}, 
+                  ]
+                },  
                 { 
                   text:"校验",
                   collapsed:false,

docs/demos/form/field/bindField.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useStore } from '@autostorejs/react';
+import { Layout,JsonView,Button,Input, Select, Radio } from "x-react-components"
+ 
+export default ()=>{
+
+  const { reset,useFields,useReactive } = useStore({
+    user:{
+      firstName:"Zhang",
+      lastName:"Fisher",
+      job:2,
+      age:18,
+      pets:"Dog",
+      vip:false 
+    }
+  })
+
+  const fields = useFields({
+    "user.pets":{
+      type:"radio",
+      values:["Dog","Cat","Fish"]
+    },
+    "user.ss":{}
+  })
+  const [ state  ]=  useReactive()
+
+  return <Layout>
+      <div>    
+        <Input label="First Name" {...fields.user.firstName}/>
+        <Input label="last Name" {...fields.user.lastName} />
+        <Input label="Age" {...fields.user.age}/>
+        <Select {...fields.user.job}  label ="Job" style={{color:'#333'}}
+                items={[
+                    {value:1,title:"Engineer"},
+                    {value:2,title:"Doctor"},
+                    {value:3,title:"Teacher"}
+                ]}
+            /> 
+        <Input type="checkbox" label="VIP" {...fields.user.vip} />
+        <Radio inline label="Dog" {...fields.user.pets[0]}/>
+        <Radio label="Cat" {...fields.user.pets[1]}/>
+        <Radio label="Fish" {...fields.user.pets[2]}/>
+        <Button onClick={()=>{
+            reset()      
+        }}>Reset</Button>
+      </div>
+      <div>    
+        <JsonView data={state}/>  
+      </div>    
+    </Layout>
+}

docs/demos/form/field/useFieldsConfig.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { createStore, useForm } from "@autostorejs/react";
-import { Button, Box, Input, JsonView, Layout, Spin, Field, ColorBlock } from "x-react-components";
+import { Button, Box, Input, JsonView, Layout, ColorBlock } from "x-react-components";
 
 
 const sumOrder = (order)=>order.price * order.count

docs/demos/form/form/multiForm.tsx

@@ -1,2 +1,13 @@
 # 关于
 
+`AutoStore`表单功能支持两种类型的表单字段：
+
+## 受控字段
+
+使用`useField`或`useFields`创建的字段是受控字段，其值由`useForm`创建的管理。
+
+
+## 非受控字段
+
+
+或`Field`组件

docs/guide/form/field/about.md

@@ -0,0 +1,52 @@
+# 渲染字段
+
+字段渲染有`3`种方式：
+
+## 简单字段
+
+只需要为`input`、`textarea`、`select`元素设置`name`属性，且`name`为一个`字符串路径`指向状态即可。
+
+```tsx
+<input name="user.firstName" />
+```
+
+## 封装字段
+
+当然，实际中的输入字段我们一般会进行封装，以便可以进行更多的控制。
+
+我们也可以在封装元素上通过`data-field-name='<状态路径>'`标识这是一个表单字段。
+
+```tsx {1,3}
+<div data-field-name="user.name" >
+  <label>First Name</label>
+  <input/>  
+  <span className="invalid"></span>
+</div>
+```
+
+- 使用`data-field-name`标识表单字段可以让表单能进行更多的控制。
+- `useForm`在初始化时会自动查找内部所有的`input`、`textarea`、`select`元素进行自动绑定处理，包括侦听事件等。
+
+
+## Field字段组件
+
+`Field`组件是`useForm`提供的一个用于封装表单字段的高级组件，可以用于更加灵活的表单字段封装。
+
+使用`Field`字段组件可以实现更复杂的控制，如校验、字段联动等等
+
+```tsx {1,3}
+const { Form,Field } = useForm({...})
+
+<Field 
+  name="user.name"
+  validate={(value)=>value.length>=3}
+  render={({value,validate,onChange,name,error})=>{
+    return <>
+      <label>First Name</label>
+      <input name={name} value={value} onChange={onChange}/>  
+      <span className="invalid"></span>
+      </>
+  }}
+>  
+</Field>
+```

docs/guide/form/field/bind.md

@@ -2,32 +2,47 @@
 
 ## 关于
 
-`bind`绑定控件的功能比较简单，`useField`进行双向绑定更加简单。
+`useField`用来创建一个表单控件绑定对象，用来建立状态数据与`input`控件之间的双向绑定。
 
 **`useField`签名如下：**
 
 ```ts
-type UseFieldBindings<Value> = Value extends Dict ? Record<keyof Value,{
-    value:any
-    onChange:(e:any)=>void
-}> : Value
 
-type UseFieldOptions={}
-
-type UseFieldGetter<Value,State extends Dict>= (state:ComputedState<State>)=>Value
-type UseFieldSetter<Value,State extends Dict>= (input:Value,state:ComputedState<State>)=>void
-
-interface UseFieldType<State extends Dict> {
+export interface UseFieldType<State extends Dict> {
     (): UseFieldBindings<ComputedState<State>>
-    <Value>(selector: string,options?:UseFieldOptions): UseFieldBindings<Value>
+    <Value>(
+        selector: ObjectKeyPaths<ComputedState<State>>,
+        options?:UseFieldOptions<Value>
+    ): UseFieldBindings<Value>
     <Value>(
         getter: UseFieldGetter<Value,State>,
         setter:UseFieldSetter<Value,State>,
-        options?:UseFieldOptions
+        options?:UseFieldOptions<Value>
     ):UseFieldBindings<Value>
+    <Value>(
+        getters: (ObjectKeyPaths<ComputedState<State>> | string[] | UseFieldGetter<Value,State>)[],
+        setter:UseFieldSetter<Value,State>,
+        options?:UseFieldOptions<Value>
+    ):UseFieldBindings<Value>[]
 }
 ```
 
+`useField`支持如下的调用签名：
+
+- **useField(selector,options?)**
+
+通过`selector`指定一个状态路径，创建一个双向字段绑定对象。
+
+- **useField(getter,setter,options?)**
+
+通过`getter`和`setter`方法，创建一个动态字段绑定对象。
+当要实现将多个状态值合并后绑定到一个`input`时使用。
+
+- **useField(getters,setter,options?)**
+ 
+当要实现将多个状态值绑定到多个`input`上或者进行单个状态数据的拆分时使用。
+ 
+
 ## 基本用法
 
 可以直接通过`useField(<状态路径>)`来创建一个双向字段绑定对象，然后解构到`input`控件即可。
@@ -78,4 +93,24 @@ useField<Value>(
 
 <demo react="form/field/useFieldToState.tsx"
   title="将输入字符全部转换为大写"
-/>
+/>
+
+
+## 配置字段
+
+`useField`支持如下的配置选项：
+
+```ts 
+type UseFieldOptions<Value=any>={
+    name?       : string      // 可选的字段名称    
+    type?       : 'radio' | 'checkbox' | 'select' | 'textarea' | 'input'
+    // 仅当type = radio或checkbox时有效时有效
+    values?     : any[] 
+    toState?    : (value:string,options?:{path:string[] | undefined,part:number})=>Value    // 将数据更新到状态中时调用进行转换
+}
+```
+
+- `name`:  可选的字段名称，用于标识字段。
+- `type`:  控件类型，支持`radio`、`checkbox`、`select`、`textarea`、`input`。
+- `values`:  仅当`type = radio`或`checkbox`时有效时有效，用于指定`radio`或`checkbox`的值。
+- `toState`:  用于将`input`值转换为状态值的函数。

docs/guide/form/field/field.md docs/guide/form/field/component.mddocs/guide/form/field/field.md renamed to docs/guide/form/field/component.md

@@ -12,3 +12,6 @@
 - `UseFields`创建的绑定对象，会自动同步状态中的值到表单控件上。
 
 
+##  配置字段
+
+