@fairys/valtio-form-basic 0.0.8 → 0.0.9

package/esm/form/form.d.ts

@@ -2,13 +2,14 @@ import { MObject } from '../interface';
 import { FairysValtioFormInstance } from './instance';
 import { type ReactNode } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
+import { RuleItem } from 'async-validator';
 export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
     /**表单实例*/
     form?: FairysValtioFormInstance<T>;
     /**子元素*/
     children: ReactNode;
     /**表单项规则*/
-    rules?: FairysValtioFormInstance<T>['rules'];
+    rules?: Record<PropertyKey, RuleItem[]>;
     /**表单初始值*/
     formData?: FairysValtioFormInstance<T>['state'];
     /**表单隐藏状态*/
@@ -62,5 +63,8 @@ export declare function useFairysValtioForm<T extends MObject<T> = object>(props
     formItemLabelStyle?: React.CSSProperties;
     formItemBodyClassName?: string;
     formItemBodyStyle?: React.CSSProperties;
-    borderedType?: "bottom" | "body";
+    itemBorderType?: "bottom" | "body";
+    itemBorderColor?: React.CSSProperties["borderColor"];
+    isInvalidBorderRed?: boolean;
+    showColon?: boolean;
 };

package/esm/form/form.item.d.ts

@@ -3,9 +3,21 @@ import { MObject } from '../interface';
 import React from 'react';
 import { FairysValtioFormInstance } from './instance';
 import { FairysValtioFormLayoutContextOptions } from './layout';
+import { FairysValtioFormParentAttrs } from './hooks';
+import { RuleItem } from 'async-validator';
 export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
-    /**表单项名称*/
-    name: string;
+    /**
+     * 表单项名称 ，字段需要和存储的字段路径一致
+     *
+     * @example
+     * 路径中的值为 number 类型时，会创建一个空数组。路径中的值为 string 类型时，会创建一个空对象。最后一个直接赋值
+     *
+     * 默认："name"
+     * 嵌套字段："name.a.doc" ===> { name: { a: { doc: undefined } } }
+     * 嵌套字段："name[1].a.doc" ===> { name: [{}, { a: { doc: undefined } }] }
+     * 嵌套字段："name.a[2].doc" ===> { name: { a: [{}, {}, { doc: undefined }] } }
+     */
+    name?: string;
     /**表单项标签*/
     label?: string;
     /**传递组件字段*/
@@ -48,9 +60,17 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     /**是否显示冒号*/
     showColon?: boolean;
     /**底部显示边框*/
-    borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+    itemBorderType?: FairysValtioFormLayoutContextOptions['itemBorderType'];
+    /**边框颜色*/
+    itemBorderColor?: React.CSSProperties['borderColor'];
+    /**是否校验失败时显示红色边框*/
+    isInvalidBorderRed?: boolean;
     /**输入框属性*/
     attrs?: any;
+    /**是否拼接父级字段名*/
+    isJoinParentField?: boolean;
+    /**校验规则*/
+    rules?: RuleItem[];
 }
 /**
  * 处理表单表单项属性
@@ -59,7 +79,7 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
  *
  * ```tsx
 import { Fragment } from 'react'
-import { useFairysValtioFormItemAttrs } from "@fairys/valtio-form"
+import { useFairysValtioFormItemAttrs , FairysValtioFormParentAttrsContext } from "@fairys/valtio-form"
 import type { FairysValtioFormItemAttrsProps } from "@fairys/valtio-form"
 export interface FormItemProps extends FairysValtioFormItemAttrsProps{}
 
@@ -68,10 +88,11 @@ export const FormItem = (props: FormItemProps) => {
   const {
     itemClassName, itemStyle, containerClassName, itemLabelClassName, itemLabelStyle,
     itemBodyClassName, itemBodyStyle, itemInputClassName, itemExtraClassName, errorClassName, helpClassName,
-    isInvalid, borderedType, children, error
+    isInvalid, itemBorderType, children, error,formAttrsNameInstance
   } = useFairysValtioFormItemAttrs(props)
 
   return (
+   <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
     <View className={itemClassName} style={itemStyle}>
       <View className={containerClassName}>
         <View className={itemLabelClassName} style={itemLabelStyle}>
@@ -82,12 +103,13 @@ export const FormItem = (props: FormItemProps) => {
             {children}
           </View>
           {extra ? <View className={itemExtraClassName}>{extra}</View> : <Fragment />}
-          {borderedType === 'body' && isInvalid ? <View className={errorClassName}>{error}</View> : <Fragment />}
+          {itemBorderType === 'body' && isInvalid ? <View className={errorClassName}>{error}</View> : <Fragment />}
         </View>
       </View>
       {helpText ? <View className={helpClassName}>{helpText}</View> : <Fragment />}
-      {isInvalid && borderedType !== 'body' ? <View className={errorClassName}>{error}</View> : <Fragment />}
+      {isInvalid && itemBorderType !== 'body' ? <View className={errorClassName}>{error}</View> : <Fragment />}
     </View>
+   </FairysValtioFormParentAttrsContext.Provider>
   );
 }
  * ```
@@ -98,31 +120,41 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
     /**表单项值*/
     value?: any;
     /**是否校验错误*/
-    isInvalid?: boolean;
+    isInvalid: boolean;
     /**边框类型*/
-    borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+    itemBorderType: FairysValtioFormLayoutContextOptions['itemBorderType'];
     /**值改变事件*/
-    onValueChange?: (event: any) => void;
+    onValueChange: (event: any) => void;
     /**当前表单项占据列数*/
-    colSpan?: number;
+    colSpan: number;
     /**当前表单项占据行数*/
-    rowSpan?: number;
+    rowSpan: number;
     /**列数*/
-    colCount?: number;
+    colCount: number;
     /**标签显示模式*/
-    labelMode?: FairysValtioFormLayoutContextOptions['labelMode'];
+    labelMode: FairysValtioFormLayoutContextOptions['labelMode'];
     /**错误提示位置*/
-    errorLayout?: FairysValtioFormLayoutContextOptions['errorLayout'];
+    errorLayout: FairysValtioFormLayoutContextOptions['errorLayout'];
     /**是否必填*/
-    isRequired?: boolean;
+    isRequired: boolean;
     /**表单状态*/
-    state?: T;
+    state: T;
     /**错误状态*/
-    errorState?: Record<PropertyKey, string[]>;
+    errorState: Record<PropertyKey, string[]>;
     /**表单实例*/
-    formInstance?: FairysValtioFormInstance<T>;
+    formInstance: FairysValtioFormInstance<T>;
     /**错误信息*/
     error?: string[];
+    /**拼接父级字段名后得到的表单项名称*/
+    _name?: string;
+    /**表单项名称*/
+    name?: string;
+    /**表单项路径*/
+    paths?: (string | number)[];
+    /**父级字段名*/
+    parentName?: string;
+    /**表单属性名实例*/
+    formAttrsNameInstance: FairysValtioFormParentAttrs;
     /**表单项类名*/
     itemClassName: string;
     /**表单项样式*/
@@ -148,3 +180,36 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
     /**子元素*/
     children?: React.ReactNode;
 }
+/**
+ * 没有样式的表单项属性，仅返回基础输入组件参数
+ *
+ * @example
+ *
+ *```tsx
+import { Fragment } from 'react'
+import { useFairysValtioFormItemAttrs, FairysValtioFormParentAttrsContext } from "@fairys/valtio-form"
+import type { FairysValtioFormItemAttrsProps } from "@fairys/valtio-form"
+export interface FormItemProps extends FairysValtioFormItemAttrsProps{}
+
+export const FormItem = (props: FormItemProps) => {
+  const { children , formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props)
+  return <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+    {children}
+  </FairysValtioFormParentAttrsContext.Provider>
+}
+ * ```
+*/
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): {
+    value: unknown;
+    error: string[];
+    onValueChange: (event: any) => void;
+    state: T;
+    errorState: Record<PropertyKey, string[]>;
+    formInstance: FairysValtioFormInstance<T>;
+    _name: string;
+    name: string;
+    paths: (number | symbol)[] | (string | number)[];
+    parentName: string;
+    formAttrsNameInstance: FairysValtioFormParentAttrs;
+    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
+};

package/esm/form/form.item.js

@@ -1,11 +1,13 @@
-import react, { useMemo } from "react";
+import react, { useEffect, useMemo } from "react";
 import clsx from "clsx";
 import { useFairysValtioFormInstanceContextState } from "./instance/index.js";
 import { useFairysValtioFormLayoutContext } from "./layout.js";
+import { useFairysValtioFormAttrsName } from "./hooks/index.js";
+import { get } from "./utils/index.js";
 function useFairysValtioFormItemAttrs(props) {
     const [layoutAttrs] = useFairysValtioFormLayoutContext();
     const colCount = layoutAttrs.colCount || 1;
-    const parent_borderedType = layoutAttrs.borderedType || 'bottom';
+    const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
     const parent_errorLayout = layoutAttrs.errorLayout || 'right-bottom';
     const parent_formItemClassName = layoutAttrs.formItemClassName;
     const parent_formItemLabelClassName = layoutAttrs.formItemLabelClassName;
@@ -14,20 +16,34 @@ function useFairysValtioFormItemAttrs(props) {
     const parent_formItemBodyClassName = layoutAttrs.formItemBodyClassName;
     const parent_formItemBodyStyle = layoutAttrs.formItemBodyStyle;
     const parent_labelMode = layoutAttrs.labelMode || 'between';
-    const { name, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, borderedType = parent_borderedType, attrs = {}, showColon = false } = props;
+    const parent_itemBorderColor = layoutAttrs.itemBorderColor;
+    const parent_isInvalidBorderRed = layoutAttrs.isInvalidBorderRed;
+    const parent_showColon = layoutAttrs.showColon;
+    const { name, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isJoinParentField = true, rules } = props;
+    const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
+        name,
+        isJoinParentField
+    });
     const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
-    const rules = formInstance.rules?.[name];
-    const value = state[name];
-    const error = errorState[name];
+    const value = useMemo(()=>get(state, paths), [
+        state,
+        paths
+    ]);
+    const error = errorState[_name];
+    formInstance.nameToPaths[_name] = paths;
+    if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+    useEffect(()=>()=>{
+            formInstance.removeRules(_name);
+        }, [
+        _name
+    ]);
     const onValueChange = (event)=>{
         let value = event;
         const target = event?.detail || event?.target;
         if ('function' == typeof getValueFromEvent) value = getValueFromEvent(event, formInstance);
         else if (event && target && 'object' == typeof target && valuePropName in target) value = target.valuePropName;
         if ('function' == typeof formatValue) value = formatValue(value, formInstance, event);
-        formInstance.updated({
-            [name]: value
-        });
+        formInstance.updatedValueByPaths(_name, value);
         if ('function' == typeof onAfterUpdate) onAfterUpdate(value, formInstance, event);
     };
     const baseControl = {
@@ -51,13 +67,17 @@ function useFairysValtioFormItemAttrs(props) {
         error
     ]);
     const item_cls = useMemo(()=>clsx('fairys-valtio-form-item fairystaroform__p-_zkh1_4px_zhk2_ fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all', {
-            'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200': 'bottom' === borderedType,
+            'fairys-valtio-form-item-invalid': isInvalid,
+            'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && 'bottom' === itemBorderType,
+            'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200': 'bottom' === itemBorderType,
             [labelMode]: labelMode
-        }, className, parent_formItemClassName), [
+        }, parent_formItemClassName, className), [
         className,
         parent_formItemClassName,
         labelMode,
-        borderedType
+        itemBorderType,
+        isInvalid,
+        isInvalidBorderRed
     ]);
     const itemContainer_cls = useMemo(()=>clsx('fairys-valtio-form-item-container fairystaroform__flex-1 fairystaroform__h-full fairystaroform__flex fairystaroform__box-border', {
             'fairystaroform__flex-row fairystaroform__items-center fairystaroform__justify-between fairystaroform__gap-_zkh1_8px_zhk2_': 'between' === labelMode,
@@ -83,12 +103,15 @@ function useFairysValtioFormItemAttrs(props) {
             'fairystaroform__flex-row fairystaroform__justify-start': 'left' === labelMode,
             'fairystaroform__flex-row fairystaroform__justify-end': 'between' === labelMode || 'top' === labelMode,
             'fairystaroform__flex-row': 'top' === labelMode,
-            'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ': 'body' === borderedType
-        }, bodyClassName, parent_formItemBodyClassName), [
+            'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ': 'body' === itemBorderType,
+            'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && 'body' === itemBorderType
+        }, parent_formItemBodyClassName, bodyClassName), [
         bodyClassName,
         labelMode,
-        borderedType,
-        parent_formItemBodyClassName
+        itemBorderType,
+        parent_formItemBodyClassName,
+        isInvalid,
+        isInvalidBorderRed
     ]);
     const itemInput_cls = useMemo(()=>clsx('fairys-valtio-form-item-body fairystaroform__flex fairystaroform__flex-row fairystaroform__flex-1 fairystaroform__box-border', {
             'fairystaroform__justify-end fairystaroform__text-right': 'between' === labelMode,
@@ -122,7 +145,7 @@ function useFairysValtioFormItemAttrs(props) {
     return {
         value,
         isInvalid,
-        borderedType,
+        itemBorderType,
         onValueChange,
         colSpan,
         rowSpan,
@@ -134,8 +157,16 @@ function useFairysValtioFormItemAttrs(props) {
         errorState,
         formInstance,
         error,
+        _name,
+        name,
+        paths,
+        parentName,
+        formAttrsNameInstance,
         itemClassName: item_cls,
         itemStyle: {
+            ...itemBorderColor && 'bottom' === itemBorderType ? {
+                borderBottomColor: itemBorderColor
+            } : {},
             ...parent_formItemStyle || {},
             ...styleBase,
             ...style || {}
@@ -148,6 +179,9 @@ function useFairysValtioFormItemAttrs(props) {
         },
         itemBodyClassName: itemBody_cls,
         itemBodyStyle: {
+            ...itemBorderColor && 'body' === itemBorderType ? {
+                borderBottomColor: itemBorderColor
+            } : {},
             ...parent_formItemBodyStyle || {},
             ...bodyStyle || {}
         },
@@ -160,4 +194,55 @@ function useFairysValtioFormItemAttrs(props) {
         }) : children
     };
 }
-export { useFairysValtioFormItemAttrs };
+function useFairysValtioFormItemNoStyleAttrs(props) {
+    const { name, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules } = props;
+    const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
+    const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
+        name,
+        isJoinParentField
+    });
+    const value = useMemo(()=>get(state, paths), [
+        state,
+        paths
+    ]);
+    const error = errorState[_name];
+    formInstance.nameToPaths[_name] = paths;
+    if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+    useEffect(()=>()=>{
+            formInstance.removeRules(_name);
+        }, [
+        _name
+    ]);
+    const onValueChange = (event)=>{
+        let value = event;
+        const target = event?.detail || event?.target;
+        if ('function' == typeof getValueFromEvent) value = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && valuePropName in target) value = target.valuePropName;
+        if ('function' == typeof formatValue) value = formatValue(value, formInstance, event);
+        formInstance.updatedValueByPaths(_name, value);
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(value, formInstance, event);
+    };
+    const baseControl = {
+        ...attrs,
+        name,
+        [valuePropName]: value,
+        [trigger]: onValueChange
+    };
+    return {
+        value,
+        error,
+        onValueChange,
+        state,
+        errorState,
+        formInstance,
+        _name,
+        name,
+        paths,
+        parentName,
+        formAttrsNameInstance,
+        children: /*#__PURE__*/ react.isValidElement(children) ? /*#__PURE__*/ react.cloneElement(children, {
+            ...baseControl
+        }) : children
+    };
+}
+export { useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs };

package/esm/form/hooks/index.d.ts

@@ -0,0 +1,34 @@
+export interface FairysValtioFormParentAttrsState {
+    name?: string;
+}
+/***
+ * 父级属性
+ */
+export declare class FairysValtioFormParentAttrs {
+    state: FairysValtioFormParentAttrsState;
+    updated: (attrs: Record<string, any>) => void;
+    /***更新父级字段值*/
+    updatedName: (name?: string, parentName?: string) => void;
+}
+/**初始化父级属性*/
+export declare const useFairysValtioFormParentAttrs: (instance?: FairysValtioFormParentAttrs) => FairysValtioFormParentAttrs;
+/***父级属性上下文*/
+export declare const FairysValtioFormParentAttrsContext: import("react").Context<FairysValtioFormParentAttrs>;
+/***获取父级属性实例*/
+export declare const useFairysValtioFormParentAttrsContext: () => FairysValtioFormParentAttrs;
+/***获取父级属性状态*/
+export declare const useFairysValtioFormParentAttrsState: () => readonly [{
+    readonly name?: string;
+}, FairysValtioFormParentAttrs];
+export interface FairysValtioFormAttrsNameOptions {
+    name?: string;
+    /**是否拼接父级字段名*/
+    isJoinParentField?: boolean;
+}
+/***获取属性名和路径*/
+export declare const useFairysValtioFormAttrsName: (options?: FairysValtioFormAttrsNameOptions) => {
+    formAttrsNameInstance: FairysValtioFormParentAttrs;
+    parentName: string;
+    name: string;
+    paths: (number | symbol)[] | (string | number)[];
+};

package/esm/form/hooks/index.js

@@ -0,0 +1,57 @@
+import { createContext, useContext, useMemo, useRef } from "react";
+import { proxy, useSnapshot } from "valtio";
+import { formateName, formatePath } from "../utils/index.js";
+class FairysValtioFormParentAttrs {
+    state = proxy({
+        name: ''
+    });
+    updated = (attrs)=>{
+        this.state = {
+            ...this.state,
+            ...attrs
+        };
+    };
+    updatedName = (name, parentName)=>{
+        this.state.name = formateName(name, parentName);
+    };
+}
+const useFairysValtioFormParentAttrs = (instance)=>{
+    const parentAttrs = useRef();
+    if (!parentAttrs.current) if (instance) parentAttrs.current = instance;
+    else parentAttrs.current = new FairysValtioFormParentAttrs();
+    return parentAttrs.current;
+};
+const FairysValtioFormParentAttrsContext = /*#__PURE__*/ createContext(new FairysValtioFormParentAttrs());
+const useFairysValtioFormParentAttrsContext = ()=>useContext(FairysValtioFormParentAttrsContext);
+const useFairysValtioFormParentAttrsState = ()=>{
+    const instance = useFairysValtioFormParentAttrsContext();
+    const state = useSnapshot(instance.state);
+    return [
+        state,
+        instance
+    ];
+};
+const useFairysValtioFormAttrsName = (options = {})=>{
+    const { name, isJoinParentField = true } = options;
+    const formAttrsNameInstance = useFairysValtioFormParentAttrs();
+    const [state] = useFairysValtioFormParentAttrsState();
+    const parentName = state.name;
+    const _name = useMemo(()=>isJoinParentField ? formateName(name, parentName) : name, [
+        name,
+        parentName,
+        isJoinParentField
+    ]);
+    const _paths = useMemo(()=>formatePath(_name), [
+        _name
+    ]);
+    useMemo(()=>formAttrsNameInstance.updatedName(_name), [
+        _name
+    ]);
+    return {
+        formAttrsNameInstance,
+        parentName,
+        name: _name,
+        paths: _paths
+    };
+};
+export { FairysValtioFormParentAttrs, FairysValtioFormParentAttrsContext, useFairysValtioFormAttrsName, useFairysValtioFormParentAttrs, useFairysValtioFormParentAttrsContext, useFairysValtioFormParentAttrsState };

package/esm/form/instance/index.d.ts

@@ -22,6 +22,11 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
      * @param isValidate 是否验证(可选)
      */
     updated: <M = T>(state: Partial<M>, isValidate?: boolean) => void;
+    /**根据路径设置值
+     * @param path 值路径
+     * @param value 值
+     */
+    updatedValueByPaths: (path: PropertyKey, value: any) => void;
     /**
      * 更新行数据的隐藏信息
      * @param objectHideInfo 行数据隐藏信息对象
@@ -44,12 +49,15 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
      * 清理所有数据
      */
     clear: () => void;
-    /**列规则 */
-    rules: Record<PropertyKey, ((formData: T, instance: FairysValtioFormInstance<T>) => RuleItem[] | Promise<RuleItem[]>) | RuleItem[]>;
-    /**规则验证
-     * @param fields 列字段数组(可选)
-     * @param isReturn 是否返回验证结果(可选)
-     */
+    /**由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)*/
+    mountRules: Record<PropertyKey, RuleItem[]>;
+    /**移除表单项挂载规则*/
+    removeRules: (name: PropertyKey) => void;
+    /**表单项规则*/
+    rules: Record<PropertyKey, RuleItem[]>;
+    /**表单项名称到路径映射*/
+    nameToPaths: Record<PropertyKey, PropertyKey[]>;
+    /**验证表单项规则*/
     validate: (fields?: PropertyKey[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
 }
 /**声明实例*/

package/esm/form/instance/index.js

@@ -2,6 +2,7 @@ import { createContext, useContext, useRef } from "react";
 import { proxy, ref as external_valtio_ref, snapshot, useSnapshot } from "valtio";
 import async_validator from "async-validator";
 import { copy } from "fast-copy";
+import { formatePath, get, set } from "../utils/index.js";
 class FairysValtioFormInstance {
     state = proxy({});
     errorState = proxy({});
@@ -21,6 +22,12 @@ class FairysValtioFormInstance {
         }
         if (isValidate) this.validate(keys, false);
     };
+    updatedValueByPaths = (path, value)=>{
+        set(this.state, formatePath(path), value);
+        this.validate([
+            path
+        ], false);
+    };
     updatedHideInfo = (objectHideInfo)=>{
         const keys = Object.keys(objectHideInfo);
         for(let index = 0; index < keys.length; index++){
@@ -60,36 +67,49 @@ class FairysValtioFormInstance {
         this.errorState = proxy({});
         this.hideState = proxy({});
     };
+    mountRules = {};
+    removeRules = (name)=>{
+        delete this.mountRules[name];
+    };
     rules = {};
+    nameToPaths = {};
     validate = async (fields, isReturn = true)=>{
-        let _fields = fields;
+        const rules = {
+            ...this.rules,
+            ...this.mountRules
+        };
         const _formData = snapshot(this.state);
-        if (!this.rules) return Promise.resolve({
-            ..._formData
-        });
-        const rules = {};
-        let isNeedValidate = false;
-        if (!fields || Array.isArray(fields) && 0 === fields.length) _fields = Object.keys(this.rules);
-        for(let index = 0; index < _fields.length; index++){
-            isNeedValidate = true;
-            const element = _fields[index];
-            const rule = this.rules[element];
-            if ('function' == typeof rule) {
-                const _rules = await rule(_formData, this);
-                rules[element] = _rules;
-            } else if (Array.isArray(rule)) rules[element] = rule;
-        }
-        if (!isNeedValidate) {
-            console.warn('no rules to validate');
-            return Promise.resolve({
-                ..._formData
-            });
+        const _values = {};
+        let _fields = Object.keys(rules);
+        let _lastRules = {};
+        let isPropsFields = false;
+        if (Array.isArray(fields) && fields.length) {
+            _fields = [
+                ...fields
+            ];
+            isPropsFields = true;
+            for(let index = 0; index < fields.length; index++){
+                const field = fields[index];
+                const paths = this.nameToPaths[field];
+                _lastRules[field] = rules[field];
+                _values[field] = get(_formData, paths ? paths : formatePath(field));
+            }
+        } else {
+            isPropsFields = false;
+            _lastRules = {
+                ...rules
+            };
+            for(let index = 0; index < _fields.length; index++){
+                const field = _fields[index];
+                const paths = this.nameToPaths[field];
+                _values[field] = get(_formData, paths);
+            }
         }
         return new Promise((resolve, reject)=>{
             new async_validator({
                 ...rules
             }).validate({
-                ..._formData
+                ..._values
             }, (errors, fields)=>{
                 for(let index = 0; index < _fields.length; index++){
                     const field = _fields[index];
@@ -101,7 +121,11 @@ class FairysValtioFormInstance {
                     errors,
                     fields
                 });
-                else resolve(fields);
+                else isPropsFields ? resolve({
+                    ...fields
+                }) : resolve({
+                    ..._formData
+                });
             });
         });
     };

package/esm/form/layout.d.ts

@@ -23,7 +23,13 @@ export interface FairysValtioFormLayoutContextOptions {
     /**
      * 底部边框类型
      */
-    borderedType?: 'bottom' | 'body';
+    itemBorderType?: 'bottom' | 'body';
+    /**边框颜色*/
+    itemBorderColor?: React.CSSProperties['borderColor'];
+    /**是否校验失败时显示红色边框*/
+    isInvalidBorderRed?: boolean;
+    /**是否显示冒号*/
+    showColon?: boolean;
 }
 export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayoutContextOptions {
     /**
@@ -2645,7 +2651,10 @@ export declare const useFairysValtioFormLayoutContext: () => readonly [{
         readonly colorRendering?: import("csstype").Property.ColorRendering | undefined;
         readonly glyphOrientationVertical?: import("csstype").Property.GlyphOrientationVertical | undefined;
     };
-    readonly borderedType?: "bottom" | "body";
+    readonly itemBorderType?: "bottom" | "body";
+    readonly itemBorderColor?: React.CSSProperties["borderColor"];
+    readonly isInvalidBorderRed?: boolean;
+    readonly showColon?: boolean;
 }, FairysValtioFormLayoutInstance];
 /**
  * 布局属性处理
@@ -2706,7 +2715,7 @@ export interface FairysValtioFormLayoutAttrsReturn {
     /**
      * 底部边框类型
      */
-    borderedType: string;
+    itemBorderType: string;
     /**表单布局实例*/
     formLayoutInstance: FairysValtioFormLayoutInstance;
     /**布局ClassName*/