@fairys/valtio-form-basic 0.0.12 → 1.0.0

package/esm/{form → common}/hooks/index.d.ts

@@ -32,3 +32,4 @@ export declare const useFairysValtioFormAttrsName: (options?: FairysValtioFormAt
     name: string;
     paths: (number | symbol)[] | (string | number)[];
 };
+export declare const useId: (suffix?: string) => string;

package/esm/{form → common}/hooks/index.js

@@ -54,4 +54,12 @@ const useFairysValtioFormAttrsName = (options = {})=>{
         paths: _paths
     };
 };
-export { FairysValtioFormParentAttrs, FairysValtioFormParentAttrsContext, useFairysValtioFormAttrsName, useFairysValtioFormParentAttrs, useFairysValtioFormParentAttrsContext, useFairysValtioFormParentAttrsState };
+let localId = 0;
+const useId = (suffix = 'form-item-input')=>{
+    const count = useRef(localId++);
+    return useMemo(()=>`fairys-valtio-form_${count.current.toString(32)}_${suffix}`, [
+        count.current,
+        suffix
+    ]);
+};
+export { FairysValtioFormParentAttrs, FairysValtioFormParentAttrsContext, useFairysValtioFormAttrsName, useFairysValtioFormParentAttrs, useFairysValtioFormParentAttrsContext, useFairysValtioFormParentAttrsState, useId };

package/esm/common/index.d.ts

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './instance';
+export * from './utils';
+export * from './interface';

package/esm/common/index.js

@@ -0,0 +1,4 @@
+export * from "./hooks/index.js";
+export * from "./instance/index.js";
+export * from "./utils/index.js";
+export * from "./interface.js";

package/esm/{form → common}/instance/index.d.ts

@@ -1,7 +1,20 @@
-import { MObject } from '../../interface';
+import { MObject } from '../interface';
 import { RuleItem, ValidateFieldsError, Values } from 'async-validator';
+import { FairysValtioFormAttrsProps } from '../../form/form';
 /**表单实例*/
 export declare class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
+    /***
+     * 判断值是否为代理对象
+     * @param value 值
+     * @returns 是否为代理对象
+     */
+    isValtioProxy: (value: any) => boolean;
     /**状态*/
     state: T;
     /**
@@ -14,7 +27,7 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
     ctor: (options?: {
         formData?: Partial<T>;
         hideState?: Record<PropertyKey, boolean>;
-        initFormDataType?: "deepCopy" | "proxy" | "immutable";
+        initFormDataType?: FairysValtioFormAttrsProps["initFormDataType"];
     }) => void;
     /**
      * 更新数据
@@ -27,6 +40,12 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
      * @param value 值
      */
     updatedValueByPaths: (path: PropertyKey, value: any) => void;
+    /**表单项卸载移除保存值*/
+    removeValueByPaths: (path: PropertyKey) => void;
+    /**
+     * 清理值
+     */
+    clearValue: (fields?: PropertyKey[]) => this;
     /**
      * 更新行数据的隐藏信息
      * @param objectHideInfo 行数据隐藏信息对象
@@ -61,7 +80,7 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
      * @param fields 要验证的字段(可选)
      * @param isReturn 是否返回验证结果(可选)
      */
-    validate: (fields?: PropertyKey[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
+    validate: (fields?: PropertyKey[], isReturn?: boolean) => Promise<ValidateFieldsError | Values | Partial<T>>;
     /**
      * 验证某些前缀的字段
      * @param prefix 前缀字段数组
@@ -70,12 +89,20 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
     validatePrefixFields: (prefix: string[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
 }
 /**声明实例*/
-export declare function useFairysValtioFormInstance<T extends MObject<T> = object>(instance?: FairysValtioFormInstance<T>): FairysValtioFormInstance<T>;
+export declare function useFairysValtioFormInstance<T extends MObject<T> = Record<string, any>>(instance?: FairysValtioFormInstance<T>): FairysValtioFormInstance<T>;
 /**表单实例上下文*/
 export declare const FairysValtioFormInstanceContext: import("react").Context<FairysValtioFormInstance<any>>;
 /**表单实例上下文*/
-export declare function useFairysValtioFormInstanceContext<T extends MObject<T> = object>(): FairysValtioFormInstance<T>;
+export declare function useFairysValtioFormInstanceContext<T extends MObject<T> = Record<string, any>>(): FairysValtioFormInstance<T>;
 /**状态取值*/
-export declare function useFairysValtioFormInstanceContextState<T extends MObject<T> = object>(): [T, Record<PropertyKey, string[]>, FairysValtioFormInstance<T>, any, any];
+export declare function useFairysValtioFormInstanceContextState<T extends MObject<T> = Record<string, any>>(): [T, Record<PropertyKey, string[]>, FairysValtioFormInstance<T>, any, any];
 /**隐藏组件状态取值*/
-export declare function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = object>(): [Record<PropertyKey, boolean>, FairysValtioFormInstance<T>, any];
+export declare function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = Record<string, any>>(): [Record<PropertyKey, boolean>, FairysValtioFormInstance<T>, any];
+/**
+ * 传递表单实例获取状态
+ */
+export declare function useFairysValtioFormInstanceToState<T extends MObject<T> = Record<string, any>>(formInstance: FairysValtioFormInstance<T>): T;
+/**
+ * 传递表单实例获取隐藏状态
+ */
+export declare function useFairysValtioFormInstanceToHideState<T extends MObject<T> = Record<string, any>>(formInstance: FairysValtioFormInstance<T>): Record<PropertyKey, boolean>;

package/esm/{form → common}/instance/index.js

@@ -1,19 +1,29 @@
 import { createContext, useContext, useRef } from "react";
-import { proxy, ref as external_valtio_ref, snapshot, useSnapshot } from "valtio";
+import { proxy, ref as external_valtio_ref, snapshot, unstable_getInternalStates, useSnapshot } from "valtio";
 import async_validator from "async-validator";
 import { copy } from "fast-copy";
-import { formatePath, get, set } from "../utils/index.js";
+import { formatePath, get, isObject, removeValueByPaths, set } from "../utils/index.js";
 class FairysValtioFormInstance {
+    onValuesChange;
+    isValtioProxy = (value)=>{
+        const { refSet } = unstable_getInternalStates();
+        const canProxyDefault = (x)=>isObject(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer) && !(x instanceof Promise);
+        return canProxyDefault(value);
+    };
     state = proxy({});
     errorState = proxy({});
     hideState = proxy({});
     ctor = (options)=>{
         const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
-        this.errorState = proxy({});
-        this.hideState = proxy(hideState ? copy(hideState) : {});
-        if ('deepCopy' === initFormDataType) this.state = proxy(formData ? copy(formData) : {});
-        else if ('proxy' === initFormDataType) this.state = proxy(formData);
-        else if ('immutable' === initFormDataType) this.state = formData;
+        this.clear();
+        this.updatedHideInfo(hideState ? copy(hideState) : {});
+        const isValtioProxy = this.isValtioProxy(formData);
+        if (isValtioProxy) if ('deepCopy' === initFormDataType) this.updated(copy(snapshot(formData)), false);
+        else this.updated(formData, false);
+        else {
+            if ('deepCopy' === initFormDataType) this.updated(copy(formData || {}), false);
+            this.updated(formData || {}, false);
+        }
     };
     updated = (state, isValidate = true)=>{
         const keys = Object.keys(state);
@@ -28,6 +38,19 @@ class FairysValtioFormInstance {
         this.validate([
             path
         ], false);
+        this.onValuesChange?.(path, value);
+    };
+    removeValueByPaths = (path)=>{
+        removeValueByPaths(this.state, formatePath(path));
+    };
+    clearValue = (fields)=>{
+        let _fields = fields;
+        if (!Array.isArray(fields)) _fields = Object.keys(this.state);
+        for(let index = 0; index < _fields.length; index++){
+            const field = _fields[index];
+            delete this.state[field];
+        }
+        return this;
     };
     updatedHideInfo = (objectHideInfo)=>{
         const keys = Object.keys(objectHideInfo);
@@ -64,9 +87,12 @@ class FairysValtioFormInstance {
         return this;
     };
     clear = ()=>{
-        this.state = proxy({});
-        this.errorState = proxy({});
-        this.hideState = proxy({});
+        this.clearValue();
+        this.clearHideInfo();
+        this.clearErrorInfo();
+        this.mountRules = {};
+        this.rules = {};
+        this.nameToPaths = {};
     };
     mountRules = {};
     removeRules = (name)=>{
@@ -167,4 +193,12 @@ function useFairysValtioFormInstanceContextHideState() {
         hideState.__defaultValue
     ];
 }
-export { FairysValtioFormInstance, FairysValtioFormInstanceContext, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState };
+function useFairysValtioFormInstanceToState(formInstance) {
+    const state = useSnapshot(formInstance.state);
+    return state;
+}
+function useFairysValtioFormInstanceToHideState(formInstance) {
+    const hideState = useSnapshot(formInstance.hideState);
+    return hideState;
+}
+export { FairysValtioFormInstance, FairysValtioFormInstanceContext, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceToHideState, useFairysValtioFormInstanceToState };

package/esm/{form → common}/utils/index.d.ts

@@ -14,6 +14,12 @@ export declare function set<T>(state: any, paths: PropertyKey[], nextValue: T):
  * @param segments 键路径
  */
 export declare function get<TDefault = unknown>(value: any, segments: PropertyKey[]): TDefault;
+/***
+ * 移除值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export declare function removeValueByPaths(value: any, segments: PropertyKey[]): void;
 /***
  * 格式化路径，将路径中的数组索引转换为数字
  * @param path 路径
@@ -22,3 +28,4 @@ export declare function get<TDefault = unknown>(value: any, segments: PropertyKe
 export declare function formatePath(path: PropertyKey): (number | symbol)[] | (string | number)[];
 /**格式化属性名*/
 export declare function formateName(name?: string, parentName?: string): string;
+export declare const isObject: (x: unknown) => x is object;

package/esm/{form → common}/utils/index.js

@@ -20,6 +20,15 @@ function get(value, segments) {
     for (const key of segments)current = current?.[key];
     return current;
 }
+function removeValueByPaths(value, segments) {
+    let current = value;
+    const lg = segments.length;
+    for(let index = 0; index < lg; index++){
+        const key = segments[index];
+        if (index === lg - 1) delete current[key];
+        else current = current?.[key];
+    }
+}
 function formatePath(path) {
     if ('string' != typeof path) return [
         path
@@ -57,4 +66,5 @@ function formateName(name, parentName) {
     if (name) return name;
     return '';
 }
-export { formateName, formatePath, get, set };
+const isObject = (x)=>'object' == typeof x && null !== x;
+export { formateName, formatePath, get, isObject, removeValueByPaths, set };

package/esm/form/form.d.ts

@@ -1,9 +1,9 @@
-import { MObject } from '../interface';
-import { FairysValtioFormInstance } from './instance';
+import { MObject } from '../common/interface';
+import { FairysValtioFormInstance } from '../common/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 {
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string, any>> extends FairysValtioFormLayoutAttrsProps {
     /**表单实例*/
     form?: FairysValtioFormInstance<T>;
     /**子元素*/
@@ -17,10 +17,15 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
     /**
      * 初始化表单数据类型，默认值为 deepCopy
      * - deepCopy：使用深度拷贝初始化表单数据
-     * - proxy：使用代理对象初始化表单数据
-     * - immutable：直接使用对象，不进行任何处理，注意，这个使用必须是`valtio`中的`proxy`声明的对象数据，否则表单项更新数据不会同步
+     * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
      */
-    initFormDataType?: 'deepCopy' | 'proxy' | 'immutable';
+    initFormDataType?: 'deepCopy' | 'immutable';
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 /**
  * 表单属性处理
@@ -42,7 +47,7 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>): {
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
     formInstance: FairysValtioFormInstance<T>;
     /**子元素*/
     children: ReactNode;
@@ -59,6 +64,7 @@ export declare function useFairysValtioForm<T extends MObject<T> = object>(props
     bordered?: boolean;
     boxShadow?: boolean;
     lastItemBordered?: boolean;
+    platform?: "pc" | "rn" | "taro";
     colCount?: number;
     errorLayout?: "bottom-left" | "bottom-right" | "top-right" | "top-left" | "left-border-top" | "right-border-top";
     labelMode?: "left" | "top" | "between";
@@ -68,7 +74,7 @@ export declare function useFairysValtioForm<T extends MObject<T> = object>(props
     formItemLabelStyle?: React.CSSProperties;
     formItemBodyClassName?: string;
     formItemBodyStyle?: React.CSSProperties;
-    itemBorderType?: "bottom" | "body";
+    itemBorderType?: "bottom" | "body" | "none";
     itemBorderColor?: React.CSSProperties["borderColor"];
     isInvalidBorderRed?: boolean;
     isInvalidTextRed?: boolean;

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

@@ -1,11 +1,13 @@
 /**表单项*/
-import { MObject } from '../interface';
+import { MObject } from '../common/interface';
 import React from 'react';
-import { FairysValtioFormInstance } from './instance';
+import { FairysValtioFormInstance } from '../common/instance';
 import { FairysValtioFormLayoutContextOptions } from './layout';
-import { FairysValtioFormParentAttrs } from './hooks';
+import { FairysValtioFormParentAttrs } from '../common/hooks';
 import { RuleItem } from 'async-validator';
-export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<string, any>> {
+    /**平台*/
+    platform?: 'pc' | 'rn' | 'taro';
     /**
      * 表单项名称 ，字段需要和存储的字段路径一致
      *
@@ -22,6 +24,8 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     label?: string;
     /**传递组件字段*/
     valuePropName?: string;
+    /**取值字段(默认 valuePropName字段值)*/
+    getValuePath?: string;
     /**自定义获取值*/
     getValueFromEvent?: (event: any, form: FairysValtioFormInstance<T>) => any;
     /**值格式化*/
@@ -73,6 +77,10 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     isJoinParentField?: boolean;
     /**校验规则*/
     rules?: RuleItem[];
+    /**卸载移除数据值
+     * @default true
+     */
+    isRemoveValueOnUnmount?: boolean;
 }
 /**
  * 处理表单表单项属性
@@ -117,8 +125,8 @@ export const FormItem = (props: FormItemProps) => {
  * ```
  *
 */
-export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
-export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = Record<string, any>> {
     /**表单项值*/
     value?: any;
     /**是否校验错误*/
@@ -151,6 +159,8 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
     _name?: string;
     /**表单项名称*/
     name?: string;
+    /**表单项ID*/
+    id?: string;
     /**表单项路径*/
     paths?: (string | number)[];
     /**父级字段名*/
@@ -201,7 +211,7 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): {
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): {
     value: unknown;
     error: string[];
     onValueChange: (event: any) => void;
@@ -210,6 +220,7 @@ export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T>
     formInstance: FairysValtioFormInstance<T>;
     _name: string;
     name: string;
+    id: string;
     paths: (number | symbol)[] | (string | number)[];
     parentName: string;
     formAttrsNameInstance: FairysValtioFormParentAttrs;

package/esm/form/form.item.js

@@ -1,9 +1,9 @@
 import react, { useEffect, useMemo } from "react";
 import clsx from "clsx";
-import { useFairysValtioFormInstanceContextState } from "./instance/index.js";
+import { useFairysValtioFormInstanceContextState } from "../common/instance/index.js";
 import { useFairysValtioFormLayoutContext } from "./layout.js";
-import { useFairysValtioFormAttrsName } from "./hooks/index.js";
-import { get } from "./utils/index.js";
+import { useFairysValtioFormAttrsName, useId } from "../common/hooks/index.js";
+import { formatePath, get } from "../common/utils/index.js";
 function useFairysValtioFormItemAttrs(props) {
     const [layoutAttrs] = useFairysValtioFormLayoutContext();
     const colCount = layoutAttrs.colCount || 1;
@@ -20,7 +20,8 @@ function useFairysValtioFormItemAttrs(props) {
     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 parent_platform = layoutAttrs.platform;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, 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, platform = parent_platform, isRemoveValueOnUnmount = true } = props;
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
         isJoinParentField
@@ -32,25 +33,34 @@ function useFairysValtioFormItemAttrs(props) {
     ]);
     const error = errorState[_name];
     const _formItemRules = formInstance.rules?.[_name];
+    const id = useId(_name);
     formInstance.nameToPaths[_name] = paths;
-    if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
-    useEffect(()=>()=>{
+    useEffect(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
             formInstance.removeRules(_name);
-        }, [
-        _name
+        };
+    }, [
+        _name,
+        rules
     ]);
     const onValueChange = (event)=>{
-        let value = 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);
+        if ('function' == typeof getValueFromEvent) _value = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && getValuePath in target) _value = get(target, formatePath(getValuePath));
+        if ('function' == typeof formatValue) _value = formatValue(_value, formInstance, event);
+        if (value === _value) return;
+        formInstance.updatedValueByPaths(_name, _value);
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    useEffect(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,
+        id,
         [valuePropName]: value,
         [trigger]: onValueChange
     };
@@ -104,10 +114,9 @@ function useFairysValtioFormItemAttrs(props) {
         isRequired,
         showColon
     ]);
-    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', {
+    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__items-start', {
             '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' === itemBorderType,
             'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && 'body' === itemBorderType
         }, parent_formItemBodyClassName, bodyClassName), [
@@ -127,14 +136,18 @@ function useFairysValtioFormItemAttrs(props) {
     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__bottom-_zkh1_-14px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'bottom-left' === errorLayout && 'pc' !== platform,
+            'fairystaroform__bottom-_zkh1_-10px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'bottom-left' === errorLayout && 'pc' === platform,
+            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'bottom-right' === errorLayout && 'pc' !== platform,
+            'fairystaroform__bottom-_zkh1_-10px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'bottom-right' === errorLayout && 'pc' === platform,
             '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
+            '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,
+            'fairystaroform__px-_zkh1_4px_zhk2_': 'pc' === platform
         }), [
-        errorLayout
+        errorLayout,
+        platform
     ]);
     const styleBase = useMemo(()=>{
         const css = {};
@@ -166,6 +179,7 @@ function useFairysValtioFormItemAttrs(props) {
         error,
         _name,
         name,
+        id,
         paths,
         parentName,
         formAttrsNameInstance,
@@ -202,36 +216,45 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules } = props;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRemoveValueOnUnmount = true } = props;
     const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
         isJoinParentField
     });
+    const id = useId(_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(()=>()=>{
+    useEffect(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
             formInstance.removeRules(_name);
-        }, [
-        _name
+        };
+    }, [
+        _name,
+        rules
     ]);
     const onValueChange = (event)=>{
-        let value = 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);
+        if ('function' == typeof getValueFromEvent) _value = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && getValuePath in target) _value = get(target, formatePath(getValuePath));
+        if ('function' == typeof formatValue) _value = formatValue(_value, formInstance, event);
+        if (value === _value) return;
+        formInstance.updatedValueByPaths(_name, _value);
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    useEffect(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,
+        id,
         [valuePropName]: value,
         [trigger]: onValueChange
     };
@@ -244,6 +267,7 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         formInstance,
         _name,
         name,
+        id,
         paths,
         parentName,
         formAttrsNameInstance,

package/esm/form/form.js

@@ -1,14 +1,17 @@
-import { useFairysValtioFormInstance } from "./instance/index.js";
-import { useMemo } from "react";
-function useFairysValtioForm(props) {
-    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+import { useFairysValtioFormInstance } from "../common/instance/index.js";
+import { useEffect, useImperativeHandle, useMemo } from "react";
+function useFairysValtioForm(props, ref) {
+    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', onValuesChange, ...rest } = props;
     const formInstance = useFairysValtioFormInstance(form);
     formInstance.rules = rules;
+    formInstance.onValuesChange = onValuesChange;
     useMemo(()=>formInstance.ctor({
             formData,
             hideState,
             initFormDataType
         }), []);
+    useImperativeHandle(ref, ()=>formInstance);
+    useEffect(()=>()=>formInstance.clear(), []);
     return {
         ...rest,
         formInstance