@fairys/valtio-form-basic 0.0.8 → 0.0.9

package/esm/form/layout.js

@@ -6,7 +6,7 @@ class FairysValtioFormLayoutInstance {
         colCount: 1,
         errorLayout: 'right-bottom',
         labelMode: 'between',
-        borderedType: 'bottom'
+        itemBorderType: 'bottom'
     });
     updated = (options = {})=>{
         const keys = Object.keys(options);
@@ -43,8 +43,11 @@ function useFairysValtioFormLayoutAttrs(props) {
     const parent_formItemLabelStyle = state.formItemLabelStyle;
     const parent_formItemBodyClassName = state.formItemBodyClassName;
     const parent_formItemBodyStyle = state.formItemBodyStyle;
-    const parent_borderedType = state.borderedType || 'bottom';
-    const { colCount = parent_colCount, errorLayout = parent_errorLayout, labelMode = parent_labelMode, formItemClassName = parent_formItemClassName, formItemStyle = parent_formItemStyle, formItemLabelClassName = parent_formItemLabelClassName, formItemLabelStyle = parent_formItemLabelStyle, formItemBodyClassName = parent_formItemBodyClassName, formItemBodyStyle = parent_formItemBodyStyle, borderedType = parent_borderedType, lastItemBordered = true, gap, isAllColSpan = false, className, style, headerClassName, headerStyle, bodyClassName, bodyStyle, bordered, boxShadow } = props;
+    const parent_borderedType = state.itemBorderType || 'bottom';
+    const parent_itemBorderColor = state.itemBorderColor;
+    const parent_isInvalidBorderRed = state.isInvalidBorderRed;
+    const parent_showColon = state.showColon;
+    const { colCount = parent_colCount, errorLayout = parent_errorLayout, labelMode = parent_labelMode, formItemClassName = parent_formItemClassName, formItemStyle = parent_formItemStyle, formItemLabelClassName = parent_formItemLabelClassName, formItemLabelStyle = parent_formItemLabelStyle, formItemBodyClassName = parent_formItemBodyClassName, formItemBodyStyle = parent_formItemBodyStyle, itemBorderType = parent_borderedType, itemBorderColor = parent_itemBorderColor, lastItemBordered = true, isInvalidBorderRed = parent_isInvalidBorderRed, showColon = parent_showColon, gap, isAllColSpan = false, className, style, headerClassName, headerStyle, bodyClassName, bodyStyle, bordered, boxShadow } = props;
     useMemo(()=>formLayoutInstance.updated({
             colCount,
             errorLayout,
@@ -55,7 +58,10 @@ function useFairysValtioFormLayoutAttrs(props) {
             formItemLabelStyle,
             formItemBodyClassName,
             formItemBodyStyle,
-            borderedType
+            itemBorderType,
+            itemBorderColor,
+            isInvalidBorderRed,
+            showColon
         }), [
         colCount,
         errorLayout,
@@ -66,11 +72,14 @@ function useFairysValtioFormLayoutAttrs(props) {
         formItemLabelStyle,
         formItemBodyClassName,
         formItemBodyStyle,
-        borderedType
+        itemBorderType,
+        itemBorderColor,
+        isInvalidBorderRed,
+        showColon
     ]);
-    const layoutCls = useMemo(()=>clsx("fairys-valtio-form-layout fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-md", {
+    const layoutCls = useMemo(()=>clsx("fairys-valtio-form-layout fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-_zkh1_4px_zhk2_", {
             'fairys-valtio-form-layout-all-col-span': isAllColSpan,
-            'fairys-taro-form-valtio-layout-box-shadow': boxShadow,
+            'fairys-valtio-form-layout-box-shadow': boxShadow,
             'fairystaroform__border fairystaroform__border-solid fairystaroform__border-gray-200': bordered,
             'fairys-valtio-form-layout-last-item-no-border': !lastItemBordered
         }, className), [
@@ -107,7 +116,7 @@ function useFairysValtioFormLayoutAttrs(props) {
         colCount,
         errorLayout,
         labelMode,
-        borderedType,
+        itemBorderType,
         formLayoutInstance,
         layoutName: layoutCls,
         layoutStyle: style,

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

@@ -0,0 +1,24 @@
+/***
+ * 设置值
+ * @param object 任意对象
+ * @param paths 值路径
+ * @param nextValue 新值
+ *
+ * @description
+ * 值不存在时，当 paths 路径中的值为 number 类型时，会创建一个空数组。当 paths 路径中的值为 string 类型时，会创建一个空对象。
+ */
+export declare function set<T>(state: any, paths: PropertyKey[], nextValue: T): any;
+/***
+ * 获取值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export declare function get<TDefault = unknown>(value: any, segments: PropertyKey[]): TDefault;
+/***
+ * 格式化路径，将路径中的数组索引转换为数字
+ * @param path 路径
+ * @returns 格式化后的路径
+ */
+export declare function formatePath(path: PropertyKey): (number | symbol)[] | (string | number)[];
+/**格式化属性名*/
+export declare function formateName(name?: string, parentName?: string): string;

package/esm/form/utils/index.js

@@ -0,0 +1,60 @@
+function set(state, paths, nextValue) {
+    const _keys = [
+        ...paths
+    ];
+    let current = state;
+    const length = _keys.length - 1;
+    for(let i = 0; i <= length; i++){
+        const key = _keys[i];
+        const _current = current[key];
+        const nextKey = _keys[i + 1];
+        if (void 0 === _current && 'number' == typeof nextKey) current[key] = [];
+        else if (void 0 === _current && 'string' == typeof nextKey) current[key] = {};
+        if (i === length) current[key] = nextValue;
+        else current = current[key];
+    }
+    return state;
+}
+function get(value, segments) {
+    let current = value;
+    for (const key of segments)current = current?.[key];
+    return current;
+}
+function formatePath(path) {
+    if ('string' != typeof path) return [
+        path
+    ];
+    return path.split(/[\.]/g).reduce((pre, next)=>{
+        if (/\[[0-9]+\]$/.test(next)) {
+            const _next = next.split(/\[/);
+            let _nextValue = [];
+            for(let index = 0; index < _next.length; index++){
+                const element = _next[index];
+                if (/\]$/.test(element)) {
+                    const _v = element.replace(/\]$/, '');
+                    const v = Number.parseInt(_v);
+                    if (_v.length !== `${v}`.length || Number.isNaN(v)) _nextValue.push(_v);
+                    else _nextValue.push(v);
+                } else _nextValue.push(element);
+            }
+            return [
+                ...pre,
+                ..._nextValue
+            ];
+        }
+        return [
+            ...pre,
+            next
+        ];
+    }, []).map((item)=>{
+        if ('string' == typeof item) return item.trim();
+        return item;
+    }).filter((item)=>'' !== item);
+}
+function formateName(name, parentName) {
+    if (parentName && name) return parentName + '.' + name;
+    if (parentName) return parentName;
+    if (name) return name;
+    return '';
+}
+export { formateName, formatePath, get, set };

package/esm/index.d.ts

@@ -1,3 +1,4 @@
+export * from './form/hooks';
 export * from './form/instance';
 export * from './form/layout';
 export * from './form/form';

package/esm/index.js

@@ -1,3 +1,4 @@
+export * from "./form/hooks/index.js";
 export * from "./form/instance/index.js";
 export * from "./form/layout.js";
 export * from "./form/form.js";

package/esm/styles/index.css

@@ -166,8 +166,8 @@
   border-bottom-color: rgb(229 231 235 / var(--un-border-bottom-opacity));
 }
 
-.fairystaroform__rounded-md {
-  border-radius: .375rem;
+.fairystaroform__rounded-_zkh1_4px_zhk2_ {
+  border-radius: 4px;
 }
 
 .fairystaroform__border-solid {
@@ -248,11 +248,11 @@
   display: inline-block;
 }
 
-.fairys-valtio-form-layout.fairys-form-layout-all-col-span {
+.fairys-valtio-form-layout.fairys-valtio-form-layout-all-col-span {
   grid-column: 1 / -1;
 }
 
-.fairys-valtio-form-layout.fairys-form-layout-box-shadow {
+.fairys-valtio-form-layout.fairys-valtio-form-layout-box-shadow {
   box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
 }
 
@@ -260,7 +260,11 @@
   margin-top: 12px;
 }
 
-.fairys-valtio-form-layout-last-item-no-border > .fairys-valtio-form-layout-body > .fairys-valtio-form-item:last-child, .fairys-valtio-form-layout-last-item-no-border > .fairys-valtio-form-layout-body > .fairys-valtio-form-item:last-child > .fairys-valtio-form-item-container > .fairys-valtio-form-item-body {
+.fairys-valtio-form-layout-last-item-no-border > .fairys-valtio-form-layout-body > .fairys-valtio-form-item:last-child:not(.fairys-valtio-form-item-invalid-border-red), .fairys-valtio-form-layout-last-item-no-border > .fairys-valtio-form-layout-body > .fairys-valtio-form-item:last-child > .fairys-valtio-form-item-container > .fairys-valtio-form-item-body:not(.fairys-valtio-form-item-invalid-border-red) {
   border-bottom: 0;
 }
 
+.fairys-valtio-form-item-invalid-border-red {
+  border-bottom-color: red !important;
+}
+

package/lib/index.js

@@ -6,6 +6,9 @@ var __webpack_modules__ = {
     "./form/form": function(module) {
         module.exports = require("./form/form.js");
     },
+    "./form/hooks": function(module) {
+        module.exports = require("./form/hooks/index.js");
+    },
     "./form/instance": function(module) {
         module.exports = require("./form/instance/index.js");
     },
@@ -56,28 +59,34 @@ function __webpack_require__(moduleId) {
 var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
-    var _form_instance__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./form/instance");
+    var _form_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./form/hooks");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _form_hooks__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_hooks__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _form_instance__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./form/instance");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_instance__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_instance__WEBPACK_IMPORTED_MODULE_0__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _form_instance__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_instance__WEBPACK_IMPORTED_MODULE_1__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _form_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./form/layout");
+    var _form_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./form/layout");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_layout__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_layout__WEBPACK_IMPORTED_MODULE_1__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _form_layout__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_layout__WEBPACK_IMPORTED_MODULE_2__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _form_form__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./form/form");
+    var _form_form__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./form/form");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_form__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_form__WEBPACK_IMPORTED_MODULE_2__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _form_form__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_form__WEBPACK_IMPORTED_MODULE_3__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _form_form_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./form/form.item");
+    var _form_form_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("./form/form.item");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _form_form_item__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _form_form_item__WEBPACK_IMPORTED_MODULE_3__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _form_form_item__WEBPACK_IMPORTED_MODULE_4__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _form_form_item__WEBPACK_IMPORTED_MODULE_4__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
 })();

package/package.json

@@ -3,7 +3,7 @@
   "author": "SunLxy <1011771396@qq.com>",
   "description": "使用 valtio 实现的表单基础库, 使其更加便捷，同时支持`PC`、`H5`、`Taro`，同时也更加灵活。",
   "homepage": "https://github.com/autumn-fairy-tales/fairys-taro-react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "lib/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",
@@ -35,4 +35,4 @@
     "@types/react": "~18.2.21",
     "react": "^18.0.0"
   }
-}
+}

package/src/form/form.item.tsx

@@ -1,14 +1,27 @@
 /**表单项*/
 
 import { MObject } from 'interface';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import { useFairysValtioFormInstanceContextState, FairysValtioFormInstance } from './instance';
 import { useFairysValtioFormLayoutContext, FairysValtioFormLayoutContextOptions } from './layout';
+import { FairysValtioFormParentAttrs, useFairysValtioFormAttrsName } from './hooks';
+import { get } from './utils';
+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;
   /**传递组件字段*/
@@ -51,9 +64,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[];
 }
 
 /**
@@ -63,7 +84,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{}
 
@@ -72,10 +93,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}>
@@ -86,12 +108,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>
   );
 }
  * ```
@@ -100,7 +123,7 @@ export const FormItem = (props: FormItemProps) => {
 export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>) {
   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;
@@ -109,6 +132,10 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   const parent_formItemBodyClassName = layoutAttrs.formItemBodyClassName;
   const parent_formItemBodyStyle = layoutAttrs.formItemBodyStyle;
   const parent_labelMode = layoutAttrs.labelMode || 'between';
+  const parent_itemBorderColor = layoutAttrs.itemBorderColor;
+  const parent_isInvalidBorderRed = layoutAttrs.isInvalidBorderRed;
+  const parent_showColon = layoutAttrs.showColon;
+
   const {
     name,
     valuePropName = 'value',
@@ -128,14 +155,34 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     colSpan = 1,
     rowSpan = 1,
     isRequired: _isRequired,
-    borderedType = parent_borderedType,
+    itemBorderType = parent_borderedType,
     attrs = {},
-    showColon = false,
+    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<T>();
-  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(() => {
+    return () => {
+      formInstance.removeRules(_name);
+    };
+  }, [_name]);
 
   const onValueChange = (event: any) => {
     let value = event;
@@ -148,7 +195,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     if (typeof formatValue === 'function') {
       value = formatValue(value, formInstance, event);
     }
-    formInstance.updated({ [name]: value });
+    formInstance.updatedValueByPaths(_name, value);
     if (typeof onAfterUpdate === 'function') {
       onAfterUpdate(value, formInstance, event);
     }
@@ -185,14 +232,16 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     return clsx(
       'fairys-valtio-form-item fairystaroform__p-[4px] fairystaroform__text-[12px] fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all',
       {
+        'fairys-valtio-form-item-invalid': isInvalid,
+        'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && itemBorderType === 'bottom',
         'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200':
-          borderedType === 'bottom',
+          itemBorderType === 'bottom',
         [labelMode]: labelMode,
       },
-      className,
       parent_formItemClassName,
+      className,
     );
-  }, [className, parent_formItemClassName, labelMode, borderedType]);
+  }, [className, parent_formItemClassName, labelMode, itemBorderType, isInvalid, isInvalidBorderRed]);
 
   /**表单项容器类名*/
   const itemContainer_cls = useMemo(() => {
@@ -235,12 +284,13 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
         'fairystaroform__flex-row fairystaroform__justify-end': labelMode === 'between' || labelMode === 'top',
         'fairystaroform__flex-row': labelMode === 'top',
         'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ':
-          borderedType === 'body',
+          itemBorderType === 'body',
+        'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && itemBorderType === 'body',
       },
-      bodyClassName,
       parent_formItemBodyClassName,
+      bodyClassName,
     );
-  }, [bodyClassName, labelMode, borderedType, parent_formItemBodyClassName]);
+  }, [bodyClassName, labelMode, itemBorderType, parent_formItemBodyClassName, isInvalid, isInvalidBorderRed]);
 
   // 表单项输入类名
   const itemInput_cls = useMemo(() => {
@@ -297,7 +347,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   return {
     value,
     isInvalid,
-    borderedType,
+    itemBorderType,
     onValueChange,
     colSpan,
     rowSpan,
@@ -309,14 +359,28 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     errorState,
     formInstance,
     error,
+    _name,
+    name,
+    paths,
+    parentName,
+    formAttrsNameInstance,
     // ================================================================================
     itemClassName: item_cls,
-    itemStyle: { ...(parent_formItemStyle || {}), ...styleBase, ...(style || {}) },
+    itemStyle: {
+      ...(itemBorderColor && itemBorderType === 'bottom' ? { borderBottomColor: itemBorderColor } : {}),
+      ...(parent_formItemStyle || {}),
+      ...styleBase,
+      ...(style || {}),
+    },
     containerClassName: itemContainer_cls,
     itemLabelClassName: itemLabel_cls,
     itemLabelStyle: { ...(parent_formItemLabelStyle || {}), ...(labelStyle || {}) },
     itemBodyClassName: itemBody_cls,
-    itemBodyStyle: { ...(parent_formItemBodyStyle || {}), ...(bodyStyle || {}) },
+    itemBodyStyle: {
+      ...(itemBorderColor && itemBorderType === 'body' ? { borderBottomColor: itemBorderColor } : {}),
+      ...(parent_formItemBodyStyle || {}),
+      ...(bodyStyle || {}),
+    },
     itemInputClassName: itemInput_cls,
     itemExtraClassName: itemExtra_cls,
     errorClassName: itemError_cls,
@@ -329,31 +393,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;
@@ -380,3 +454,97 @@ 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 function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(
+  props: FairysValtioFormItemAttrsProps<T>,
+) {
+  const {
+    name,
+    valuePropName = 'value',
+    getValueFromEvent,
+    formatValue,
+    onAfterUpdate,
+    trigger = 'onChange',
+    children,
+    attrs = {},
+    isJoinParentField = true,
+    rules,
+  } = props;
+  const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
+  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(() => {
+    return () => {
+      formInstance.removeRules(_name);
+    };
+  }, [_name]);
+
+  const onValueChange = (event: any) => {
+    let value = event;
+    const target = event?.detail || event?.target;
+    if (typeof getValueFromEvent === 'function') {
+      value = getValueFromEvent(event, formInstance);
+    } else if (event && target && typeof target === 'object' && valuePropName in target) {
+      value = target.valuePropName;
+    }
+    if (typeof formatValue === 'function') {
+      value = formatValue(value, formInstance, event);
+    }
+    formInstance.updatedValueByPaths(_name, value);
+    if (typeof onAfterUpdate === 'function') {
+      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: React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children,
+  };
+}