@fairys/taro-tools-simple-form-ui 0.0.8 → 0.0.10

package/esm/components/picker/index.d.ts

@@ -1,8 +1,8 @@
-import { TaroPickerProps, PickerOptions } from '@nutui/nutui-react-taro';
+import { TaroPickerProps, PickerOptions, PickerOption } from '@nutui/nutui-react-taro';
 export interface FairysTaroPickerProps extends Omit<Partial<TaroPickerProps>, 'value' | 'onChange'> {
     placeholder?: string;
-    value?: PickerOptions;
-    onChange?: (value: PickerOptions) => void;
+    value?: PickerOptions | PickerOption;
+    onChange?: (value: PickerOptions | PickerOption) => void;
     bodyClassName?: string;
     bodyStyle?: React.CSSProperties;
 }

package/esm/components/picker/index.js

@@ -4,14 +4,25 @@ import { Picker } from "@nutui/nutui-react-taro";
 import { useMemo, useState } from "react";
 import { FairysTaroTextClearBase } from "../clear/index.js";
 const FairysTaroPickerBase = (props)=>{
-    const { placeholder = "\u8BF7\u9009\u62E9", bodyClassName, bodyStyle, className, style, value, onChange, ...rest } = props;
+    const { placeholder = "\u8BF7\u9009\u62E9", bodyClassName, bodyStyle, className, style, value, onChange, options, ...rest } = props;
     const [visible, setVisible] = useState(false);
+    const isSingle = (options || []).length <= 1;
     const _renderValue = useMemo(()=>{
+        if (isSingle) return value?.label || '';
         if (Array.isArray(value)) return value.map((item)=>item.label).join(' / ');
     }, [
         value
     ]);
     const _value = useMemo(()=>{
+        if (isSingle) {
+            const _value = value?.value || '';
+            if ('number' == typeof _value) return [
+                _value
+            ];
+            return [
+                _value
+            ].filter(Boolean);
+        }
         if (Array.isArray(value)) return value.map((item)=>item.value);
     }, [
         value
@@ -29,6 +40,7 @@ const FairysTaroPickerBase = (props)=>{
             }),
             /*#__PURE__*/ jsx(Picker, {
                 ...rest,
+                options: options,
                 className: `fairys-taro-picker-body fairystaroform__text-left ${bodyClassName || ''}`,
                 style: bodyStyle,
                 value: _value,
@@ -36,7 +48,8 @@ const FairysTaroPickerBase = (props)=>{
                 onClose: ()=>setVisible(false),
                 onConfirm: (selectedOptions)=>{
                     setVisible(false);
-                    onChange?.(selectedOptions);
+                    if (isSingle) onChange?.(selectedOptions?.[0]);
+                    else onChange?.(selectedOptions);
                 }
             })
         ]

package/esm/components/popup.search/base.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { View } from "@tarojs/components";
-import { Button, Checkbox, Input } from "@nutui/nutui-react-taro";
+import { Button, Checkbox, ConfigProvider, Input, Loading } from "@nutui/nutui-react-taro";
 import { Fragment } from "react";
 import { useFairysTaroPopupSearchBaseInstanceContext } from "./instance.js";
 import { Del, Search } from "@nutui/icons-react-taro";
@@ -51,6 +51,7 @@ function FairysTaroPopupSearchInputBase() {
         sync: true
     });
     const search = state.search || '';
+    const loading = state.loading;
     return /*#__PURE__*/ jsxs(View, {
         className: "fairys-taro-popup-search-content-header fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center fairystaroform__flex-nowrap fairystaroform__px-1 fairystaroform__box-border fairystaroform__pr-4 fairystaroform__border-b-1 fairystaroform__border-b-solid fairystaroform__border-b-gray-200",
         children: [
@@ -59,10 +60,25 @@ function FairysTaroPopupSearchInputBase() {
                 value: search,
                 onChange: instance.onSearch
             }),
-            /*#__PURE__*/ jsx(View, {
-                children: /*#__PURE__*/ jsx(Search, {
-                    className: "fairys-taro-popup-search-content-header-search fairystaroform__text-gray-600 fairystaroform__cursor-pointer"
-                })
+            /*#__PURE__*/ jsxs(View, {
+                className: "fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center",
+                style: {
+                    gap: 4
+                },
+                children: [
+                    loading ? /*#__PURE__*/ jsx(ConfigProvider, {
+                        theme: {
+                            nutuiLoadingIconColor: '#396aca',
+                            nutuiLoadingIconSize: '24px'
+                        },
+                        children: /*#__PURE__*/ jsx(Loading, {
+                            type: "spinner"
+                        })
+                    }) : /*#__PURE__*/ jsx(Fragment, {}),
+                    /*#__PURE__*/ jsx(Search, {
+                        className: "fairys-taro-popup-search-content-header-search fairystaroform__text-gray-600 fairystaroform__cursor-pointer"
+                    })
+                ]
             })
         ]
     });

package/esm/components/popup.search/index.js

@@ -55,7 +55,7 @@ function FairysTaroPopupSearchBodyBase() {
         columns
     ]);
     useEffect(()=>{
-        if (visible && 'function' == typeof instance.onLoadData) instance.onSearch('');
+        if (visible && 'function' == typeof instance.onLoadData) instance.onSearch('', 0);
     }, [
         visible
     ]);
@@ -75,7 +75,7 @@ function FairysTaroPopupSearchBodyBase() {
     });
 }
 function FairysTaroPopupSearchBase(props) {
-    const { placeholder = "\u8BF7\u9009\u62E9", className, style, value, onChange, onLoadData, otherRequestParams, maxWidth, maxHeight, renderText, renderListItemText, showRowDeleteButton = true, showSearch = true, renderList, options, columns, mode = 'single', rowKey = 'value', displayField = 'label', renderType = 'list', maxTagCount = 9, tableProps = {}, useTableProps, isNeedManage = false, isUseOptionsChecked = true, ...rest } = props;
+    const { placeholder = "\u8BF7\u9009\u62E9", className, style, value, onChange, onLoadData, otherRequestParams, maxWidth, maxHeight, renderText, renderListItemText, showRowDeleteButton = true, showSearch = true, renderList, options, columns, mode = 'single', rowKey = 'value', displayField = 'label', renderType = 'list', maxTagCount = 9, tableProps = {}, useTableProps, isNeedManage = false, isUseOptionsChecked = true, isFirstLoadAfterOptions = false, ...rest } = props;
     const [state, instance] = useFairysTaroPopupSearchBaseInstance();
     instance.maxWidth = maxWidth;
     instance.maxHeight = maxHeight;
@@ -89,6 +89,7 @@ function FairysTaroPopupSearchBase(props) {
     instance.useTableProps = useTableProps;
     instance.isNeedManage = isNeedManage;
     instance.isUseOptionsChecked = isUseOptionsChecked;
+    instance.isFirstLoadAfterOptions = isFirstLoadAfterOptions;
     instance.rowKey = rowKey;
     instance.displayField = displayField;
     instance.mode = mode;

package/esm/components/popup.search/instance.d.ts

@@ -11,6 +11,8 @@ export declare class FairysTaroPopupSearchBaseInstanceMount<T = any> {
     renderListItemText?: (data: T, instance: FairysTaroPopupSearchBaseInstanceMount<T>) => React.ReactNode;
     /**自定义渲染列表数据*/
     renderList?: (dataList: T[], type: 'select' | 'manage', instance: FairysTaroPopupSearchBaseInstanceMount<T>) => React.ReactNode;
+    /**onLoadData仅第一次成功加载，之后按照传递 options 处理*/
+    isFirstLoadAfterOptions?: boolean;
     /**选择模式*/
     mode?: 'multiple' | 'single';
     /**列表项的唯一键值*/
@@ -77,6 +79,8 @@ export interface FairysTaroPopupSearchBaseInstanceState<T = any> {
     operationStatus: 'manage' | 'select';
     /**选中列表数据*/
     manageSelectedDataList: T[];
+    /**是否第一次成功加载并存在数据*/
+    isFirstLoadSuccess?: boolean;
     /**全选按钮是否选中状态*/
     allChecked: boolean;
     /**选择模式
@@ -85,6 +89,8 @@ export interface FairysTaroPopupSearchBaseInstanceState<T = any> {
     mode?: 'multiple' | 'single';
     /**列表列配置*/
     columns?: TableColumnProps[];
+    /**是否正在加载数据*/
+    loading?: boolean;
 }
 export declare class FairysTaroPopupSearchBaseInstance<T = any> extends FairysTaroPopupSearchBaseInstanceMount<T> {
     /**窗口高度*/
@@ -102,7 +108,10 @@ export declare class FairysTaroPopupSearchBaseInstance<T = any> extends FairysTa
     /**判断是否使用 options 参数,并且不是管理模式*/
     isUseOptions: () => boolean;
     /**搜索*/
-    onSearch: (keyword: string) => Promise<void>;
+    private _onSearch;
+    timer: NodeJS.Timeout;
+    /**搜索*/
+    onSearch: (keyword: string, count?: number) => Promise<void>;
     /**保存数据*/
     onSave: () => void;
     /**清空数据*/

package/esm/components/popup.search/instance.js

@@ -8,6 +8,7 @@ class FairysTaroPopupSearchBaseInstanceMount {
     renderText;
     renderListItemText;
     renderList;
+    isFirstLoadAfterOptions;
     mode = 'single';
     rowKey = 'value';
     displayField = 'label';
@@ -42,7 +43,9 @@ class FairysTaroPopupSearchBaseInstance extends FairysTaroPopupSearchBaseInstanc
         _tempValue: void 0,
         operationStatus: 'select',
         manageSelectedDataList: [],
-        allChecked: false
+        allChecked: false,
+        isFirstLoadSuccess: false,
+        loading: false
     });
     ctor() {
         const isWeb = taro.getEnv() === taro.ENV_TYPE.WEB;
@@ -70,22 +73,27 @@ class FairysTaroPopupSearchBaseInstance extends FairysTaroPopupSearchBaseInstanc
         if (Array.isArray(this.options) && !this.onLoadData && !this.isNeedManage) return this.isUseOptionsChecked;
         return false;
     };
-    onSearch = async (keyword)=>{
-        this.state.search = keyword;
+    _onSearch = async (keyword)=>{
         const _keyword = `${keyword || ''}`.trim();
         try {
-            if (this.onLoadData && 'select' === this.state.operationStatus) {
-                await new Promise((resolve)=>setTimeout(resolve, 500));
+            let isRequest = this.onLoadData && 'select' === this.state.operationStatus;
+            if (isRequest && this.state.isFirstLoadSuccess && this.isFirstLoadAfterOptions) isRequest = false;
+            if (isRequest) {
+                this.state.loading = true;
                 const search = {
                     keyword: _keyword
                 };
                 const dataList = await this.onLoadData(this.otherRequestParams?.(search, this) || search, this);
-                if (Array.isArray(dataList)) this.updateState({
-                    _tempFilterDataList: dataList || [],
-                    dataList: dataList || []
-                });
-                else this.updateState({
-                    _tempFilterDataList: []
+                if (Array.isArray(dataList)) {
+                    const isFirstLoadSuccess = !!dataList.length && !_keyword;
+                    this.updateState({
+                        _tempFilterDataList: dataList || [],
+                        dataList: dataList || [],
+                        isFirstLoadSuccess
+                    });
+                } else this.updateState({
+                    _tempFilterDataList: [],
+                    isFirstLoadSuccess: false
                 });
             } else if ('select' === this.state.operationStatus) {
                 if (!_keyword) return void this.updateState({
@@ -117,8 +125,22 @@ class FairysTaroPopupSearchBaseInstance extends FairysTaroPopupSearchBaseInstanc
             }
         } catch (error) {
             console.error(error);
+        } finally{
+            this.state.loading = false;
         }
     };
+    timer;
+    onSearch = async (keyword, count)=>{
+        this.state.search = keyword;
+        if (this.onLoadData && 'select' === this.state.operationStatus) if (0 === count) this._onSearch(keyword);
+        else {
+            clearTimeout(this.timer);
+            this.timer = setTimeout(()=>{
+                this._onSearch(this.state.search || '');
+            }, 800);
+        }
+        else this._onSearch(this.state.search || '');
+    };
     onSave = ()=>{
         if ('multiple' === this.mode) {
             const dataList = this.state._tempValue || [];
@@ -248,7 +270,8 @@ class FairysTaroPopupSearchBaseInstance extends FairysTaroPopupSearchBaseInstanc
             search: '',
             _tempValue: this.state.value,
             operationStatus: 'select',
-            _tempFilterDataList: this.state.dataList || []
+            _tempFilterDataList: this.state.dataList || [],
+            isFirstLoadSuccess: false
         });
     };
     updateOperationStatus = ()=>{

package/esm/form/form.d.ts

@@ -1,33 +1,24 @@
 import { MObject } from '../interface';
-import { FairysTaroValtioFormInstance, useFairysTaroValtioFormInstance, useFairysTaroValtioFormInstanceContext, useFairysTaroValtioFormInstanceContextState, useFairysTaroValtioFormInstanceContextHideState } from './instance';
-import { type ReactNode } from 'react';
-import { FairysTaroValtioFormLayoutProps } from './layout';
-import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem } from './form.item';
+import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem, FairysTaroValtioFormItemBase } from './form.item';
+import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic';
+import type { FairysValtioFormAttrsProps } from '@fairys/valtio-form-basic';
+export * from '@fairys/valtio-form-basic';
+export * from './form.item';
+export * from './layout';
 export * from './item.config';
-export interface FairysTaroValtioFormProps<T extends MObject<T> = object> extends FairysTaroValtioFormLayoutProps {
-    /**表单实例*/
-    form?: FairysTaroValtioFormInstance<T>;
-    /**子元素*/
-    children: ReactNode;
-    /**表单项规则*/
-    rules?: FairysTaroValtioFormInstance<T>['rules'];
-    /**表单初始值*/
-    formData?: FairysTaroValtioFormInstance<T>['state'];
-    /**表单隐藏状态*/
-    hideState?: FairysTaroValtioFormInstance<T>['hideState'];
-    /**formData 是否进行深度拷贝，如果不是则直接把 formData 赋值到 state ，否则使用 copy 方法深度拷贝后赋值 */
-    isDeepCopy?: boolean;
+export interface FairysTaroValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> {
 }
 export declare function FairysTaroValtioForm<T extends MObject<T> = object>(props: FairysTaroValtioFormProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace FairysTaroValtioForm {
-    var useForm: typeof useFairysTaroValtioFormInstance;
-    var useFormState: typeof useFairysTaroValtioFormInstanceContextState;
-    var useFormHideState: typeof useFairysTaroValtioFormInstanceContextHideState;
-    var useFormInstance: typeof useFairysTaroValtioFormInstanceContext;
+    var useForm: typeof useFairysValtioFormInstance;
+    var useFormState: typeof useFairysValtioFormInstanceContextState;
+    var useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
+    var useFormInstance: typeof useFairysValtioFormInstanceContext;
     var FormItemListItem: (props: {
         items: import("./item.config").FairysTaroValtioInputConfigType[];
     }) => import("react/jsx-runtime").JSX.Element;
     var FormItemConfig: (config: import("./item.config").FairysTaroValtioInputConfigType) => import("react/jsx-runtime").JSX.Element;
+    var FormItemBase: typeof FairysTaroValtioFormItemBase;
     var FormItem: typeof FairysTaroValtioFormItem;
     var FormHideItem: typeof FairysTaroValtioFormHideItem;
 }

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

@@ -1,57 +1,18 @@
 /**表单项*/
 import { MObject } from '../interface';
 import type { ViewProps } from '@tarojs/components';
-import React from 'react';
-import { FairysTaroValtioFormInstance } from './instance';
-import { FairysTaroValtioFormLayoutContextOptions } from './layout';
-export interface FairysTaroValtioFormItemProps<T extends MObject<T> = object> extends ViewProps {
-    /**表单项名称*/
-    name: string;
-    /**表单项标签*/
-    label?: string;
-    /**是否使用样式*/
+import type { FairysValtioFormItemAttrsProps } from '@fairys/valtio-form-basic';
+export interface FairysTaroValtioFormItemProps<T extends MObject<T> = object> extends Omit<ViewProps, 'style'>, FairysValtioFormItemAttrsProps {
+    /**是否使用控制隐藏的表单项*/
+    isHide?: boolean;
+    /**是否使用无样式表单项*/
     noStyle?: boolean;
-    /**传递组件字段*/
-    valuePropName?: string;
-    /**自定义获取值*/
-    getValueFromEvent?: (event: any, form: FairysTaroValtioFormInstance<T>) => any;
-    /**值格式化*/
-    formatValue?: (value: any, form: FairysTaroValtioFormInstance<T>, event: any) => any;
-    /**触发数据更新之后触发（用于数据联动之类的）*/
-    onAfterUpdate?: (value: any, form: FairysTaroValtioFormInstance<T>, event: any) => void;
-    /**事件名称*/
-    trigger?: string;
-    style?: React.CSSProperties;
-    labelClassName?: string;
-    labelStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    /**规则校验失败错误提示位置*/
-    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?: FairysTaroValtioFormLayoutContextOptions['borderedType'];
-    /**输入框属性*/
-    attrs?: any;
 }
-export declare function FairysTaroValtioFormItem<T extends MObject<T> = object>(props: FairysTaroValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare function FairysTaroValtioFormHideItem<T extends MObject<T> = object>(props: FairysTaroValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;
+/**普通表单项*/
+export declare function FairysTaroValtioFormItem<T extends MObject<T> = object>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**控制隐藏的表单项*/
+export declare function FairysTaroValtioFormHideItem<T extends MObject<T> = object>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**无样式表单项*/
+export declare function FairysTaroValtioFormItemNoStyle<T extends MObject<T> = object>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
+/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
+export declare function FairysTaroValtioFormItemBase<T extends MObject<T> = object>(props: FairysTaroValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/form/form.item.js

@@ -1,164 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { View } from "@tarojs/components";
-import react, { Fragment, useMemo } from "react";
-import clsx from "clsx";
-import { useFairysTaroValtioFormInstanceContextHideState, useFairysTaroValtioFormInstanceContextState } from "./instance/index.js";
-import { useFairysTaroValtioFormLayoutContext } from "./layout.js";
+import { Fragment } from "react";
+import { FairysValtioFormParentAttrsContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs } from "@fairys/valtio-form-basic";
 function FairysTaroValtioFormItem(props) {
-    const [layoutAttrs] = useFairysTaroValtioFormLayoutContext();
-    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, label, noStyle, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, extra, helpText, colSpan = 1, rowSpan = 1, isRequired: _isRequired, borderedType = parent_borderedType, attrs = {}, showColon = false, ...rest } = props;
-    const [state, errorState, formInstance] = useFairysTaroValtioFormInstanceContextState();
-    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
-        });
-    };
-    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-taro-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-taro-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-taro-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-taro-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-taro-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-taro-valtio-form-item-body-extra fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center'), []);
-    const itemHelp_cls = useMemo(()=>clsx('fairys-taro-valtio-form-item-body-help fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__w-full fairystaroform__box-border'), []);
-    const itemError_cls = useMemo(()=>clsx('fairys-taro-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
-    ]);
+    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 /*#__PURE__*/ jsxs(View, {
-        ...rest,
-        className: item_cls,
-        style: {
-            ...parent_formItemStyle || {},
-            ...styleBase,
-            ...style || {}
-        },
+        className: itemClassName,
+        style: itemStyle,
         children: [
             /*#__PURE__*/ jsxs(View, {
-                className: itemContainer_cls,
+                className: containerClassName,
                 children: [
-                    /*#__PURE__*/ jsx(View, {
-                        className: itemLabel_cls,
-                        style: {
-                            ...parent_formItemLabelStyle || {},
-                            ...labelStyle || {}
-                        },
+                    label ? /*#__PURE__*/ jsx(View, {
+                        className: itemLabelClassName,
+                        style: itemLabelStyle,
                         children: label
-                    }),
+                    }) : /*#__PURE__*/ jsx(Fragment, {}),
                     /*#__PURE__*/ jsxs(View, {
-                        className: itemBody_cls,
-                        style: {
-                            ...parent_formItemBodyStyle || {},
-                            ...bodyStyle || {}
-                        },
+                        className: itemBodyClassName,
+                        style: itemBodyStyle,
                         children: [
-                            /*#__PURE__*/ jsx(View, {
-                                className: itemInput_cls,
-                                children: /*#__PURE__*/ react.isValidElement(children) ? /*#__PURE__*/ react.cloneElement(children, {
-                                    ...baseControl
-                                }) : children
+                            /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+                                value: formAttrsNameInstance,
+                                children: /*#__PURE__*/ jsx(View, {
+                                    className: itemInputClassName,
+                                    children: children
+                                })
                             }),
                             extra ? /*#__PURE__*/ jsx(View, {
-                                className: itemExtra_cls,
+                                className: itemExtraClassName,
                                 children: extra
                             }) : /*#__PURE__*/ jsx(Fragment, {}),
-                            'body' === borderedType && isInvalid ? /*#__PURE__*/ jsx(View, {
-                                className: itemError_cls,
+                            'body' === itemBorderType && isInvalid ? /*#__PURE__*/ jsx(View, {
+                                className: errorClassName,
                                 children: error
                             }) : /*#__PURE__*/ jsx(Fragment, {})
                         ]
@@ -166,22 +41,41 @@ function FairysTaroValtioFormItem(props) {
                 ]
             }),
             helpText ? /*#__PURE__*/ jsx(View, {
-                className: itemHelp_cls,
+                className: helpClassName,
                 children: helpText
             }) : /*#__PURE__*/ jsx(Fragment, {}),
-            isInvalid && 'body' !== borderedType ? /*#__PURE__*/ jsx(View, {
-                className: itemError_cls,
+            isInvalid && 'body' !== itemBorderType ? /*#__PURE__*/ jsx(View, {
+                className: errorClassName,
                 children: error
             }) : /*#__PURE__*/ jsx(Fragment, {})
         ]
     });
 }
 function FairysTaroValtioFormHideItem(props) {
-    const [state] = useFairysTaroValtioFormInstanceContextHideState();
+    const [state] = useFairysValtioFormInstanceContextHideState();
     const isHide = state[props.name];
     if (isHide) return /*#__PURE__*/ jsx(Fragment, {});
     return /*#__PURE__*/ jsx(FairysTaroValtioFormItem, {
         ...props
     });
 }
-export { FairysTaroValtioFormHideItem, FairysTaroValtioFormItem };
+function FairysTaroValtioFormItemNoStyle(props) {
+    const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
+    return /*#__PURE__*/ jsx(FairysValtioFormParentAttrsContext.Provider, {
+        value: formAttrsNameInstance,
+        children: children
+    });
+}
+function FairysTaroValtioFormItemBase(props) {
+    const { isHide, noStyle, ...rest } = props;
+    if (isHide) return /*#__PURE__*/ jsx(FairysTaroValtioFormHideItem, {
+        ...rest
+    });
+    if (noStyle) return /*#__PURE__*/ jsx(FairysTaroValtioFormItemNoStyle, {
+        ...rest
+    });
+    return /*#__PURE__*/ jsx(FairysTaroValtioFormItem, {
+        ...rest
+    });
+}
+export { FairysTaroValtioFormHideItem, FairysTaroValtioFormItem, FairysTaroValtioFormItemBase, FairysTaroValtioFormItemNoStyle };