update

example/src/App.tsx

@@ -2,9 +2,9 @@ import './App.css'
 import { useState } from 'react' 
 import classnames from "classnames"
 // import UseStateDemo from './UseStateDemo'
-import ComputedDemo from './ComputedDemo'
-import NetworkForm from './networkForm'
-import UserForm from './UserForm'
+import ComputedDemo from './computeds/basic'
+import NetworkForm from './forms/network'
+import UserForm from './forms/userform/UserForm'
 import UserFormWithValidate from "./UserFormValidate"
 
 const menuItems=[

example/src/UserInfo.tsx

@@ -5,7 +5,7 @@
 
 import React from "react"
 import { ReactFC } from "./types";
-import store from "./computed"
+import store from "./computeds/basic/computed"
 import {ColorBlock} from "@speedform/demo-components";
 
 const UserInfo:ReactFC<React.PropsWithChildren> = ()=>{   

example/src/computed.ts → example/src/computeds/basic/computed.ts

@@ -1,6 +1,6 @@
 import { createStore,computed, ComputedScopeRef  } from "@speedform/reactive"
 import { delay }  from "flex-tools/async/delay"
-import { getProjects,type Project } from "./api/getProjects";
+import { getProjects,type Project } from "../../api/getProjects";
 
 
 export type MyStateType = {
@@ -40,8 +40,7 @@ export type BookType =  {
   total:number
 }
 
-const storeDefine= {
-    state:{
+const storeDefine= { 
         user:{
             id:'zhangfisher',
             firstName:'zhang',
@@ -80,30 +79,29 @@ const storeDefine= {
         orders:[],
         sales:{
             total:0,
-        }          
-    },
-    actions:{
-        addBook(name:string,author:string,price:number,count:number){
-          return (state:MyStateType)=>state.books.push({
-            name,
-            price,
-            author,
-            count,
-            // @ts-ignore
-            total:(book:any)=>book.price*book.count
-          })
-        },  
-        async addBookAsync(data:{name:string,price:number,author:string,count:number}){
-            await delay(1000)
-            // @ts-ignore
-            data.total =(book:any)=>book.price*book.count
-            // 模拟异步请求
-            return (state:MyStateType)=>state.books.push(data)
+        },
+        actions:{
+            addBook(name:string,author:string,price:number,count:number){
+              return (state:MyStateType)=>state.books.push({
+                name,
+                price,
+                author,
+                count,
+                // @ts-ignore
+                total:(book:any)=>book.price*book.count
+              })
+            },  
+            async addBookAsync(data:{name:string,price:number,author:string,count:number}){
+                await delay(1000)
+                // @ts-ignore
+                data.total =(book:any)=>book.price*book.count
+                // 模拟异步请求
+                return (state:MyStateType)=>state.books.push(data)
+            }
         }
-    }
 }   
 
-const store =  createStore<typeof storeDefine>(storeDefine)  
+const store =  createStore(storeDefine)  
 
 
 

example/src/ComputedDemo.tsx → example/src/computeds/basic/index.tsx

@@ -1,11 +1,11 @@
 import store  from "./computed" 
 import { $  } from "helux" 
-import {ColorBlock,Card, Divider} from "@speedform/demo-components" 
-import { Tips } from "./Tips"
-import { useReactive } from "ahooks"
+import {ColorBlock,Card, Divider,Tips} from "@speedform/demo-components" 
+import { useReactive } from "ahooks" 
 
 function ComputedDemo() {
-  const [state] = store.useState()   
+  const [state] =  store.useState()
+
   const newBook= useReactive({
     name:"新书",
     author:"zhang",
@@ -57,7 +57,7 @@ function ComputedDemo() {
                     (
                         state.user.projects.error? (<tr><td colSpan={2}>加载错误:{state.user.projects.error.message}</td></tr>)
                         : (
-                          state.user.projects && state.user.projects.result.map((project,index)=>{
+                          state.user.projects && state.user.projects.result.map((project:any,index:any)=>{
                                 return <tr key={index}><td>{project.name}</td><td>{project.stars}</td></tr>
                             })
                         )
@@ -79,7 +79,7 @@ function ComputedDemo() {
             </div>
 
             {
-              state.books.map((book,index)=>{
+              state.books.map((book,index:any)=>{
                 return <div key={index} style={{width:'100%',display:'flex',flexDirection:"row"}}>
                   <ColorBlock style={{flexGrow:1}}  value={$(book.name)}/>
                   <ColorBlock style={{width:80}}  value={$(book.author)}/>
@@ -96,8 +96,8 @@ function ComputedDemo() {
                 <input  style={{width:80}} value={newBook.price} onChange={(e)=>newBook.price=Number(e.target.value)}/>
                 <input  style={{width:80}} value={newBook.count} onChange={(e)=>newBook.count=Number(e.target.value)}/>
             </div>
-            <button onClick={()=>store.actions.addBook(newBook.name,newBook.author,newBook.price,newBook.count)}>添加书籍</button>              
-            <button onClick={()=>store.actions.addBookAsync(newBook)}>异步添加书籍</button>              
+            <button onClick={()=>state.actions.addBook(newBook.name,newBook.author,newBook.price,newBook.count)}>添加书籍</button>              
+            <button onClick={()=>state.actions.addBookAsync(newBook)}>异步添加书籍</button>              
           </div>  
         </Card> 
 

example/src/forms/bookOrder/form.tsx

@@ -0,0 +1,103 @@
+
+import { computed} from "@speedform/reactive"
+import { createForm } from "@speedform/core"
+import { Project, getProjects } from "../../api/getProjects"
+import { delay } from "flex-tools/async/delay"
+
+
+
+// type NetworkType={
+//     title:Field<string>
+//     interface:Field<'wifi' | 'ethernet'>    
+//     ip:Field<IP>
+//     gateway:string
+//     dhcp:Field<boolean>
+//     dhcpStart:Field<string>
+//     dhcpEnd:Field<string>
+//     dns:string[]
+//     subnetMask:string
+//     mac:string
+//     wifi:{
+//         ssid:Field<string>
+//         password:Field<string>
+//     }
+// }
+
+
+// 声明表单数据
+const orderForm ={ 
+    title:"订单管理",
+    visible:(orders:any)=>orders.orders.length<10,
+    enable:(orders:any)=>orders.orders.length<10,
+    valid:(orders:any)=>orders.orders.length<10,
+    readonly:(orders:any)=>(orders).orders.length<10,    
+    fields:{
+
+        title:{
+            value:"React-Helux-Form",
+            placeholder:"订单名称",
+            title:"网络名称",
+            validate:(orders:any)=>orders.title.value.length>3
+        },
+        id:{
+            value:"",
+            title:"订单号",
+            select:()=>{
+                return [{value:"wifi",title:"无线网卡"},{value:"ethernet",title:"有线网卡"}]
+            }
+        }, 
+        orders:[
+            {
+                book : {value:"AA"},
+                count: {title:"数量",value:1},
+                prict: {title:"单价",value:12},
+                sum  : {title:"小计",value:12}
+            },            
+            {
+                book : {value:"BB"},
+                count: {title:"数量",value:2},
+                prict: {title:"单价",value:56},
+                sum  : {title:"小计",value:112}
+            },
+        ],  
+        total:{
+            title:"总金额",
+            value:100
+        }     
+    },
+    actions:{
+        addBook:{
+            title:"添加书籍",
+            execute:async (scope:any)=>{
+                console.log(scope)
+            }
+        },
+        submit:{
+            title:"添加订单",
+            visible:(scope:any)=>scope.orders.length<10,
+            enable:(scope:any)=>scope.orders.length<10, 
+            // 提交数据
+            execute:async (scope:any)=>{
+                await delay(1000)
+                await fetch(scope)
+            }
+        }
+    }
+} 
+
+
+
+const BookOrders = createForm(orderForm,{
+    debug:true    
+})
+
+
+BookOrders.actions
+
+
+
+BookOrders.fields.orders[0]!.book.value
+
+// @ts-ignore
+globalThis.BookOrders = BookOrders
+export default BookOrders

example/src/bookOrderDemo.tsx → example/src/forms/bookOrder/index.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from "react";
-import Network from './forms/network';
+import Network from '../network';
 import classnames from 'classnames';
 import { Field,JsonViewer,Card } from "@speedform/demo-components";