@fairys/valtio-form-basic 0.0.8

package/README.md

@@ -0,0 +1,10 @@
+# valtio-form-basic
+
+使用 valtio 实现的表单基础库, 使其更加便捷，同时支持`PC`、`H5`、`Taro`，同时也更加灵活。
+
+
+## 安装
+
+```bash
+npm install @fairys/valtio-form-basic # yarn add @fairys/valtio-form-basic # pnpm add @fairys/valtio-form-basic
+```

package/esm/form/form.d.ts

@@ -0,0 +1,66 @@
+import { MObject } from '../interface';
+import { FairysValtioFormInstance } from './instance';
+import { type ReactNode } from 'react';
+import { FairysValtioFormLayoutAttrsProps } from './layout';
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+    /**表单实例*/
+    form?: FairysValtioFormInstance<T>;
+    /**子元素*/
+    children: ReactNode;
+    /**表单项规则*/
+    rules?: FairysValtioFormInstance<T>['rules'];
+    /**表单初始值*/
+    formData?: FairysValtioFormInstance<T>['state'];
+    /**表单隐藏状态*/
+    hideState?: FairysValtioFormInstance<T>['hideState'];
+    /**formData 是否进行深度拷贝，如果不是则直接把 formData 赋值到 state ，否则使用 copy 方法深度拷贝后赋值 */
+    isDeepCopy?: boolean;
+}
+/**
+ * 表单属性处理
+ *
+ * @example
+ *
+ * ```tsx
+import { useFairysValtioForm } from "@fairys/valtio-form"
+import type { FairysValtioFormAttrProps } from "@fairys/valtio-form"
+export interface FormProps extends FairysValtioFormAttrProps{}
+
+export const Form = (props: FormProps) => {
+  const { formInstance,children, ...rest } = useFairysValtioForm(props)
+  return  (
+    <FairysValtioFormInstanceContext.Provider value={formInstance}>
+      <布局组件 {...rest}>{children}</布局组件>
+    </FairysValtioFormInstanceContext.Provider>
+  );
+}
+ * ```
+*/
+export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>): {
+    formInstance: FairysValtioFormInstance<T>;
+    /**子元素*/
+    children: ReactNode;
+    gap?: string | number;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    isAllColSpan?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    headerClassName?: string;
+    headerStyle?: React.CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    bordered?: boolean;
+    boxShadow?: boolean;
+    lastItemBordered?: boolean;
+    colCount?: number;
+    errorLayout?: "left-bottom" | "right-bottom" | "top-right" | "top-left";
+    labelMode?: "left" | "top" | "between";
+    formItemClassName?: string;
+    formItemStyle?: React.CSSProperties;
+    formItemLabelClassName?: string;
+    formItemLabelStyle?: React.CSSProperties;
+    formItemBodyClassName?: string;
+    formItemBodyStyle?: React.CSSProperties;
+    borderedType?: "bottom" | "body";
+};

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

@@ -0,0 +1,150 @@
+/**表单项*/
+import { MObject } from '../interface';
+import React from 'react';
+import { FairysValtioFormInstance } from './instance';
+import { FairysValtioFormLayoutContextOptions } from './layout';
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+    /**表单项名称*/
+    name: string;
+    /**表单项标签*/
+    label?: string;
+    /**传递组件字段*/
+    valuePropName?: string;
+    /**自定义获取值*/
+    getValueFromEvent?: (event: any, form: FairysValtioFormInstance<T>) => any;
+    /**值格式化*/
+    formatValue?: (value: any, form: FairysValtioFormInstance<T>, event: any) => any;
+    /**触发数据更新之后触发（用于数据联动之类的）*/
+    onAfterUpdate?: (value: any, form: FairysValtioFormInstance<T>, event: any) => void;
+    /**事件名称*/
+    trigger?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    children?: React.ReactNode;
+    /**规则校验失败错误提示位置*/
+    errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+    /**label显示模式*/
+    labelMode?: 'left' | 'top' | 'between';
+    /**额外内容*/
+    extra?: React.ReactNode;
+    /**底部提示内容*/
+    helpText?: React.ReactNode;
+    /**
+     * 表单项占据列数
+     * @default 1
+     */
+    colSpan?: number;
+    /**
+     * 表单项占据行数
+     * @default 1
+     */
+    rowSpan?: number;
+    /**是否必填*/
+    isRequired?: boolean;
+    /**是否显示冒号*/
+    showColon?: boolean;
+    /**底部显示边框*/
+    borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+    /**输入框属性*/
+    attrs?: any;
+}
+/**
+ * 处理表单表单项属性
+ *
+ * @example
+ *
+ * ```tsx
+import { Fragment } from 'react'
+import { useFairysValtioFormItemAttrs } from "@fairys/valtio-form"
+import type { FairysValtioFormItemAttrsProps } from "@fairys/valtio-form"
+export interface FormItemProps extends FairysValtioFormItemAttrsProps{}
+
+export const FormItem = (props: FormItemProps) => {
+  const { label, extra, helpText } = props
+  const {
+    itemClassName, itemStyle, containerClassName, itemLabelClassName, itemLabelStyle,
+    itemBodyClassName, itemBodyStyle, itemInputClassName, itemExtraClassName, errorClassName, helpClassName,
+    isInvalid, borderedType, children, error
+  } = useFairysValtioFormItemAttrs(props)
+
+  return (
+    <View className={itemClassName} style={itemStyle}>
+      <View className={containerClassName}>
+        <View className={itemLabelClassName} style={itemLabelStyle}>
+          {label}
+        </View>
+        <View className={itemBodyClassName} style={itemBodyStyle}>
+          <View className={itemInputClassName}>
+            {children}
+          </View>
+          {extra ? <View className={itemExtraClassName}>{extra}</View> : <Fragment />}
+          {borderedType === '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 />}
+    </View>
+  );
+}
+ * ```
+ *
+*/
+export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+    /**表单项值*/
+    value?: any;
+    /**是否校验错误*/
+    isInvalid?: boolean;
+    /**边框类型*/
+    borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+    /**值改变事件*/
+    onValueChange?: (event: any) => void;
+    /**当前表单项占据列数*/
+    colSpan?: number;
+    /**当前表单项占据行数*/
+    rowSpan?: number;
+    /**列数*/
+    colCount?: number;
+    /**标签显示模式*/
+    labelMode?: FairysValtioFormLayoutContextOptions['labelMode'];
+    /**错误提示位置*/
+    errorLayout?: FairysValtioFormLayoutContextOptions['errorLayout'];
+    /**是否必填*/
+    isRequired?: boolean;
+    /**表单状态*/
+    state?: T;
+    /**错误状态*/
+    errorState?: Record<PropertyKey, string[]>;
+    /**表单实例*/
+    formInstance?: FairysValtioFormInstance<T>;
+    /**错误信息*/
+    error?: string[];
+    /**表单项类名*/
+    itemClassName: string;
+    /**表单项样式*/
+    itemStyle: React.CSSProperties;
+    /**容器类名*/
+    containerClassName: string;
+    /**标签类名*/
+    itemLabelClassName: string;
+    /**标签样式*/
+    itemLabelStyle: React.CSSProperties;
+    /**体类名*/
+    itemBodyClassName: string;
+    /**体样式*/
+    itemBodyStyle: React.CSSProperties;
+    /**输入框类名*/
+    itemInputClassName: string;
+    /**额外内容类名*/
+    itemExtraClassName: string;
+    /**错误提示类名*/
+    errorClassName: string;
+    /**帮助提示类名*/
+    helpClassName: string;
+    /**子元素*/
+    children?: React.ReactNode;
+}

package/esm/form/form.item.js

@@ -0,0 +1,163 @@
+import react, { useMemo } from "react";
+import clsx from "clsx";
+import { useFairysValtioFormInstanceContextState } from "./instance/index.js";
+import { useFairysValtioFormLayoutContext } from "./layout.js";
+function useFairysValtioFormItemAttrs(props) {
+    const [layoutAttrs] = useFairysValtioFormLayoutContext();
+    const colCount = layoutAttrs.colCount || 1;
+    const parent_borderedType = layoutAttrs.borderedType || 'bottom';
+    const parent_errorLayout = layoutAttrs.errorLayout || 'right-bottom';
+    const parent_formItemClassName = layoutAttrs.formItemClassName;
+    const parent_formItemLabelClassName = layoutAttrs.formItemLabelClassName;
+    const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
+    const parent_formItemStyle = layoutAttrs.formItemStyle;
+    const parent_formItemBodyClassName = layoutAttrs.formItemBodyClassName;
+    const parent_formItemBodyStyle = layoutAttrs.formItemBodyStyle;
+    const parent_labelMode = layoutAttrs.labelMode || 'between';
+    const { name, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, borderedType = parent_borderedType, attrs = {}, showColon = false } = props;
+    const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
+    const rules = formInstance.rules?.[name];
+    const value = state[name];
+    const error = errorState[name];
+    const onValueChange = (event)=>{
+        let value = event;
+        const target = event?.detail || event?.target;
+        if ('function' == typeof getValueFromEvent) value = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && valuePropName in target) value = target.valuePropName;
+        if ('function' == typeof formatValue) value = formatValue(value, formInstance, event);
+        formInstance.updated({
+            [name]: value
+        });
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(value, formInstance, event);
+    };
+    const baseControl = {
+        ...attrs,
+        name,
+        [valuePropName]: value,
+        [trigger]: onValueChange
+    };
+    const isRequired = useMemo(()=>{
+        if (_isRequired) return _isRequired;
+        if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
+        return false;
+    }, [
+        rules,
+        formInstance
+    ]);
+    const isInvalid = useMemo(()=>{
+        if (Array.isArray(error) && error.length) return true;
+        return false;
+    }, [
+        error
+    ]);
+    const item_cls = useMemo(()=>clsx('fairys-valtio-form-item fairystaroform__p-_zkh1_4px_zhk2_ fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all', {
+            'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200': 'bottom' === borderedType,
+            [labelMode]: labelMode
+        }, className, parent_formItemClassName), [
+        className,
+        parent_formItemClassName,
+        labelMode,
+        borderedType
+    ]);
+    const itemContainer_cls = useMemo(()=>clsx('fairys-valtio-form-item-container fairystaroform__flex-1 fairystaroform__h-full fairystaroform__flex fairystaroform__box-border', {
+            'fairystaroform__flex-row fairystaroform__items-center fairystaroform__justify-between fairystaroform__gap-_zkh1_8px_zhk2_': 'between' === labelMode,
+            'fairystaroform__flex-col fairystaroform__gap-_zkh1_4px_zhk2_': 'top' === labelMode,
+            'fairystaroform__flex-row fairystaroform__gap-_zkh1_8px_zhk2_': 'left' === labelMode
+        }, labelClassName), [
+        labelClassName,
+        labelMode
+    ]);
+    const itemLabel_cls = useMemo(()=>clsx('fairys-valtio-form-item-label fairystaroform__text-gray-800 fairystaroform__flex fairystaroform__items-center fairystaroform__relative fairystaroform__box-border', {
+            'fairystaroform__justify-start': 'left' !== labelMode,
+            'fairystaroform__justify-end': 'left' === labelMode,
+            required: isRequired,
+            'show-colon': showColon
+        }, labelClassName, parent_formItemLabelClassName), [
+        labelClassName,
+        parent_formItemLabelClassName,
+        labelMode,
+        isRequired,
+        showColon
+    ]);
+    const itemBody_cls = useMemo(()=>clsx('fairys-valtio-form-item-body fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border', {
+            'fairystaroform__flex-row fairystaroform__justify-start': 'left' === labelMode,
+            'fairystaroform__flex-row fairystaroform__justify-end': 'between' === labelMode || 'top' === labelMode,
+            'fairystaroform__flex-row': 'top' === labelMode,
+            'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ': 'body' === borderedType
+        }, bodyClassName, parent_formItemBodyClassName), [
+        bodyClassName,
+        labelMode,
+        borderedType,
+        parent_formItemBodyClassName
+    ]);
+    const itemInput_cls = useMemo(()=>clsx('fairys-valtio-form-item-body fairystaroform__flex fairystaroform__flex-row fairystaroform__flex-1 fairystaroform__box-border', {
+            'fairystaroform__justify-end fairystaroform__text-right': 'between' === labelMode,
+            'fairystaroform__justify-start fairystaroform__text-left fairystaroform__items-center': 'between' !== labelMode
+        }), [
+        labelMode
+    ]);
+    const itemExtra_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-extra fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center'), []);
+    const itemHelp_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-help fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__w-full fairystaroform__box-border'), []);
+    const itemError_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-error fairystaroform__px-_zkh1_4px_zhk2_ fairystaroform__w-full fairystaroform__flex fairystaroform__flex-row fairystaroform__box-border fairystaroform__text-red fairystaroform__absolute fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__z-10', {
+            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'left-bottom' === errorLayout,
+            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'right-bottom' === errorLayout,
+            'fairystaroform__top-_zkh1_-14px_zhk2_  fairystaroform__right-0 fairystaroform__justify-end': 'top-right' === errorLayout,
+            'fairystaroform__top-_zkh1_-14px_zhk2_  fairystaroform__left-0 fairystaroform__justify-start': 'top-left' === errorLayout
+        }), [
+        errorLayout
+    ]);
+    const styleBase = useMemo(()=>{
+        const css = {};
+        if (colSpan) {
+            const end = colCount > colSpan ? colSpan : colCount;
+            css.gridColumnEnd = `span ${end}`;
+        }
+        if (rowSpan) css.gridRowEnd = `span ${rowSpan}`;
+        return css;
+    }, [
+        colSpan,
+        rowSpan,
+        colCount
+    ]);
+    return {
+        value,
+        isInvalid,
+        borderedType,
+        onValueChange,
+        colSpan,
+        rowSpan,
+        colCount,
+        labelMode,
+        errorLayout,
+        isRequired,
+        state,
+        errorState,
+        formInstance,
+        error,
+        itemClassName: item_cls,
+        itemStyle: {
+            ...parent_formItemStyle || {},
+            ...styleBase,
+            ...style || {}
+        },
+        containerClassName: itemContainer_cls,
+        itemLabelClassName: itemLabel_cls,
+        itemLabelStyle: {
+            ...parent_formItemLabelStyle || {},
+            ...labelStyle || {}
+        },
+        itemBodyClassName: itemBody_cls,
+        itemBodyStyle: {
+            ...parent_formItemBodyStyle || {},
+            ...bodyStyle || {}
+        },
+        itemInputClassName: itemInput_cls,
+        itemExtraClassName: itemExtra_cls,
+        errorClassName: itemError_cls,
+        helpClassName: itemHelp_cls,
+        children: /*#__PURE__*/ react.isValidElement(children) ? /*#__PURE__*/ react.cloneElement(children, {
+            ...baseControl
+        }) : children
+    };
+}
+export { useFairysValtioFormItemAttrs };

package/esm/form/form.js

@@ -0,0 +1,17 @@
+import { useFairysValtioFormInstance } from "./instance/index.js";
+import { useMemo } from "react";
+function useFairysValtioForm(props) {
+    const { form, rules, formData, hideState, isDeepCopy = true, ...rest } = props;
+    const formInstance = useFairysValtioFormInstance(form);
+    formInstance.rules = rules;
+    useMemo(()=>formInstance.ctor({
+            formData,
+            hideState,
+            isDeepCopy
+        }), []);
+    return {
+        ...rest,
+        formInstance
+    };
+}
+export { useFairysValtioForm };

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

@@ -0,0 +1,64 @@
+import { MObject } from '../../interface';
+import { RuleItem, ValidateFieldsError, Values } from 'async-validator';
+/**表单实例*/
+export declare class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+    /**状态*/
+    state: T;
+    /**
+     * 错误信息
+     */
+    errorState: Record<PropertyKey, string[]>;
+    /**隐藏状态*/
+    hideState: Record<PropertyKey, boolean>;
+    /**初始化表单值*/
+    ctor: (options?: {
+        formData?: Partial<T>;
+        hideState?: Record<PropertyKey, boolean>;
+        isDeepCopy?: boolean;
+    }) => void;
+    /**
+     * 更新数据
+     * @param state 更新数据对象
+     * @param isValidate 是否验证(可选)
+     */
+    updated: <M = T>(state: Partial<M>, isValidate?: boolean) => void;
+    /**
+     * 更新行数据的隐藏信息
+     * @param objectHideInfo 行数据隐藏信息对象
+     */
+    updatedHideInfo: (objectHideInfo: Record<PropertyKey, boolean>) => this;
+    /**
+     * 清理隐藏信息
+     */
+    clearHideInfo: (fields?: PropertyKey[]) => this;
+    /**
+     * 更新行数据的错误信息
+     * @param objectErrorInfo 行数据错误信息对象
+     */
+    updatedErrorInfo: (objectErrorInfo: Record<PropertyKey, string[]>) => this;
+    /**
+     * 清理错误信息
+     */
+    clearErrorInfo: (fields?: PropertyKey[]) => this;
+    /**
+     * 清理所有数据
+     */
+    clear: () => void;
+    /**列规则 */
+    rules: Record<PropertyKey, ((formData: T, instance: FairysValtioFormInstance<T>) => RuleItem[] | Promise<RuleItem[]>) | RuleItem[]>;
+    /**规则验证
+     * @param fields 列字段数组(可选)
+     * @param isReturn 是否返回验证结果(可选)
+     */
+    validate: (fields?: PropertyKey[], isReturn?: boolean) => Promise<ValidateFieldsError | Values>;
+}
+/**声明实例*/
+export declare function useFairysValtioFormInstance<T extends MObject<T> = object>(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 useFairysValtioFormInstanceContextState<T extends MObject<T> = object>(): [T, Record<PropertyKey, string[]>, FairysValtioFormInstance<T>, any, any];
+/**隐藏组件状态取值*/
+export declare function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = object>(): [Record<PropertyKey, boolean>, FairysValtioFormInstance<T>, any];

package/esm/form/instance/index.js

@@ -0,0 +1,140 @@
+import { createContext, useContext, useRef } from "react";
+import { proxy, ref as external_valtio_ref, snapshot, useSnapshot } from "valtio";
+import async_validator from "async-validator";
+import { copy } from "fast-copy";
+class FairysValtioFormInstance {
+    state = proxy({});
+    errorState = proxy({});
+    hideState = proxy({});
+    ctor = (options)=>{
+        const { formData, hideState, isDeepCopy = true } = options || {};
+        this.errorState = proxy({});
+        this.hideState = proxy(hideState ? copy(hideState) : {});
+        if (isDeepCopy) this.state = proxy(formData ? copy(formData) : {});
+        else if (formData) this.state = proxy(formData);
+    };
+    updated = (state, isValidate = true)=>{
+        const keys = Object.keys(state);
+        for(let index = 0; index < keys.length; index++){
+            const key = keys[index];
+            this.state[key] = state[key];
+        }
+        if (isValidate) this.validate(keys, false);
+    };
+    updatedHideInfo = (objectHideInfo)=>{
+        const keys = Object.keys(objectHideInfo);
+        for(let index = 0; index < keys.length; index++){
+            const field = keys[index];
+            this.hideState[field] = objectHideInfo[field];
+        }
+        return this;
+    };
+    clearHideInfo = (fields)=>{
+        let _fields = fields;
+        if (!Array.isArray(fields)) _fields = Object.keys(this.hideState);
+        for(let index = 0; index < _fields.length; index++){
+            const field = _fields[index];
+            delete this.hideState[field];
+        }
+        return this;
+    };
+    updatedErrorInfo = (objectErrorInfo)=>{
+        const keys = Object.keys(objectErrorInfo);
+        for(let index = 0; index < keys.length; index++){
+            const field = keys[index];
+            this.errorState[field] = objectErrorInfo[field];
+        }
+        return this;
+    };
+    clearErrorInfo = (fields)=>{
+        let _fields = fields;
+        if (!Array.isArray(fields)) _fields = Object.keys(this.errorState);
+        for(let index = 0; index < _fields.length; index++){
+            const field = _fields[index];
+            delete this.errorState[field];
+        }
+        return this;
+    };
+    clear = ()=>{
+        this.state = proxy({});
+        this.errorState = proxy({});
+        this.hideState = proxy({});
+    };
+    rules = {};
+    validate = async (fields, isReturn = true)=>{
+        let _fields = fields;
+        const _formData = snapshot(this.state);
+        if (!this.rules) return Promise.resolve({
+            ..._formData
+        });
+        const rules = {};
+        let isNeedValidate = false;
+        if (!fields || Array.isArray(fields) && 0 === fields.length) _fields = Object.keys(this.rules);
+        for(let index = 0; index < _fields.length; index++){
+            isNeedValidate = true;
+            const element = _fields[index];
+            const rule = this.rules[element];
+            if ('function' == typeof rule) {
+                const _rules = await rule(_formData, this);
+                rules[element] = _rules;
+            } else if (Array.isArray(rule)) rules[element] = rule;
+        }
+        if (!isNeedValidate) {
+            console.warn('no rules to validate');
+            return Promise.resolve({
+                ..._formData
+            });
+        }
+        return new Promise((resolve, reject)=>{
+            new async_validator({
+                ...rules
+            }).validate({
+                ..._formData
+            }, (errors, fields)=>{
+                for(let index = 0; index < _fields.length; index++){
+                    const field = _fields[index];
+                    const fidError = Array.isArray(errors) ? errors.filter((item)=>item.field === field) : void 0;
+                    if (fidError) this.errorState[field] = external_valtio_ref(fidError.map((item)=>item.message || ''));
+                    else delete this.errorState[field];
+                }
+                if (isReturn) if (errors) reject({
+                    errors,
+                    fields
+                });
+                else resolve(fields);
+            });
+        });
+    };
+}
+function useFairysValtioFormInstance(instance) {
+    const ref = useRef();
+    if (!ref.current) if (instance) ref.current = instance;
+    else ref.current = new FairysValtioFormInstance();
+    return ref.current;
+}
+const FairysValtioFormInstanceContext = createContext(new FairysValtioFormInstance());
+function useFairysValtioFormInstanceContext() {
+    return useContext(FairysValtioFormInstanceContext);
+}
+function useFairysValtioFormInstanceContextState() {
+    const instance = useFairysValtioFormInstanceContext();
+    const state = useSnapshot(instance.state);
+    const errorState = useSnapshot(instance.errorState);
+    return [
+        state,
+        errorState,
+        instance,
+        state.__defaultValue,
+        errorState.__defaultValue
+    ];
+}
+function useFairysValtioFormInstanceContextHideState() {
+    const instance = useFairysValtioFormInstanceContext();
+    const hideState = useSnapshot(instance.hideState);
+    return [
+        hideState,
+        instance,
+        hideState.__defaultValue
+    ];
+}
+export { FairysValtioFormInstance, FairysValtioFormInstanceContext, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState };