@fairys/valtio-form-basic 0.0.8 → 0.0.10

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'];
     /**表单隐藏状态*/
@@ -54,7 +55,7 @@ export declare function useFairysValtioForm<T extends MObject<T> = object>(props
     boxShadow?: boolean;
     lastItemBordered?: boolean;
     colCount?: number;
-    errorLayout?: "left-bottom" | "right-bottom" | "top-right" | "top-left";
+    errorLayout?: "bottom-left" | "bottom-right" | "top-right" | "top-left" | "left-border-top" | "right-border-top";
     labelMode?: "left" | "top" | "between";
     formItemClassName?: string;
     formItemStyle?: React.CSSProperties;
@@ -62,5 +63,9 @@ 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;
+    isInvalidTextRed?: 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;
     /**传递组件字段*/
@@ -26,9 +38,9 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     bodyStyle?: React.CSSProperties;
     children?: React.ReactNode;
     /**规则校验失败错误提示位置*/
-    errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+    errorLayout?: FairysValtioFormLayoutContextOptions['errorLayout'];
     /**label显示模式*/
-    labelMode?: 'left' | 'top' | 'between';
+    labelMode?: FairysValtioFormLayoutContextOptions['labelMode'];
     /**额外内容*/
     extra?: React.ReactNode;
     /**底部提示内容*/
@@ -48,9 +60,19 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     /**是否显示冒号*/
     showColon?: boolean;
     /**底部显示边框*/
-    borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+    itemBorderType?: FairysValtioFormLayoutContextOptions['itemBorderType'];
+    /**边框颜色*/
+    itemBorderColor?: React.CSSProperties['borderColor'];
+    /**是否校验失败时显示红色边框*/
+    isInvalidBorderRed?: boolean;
+    /**是否校验失败时显示红色文本*/
+    isInvalidTextRed?: boolean;
     /**输入框属性*/
     attrs?: any;
+    /**是否拼接父级字段名*/
+    isJoinParentField?: boolean;
+    /**校验规则*/
+    rules?: RuleItem[];
 }
 /**
  * 处理表单表单项属性
@@ -59,7 +81,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 +90,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 +105,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 +122,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 +182,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,12 +1,14 @@
-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_errorLayout = layoutAttrs.errorLayout || 'right-bottom';
+    const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
+    const parent_errorLayout = layoutAttrs.errorLayout || 'bottom-right';
     const parent_formItemClassName = layoutAttrs.formItemClassName;
     const parent_formItemLabelClassName = layoutAttrs.formItemLabelClassName;
     const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
@@ -14,20 +16,36 @@ 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_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
+    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, isInvalidTextRed = parent_isInvalidTextRed, 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];
+    const _formItemRules = formInstance.rules?.[_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 = {
@@ -39,10 +57,12 @@ function useFairysValtioFormItemAttrs(props) {
     const isRequired = useMemo(()=>{
         if (_isRequired) return _isRequired;
         if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
+        if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
         return false;
     }, [
         rules,
-        formInstance
+        formInstance,
+        _formItemRules
     ]);
     const isInvalid = useMemo(()=>{
         if (Array.isArray(error) && error.length) return true;
@@ -50,16 +70,21 @@ 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,
+    const item_cls = useMemo(()=>clsx('fairys-valtio-form-item fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__p-_zkh1_4px_zhk2_ fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all', {
+            'fairys-valtio-form-item-invalid': isInvalid,
+            'fairys-valtio-form-item-invalid-text-red': isInvalid && isInvalidTextRed,
+            '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', {
+    const itemContainer_cls = useMemo(()=>clsx('fairys-valtio-form-item-container fairystaroform__transition-all fairystaroform__duration-300 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,
             'fairystaroform__flex-col fairystaroform__gap-_zkh1_4px_zhk2_': 'top' === labelMode,
             'fairystaroform__flex-row fairystaroform__gap-_zkh1_8px_zhk2_': 'left' === labelMode
@@ -67,7 +92,7 @@ function useFairysValtioFormItemAttrs(props) {
         labelClassName,
         labelMode
     ]);
-    const itemLabel_cls = useMemo(()=>clsx('fairys-valtio-form-item-label fairystaroform__text-gray-800 fairystaroform__flex fairystaroform__items-center fairystaroform__relative fairystaroform__box-border', {
+    const itemLabel_cls = useMemo(()=>clsx('fairys-valtio-form-item-label fairystaroform__transition-all fairystaroform__duration-300  fairystaroform__text-gray-800 fairystaroform__flex fairystaroform__items-center fairystaroform__relative fairystaroform__box-border', {
             'fairystaroform__justify-start': 'left' !== labelMode,
             'fairystaroform__justify-end': 'left' === labelMode,
             required: isRequired,
@@ -79,30 +104,35 @@ function useFairysValtioFormItemAttrs(props) {
         isRequired,
         showColon
     ]);
-    const itemBody_cls = useMemo(()=>clsx('fairys-valtio-form-item-body fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border', {
+    const itemBody_cls = useMemo(()=>clsx('fairys-valtio-form-item-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border', {
             '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', {
+    const itemInput_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-input fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__min-h-_zkh1_32px_zhk2_ fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-1 fairystaroform__box-border', {
             'fairystaroform__justify-end fairystaroform__text-right': 'between' === labelMode,
             'fairystaroform__justify-start fairystaroform__text-left fairystaroform__items-center': 'between' !== labelMode
         }), [
         labelMode
     ]);
-    const itemExtra_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-extra fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center'), []);
-    const itemHelp_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-help fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__w-full fairystaroform__box-border'), []);
-    const itemError_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-error fairystaroform__px-_zkh1_4px_zhk2_ fairystaroform__w-full fairystaroform__flex fairystaroform__flex-row fairystaroform__box-border fairystaroform__text-red fairystaroform__absolute fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__z-10', {
-            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'left-bottom' === errorLayout,
-            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'right-bottom' === errorLayout,
-            'fairystaroform__top-_zkh1_-14px_zhk2_  fairystaroform__right-0 fairystaroform__justify-end': 'top-right' === errorLayout,
-            'fairystaroform__top-_zkh1_-14px_zhk2_  fairystaroform__left-0 fairystaroform__justify-start': 'top-left' === errorLayout
+    const itemExtra_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-extra fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center'), []);
+    const itemHelp_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-help fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__w-full fairystaroform__box-border'), []);
+    const itemError_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-error fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__w-full fairystaroform__flex fairystaroform__flex-row fairystaroform__box-border fairystaroform__text-red fairystaroform__absolute fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__z-10', {
+            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'bottom-left' === errorLayout,
+            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'bottom-right' === errorLayout,
+            'fairystaroform__top-_zkh1_-4px_zhk2_  fairystaroform__right-0 fairystaroform__justify-end': 'top-right' === errorLayout,
+            'fairystaroform__top-_zkh1_-4px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'top-left' === errorLayout,
+            'fairystaroform__left-0  fairystaroform__bottom-_zkh1_-2px_zhk2_ fairystaroform__justify-start': 'left-border-top' === errorLayout,
+            'fairystaroform__right-0  fairystaroform__bottom-_zkh1_-2px_zhk2_ fairystaroform__justify-end': 'right-border-top' === errorLayout
         }), [
         errorLayout
     ]);
@@ -122,7 +152,7 @@ function useFairysValtioFormItemAttrs(props) {
     return {
         value,
         isInvalid,
-        borderedType,
+        itemBorderType,
         onValueChange,
         colSpan,
         rowSpan,
@@ -134,8 +164,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 +186,9 @@ function useFairysValtioFormItemAttrs(props) {
         },
         itemBodyClassName: itemBody_cls,
         itemBodyStyle: {
+            ...itemBorderColor && 'body' === itemBorderType ? {
+                borderBottomColor: itemBorderColor
+            } : {},
             ...parent_formItemBodyStyle || {},
             ...bodyStyle || {}
         },
@@ -160,4 +201,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,13 +49,25 @@ 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 列字段数组(可选)
+    /**由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)*/
+    mountRules: Record<PropertyKey, RuleItem[]>;
+    /**移除表单项挂载规则*/
+    removeRules: (name: PropertyKey) => void;
+    /**表单项规则*/
+    rules: Record<PropertyKey, RuleItem[]>;
+    /**表单项名称到路径映射*/
+    nameToPaths: Record<PropertyKey, PropertyKey[]>;
+    /**验证表单项规则
+     * @param fields 要验证的字段(可选)
      * @param isReturn 是否返回验证结果(可选)
      */
     validate: (fields?: PropertyKey[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
+    /**
+     * 验证某些前缀的字段
+     * @param prefix 前缀字段数组
+     * @param isReturn 是否返回验证结果(可选)
+     */
+    validatePrefixFields: (prefix: string[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
 }
 /**声明实例*/
 export declare function useFairysValtioFormInstance<T extends MObject<T> = object>(instance?: FairysValtioFormInstance<T>): FairysValtioFormInstance<T>;