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

package/dist/index.mjs

@@ -1,10 +1,264 @@
 import "./style.css";
-import { getCurrentInstance, inject, onScopeDispose, provide, onUnmounted, shallowRef, computed, ref, onMounted, watchEffect, defineComponent, watch, createVNode, h, createTextVNode, mergeProps, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderList, unref, createBlock, createSlots, withCtx, renderSlot } from "vue";
+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";
 export * from "@schemx/core";
 import classnames from "classnames";
+import { createFormStateAdapter, createRendererRegistry } from "@schemx/core/adapter";
 import { pick } from "es-toolkit";
-import { createRendererRegistry } from "@schemx/core/adapter";
+function createVueShallowRef(value) {
+  return shallowRef(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;
+  }
+  const snapshot = source.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 = source.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 = source.subscribe(updateFieldRefs);
+  const dispose = () => {
+    unsubscribe();
+  };
+  const fieldBridge = {
+    source,
+    value,
+    errors,
+    touched,
+    pending,
+    dispose
+  };
+  bridge.fieldBridges.set(source, fieldBridge);
+  return fieldBridge;
+}
+function createVueFormFacade(form, dependencies) {
+  let destroyed = false;
+  const getFieldValue = (name) => {
+    if (!destroyed) {
+      const bridge = dependencies.getFormBridge(form);
+      void dependencies.getFieldBridge(bridge, name).value.value;
+    }
+    return form.getFieldValue(name);
+  };
+  const getFieldErrors = (name) => {
+    if (!destroyed) {
+      const bridge = dependencies.getFormBridge(form);
+      void dependencies.getFieldBridge(bridge, name).errors.value;
+    }
+    return form.getFieldErrors(name);
+  };
+  const isFieldTouched = (name) => {
+    if (!destroyed) {
+      const bridge = dependencies.getFormBridge(form);
+      void dependencies.getFieldBridge(bridge, name).touched.value;
+    }
+    return form.isFieldTouched(name);
+  };
+  const isFieldPending = (name) => {
+    if (!destroyed) {
+      const bridge = dependencies.getFormBridge(form);
+      void dependencies.getFieldBridge(bridge, name).pending.value;
+    }
+    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;
+        }
+      }
+    }
+    return form.getFieldsValue(names);
+  };
+  const getTouchedFields = () => {
+    if (!destroyed) {
+      const bridge = dependencies.getFormBridge(form);
+      void bridge.touchedFields.value;
+    }
+    return form.getTouchedFields();
+  };
+  const getPendingFields = () => {
+    if (!destroyed) {
+      const bridge = dependencies.getFormBridge(form);
+      void bridge.pendingFields.value;
+    }
+    return form.getPendingFields();
+  };
+  const isLoading = () => {
+    if (!destroyed) {
+      const bridge = dependencies.getFormBridge(form);
+      void bridge.loading.value;
+    }
+    return form.isLoading();
+  };
+  const destroy = () => {
+    if (destroyed) {
+      return;
+    }
+    destroyed = true;
+    const bridge = dependencies.getCachedFormBridge(form);
+    if (bridge) {
+      dependencies.disposeFormBridge(bridge);
+    }
+    form.destroy();
+  };
+  return {
+    ...form,
+    getFieldValue,
+    getFieldErrors,
+    isFieldTouched,
+    isFieldPending,
+    getFieldsValue,
+    getTouchedFields,
+    getPendingFields,
+    isLoading,
+    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 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, {
+    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;
+}
+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 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 syncTouchedFields = () => {
+    touchedFields.value = stateAdapter.touchedFields.getSnapshot();
+  };
+  const syncPendingFields = () => {
+    pendingFields.value = stateAdapter.pendingFields.getSnapshot();
+  };
+  const syncLoading = () => {
+    loading.value = stateAdapter.loading.getSnapshot();
+  };
+  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 facade = getVueFormFacade(form);
+  const bridge = {
+    form,
+    stateAdapter,
+    values,
+    touchedFields,
+    pendingFields,
+    loading,
+    fieldBridges,
+    refCount: 0,
+    destroyed: false,
+    unsubscribe,
+    facade
+  };
+  return bridge;
+}
 const SCHEMX_APP_CONFIG_KEY = Symbol("schemx:app-config");
 const EMPTY_SCHEMX_CONFIG = Object.freeze({
   schemaConfig: Object.freeze({}),
@@ -15,12 +269,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);
@@ -36,6 +300,7 @@ const validationRuleRegistry = createValidationRuleRegistry();
 function useForm(options = {}) {
   const configuredOptions = mergeSchemxConfig(
     getUseFormSchemxConfig(options),
+    // App 安装配置以 Values 存储；在 useForm 边界关联到当前 TValues。
     getSchemxAppConfig(),
     {
       rendererRegistry,
@@ -47,14 +312,18 @@ 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,
@@ -62,6 +331,7 @@ function getUseFormSchemxConfig(options) {
   } = options;
   return {
     schemaConfig,
+    rendererProps,
     defaultRendererType,
     rendererRegistry: rendererRegistry2,
     validationRuleRegistry: validationRuleRegistry2,
@@ -70,7 +340,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 +355,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 +405,7 @@ function useFieldContext() {
 function useWatch(nameOrNamesOrCallback, callbackOrOptions, maybeOptions) {
   const form = useFormContext();
   const dispose = createWatch(
-    form,
+    getCoreForm(form),
     nameOrNamesOrCallback,
     callbackOrOptions,
     maybeOptions
@@ -301,15 +549,89 @@ 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)
@@ -582,6 +904,12 @@ const FormItem = /* @__PURE__ */ defineComponent({
       required: true
     }
   },
+  /**
+   * 根据 schema 类型分发字段组或字段项渲染。
+   *
+   * @param props - 当前组件的 schema 属性。
+   * @param slots - Vue setup 上下文提供的插槽集合。
+   */
   setup(props, {
     slots
   }) {
@@ -607,22 +935,22 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       required: true
     }
   },
+  /**
+   * 初始化字段上下文，并组合响应式 schema、校验处理器与插槽渲染器。
+   *
+   * @param props - 当前字段项的 schema 属性。
+   * @param attrs - Vue setup 上下文提供的透传属性。
+   * @param slots - Vue setup 上下文提供的插槽集合。
+   */
   setup(props, {
     attrs,
     slots
   }) {
     const form = useFormContext();
-    const inputSchema = props.schema;
-    const schemaVersion = shallowRef(0);
-    const disposeSchemaEffect = form.effect(() => {
-      form.getViewSchemas();
-      schemaVersion.value++;
-    });
-    onUnmounted(disposeSchemaEffect);
+    const inputSchema = computed(() => props.schema);
+    const latestSchema = useViewSchema(form, () => inputSchema.value.key);
     const schemaRef = computed(() => {
-      void schemaVersion.value;
-      const latestSchema = form.getViewSchemas().find((viewSchema) => viewSchema.key === inputSchema.key);
-      return latestSchema && isSchemxViewFieldSchema(latestSchema) ? latestSchema : inputSchema;
+      return latestSchema.value && isSchemxViewFieldSchema(latestSchema.value) ? latestSchema.value : inputSchema.value;
     });
     const formContext = useFormConfigContext();
     const field = useField(schemaRef.value.name);
@@ -653,28 +981,10 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
       field.setValue(v);
     };
     const componentProps = useStableRef(() => {
-      const currentSchema = schemaRef.value;
-      const currentComponentProps = currentSchema.componentProps ?? {};
-      const formItemProps = {
-        name: currentSchema.name,
-        label: currentSchema.label,
-        componentType: currentSchema.componentType,
-        ...currentComponentProps.formItemProps
-      };
+      const currentComponentProps = schemaRef.value.componentProps ?? {};
       return {
         ...currentComponentProps,
         value: field.value.value,
-        disabled: currentSchema.disabled,
-        readonly: currentSchema.readonly,
-        readonlyPlaceholder: currentSchema.readonlyPlaceholder,
-        placeholder: currentSchema.placeholder,
-        formItemProps: {
-          ...formItemProps,
-          disabled: currentSchema.disabled,
-          readonly: currentSchema.readonly,
-          readonlyPlaceholder: currentSchema.readonlyPlaceholder,
-          placeholder: currentSchema.placeholder
-        },
         onChange: handleChange,
         onBlur: handleBlur,
         "onUpdate:value": handleValueUpdate
@@ -722,6 +1032,65 @@ const FieldFormItem = /* @__PURE__ */ defineComponent({
   }
 });
 const FormItem$1 = FormItem;
+const _hoisted_1$1 = ["aria-busy", "data-loading", "disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "schemx-button__prefix"
+};
+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) {
@@ -763,6 +1132,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",
@@ -771,8 +1144,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: void 0 },
+    resetter: { type: [Boolean, Object], default: void 0 },
     class: { default: "" },
     style: { type: [Boolean, null, String, Object, Array], default: () => ({}) },
+    rendererProps: { default: void 0 },
     validatorAdapters: {},
     defaultRendererType: {},
     rendererRegistry: { default: void 0 },
@@ -780,6 +1157,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: {},
@@ -800,64 +1179,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;
+        return (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
+      },
+      /**
+       * 转发提交失败回调。
+       *
+       * @param errors - 提交失败时的字段错误集合。
+       */
+      onFinishFailed: (errors) => {
+        var _a;
+        return (_a = props.onFinishFailed) == null ? void 0 : _a.call(props, errors);
+      },
+      /**
+       * 转发完整表单重置回调。
+       */
+      onReset: () => {
         var _a;
-        (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
+        (_a = props.onReset) == null ? void 0 : _a.call(props);
       },
-      onFinishFailed: async (errors) => {
+      /**
+       * 转发 Core 发出的提交 loading 状态。
+       *
+       * 外部传入 Form 时不会注入该回调，保持实例的创建期边界。
+       *
+       * @param loading - 当前是否处于提交流程中。
+       */
+      onLoadingChange: (loading) => {
         var _a;
-        (_a = props.onFinishFailed) == null ? void 0 : _a.call(props, errors);
+        (_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);
       }
     });
     const isExternalForm = props.form !== void 0;
-    createFormContext(form);
+    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 disposeWatch = createWatch(form, (latestSnapshot) => {
-      if (syncingFromModel)
-        return;
-      emit("update:modelValue", latestSnapshot);
-    });
-    onUnmounted(disposeWatch);
+    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" }
+    );
     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,
@@ -872,13 +1337,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       pickSchemaConfig,
       (nextSchemaConfig) => {
         Object.assign(formSchemaConfig, nextSchemaConfig);
-        form.updateSchemaConfig(nextSchemaConfig);
+        formInstance.updateSchemaConfig(nextSchemaConfig);
       },
       { deep: false, immediate: isExternalForm }
     );
-    __expose({
-      ...form
-    });
+    const exposed = {
+      ...formInstance,
+      submit: handleSubmit,
+      reset: handleReset
+    };
+    __expose(exposed);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["schemx", props.class]),
@@ -890,7 +1358,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             schema,
             class: normalizeClass(getFormItemClass(schema))
           }, createSlots({ _: 2 }, [
-            renderList(_ctx.$slots, (_, slotName) => {
+            renderList(fieldSlots.value, (_, slotName) => {
               return {
                 name: slotName,
                 fn: withCtx((slotProps) => [
@@ -899,7 +1367,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);
     };
   }
@@ -957,6 +1460,7 @@ export {
   createFormConfigContext,
   createFormContext,
   SchemxFormExport$1 as default,
+  getCoreForm,
   rendererRegistry,
   SchemxFormExport$1 as schemxForm,
   useDictionary,
@@ -965,6 +1469,7 @@ export {
   useForm,
   useFormConfigContext,
   useFormContext,
+  useFormSelector,
   useStableRef,
   useViewSchemas,
   useWatch,