react-antd-xform 1.0.11 → 1.0.12-beta.1

package/dist/form/context/formEnvContext.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { FormEnvContextType } from '../type';
+import { FormEnvContextType } from '../types';
 export declare const useFormEnv: () => FormEnvContextType;
 export declare function FormEnvProvider({ children, ...override }: FormEnvContextType & {
     children: React.ReactNode;

package/dist/form/context/modelContext.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { FormModel } from '../model';
+import { FormModel } from '../model/model';
 export declare function useModel<T = any>(): FormModel<T>;
 export declare const ModelProvider: React.Provider<FormModel<any>>;

package/dist/form/extend/form-array.d.ts

@@ -1,5 +1,5 @@
-import { FormModel } from '../model';
-import { FormArrayLayoutInput } from '../type';
+import { FormModel } from '../model/model';
+import { FormArrayLayoutInput } from '../types';
 export interface FormArrayProps<T> {
     use?: boolean;
     arrayModel?: FormModel<T[]>;

package/dist/form/extend/form-array.js

@@ -1,8 +1,8 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { useModel, ModelProvider } from "../context/modelContext.js";
-import { range } from "../common-utils.js";
-import { arrayHelpers } from "../array-helper.js";
+import { range } from "../utils/common-utils.js";
+import { arrayHelpers } from "../helpers/array-helper.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 const defaultArrayLayout = ({
   arrayModel,

package/dist/form/extend/form-check.d.ts

@@ -1,5 +1,5 @@
-import { Check } from '../model';
-import { CheckConfig, Watchable } from '../type';
+import { Check } from '../model/model';
+import { CheckConfig, Watchable } from '../types';
 export interface FormCheckProps<T = any> extends CheckConfig<T> {
     name?: string;
     check?: Check<T>;

package/dist/form/extend/form-check.js

@@ -3,7 +3,7 @@ import { reaction } from "mobx";
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { useModel } from "../context/modelContext.js";
 import { useFormEnv } from "../context/formEnvContext.js";
-import { composeValue, convertWatchableToExpression } from "../common-utils.js";
+import { composeValue, convertWatchableToExpression } from "../utils/common-utils.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 const FormCheck = observer(function FormCheck2({
   name,

package/dist/form/extend/form-effect.d.ts

@@ -1,6 +1,6 @@
 import { IEqualsComparer } from 'mobx';
-import { Watchable } from '../type';
-import { FormModel } from '../model';
+import { Watchable } from '../types';
+import { FormModel } from '../model/model';
 export interface FormEffectProps<T = any> {
     watch: Watchable<T>;
     effect(value: T, detail: {

package/dist/form/extend/form-effect.js

@@ -2,7 +2,7 @@ import { useRef, useEffect } from "react";
 import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
 import { reaction } from "mobx";
 import { useModel } from "../context/modelContext.js";
-import { convertWatchableToExpression } from "../common-utils.js";
+import { convertWatchableToExpression } from "../utils/common-utils.js";
 import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 const FormEffect = observer(function FormEffect2({
   watch,

package/dist/form/extend/form-layout.d.ts

@@ -1,2 +1,2 @@
-import { FormLayoutProps } from '../type';
+import { FormLayoutProps } from '../types';
 export declare function FormLayout({ children, className, style, labelPosition, labelWidth, formItemGap, controlWidth, defaultLabelTopPosition, inlineError, containerProps, }: FormLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/form/extend/form-layout.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import cx from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
 import styled from "styled-components";
-import { asCSSLength } from "../common-utils.js";
+import { asCSSLength } from "../utils/common-utils.js";
 const FormLayoutContainer = styled.div`
   --label-width: auto;
   --control-width: auto;

package/dist/form/extend/form-model-consumer.d.ts

@@ -1,4 +1,4 @@
-import { FormModel } from '../model';
+import { FormModel } from '../model/model';
 export declare const FormModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
     displayName: string;
 };

package/dist/form/extend/form-reset.js

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import { action } from "mobx";
-import { modelUtils } from "../model-utils.js";
+import { modelUtils } from "../model/model-utils.js";
 import { useModel } from "../context/modelContext.js";
 import { useFormEnv } from "../context/formEnvContext.js";
 function FormReset({
   ButtonComponent,
-  children = "提交",
+  children = "重置",
   ...props
 }) {
   const model = useModel();

package/dist/form/extend/form-submit.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
-import { modelUtils } from "../model-utils.js";
+import { modelUtils } from "../model/model-utils.js";
 import { useModel } from "../context/modelContext.js";
 import { useFormEnv } from "../context/formEnvContext.js";
 function FormSubmit({

package/dist/form/form/index.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { FormProps } from '../types';
+import { FormModel } from '../model/model';
+import { FormItemView } from '../form-item';
+import { FormReset } from '../extend/form-reset';
+import { FormLayout } from '../extend/form-layout';
+import { FormSubmit } from '../extend/form-submit';
+export declare function Form({ model: modelProp, defaultValue, children, className, style, layout, containerProps, htmlIdPrefix: htmlIdPrefixProp, variant, isPreview, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Form {
+    var Array: (<T extends unknown>({ name, children, layout, arrayModel: arrayModelProp, use, }: import("@/form/extend/form-array").FormArrayProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+        displayName: string;
+    };
+    var Check: (<T = any>({ name, check: checkProp, validate, watch, validateOnMount, renderError, deps, }: import("@/form/extend/form-check").FormCheckProps<T>) => any) & {
+        displayName: string;
+    };
+    var Effect: (<T = any>({ watch, effect, fireImmediately, deps, equals, }: import("@/form/extend/form-effect").FormEffectProps<T>) => React.ReactElement) & {
+        displayName: string;
+    };
+    var Object: (({ name, children, use }: {
+        children: React.ReactNode;
+        name: string;
+        use?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element) & {
+        displayName: string;
+    };
+    var Submit: typeof FormSubmit;
+    var Layout: typeof FormLayout;
+    var ItemView: typeof FormItemView;
+    var ModelProvider: React.Provider<FormModel<any>>;
+    var ModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
+        displayName: string;
+    };
+    var Reset: typeof FormReset;
+}

package/dist/form/{index.js → form/index.js}

@@ -1,18 +1,18 @@
-import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import { useState } from "react";
-import { FormModel } from "./model.js";
-import { FormItemView } from "./form-item.js";
-import { ModelProvider } from "./context/modelContext.js";
-import { FormEnvProvider } from "./context/formEnvContext.js";
-import { composeValue, useHtmlIdPrefix } from "./common-utils.js";
-import { FormArray } from "./extend/form-array.js";
-import { FormCheck } from "./extend/form-check.js";
-import { FormReset } from "./extend/form-reset.js";
-import { FormLayout } from "./extend/form-layout.js";
-import { FormSubmit } from "./extend/form-submit.js";
-import { FormEffect } from "./extend/form-effect.js";
-import { FormObject } from "./extend/form-object.js";
-import { FormModelConsumer } from "./extend/form-model-consumer.js";
+import { FormModel } from "../model/model.js";
+import { FormItemView } from "../form-item/index.js";
+import { ModelProvider } from "../context/modelContext.js";
+import { FormEnvProvider } from "../context/formEnvContext.js";
+import { composeValue, useHtmlIdPrefix } from "../utils/common-utils.js";
+import { FormArray } from "../extend/form-array.js";
+import { FormCheck } from "../extend/form-check.js";
+import { FormReset } from "../extend/form-reset.js";
+import { FormLayout } from "../extend/form-layout.js";
+import { FormSubmit } from "../extend/form-submit.js";
+import { FormEffect } from "../extend/form-effect.js";
+import { FormObject } from "../extend/form-object.js";
+import { FormModelConsumer } from "../extend/form-model-consumer.js";
 function Form({
   model: modelProp,
   defaultValue,
@@ -41,7 +41,7 @@ Form.Layout = FormLayout;
 Form.ItemView = FormItemView;
 Form.ModelProvider = ModelProvider;
 Form.ModelConsumer = FormModelConsumer;
-Form.FormReset = FormReset;
+Form.Reset = FormReset;
 export {
   Form
 };

package/dist/form/{form-item.d.ts → form-item/index.d.ts}

@@ -1,4 +1,4 @@
-import { FormItemCreationOptions, FormItemProps, FormItemViewProps } from './type';
+import { FormItemCreationOptions, FormItemProps, FormItemViewProps } from '../types';
 export declare function FormItemView({ htmlId, label, help, tip, asterisk, error, children, className, style, labelWidth, controlWidth, rightNode, labelStyle, controlStyle, }: FormItemViewProps): import("react/jsx-runtime").JSX.Element;
 export declare function createFormItem(inputOptions: FormItemCreationOptions): {
     ({ defaultValue: defaultValueProp, isEmpty, renderPreview, componentProps: componentPropsProp, name, field: fieldProp, ...props }: Omit<FormItemProps, "component">): import("react/jsx-runtime").JSX.Element;
@@ -13,3 +13,6 @@ export declare const AnonymousFormItem: {
     displayName: string;
 };
 export declare function FormItem({ use, component, ...props }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormItem {
+    var register: (options: FormItemCreationOptions) => void;
+}

package/dist/form/{form-item.js → form-item/index.js}

@@ -1,16 +1,16 @@
-import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import React, { useLayoutEffect, useEffect } from "react";
-import cx from "../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
-import "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
-import stringifyObject from "../node_modules/.pnpm/stringify-object@5.0.0/node_modules/stringify-object/index.js";
+import cx from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
+import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
+import stringifyObject from "../../node_modules/.pnpm/stringify-object@5.0.0/node_modules/stringify-object/index.js";
 import { toJS, reaction, runInAction } from "mobx";
-import { FieldType } from "./enum.js";
-import { isFalsyOrEmptyArray, composeValue, pick, asCSSLength } from "./common-utils.js";
-import { Field } from "./model.js";
-import { useModel } from "./context/modelContext.js";
-import { useFormEnv } from "./context/formEnvContext.js";
-import { ALL_COMPONENTS } from "../form-ui/default-component.js";
-import { observer } from "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
+import { FieldType } from "../types/enum.js";
+import { isFalsyOrEmptyArray, composeValue, pick, asCSSLength } from "../utils/common-utils.js";
+import { Field } from "../model/model.js";
+import { useModel } from "../context/modelContext.js";
+import { useFormEnv } from "../context/formEnvContext.js";
+import { ALL_COMPONENTS } from "../../form-ui/default-components/index.js";
+import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
 function processCreationOptions(options) {
   const render = options.render ?? ((props) => React.createElement(options.component, props));
   return {
@@ -266,6 +266,9 @@ function FormItem({
     } });
   }
 }
+FormItem.register = (options) => {
+  COMPONENT_DICT[options.name] = createFormItem(options);
+};
 export {
   AnonymousFormItem,
   FormItem,

package/dist/form/{array-helper.d.ts → helpers/array-helper.d.ts}

@@ -1,5 +1,5 @@
-import { FormModel } from './model';
-import { FormArrayLayoutInput } from './type';
+import { FormModel } from '../model/model';
+import { FormArrayLayoutInput } from '../types';
 export declare const arrayHelpers: {
     append: (arrayModel: FormModel<unknown[]>, itemFactory?: any) => void;
     delete: (arrayModel: FormModel<unknown[]>, itemIndex: number) => void;

package/dist/form/{array-helper.js → helpers/array-helper.js}

@@ -1,8 +1,8 @@
-import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import { action } from "mobx";
-import invariant from "../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
-import { Form } from "./index.js";
-import { composeValue } from "./common-utils.js";
+import invariant from "../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
+import { Form } from "../form/index.js";
+import { composeValue } from "../utils/common-utils.js";
 function invariantArrayShapeIsAutoOrArray(arrayModel) {
   invariant(arrayModel._valueShape === "auto" || arrayModel._valueShape === "array", 'arrayModel._valueShape should be "auto" or "array"');
 }

package/dist/form/index.d.ts

@@ -1,33 +1,9 @@
-import { default as React } from 'react';
-import { FormProps } from './type';
-import { FormModel } from './model';
-import { FormItemView } from './form-item';
-import { FormLayout } from './extend/form-layout';
-import { FormSubmit } from './extend/form-submit';
-export declare function Form({ model: modelProp, defaultValue, children, className, style, layout, containerProps, htmlIdPrefix: htmlIdPrefixProp, variant, isPreview, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Form {
-    var Array: (<T extends unknown>({ name, children, layout, arrayModel: arrayModelProp, use, }: import("./extend/form-array").FormArrayProps<T>) => import("react/jsx-runtime").JSX.Element) & {
-        displayName: string;
-    };
-    var Check: (<T = any>({ name, check: checkProp, validate, watch, validateOnMount, renderError, deps, }: import("./extend/form-check").FormCheckProps<T>) => any) & {
-        displayName: string;
-    };
-    var Effect: (<T = any>({ watch, effect, fireImmediately, deps, equals, }: import("./extend/form-effect").FormEffectProps<T>) => React.ReactElement) & {
-        displayName: string;
-    };
-    var Object: (({ name, children, use }: {
-        children: React.ReactNode;
-        name: string;
-        use?: boolean;
-    }) => import("react/jsx-runtime").JSX.Element) & {
-        displayName: string;
-    };
-    var Submit: typeof FormSubmit;
-    var Layout: typeof FormLayout;
-    var ItemView: typeof FormItemView;
-    var ModelProvider: React.Provider<FormModel<any>>;
-    var ModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
-        displayName: string;
-    };
-    var FormReset: typeof import("./extend/form-reset").FormReset;
-}
+export { Form } from './form';
+export { useModel } from './context/modelContext';
+export { FormEnvProvider, useFormEnv } from './context/formEnvContext';
+export { FormItem, createFormItem } from './form-item';
+export { FormModel } from './model/model';
+export { arrayHelpers } from './helpers/array-helper';
+export { AsyncValue } from './helpers/AsyncValue';
+export { modelUtils } from './model/model-utils';
+export type { FieldConfig, CheckConfig, FormEnvContextType, FormLayoutParams, FormProps, FormLayoutProps, FormItemComponentProps, FormItemCreationOptions, BaseOptionType, DefaultOptionType, FormItemProps, FormItemViewProps, SubmitExtraOptions, SubmitOptions, FormArrayLayoutInput, Watchable, } from './types';

package/dist/form/{model-utils.d.ts → model/model-utils.d.ts}

@@ -1,5 +1,5 @@
 import { Field, FormModel } from './model';
-import { FieldValidateTrigger, FormEnvContextType, SubmitOptions } from './type';
+import { FieldValidateTrigger, FormEnvContextType, SubmitOptions } from '../types';
 export declare const modelUtils: {
     clearError: <T>(model: FormModel<T>) => void;
     scrollToFirstError(errorFields: Field[]): void;

package/dist/form/{model-utils.js → model/model-utils.js}

@@ -1,6 +1,6 @@
 import { action, runInAction, observable, toJS } from "mobx";
-import { FieldType } from "./enum.js";
-import { observableSetIn } from "./common-utils.js";
+import { FieldType } from "../types/enum.js";
+import { observableSetIn } from "../utils/common-utils.js";
 const modelUtils = {
   clearError: action(function(model) {
     model.iterateFields((field) => {

package/dist/form/{model.d.ts → model/model.d.ts}

@@ -1,5 +1,5 @@
-import { ModelType, FieldType } from './enum';
-import { XName, ResolveXName, ValueShape, FieldConfig, CheckConfig, FieldState, FieldCreateOptions, FieldValidateTrigger, FormModelCreateOptions } from './type';
+import { ModelType, FieldType } from '../types/enum';
+import { XName, ResolveXName, ValueShape, FieldConfig, CheckConfig, FieldState, FieldCreateOptions, FieldValidateTrigger, FormModelCreateOptions } from '../types';
 declare class IdGenerator {
     private _nextId;
     private prefix;

package/dist/form/{model.js → model/model.js}

@@ -1,7 +1,7 @@
-import invariant from "../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
+import invariant from "../../node_modules/.pnpm/invariant@2.2.4/node_modules/invariant/browser.js";
 import { makeObservable, action, computed, observable, toJS } from "mobx";
-import { ModelType, FieldType } from "./enum.js";
-import { composeValue, observableGetIn, keyToValueShape, splitToPath, observableSetIn } from "./common-utils.js";
+import { ModelType, FieldType } from "../types/enum.js";
+import { composeValue, observableGetIn, keyToValueShape, splitToPath, observableSetIn } from "../utils/common-utils.js";
 const EMPTY_PATH = [];
 const ROOT_MODEL_CREATE_OPTIONS = {
   modelType: ModelType.rootModel

package/dist/form/{type.d.ts → types/index.d.ts}

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { Field, FormModel } from './model';
+import { Field, FormModel } from '../model/model';
 import { FieldType, ModelType } from './enum';
-import { AsyncValue } from './helpers/AsyncValue';
+import { AsyncValue } from '../helpers/AsyncValue';
 export declare const Variants: readonly ["outlined", "borderless", "filled", "underlined"];
 export type Variant = (typeof Variants)[number];
 type valueOf<T> = T[keyof T];

package/dist/form/{common-utils.d.ts → utils/common-utils.d.ts}

@@ -1,5 +1,5 @@
-import { Watchable } from './type';
-import { FormModel } from './model';
+import { Watchable } from '../types';
+import { FormModel } from '../model/model';
 export declare function keyToValueShape(key: string): "array" | "object";
 export declare function splitToPath(name: number | string): string[];
 /** 合并两个值，如果第一个不为 undefined，则使用第一个值，否则使用第二个值 */

package/dist/form/{common-utils.js → utils/common-utils.js}

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import * as mobx from "mobx";
 import { toJS } from "mobx";
-import { Field, FormModel } from "./model.js";
-import { AsyncValue } from "./helpers/AsyncValue.js";
+import { Field, FormModel } from "../model/model.js";
+import { AsyncValue } from "../helpers/AsyncValue.js";
 function isNumericKey(key) {
   return String(Number.parseInt(key)) === key;
 }

package/dist/form-ui/{default-component.d.ts → default-components/index.d.ts}

@@ -1,10 +1,10 @@
-import { isEmptyValue } from './common-utils';
+import { isEmptyValue } from './utils/value-change';
 declare const ALL_COMPONENTS: {
     name: "input" | "textArea" | "select" | "singleSelect" | "multiSelect" | "radio" | "checkbox" | "inputNumber" | "slider" | "switch" | "datePicker" | "dateRangePicker" | "timePicker" | "timeRangePicker" | "rate" | "colorPicker";
     component: any;
     defaultValue: any;
     isEmpty: typeof isEmptyValue;
     hasIntrinsicWidth: boolean;
-    renderPreview: (props: import('../form/type').FormItemComponentProps) => import('react').ReactNode;
+    renderPreview: (props: import('../../form/types').FormItemComponentProps) => import('react').ReactNode;
 }[];
 export { ALL_COMPONENTS };

package/dist/form-ui/{default-component.js → default-components/index.js}

@@ -1,6 +1,6 @@
-import { ColorPicker, Rate, TimePicker, DatePicker, Switch, Slider, InputNumber, Checkbox, Radio, Select, Input } from "antd";
-import { withInjectedProps, withDayjsTransformAntdTimeRange, withDayjsTransformAntdTime, withDayjsTransformAntdDateRangePicker, withDayjsTransformAntdDate, withValueChangeHandler, isEmptyValue, withColorPickerHandler } from "./common-utils.js";
-import { renderColorPreview, renderRatePreview, renderTimeRangePreview, renderTimePreview, renderDateRangePreview, renderDatePreview, renderBooleanPreview, renderValueToPreview, renderMultiplePreview, renderSelectToPreview } from "./render-preview.js";
+import { TimePicker, DatePicker, Checkbox, Radio, Input, ColorPicker, Rate, Switch, Slider, InputNumber, Select } from "antd";
+import { withInjectedProps, withDayjsTransformAntdTimeRange, withDayjsTransformAntdTime, withDayjsTransformAntdDateRangePicker, withDayjsTransformAntdDate, withValueChangeHandler, isEmptyValue, withColorPickerHandler } from "./utils/value-change.js";
+import { renderColorPreview, renderRatePreview, renderTimeRangePreview, renderTimePreview, renderDateRangePreview, renderDatePreview, renderBooleanPreview, renderValueToPreview, renderMultiplePreview, renderSelectToPreview } from "./utils/render-preview.js";
 const COMPONENT_MAP = {
   input: Input,
   textArea: Input.TextArea,
@@ -79,7 +79,7 @@ const COMPONENT_RULES = {
     hasIntrinsicWidth: false
   },
   slider: {
-    hocs: ["valueChange"],
+    hocs: [],
     renderPreview: renderValueToPreview,
     hasIntrinsicWidth: false
   },

package/dist/form-ui/{render-preview.js → default-components/utils/render-preview.js}

@@ -1,5 +1,5 @@
-import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
-import dayjs from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
+import { j as jsxRuntimeExports } from "../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import dayjs from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
 const renderValueToPreview = (props) => {
   const {
     value

package/dist/form-ui/{common-utils.js → default-components/utils/value-change.js}

@@ -1,8 +1,8 @@
-import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { j as jsxRuntimeExports } from "../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import React, { useMemo, useCallback } from "react";
-import dayjs from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
-import weekYear from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekYear.js";
-import weekOfYear from "../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekOfYear.js";
+import dayjs from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.js";
+import weekYear from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekYear.js";
+import weekOfYear from "../../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/plugin/weekOfYear.js";
 dayjs.extend(weekOfYear);
 dayjs.extend(weekYear);
 if (!dayjs.__patchedForAntd__) {

package/dist/form-ui/extend/array-table/index.d.ts

@@ -0,0 +1,9 @@
+import { FormArrayLayoutInput } from '../../../form';
+import { ArrayTableOptions } from '../../types';
+export declare const TableRowOperations: (({ operations, arrayModel, itemIndex }: any) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export declare function arrayTable({ orderColumn, style, className, operations, operationColumn, tableImplementation: Table, tableProps, }?: ArrayTableOptions): (input: FormArrayLayoutInput) => import("react/jsx-runtime").JSX.Element;
+export declare namespace arrayTable {
+    var Group: (_props: any) => any;
+}

package/dist/form-ui/extend/array-table/index.js

@@ -0,0 +1,149 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import React from "react";
+import { action } from "mobx";
+import "../../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
+import { Table, Popconfirm, Button } from "antd";
+import { enhanceTableColumns } from "./utils/columm-utils.js";
+import { calculateArrayTableData } from "./utils/calculateArrayTableData.js";
+import { observer } from "../../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
+import { Form } from "../../../form/form/index.js";
+import { useFormEnv } from "../../../form/context/formEnvContext.js";
+import { arrayHelpers } from "../../../form/helpers/array-helper.js";
+const AntdTableRow = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  if (!props["data-row-type"] || props["data-row-type"] !== "data") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { ...restProps, children });
+  }
+  const {
+    record
+  } = props;
+  const {
+    hiddenItems,
+    effects,
+    checks,
+    itemIndex
+  } = record;
+  const hiddenItemsElements = hiddenItems.map((item) => React.cloneElement(item, {
+    renderHiddenFormItemView: false
+  }));
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Form.Object, { name: String(itemIndex), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { ...restProps, children }),
+    effects,
+    checks,
+    hiddenItemsElements
+  ] });
+};
+function resolveOperationConfig(rowIndex, config, defaultConfig) {
+  if (typeof config === "function") {
+    return resolveOperationConfig(rowIndex, config(rowIndex), defaultConfig);
+  }
+  if (typeof config === "boolean") {
+    return {
+      ...defaultConfig,
+      show: Boolean(config)
+    };
+  }
+  return {
+    ...defaultConfig,
+    show: defaultConfig.show || Boolean(config),
+    ...config
+  };
+}
+const TableRowOperations = observer(({
+  operations,
+  arrayModel,
+  itemIndex
+}) => {
+  const {
+    isPreview
+  } = useFormEnv();
+  if (isPreview) {
+    return null;
+  }
+  const delete_ = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.delete, {
+    show: false,
+    disabled: false,
+    label: "删除",
+    confirm: true
+  });
+  const move = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.move, {
+    show: false,
+    disabled: false
+  });
+  const moveUp = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.moveUp, {
+    ...move,
+    label: "上移"
+  });
+  const moveDown = resolveOperationConfig(itemIndex, operations == null ? void 0 : operations.moveDown, {
+    ...move,
+    label: "下移"
+  });
+  const buttons = [["moveUp", moveUp, arrayHelpers.moveUp], ["moveDown", moveDown, arrayHelpers.moveDown], ["delete", delete_, arrayHelpers.delete]];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: buttons.map(([key, config, handler]) => {
+    if (!config.show) {
+      return null;
+    }
+    const callback = action(() => handler(arrayModel, itemIndex));
+    if (key === "delete" && config.confirm) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm, { title: "确定要删除么？", onConfirm: callback, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "link", disabled: config.disabled, children: config.label }) }, key);
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "link", disabled: config.disabled, onClick: callback, children: config.label }, key);
+  }) });
+});
+function arrayTable({
+  orderColumn,
+  style,
+  className,
+  operations,
+  operationColumn,
+  tableImplementation: Table$1 = Table,
+  tableProps
+} = {}) {
+  return (input) => {
+    const {
+      arrayModel
+    } = input;
+    const {
+      columns,
+      dataSource
+    } = calculateArrayTableData(input);
+    const {
+      components,
+      ...restTableProps
+    } = tableProps || {};
+    const enhancedColumns = enhanceTableColumns(columns, {
+      orderColumn,
+      operationColumn,
+      operations,
+      arrayModel
+    });
+    const processedDataSource = dataSource.map((item) => ({
+      ...item,
+      "data-row-type": "data"
+    }));
+    const tableComponents = {
+      body: {
+        row: (props) => {
+          const record = processedDataSource.find((item) => item.rowKey === props["data-row-key"]);
+          return React.createElement(AntdTableRow, {
+            ...props,
+            record,
+            "data-row-type": record ? "data" : "other"
+          });
+        }
+      },
+      ...components
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1, { className, style, rowKey: "rowKey", columns: enhancedColumns, dataSource: processedDataSource, scroll: {
+      x: true
+    }, components: tableComponents, ...restTableProps });
+  };
+}
+arrayTable.Group = (_props) => null;
+export {
+  TableRowOperations,
+  arrayTable
+};

package/dist/form-ui/extend/array-table/utils/calculateArrayTableData.d.ts

@@ -0,0 +1,5 @@
+import { FormArrayLayoutInput } from '../../../../form';
+export declare function calculateArrayTableData({ itemContent, itemCount, arrayModel, }: FormArrayLayoutInput): {
+    dataSource: any[];
+    columns: any[];
+};

package/dist/form-ui/extend/array-table/utils/calculateArrayTableData.js

@@ -0,0 +1,160 @@
+import { j as jsxRuntimeExports } from "../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import React from "react";
+import cx from "../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
+import { arrayTable } from "../index.js";
+import { collectNodes, isLeafNode } from "./tree-utils.js";
+import { arrayHelpers } from "../../../../form/helpers/array-helper.js";
+import { FormItem } from "../../../../form/form-item/index.js";
+import { Form } from "../../../../form/form/index.js";
+const range = (n) => {
+  const result = [];
+  for (let i = 0; i < n; i++) {
+    result.push(i);
+  }
+  return result;
+};
+function extractFormItemJSXElements(node, startColIndex = 0) {
+  if (node == null) {
+    return {
+      result: [],
+      flatCount: 0
+    };
+  }
+  if (node.type == React.Fragment) {
+    return extractFormItemJSXElements(node.props.children, startColIndex);
+  }
+  let flatCount = 0;
+  const result = [];
+  const array = React.Children.toArray(node);
+  for (const item of array) {
+    if ((item == null ? void 0 : item.type) === FormItem || (item == null ? void 0 : item.type) === Form.ItemView) {
+      result.push({
+        ...item,
+        colIndex: startColIndex + flatCount
+      });
+      flatCount += 1;
+    } else if ((item == null ? void 0 : item.type) === arrayTable.Group) {
+      const subRet = extractFormItemJSXElements(item.props.children, startColIndex + flatCount);
+      result.push({
+        ...item,
+        children: subRet.result
+      });
+      flatCount += subRet.flatCount;
+    }
+  }
+  return {
+    result,
+    flatCount
+  };
+}
+function extractFormEffectJSXElements(node) {
+  const isFormEffectJSXElement = (item) => {
+    var _a;
+    return (item == null ? void 0 : item.type) === Form.Effect || ((_a = item == null ? void 0 : item.props) == null ? void 0 : _a["x-effect"]);
+  };
+  if (node == null) {
+    return [];
+  }
+  if (node.type == React.Fragment) {
+    return React.Children.toArray(node.props.children).filter(isFormEffectJSXElement);
+  } else {
+    return React.Children.toArray(node).filter(isFormEffectJSXElement);
+  }
+}
+function extractFormCheckJSXElements(node) {
+  const isFormCheckJSXElement = (item) => (item == null ? void 0 : item.type) === Form.Check;
+  if (node == null) {
+    return [];
+  }
+  if (node.type == React.Fragment) {
+    return React.Children.toArray(node.props.children).filter(isFormCheckJSXElement);
+  } else {
+    return React.Children.toArray(node).filter(isFormCheckJSXElement);
+  }
+}
+function extractHiddenJSXElements(node) {
+  const isHiddenItemJSXElement = (item) => item.props.component === "hidden";
+  if (node == null) {
+    return [];
+  }
+  if (node.type == React.Fragment) {
+    return React.Children.toArray(node.props.children).filter(isHiddenItemJSXElement);
+  } else {
+    return React.Children.toArray(node).filter(isHiddenItemJSXElement);
+  }
+}
+function calculateArrayTableData({
+  itemContent,
+  itemCount,
+  arrayModel
+}) {
+  const dataSource = range(itemCount).map((itemIndex) => {
+    const renderedContent = itemContent(itemIndex, arrayModel.getSubModel(itemIndex));
+    const formItems = extractFormItemJSXElements(renderedContent).result;
+    const flattenFormItems = collectNodes(formItems, "leaf-only");
+    const effects = extractFormEffectJSXElements(renderedContent);
+    const checks = extractFormCheckJSXElements(renderedContent);
+    const hiddenItems = extractHiddenJSXElements(renderedContent);
+    return {
+      rowKey: arrayHelpers.getKey(arrayModel, itemIndex),
+      itemIndex,
+      formItems,
+      flattenFormItems,
+      effects,
+      checks,
+      hiddenItems
+    };
+  });
+  let columnsShape;
+  if (dataSource.length > 0) {
+    columnsShape = dataSource[0].formItems;
+  } else {
+    columnsShape = extractFormItemJSXElements(itemContent(0, arrayModel.getSubModel(0))).result;
+  }
+  function convertColumn(item) {
+    if (item.props.component === "hidden") {
+      return null;
+    }
+    return {
+      // Antd Table列定义
+      key: `col_${item.colIndex}`,
+      dataIndex: `col_${item.colIndex}`,
+      render: (value, record) => {
+        const formItem = record.flattenFormItems[item.colIndex];
+        return React.cloneElement(formItem, {
+          className: cx(formItem.className, "minimal")
+        });
+      },
+      title: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        (item.props.asterisk ?? item.props.required) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "required-indicator" }),
+        item.props.label
+      ] }),
+      width: item.props.width,
+      fixed: item.props.lock ? "left" : void 0,
+      align: item.props.align,
+      ...item.props["x-column"] ?? item.props["x-table-column"]
+    };
+  }
+  function convertGroup(group) {
+    return {
+      key: group.props.name,
+      title: group.props.label || group.props.name,
+      children: convert(group.children),
+      width: group.props.width,
+      fixed: group.props.lock ? "left" : void 0,
+      align: group.props.align,
+      ...group.props["x-column"] ?? group.props["x-table-column"]
+    };
+  }
+  const convert = (nodes) => {
+    return nodes.map((n) => isLeafNode(n) ? convertColumn(n) : convertGroup(n)).filter(Boolean);
+  };
+  const columns = convert(columnsShape);
+  return {
+    dataSource,
+    columns
+  };
+}
+export {
+  calculateArrayTableData
+};

package/dist/form-ui/extend/array-table/utils/columm-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 创建序号列配置
+ */
+export declare function createOrderColumn(orderColumn: any): any;
+/**
+ * 创建操作列配置
+ */
+export declare function createOperationColumn(operationColumn: any, operations: any, arrayModel: any): any;
+/**
+ * 增强表格列配置 - 添加序号列和操作列
+ */
+export declare function enhanceTableColumns(originalColumns: any[], options: {
+    orderColumn?: any;
+    operationColumn?: any;
+    operations?: any;
+    arrayModel: any;
+}): any[];

package/dist/form-ui/extend/array-table/utils/columm-utils.js

@@ -0,0 +1,52 @@
+import { j as jsxRuntimeExports } from "../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { TableRowOperations } from "../index.js";
+function createOrderColumn(orderColumn) {
+  if (!orderColumn) return null;
+  return {
+    key: "order",
+    title: "#",
+    width: 50,
+    fixed: "left",
+    align: "right",
+    ...orderColumn,
+    render: (_, record) => {
+      return record.itemIndex + 1;
+    }
+  };
+}
+function createOperationColumn(operationColumn, operations, arrayModel) {
+  if (!operationColumn && !operations) return null;
+  return {
+    key: "operations",
+    title: "",
+    width: 120,
+    fixed: "right",
+    ...operationColumn,
+    render: (_, record) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
+      padding: "8px"
+    }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRowOperations, { arrayModel, itemIndex: record.itemIndex, operations }) })
+  };
+}
+function enhanceTableColumns(originalColumns, options) {
+  const {
+    orderColumn,
+    operationColumn,
+    operations,
+    arrayModel
+  } = options;
+  const enhancedColumns = [...originalColumns];
+  const orderCol = createOrderColumn(orderColumn);
+  if (orderCol) {
+    enhancedColumns.unshift(orderCol);
+  }
+  const operationCol = createOperationColumn(operationColumn, operations, arrayModel);
+  if (operationCol) {
+    enhancedColumns.push(operationCol);
+  }
+  return enhancedColumns;
+}
+export {
+  createOperationColumn,
+  createOrderColumn,
+  enhanceTableColumns
+};

package/dist/form-ui/extend/array-table/utils/tree-utils.d.ts

@@ -0,0 +1,7 @@
+export interface AbstractTreeNode {
+    children?: AbstractTreeNode[];
+}
+/** 判断是否为叶子节点 */
+export declare function isLeafNode<T extends AbstractTreeNode>(node: T): boolean;
+/** 遍历所有节点，并将节点收集到一个数组中 */
+export declare function collectNodes<T extends AbstractTreeNode>(nodes: T[], order?: 'pre' | 'post' | 'leaf-only'): T[];

package/dist/form-ui/extend/array-table/utils/tree-utils.js

@@ -0,0 +1,30 @@
+function isLeafNode(node) {
+  return !node.children || node.children.length === 0;
+}
+function collectNodes(nodes, order = "pre") {
+  const result = [];
+  function dfs(nodes2) {
+    if (!nodes2) return;
+    for (const node of nodes2) {
+      if (isLeafNode(node)) {
+        result.push(node);
+      } else {
+        if (order === "pre") {
+          result.push(node);
+          dfs(node.children);
+        } else if (order === "post") {
+          dfs(node.children);
+          result.push(node);
+        } else {
+          dfs(node.children);
+        }
+      }
+    }
+  }
+  dfs(nodes);
+  return result;
+}
+export {
+  collectNodes,
+  isLeafNode
+};

package/dist/form-ui/index.d.ts

@@ -0,0 +1,2 @@
+export { arrayTable } from './extend/array-table';
+export type { ArrayTableOptions } from './types';

package/dist/form-ui/types/index.d.ts

@@ -0,0 +1,9 @@
+export interface ArrayTableOptions {
+    orderColumn?: any;
+    style?: React.CSSProperties;
+    className?: string;
+    operations?: any;
+    operationColumn?: any;
+    tableImplementation?: React.ComponentType<any>;
+    tableProps?: any;
+}

package/dist/index.d.ts

@@ -1,9 +1,2 @@
-import { Form } from './form';
-import { useModel } from './form/context/modelContext';
-import { FormEnvProvider, useFormEnv } from './form/context/formEnvContext';
-import { FormItem, createFormItem } from './form/form-item';
-import { FormModel } from './form/model';
-import { arrayHelpers } from './form/array-helper';
-import { AsyncValue } from './form/helpers/AsyncValue';
-import { modelUtils } from './form/model-utils';
-export { Form, FormEnvProvider, useFormEnv, useModel, FormItem, createFormItem, FormModel, arrayHelpers, AsyncValue, modelUtils, };
+export * from './form';
+export * from './form-ui';

package/dist/index.js

@@ -1,11 +1,12 @@
-import { Form } from "./form/index.js";
+import { Form } from "./form/form/index.js";
 import { useModel } from "./form/context/modelContext.js";
 import { FormEnvProvider, useFormEnv } from "./form/context/formEnvContext.js";
-import { FormItem, createFormItem } from "./form/form-item.js";
-import { FormModel } from "./form/model.js";
-import { arrayHelpers } from "./form/array-helper.js";
+import { FormItem, createFormItem } from "./form/form-item/index.js";
+import { FormModel } from "./form/model/model.js";
+import { arrayHelpers } from "./form/helpers/array-helper.js";
 import { AsyncValue } from "./form/helpers/AsyncValue.js";
-import { modelUtils } from "./form/model-utils.js";
+import { modelUtils } from "./form/model/model-utils.js";
+import { arrayTable } from "./form-ui/extend/array-table/index.js";
 export {
   AsyncValue,
   Form,
@@ -13,6 +14,7 @@ export {
   FormItem,
   FormModel,
   arrayHelpers,
+  arrayTable,
   createFormItem,
   modelUtils,
   useFormEnv,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-antd-xform",
-  "version": "1.0.11",
+  "version": "1.0.12-beta.1",
   "description": "基于mobx的form解决方案",
   "type": "module",
   "main": "./dist/index.js",