@schemx/vue 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import "./style.css";
-import { shallowRef, computed, getCurrentInstance, inject, provide, onScopeDispose, onUnmounted, ref, onMounted, watchEffect, watch, readonly, createVNode, h, createTextVNode, defineComponent, mergeProps, useAttrs, openBlock, createElementBlock, unref, renderSlot, createCommentVNode, createStaticVNode, Fragment, toDisplayString, markRaw, toRaw, isVNode, useSlots, reactive, normalizeClass, normalizeStyle, createSlots, renderList, withCtx, normalizeProps, guardReactiveProps, createBlock, nextTick } from "vue";
-import { isViewGroupSchema, isViewDynamicSchema, mergeSchemxConfig, createPresetRuleRegistry, createForm, createField, createWatch, isSchemxViewFieldSchema, getGlobalSchemxConfig, mergeAndResolveSchemxConfig, isSchemxSchemas, defaultSchemxConfigKeys } from "@schemx/core";
+import { shallowRef, computed, getCurrentScope, onScopeDispose, provide, inject, getCurrentInstance, onUnmounted, ref, onMounted, watchEffect, watch, readonly, defineComponent, markRaw, toRaw, h, useAttrs, createVNode, Fragment, mergeProps, isVNode, openBlock, createElementBlock, unref, renderSlot, createCommentVNode, createStaticVNode, createTextVNode, toDisplayString, useSlots, normalizeClass, normalizeStyle, createSlots, renderList, withCtx, normalizeProps, guardReactiveProps, createBlock, nextTick } from "vue";
+import { isViewGroupSchema, isViewDynamicSchema, mergeConfig, createPresetRuleRegistry, getGlobalSchemxConfig, createForm, createField, createWatch, isSchemxViewFieldSchema, defaultSchemxConfigKeys, resolveSchemxConfig, isSchemxSchemas } from "@schemx/core";
 export * from "@schemx/core";
 import classnames from "classnames";
 import { createFormStateAdapter, createRendererRegistry } from "@schemx/core/adapter";
@@ -169,7 +169,14 @@ function createViewSchemaIndex(viewSchemas) {
   return schemasByKey;
 }
 const runtimeCache = /* @__PURE__ */ new WeakMap();
-const instanceRuntimeCache = /* @__PURE__ */ new WeakMap();
+function useVueFormRuntime(form) {
+  if (!getCurrentScope()) {
+    throw new Error("[schemx] useVueFormRuntime() requires an active Vue scope.");
+  }
+  const { runtime, release } = acquireVueFormRuntime(form);
+  onScopeDispose(release);
+  return runtime;
+}
 function acquireVueFormRuntime(form) {
   const runtime = getOrCreateVueFormRuntime(form);
   const release = runtime.retain();
@@ -179,17 +186,13 @@ function acquireVueFormRuntime(form) {
   };
 }
 function getOrCreateVueFormRuntime(form) {
-  const cachedByInstance = instanceRuntimeCache.get(form);
-  if (cachedByInstance) {
-    return cachedByInstance;
-  }
   const cachedByCore = runtimeCache.get(form);
   if (cachedByCore) {
     return cachedByCore;
   }
   const runtime = createVueFormRuntime(form);
   runtimeCache.set(form, runtime);
-  instanceRuntimeCache.set(runtime.instance, runtime);
+  runtimeCache.set(runtime.instance, runtime);
   return runtime;
 }
 function createVueFormRuntime(core) {
@@ -203,26 +206,27 @@ function createVueFormRuntime(core) {
     const pendingFields = bindSnapshotSource(stateAdapter.pendingFields);
     const loading = bindSnapshotSource(stateAdapter.loading);
     const fieldStates = /* @__PURE__ */ new Map();
-    let viewSchemaState;
     let disposed = false;
     const dispose = () => {
+      var _a;
       if (disposed) {
         return;
       }
       disposed = true;
+      (_a = currentResources.viewSchemaState) == null ? void 0 : _a.dispose();
       fieldStates.clear();
       stateAdapter.dispose();
     };
-    return {
+    const currentResources = {
       stateAdapter,
       values,
       touchedFields,
       pendingFields,
       loading,
       fieldStates,
-      viewSchemaState,
       dispose
     };
+    return currentResources;
   };
   const ensureResources = () => {
     if (destroyed) {
@@ -335,22 +339,98 @@ function createVueFormRuntime(core) {
   };
   return runtime;
 }
-const SCHEMX_APP_CONFIG_KEY = Symbol("schemx:app-config");
-const EMPTY_SCHEMX_CONFIG = Object.freeze({
-  schemaConfig: Object.freeze({}),
-  validatorAdapters: Object.freeze([])
-});
+const SCHEMX_FORM_INSTANCE_KEY = Symbol("schemx:instance");
+const SCHEMX_FORM_CONFIG_KEY = Symbol("schemx:form-config");
+function provideFormContext(context) {
+  const form = useVueFormRuntime(context.form).instance;
+  provide(SCHEMX_FORM_INSTANCE_KEY, form);
+  provide(SCHEMX_FORM_CONFIG_KEY, context);
+  return form;
+}
+function useFormContextValue() {
+  const context = useOptionalFormContextValue();
+  if (context) {
+    return context;
+  }
+  throw new Error(
+    "[schemx] useFormContextValue() must be called inside a <SchemxForm> descendant. Ensure provideFormContext({ form, schemaConfig }) is called synchronously during setup()."
+  );
+}
+function useOptionalFormContextValue() {
+  const form = inject(SCHEMX_FORM_INSTANCE_KEY, null);
+  const config = inject(SCHEMX_FORM_CONFIG_KEY, null);
+  if (form && config) {
+    return {
+      form,
+      get schemaConfig() {
+        return config.schemaConfig;
+      },
+      get iconComponent() {
+        return config.iconComponent;
+      },
+      get rowComponent() {
+        return config.rowComponent;
+      },
+      get colComponent() {
+        return config.colComponent;
+      }
+    };
+  }
+  return void 0;
+}
+function createFormContext(instance) {
+  const form = useVueFormRuntime(instance).instance;
+  provide(SCHEMX_FORM_INSTANCE_KEY, form);
+  return form;
+}
+function useFormContext() {
+  const instance = inject(SCHEMX_FORM_INSTANCE_KEY, null);
+  if (!instance) {
+    throw new Error(
+      "[schemx] useFormContext() must be called inside a <SchemxForm> descendant. Ensure provideFormContext({ form, schemaConfig }) is called synchronously during setup()."
+    );
+  }
+  return instance;
+}
+function createFormConfigContext(props) {
+  provide(SCHEMX_FORM_CONFIG_KEY, props);
+}
+function useFormConfigContext() {
+  const config = inject(SCHEMX_FORM_CONFIG_KEY, null);
+  if (!config) {
+    throw new Error(
+      "[schemx] useFormConfigContext() must be called inside a <SchemxForm> descendant. Ensure provideFormContext({ form, schemaConfig }) is called synchronously during setup()."
+    );
+  }
+  return config;
+}
+function useFormRuntimeContext() {
+  return useVueFormRuntime(useFormContext());
+}
+const SCHEMX_FIELD_CONTEXT_KEY = Symbol("schemx:field");
+function createFieldContext(field) {
+  provide(SCHEMX_FIELD_CONTEXT_KEY, field);
+}
+function useFieldContext() {
+  const field = inject(SCHEMX_FIELD_CONTEXT_KEY, null);
+  if (!field) {
+    throw new Error(
+      "[schemx] useFieldContext() must be called inside a component tree where createFieldContext(field) has been called."
+    );
+  }
+  return field;
+}
+const SCHEMX_CONFIG_PROVIDER_KEY = Symbol(
+  "schemx:config-provider"
+);
 function normalizeSchemxAppConfig(config) {
   const schemaConfig = Object.freeze({ ...config.schemaConfig ?? {} });
   const validatorAdapters = Object.freeze([...config.validatorAdapters ?? []]);
   return Object.freeze({
+    ...config,
     schemaConfig,
     rendererProps: normalizeRendererProps(config.rendererProps),
-    validatorAdapters,
-    defaultRendererType: config.defaultRendererType,
-    rendererRegistry: config.rendererRegistry,
-    presetRuleRegistry: config.presetRuleRegistry,
-    colComponent: config.colComponent
+    validatorAdapters
   });
 }
 function normalizeRendererProps(source) {
@@ -364,33 +444,35 @@ function normalizeRendererProps(source) {
 }
 function provideSchemxAppConfig(app, config = {}) {
   const normalizedConfig = normalizeSchemxAppConfig(config);
-  app.provide(SCHEMX_APP_CONFIG_KEY, normalizedConfig);
-}
-function getSchemxAppConfig() {
-  if (getCurrentInstance() === null) {
-    return EMPTY_SCHEMX_CONFIG;
-  }
-  return inject(SCHEMX_APP_CONFIG_KEY, EMPTY_SCHEMX_CONFIG);
+  app.provide(
+    SCHEMX_CONFIG_PROVIDER_KEY,
+    computed(() => normalizedConfig)
+  );
 }
-const SCHEMX_CONFIG_PROVIDER_KEY = Symbol(
-  "schemx:config-provider"
-);
-function provideSchemxConfigProvider(config) {
+function createConfigProviderContext(config) {
   const parentConfig = inject(SCHEMX_CONFIG_PROVIDER_KEY, void 0);
   const mergedConfig = computed(() => {
-    const mergedCoreConfig = mergeSchemxConfig(config.value, (parentConfig == null ? void 0 : parentConfig.value) ?? {});
+    const mergedCoreConfig = mergeConfig(config.value, (parentConfig == null ? void 0 : parentConfig.value) ?? {});
+    const parentRow = parentConfig == null ? void 0 : parentConfig.value.row;
+    const localRow = config.value.row;
     return {
       ...mergedCoreConfig,
-      colComponent: config.value.colComponent ?? (parentConfig == null ? void 0 : parentConfig.value.colComponent)
+      colComponent: config.value.colComponent ?? (parentConfig == null ? void 0 : parentConfig.value.colComponent),
+      rowComponent: config.value.rowComponent ?? (parentConfig == null ? void 0 : parentConfig.value.rowComponent),
+      iconComponent: config.value.iconComponent ?? (parentConfig == null ? void 0 : parentConfig.value.iconComponent),
+      row: localRow === void 0 ? parentRow : {
+        ...parentRow,
+        ...localRow
+      }
     };
   });
   provide(SCHEMX_CONFIG_PROVIDER_KEY, mergedConfig);
 }
-function getSchemxConfigProvider() {
+function useConfigProviderContext() {
   var _a;
-  return (_a = getSchemxConfigProviderRef()) == null ? void 0 : _a.value;
+  return (_a = useConfigProviderContextRef()) == null ? void 0 : _a.value;
 }
-function getSchemxConfigProviderRef() {
+function useConfigProviderContextRef() {
   if (getCurrentInstance() === null) {
     return void 0;
   }
@@ -399,29 +481,82 @@ function getSchemxConfigProviderRef() {
 const presetRuleRegistry = createPresetRuleRegistry();
 const rendererRegistry = createRendererRegistry("input");
 function mergeVueSchemxConfig(localConfig, fallbackConfig = {}) {
-  const providerConfig = getSchemxConfigProvider();
-  return mergeSchemxConfig(
+  const providerConfig = useConfigProviderContext();
+  const coreConfig = getGlobalSchemxConfig();
+  return mergeConfig(
     localConfig,
     providerConfig ?? {},
-    getSchemxAppConfig(),
     fallbackConfig,
+    coreConfig,
     {
       rendererRegistry,
       presetRuleRegistry
     }
   );
 }
+const defaultVueSchemaConfig = Object.freeze({
+  /**
+   * 表单级标签图标默认值。
+   */
+  labelIcon: "",
+  /**
+   * 表单级标签对齐默认值。
+   */
+  labelAlign: "right",
+  /**
+   * 表单级标签位置默认值。
+   */
+  labelPosition: "left",
+  /**
+   * 表单级标签宽度默认值。
+   */
+  labelWidth: "auto",
+  /**
+   * 表单级内容对齐默认值。
+   */
+  contentAlign: "left",
+  /**
+   * 表单级校验错误对齐默认值。
+   */
+  errorAlign: "left",
+  /**
+   * 表单级标签冒号默认值。
+   */
+  colon: true,
+  /**
+   * 表单级必填标记默认值。
+   */
+  showRequiredMark: void 0,
+  /**
+   * 字段默认 Col 配置。
+   */
+  col: { span: 24 },
+  /**
+   * 旧版字段默认布局配置。
+   *
+   * @deprecated 请改用 {@link import("../types/layout").SchemxColConfig} 与 `col` 字段。
+   */
+  layout: { span: 24 },
+  /**
+   * 是否在 field schema 后显示底部边框。
+   */
+  bordered: true
+});
+const defaultVueSchemaConfigKeys = Object.keys(
+  defaultVueSchemaConfig
+);
 function useForm(options = {}) {
-  const configuredOptions = mergeVueSchemxConfig(getUseFormSchemxConfig(options));
+  const configuredOptions = mergeVueSchemxConfig(
+    getUseFormSchemxConfig(options),
+    {}
+  );
   const mergedOptions = {
     ...options,
     ...configuredOptions
   };
   const instance = createForm(mergedOptions);
-  const acquired = acquireVueFormRuntime(instance);
-  const form = acquired.runtime.instance;
+  const form = useVueFormRuntime(instance).instance;
   onScopeDispose(() => {
-    acquired.release();
     form.destroy();
   });
   return form;
@@ -444,41 +579,6 @@ function getUseFormSchemxConfig(options) {
     validatorAdapters
   };
 }
-const SCHEMX_FORM_INSTANCE_KEY = Symbol(
-  "schemx:instance"
-);
-const SCHEMX_FORM_RUNTIME_KEY = Symbol(
-  "schemx:runtime"
-);
-function createFormContext(instance) {
-  const { runtime, release } = acquireVueFormRuntime(instance);
-  provide(
-    SCHEMX_FORM_INSTANCE_KEY,
-    runtime.instance
-  );
-  provide(SCHEMX_FORM_RUNTIME_KEY, runtime);
-  onScopeDispose(release);
-  return runtime.instance;
-}
-function useFormContext() {
-  const instance = inject(SCHEMX_FORM_INSTANCE_KEY, null);
-  if (!instance) {
-    throw new Error(
-      "[schemx] useFormContext() must be called inside a <SchemxForm> descendant. Ensure createFormContext(form) is called synchronously during setup()."
-    );
-  }
-  return instance;
-}
-function useFormRuntimeContext() {
-  const providedRuntime = inject(SCHEMX_FORM_RUNTIME_KEY, null);
-  if (providedRuntime) {
-    return providedRuntime;
-  }
-  const instance = useFormContext();
-  const acquired = acquireVueFormRuntime(instance);
-  onScopeDispose(acquired.release);
-  return acquired.runtime;
-}
 function createFieldHook(form, coreForm, name, fieldState) {
   const coreField = createField(coreForm, name);
   const errors = computed(() => fieldState.errors.value);
@@ -507,27 +607,12 @@ const useField = (name) => {
   const form = useFormContext();
   const runtime = useFormRuntimeContext();
   const fieldState = runtime.getFieldState(name);
-  return createFieldHook(form, runtime.core, name, fieldState);
+  return createFieldHook(form, runtime.instance, name, fieldState);
 };
-const SCHEMX_FORM_FIELD_KEY = Symbol(
-  "schemx:field"
-);
-function createFieldContext(field) {
-  provide(SCHEMX_FORM_FIELD_KEY, field);
-}
-function useFieldContext() {
-  const field = inject(SCHEMX_FORM_FIELD_KEY);
-  if (!field) {
-    throw new Error(
-      "[schemx] useFieldContext() must be called inside a component tree where createFieldContext(field) has been called."
-    );
-  }
-  return field;
-}
 function useWatch(nameOrNamesOrCallback, callbackOrOptions, maybeOptions) {
   const runtime = useFormRuntimeContext();
   const dispose = createWatch(
-    runtime.core,
+    runtime.instance,
     nameOrNamesOrCallback,
     callbackOrOptions,
     maybeOptions
@@ -692,21 +777,6 @@ function callDictionaryApi(values, form, api, signal) {
   }
   return api(values, form);
 }
-const SCHEMX_FORM_CONFIG_KEY = Symbol(
-  "schemx:form-config"
-);
-const createFormConfigContext = (props) => {
-  provide(SCHEMX_FORM_CONFIG_KEY, props);
-};
-function useFormConfigContext() {
-  const context = inject(SCHEMX_FORM_CONFIG_KEY);
-  if (!context) {
-    throw new Error(
-      "[schemx] useFormConfigContext() must be called inside a <SchemxForm> descendant. Ensure createFormConfigContext(props) is called synchronously during setup()."
-    );
-  }
-  return context;
-}
 const isShallowEqual = (a, b) => {
   const keysA = Object.keys(a);
   const keysB = Object.keys(b);
@@ -725,24 +795,19 @@ function useStableRef(factory) {
   return stableRef;
 }
 function useViewSchemas(form) {
-  const acquired = acquireVueFormRuntime(form);
-  const state = acquired.runtime.getViewSchemaState();
-  onScopeDispose(acquired.release);
+  const state = useVueFormRuntime(form).getViewSchemaState();
   return state.viewSchemas;
 }
 function useViewSchema(form, getKey) {
-  const acquired = acquireVueFormRuntime(form);
-  const state = acquired.runtime.getViewSchemaState();
+  const state = useVueFormRuntime(form).getViewSchemaState();
   const schema = computed(() => state.schemasByKey.value.get(getKey()));
-  onScopeDispose(acquired.release);
   return schema;
 }
 function useFormSelector(form, selector, options = {}) {
-  const acquired = acquireVueFormRuntime(form);
-  const values = acquired.runtime.getValuesRef();
+  const values = useVueFormRuntime(form).getValuesRef();
   const selected = shallowRef(selector(values.value));
   const equals = options.equals ?? Object.is;
-  const stop = watch(
+  watch(
     values,
     (values2) => {
       const next = selector(values2);
@@ -752,10 +817,6 @@ function useFormSelector(form, selector, options = {}) {
     },
     { flush: options.flush ?? "sync" }
   );
-  onScopeDispose(() => {
-    stop();
-    acquired.release();
-  });
   return readonly(selected);
 }
 function isValidTrigger(v) {
@@ -878,6 +939,146 @@ function hasPositionItemInSection(list, startIndex, step) {
   }
   return false;
 }
+function normalizeSchemxGutter(gutter) {
+  if (gutter === void 0) {
+    return [0, 0, 0, 0];
+  }
+  if (typeof gutter === "number") {
+    return [gutter, gutter, gutter, gutter];
+  }
+  if (gutter.length === 2) {
+    const [vertical, horizontal] = gutter;
+    return [vertical, horizontal, vertical, horizontal];
+  }
+  return gutter;
+}
+const Col = /* @__PURE__ */ defineComponent({
+  name: "SchemxCol",
+  inheritAttrs: false,
+  props: {
+    col: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    /**
+     * @deprecated 请在 Form 或 ConfigProvider 的 `colComponent` 中配置实现，见 {@link import("@schemx/core").SchemxConfig}。
+     */
+    component: {
+      type: [Object, Function],
+      required: false,
+      default: void 0
+    },
+    /**
+     * @deprecated 请改用 {@link import("../../types/layout").SchemxColProps.col}。
+     */
+    layout: {
+      type: Object,
+      required: false,
+      default: void 0
+    }
+  },
+  /**
+   * 根据 Col 配置和当前 Form Context 创建列组件。
+   *
+   * @param props - 列配置及兼容期的组件覆写属性。
+   * @param setupContext - 父级透传属性与默认插槽。
+   */
+  setup(props, setupContext) {
+    const {
+      attrs,
+      slots
+    } = setupContext;
+    const formContext = useOptionalFormContextValue();
+    const resolvedComponent = computed(() => {
+      const component = props.component ?? (formContext == null ? void 0 : formContext.colComponent);
+      return component ? markRaw(toRaw(component)) : void 0;
+    });
+    return () => {
+      const component = resolvedComponent.value;
+      const col = props.col ?? props.layout ?? {};
+      const {
+        block,
+        span: configuredSpan,
+        offset: configuredOffset,
+        ...extensionProps
+      } = col;
+      const span = block ? 24 : configuredSpan ?? 24;
+      const offset = block ? 0 : configuredOffset ?? 0;
+      const {
+        class: attrsClass,
+        style: attrsStyle,
+        ...restAttrs
+      } = attrs;
+      if (!component) {
+        const width = `${span / 24 * 100}%`;
+        const marginLeft = `${offset / 24 * 100}%`;
+        return h("div", {
+          ...restAttrs,
+          class: ["schemx-col", attrsClass],
+          style: [attrsStyle, {
+            flex: `0 0 ${width}`,
+            maxWidth: width,
+            marginLeft,
+            paddingTop: "var(--schemx-gutter-top, 0px)",
+            paddingRight: "var(--schemx-gutter-right, 0px)",
+            paddingBottom: "var(--schemx-gutter-bottom, 0px)",
+            paddingLeft: "var(--schemx-gutter-left, 0px)"
+          }]
+        }, slots);
+      }
+      return h(component, {
+        ...extensionProps,
+        ...restAttrs,
+        class: ["schemx-col", attrsClass],
+        style: attrsStyle,
+        span,
+        offset
+      }, slots);
+    };
+  }
+});
+const Col$1 = Col;
+const Icon = /* @__PURE__ */ defineComponent({
+  name: "SchemxIcon",
+  inheritAttrs: false,
+  props: {
+    icon: {
+      type: [String, Object, Function],
+      required: true
+    },
+    component: {
+      type: [Object, Function],
+      required: false,
+      default: void 0
+    }
+  },
+  /**
+   * 渲染直接传入的组件，或将字符串名称交给 Icon Adapter。
+   *
+   * @param props - 当前图标值及可选的 Adapter 组件。
+   */
+  setup(props) {
+    const attrs = useAttrs();
+    return () => {
+      if (typeof props.icon !== "string") {
+        return h(markRaw(toRaw(props.icon)), attrs);
+      }
+      const adapter = props.component;
+      if (adapter === void 0) {
+        return h("span", {
+          ...attrs,
+          class: ["schemx-icon-text", attrs.class]
+        }, props.icon);
+      }
+      return h(markRaw(toRaw(adapter)), {
+        ...attrs,
+        icon: props.icon
+      });
+    };
+  }
+});
+const Icon$1 = Icon;
 function createFieldSlotRenderers(options) {
   const {
     schemaRef,
@@ -887,15 +1088,19 @@ function createFieldSlotRenderers(options) {
     componentProps,
     slots
   } = options;
-  const renderRequired = () => {
-    const showRequiredMark = schemaRef.value.showRequiredMark ?? Boolean(schemaRef.value.required);
-    if (!showRequiredMark || schemaRef.value.disabled || schemaRef.value.readonly) {
-      return null;
+  const labelWidth = computed(() => {
+    if (schemaRef.value.labelPosition === "top") {
+      return "100%";
     }
-    return createVNode("span", {
-      "class": "schemx-field__required"
-    }, [createTextVNode("*")]);
-  };
+    const width = schemaRef.value.labelWidth ?? "auto";
+    return /^\d+(?:\.\d+)?$/.test(String(width)) ? `${width}px` : width;
+  });
+  const labelAlign = computed(() => {
+    if (schemaRef.value.labelPosition === "top") {
+      return "left";
+    }
+    return schemaRef.value.labelAlign;
+  });
   const createSlotProps = (additionalProps = {}) => {
     return {
       schema: schemaRef.value,
@@ -912,54 +1117,63 @@ function createFieldSlotRenderers(options) {
   };
   const renderLabel = () => {
     const labelSlot = resolveSlot(slots, `${normalizeNameKey(schemaRef.value.name)}Label`);
-    if (labelSlot) {
-      return labelSlot(createSlotProps());
-    }
-    const labelAlign = schemaRef.value.labelAlign || formContext.schemaConfig.labelAlign;
-    const labelWidth = schemaRef.value.labelWidth || formContext.schemaConfig.labelWidth;
     const colon = schemaRef.value.colon ?? formContext.schemaConfig.colon;
+    const showRequiredMark = (schemaRef.value.showRequiredMark ?? Boolean(schemaRef.value.required)) && !schemaRef.value.disabled && !schemaRef.value.readonly;
     return createVNode("label", {
       "class": "schemx-field__label",
       "style": {
-        width: labelWidth,
-        textAlign: labelAlign
+        width: labelWidth.value,
+        textAlign: labelAlign.value,
+        marginLeft: labelAlign.value === "right" ? "auto" : ""
       }
-    }, [renderRequired(), createVNode("span", {
-      "class": "schemx-field__label-text"
-    }, [schemaRef.value.label, colon ? ":" : ""])]);
+    }, [labelSlot ? labelSlot(createSlotProps()) : createVNode(Fragment, null, [schemaRef.value.labelIcon && createVNode("span", {
+      "class": "schemx-field__label-icon"
+    }, [createVNode(Icon$1, {
+      "icon": schemaRef.value.labelIcon,
+      "component": formContext.iconComponent
+    }, null)]), createVNode("span", {
+      "class": classnames("schemx-field__label-text", {
+        "is-required": showRequiredMark
+      })
+    }, [schemaRef.value.label, colon ? ":" : ""])])]);
   };
   const renderBefore = () => renderFieldSlot("Before");
   const renderContent = () => {
-    const component = form.getRenderer(schemaRef.value.componentType);
-    if (!component) {
+    const rendererEntry = form.getRendererEntry(schemaRef.value.componentType);
+    if (!rendererEntry) {
       throw new Error(`[schemx] Can not find component renderer of "${schemaRef.value.componentType}".`);
     }
     const childSlots = extractChildSlots(normalizeNameKey(schemaRef.value.name), slots);
-    const columnElement = h(component, componentProps.value, childSlots);
+    const transformedProps = rendererEntry.transformProps ? rendererEntry.transformProps(componentProps.value, {
+      schema: schemaRef.value,
+      form
+    }) : componentProps.value;
+    const columnElement = h(rendererEntry.component, transformedProps, childSlots);
     const contentSlot = resolveSlot(slots, `${normalizeNameKey(schemaRef.value.name)}Content`);
-    if (contentSlot) {
-      return contentSlot(createSlotProps({
-        columnElement
-      }));
-    }
     return createVNode("div", {
-      "class": "schemx-field__control"
-    }, [columnElement]);
+      "class": "schemx-field__content",
+      "style": {
+        textAlign: schemaRef.value.contentAlign
+      }
+    }, [contentSlot ? contentSlot(createSlotProps({
+      columnElement
+    })) : columnElement]);
   };
   const renderAfter = () => renderFieldSlot("After");
   const renderError = () => {
+    var _a;
     const errorSlot = resolveSlot(slots, `${normalizeNameKey(schemaRef.value.name)}Error`);
-    if (errorSlot) {
-      return errorSlot(createSlotProps({
-        errors: field.errors.value
-      }));
-    }
-    if (field.errors.value.length === 0) {
+    if (!errorSlot && field.errors.value.length === 0) {
       return null;
     }
     return createVNode("div", {
-      "class": "schemx-field__error"
-    }, [field.errors.value[0]]);
+      "class": "schemx-field__error",
+      "style": {
+        marginLeft: ((_a = schemaRef.value) == null ? void 0 : _a.labelPosition) === "top" ? "8px" : `calc(${labelWidth.value} + var(--schemx-field-gap))`
+      }
+    }, [errorSlot ? errorSlot(createSlotProps({
+      errors: field.errors.value
+    })) : field.errors.value[0]]);
   };
   return {
     createSlotProps,
@@ -970,6 +1184,9 @@ function createFieldSlotRenderers(options) {
     renderLabel
   };
 }
+function _isSlot$3(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 const Field = /* @__PURE__ */ defineComponent({
   name: "SchemxField",
   inheritAttrs: false,
@@ -989,49 +1206,50 @@ const Field = /* @__PURE__ */ defineComponent({
       default: void 0
     }
   },
+  slots: Object,
   /**
    * 初始化字段上下文，并组合响应式 schema、校验处理器与插槽渲染器。
    *
-   * @param props - 当前字段项的 schema 属性。
-   * @param attrs - Vue setup 上下文提供的透传属性。
-   * @param slots - Vue setup 上下文提供的插槽集合。
+   * @param props - 当前字段项的 Schema、class 和 style。
+   * @param setupContext - Vue setup 上下文，包含透传属性和字段插槽。
    */
-  setup(props, {
-    attrs,
-    slots
-  }) {
-    const form = useFormContext();
+  setup(props, setupContext) {
+    const {
+      attrs,
+      slots
+    } = setupContext;
+    const formContext = useFormContextValue();
+    const form = formContext.form;
     const inputSchema = computed(() => props.schema);
     const latestSchema = useViewSchema(form, () => inputSchema.value.key);
     const schemaRef = computed(() => {
       return latestSchema.value && isSchemxViewFieldSchema(latestSchema.value) ? latestSchema.value : inputSchema.value;
     });
-    const formContext = useFormConfigContext();
     const field = useField(schemaRef.value.name);
     createFieldContext(field);
     const trigger = computed(() => mergeTrigger(schemaRef.value.validationTrigger, formContext.schemaConfig.validationTrigger, "onChange"));
     const canVerified = computed(() => {
       const isOperate = schemaRef.value.visible !== false && !schemaRef.value.readonly && !schemaRef.value.disabled;
-      const rules = schemaRef.value.rules;
-      const hasRules = Array.isArray(rules) ? (rules == null ? void 0 : rules.length) > 0 : !!schemaRef.value.rules;
-      return isOperate && (Boolean(schemaRef.value.required) || hasRules);
+      return isOperate;
     });
     const handleChange = (v) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       field.setValue(v);
       (_b = (_a = schemaRef.value.componentProps) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, v);
+      (_d = (_c = schemaRef.value).onChange) == null ? void 0 : _d.call(_c, v, form);
       if (canVerified.value && shouldValidateOn("change", trigger.value)) {
         field.validate();
       }
     };
     const handleBlur = (v) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       (_b = (_a = schemaRef.value.componentProps) == null ? void 0 : _a.onBlur) == null ? void 0 : _b.call(_a, v);
+      (_d = (_c = schemaRef.value).onBlur) == null ? void 0 : _d.call(_c, form);
       if (canVerified.value && shouldValidateOn("blur", trigger.value)) {
         field.validate();
       }
     };
-    const handleValueUpdate = (v) => {
+    const updateValue = (v) => {
       field.setValue(v);
     };
     const componentProps = useStableRef(() => {
@@ -1041,7 +1259,7 @@ const Field = /* @__PURE__ */ defineComponent({
         value: field.value.value,
         onChange: handleChange,
         onBlur: handleBlur,
-        "onUpdate:value": handleValueUpdate
+        "onUpdate:value": updateValue
       };
     });
     const {
@@ -1064,19 +1282,25 @@ const Field = /* @__PURE__ */ defineComponent({
         return null;
       }
       const fieldSlot = resolveSlot(slots, normalizeNameKey(schemaRef.value.name));
-      const labelPosition = schemaRef.value.labelPosition || formContext.schemaConfig.labelPosition;
+      const labelPosition = schemaRef.value.labelPosition;
       const fieldContent = fieldSlot ? fieldSlot(createSlotProps()) : createVNode("div", {
         "class": classnames("schemx-field", `schemx-field--label-${labelPosition}`, {
           "is-readonly": schemaRef.value.readonly,
           "is-disabled": schemaRef.value.disabled
         })
-      }, [renderLabel(), createVNode("div", {
-        "class": "schemx-field__content"
-      }, [renderBefore(), renderContent(), renderAfter(), renderError()])]);
-      return createVNode("div", mergeProps(attrs, {
-        "class": classnames("schemx-field-wrapper", props.class, attrs.class, schemaRef.value.class),
-        "style": [attrs.style, props.style, schemaRef.value.style]
-      }), [fieldContent]);
+      }, [renderLabel(), renderContent()]);
+      const fieldWrapper = createVNode("div", mergeProps(attrs, {
+        "class": classnames("schemx-field-wrapper", props.class, attrs.class, schemaRef.value.class, schemaRef.value.bordered ? "is-bordered" : ""),
+        "style": [attrs.style, props.style, schemaRef.value.style, {
+          "--schemx-content-align": schemaRef.value.contentAlign,
+          "--schemx-error-align": schemaRef.value.errorAlign ?? formContext.schemaConfig.errorAlign ?? "left"
+        }]
+      }), [renderBefore(), fieldContent, renderError(), renderAfter()]);
+      return createVNode(Col$1, {
+        "col": schemaRef.value.col ?? schemaRef.value.layout
+      }, _isSlot$3(fieldWrapper) ? fieldWrapper : {
+        default: () => [fieldWrapper]
+      });
     };
   }
 });
@@ -1140,58 +1364,59 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const registeredColComponent = shallowRef();
-function registerCol(component) {
-  registeredColComponent.value = component;
+function _isSlot$2(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const Col = /* @__PURE__ */ defineComponent({
-  name: "SchemxCol",
+const Dynamic = /* @__PURE__ */ defineComponent({
+  name: "SchemxDynamic",
   inheritAttrs: false,
   props: {
-    layout: {
+    schema: {
       type: Object,
-      required: false,
-      default: void 0
+      required: true
     },
-    component: {
-      type: [Object, Function],
+    rowConfig: {
+      type: Object,
       required: false,
       default: void 0
+    },
+    renderChildren: {
+      type: Function,
+      required: true
     }
   },
-  setup(props, {
-    attrs,
-    slots
-  }) {
-    const resolvedComponent = computed(() => {
-      const component = props.component ?? registeredColComponent.value;
-      return component ? markRaw(toRaw(component)) : void 0;
-    });
+  /**
+   * 初始化 Dynamic 的行模板渲染器。
+   *
+   * @param props - 当前 Dynamic ViewSchema、继承的 Row 配置和子级渲染回调。
+   */
+  setup(props) {
     return () => {
-      var _a;
-      const component = resolvedComponent.value;
-      if (!component) {
-        return ((_a = slots.default) == null ? void 0 : _a.call(slots)) ?? null;
+      if (props.schema.visible === false) {
+        return null;
       }
-      const layout = props.layout ?? {};
-      const span = layout.block ? 24 : layout.span ?? 24;
-      const offset = layout.block ? 0 : layout.offset ?? 0;
-      const {
-        class: attrsClass,
-        style: attrsStyle,
-        ...restAttrs
-      } = attrs;
-      return h(component, {
-        ...restAttrs,
-        class: ["schemx-col", attrsClass],
-        style: attrsStyle,
-        span,
-        offset
-      }, slots);
+      const rowConfig = props.rowConfig || props.schema.row ? {
+        ...props.rowConfig,
+        ...props.schema.row
+      } : void 0;
+      const items = props.schema.items.map((item) => {
+        const children = rowConfig === void 0 ? props.renderChildren(item.children) : props.renderChildren(item.children, rowConfig);
+        return createVNode(Fragment, {
+          "key": item.key
+        }, [children]);
+      });
+      if (!props.schema.layout) {
+        return items;
+      }
+      return createVNode(Col$1, {
+        "col": props.schema.layout
+      }, _isSlot$2(items) ? items : {
+        default: () => [items]
+      });
     };
   }
 });
-const Col$1 = Col;
+const Dynamic$1 = Dynamic;
 function createGroupSlotRenderers(options) {
   const {
     schema,
@@ -1243,6 +1468,9 @@ function createGroupSlotRenderers(options) {
     renderHeaderContent
   };
 }
+function _isSlot$1(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 const Group = /* @__PURE__ */ defineComponent({
   name: "SchemxGroup",
   inheritAttrs: false,
@@ -1251,6 +1479,11 @@ const Group = /* @__PURE__ */ defineComponent({
       type: Object,
       required: true
     },
+    rowConfig: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
     class: {
       type: [String, Object, Array, Boolean],
       required: false,
@@ -1267,11 +1500,19 @@ const Group = /* @__PURE__ */ defineComponent({
       default: void 0
     }
   },
-  setup(props, {
-    attrs,
-    slots
-  }) {
+  slots: Object,
+  /**
+   * 组合 Group 的折叠状态、子级渲染和插槽内容。
+   *
+   * @param props - 当前 Group Schema、布局和兼容渲染回调。
+   * @param setupContext - 父级透传属性与 Group 插槽。
+   */
+  setup(props, setupContext) {
     var _a;
+    const {
+      attrs,
+      slots
+    } = setupContext;
     const internalCollapsed = ref(Boolean(props.schema.defaultCollapsed));
     const collapsed = computed(() => props.schema.collapsed ?? internalCollapsed.value);
     const componentId = ((_a = getCurrentInstance()) == null ? void 0 : _a.uid) ?? 0;
@@ -1306,12 +1547,16 @@ const Group = /* @__PURE__ */ defineComponent({
       const idBase = `schemx-group-${uniqueId}-${normalizeId(schema.key)}`;
       const headerId = `${idBase}-header`;
       const bodyId = `${idBase}-body`;
+      const rowConfig = props.rowConfig || schema.row ? {
+        ...props.rowConfig,
+        ...schema.row
+      } : void 0;
       const renderChild = (child) => {
         if (isViewDynamicSchema(child)) {
           if (child.visible === false) {
             return null;
           }
-          return child.items.map((item) => item.children.map((itemChild) => renderChild(itemChild)));
+          return child.items.map((item) => item.children.map(renderChild));
         }
         if (isViewGroupSchema(child)) {
           return createVNode(Group, {
@@ -1326,6 +1571,12 @@ const Group = /* @__PURE__ */ defineComponent({
           "schema": child
         }, slots);
       };
+      const renderGroupChildren = () => {
+        if (!props.renderChildren) {
+          return schema.children.map(renderChild);
+        }
+        return rowConfig === void 0 ? props.renderChildren(schema.children) : props.renderChildren(schema.children, rowConfig);
+      };
       const {
         hasHeader,
         renderBodyContent,
@@ -1338,7 +1589,7 @@ const Group = /* @__PURE__ */ defineComponent({
         readonly: Boolean(schema.readonly),
         toggle,
         slots,
-        renderChildren: () => props.renderChildren ? props.renderChildren(schema.children) : schema.children.map(renderChild)
+        renderChildren: renderGroupChildren
       });
       const body = createVNode("div", {
         "id": bodyId,
@@ -1350,7 +1601,7 @@ const Group = /* @__PURE__ */ defineComponent({
           display: "none"
         } : void 0
       }, [renderBodyContent()]);
-      return createVNode("div", mergeProps(attrs, {
+      const groupWrapper = createVNode("div", mergeProps(attrs, {
         "class": classnames("schemx-group-wrapper", props.class, attrs.class, schema.class),
         "data-key": schema.key,
         "aria-disabled": schema.disabled || void 0,
@@ -1379,76 +1630,106 @@ const Group = /* @__PURE__ */ defineComponent({
           }
         }
       }, [renderHeaderContent()]), destroyOnCollapse ? !isCollapsed && body : body])]);
+      if (!schema.layout) {
+        return groupWrapper;
+      }
+      return createVNode(Col$1, {
+        "col": schema.layout
+      }, _isSlot$1(groupWrapper) ? groupWrapper : {
+        default: () => [groupWrapper]
+      });
     };
   }
 });
 const Group$1 = Group;
-const Dynamic = /* @__PURE__ */ defineComponent({
-  name: "SchemxDynamic",
+const Row = /* @__PURE__ */ defineComponent({
+  name: "SchemxRow",
   inheritAttrs: false,
   props: {
-    schema: {
+    row: {
       type: Object,
-      required: true
-    },
-    viewSchemas: {
-      type: Array,
-      required: true
-    },
-    renderChildren: {
-      type: Function,
       required: false,
       default: void 0
+    },
+    enabled: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   /**
-   * 初始化 Dynamic 的行模板渲染器。
+   * 根据 Row 配置和当前 Form Context 创建行容器。
    *
-   * @param props - 当前 Dynamic ViewSchema 与 Form 根级 ViewSchema。
-   * @param slots - 父级透传的字段插槽。
+   * @param props - Row 配置与启用状态。
+   * @param setupContext - 父级透传属性与默认插槽。
    */
-  setup(props, {
-    slots
-  }) {
-    const getFieldRenderKey = (schema) => `${schema.key}:${normalizeNameKey(schema.name)}`;
-    const getFieldClass = (schema) => {
+  setup(props, setupContext) {
+    const {
+      attrs,
+      slots
+    } = setupContext;
+    const formContext = useOptionalFormContextValue();
+    const resolvedComponent = computed(() => {
+      const component = formContext == null ? void 0 : formContext.rowComponent;
+      return component ? markRaw(toRaw(component)) : void 0;
+    });
+    return () => {
+      var _a, _b;
+      const component = resolvedComponent.value;
+      const row = props.row ?? {};
       const {
-        isFirst,
-        isLast
-      } = getSectionPosition(props.viewSchemas, schema.key);
-      return {
-        "schemx-field-wrapper--first": isFirst,
-        "schemx-field-wrapper--last": isLast
+        gutter,
+        justify,
+        align,
+        ...extensionProps
+      } = row;
+      const {
+        class: attrsClass,
+        style: attrsStyle,
+        ...restAttrs
+      } = attrs;
+      const componentAttrs = {
+        ...extensionProps,
+        ...restAttrs
       };
-    };
-    const renderItemSchema = (schema) => {
-      if (isViewGroupSchema(schema)) {
-        return createVNode(Group$1, {
-          "key": schema.key,
-          "schema": schema
-        }, slots);
+      const rowClassValue = ["schemx-row", attrsClass];
+      const justifyContent = justify === "start" ? "flex-start" : justify === "end" ? "flex-end" : justify;
+      const alignItems = align === "top" ? "flex-start" : align === "middle" ? "center" : align === "bottom" ? "flex-end" : void 0;
+      const [gutterTop, gutterRight, gutterBottom, gutterLeft] = normalizeSchemxGutter(gutter);
+      const paddingTop = gutterTop / 2;
+      const paddingRight = gutterRight / 2;
+      const paddingBottom = gutterBottom / 2;
+      const paddingLeft = gutterLeft / 2;
+      const internalRowStyle = [attrsStyle, {
+        "--schemx-gutter-top": `${paddingTop}px`,
+        "--schemx-gutter-right": `${paddingRight}px`,
+        "--schemx-gutter-bottom": `${paddingBottom}px`,
+        "--schemx-gutter-left": `${paddingLeft}px`,
+        margin: `-${paddingTop}px -${paddingRight}px -${paddingBottom}px -${paddingLeft}px`,
+        justifyContent,
+        alignItems
+      }];
+      if (!props.enabled) {
+        return ((_a = slots.default) == null ? void 0 : _a.call(slots)) ?? null;
       }
-      const field = schema;
-      return createVNode(Field$1, {
-        "key": getFieldRenderKey(field),
-        "schema": field,
-        "class": getFieldClass(field)
-      }, slots);
-    };
-    return () => {
-      if (props.schema.visible === false) {
-        return null;
+      if (!component) {
+        return createVNode("div", mergeProps(restAttrs, {
+          "class": rowClassValue,
+          "style": internalRowStyle
+        }), [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
       }
-      return props.schema.items.map((item) => {
-        const children = props.renderChildren ? props.renderChildren(item.children) : item.children.map(renderItemSchema);
-        return createVNode(Fragment, {
-          "key": item.key
-        }, [children]);
-      });
+      return h(component, {
+        ...componentAttrs,
+        gutter,
+        justify,
+        align,
+        class: rowClassValue,
+        style: internalRowStyle
+      }, slots);
     };
   }
 });
-const Dynamic$1 = Dynamic;
+const Row$1 = Row;
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -1464,8 +1745,8 @@ const SchemaList = /* @__PURE__ */ defineComponent({
       type: Array,
       required: true
     },
-    colComponent: {
-      type: [Object, Function],
+    rowConfig: {
+      type: Object,
       required: false,
       default: void 0
     },
@@ -1479,17 +1760,12 @@ const SchemaList = /* @__PURE__ */ defineComponent({
     slots
   }) {
     const getFieldRenderKey = (schema) => `${schema.key}:${normalizeNameKey(schema.name)}`;
-    const getSchemaRenderKey = (schema) => {
-      if (isSchemxViewFieldSchema(schema)) {
-        return getFieldRenderKey(schema);
-      }
-      return schema.key;
-    };
-    const renderChildren = (schemas) => {
+    const renderChildren = (schemas, rowConfig = props.rowConfig) => {
       return h(SchemaList, {
         schemas,
         viewSchemas: props.viewSchemas,
-        colComponent: props.colComponent
+        rowConfig,
+        fieldClassResolver: props.fieldClassResolver
       }, slots);
     };
     const renderSchema = (schema) => {
@@ -1502,13 +1778,14 @@ const SchemaList = /* @__PURE__ */ defineComponent({
         content = createVNode(Group$1, {
           "key": schema.key,
           "schema": schema,
+          "rowConfig": props.rowConfig,
           "renderChildren": renderChildren
         }, slots);
       } else if (isViewDynamicSchema(schema)) {
         content = createVNode(Dynamic$1, {
           "key": schema.key,
           "schema": schema,
-          "viewSchemas": props.viewSchemas,
+          "rowConfig": props.rowConfig,
           "renderChildren": renderChildren
         }, slots);
       } else {
@@ -1518,25 +1795,16 @@ const SchemaList = /* @__PURE__ */ defineComponent({
           "class": (_a = props.fieldClassResolver) == null ? void 0 : _a.call(props, schema)
         }, slots);
       }
-      if (!props.colComponent) {
-        return content;
-      }
-      return createVNode(Col$1, {
-        "key": getSchemaRenderKey(schema),
-        "component": props.colComponent,
-        "layout": schema.layout
-      }, _isSlot(content) ? content : {
-        default: () => [content]
-      });
+      return content;
     };
     return () => {
-      const children = props.schemas.map(renderSchema);
-      if (!props.colComponent) {
-        return children;
-      }
-      return createVNode("div", {
-        "class": "schemx-row"
-      }, [children]);
+      let _slot;
+      return createVNode(Row$1, {
+        "row": props.rowConfig,
+        "class": "schemx-schema-list"
+      }, _isSlot(_slot = props.schemas.map(renderSchema)) ? _slot : {
+        default: () => [_slot]
+      });
     };
   }
 });
@@ -1554,12 +1822,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     initialValues: { default: () => ({}) },
     modelValue: { default: () => ({}) },
     form: { default: void 0 },
+    row: { default: void 0 },
     loading: { type: Boolean, default: void 0 },
     submitter: { type: [Boolean, Object], default: true },
     resetter: { type: [Boolean, Object], default: true },
     class: { type: [Boolean, null, String, Object, Array], default: "" },
     style: { type: [Boolean, null, String, Object, Array], default: () => ({}) },
-    colComponent: { default: void 0 },
     rendererProps: { default: void 0 },
     validatorAdapters: {},
     defaultRendererType: {},
@@ -1579,33 +1847,40 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     readonly: { type: Boolean, default: void 0 },
     disabled: { type: Boolean, default: void 0 },
     visible: { type: Boolean, default: void 0 },
+    colComponent: { default: void 0 },
+    rowComponent: { default: void 0 },
+    iconComponent: { default: void 0 },
+    col: { default: void 0 },
+    layout: {},
     labelIcon: {},
     labelAlign: {},
     labelPosition: {},
     labelWidth: {},
     contentAlign: {},
+    errorAlign: {},
     validationTrigger: { default: void 0 },
     colon: { type: Boolean, default: void 0 },
-    showRequiredMark: { type: Boolean, default: void 0 }
+    showRequiredMark: { type: Boolean, default: void 0 },
+    bordered: { type: Boolean, default: void 0 }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
+    const schemaConfigKeys = [
+      ...defaultSchemxConfigKeys,
+      ...defaultVueSchemaConfigKeys
+    ];
     const pickSchemaConfig = () => {
-      const schemaConfig = pick(
-        props,
-        defaultSchemxConfigKeys
-      );
+      const schemaConfig = pick(props, schemaConfigKeys);
       return Object.fromEntries(
         Object.entries(schemaConfig).filter(([, value]) => value !== void 0)
       );
     };
     const isExternalForm = props.form !== void 0;
     const schemaConfigProps = computed(pickSchemaConfig);
-    const appConfig = getSchemxAppConfig();
-    const providerConfig = getSchemxConfigProviderRef();
+    const providerConfig = useConfigProviderContextRef();
     const coreConfig = getGlobalSchemxConfig();
     const formFallbackConfig = {
       schemaConfig: {
@@ -1613,45 +1888,48 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         validationTrigger: ["blur", "change"]
       }
     };
-    const contextSchemaConfig = computed(() => {
-      const mergedConfig = isExternalForm ? mergeSchemxConfig({ schemaConfig: schemaConfigProps.value }, formFallbackConfig) : mergeSchemxConfig(
+    const mergedConfig = computed(
+      () => isExternalForm ? mergeConfig(
         { schemaConfig: schemaConfigProps.value },
-        (providerConfig == null ? void 0 : providerConfig.value) ?? {},
-        appConfig,
         formFallbackConfig
-      );
-      return mergedConfig.schemaConfig ?? {};
-    });
-    const resolvedSchemaConfig = computed(
-      () => mergeAndResolveSchemxConfig(
+      ) : mergeConfig(
         { schemaConfig: schemaConfigProps.value },
         (providerConfig == null ? void 0 : providerConfig.value) ?? {},
-        appConfig,
         formFallbackConfig,
         coreConfig
-      ).schemaConfig
+      )
     );
-    const initialContextSchemaConfig = contextSchemaConfig.value;
-    const initialCoreSchemaConfig = isExternalForm ? initialContextSchemaConfig : resolvedSchemaConfig.value;
-    const formSchemaConfig = reactive(
-      initialContextSchemaConfig
+    const contextSchemaConfig = computed(() => ({
+      ...defaultVueSchemaConfig,
+      ...mergedConfig.value.schemaConfig
+    }));
+    const resolvedSchemaConfig = computed(
+      () => resolveSchemxConfig({ schemaConfig: contextSchemaConfig.value }).schemaConfig
     );
     const hasSchemaConfigKey = (config, key) => Object.prototype.hasOwnProperty.call(config, key);
-    const replaceFormSchemaConfig = (nextSchemaConfig) => {
-      for (const key of defaultSchemxConfigKeys) {
-        if (!hasSchemaConfigKey(nextSchemaConfig, key)) {
-          delete formSchemaConfig[key];
-        }
-      }
-      Object.assign(formSchemaConfig, nextSchemaConfig);
-    };
     const resolvedColComponent = computed(
-      () => props.colComponent ?? (providerConfig == null ? void 0 : providerConfig.value.colComponent) ?? appConfig.colComponent ?? registeredColComponent.value
+      () => props.colComponent ?? (providerConfig == null ? void 0 : providerConfig.value.colComponent) ?? coreConfig.colComponent
     );
-    createFormConfigContext({ schemaConfig: formSchemaConfig });
+    const resolvedRowComponent = computed(
+      () => props.rowComponent ?? (providerConfig == null ? void 0 : providerConfig.value.rowComponent) ?? coreConfig.rowComponent
+    );
+    const resolvedIconComponent = computed(
+      () => props.iconComponent ?? (providerConfig == null ? void 0 : providerConfig.value.iconComponent) ?? coreConfig.iconComponent
+    );
+    const resolvedRowConfig = computed(() => {
+      const schemaConfigRow = resolvedSchemaConfig.value.row;
+      const inheritedRowConfig = (providerConfig == null ? void 0 : providerConfig.value.row) ?? coreConfig.row ?? schemaConfigRow;
+      if (inheritedRowConfig === void 0 && props.row === void 0) {
+        return void 0;
+      }
+      return {
+        ...inheritedRowConfig,
+        ...props.row
+      };
+    });
     const providedForm = props.form ? props.form : useForm({
       schemas: props.schemas,
-      schemaConfig: initialCoreSchemaConfig,
+      schemaConfig: resolvedSchemaConfig.value,
       initialValues: Object.keys(props.modelValue).length > 0 ? props.modelValue : props.initialValues,
       rendererProps: props.rendererProps,
       rendererRegistry: props.rendererRegistry,
@@ -1673,11 +1951,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       /**
        * 转发提交失败回调。
        *
-       * @param errors - 提交失败时的字段错误集合。
+       * @param failure - 提交失败结果，包含本次表单值和校验错误。
        */
-      onFinishFailed: (errors) => {
+      onFinishFailed: (failure) => {
         var _a;
-        return (_a = props.onFinishFailed) == null ? void 0 : _a.call(props, errors);
+        return (_a = props.onFinishFailed) == null ? void 0 : _a.call(props, failure);
       },
       /**
        * 转发完整表单重置回调。
@@ -1718,7 +1996,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         (_a = props.onFieldsChange) == null ? void 0 : _a.call(props, changedPaths, allPaths);
       }
     });
-    const formInstance = createFormContext(providedForm);
+    const formInstance = provideFormContext({
+      form: providedForm,
+      get schemaConfig() {
+        return contextSchemaConfig.value;
+      },
+      get iconComponent() {
+        return resolvedIconComponent.value;
+      },
+      get colComponent() {
+        return resolvedColComponent.value;
+      },
+      get rowComponent() {
+        return resolvedRowComponent.value;
+      }
+    });
     const effectiveLoading = computed(() => props.loading ?? formInstance.isLoading());
     const formRootClass = computed(() => ["schemx", props.class]);
     const formRootStyle = computed(() => props.style);
@@ -1818,19 +2110,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       };
     };
     const syncInternalSchemaConfig = (nextSchemaConfig) => {
-      replaceFormSchemaConfig(contextSchemaConfig.value);
       formInstance.updateSchemaConfig(nextSchemaConfig);
     };
     const syncExternalSchemaConfig = (nextSchemaConfig, previousSchemaConfig) => {
       const patch = { ...nextSchemaConfig };
       if (previousSchemaConfig !== void 0) {
-        for (const key of defaultSchemxConfigKeys) {
+        for (const key of schemaConfigKeys) {
           if (hasSchemaConfigKey(previousSchemaConfig, key) && !hasSchemaConfigKey(nextSchemaConfig, key)) {
             patch[key] = void 0;
           }
         }
       }
-      replaceFormSchemaConfig(contextSchemaConfig.value);
       if (Object.keys(patch).length > 0) {
         formInstance.updateSchemaConfig(patch);
       }
@@ -1857,7 +2147,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         createVNode(unref(SchemaList$1), {
           schemas: unref(viewSchemas),
           "view-schemas": unref(viewSchemas),
-          "col-component": resolvedColComponent.value,
+          "row-component": resolvedRowComponent.value,
+          "row-config": resolvedRowConfig.value,
           "field-class-resolver": getFieldClass
         }, createSlots({ _: 2 }, [
           renderList(fieldSlots.value, (_, slotName) => {
@@ -1868,7 +2159,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ])
             };
           })
-        ]), 1032, ["schemas", "view-schemas", "col-component"]),
+        ]), 1032, ["schemas", "view-schemas", "row-component", "row-config"]),
         isActionsVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
           isResetterVisible.value && unref(slots).resetter ? renderSlot(_ctx.$slots, "resetter", {
             form: unref(formInstance),
@@ -1912,12 +2203,16 @@ function withInstall(comp, extra) {
   return Object.assign(comp, extra);
 }
 const SchemxFormExport = withInstall(_sfc_main$1, {
-  /** Vue 插件安装方法 */
+  /**
+   * Vue 插件安装方法
+   */
   install(app, options = {}) {
     provideSchemxAppConfig(app, options);
     app.component("SchemxForm", _sfc_main$1);
   },
-  /** Field 子组件引用 */
+  /**
+   * Field 子组件引用
+   */
   Field: Field$1
 });
 const SchemxFormExport$1 = SchemxFormExport;
@@ -2031,11 +2326,31 @@ const ConfigProvider = /* @__PURE__ */ defineComponent({
     colComponent: {
       type: [Object, Function],
       default: void 0
+    },
+    rowComponent: {
+      type: [Object, Function],
+      default: void 0
+    },
+    iconComponent: {
+      type: [Object, Function],
+      default: void 0
+    },
+    row: {
+      type: Object,
+      default: void 0
     }
   },
-  setup(props, {
-    slots
-  }) {
+  /**
+   * 合并 Props 与 fallthrough attrs，并向后代提供配置上下文。
+   *
+   * @param props - 当前 ConfigProvider 的 Schemx 配置。
+   * @param setupContext - 父级传入的默认插槽与额外配置属性。
+   */
+  setup(props, setupContext) {
+    const {
+      slots,
+      attrs
+    } = setupContext;
     const config = computed(() => ({
       schemaConfig: props.schemaConfig,
       rendererProps: props.rendererProps,
@@ -2043,9 +2358,13 @@ const ConfigProvider = /* @__PURE__ */ defineComponent({
       defaultRendererType: props.defaultRendererType,
       rendererRegistry: props.rendererRegistry,
       presetRuleRegistry: props.presetRuleRegistry,
-      colComponent: props.colComponent
+      colComponent: props.colComponent,
+      rowComponent: props.rowComponent,
+      iconComponent: props.iconComponent,
+      row: props.row,
+      ...attrs
     }));
-    provideSchemxConfigProvider(config);
+    createConfigProviderContext(config);
     return () => {
       var _a;
       return (_a = slots.default) == null ? void 0 : _a.call(slots);
@@ -2058,22 +2377,30 @@ export {
   ConfigProvider$1 as ConfigProvider,
   Field$1 as Field,
   Group$1 as Group,
+  Icon$1 as Icon,
+  Row$1 as Row,
   WithRemoteOptions,
   _sfc_main as Wrapper,
+  createConfigProviderContext,
   createFieldContext,
   createFormConfigContext,
   createFormContext,
   SchemxFormExport$1 as default,
+  normalizeSchemxGutter,
   presetRuleRegistry,
-  registerCol,
+  provideFormContext,
   rendererRegistry,
   SchemxFormExport$1 as schemxForm,
+  useConfigProviderContext,
+  useConfigProviderContextRef,
   useDictionary,
   useField,
   useFieldContext,
   useForm,
   useFormConfigContext,
   useFormContext,
+  useFormContextValue,
+  useFormRuntimeContext,
   useFormSelector,
   useStableRef,
   useViewSchemas,