@fairys/valtio-form-basic 0.0.12 → 0.0.13

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

@@ -0,0 +1,224 @@
+/**表单项*/
+import { MObject } from '../common/interface';
+import React from 'react';
+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> {
+    /**平台*/
+    platform?: 'pc' | 'rn' | 'taro';
+    /**
+     * 表单项名称 ，字段需要和存储的字段路径一致
+     *
+     * @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;
+    /**传递组件字段*/
+    valuePropName?: string;
+    /**取值字段(默认 valuePropName字段值)*/
+    getValuePath?: 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?: FairysValtioFormLayoutContextOptions['errorLayout'];
+    /**label显示模式*/
+    labelMode?: FairysValtioFormLayoutContextOptions['labelMode'];
+    /**额外内容*/
+    extra?: React.ReactNode;
+    /**底部提示内容*/
+    helpText?: React.ReactNode;
+    /**
+     * 表单项占据列数
+     * @default 1
+     */
+    colSpan?: number;
+    /**
+     * 表单项占据行数
+     * @default 1
+     */
+    rowSpan?: number;
+    /**是否必填*/
+    isRequired?: boolean;
+    /**是否显示冒号*/
+    showColon?: boolean;
+    /**底部显示边框*/
+    itemBorderType?: FairysValtioFormLayoutContextOptions['itemBorderType'];
+    /**边框颜色*/
+    itemBorderColor?: React.CSSProperties['borderColor'];
+    /**是否校验失败时显示红色边框*/
+    isInvalidBorderRed?: boolean;
+    /**是否校验失败时显示红色文本*/
+    isInvalidTextRed?: boolean;
+    /**输入框属性*/
+    attrs?: any;
+    /**是否拼接父级字段名*/
+    isJoinParentField?: boolean;
+    /**校验规则*/
+    rules?: RuleItem[];
+}
+/**
+ * 处理表单表单项属性
+ *
+ * @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 { label, extra, helpText } = props
+  const {
+    itemClassName, itemStyle, containerClassName, itemLabelClassName, itemLabelStyle,
+    itemBodyClassName, itemBodyStyle, itemInputClassName, itemExtraClassName, errorClassName, helpClassName,
+    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}>
+          {label}
+        </View>
+        <View className={itemBodyClassName} style={itemBodyStyle}>
+          <View className={itemInputClassName}>
+            {children}
+          </View>
+          {extra ? <View className={itemExtraClassName}>{extra}</View> : <Fragment />}
+          {itemBorderType === 'body' && isInvalid ? <View className={errorClassName}>{error}</View> : <Fragment />}
+        </View>
+      </View>
+      {helpText ? <View className={helpClassName}>{helpText}</View> : <Fragment />}
+      {isInvalid && itemBorderType !== 'body' ? <View className={errorClassName}>{error}</View> : <Fragment />}
+    </View>
+   </FairysValtioFormParentAttrsContext.Provider>
+  );
+}
+ * ```
+ *
+*/
+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;
+    /**边框类型*/
+    itemBorderType: FairysValtioFormLayoutContextOptions['itemBorderType'];
+    /**值改变事件*/
+    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[];
+    /**拼接父级字段名后得到的表单项名称*/
+    _name?: string;
+    /**表单项名称*/
+    name?: string;
+    /**表单项ID*/
+    id?: string;
+    /**表单项路径*/
+    paths?: (string | number)[];
+    /**父级字段名*/
+    parentName?: string;
+    /**表单属性名实例*/
+    formAttrsNameInstance: FairysValtioFormParentAttrs;
+    /**表单项类名*/
+    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;
+}
+/**
+ * 没有样式的表单项属性，仅返回基础输入组件参数
+ *
+ * @example
+ *
+ *```tsx
+import { Fragment } from 'react'
+import { useFairysValtioFormItemAttrs, FairysValtioFormParentAttrsContext } from "@fairys/valtio-form"
+import type { FairysValtioFormItemAttrsProps } from "@fairys/valtio-form"
+export interface FormItemProps extends FairysValtioFormItemAttrsProps{}
+
+export const FormItem = (props: FormItemProps) => {
+  const { children , formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props)
+  return <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+    {children}
+  </FairysValtioFormParentAttrsContext.Provider>
+}
+ * ```
+*/
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): {
+    value: unknown;
+    error: string[];
+    onValueChange: (event: any) => void;
+    state: T;
+    errorState: Record<PropertyKey, string[]>;
+    formInstance: FairysValtioFormInstance<T>;
+    _name: string;
+    name: string;
+    id: string;
+    paths: (number | symbol)[] | (string | number)[];
+    parentName: string;
+    formAttrsNameInstance: FairysValtioFormParentAttrs;
+    children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
+};

package/lib/form/form.item.js

@@ -0,0 +1,321 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useFairysValtioFormItemNoStyleAttrs: ()=>useFairysValtioFormItemNoStyleAttrs,
+    useFairysValtioFormItemAttrs: ()=>useFairysValtioFormItemAttrs
+});
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const external_clsx_namespaceObject = require("clsx");
+var external_clsx_default = /*#__PURE__*/ __webpack_require__.n(external_clsx_namespaceObject);
+const index_js_namespaceObject = require("../common/instance/index.js");
+const external_layout_js_namespaceObject = require("./layout.js");
+const hooks_index_js_namespaceObject = require("../common/hooks/index.js");
+const utils_index_js_namespaceObject = require("../common/utils/index.js");
+function useFairysValtioFormItemAttrs(props) {
+    const [layoutAttrs] = (0, external_layout_js_namespaceObject.useFairysValtioFormLayoutContext)();
+    const colCount = layoutAttrs.colCount || 1;
+    const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
+    const parent_errorLayout = layoutAttrs.errorLayout || 'bottom-right';
+    const parent_formItemClassName = layoutAttrs.formItemClassName;
+    const parent_formItemLabelClassName = layoutAttrs.formItemLabelClassName;
+    const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
+    const parent_formItemStyle = layoutAttrs.formItemStyle;
+    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_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: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
+        name,
+        isJoinParentField
+    });
+    const [state, errorState, formInstance] = (0, index_js_namespaceObject.useFairysValtioFormInstanceContextState)();
+    const value = (0, external_react_namespaceObject.useMemo)(()=>(0, utils_index_js_namespaceObject.get)(state, paths), [
+        state,
+        paths
+    ]);
+    const error = errorState[_name];
+    const _formItemRules = formInstance.rules?.[_name];
+    const id = (0, hooks_index_js_namespaceObject.useId)(_name);
+    formInstance.nameToPaths[_name] = paths;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
+            formInstance.removeRules(_name);
+        };
+    }, [
+        _name,
+        rules
+    ]);
+    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 && getValuePath in target) _value = (0, utils_index_js_namespaceObject.get)(target, (0, utils_index_js_namespaceObject.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);
+    };
+    const baseControl = {
+        ...attrs,
+        name,
+        id,
+        [valuePropName]: value,
+        [trigger]: onValueChange
+    };
+    const isRequired = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (_isRequired) return _isRequired;
+        if (Array.isArray(rules) && rules.length) return rules.some((rule)=>rule.required);
+        if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) return _formItemRules.some((rule)=>rule.required);
+        return false;
+    }, [
+        rules,
+        formInstance,
+        _formItemRules
+    ]);
+    const isInvalid = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (Array.isArray(error) && error.length) return true;
+        return false;
+    }, [
+        error
+    ]);
+    const item_cls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys-valtio-form-item fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__p-_zkh1_4px_zhk2_ fairystaroform__text-_zkh1_12px_zhk2_ fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all', {
+            'fairys-valtio-form-item-invalid': isInvalid,
+            'fairys-valtio-form-item-invalid-text-red': isInvalid && isInvalidTextRed,
+            'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && 'bottom' === itemBorderType,
+            'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200': 'bottom' === itemBorderType,
+            [labelMode]: labelMode
+        }, parent_formItemClassName, className), [
+        className,
+        parent_formItemClassName,
+        labelMode,
+        itemBorderType,
+        isInvalid,
+        isInvalidBorderRed
+    ]);
+    const itemContainer_cls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys-valtio-form-item-container fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__flex-1 fairystaroform__h-full fairystaroform__flex fairystaroform__box-border', {
+            'fairystaroform__flex-row fairystaroform__items-center fairystaroform__justify-between fairystaroform__gap-_zkh1_8px_zhk2_': 'between' === labelMode,
+            'fairystaroform__flex-col fairystaroform__gap-_zkh1_4px_zhk2_': 'top' === labelMode,
+            'fairystaroform__flex-row fairystaroform__gap-_zkh1_8px_zhk2_': 'left' === labelMode
+        }, labelClassName), [
+        labelClassName,
+        labelMode
+    ]);
+    const itemLabel_cls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys-valtio-form-item-label fairystaroform__transition-all fairystaroform__duration-300  fairystaroform__text-gray-800 fairystaroform__flex fairystaroform__items-center fairystaroform__relative fairystaroform__box-border', {
+            'fairystaroform__justify-start': 'left' !== labelMode,
+            'fairystaroform__justify-end': 'left' === labelMode,
+            required: isRequired,
+            'show-colon': showColon
+        }, labelClassName, parent_formItemLabelClassName), [
+        labelClassName,
+        parent_formItemLabelClassName,
+        labelMode,
+        isRequired,
+        showColon
+    ]);
+    const itemBody_cls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('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__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ': 'body' === itemBorderType,
+            'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && 'body' === itemBorderType
+        }, parent_formItemBodyClassName, bodyClassName), [
+        bodyClassName,
+        labelMode,
+        itemBorderType,
+        parent_formItemBodyClassName,
+        isInvalid,
+        isInvalidBorderRed
+    ]);
+    const itemInput_cls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('fairys-valtio-form-item-body-input fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__min-h-_zkh1_32px_zhk2_ fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-1 fairystaroform__box-border', {
+            'fairystaroform__justify-end fairystaroform__text-right': 'between' === labelMode,
+            'fairystaroform__justify-start fairystaroform__text-left fairystaroform__items-center': 'between' !== labelMode
+        }), [
+        labelMode
+    ]);
+    const itemExtra_cls = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('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 = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('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 = (0, external_react_namespaceObject.useMemo)(()=>external_clsx_default()('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 && '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__px-_zkh1_4px_zhk2_': 'pc' === platform
+        }), [
+        errorLayout,
+        platform
+    ]);
+    const styleBase = (0, external_react_namespaceObject.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,
+        itemBorderType,
+        onValueChange,
+        colSpan,
+        rowSpan,
+        colCount,
+        labelMode,
+        errorLayout,
+        isRequired,
+        state,
+        errorState,
+        formInstance,
+        error,
+        _name,
+        name,
+        id,
+        paths,
+        parentName,
+        formAttrsNameInstance,
+        itemClassName: item_cls,
+        itemStyle: {
+            ...itemBorderColor && 'bottom' === itemBorderType ? {
+                borderBottomColor: itemBorderColor
+            } : {},
+            ...parent_formItemStyle || {},
+            ...styleBase,
+            ...style || {}
+        },
+        containerClassName: itemContainer_cls,
+        itemLabelClassName: itemLabel_cls,
+        itemLabelStyle: {
+            ...parent_formItemLabelStyle || {},
+            ...labelStyle || {}
+        },
+        itemBodyClassName: itemBody_cls,
+        itemBodyStyle: {
+            ...itemBorderColor && 'body' === itemBorderType ? {
+                borderBottomColor: itemBorderColor
+            } : {},
+            ...parent_formItemBodyStyle || {},
+            ...bodyStyle || {}
+        },
+        itemInputClassName: itemInput_cls,
+        itemExtraClassName: itemExtra_cls,
+        errorClassName: itemError_cls,
+        helpClassName: itemHelp_cls,
+        children: /*#__PURE__*/ external_react_default().isValidElement(children) ? /*#__PURE__*/ external_react_default().cloneElement(children, {
+            ...baseControl
+        }) : children
+    };
+}
+function useFairysValtioFormItemNoStyleAttrs(props) {
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules } = props;
+    const [state, errorState, formInstance] = (0, index_js_namespaceObject.useFairysValtioFormInstanceContextState)();
+    const { name: _name, paths, parentName, formAttrsNameInstance } = (0, hooks_index_js_namespaceObject.useFairysValtioFormAttrsName)({
+        name,
+        isJoinParentField
+    });
+    const id = (0, hooks_index_js_namespaceObject.useId)(_name);
+    const value = (0, external_react_namespaceObject.useMemo)(()=>(0, utils_index_js_namespaceObject.get)(state, paths), [
+        state,
+        paths
+    ]);
+    const error = errorState[_name];
+    formInstance.nameToPaths[_name] = paths;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
+            formInstance.removeRules(_name);
+        };
+    }, [
+        _name,
+        rules
+    ]);
+    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 && getValuePath in target) _value = (0, utils_index_js_namespaceObject.get)(target, (0, utils_index_js_namespaceObject.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);
+    };
+    const baseControl = {
+        ...attrs,
+        name,
+        id,
+        [valuePropName]: value,
+        [trigger]: onValueChange
+    };
+    return {
+        value,
+        error,
+        onValueChange,
+        state,
+        errorState,
+        formInstance,
+        _name,
+        name,
+        id,
+        paths,
+        parentName,
+        formAttrsNameInstance,
+        children: /*#__PURE__*/ external_react_default().isValidElement(children) ? /*#__PURE__*/ external_react_default().cloneElement(children, {
+            ...baseControl
+        }) : children
+    };
+}
+exports.useFairysValtioFormItemAttrs = __webpack_exports__.useFairysValtioFormItemAttrs;
+exports.useFairysValtioFormItemNoStyleAttrs = __webpack_exports__.useFairysValtioFormItemNoStyleAttrs;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useFairysValtioFormItemAttrs",
+    "useFairysValtioFormItemNoStyleAttrs"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/form/form.js

@@ -0,0 +1,53 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useFairysValtioForm: ()=>useFairysValtioForm
+});
+const index_js_namespaceObject = require("../common/instance/index.js");
+const external_react_namespaceObject = require("react");
+function useFairysValtioForm(props, ref) {
+    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+    const formInstance = (0, index_js_namespaceObject.useFairysValtioFormInstance)(form);
+    formInstance.rules = rules;
+    (0, external_react_namespaceObject.useMemo)(()=>formInstance.ctor({
+            formData,
+            hideState,
+            initFormDataType
+        }), []);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>formInstance);
+    (0, external_react_namespaceObject.useEffect)(()=>()=>formInstance.clear(), []);
+    return {
+        ...rest,
+        formInstance
+    };
+}
+exports.useFairysValtioForm = __webpack_exports__.useFairysValtioForm;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useFairysValtioForm"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});