@schemx/vue 1.0.0-next.0 → 1.0.0-next.2

package/dist/index.mjs

@@ -1,8 +1,9 @@
 import "./style.css";
-import { getCurrentInstance, inject, onScopeDispose, provide, onUnmounted, shallowRef, computed, ref, onMounted, watchEffect, defineComponent, watch, createVNode, h, toRef, createTextVNode, reactive, openBlock, createElementBlock, normalizeStyle, normalizeClass, Fragment, renderList, unref, createBlock, createSlots, withCtx, renderSlot, mergeProps } from "vue";
-import classnames from "classnames";
-import { createRendererRegistry, createValidationRuleRegistry, mergeSchemxConfig, createForm, createField, createWatch, createEffect, isSchemxSchemas, defaultSchemxConfigKeys } from "@schemx/core";
+import { getCurrentInstance, inject, shallowRef, 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";
 export * from "@schemx/core";
+import classnames from "classnames";
+import { createFormExternalStore, createRendererRegistry } from "@schemx/core/adapter";
 import { pick } from "es-toolkit";
 const SCHEMX_APP_CONFIG_KEY = Symbol("schemx:app-config");
 const EMPTY_SCHEMX_CONFIG = Object.freeze({
@@ -14,12 +15,22 @@ function normalizeSchemxAppConfig(config) {
   const validatorAdapters = Object.freeze([...config.validatorAdapters ?? []]);
   return Object.freeze({
     schemaConfig,
+    rendererProps: normalizeRendererProps(config.rendererProps),
     validatorAdapters,
     defaultRendererType: config.defaultRendererType,
     rendererRegistry: config.rendererRegistry,
     validationRuleRegistry: config.validationRuleRegistry
   });
 }
+function normalizeRendererProps(source) {
+  if (source === void 0) {
+    return void 0;
+  }
+  const entries = Object.entries(source).map(([type, props]) => {
+    return [type, props === void 0 ? void 0 : Object.freeze({ ...props })];
+  });
+  return Object.freeze(Object.fromEntries(entries));
+}
 function provideSchemxAppConfig(app, config = {}) {
   const normalizedConfig = normalizeSchemxAppConfig(config);
   app.provide(SCHEMX_APP_CONFIG_KEY, normalizedConfig);
@@ -30,11 +41,258 @@ function getSchemxAppConfig() {
   }
   return inject(SCHEMX_APP_CONFIG_KEY, EMPTY_SCHEMX_CONFIG);
 }
+const formBridgeCache = /* @__PURE__ */ new WeakMap();
+const formFacadeCache = /* @__PURE__ */ new WeakMap();
+const facadeCoreFormCache = /* @__PURE__ */ new WeakMap();
+function createVueShallowRef(value) {
+  return shallowRef(value);
+}
+function getCoreForm(form) {
+  const coreForm = facadeCoreFormCache.get(form);
+  return coreForm ?? form;
+}
+function getVueFormBridge(form) {
+  const coreForm = getCoreForm(form);
+  const cachedBridge = formBridgeCache.get(coreForm);
+  if (cachedBridge) {
+    return cachedBridge;
+  }
+  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 facade = createVueFormFacade(coreForm);
+  formFacadeCache.set(coreForm, facade);
+  facadeCoreFormCache.set(facade, coreForm);
+  return facade;
+}
+function retainVueFormBridge(bridge) {
+  if (bridge.destroyed) {
+    return () => {
+    };
+  }
+  bridge.refCount++;
+  let released = false;
+  return () => {
+    if (released || bridge.destroyed) {
+      return;
+    }
+    released = true;
+    bridge.refCount--;
+    if (bridge.refCount === 0) {
+      disposeVueFormBridge(bridge);
+    }
+  };
+}
+function getVueFieldBridge(bridge, name) {
+  const store = bridge.externalStore.field(name);
+  const cachedBridge = bridge.fieldBridges.get(store);
+  if (cachedBridge) {
+    return cachedBridge;
+  }
+  const snapshot = store.getSnapshot();
+  const value = createVueShallowRef(
+    snapshot.value
+  );
+  const errors = createVueShallowRef(snapshot.errors);
+  const touched = createVueShallowRef(snapshot.touched);
+  const pending = createVueShallowRef(snapshot.pending);
+  const updateFieldRefs = () => {
+    const nextSnapshot = store.getSnapshot();
+    if (!Object.is(value.value, nextSnapshot.value)) {
+      value.value = nextSnapshot.value;
+    }
+    if (!areStringListsEqual(errors.value, nextSnapshot.errors)) {
+      errors.value = nextSnapshot.errors;
+    }
+    if (touched.value !== nextSnapshot.touched) {
+      touched.value = nextSnapshot.touched;
+    }
+    if (pending.value !== nextSnapshot.pending) {
+      pending.value = nextSnapshot.pending;
+    }
+  };
+  const unsubscribe = store.subscribe(updateFieldRefs);
+  const dispose = () => {
+    unsubscribe();
+  };
+  const fieldBridge = {
+    store,
+    value,
+    errors,
+    touched,
+    pending,
+    dispose
+  };
+  bridge.fieldBridges.set(store, fieldBridge);
+  return fieldBridge;
+}
+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.externalStore.dispose();
+  formBridgeCache.delete(bridge.form);
+}
+function createVueFormBridge(form) {
+  const externalStore = createFormExternalStore(form);
+  const values = createVueShallowRef(externalStore.values.getSnapshot());
+  const touchedFields = createVueShallowRef(
+    externalStore.touchedFields.getSnapshot()
+  );
+  const pendingFields = createVueShallowRef(
+    externalStore.pendingFields.getSnapshot()
+  );
+  const loading = createVueShallowRef(externalStore.loading.getSnapshot());
+  const fieldBridges = /* @__PURE__ */ new Map();
+  const syncValues = () => {
+    values.value = externalStore.values.getSnapshot();
+  };
+  const syncTouchedFields = () => {
+    touchedFields.value = externalStore.touchedFields.getSnapshot();
+  };
+  const syncPendingFields = () => {
+    pendingFields.value = externalStore.pendingFields.getSnapshot();
+  };
+  const syncLoading = () => {
+    loading.value = externalStore.loading.getSnapshot();
+  };
+  const unsubscribeValues = externalStore.values.subscribe(syncValues);
+  const unsubscribeTouchedFields = externalStore.touchedFields.subscribe(syncTouchedFields);
+  const unsubscribePendingFields = externalStore.pendingFields.subscribe(syncPendingFields);
+  const unsubscribeLoading = externalStore.loading.subscribe(syncLoading);
+  const unsubscribe = () => {
+    unsubscribeValues();
+    unsubscribeTouchedFields();
+    unsubscribePendingFields();
+    unsubscribeLoading();
+  };
+  const facade = getVueFormFacade(form);
+  const bridge = {
+    form,
+    externalStore,
+    values,
+    touchedFields,
+    pendingFields,
+    loading,
+    fieldBridges,
+    refCount: 0,
+    destroyed: false,
+    unsubscribe,
+    facade
+  };
+  return bridge;
+}
+function createVueFormFacade(form) {
+  let destroyed = false;
+  const getFieldValue = (name) => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      void getVueFieldBridge(bridge, name).value.value;
+    }
+    return form.getFieldValue(name);
+  };
+  const getFieldErrors = (name) => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      void getVueFieldBridge(bridge, name).errors.value;
+    }
+    return form.getFieldErrors(name);
+  };
+  const isFieldTouched = (name) => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      void getVueFieldBridge(bridge, name).touched.value;
+    }
+    return form.isFieldTouched(name);
+  };
+  const isFieldPending = (name) => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      void getVueFieldBridge(bridge, name).pending.value;
+    }
+    return form.isFieldPending(name);
+  };
+  const getFieldsValue = (names) => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      if (names === void 0) {
+        void bridge.values.value;
+      } else {
+        for (const name of names) {
+          void getVueFieldBridge(bridge, name).value.value;
+        }
+      }
+    }
+    return form.getFieldsValue(names);
+  };
+  const getTouchedFields = () => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      void bridge.touchedFields.value;
+    }
+    return form.getTouchedFields();
+  };
+  const getPendingFields = () => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      void bridge.pendingFields.value;
+    }
+    return form.getPendingFields();
+  };
+  const isLoading = () => {
+    if (!destroyed) {
+      const bridge = getVueFormBridge(form);
+      void bridge.loading.value;
+    }
+    return form.isLoading();
+  };
+  const destroy = () => {
+    if (destroyed) {
+      return;
+    }
+    destroyed = true;
+    const bridge = formBridgeCache.get(form);
+    if (bridge) {
+      disposeVueFormBridge(bridge);
+    }
+    form.destroy();
+  };
+  return {
+    ...form,
+    getFieldValue,
+    getFieldErrors,
+    isFieldTouched,
+    isFieldPending,
+    getFieldsValue,
+    getTouchedFields,
+    getPendingFields,
+    isLoading,
+    destroy
+  };
+}
+function areStringListsEqual(previous, next) {
+  return previous.length === next.length && previous.every((value, index) => value === next[index]);
+}
 const rendererRegistry = createRendererRegistry("input");
 const validationRuleRegistry = createValidationRuleRegistry();
 function useForm(options = {}) {
   const configuredOptions = mergeSchemxConfig(
     getUseFormSchemxConfig(options),
+    // App 安装配置以 Values 存储；在 useForm 边界关联到当前 TValues。
     getSchemxAppConfig(),
     {
       rendererRegistry,
@@ -46,22 +304,26 @@ function useForm(options = {}) {
     ...configuredOptions
   };
   const instance = createForm(mergedOptions);
+  const form = getVueFormFacade(instance);
+  const releaseBridge = retainVueFormBridge(getVueFormBridge(instance));
   onScopeDispose(() => {
-    instance.destroy();
+    releaseBridge();
+    form.destroy();
   });
-  return instance;
+  return form;
 }
 function getUseFormSchemxConfig(options) {
   const {
     schemaConfig = {},
+    rendererProps = void 0,
     validatorAdapters = [],
     defaultRendererType = void 0,
     rendererRegistry: rendererRegistry2 = void 0,
-    validationRuleRegistry: validationRuleRegistry2 = void 0,
-    ...rest
+    validationRuleRegistry: validationRuleRegistry2 = void 0
   } = options;
   return {
     schemaConfig,
+    rendererProps,
     defaultRendererType,
     rendererRegistry: rendererRegistry2,
     validationRuleRegistry: validationRuleRegistry2,
@@ -70,7 +332,11 @@ function getUseFormSchemxConfig(options) {
 }
 const SCHEMX_FORM_INSTANCE_KEY = Symbol("schemx:instance");
 function createFormContext(instance) {
-  provide(SCHEMX_FORM_INSTANCE_KEY, instance);
+  const form = getVueFormFacade(instance);
+  const releaseBridge = retainVueFormBridge(getVueFormBridge(form));
+  provide(SCHEMX_FORM_INSTANCE_KEY, form);
+  onScopeDispose(releaseBridge);
+  return form;
 }
 function useFormContext() {
   const instance = inject(SCHEMX_FORM_INSTANCE_KEY, null);
@@ -81,63 +347,37 @@ function useFormContext() {
   }
   return instance;
 }
-const fieldHookCache = /* @__PURE__ */ new WeakMap();
-function createFieldHook(form, name) {
-  const field = createField(form, name);
-  const fieldValue = shallowRef(field.getValue());
-  const fieldErrors = shallowRef(field.getErrors());
-  const fieldPending = shallowRef(field.isPending());
-  const dispose = field.effect(() => {
-    fieldValue.value = field.getValue();
-    fieldErrors.value = field.getErrors();
-    fieldPending.value = field.isPending();
-  });
-  const errors = computed(() => fieldErrors.value);
-  const dirty = computed(() => {
-    void fieldValue.value;
-    return field.isTouched();
-  });
-  const pending = computed(() => fieldPending.value);
-  const result = {
+function createFieldHook(form, name, fieldBridge) {
+  const coreForm = getCoreForm(form);
+  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 getValues = () => form.getFieldsValue();
+  return {
+    ...coreField,
     name,
-    value: fieldValue,
+    value: fieldBridge.value,
     errors,
     dirty,
     pending,
-    ...field,
-    getValue: () => fieldValue.value
+    getValue,
+    getErrors,
+    isTouched,
+    isPending,
+    getValues
   };
-  return { result, dispose };
 }
 const useField = (name) => {
   const form = useFormContext();
-  const key = name;
-  let formCache = fieldHookCache.get(form);
-  if (!formCache) {
-    formCache = /* @__PURE__ */ new Map();
-    fieldHookCache.set(form, formCache);
-  }
-  const cachedEntry = formCache.get(key);
-  let activeEntry;
-  if (cachedEntry) {
-    cachedEntry.refCount++;
-    activeEntry = cachedEntry;
-  } else {
-    const { result, dispose } = createFieldHook(form, name);
-    activeEntry = {
-      refCount: 1,
-      result,
-      dispose
-    };
-    formCache.set(key, activeEntry);
-  }
-  onUnmounted(() => {
-    if (--activeEntry.refCount <= 0) {
-      activeEntry.dispose();
-      formCache.delete(key);
-    }
-  });
-  return activeEntry.result;
+  const coreForm = getCoreForm(form);
+  const formBridge = getVueFormBridge(coreForm);
+  const fieldBridge = getVueFieldBridge(formBridge, name);
+  return createFieldHook(form, name, fieldBridge);
 };
 const SCHEMX_FORM_FIELD_KEY = Symbol(
   "schemx:field"
@@ -157,7 +397,7 @@ function useFieldContext() {
 function useWatch(nameOrNamesOrCallback, callbackOrOptions, maybeOptions) {
   const form = useFormContext();
   const dispose = createWatch(
-    form,
+    getCoreForm(form),
     nameOrNamesOrCallback,
     callbackOrOptions,
     maybeOptions
@@ -174,13 +414,9 @@ function useWatchFields(names, callback, options) {
 function useWatchAll(callback, options) {
   return useWatch(callback, options);
 }
-function useEffect(callback) {
-  const dispose = createEffect(callback);
-  onUnmounted(dispose);
-  return dispose;
-}
 function normalizeError(err) {
-  if (err instanceof Error) return err;
+  if (err instanceof Error)
+    return err;
   return new Error(String(err));
 }
 const useDictionary = (options, fieldName) => {
@@ -229,9 +465,11 @@ const useDictionary = (options, fieldName) => {
       error.value = void 0;
       const currentCount = ++requestCount;
       const res = await executeWithRetry(formValues);
-      if (currentCount !== requestCount) return;
+      if (currentCount !== requestCount)
+        return;
       const formatted = await format(res);
-      if (currentCount !== requestCount) return;
+      if (currentCount !== requestCount)
+        return;
       list.value = formatted;
       error.value = void 0;
       if (typeof options.onSuccess === "function") {
@@ -289,7 +527,8 @@ function useFormConfigContext() {
 const isShallowEqual = (a, b) => {
   const keysA = Object.keys(a);
   const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
+  if (keysA.length !== keysB.length)
+    return false;
   return keysA.every((key) => a[key] === b[key]);
 };
 function useStableRef(factory) {
@@ -302,24 +541,102 @@ function useStableRef(factory) {
   });
   return stableRef;
 }
+const viewSchemaBridgeCache = /* @__PURE__ */ new WeakMap();
 function useViewSchemas(form) {
+  const bridge = acquireViewSchemaBridge(getCoreForm(form));
+  return bridge.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 unsubscribe = form.subscribeViewSchemas((nextSchemas) => {
-    viewSchemas.value = nextSchemas;
+  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;
+}
+function useFormSelector(form, selector, options = {}) {
+  const bridge = getVueFormBridge(getCoreForm(form));
+  const releaseBridge = retainVueFormBridge(bridge);
+  const selected = shallowRef(selector(bridge.values.value));
+  const equals = options.equals ?? Object.is;
+  const stop = watch(
+    bridge.values,
+    (values) => {
+      const next = selector(values);
+      if (!equals(selected.value, next)) {
+        selected.value = next;
+      }
+    },
+    { flush: "sync" }
+  );
+  onScopeDispose(() => {
+    stop();
+    releaseBridge();
   });
-  onScopeDispose(unsubscribe);
-  return viewSchemas;
+  return readonly(selected);
 }
 function isValidTrigger(v) {
-  if (v === void 0) return false;
-  if (Array.isArray(v) && v.length === 0) return false;
+  if (v === void 0)
+    return false;
+  if (Array.isArray(v) && v.length === 0)
+    return false;
   return true;
 }
 function mergeTrigger(columnTrigger, contextTrigger, defaultTrigger) {
-  if (isValidTrigger(columnTrigger)) return columnTrigger;
-  if (isValidTrigger(contextTrigger)) return contextTrigger;
+  if (isValidTrigger(columnTrigger))
+    return columnTrigger;
+  if (isValidTrigger(contextTrigger))
+    return contextTrigger;
   return defaultTrigger;
 }
 function normalizeTrigger(t) {
@@ -334,7 +651,8 @@ function normalizeTrigger(t) {
   return map[t] ?? "submit";
 }
 function shouldValidateOn(event, trigger) {
-  if (!trigger) return false;
+  if (!trigger)
+    return false;
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   return triggers.some((t) => normalizeTrigger(t) === event);
 }
@@ -347,17 +665,21 @@ const kebabToCamel = (str) => {
   return str.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
 };
 const normalizeToKebab = (str) => {
-  if (isCamelCase(str)) return camelToKebab(str);
+  if (isCamelCase(str))
+    return camelToKebab(str);
   return str;
 };
 const normalizeToCamel = (str) => {
-  if (isKebabCase(str)) return kebabToCamel(str);
+  if (isKebabCase(str))
+    return kebabToCamel(str);
   return str;
 };
 const resolveSlot = (slots, name) => {
-  if (slots[name]) return slots[name];
+  if (slots[name])
+    return slots[name];
   const alt = isCamelCase(name) ? camelToKebab(name) : isKebabCase(name) ? kebabToCamel(name) : void 0;
-  if (alt && slots[alt]) return slots[alt];
+  if (alt && slots[alt])
+    return slots[alt];
   return void 0;
 };
 const extractChildSlots = (fieldName, allSlots) => {
@@ -420,7 +742,7 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
       "style": !destroyOnCollapse && isCollapsed ? {
         display: "none"
       } : void 0
-    }, [schema.children.map((child) => createVNode(FormItem, {
+    }, [schema.children.map((child) => createVNode(FormItem$1, {
       "key": child.key,
       "schema": child
     }, slots))]);
@@ -467,9 +789,105 @@ const FormGroup = /* @__PURE__ */ defineComponent((props, {
     }
   }
 });
+const FormGroup$1 = FormGroup;
 const normalizeId = (key) => {
   return String(key).replace(/[^a-zA-Z0-9_-]/g, "-");
 };
+function createFormItemSlotRenderers(options) {
+  const {
+    schemaRef,
+    field,
+    form,
+    formContext,
+    componentProps,
+    slots
+  } = options;
+  const renderRequired = () => {
+    const showRequiredMark = schemaRef.value.showRequiredMark ?? Boolean(schemaRef.value.required);
+    if (!showRequiredMark || schemaRef.value.disabled || schemaRef.value.readonly) {
+      return null;
+    }
+    return createVNode("span", {
+      "class": "schemx-item__required"
+    }, [createTextVNode("*")]);
+  };
+  const createSlotProps = (additionalProps = {}) => {
+    return {
+      ...componentProps.value,
+      value: field.value.value,
+      ...additionalProps
+    };
+  };
+  const renderFieldSlot = (suffix) => {
+    const slot = resolveSlot(slots, `${schemaRef.value.name}${suffix}`);
+    return (slot == null ? void 0 : slot(createSlotProps())) ?? null;
+  };
+  const renderLabel = () => {
+    const labelSlot = resolveSlot(slots, `${schemaRef.value.name}Label`);
+    if (labelSlot) {
+      return labelSlot(schemaRef.value);
+    }
+    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",
+      "style": {
+        width: labelWidth,
+        textAlign: labelAlign
+      }
+    }, [renderRequired(), createVNode("span", {
+      "class": "schemx-item__label-text"
+    }, [schemaRef.value.label, colon ? ":" : ""])]);
+  };
+  const renderBefore = () => renderFieldSlot("Before");
+  const renderContent = () => {
+    const component = form.getRenderer(schemaRef.value.componentType);
+    if (!component) {
+      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 contentSlot = resolveSlot(slots, `${schemaRef.value.name}Content`);
+    if (contentSlot) {
+      return contentSlot(createSlotProps({
+        columnElement
+      }));
+    }
+    return createVNode("div", {
+      "class": "schemx-item__control"
+    }, [columnElement]);
+  };
+  const renderAfter = () => renderFieldSlot("After");
+  const renderError = () => {
+    const errorSlot = resolveSlot(slots, `${schemaRef.value.name}Error`);
+    if (errorSlot) {
+      return errorSlot(createSlotProps({
+        errors: field.errors.value
+      }));
+    }
+    if (field.errors.value.length === 0) {
+      return null;
+    }
+    return createVNode("div", {
+      "class": "schemx-item__error"
+    }, [field.errors.value[0]]);
+  };
+  return {
+    createSlotProps,
+    renderAfter,
+    renderBefore,
+    renderContent,
+    renderError,
+    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: {
@@ -478,13 +896,19 @@ const FormItem = /* @__PURE__ */ defineComponent({
       required: true
     }
   },
+  /**
+   * 根据 schema 类型分发字段组或字段项渲染。
+   *
+   * @param props - 当前组件的 schema 属性。
+   * @param slots - Vue setup 上下文提供的插槽集合。
+   */
   setup(props, {
     slots
   }) {
     return () => {
       const schema = props.schema;
-      if (isViewGroupSchema$1(schema)) {
-        return h(FormGroup, {
+      if (isViewGroupSchema(schema)) {
+        return h(FormGroup$1, {
           schema
         }, slots);
       }
@@ -496,152 +920,169 @@ const FormItem = /* @__PURE__ */ defineComponent({
 });
 const FieldFormItem = /* @__PURE__ */ defineComponent({
   name: "SchemxFieldItem",
+  inheritAttrs: false,
   props: {
     schema: {
       type: Object,
       required: true
     }
   },
+  /**
+   * 初始化字段上下文，并组合响应式 schema、校验处理器与插槽渲染器。
+   *
+   * @param props - 当前字段项的 schema 属性。
+   * @param attrs - Vue setup 上下文提供的透传属性。
+   * @param slots - Vue setup 上下文提供的插槽集合。
+   */
   setup(props, {
+    attrs,
     slots
   }) {
-    const schemaRef = toRef(props, "schema");
     const form = useFormContext();
+    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 schema = () => schemaRef.value;
-    const field = useField(schema().name);
+    const field = useField(schemaRef.value.name);
     createFieldContext(field);
-    const trigger = computed(() => mergeTrigger(schema().validationTrigger, formContext.schemaConfig.validationTrigger, "onChange"));
+    const trigger = computed(() => mergeTrigger(schemaRef.value.validationTrigger, formContext.schemaConfig.validationTrigger, "onChange"));
     const canVerified = computed(() => {
-      const isOperate = schema().visible && !schema().readonly && !schema().disabled;
-      const rules = schema().rules;
-      const hasRules = Array.isArray(rules) ? (rules == null ? void 0 : rules.length) > 0 : !!schema().rules;
-      return isOperate && (Boolean(schema().required) || hasRules);
+      const isOperate = schemaRef.value.visible && !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);
     });
     const handleChange = (v) => {
       var _a, _b;
       field.setValue(v);
-      (_b = (_a = schema().componentProps) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, v);
+      (_b = (_a = schemaRef.value.componentProps) == null ? void 0 : _a.onChange) == null ? void 0 : _b.call(_a, v);
       if (canVerified.value && shouldValidateOn("change", trigger.value)) {
         field.validate();
       }
     };
     const handleBlur = (v) => {
       var _a, _b;
-      (_b = (_a = schema().componentProps) == null ? void 0 : _a.onBlur) == null ? void 0 : _b.call(_a, v);
+      (_b = (_a = schemaRef.value.componentProps) == null ? void 0 : _a.onBlur) == null ? void 0 : _b.call(_a, v);
       if (canVerified.value && shouldValidateOn("blur", trigger.value)) {
         field.validate();
       }
     };
+    const handleValueUpdate = (v) => {
+      field.setValue(v);
+    };
     const componentProps = useStableRef(() => {
-      const currentSchema = schema();
+      const currentComponentProps = schemaRef.value.componentProps ?? {};
       return {
-        ...currentSchema.componentProps,
-        readonly: currentSchema.readonly,
-        disabled: currentSchema.disabled,
-        placeholder: currentSchema.placeholder,
-        formItemProps: currentSchema,
-        value: field.getValue(),
+        ...currentComponentProps,
+        value: field.value.value,
         onChange: handleChange,
         onBlur: handleBlur,
-        "onUpdate:value": (v) => field.setValue(v)
+        "onUpdate:value": handleValueUpdate
       };
     });
-    const renderRequired = () => {
-      const showRequiredMark = schema().showRequiredMark ?? Boolean(schema().required);
-      if (!showRequiredMark || schema().disabled || schema().readonly) {
-        return null;
-      }
-      return createVNode("span", {
-        "class": "schemx-item__required"
-      }, [createTextVNode("*")]);
-    };
-    const renderLabel = () => {
-      const labelSlot = resolveSlot(slots, `${schema().name}Label`);
-      if (labelSlot) {
-        return labelSlot(schema());
-      }
-      const labelAlign = schema().labelAlign || formContext.schemaConfig.labelAlign;
-      const labelWidth = schema().labelWidth || formContext.schemaConfig.labelWidth;
-      const colon = schema().colon ?? formContext.schemaConfig.colon;
-      return createVNode("label", {
-        "class": "schemx-item__label",
-        "style": {
-          width: labelWidth,
-          textAlign: labelAlign
-        }
-      }, [renderRequired(), createVNode("span", {
-        "class": "schemx-item__label-text"
-      }, [schema().label, colon ? ":" : ""])]);
-    };
-    const renderContent = () => {
-      const component = form.getRenderer(schema().componentType);
-      if (!component) {
-        throw new Error(`[schemx] Can not find component renderer of "${schema().componentType}".`);
-      }
-      const childSlots = extractChildSlots(normalizeNameKey(schema().name), slots);
-      const columnElement = h(component, componentProps.value, childSlots);
-      const contentSlot = resolveSlot(slots, `${schema().name}Content`);
-      if (contentSlot) {
-        return contentSlot({
-          ...schema(),
-          columnElement
-        });
-      }
-      return createVNode("div", {
-        "class": "schemx-item__control"
-      }, [columnElement]);
-    };
-    const renderError = () => {
-      const errorSlot = resolveSlot(slots, `${schema().name}Error`);
-      if (errorSlot) {
-        return errorSlot({
-          ...schema(),
-          errors: field.errors.value
-        });
-      }
-      if (field.errors.value.length === 0) {
-        return null;
-      }
-      return createVNode("div", {
-        "class": "schemx-item__error"
-      }, [field.errors.value[0]]);
-    };
+    const {
+      createSlotProps,
+      renderAfter,
+      renderBefore,
+      renderContent,
+      renderError,
+      renderLabel
+    } = createFormItemSlotRenderers({
+      schemaRef,
+      field,
+      form,
+      formContext,
+      componentProps,
+      slots
+    });
     return () => {
-      if (!schema().visible) {
+      if (!schemaRef.value.visible) {
         return null;
       }
-      const itemSlot = resolveSlot(slots, normalizeNameKey(schema().name));
+      const itemSlot = resolveSlot(slots, normalizeNameKey(schemaRef.value.name));
       if (itemSlot) {
-        return itemSlot(schema());
+        return itemSlot(createSlotProps());
       }
-      const labelPosition = schema().labelPosition || formContext.schemaConfig.labelPosition;
-      return createVNode("div", {
-        "class": classnames("schemx-item-wrapper"),
-        "style": schema().style
-      }, [createVNode("div", {
-        "class": classnames("schemx-item", `schemx-item--label-${labelPosition}`, schema().class, {
-          "is-readonly": schema().readonly,
-          "is-disabled": schema().disabled
+      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, {
+          "is-readonly": schemaRef.value.readonly,
+          "is-disabled": schemaRef.value.disabled
         }),
         "style": {
-          ...schema().style ?? {}
+          ...schemaRef.value.style ?? {}
         }
       }, [renderLabel(), createVNode("div", {
         "class": "schemx-item__content"
-      }, [renderContent(), renderError()])])]);
+      }, [renderBefore(), renderContent(), renderAfter(), renderError()])])]);
     };
   }
 });
-const isViewGroupSchema$1 = (schema) => {
-  return "children" in schema;
+const FormItem$1 = FormItem;
+const _hoisted_1$1 = ["aria-busy", "data-loading", "disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "schemx-button__prefix"
 };
-const normalizeNameKey = (name) => {
-  if (Array.isArray(name)) {
-    return name.map((part) => String(part)).join(".");
-  }
-  return String(name);
+const _hoisted_3 = {
+  key: 1,
+  class: "schemx-button__loading",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const _hoisted_4 = {
+  key: 4,
+  class: "schemx-button__suffix"
 };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "SchemxButton", inheritAttrs: false },
+  __name: "index",
+  props: {
+    loading: { type: Boolean, default: false },
+    loadingText: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    size: { default: "medium" }
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const isDisabled = computed(() => props.disabled || props.loading);
+    const buttonClass = computed(() => ["schemx-button", `schemx-button--${props.size}`]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps(unref(attrs), {
+        class: buttonClass.value,
+        "aria-busy": props.loading || void 0,
+        "data-loading": props.loading || void 0,
+        disabled: isDisabled.value
+      }), [
+        _ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "prefix")
+        ])) : createCommentVNode("", true),
+        props.loading ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
+          createStaticVNode('<path d="M12 2v4"></path><path d="m16.2 7.8 2.9-2.9"></path><path d="M18 12h4"></path><path d="m16.2 16.2 2.9 2.9"></path><path d="M12 18v4"></path><path d="m4.9 19.1 2.9-2.9"></path><path d="M2 12h4"></path><path d="m4.9 4.9 2.9 2.9"></path>', 8)
+        ])])) : createCommentVNode("", true),
+        props.loading && props.loadingText ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          createTextVNode(toDisplayString(props.loadingText), 1)
+        ], 64)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 3),
+        _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_4, [
+          renderSlot(_ctx.$slots, "suffix")
+        ])) : createCommentVNode("", true)
+      ], 16, _hoisted_1$1);
+    };
+  }
+});
 function getSectionPosition(list, currentKey) {
   const currentIndex = list.findIndex((item) => item.key === currentKey);
   if (currentIndex === -1) {
@@ -665,9 +1106,6 @@ function getSectionPosition(list, currentKey) {
     isLast: !hasPositionItemInSection(list, currentIndex, 1)
   };
 }
-function isViewGroupSchema(item) {
-  return !!item && "children" in item;
-}
 function isPositionItem(item) {
   return !!item && !isViewGroupSchema(item) && item.visible !== false;
 }
@@ -686,6 +1124,10 @@ function hasPositionItemInSection(list, startIndex, step) {
   }
   return false;
 }
+const _hoisted_1 = {
+  key: 0,
+  class: "schemx-actions"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "SchemxForm" },
   __name: "form",
@@ -694,8 +1136,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     initialValues: { default: () => ({}) },
     modelValue: { default: () => ({}) },
     form: { default: void 0 },
+    loading: { type: Boolean, default: void 0 },
+    submitter: { type: [Boolean, Object], default: true },
+    resetter: { type: [Boolean, Object], default: true },
     class: { default: "" },
     style: { type: [Boolean, null, String, Object, Array], default: () => ({}) },
+    rendererProps: { default: void 0 },
     validatorAdapters: {},
     defaultRendererType: {},
     rendererRegistry: { default: void 0 },
@@ -703,6 +1149,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onRuleError: {},
     onFinish: { type: Function, default: void 0 },
     onFinishFailed: { type: Function, default: void 0 },
+    onReset: { type: Function, default: void 0 },
+    onLoadingChange: { type: Function, default: void 0 },
     onValuesChange: { type: Function, default: void 0 },
     onFieldsChange: { type: Function, default: void 0 },
     lifecycleHooks: {},
@@ -723,61 +1171,150 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const slots = useSlots();
     const pickSchemaConfig = () => {
       return pick(props, defaultSchemxConfigKeys);
     };
     const formSchemaConfig = reactive(pickSchemaConfig());
     createFormConfigContext({ schemaConfig: formSchemaConfig });
-    const form = props.form ? props.form : useForm({
+    const providedForm = props.form ? props.form : useForm({
       schemas: props.schemas,
       schemaConfig: pickSchemaConfig(),
       initialValues: Object.keys(props.modelValue).length > 0 ? props.modelValue : props.initialValues,
+      rendererProps: props.rendererProps,
       rendererRegistry: props.rendererRegistry,
       defaultRendererType: props.defaultRendererType,
       validationRuleRegistry: props.validationRuleRegistry,
       validatorAdapters: props.validatorAdapters,
-      onFinish: async (values) => {
+      /**
+       * 转发提交成功回调。
+       *
+       * @param values - 提交成功时的完整表单快照。
+       */
+      onFinish: (values) => {
         var _a;
-        (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
+        return (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
       },
-      onFinishFailed: async (errors) => {
+      /**
+       * 转发提交失败回调。
+       *
+       * @param errors - 提交失败时的字段错误集合。
+       */
+      onFinishFailed: (errors) => {
         var _a;
-        (_a = props.onFinishFailed) == null ? void 0 : _a.call(props, errors);
+        return (_a = props.onFinishFailed) == null ? void 0 : _a.call(props, errors);
       },
+      /**
+       * 转发完整表单重置回调。
+       */
+      onReset: () => {
+        var _a;
+        (_a = props.onReset) == null ? void 0 : _a.call(props);
+      },
+      /**
+       * 转发 Core 发出的提交 loading 状态。
+       *
+       * 外部传入 Form 时不会注入该回调，保持实例的创建期边界。
+       *
+       * @param loading - 当前是否处于提交流程中。
+       */
+      onLoadingChange: (loading) => {
+        var _a;
+        (_a = props.onLoadingChange) == null ? void 0 : _a.call(props, loading);
+      },
+      /**
+       * 转发值变化回调。
+       *
+       * @param changedValues - 本次变更涉及的字段值。
+       * @param latestSnapshot - 变更后的完整表单快照。
+       */
       onValuesChange: (changedValues, latestSnapshot) => {
         var _a;
         (_a = props.onValuesChange) == null ? void 0 : _a.call(props, changedValues, latestSnapshot);
       },
+      /**
+       * 转发字段变化回调。
+       *
+       * @param changedPaths - 本次发生变化的字段路径。
+       * @param allPaths - 当前已变更字段路径集合。
+       */
       onFieldsChange: (changedPaths, allPaths) => {
         var _a;
         (_a = props.onFieldsChange) == null ? void 0 : _a.call(props, changedPaths, allPaths);
       }
     });
-    createFormContext(form);
+    const isExternalForm = props.form !== void 0;
+    const formInstance = createFormContext(providedForm);
+    const effectiveLoading = computed(() => props.loading ?? formInstance.isLoading());
+    const normalizeActionConfig = (action) => action === true ? {} : action || {};
+    const submitterConfig = computed(() => normalizeActionConfig(props.submitter));
+    const resetterConfig = computed(() => normalizeActionConfig(props.resetter));
+    const getButtonProps = (config) => {
+      const buttonProps = Object.fromEntries(
+        Object.entries(config.buttonProps ?? {}).filter(
+          ([name]) => name !== "type" && name !== "onClick"
+        )
+      );
+      return buttonProps;
+    };
+    const submitterButtonProps = computed(() => getButtonProps(submitterConfig.value));
+    const resetterButtonProps = computed(() => getButtonProps(resetterConfig.value));
+    const isSubmitterVisible = computed(
+      () => props.submitter !== false && (props.submitter !== void 0 || slots.submitter)
+    );
+    const isResetterVisible = computed(
+      () => props.resetter !== false && (props.resetter !== void 0 || slots.resetter)
+    );
+    const isActionsVisible = computed(
+      () => isSubmitterVisible.value || isResetterVisible.value
+    );
+    const fieldSlots = computed(
+      () => Object.fromEntries(
+        Object.entries(slots).filter(
+          ([slotName]) => slotName !== "submitter" && slotName !== "resetter"
+        )
+      )
+    );
+    const isSubmitterDisabled = computed(
+      () => effectiveLoading.value || Boolean(submitterButtonProps.value.disabled)
+    );
+    const isResetterDisabled = computed(
+      () => effectiveLoading.value || Boolean(resetterButtonProps.value.disabled)
+    );
     let syncingFromModel = false;
     watch(
       () => props.modelValue,
       (values) => {
         syncingFromModel = true;
-        form.setFieldsValue(values);
+        formInstance.setFieldsValue(values);
         syncingFromModel = false;
-      }
+      },
+      { deep: true }
+    );
+    const handleSubmit = () => formInstance.submit();
+    const handleReset = () => {
+      formInstance.reset();
+    };
+    const formValues = useFormSelector(formInstance, (values) => values);
+    watch(
+      formValues,
+      (latestSnapshot) => {
+        if (syncingFromModel)
+          return;
+        emit("update:modelValue", latestSnapshot);
+      },
+      { flush: "sync" }
     );
-    const disposeWatch = createWatch(form, (latestSnapshot) => {
-      if (syncingFromModel) return;
-      emit("update:modelValue", latestSnapshot);
-    });
-    onUnmounted(disposeWatch);
     watch(
       () => props.schemas,
       (schemas) => {
         if (!isSchemxSchemas(schemas)) {
-          form.setSchemas(schemas);
+          formInstance.setSchemas(schemas);
         }
       },
       { deep: false, immediate: !!props.form }
     );
-    const viewSchemas = useViewSchemas(form);
+    const viewSchemas = useViewSchemas(formInstance);
     const getFormItemClass = (schema) => {
       const { isFirst, isLast } = getSectionPosition(
         viewSchemas.value,
@@ -788,13 +1325,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "schemx-item-wrapper--last": isLast
       };
     };
-    watchEffect(() => {
-      const nextSchemaConfig = pickSchemaConfig();
-      Object.assign(formSchemaConfig, nextSchemaConfig);
-      form.updateSchemaConfig(nextSchemaConfig);
-    });
+    watch(
+      pickSchemaConfig,
+      (nextSchemaConfig) => {
+        Object.assign(formSchemaConfig, nextSchemaConfig);
+        formInstance.updateSchemaConfig(nextSchemaConfig);
+      },
+      { deep: false, immediate: isExternalForm }
+    );
     __expose({
-      ...form
+      ...formInstance,
+      submit: handleSubmit,
+      reset: handleReset
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -802,12 +1344,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(props.style)
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(viewSchemas), (schema) => {
-          return openBlock(), createBlock(unref(FormItem), {
+          return openBlock(), createBlock(unref(FormItem$1), {
             key: schema.key,
             schema,
             class: normalizeClass(getFormItemClass(schema))
           }, createSlots({ _: 2 }, [
-            renderList(_ctx.$slots, (_, slotName) => {
+            renderList(fieldSlots.value, (_, slotName) => {
               return {
                 name: slotName,
                 fn: withCtx((slotProps) => [
@@ -816,7 +1358,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               };
             })
           ]), 1032, ["schema", "class"]);
-        }), 128))
+        }), 128)),
+        isActionsVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          isResetterVisible.value && unref(slots).resetter ? renderSlot(_ctx.$slots, "resetter", {
+            form: unref(formInstance),
+            loading: effectiveLoading.value,
+            disabled: isResetterDisabled.value,
+            reset: handleReset
+          }, void 0, void 0, 0) : isResetterVisible.value ? (openBlock(), createBlock(unref(_sfc_main$1), mergeProps({ key: 1 }, resetterButtonProps.value, {
+            class: "schemx-actions-button schemx-actions-button--reset",
+            type: "button",
+            disabled: isResetterDisabled.value,
+            onClick: handleReset
+          }), {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(resetterConfig.value.text ?? "重置"), 1)
+            ]),
+            _: 1
+          }, 16, ["disabled"])) : createCommentVNode("", true),
+          isSubmitterVisible.value && unref(slots).submitter ? renderSlot(_ctx.$slots, "submitter", {
+            form: unref(formInstance),
+            loading: effectiveLoading.value,
+            disabled: isSubmitterDisabled.value,
+            submit: handleSubmit
+          }, void 0, void 0, 2) : isSubmitterVisible.value ? (openBlock(), createBlock(unref(_sfc_main$1), mergeProps({ key: 3 }, submitterButtonProps.value, {
+            class: "schemx-actions-button schemx-actions-button--submit",
+            type: "button",
+            loading: effectiveLoading.value,
+            disabled: isSubmitterDisabled.value,
+            onClick: handleSubmit
+          }), {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(submitterConfig.value.text ?? "提交"), 1)
+            ]),
+            _: 1
+          }, 16, ["loading", "disabled"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
       ], 6);
     };
   }
@@ -831,31 +1408,35 @@ const SchemxFormExport = withInstall(_sfc_main, {
     app.component("SchemxForm", _sfc_main);
   },
   /** FormItem 子组件引用 */
-  FormItem
+  FormItem: FormItem$1
 });
+const SchemxFormExport$1 = SchemxFormExport;
+function normalizeDictionary(dictionary) {
+  if (typeof dictionary === "function") {
+    return { api: dictionary };
+  }
+  return dictionary;
+}
 function WithRemoteOptions(WrappedComponent) {
   return defineComponent({
     name: `WithRemoteOptions(${WrappedComponent.name || "Anonymous"})`,
     inheritAttrs: false,
     props: {
       dict: {
-        type: Object,
-        default: void 0
-      },
-      fieldName: {
-        type: [String, Array],
+        type: [Object, Function],
         default: void 0
       }
     },
     setup(props, { attrs, slots }) {
-      const fieldName = props.fieldName ?? (props.dict ? useFieldContext().name : void 0);
-      const dictResult = props.dict ? useDictionary(props.dict, fieldName) : null;
+      const dictionary = normalizeDictionary(props.dict);
+      const fieldName = dictionary ? attrs.fieldName ?? useFieldContext().name : void 0;
+      const dictResult = dictionary ? useDictionary(dictionary, fieldName) : null;
       const childrenProps = computed(() => {
         return {
           ...attrs,
-          dict: props.dict,
-          options: props.dict ? dictResult == null ? void 0 : dictResult.list.value : attrs.options,
-          loading: props.dict ? dictResult == null ? void 0 : dictResult.loading.value : attrs.loading
+          dict: dictionary,
+          options: dictionary ? dictResult == null ? void 0 : dictResult.list.value : attrs.options,
+          loading: dictionary ? dictResult == null ? void 0 : dictResult.loading.value : attrs.loading
         };
       });
       return () => h(WrappedComponent, childrenProps.value, slots);
@@ -863,22 +1444,24 @@ function WithRemoteOptions(WrappedComponent) {
   });
 }
 export {
-  FormGroup,
-  FormItem,
+  _sfc_main$1 as Button,
+  FormGroup$1 as FormGroup,
+  FormItem$1 as FormItem,
   WithRemoteOptions,
   createFieldContext,
   createFormConfigContext,
   createFormContext,
-  SchemxFormExport as default,
+  SchemxFormExport$1 as default,
+  getCoreForm,
   rendererRegistry,
-  SchemxFormExport as schemxForm,
+  SchemxFormExport$1 as schemxForm,
   useDictionary,
-  useEffect,
   useField,
   useFieldContext,
   useForm,
   useFormConfigContext,
   useFormContext,
+  useFormSelector,
   useStableRef,
   useViewSchemas,
   useWatch,