@schemx/vue 1.0.0-next.3 → 1.0.0-next.4

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import "./style.css";
-import { shallowRef, getCurrentInstance, inject, onScopeDispose, provide, computed, onUnmounted, ref, onMounted, watchEffect, watch, readonly, defineComponent, createVNode, h, createTextVNode, mergeProps, useAttrs, openBlock, createElementBlock, unref, renderSlot, createCommentVNode, createStaticVNode, Fragment, toDisplayString, useSlots, reactive, normalizeClass, normalizeStyle, renderList, createBlock, createSlots, withCtx } from "vue";
-import { createValidationRuleRegistry, mergeSchemxConfig, createForm, createField, createWatch, isViewGroupSchema, isSchemxViewFieldSchema, isSchemxSchemas, defaultSchemxConfigKeys } from "@schemx/core";
+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, useSlots, reactive, toRaw, normalizeClass, normalizeStyle, renderList, createBlock, createSlots, withCtx, nextTick } from "vue";
+import { isViewGroupSchema, isViewDynamicSchema, mergeSchemxConfig, createPresetRuleRegistry, createForm, createField, createWatch, isSchemxViewFieldSchema, isSchemxSchemas, defaultSchemxConfigKeys } from "@schemx/core";
 export * from "@schemx/core";
 import classnames from "classnames";
 import { createFormStateAdapter, createRendererRegistry } from "@schemx/core/adapter";
@@ -8,14 +8,21 @@ import { pick } from "es-toolkit";
 function createVueShallowRef(value) {
   return shallowRef(value);
 }
+function bindSnapshotSource(source) {
+  const value = createVueShallowRef(source.getSnapshot());
+  source.subscribe(() => {
+    value.value = source.getSnapshot();
+  });
+  return value;
+}
 function areStringListsEqual(previous, next) {
   return previous.length === next.length && previous.every((value, index) => value === next[index]);
 }
-function getVueFieldBridge(bridge, name) {
-  const source = bridge.stateAdapter.field(name);
-  const cachedBridge = bridge.fieldBridges.get(source);
-  if (cachedBridge) {
-    return cachedBridge;
+function getVueFieldState(resources, name) {
+  const source = resources.stateAdapter.field(name);
+  const cachedState = resources.fieldStates.get(source);
+  if (cachedState) {
+    return cachedState;
   }
   const snapshot = source.getSnapshot();
   const value = createVueShallowRef(
@@ -24,7 +31,7 @@ function getVueFieldBridge(bridge, name) {
   const errors = createVueShallowRef(snapshot.errors);
   const touched = createVueShallowRef(snapshot.touched);
   const pending = createVueShallowRef(snapshot.pending);
-  const updateFieldRefs = () => {
+  const updateFieldState = () => {
     const nextSnapshot = source.getSnapshot();
     if (!Object.is(value.value, nextSnapshot.value)) {
       value.value = nextSnapshot.value;
@@ -39,82 +46,63 @@ function getVueFieldBridge(bridge, name) {
       pending.value = nextSnapshot.pending;
     }
   };
-  const unsubscribe = source.subscribe(updateFieldRefs);
-  const dispose = () => {
-    unsubscribe();
-  };
-  const fieldBridge = {
-    source,
+  source.subscribe(updateFieldState);
+  const fieldState = {
     value,
     errors,
     touched,
-    pending,
-    dispose
+    pending
   };
-  bridge.fieldBridges.set(source, fieldBridge);
-  return fieldBridge;
+  resources.fieldStates.set(source, fieldState);
+  return fieldState;
 }
-function createVueFormFacade(form, dependencies) {
+function createVueFormInstance(form, dependencies) {
   let destroyed = false;
   const getFieldValue = (name) => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      void dependencies.getFieldBridge(bridge, name).value.value;
+      dependencies.trackField(name, "value");
     }
     return form.getFieldValue(name);
   };
   const getFieldErrors = (name) => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      void dependencies.getFieldBridge(bridge, name).errors.value;
+      dependencies.trackField(name, "errors");
     }
     return form.getFieldErrors(name);
   };
   const isFieldTouched = (name) => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      void dependencies.getFieldBridge(bridge, name).touched.value;
+      dependencies.trackField(name, "touched");
     }
     return form.isFieldTouched(name);
   };
   const isFieldPending = (name) => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      void dependencies.getFieldBridge(bridge, name).pending.value;
+      dependencies.trackField(name, "pending");
     }
     return form.isFieldPending(name);
   };
   const getFieldsValue = (names) => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      if (names === void 0) {
-        void bridge.values.value;
-      } else {
-        for (const name of names) {
-          void dependencies.getFieldBridge(bridge, name).value.value;
-        }
-      }
+      dependencies.trackFieldsValue(names);
     }
     return form.getFieldsValue(names);
   };
   const getTouchedFields = () => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      void bridge.touchedFields.value;
+      dependencies.trackForm("touchedFields");
     }
     return form.getTouchedFields();
   };
   const getPendingFields = () => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      void bridge.pendingFields.value;
+      dependencies.trackForm("pendingFields");
     }
     return form.getPendingFields();
   };
   const isLoading = () => {
     if (!destroyed) {
-      const bridge = dependencies.getFormBridge(form);
-      void bridge.loading.value;
+      dependencies.trackForm("loading");
     }
     return form.isLoading();
   };
@@ -123,10 +111,7 @@ function createVueFormFacade(form, dependencies) {
       return;
     }
     destroyed = true;
-    const bridge = dependencies.getCachedFormBridge(form);
-    if (bridge) {
-      dependencies.disposeFormBridge(bridge);
-    }
+    dependencies.destroy();
     form.destroy();
   };
   return {
@@ -142,122 +127,213 @@ function createVueFormFacade(form, dependencies) {
     destroy
   };
 }
-const formBridgeCache = /* @__PURE__ */ new WeakMap();
-const formFacadeCache = /* @__PURE__ */ new WeakMap();
-const facadeCoreFormCache = /* @__PURE__ */ new WeakMap();
-function getCoreForm(form) {
-  const coreForm = facadeCoreFormCache.get(form);
-  return coreForm ?? form;
+function createVueViewSchemaState(form) {
+  const viewSchemas = shallowRef(
+    form.getViewSchemas()
+  );
+  const schemasByKey = computed(() => {
+    return createViewSchemaIndex(viewSchemas.value);
+  });
+  const unsubscribe = form.subscribeViewSchemas((nextSchemas) => {
+    viewSchemas.value = nextSchemas;
+  });
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) {
+      return;
+    }
+    disposed = true;
+    unsubscribe();
+  };
+  return {
+    schemasByKey,
+    viewSchemas,
+    dispose
+  };
+}
+function createViewSchemaIndex(viewSchemas) {
+  const schemasByKey = /* @__PURE__ */ new Map();
+  const appendSchemas = (schemas) => {
+    for (const schema of schemas) {
+      schemasByKey.set(schema.key, schema);
+      if (isViewGroupSchema(schema)) {
+        appendSchemas(schema.children);
+      } else if (isViewDynamicSchema(schema)) {
+        for (const item of schema.items) {
+          appendSchemas(item.children);
+        }
+      }
+    }
+  };
+  appendSchemas(viewSchemas);
+  return schemasByKey;
+}
+const runtimeCache = /* @__PURE__ */ new WeakMap();
+const instanceRuntimeCache = /* @__PURE__ */ new WeakMap();
+function acquireVueFormRuntime(form) {
+  const runtime = getOrCreateVueFormRuntime(form);
+  const release = runtime.retain();
+  return {
+    runtime,
+    release
+  };
 }
-function getVueFormBridge(form) {
-  const coreForm = getCoreForm(form);
-  const cachedBridge = formBridgeCache.get(coreForm);
-  if (cachedBridge) {
-    return cachedBridge;
+function getOrCreateVueFormRuntime(form) {
+  const cachedByInstance = instanceRuntimeCache.get(form);
+  if (cachedByInstance) {
+    return cachedByInstance;
   }
-  const bridge = createVueFormBridge(coreForm);
-  formBridgeCache.set(coreForm, bridge);
-  return bridge;
-}
-function getVueFormFacade(form) {
-  const coreForm = getCoreForm(form);
-  const cachedFacade = formFacadeCache.get(coreForm);
-  if (cachedFacade) {
-    return cachedFacade;
+  const cachedByCore = runtimeCache.get(form);
+  if (cachedByCore) {
+    return cachedByCore;
   }
-  const facade = createVueFormFacade(coreForm, {
-    getFormBridge: (bridgeForm) => getVueFormBridge(bridgeForm),
-    getFieldBridge: (bridge, name) => getVueFieldBridge(bridge, name),
-    getCachedFormBridge: (bridgeForm) => {
-      const bridge = formBridgeCache.get(bridgeForm);
-      return bridge;
-    },
-    disposeFormBridge: (bridge) => disposeVueFormBridge(bridge)
-  });
-  formFacadeCache.set(coreForm, facade);
-  facadeCoreFormCache.set(facade, coreForm);
-  return facade;
+  const runtime = createVueFormRuntime(form);
+  runtimeCache.set(form, runtime);
+  instanceRuntimeCache.set(runtime.instance, runtime);
+  return runtime;
 }
-function retainVueFormBridge(bridge) {
-  if (bridge.destroyed) {
+function createVueFormRuntime(core) {
+  let resources;
+  let ownerCount = 0;
+  let destroyed = false;
+  const createResources = () => {
+    const stateAdapter = createFormStateAdapter(core);
+    const values = bindSnapshotSource(stateAdapter.values);
+    const touchedFields = bindSnapshotSource(stateAdapter.touchedFields);
+    const pendingFields = bindSnapshotSource(stateAdapter.pendingFields);
+    const loading = bindSnapshotSource(stateAdapter.loading);
+    const fieldStates = /* @__PURE__ */ new Map();
+    let viewSchemaState;
+    let disposed = false;
+    const dispose = () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      fieldStates.clear();
+      stateAdapter.dispose();
+    };
+    return {
+      stateAdapter,
+      values,
+      touchedFields,
+      pendingFields,
+      loading,
+      fieldStates,
+      viewSchemaState,
+      dispose
+    };
+  };
+  const ensureResources = () => {
+    if (destroyed) {
+      throw new Error("[schemx] Vue Form Runtime has been destroyed.");
+    }
+    resources ?? (resources = createResources());
+    return resources;
+  };
+  const disposeResources = () => {
+    const currentResources = resources;
+    if (!currentResources) {
+      return;
+    }
+    resources = void 0;
+    currentResources.dispose();
+  };
+  const retain = () => {
+    if (destroyed) {
+      return () => {
+      };
+    }
+    ensureResources();
+    ownerCount++;
+    let released = false;
     return () => {
+      if (released || destroyed) {
+        return;
+      }
+      released = true;
+      ownerCount--;
+      if (ownerCount === 0) {
+        disposeResources();
+      }
     };
-  }
-  bridge.refCount++;
-  let released = false;
-  return () => {
-    if (released || bridge.destroyed) {
+  };
+  const trackField = (name, dependency) => {
+    if (!resources) {
+      return;
+    }
+    const fieldState = getVueFieldState(resources, name);
+    void fieldState[dependency].value;
+  };
+  const trackFieldsValue = (names) => {
+    if (!resources) {
+      return;
+    }
+    if (names === void 0) {
+      void resources.values.value;
       return;
     }
-    released = true;
-    bridge.refCount--;
-    if (bridge.refCount === 0) {
-      disposeVueFormBridge(bridge);
+    for (const name of names) {
+      void getVueFieldState(resources, name).value.value;
     }
   };
-}
-function disposeVueFormBridge(bridge) {
-  if (bridge.destroyed) {
-    return;
-  }
-  bridge.destroyed = true;
-  bridge.refCount = 0;
-  bridge.unsubscribe();
-  for (const fieldBridge of bridge.fieldBridges.values()) {
-    fieldBridge.dispose();
-  }
-  bridge.fieldBridges.clear();
-  bridge.stateAdapter.dispose();
-  formBridgeCache.delete(bridge.form);
-}
-function createVueFormBridge(form) {
-  const stateAdapter = createFormStateAdapter(form);
-  const values = createVueShallowRef(stateAdapter.values.getSnapshot());
-  const touchedFields = createVueShallowRef(
-    stateAdapter.touchedFields.getSnapshot()
-  );
-  const pendingFields = createVueShallowRef(
-    stateAdapter.pendingFields.getSnapshot()
-  );
-  const loading = createVueShallowRef(stateAdapter.loading.getSnapshot());
-  const fieldBridges = /* @__PURE__ */ new Map();
-  const syncValues = () => {
-    values.value = stateAdapter.values.getSnapshot();
+  const trackForm = (dependency) => {
+    if (!resources) {
+      return;
+    }
+    switch (dependency) {
+      case "values":
+        void resources.values.value;
+        break;
+      case "touchedFields":
+        void resources.touchedFields.value;
+        break;
+      case "pendingFields":
+        void resources.pendingFields.value;
+        break;
+      case "loading":
+        void resources.loading.value;
+        break;
+    }
   };
-  const syncTouchedFields = () => {
-    touchedFields.value = stateAdapter.touchedFields.getSnapshot();
+  const getValuesRef = () => {
+    return ensureResources().values;
   };
-  const syncPendingFields = () => {
-    pendingFields.value = stateAdapter.pendingFields.getSnapshot();
+  const getFieldState = (name) => {
+    return getVueFieldState(ensureResources(), name);
   };
-  const syncLoading = () => {
-    loading.value = stateAdapter.loading.getSnapshot();
+  const getViewSchemaState = () => {
+    const currentResources = ensureResources();
+    const viewSchemaState = currentResources.viewSchemaState ?? (currentResources.viewSchemaState = createVueViewSchemaState(core));
+    return viewSchemaState;
   };
-  const unsubscribeValues = stateAdapter.values.subscribe(syncValues);
-  const unsubscribeTouchedFields = stateAdapter.touchedFields.subscribe(syncTouchedFields);
-  const unsubscribePendingFields = stateAdapter.pendingFields.subscribe(syncPendingFields);
-  const unsubscribeLoading = stateAdapter.loading.subscribe(syncLoading);
-  const unsubscribe = () => {
-    unsubscribeValues();
-    unsubscribeTouchedFields();
-    unsubscribePendingFields();
-    unsubscribeLoading();
+  const destroy = () => {
+    if (destroyed) {
+      return;
+    }
+    destroyed = true;
+    ownerCount = 0;
+    disposeResources();
   };
-  const facade = getVueFormFacade(form);
-  const bridge = {
-    form,
-    stateAdapter,
-    values,
-    touchedFields,
-    pendingFields,
-    loading,
-    fieldBridges,
-    refCount: 0,
-    destroyed: false,
-    unsubscribe,
-    facade
+  const instance = createVueFormInstance(core, {
+    trackField,
+    trackFieldsValue,
+    trackForm,
+    destroy
+  });
+  const runtime = {
+    core,
+    instance,
+    retain,
+    trackField,
+    trackFieldsValue,
+    trackForm,
+    getValuesRef,
+    getFieldState,
+    getViewSchemaState,
+    destroy
   };
-  return bridge;
+  return runtime;
 }
 const SCHEMX_APP_CONFIG_KEY = Symbol("schemx:app-config");
 const EMPTY_SCHEMX_CONFIG = Object.freeze({
@@ -273,7 +349,7 @@ function normalizeSchemxAppConfig(config) {
     validatorAdapters,
     defaultRendererType: config.defaultRendererType,
     rendererRegistry: config.rendererRegistry,
-    validationRuleRegistry: config.validationRuleRegistry
+    presetRuleRegistry: config.presetRuleRegistry
   });
 }
 function normalizeRendererProps(source) {
@@ -295,27 +371,49 @@ function getSchemxAppConfig() {
   }
   return inject(SCHEMX_APP_CONFIG_KEY, EMPTY_SCHEMX_CONFIG);
 }
+const SCHEMX_CONFIG_PROVIDER_KEY = Symbol(
+  "schemx:config-provider"
+);
+function provideSchemxConfigProvider(config) {
+  const parentConfig = inject(SCHEMX_CONFIG_PROVIDER_KEY, void 0);
+  const mergedConfig = computed(
+    () => mergeSchemxConfig(config.value, (parentConfig == null ? void 0 : parentConfig.value) ?? {})
+  );
+  provide(SCHEMX_CONFIG_PROVIDER_KEY, mergedConfig);
+}
+function getSchemxConfigProvider() {
+  var _a;
+  if (getCurrentInstance() === null) {
+    return void 0;
+  }
+  return (_a = inject(SCHEMX_CONFIG_PROVIDER_KEY, void 0)) == null ? void 0 : _a.value;
+}
+const presetRuleRegistry = createPresetRuleRegistry();
 const rendererRegistry = createRendererRegistry("input");
-const validationRuleRegistry = createValidationRuleRegistry();
-function useForm(options = {}) {
-  const configuredOptions = mergeSchemxConfig(
-    getUseFormSchemxConfig(options),
-    // App 安装配置以 Values 存储；在 useForm 边界关联到当前 TValues。
+function mergeVueSchemxConfig(localConfig, fallbackConfig = {}) {
+  const providerConfig = getSchemxConfigProvider();
+  return mergeSchemxConfig(
+    localConfig,
+    providerConfig ?? {},
     getSchemxAppConfig(),
+    fallbackConfig,
     {
       rendererRegistry,
-      validationRuleRegistry
+      presetRuleRegistry
     }
   );
+}
+function useForm(options = {}) {
+  const configuredOptions = mergeVueSchemxConfig(getUseFormSchemxConfig(options));
   const mergedOptions = {
     ...options,
     ...configuredOptions
   };
   const instance = createForm(mergedOptions);
-  const form = getVueFormFacade(instance);
-  const releaseBridge = retainVueFormBridge(getVueFormBridge(instance));
+  const acquired = acquireVueFormRuntime(instance);
+  const form = acquired.runtime.instance;
   onScopeDispose(() => {
-    releaseBridge();
+    acquired.release();
     form.destroy();
   });
   return form;
@@ -327,24 +425,32 @@ function getUseFormSchemxConfig(options) {
     validatorAdapters = [],
     defaultRendererType = void 0,
     rendererRegistry: rendererRegistry2 = void 0,
-    validationRuleRegistry: validationRuleRegistry2 = void 0
+    presetRuleRegistry: presetRuleRegistry2 = void 0
   } = options;
   return {
     schemaConfig,
     rendererProps,
     defaultRendererType,
     rendererRegistry: rendererRegistry2,
-    validationRuleRegistry: validationRuleRegistry2,
+    presetRuleRegistry: presetRuleRegistry2,
     validatorAdapters
   };
 }
-const SCHEMX_FORM_INSTANCE_KEY = Symbol("schemx:instance");
+const SCHEMX_FORM_INSTANCE_KEY = Symbol(
+  "schemx:instance"
+);
+const SCHEMX_FORM_RUNTIME_KEY = Symbol(
+  "schemx:runtime"
+);
 function createFormContext(instance) {
-  const form = getVueFormFacade(instance);
-  const releaseBridge = retainVueFormBridge(getVueFormBridge(form));
-  provide(SCHEMX_FORM_INSTANCE_KEY, form);
-  onScopeDispose(releaseBridge);
-  return form;
+  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);
@@ -355,21 +461,30 @@ function useFormContext() {
   }
   return instance;
 }
-function createFieldHook(form, name, fieldBridge) {
-  const coreForm = getCoreForm(form);
+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(() => fieldBridge.errors.value);
-  const dirty = computed(() => fieldBridge.touched.value);
-  const pending = computed(() => fieldBridge.pending.value);
-  const getValue = () => fieldBridge.value.value;
-  const getErrors = () => fieldBridge.errors.value;
-  const isTouched = () => fieldBridge.touched.value;
-  const isPending = () => fieldBridge.pending.value;
+  const errors = computed(() => fieldState.errors.value);
+  const dirty = computed(() => fieldState.touched.value);
+  const pending = computed(() => fieldState.pending.value);
+  const getValue = () => fieldState.value.value;
+  const getErrors = () => fieldState.errors.value;
+  const isTouched = () => fieldState.touched.value;
+  const isPending = () => fieldState.pending.value;
   const getValues = () => form.getFieldsValue();
   return {
     ...coreField,
     name,
-    value: fieldBridge.value,
+    value: fieldState.value,
     errors,
     dirty,
     pending,
@@ -382,10 +497,9 @@ function createFieldHook(form, name, fieldBridge) {
 }
 const useField = (name) => {
   const form = useFormContext();
-  const coreForm = getCoreForm(form);
-  const formBridge = getVueFormBridge(coreForm);
-  const fieldBridge = getVueFieldBridge(formBridge, name);
-  return createFieldHook(form, name, fieldBridge);
+  const runtime = useFormRuntimeContext();
+  const fieldState = runtime.getFieldState(name);
+  return createFieldHook(form, runtime.core, name, fieldState);
 };
 const SCHEMX_FORM_FIELD_KEY = Symbol(
   "schemx:field"
@@ -403,9 +517,9 @@ function useFieldContext() {
   return field;
 }
 function useWatch(nameOrNamesOrCallback, callbackOrOptions, maybeOptions) {
-  const form = useFormContext();
+  const runtime = useFormRuntimeContext();
   const dispose = createWatch(
-    getCoreForm(form),
+    runtime.core,
     nameOrNamesOrCallback,
     callbackOrOptions,
     maybeOptions
@@ -434,6 +548,7 @@ const useDictionary = (options, fieldName) => {
   const loading = ref(false);
   const error = ref(void 0);
   let requestCount = 0;
+  let activeController = null;
   const format = async (res) => {
     if (typeof (options == null ? void 0 : options.formatter) === "function") {
       return await options.formatter(res, instance);
@@ -445,25 +560,32 @@ const useDictionary = (options, fieldName) => {
     }
     return res;
   };
-  const executeWithRetry = async (formValues) => {
+  const executeWithRetry = async (formValues, signal) => {
     const maxRetries = options.retryCount ?? 0;
     const retryDelay = options.retryInterval ?? 1e3;
     let lastError = new Error("Unknown error");
     for (let attempt = 0; attempt <= maxRetries; attempt++) {
       try {
-        return await options.api(formValues, instance);
+        if (signal.aborted) {
+          throw new Error("Dictionary request aborted");
+        }
+        return await callDictionaryApi(formValues, instance, options.api, signal);
       } catch (err) {
         lastError = normalizeError(err);
         if (attempt < maxRetries) {
-          await new Promise((r) => setTimeout(r, retryDelay));
+          await waitForRetry(retryDelay, signal);
         }
       }
     }
     throw lastError;
   };
   const loadDict = async () => {
+    const currentCount = ++requestCount;
+    activeController == null ? void 0 : activeController.abort();
+    const controller = new AbortController();
+    activeController = controller;
     try {
-      const formValues = instance.getFieldsValue();
+      const formValues = instance.getFieldsSnapshot();
       if (typeof options.shouldFetch === "function" && !options.shouldFetch(formValues)) {
         list.value = [];
         loading.value = false;
@@ -471,12 +593,11 @@ const useDictionary = (options, fieldName) => {
       }
       loading.value = true;
       error.value = void 0;
-      const currentCount = ++requestCount;
-      const res = await executeWithRetry(formValues);
-      if (currentCount !== requestCount)
+      const res = await executeWithRetry(formValues, controller.signal);
+      if (currentCount !== requestCount || controller.signal.aborted)
         return;
       const formatted = await format(res);
-      if (currentCount !== requestCount)
+      if (currentCount !== requestCount || controller.signal.aborted)
         return;
       list.value = formatted;
       error.value = void 0;
@@ -485,6 +606,9 @@ const useDictionary = (options, fieldName) => {
       }
       loading.value = false;
     } catch (err) {
+      if (controller.signal.aborted || currentCount !== requestCount) {
+        return;
+      }
       const normalized = normalizeError(err);
       error.value = normalized;
       list.value = [];
@@ -492,6 +616,10 @@ const useDictionary = (options, fieldName) => {
       if (typeof options.onError === "function") {
         options.onError(normalized, instance);
       }
+    } finally {
+      if (activeController === controller) {
+        activeController = null;
+      }
     }
   };
   const refresh = () => loadDict();
@@ -499,15 +627,19 @@ const useDictionary = (options, fieldName) => {
     list.value = data;
   };
   if ((_a = options.dependsOn) == null ? void 0 : _a.length) {
-    useWatchFields(options.dependsOn, (latestSnapshot, _payload) => {
-      if (typeof options.onDepsChange === "function") {
-        options.onDepsChange(latestSnapshot, instance);
-      }
-      if (options.resetOnDepsChange && fieldName) {
-        instance.setFieldValue(fieldName, void 0);
-      }
-      void loadDict();
-    });
+    useWatchFields(
+      options.dependsOn,
+      (latestSnapshot, _payload) => {
+        if (typeof options.onDepsChange === "function") {
+          options.onDepsChange(latestSnapshot, instance);
+        }
+        if (options.resetOnDepsChange && fieldName) {
+          instance.setFieldValue(fieldName, void 0);
+        }
+        void loadDict();
+      },
+      { inequality: true }
+    );
   }
   const immediate = options.immediate ?? true;
   onMounted(() => {
@@ -515,8 +647,43 @@ const useDictionary = (options, fieldName) => {
       void loadDict();
     }
   });
+  onScopeDispose(() => {
+    requestCount += 1;
+    activeController == null ? void 0 : activeController.abort();
+    activeController = null;
+  });
   return { list, loading, error, loadDict, refresh, mutate };
 };
+function waitForRetry(delay, signal) {
+  return new Promise((resolve, reject) => {
+    let abort = () => {
+    };
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      signal.removeEventListener("abort", abort);
+    };
+    const complete = () => {
+      cleanup();
+      resolve();
+    };
+    const timeoutId = setTimeout(complete, delay);
+    abort = () => {
+      cleanup();
+      reject(new Error("Dictionary request aborted"));
+    };
+    if (signal.aborted) {
+      abort();
+      return;
+    }
+    signal.addEventListener("abort", abort, { once: true });
+  });
+}
+function callDictionaryApi(values, form, api, signal) {
+  if (api.length >= 3) {
+    return api(values, form, signal);
+  }
+  return api(values, form);
+}
 const SCHEMX_FORM_CONFIG_KEY = Symbol(
   "schemx:form-config"
 );
@@ -549,87 +716,37 @@ function useStableRef(factory) {
   });
   return stableRef;
 }
-const viewSchemaBridgeCache = /* @__PURE__ */ new WeakMap();
 function useViewSchemas(form) {
-  const bridge = acquireViewSchemaBridge(getCoreForm(form));
-  return bridge.viewSchemas;
+  const acquired = acquireVueFormRuntime(form);
+  const state = acquired.runtime.getViewSchemaState();
+  onScopeDispose(acquired.release);
+  return state.viewSchemas;
 }
 function useViewSchema(form, getKey) {
-  const bridge = acquireViewSchemaBridge(getCoreForm(form));
-  return computed(() => bridge.schemasByKey.value.get(getKey()));
-}
-function createViewSchemaBridge(form) {
-  const viewSchemas = shallowRef(
-    form.getViewSchemas()
-  );
-  const schemasByKey = computed(() => {
-    return createViewSchemaIndex(viewSchemas.value);
-  });
-  const unsubscribe = form.subscribeViewSchemas(
-    /**
-     * 接收 Core 发布的完整列表并替换共享引用，以保留更新边界。
-     *
-     * @param nextSchemas - Core 计算出的最新 ViewSchema 列表。
-     */
-    (nextSchemas) => {
-      viewSchemas.value = nextSchemas;
-    }
-  );
-  return {
-    refCount: 0,
-    schemasByKey,
-    unsubscribe,
-    viewSchemas
-  };
-}
-function acquireViewSchemaBridge(form) {
-  const cachedBridge = viewSchemaBridgeCache.get(form);
-  const bridge = cachedBridge ?? createViewSchemaBridge(form);
-  if (!cachedBridge) {
-    viewSchemaBridgeCache.set(form, bridge);
-  }
-  bridge.refCount++;
-  onScopeDispose(() => {
-    bridge.refCount--;
-    if (bridge.refCount > 0) {
-      return;
-    }
-    bridge.unsubscribe();
-    viewSchemaBridgeCache.delete(form);
-  });
-  return bridge;
-}
-function createViewSchemaIndex(viewSchemas) {
-  const schemasByKey = /* @__PURE__ */ new Map();
-  const appendSchemas = (schemas) => {
-    for (const schema of schemas) {
-      schemasByKey.set(schema.key, schema);
-      if (isViewGroupSchema(schema)) {
-        appendSchemas(schema.children);
-      }
-    }
-  };
-  appendSchemas(viewSchemas);
-  return schemasByKey;
+  const acquired = acquireVueFormRuntime(form);
+  const state = acquired.runtime.getViewSchemaState();
+  const schema = computed(() => state.schemasByKey.value.get(getKey()));
+  onScopeDispose(acquired.release);
+  return schema;
 }
 function useFormSelector(form, selector, options = {}) {
-  const bridge = getVueFormBridge(getCoreForm(form));
-  const releaseBridge = retainVueFormBridge(bridge);
-  const selected = shallowRef(selector(bridge.values.value));
+  const acquired = acquireVueFormRuntime(form);
+  const values = acquired.runtime.getValuesRef();
+  const selected = shallowRef(selector(values.value));
   const equals = options.equals ?? Object.is;
   const stop = watch(
-    bridge.values,
-    (values) => {
-      const next = selector(values);
+    values,
+    (values2) => {
+      const next = selector(values2);
       if (!equals(selected.value, next)) {
         selected.value = next;
       }
     },
-    { flush: "sync" }
+    { flush: options.flush ?? "sync" }
   );
   onScopeDispose(() => {
     stop();
-    releaseBridge();
+    acquired.release();
   });
   return readonly(selected);
 }
@@ -703,105 +820,57 @@ const extractChildSlots = (fieldName, allSlots) => {
   }
   return result;
 };
-const FormGroup = /* @__PURE__ */ defineComponent((props, {
-  slots
-}) => {
-  var _a;
-  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;
-  watch(() => props.schema.collapsed, (nextCollapsed, previousCollapsed) => {
-    if (nextCollapsed !== void 0) {
-      internalCollapsed.value = nextCollapsed;
-    } else if (previousCollapsed !== void 0) {
-      internalCollapsed.value = previousCollapsed;
-    }
-  });
-  const toggle = () => {
-    var _a2, _b;
-    if (!props.schema.collapsible || props.schema.disabled) {
-      return;
-    }
-    const nextCollapsed = !collapsed.value;
-    if (props.schema.collapsed === void 0) {
-      internalCollapsed.value = nextCollapsed;
-    }
-    (_b = (_a2 = props.schema).onCollapsedChange) == null ? void 0 : _b.call(_a2, nextCollapsed);
+function getSectionPosition(list, currentKey) {
+  const currentIndex = list.findIndex((item) => item.key === currentKey);
+  if (currentIndex === -1) {
+    return {
+      found: false,
+      isFirst: false,
+      isLast: false
+    };
+  }
+  const currentItem = list[currentIndex];
+  if (!isPositionItem(currentItem)) {
+    return {
+      found: true,
+      isFirst: false,
+      isLast: false
+    };
+  }
+  return {
+    found: true,
+    isFirst: !hasPositionItemInSection(list, currentIndex, -1),
+    isLast: !hasPositionItemInSection(list, currentIndex, 1)
   };
-  return () => {
-    var _a2;
-    const schema = props.schema;
-    if (schema.visible === false) {
-      return null;
+}
+function normalizeNameKey(name) {
+  if (Array.isArray(name)) {
+    return name.map((part) => String(part)).join(".");
+  }
+  return String(name);
+}
+function normalizeId(key) {
+  return String(key).replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function isPositionItem(item) {
+  return !!item && !isViewGroupSchema(item) && item.visible !== false;
+}
+function hasPositionItemInSection(list, startIndex, step) {
+  for (let index = startIndex + step; index >= 0 && index < list.length; index += step) {
+    const item = list[index];
+    if (item.visible === false) {
+      continue;
     }
-    const collapsible = Boolean(schema.collapsible);
-    const isCollapsed = collapsed.value;
-    const destroyOnCollapse = schema.destroyOnCollapse ?? true;
-    const uniqueId = ((_a2 = schema.debug) == null ? void 0 : _a2.runtimeNodeId) ?? `local-${componentId}`;
-    const idBase = `schemx-group-${uniqueId}-${normalizeId(schema.key)}`;
-    const headerId = `${idBase}-header`;
-    const bodyId = `${idBase}-body`;
-    const body = createVNode("div", {
-      "id": bodyId,
-      "role": "group",
-      "aria-labelledby": schema.label ? headerId : void 0,
-      "aria-hidden": isCollapsed || void 0,
-      "class": "schemx-group__body",
-      "style": !destroyOnCollapse && isCollapsed ? {
-        display: "none"
-      } : void 0
-    }, [schema.children.map((child) => createVNode(FormItem$1, {
-      "key": child.key,
-      "schema": child
-    }, slots))]);
-    return createVNode("div", {
-      "class": classnames("schemx-group", {
-        "schemx-group--collapsed": isCollapsed,
-        "is-readonly": schema.readonly,
-        "is-disabled": schema.disabled
-      }, schema.class),
-      "style": schema.style,
-      "data-key": schema.key,
-      "aria-disabled": schema.disabled || void 0
-    }, [schema.label && createVNode("div", {
-      "id": headerId,
-      "role": collapsible ? "button" : void 0,
-      "tabindex": collapsible ? schema.disabled ? -1 : 0 : void 0,
-      "aria-expanded": collapsible ? !isCollapsed : void 0,
-      "aria-controls": collapsible ? bodyId : void 0,
-      "aria-disabled": collapsible ? schema.disabled || void 0 : void 0,
-      "class": classnames("schemx-group__header", {
-        "schemx-group__header--clickable": collapsible && !schema.disabled
-      }),
-      "onClick": toggle,
-      "onKeydown": (e) => {
-        if (!schema.disabled && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault();
-          toggle();
-        }
-      }
-    }, [createVNode("span", {
-      "class": "schemx-group__title"
-    }, [schema.label]), collapsible && createVNode("span", {
-      "class": classnames("schemx-group__arrow", {
-        "schemx-group__arrow--down": !isCollapsed
-      })
-    }, null)]), destroyOnCollapse ? !isCollapsed && body : body]);
-  };
-}, {
-  name: "SchemxGroup",
-  props: {
-    schema: {
-      type: Object,
-      required: true
+    if (isViewGroupSchema(item)) {
+      return false;
+    }
+    if (isPositionItem(item)) {
+      return true;
     }
   }
-});
-const FormGroup$1 = FormGroup;
-const normalizeId = (key) => {
-  return String(key).replace(/[^a-zA-Z0-9_-]/g, "-");
-};
-function createFormItemSlotRenderers(options) {
+  return false;
+}
+function createFieldSlotRenderers(options) {
   const {
     schemaRef,
     field,
@@ -816,36 +885,39 @@ function createFormItemSlotRenderers(options) {
       return null;
     }
     return createVNode("span", {
-      "class": "schemx-item__required"
+      "class": "schemx-field__required"
     }, [createTextVNode("*")]);
   };
   const createSlotProps = (additionalProps = {}) => {
     return {
-      ...componentProps.value,
+      schema: schemaRef.value,
+      componentProps: componentProps.value,
       value: field.value.value,
+      field,
+      form,
       ...additionalProps
     };
   };
   const renderFieldSlot = (suffix) => {
-    const slot = resolveSlot(slots, `${schemaRef.value.name}${suffix}`);
+    const slot = resolveSlot(slots, `${normalizeNameKey(schemaRef.value.name)}${suffix}`);
     return (slot == null ? void 0 : slot(createSlotProps())) ?? null;
   };
   const renderLabel = () => {
-    const labelSlot = resolveSlot(slots, `${schemaRef.value.name}Label`);
+    const labelSlot = resolveSlot(slots, `${normalizeNameKey(schemaRef.value.name)}Label`);
     if (labelSlot) {
-      return labelSlot(schemaRef.value);
+      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;
     return createVNode("label", {
-      "class": "schemx-item__label",
+      "class": "schemx-field__label",
       "style": {
         width: labelWidth,
         textAlign: labelAlign
       }
     }, [renderRequired(), createVNode("span", {
-      "class": "schemx-item__label-text"
+      "class": "schemx-field__label-text"
     }, [schemaRef.value.label, colon ? ":" : ""])]);
   };
   const renderBefore = () => renderFieldSlot("Before");
@@ -856,19 +928,19 @@ function createFormItemSlotRenderers(options) {
     }
     const childSlots = extractChildSlots(normalizeNameKey(schemaRef.value.name), slots);
     const columnElement = h(component, componentProps.value, childSlots);
-    const contentSlot = resolveSlot(slots, `${schemaRef.value.name}Content`);
+    const contentSlot = resolveSlot(slots, `${normalizeNameKey(schemaRef.value.name)}Content`);
     if (contentSlot) {
       return contentSlot(createSlotProps({
         columnElement
       }));
     }
     return createVNode("div", {
-      "class": "schemx-item__control"
+      "class": "schemx-field__control"
     }, [columnElement]);
   };
   const renderAfter = () => renderFieldSlot("After");
   const renderError = () => {
-    const errorSlot = resolveSlot(slots, `${schemaRef.value.name}Error`);
+    const errorSlot = resolveSlot(slots, `${normalizeNameKey(schemaRef.value.name)}Error`);
     if (errorSlot) {
       return errorSlot(createSlotProps({
         errors: field.errors.value
@@ -878,7 +950,7 @@ function createFormItemSlotRenderers(options) {
       return null;
     }
     return createVNode("div", {
-      "class": "schemx-item__error"
+      "class": "schemx-field__error"
     }, [field.errors.value[0]]);
   };
   return {
@@ -890,49 +962,23 @@ function createFormItemSlotRenderers(options) {
     renderLabel
   };
 }
-function normalizeNameKey(name) {
-  if (Array.isArray(name)) {
-    return name.map((part) => String(part)).join(".");
-  }
-  return String(name);
-}
-const FormItem = /* @__PURE__ */ defineComponent({
-  name: "SchemxItem",
-  props: {
-    schema: {
-      type: Object,
-      required: true
-    }
-  },
-  /**
-   * 根据 schema 类型分发字段组或字段项渲染。
-   *
-   * @param props - 当前组件的 schema 属性。
-   * @param slots - Vue setup 上下文提供的插槽集合。
-   */
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      const schema = props.schema;
-      if (isViewGroupSchema(schema)) {
-        return h(FormGroup$1, {
-          schema
-        }, slots);
-      }
-      return h(FieldFormItem, {
-        schema
-      }, slots);
-    };
-  }
-});
-const FieldFormItem = /* @__PURE__ */ defineComponent({
-  name: "SchemxFieldItem",
+const Field = /* @__PURE__ */ defineComponent({
+  name: "SchemxField",
   inheritAttrs: false,
   props: {
     schema: {
       type: Object,
       required: true
+    },
+    class: {
+      type: [String, Object, Array, Boolean],
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: [String, Object, Array],
+      required: false,
+      default: void 0
     }
   },
   /**
@@ -957,7 +1003,7 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
     createFieldContext(field);
     const trigger = computed(() => mergeTrigger(schemaRef.value.validationTrigger, formContext.schemaConfig.validationTrigger, "onChange"));
     const canVerified = computed(() => {
-      const isOperate = schemaRef.value.visible && !schemaRef.value.readonly && !schemaRef.value.disabled;
+      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);
@@ -997,7 +1043,7 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       renderContent,
       renderError,
       renderLabel
-    } = createFormItemSlotRenderers({
+    } = createFieldSlotRenderers({
       schemaRef,
       field,
       form,
@@ -1006,32 +1052,27 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       slots
     });
     return () => {
-      if (!schemaRef.value.visible) {
+      if (schemaRef.value.visible === false) {
         return null;
       }
-      const itemSlot = resolveSlot(slots, normalizeNameKey(schemaRef.value.name));
-      if (itemSlot) {
-        return itemSlot(createSlotProps());
-      }
+      const fieldSlot = resolveSlot(slots, normalizeNameKey(schemaRef.value.name));
       const labelPosition = schemaRef.value.labelPosition || formContext.schemaConfig.labelPosition;
-      return createVNode("div", mergeProps(attrs, {
-        "class": classnames("schemx-item-wrapper", attrs.class),
-        "style": [attrs.style, schemaRef.value.style]
-      }), [createVNode("div", {
-        "class": classnames("schemx-item", `schemx-item--label-${labelPosition}`, schemaRef.value.class, {
+      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
-        }),
-        "style": {
-          ...schemaRef.value.style ?? {}
-        }
+        })
       }, [renderLabel(), createVNode("div", {
-        "class": "schemx-item__content"
-      }, [renderBefore(), renderContent(), renderAfter(), renderError()])])]);
+        "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]);
     };
   }
 });
-const FormItem$1 = FormItem;
+const Field$1 = Field;
 const _hoisted_1$1 = ["aria-busy", "data-loading", "disabled"];
 const _hoisted_2 = {
   key: 0,
@@ -1091,47 +1132,250 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function getSectionPosition(list, currentKey) {
-  const currentIndex = list.findIndex((item) => item.key === currentKey);
-  if (currentIndex === -1) {
-    return {
-      found: false,
-      isFirst: false,
-      isLast: false
-    };
-  }
-  const currentItem = list[currentIndex];
-  if (!isPositionItem(currentItem)) {
-    return {
-      found: true,
-      isFirst: false,
-      isLast: false
-    };
-  }
+function createGroupSlotRenderers(options) {
+  const {
+    schema,
+    collapsed,
+    collapsible,
+    disabled,
+    readonly: readonly2,
+    toggle,
+    slots,
+    renderChildren
+  } = options;
+  const slotKey = String(schema.key);
+  const headerSlot = resolveSlot(slots, `${slotKey}Header`);
+  const labelSlot = resolveSlot(slots, `${slotKey}Label`);
+  const contentSlot = resolveSlot(slots, `${slotKey}Content`);
+  const slotProps = {
+    schema,
+    collapsed,
+    collapsible,
+    disabled,
+    readonly: readonly2,
+    toggle
+  };
+  const renderHeaderContent = () => {
+    if (headerSlot) {
+      return headerSlot(slotProps);
+    }
+    const label = labelSlot ? labelSlot(slotProps) : createVNode("span", {
+      "class": "schemx-group__title"
+    }, [schema.label]);
+    if (!collapsible) {
+      return label;
+    }
+    return createVNode(Fragment, null, [label, createVNode("span", {
+      "class": classnames("schemx-group__arrow", {
+        "schemx-group__arrow--down": !collapsed
+      })
+    }, null)]);
+  };
+  const renderBodyContent = () => {
+    if (contentSlot) {
+      return contentSlot(slotProps);
+    }
+    return renderChildren();
+  };
   return {
-    found: true,
-    isFirst: !hasPositionItemInSection(list, currentIndex, -1),
-    isLast: !hasPositionItemInSection(list, currentIndex, 1)
+    hasHeader: Boolean(schema.label || headerSlot || labelSlot),
+    renderBodyContent,
+    renderHeaderContent
   };
 }
-function isPositionItem(item) {
-  return !!item && !isViewGroupSchema(item) && item.visible !== false;
-}
-function hasPositionItemInSection(list, startIndex, step) {
-  for (let index = startIndex + step; index >= 0 && index < list.length; index += step) {
-    const item = list[index];
-    if (item.visible === false) {
-      continue;
-    }
-    if (isViewGroupSchema(item)) {
-      return false;
+const Group = /* @__PURE__ */ defineComponent({
+  name: "SchemxGroup",
+  inheritAttrs: false,
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    class: {
+      type: [String, Object, Array, Boolean],
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: [String, Object, Array],
+      required: false,
+      default: void 0
     }
-    if (isPositionItem(item)) {
-      return true;
+  },
+  setup(props, {
+    attrs,
+    slots
+  }) {
+    var _a;
+    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;
+    watch(() => props.schema.collapsed, (nextCollapsed, previousCollapsed) => {
+      if (nextCollapsed !== void 0) {
+        internalCollapsed.value = nextCollapsed;
+      } else if (previousCollapsed !== void 0) {
+        internalCollapsed.value = previousCollapsed;
+      }
+    });
+    const toggle = () => {
+      var _a2, _b;
+      if (!props.schema.collapsible || props.schema.disabled) {
+        return;
+      }
+      const nextCollapsed = !collapsed.value;
+      if (props.schema.collapsed === void 0) {
+        internalCollapsed.value = nextCollapsed;
+      }
+      (_b = (_a2 = props.schema).onCollapsedChange) == null ? void 0 : _b.call(_a2, nextCollapsed);
+    };
+    return () => {
+      var _a2;
+      const schema = props.schema;
+      if (schema.visible === false) {
+        return null;
+      }
+      const collapsible = Boolean(schema.collapsible);
+      const isCollapsed = collapsed.value;
+      const destroyOnCollapse = schema.destroyOnCollapse ?? true;
+      const uniqueId = ((_a2 = schema.debug) == null ? void 0 : _a2.runtimeNodeId) ?? `local-${componentId}`;
+      const idBase = `schemx-group-${uniqueId}-${normalizeId(schema.key)}`;
+      const headerId = `${idBase}-header`;
+      const bodyId = `${idBase}-body`;
+      const renderChild = (child) => {
+        if (isViewDynamicSchema(child)) {
+          if (child.visible === false) {
+            return null;
+          }
+          return child.items.map((item) => item.children.map((itemChild) => renderChild(itemChild)));
+        }
+        if (isViewGroupSchema(child)) {
+          return createVNode(Group, {
+            "key": child.key,
+            "schema": child,
+            "class": props.class,
+            "style": props.style
+          }, slots);
+        }
+        return createVNode(Field$1, {
+          "key": `${child.key}:${normalizeNameKey(child.name)}`,
+          "schema": child
+        }, slots);
+      };
+      const {
+        hasHeader,
+        renderBodyContent,
+        renderHeaderContent
+      } = createGroupSlotRenderers({
+        schema,
+        collapsed: isCollapsed,
+        collapsible,
+        disabled: Boolean(schema.disabled),
+        readonly: Boolean(schema.readonly),
+        toggle,
+        slots,
+        renderChildren: () => schema.children.map(renderChild)
+      });
+      const body = createVNode("div", {
+        "id": bodyId,
+        "role": "group",
+        "aria-labelledby": schema.label ? headerId : void 0,
+        "aria-hidden": isCollapsed || void 0,
+        "class": "schemx-group__body",
+        "style": !destroyOnCollapse && isCollapsed ? {
+          display: "none"
+        } : void 0
+      }, [renderBodyContent()]);
+      return 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,
+        "style": [attrs.style, props.style, schema.style]
+      }), [createVNode("div", {
+        "class": classnames("schemx-group", {
+          "schemx-group--collapsed": isCollapsed,
+          "is-readonly": schema.readonly,
+          "is-disabled": schema.disabled
+        })
+      }, [hasHeader && createVNode("div", {
+        "id": headerId,
+        "role": collapsible ? "button" : void 0,
+        "tabindex": collapsible ? schema.disabled ? -1 : 0 : void 0,
+        "aria-expanded": collapsible ? !isCollapsed : void 0,
+        "aria-controls": collapsible ? bodyId : void 0,
+        "aria-disabled": collapsible ? schema.disabled || void 0 : void 0,
+        "class": classnames("schemx-group__header", {
+          "schemx-group__header--clickable": collapsible && !schema.disabled
+        }),
+        "onClick": toggle,
+        "onKeydown": (e) => {
+          if (!schema.disabled && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            toggle();
+          }
+        }
+      }, [renderHeaderContent()]), destroyOnCollapse ? !isCollapsed && body : body])]);
+    };
+  }
+});
+const Group$1 = Group;
+const Dynamic = /* @__PURE__ */ defineComponent({
+  name: "SchemxDynamic",
+  inheritAttrs: false,
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    viewSchemas: {
+      type: Array,
+      required: true
     }
+  },
+  /**
+   * 初始化 Dynamic 的行模板渲染器。
+   *
+   * @param props - 当前 Dynamic ViewSchema 与 Form 根级 ViewSchema。
+   * @param slots - 父级透传的字段插槽。
+   */
+  setup(props, {
+    slots
+  }) {
+    const getFieldRenderKey = (schema) => `${schema.key}:${normalizeNameKey(schema.name)}`;
+    const getFieldClass = (schema) => {
+      const {
+        isFirst,
+        isLast
+      } = getSectionPosition(props.viewSchemas, schema.key);
+      return {
+        "schemx-field-wrapper--first": isFirst,
+        "schemx-field-wrapper--last": isLast
+      };
+    };
+    const renderItemSchema = (schema) => {
+      if (isViewGroupSchema(schema)) {
+        return createVNode(Group$1, {
+          "key": schema.key,
+          "schema": schema
+        }, slots);
+      }
+      const field = schema;
+      return createVNode(Field$1, {
+        "key": getFieldRenderKey(field),
+        "schema": field,
+        "class": getFieldClass(field)
+      }, slots);
+    };
+    return () => {
+      if (props.schema.visible === false) {
+        return null;
+      }
+      return props.schema.items.map((item) => createVNode(Fragment, {
+        "key": item.key
+      }, [item.children.map(renderItemSchema)]));
+    };
   }
-  return false;
-}
+});
+const Dynamic$1 = Dynamic;
 const _hoisted_1 = {
   key: 0,
   class: "schemx-actions"
@@ -1141,19 +1385,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "form",
   props: {
     schemas: { default: () => [] },
+    fieldRules: { default: void 0 },
     initialValues: { default: () => ({}) },
     modelValue: { default: () => ({}) },
     form: { default: void 0 },
     loading: { type: Boolean, default: void 0 },
-    submitter: { type: [Boolean, Object], default: void 0 },
-    resetter: { type: [Boolean, Object], default: void 0 },
-    class: { default: "" },
+    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: () => ({}) },
     rendererProps: { default: void 0 },
     validatorAdapters: {},
     defaultRendererType: {},
     rendererRegistry: { default: void 0 },
-    validationRuleRegistry: { default: void 0 },
+    presetRuleRegistry: { default: void 0 },
     onRuleError: {},
     onFinish: { type: Function, default: void 0 },
     onFinishFailed: { type: Function, default: void 0 },
@@ -1162,18 +1407,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onValuesChange: { type: Function, default: void 0 },
     onFieldsChange: { type: Function, default: void 0 },
     lifecycleHooks: {},
+    schedulerOptions: { default: void 0 },
+    validationConcurrency: { default: void 0 },
     required: { type: [Boolean, Object] },
-    readonly: { type: Boolean },
-    disabled: { type: Boolean },
-    visible: { type: Boolean, default: true },
+    readonly: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
+    visible: { type: Boolean, default: void 0 },
     labelIcon: {},
     labelAlign: {},
     labelPosition: {},
     labelWidth: {},
     contentAlign: {},
-    validationTrigger: {},
-    colon: { type: Boolean },
-    showRequiredMark: { type: Boolean }
+    validationTrigger: { default: void 0 },
+    colon: { type: Boolean, default: void 0 },
+    showRequiredMark: { type: Boolean, default: void 0 }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1181,19 +1428,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const slots = useSlots();
     const pickSchemaConfig = () => {
-      return pick(props, defaultSchemxConfigKeys);
+      const schemaConfig = pick(
+        props,
+        defaultSchemxConfigKeys
+      );
+      return Object.fromEntries(
+        Object.entries(schemaConfig).filter(([, value]) => value !== void 0)
+      );
     };
-    const formSchemaConfig = reactive(pickSchemaConfig());
+    const isExternalForm = props.form !== void 0;
+    const formFallbackConfig = {
+      schemaConfig: {
+        visible: true,
+        validationTrigger: ["blur", "change"]
+      }
+    };
+    const initialSchemaConfig = (isExternalForm ? mergeSchemxConfig({ schemaConfig: pickSchemaConfig() }, formFallbackConfig).schemaConfig : mergeVueSchemxConfig({ schemaConfig: pickSchemaConfig() }, formFallbackConfig).schemaConfig) ?? {};
+    const formSchemaConfig = reactive(initialSchemaConfig);
     createFormConfigContext({ schemaConfig: formSchemaConfig });
     const providedForm = props.form ? props.form : useForm({
       schemas: props.schemas,
-      schemaConfig: pickSchemaConfig(),
+      schemaConfig: initialSchemaConfig,
       initialValues: Object.keys(props.modelValue).length > 0 ? props.modelValue : props.initialValues,
       rendererProps: props.rendererProps,
       rendererRegistry: props.rendererRegistry,
       defaultRendererType: props.defaultRendererType,
-      validationRuleRegistry: props.validationRuleRegistry,
+      presetRuleRegistry: props.presetRuleRegistry,
+      fieldRules: props.fieldRules,
       validatorAdapters: props.validatorAdapters,
+      schedulerOptions: props.schedulerOptions,
+      validationConcurrency: props.validationConcurrency,
       /**
        * 转发提交成功回调。
        *
@@ -1251,9 +1515,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (_a = props.onFieldsChange) == null ? void 0 : _a.call(props, changedPaths, allPaths);
       }
     });
-    const isExternalForm = props.form !== void 0;
     const formInstance = createFormContext(providedForm);
     const effectiveLoading = computed(() => props.loading ?? formInstance.isLoading());
+    const formRootClass = computed(() => ["schemx", props.class]);
+    const formRootStyle = computed(() => props.style);
     const normalizeActionConfig = (action) => action === true ? {} : action || {};
     const submitterConfig = computed(() => normalizeActionConfig(props.submitter));
     const resetterConfig = computed(() => normalizeActionConfig(props.resetter));
@@ -1290,12 +1555,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => effectiveLoading.value || Boolean(resetterButtonProps.value.disabled)
     );
     let syncingFromModel = false;
+    const internalModelEchoes = /* @__PURE__ */ new Set();
+    const emitModelValue = (values) => {
+      const rawValues = toRaw(values);
+      internalModelEchoes.add(rawValues);
+      emit("update:modelValue", values);
+      void nextTick(() => {
+        internalModelEchoes.delete(rawValues);
+      });
+    };
     watch(
       () => props.modelValue,
       (values) => {
+        if (internalModelEchoes.delete(toRaw(values))) {
+          return;
+        }
         syncingFromModel = true;
-        formInstance.setFieldsValue(values);
-        syncingFromModel = false;
+        try {
+          formInstance.setFieldsValue(values);
+        } finally {
+          syncingFromModel = false;
+        }
       },
       { deep: true }
     );
@@ -1309,7 +1589,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       (latestSnapshot) => {
         if (syncingFromModel)
           return;
-        emit("update:modelValue", latestSnapshot);
+        emitModelValue(latestSnapshot);
       },
       { flush: "sync" }
     );
@@ -1323,14 +1603,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { deep: false, immediate: !!props.form }
     );
     const viewSchemas = useViewSchemas(formInstance);
-    const getFormItemClass = (schema) => {
+    const getFieldRenderKey = (schema) => `${schema.key}:${normalizeNameKey(schema.name)}`;
+    const getFieldClass = (schema) => {
       const { isFirst, isLast } = getSectionPosition(
         viewSchemas.value,
         schema.key
       );
       return {
-        "schemx-item-wrapper--first": isFirst,
-        "schemx-item-wrapper--last": isLast
+        "schemx-field-wrapper--first": isFirst,
+        "schemx-field-wrapper--last": isLast
       };
     };
     watch(
@@ -1349,24 +1630,53 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     __expose(exposed);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["schemx", props.class]),
-        style: normalizeStyle(props.style)
+        class: normalizeClass(formRootClass.value),
+        style: normalizeStyle(formRootStyle.value)
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(viewSchemas), (schema) => {
-          return openBlock(), createBlock(unref(FormItem$1), {
-            key: schema.key,
-            schema,
-            class: normalizeClass(getFormItemClass(schema))
-          }, createSlots({ _: 2 }, [
-            renderList(fieldSlots.value, (_, slotName) => {
-              return {
-                name: slotName,
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, slotName, mergeProps({ ref_for: true }, slotProps ?? {}))
-                ])
-              };
-            })
-          ]), 1032, ["schema", "class"]);
+          return openBlock(), createElementBlock(Fragment, {
+            key: schema.key
+          }, [
+            unref(isViewGroupSchema)(schema) ? (openBlock(), createBlock(unref(Group$1), {
+              key: 0,
+              schema
+            }, createSlots({ _: 2 }, [
+              renderList(fieldSlots.value, (_, slotName) => {
+                return {
+                  name: slotName,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, slotName, mergeProps({ ref_for: true }, slotProps ?? {}))
+                  ])
+                };
+              })
+            ]), 1032, ["schema"])) : unref(isViewDynamicSchema)(schema) ? (openBlock(), createBlock(unref(Dynamic$1), {
+              key: 1,
+              schema,
+              "view-schemas": unref(viewSchemas)
+            }, createSlots({ _: 2 }, [
+              renderList(fieldSlots.value, (_, slotName) => {
+                return {
+                  name: slotName,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, slotName, mergeProps({ ref_for: true }, slotProps ?? {}))
+                  ])
+                };
+              })
+            ]), 1032, ["schema", "view-schemas"])) : (openBlock(), createBlock(unref(Field$1), {
+              key: getFieldRenderKey(schema),
+              schema,
+              class: normalizeClass(getFieldClass(schema))
+            }, createSlots({ _: 2 }, [
+              renderList(fieldSlots.value, (_, slotName) => {
+                return {
+                  name: slotName,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, slotName, mergeProps({ ref_for: true }, slotProps ?? {}))
+                  ])
+                };
+              })
+            ]), 1032, ["schema", "class"]))
+          ], 64);
         }), 128)),
         isActionsVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
           isResetterVisible.value && unref(slots).resetter ? renderSlot(_ctx.$slots, "resetter", {
@@ -1416,8 +1726,8 @@ const SchemxFormExport = withInstall(_sfc_main, {
     provideSchemxAppConfig(app, options);
     app.component("SchemxForm", _sfc_main);
   },
-  /** FormItem 子组件引用 */
-  FormItem: FormItem$1
+  /** Field 子组件引用 */
+  Field: Field$1
 });
 const SchemxFormExport$1 = SchemxFormExport;
 function normalizeDictionary(dictionary) {
@@ -1452,15 +1762,64 @@ function WithRemoteOptions(WrappedComponent) {
     }
   });
 }
+const ConfigProvider = /* @__PURE__ */ defineComponent({
+  name: "SchemxConfigProvider",
+  inheritAttrs: false,
+  props: {
+    schemaConfig: {
+      type: Object,
+      default: void 0
+    },
+    rendererProps: {
+      type: Object,
+      default: void 0
+    },
+    validatorAdapters: {
+      type: Array,
+      default: void 0
+    },
+    defaultRendererType: {
+      type: String,
+      default: void 0
+    },
+    rendererRegistry: {
+      type: Object,
+      default: void 0
+    },
+    presetRuleRegistry: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const config = computed(() => ({
+      schemaConfig: props.schemaConfig,
+      rendererProps: props.rendererProps,
+      validatorAdapters: props.validatorAdapters,
+      defaultRendererType: props.defaultRendererType,
+      rendererRegistry: props.rendererRegistry,
+      presetRuleRegistry: props.presetRuleRegistry
+    }));
+    provideSchemxConfigProvider(config);
+    return () => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+    };
+  }
+});
+const ConfigProvider$1 = ConfigProvider;
 export {
-  FormGroup$1 as FormGroup,
-  FormItem$1 as FormItem,
+  ConfigProvider$1 as ConfigProvider,
+  Field$1 as Field,
+  Group$1 as Group,
   WithRemoteOptions,
   createFieldContext,
   createFormConfigContext,
   createFormContext,
   SchemxFormExport$1 as default,
-  getCoreForm,
+  presetRuleRegistry,
   rendererRegistry,
   SchemxFormExport$1 as schemxForm,
   useDictionary,
@@ -1475,7 +1834,6 @@ export {
   useWatch,
   useWatchAll,
   useWatchField,
-  useWatchFields,
-  validationRuleRegistry
+  useWatchFields
 };
 //# sourceMappingURL=index.mjs.map