@fairys/valtio-form-basic 0.0.13 → 1.0.0

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

@@ -3,6 +3,12 @@ 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 值
@@ -34,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 行数据隐藏信息对象
@@ -68,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 前缀字段数组
@@ -77,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/common/instance/index.js

@@ -2,8 +2,9 @@ import { createContext, useContext, useRef } from "react";
 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, isObject, 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);
@@ -14,16 +15,14 @@ class FairysValtioFormInstance {
     hideState = proxy({});
     ctor = (options)=>{
         const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
-        this.mountRules = {};
-        this.nameToPaths = {};
-        this.errorState = proxy({});
-        this.hideState = proxy(hideState ? copy(hideState) : {});
+        this.clear();
+        this.updatedHideInfo(hideState ? copy(hideState) : {});
         const isValtioProxy = this.isValtioProxy(formData);
-        if (isValtioProxy) if ('deepCopy' === initFormDataType) this.state = proxy(copy(snapshot(formData)));
-        else this.state = formData;
+        if (isValtioProxy) if ('deepCopy' === initFormDataType) this.updated(copy(snapshot(formData)), false);
+        else this.updated(formData, false);
         else {
-            if ('deepCopy' === initFormDataType) this.state = proxy(copy(formData || {}));
-            this.state = proxy(formData || {});
+            if ('deepCopy' === initFormDataType) this.updated(copy(formData || {}), false);
+            this.updated(formData || {}, false);
         }
     };
     updated = (state, isValidate = true)=>{
@@ -39,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);
@@ -75,9 +87,9 @@ 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 = {};
@@ -181,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/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 路径

package/esm/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
@@ -58,4 +67,4 @@ function formateName(name, parentName) {
     return '';
 }
 const isObject = (x)=>'object' == typeof x && null !== x;
-export { formateName, formatePath, get, isObject, set };
+export { formateName, formatePath, get, isObject, removeValueByPaths, set };

package/esm/form/form.d.ts

@@ -3,7 +3,7 @@ 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>;
     /**子元素*/
@@ -20,6 +20,12 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
      * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
      */
     initFormDataType?: 'deepCopy' | 'immutable';
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 /**
  * 表单属性处理
@@ -41,7 +47,7 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<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;

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

@@ -5,7 +5,7 @@ import { FairysValtioFormInstance } from '../common/instance';
 import { FairysValtioFormLayoutContextOptions } from './layout';
 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';
     /**
@@ -77,6 +77,10 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     isJoinParentField?: boolean;
     /**校验规则*/
     rules?: RuleItem[];
+    /**卸载移除数据值
+     * @default true
+     */
+    isRemoveValueOnUnmount?: boolean;
 }
 /**
  * 处理表单表单项属性
@@ -121,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;
     /**是否校验错误*/
@@ -207,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;

package/esm/form/form.item.js

@@ -21,7 +21,7 @@ function useFairysValtioFormItemAttrs(props) {
     const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
     const parent_showColon = layoutAttrs.showColon;
     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 } = props;
+    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
@@ -54,6 +54,9 @@ function useFairysValtioFormItemAttrs(props) {
         formInstance.updatedValueByPaths(_name, _value);
         if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    useEffect(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,
@@ -213,7 +216,7 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValuePath = valuePropName, 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,
@@ -245,6 +248,9 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         formInstance.updatedValueByPaths(_name, _value);
         if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    useEffect(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,

package/esm/form/form.js

@@ -1,9 +1,10 @@
 import { useFairysValtioFormInstance } from "../common/instance/index.js";
 import { useEffect, useImperativeHandle, useMemo } from "react";
 function useFairysValtioForm(props, ref) {
-    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+    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,

package/lib/common/instance/index.d.ts

@@ -3,6 +3,12 @@ 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 值
@@ -34,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 行数据隐藏信息对象
@@ -68,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 前缀字段数组
@@ -77,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/lib/common/instance/index.js

@@ -33,12 +33,14 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    FairysValtioFormInstance: ()=>FairysValtioFormInstance,
     useFairysValtioFormInstanceContextState: ()=>useFairysValtioFormInstanceContextState,
-    useFairysValtioFormInstance: ()=>useFairysValtioFormInstance,
-    FairysValtioFormInstanceContext: ()=>FairysValtioFormInstanceContext,
     useFairysValtioFormInstanceContext: ()=>useFairysValtioFormInstanceContext,
-    useFairysValtioFormInstanceContextHideState: ()=>useFairysValtioFormInstanceContextHideState
+    useFairysValtioFormInstanceContextHideState: ()=>useFairysValtioFormInstanceContextHideState,
+    useFairysValtioFormInstanceToHideState: ()=>useFairysValtioFormInstanceToHideState,
+    useFairysValtioFormInstanceToState: ()=>useFairysValtioFormInstanceToState,
+    FairysValtioFormInstance: ()=>FairysValtioFormInstance,
+    useFairysValtioFormInstance: ()=>useFairysValtioFormInstance,
+    FairysValtioFormInstanceContext: ()=>FairysValtioFormInstanceContext
 });
 const external_react_namespaceObject = require("react");
 const external_valtio_namespaceObject = require("valtio");
@@ -47,6 +49,7 @@ var external_async_validator_default = /*#__PURE__*/ __webpack_require__.n(exter
 const external_fast_copy_namespaceObject = require("fast-copy");
 const index_js_namespaceObject = require("../utils/index.js");
 class FairysValtioFormInstance {
+    onValuesChange;
     isValtioProxy = (value)=>{
         const { refSet } = (0, external_valtio_namespaceObject.unstable_getInternalStates)();
         const canProxyDefault = (x)=>(0, index_js_namespaceObject.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);
@@ -57,16 +60,14 @@ class FairysValtioFormInstance {
     hideState = (0, external_valtio_namespaceObject.proxy)({});
     ctor = (options)=>{
         const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
-        this.mountRules = {};
-        this.nameToPaths = {};
-        this.errorState = (0, external_valtio_namespaceObject.proxy)({});
-        this.hideState = (0, external_valtio_namespaceObject.proxy)(hideState ? (0, external_fast_copy_namespaceObject.copy)(hideState) : {});
+        this.clear();
+        this.updatedHideInfo(hideState ? (0, external_fast_copy_namespaceObject.copy)(hideState) : {});
         const isValtioProxy = this.isValtioProxy(formData);
-        if (isValtioProxy) if ('deepCopy' === initFormDataType) this.state = (0, external_valtio_namespaceObject.proxy)((0, external_fast_copy_namespaceObject.copy)((0, external_valtio_namespaceObject.snapshot)(formData)));
-        else this.state = formData;
+        if (isValtioProxy) if ('deepCopy' === initFormDataType) this.updated((0, external_fast_copy_namespaceObject.copy)((0, external_valtio_namespaceObject.snapshot)(formData)), false);
+        else this.updated(formData, false);
         else {
-            if ('deepCopy' === initFormDataType) this.state = (0, external_valtio_namespaceObject.proxy)((0, external_fast_copy_namespaceObject.copy)(formData || {}));
-            this.state = (0, external_valtio_namespaceObject.proxy)(formData || {});
+            if ('deepCopy' === initFormDataType) this.updated((0, external_fast_copy_namespaceObject.copy)(formData || {}), false);
+            this.updated(formData || {}, false);
         }
     };
     updated = (state, isValidate = true)=>{
@@ -82,6 +83,19 @@ class FairysValtioFormInstance {
         this.validate([
             path
         ], false);
+        this.onValuesChange?.(path, value);
+    };
+    removeValueByPaths = (path)=>{
+        (0, index_js_namespaceObject.removeValueByPaths)(this.state, (0, index_js_namespaceObject.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);
@@ -118,9 +132,9 @@ class FairysValtioFormInstance {
         return this;
     };
     clear = ()=>{
-        this.state = (0, external_valtio_namespaceObject.proxy)({});
-        this.errorState = (0, external_valtio_namespaceObject.proxy)({});
-        this.hideState = (0, external_valtio_namespaceObject.proxy)({});
+        this.clearValue();
+        this.clearHideInfo();
+        this.clearErrorInfo();
         this.mountRules = {};
         this.rules = {};
         this.nameToPaths = {};
@@ -224,19 +238,31 @@ function useFairysValtioFormInstanceContextHideState() {
         hideState.__defaultValue
     ];
 }
+function useFairysValtioFormInstanceToState(formInstance) {
+    const state = (0, external_valtio_namespaceObject.useSnapshot)(formInstance.state);
+    return state;
+}
+function useFairysValtioFormInstanceToHideState(formInstance) {
+    const hideState = (0, external_valtio_namespaceObject.useSnapshot)(formInstance.hideState);
+    return hideState;
+}
 exports.FairysValtioFormInstance = __webpack_exports__.FairysValtioFormInstance;
 exports.FairysValtioFormInstanceContext = __webpack_exports__.FairysValtioFormInstanceContext;
 exports.useFairysValtioFormInstance = __webpack_exports__.useFairysValtioFormInstance;
 exports.useFairysValtioFormInstanceContext = __webpack_exports__.useFairysValtioFormInstanceContext;
 exports.useFairysValtioFormInstanceContextHideState = __webpack_exports__.useFairysValtioFormInstanceContextHideState;
 exports.useFairysValtioFormInstanceContextState = __webpack_exports__.useFairysValtioFormInstanceContextState;
+exports.useFairysValtioFormInstanceToHideState = __webpack_exports__.useFairysValtioFormInstanceToHideState;
+exports.useFairysValtioFormInstanceToState = __webpack_exports__.useFairysValtioFormInstanceToState;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "FairysValtioFormInstance",
     "FairysValtioFormInstanceContext",
     "useFairysValtioFormInstance",
     "useFairysValtioFormInstanceContext",
     "useFairysValtioFormInstanceContextHideState",
-    "useFairysValtioFormInstanceContextState"
+    "useFairysValtioFormInstanceContextState",
+    "useFairysValtioFormInstanceToHideState",
+    "useFairysValtioFormInstanceToState"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/lib/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 路径

package/lib/common/utils/index.js

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
     formatePath: ()=>formatePath,
     get: ()=>get,
     isObject: ()=>isObject,
+    removeValueByPaths: ()=>removeValueByPaths,
     set: ()=>set
 });
 function set(state, paths, nextValue) {
@@ -52,6 +53,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
@@ -94,12 +104,14 @@ exports.formateName = __webpack_exports__.formateName;
 exports.formatePath = __webpack_exports__.formatePath;
 exports.get = __webpack_exports__.get;
 exports.isObject = __webpack_exports__.isObject;
+exports.removeValueByPaths = __webpack_exports__.removeValueByPaths;
 exports.set = __webpack_exports__.set;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "formateName",
     "formatePath",
     "get",
     "isObject",
+    "removeValueByPaths",
     "set"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/lib/form/form.d.ts

@@ -3,7 +3,7 @@ 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>;
     /**子元素*/
@@ -20,6 +20,12 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
      * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
      */
     initFormDataType?: 'deepCopy' | 'immutable';
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 /**
  * 表单属性处理
@@ -41,7 +47,7 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<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;

package/lib/form/form.item.d.ts

@@ -5,7 +5,7 @@ import { FairysValtioFormInstance } from '../common/instance';
 import { FairysValtioFormLayoutContextOptions } from './layout';
 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';
     /**
@@ -77,6 +77,10 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     isJoinParentField?: boolean;
     /**校验规则*/
     rules?: RuleItem[];
+    /**卸载移除数据值
+     * @default true
+     */
+    isRemoveValueOnUnmount?: boolean;
 }
 /**
  * 处理表单表单项属性
@@ -121,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;
     /**是否校验错误*/
@@ -207,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;

package/lib/form/form.item.js

@@ -61,7 +61,7 @@ function useFairysValtioFormItemAttrs(props) {
     const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
     const parent_showColon = layoutAttrs.showColon;
     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 } = props;
+    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 } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
         name,
         isJoinParentField
@@ -94,6 +94,9 @@ function useFairysValtioFormItemAttrs(props) {
         formInstance.updatedValueByPaths(_name, _value);
         if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,
@@ -253,7 +256,7 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValuePath = valuePropName, 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] = (0, index_js_namespaceObject.useFairysValtioFormInstanceContextState)();
     const { name: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
         name,
@@ -285,6 +288,9 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         formInstance.updatedValueByPaths(_name, _value);
         if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const baseControl = {
         ...attrs,
         name,