nuxt-ui-tools 1.3.0 → 1.5.0

package/dist/runtime/form/composables/use-form-page-scroll.d.ts

@@ -0,0 +1,22 @@
+import type { ComputedRef } from 'vue';
+import type { FormPageScrollOptions, FormPageSectionState } from '../types/index.js';
+/**
+ * Scroll behavior of a form page: which section is in view (a scrollspy on the nearest scrolling
+ * ancestor), scrolling to a section, and the URL hash that records and restores it.
+ *
+ * A section counts as reached once its top passes the line its `scroll-margin-top` defines, the
+ * same offset `scrollIntoView` honors, so the pinned header and the scrollspy agree. The section
+ * of an entry clicked in the navigation, and the one holding the field that takes focus (such as
+ * the first invalid field on submit), stay current through the scroll they cause, until the page
+ * is scrolled again.
+ */
+export declare function useFormPageScroll(params: {
+    sections: ComputedRef<readonly FormPageSectionState[]>;
+    /** Element the scroll container is looked up from: the page itself, or an ancestor. */
+    root: () => HTMLElement | null;
+    hash: () => boolean;
+}): {
+    active: import("vue").Ref<string | undefined, string | undefined>;
+    register: (key: string, element: HTMLElement) => () => void;
+    scrollTo: (key: string, options?: FormPageScrollOptions) => boolean;
+};

package/dist/runtime/form/composables/use-form-page-scroll.js

@@ -0,0 +1,178 @@
+import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+const SCROLL_SETTLE_MS = 120;
+const ACTIVATION_SLACK = 8;
+export function useFormPageScroll(params) {
+  const elements = /* @__PURE__ */ new Map();
+  const active = ref();
+  let scroller;
+  let focusRoot = null;
+  let target;
+  let pendingHash;
+  let settleTimer;
+  let holdFrame = 0;
+  let frame = 0;
+  function register(key, element) {
+    elements.set(key, element);
+    if (pendingHash === key) {
+      pendingHash = void 0;
+      void nextTick(() => scrollTo(key, { behavior: "instant", hash: false }));
+    } else {
+      schedule();
+    }
+    return () => {
+      if (elements.get(key) === element) {
+        elements.delete(key);
+      }
+      schedule();
+    };
+  }
+  function scrollTo(key, options = {}) {
+    const element = elements.get(key);
+    if (!element) {
+      return false;
+    }
+    hold(key);
+    element.scrollIntoView?.({
+      behavior: options.behavior ?? (prefersReducedMotion() ? "instant" : "smooth"),
+      block: "start"
+    });
+    if (options.focus) {
+      element.querySelector("[data-form-page-section-title]")?.focus({ preventScroll: true });
+    }
+    if (options.hash ?? params.hash()) {
+      writeHash(key);
+    }
+    return true;
+  }
+  function hold(key) {
+    target = key;
+    active.value = key;
+    clearTimeout(settleTimer);
+    cancelAnimationFrame(holdFrame);
+    holdFrame = requestAnimationFrame(() => {
+      holdFrame = requestAnimationFrame(() => {
+        holdFrame = 0;
+        settleSoon();
+      });
+    });
+  }
+  function settleSoon() {
+    clearTimeout(settleTimer);
+    settleTimer = setTimeout(() => {
+      target = void 0;
+    }, SCROLL_SETTLE_MS);
+  }
+  function onScroll() {
+    if (target) {
+      settleSoon();
+      return;
+    }
+    schedule();
+  }
+  function onFocusIn(event) {
+    const section = event.target instanceof Element ? event.target.closest("[data-form-page-section]") : null;
+    const key = section?.dataset.formPageSection;
+    if (key && elements.get(key) === section) {
+      hold(key);
+    }
+  }
+  function schedule() {
+    if (frame) {
+      return;
+    }
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      update();
+    });
+  }
+  function update() {
+    if (target) {
+      return;
+    }
+    const next = findActive();
+    if (next !== void 0) {
+      active.value = next;
+    }
+  }
+  function findActive() {
+    const keys = params.sections.value.map((section) => section.key).filter((key) => elements.has(key));
+    if (!keys.length) {
+      return void 0;
+    }
+    if (isScrolledToEnd()) {
+      return keys.at(-1);
+    }
+    const line = scroller instanceof HTMLElement ? scroller.getBoundingClientRect().top : 0;
+    let current = keys[0];
+    for (const key of keys) {
+      const element = elements.get(key);
+      if (!element) {
+        continue;
+      }
+      const margin = Number.parseFloat(getComputedStyle(element).scrollMarginTop) || 0;
+      if (element.getBoundingClientRect().top - margin > line + ACTIVATION_SLACK) {
+        break;
+      }
+      current = key;
+    }
+    return current;
+  }
+  function isScrolledToEnd() {
+    const box = scroller instanceof HTMLElement ? scroller : document.scrollingElement;
+    if (!box || box.scrollHeight <= box.clientHeight) {
+      return false;
+    }
+    return box.scrollTop + box.clientHeight >= box.scrollHeight - 1;
+  }
+  function onHashChange() {
+    const key = readHash();
+    if (key && elements.has(key)) {
+      scrollTo(key, { hash: false });
+    }
+  }
+  onMounted(() => {
+    focusRoot = params.root();
+    focusRoot?.addEventListener("focusin", onFocusIn);
+    scroller = findScroller(focusRoot);
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("hashchange", onHashChange);
+    const key = params.hash() ? readHash() : void 0;
+    if (key && elements.has(key)) {
+      void nextTick(() => scrollTo(key, { behavior: "instant", hash: false }));
+    } else {
+      pendingHash = key;
+      schedule();
+    }
+  });
+  onBeforeUnmount(() => {
+    focusRoot?.removeEventListener("focusin", onFocusIn);
+    scroller?.removeEventListener("scroll", onScroll);
+    window.removeEventListener("hashchange", onHashChange);
+    clearTimeout(settleTimer);
+    cancelAnimationFrame(holdFrame);
+    if (frame) {
+      cancelAnimationFrame(frame);
+    }
+  });
+  return { active, register, scrollTo };
+}
+function findScroller(element) {
+  for (let node = element; node; node = node.parentElement) {
+    if (/auto|scroll/u.test(getComputedStyle(node).overflowY)) {
+      return node;
+    }
+  }
+  return window;
+}
+function prefersReducedMotion() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+function readHash() {
+  const hash = window.location.hash.slice(1);
+  return hash ? decodeURIComponent(hash) : void 0;
+}
+function writeHash(key) {
+  const url = new URL(window.location.href);
+  url.hash = key;
+  window.history.replaceState(window.history.state, "", url);
+}

package/dist/runtime/form/composables/use-form-page.d.ts

@@ -0,0 +1,114 @@
+import type { FormPageSectionState } from '../types/index.js';
+import type { useFormRoot } from './use-form-root.js';
+/**
+ * State shared by a form page and its parts: the visible sections and where each stands, the
+ * section in view, the navigation summary, and the actions a part can take on a section.
+ */
+export declare function useFormPage(params: {
+    root: ReturnType<typeof useFormRoot>;
+    /** The page element, where the lookup of the scroll container starts. */
+    element: () => HTMLElement | null;
+    hash: () => boolean;
+}): {
+    active: import("vue").Ref<string | undefined, string | undefined>;
+    cancel: () => void;
+    dirtyCheck: import("vue").ComputedRef<boolean>;
+    items: import("vue").ComputedRef<{
+        entry: import("../types/index.js").FormPageSectionEntry;
+        section: FormPageSectionState;
+    }[]>;
+    modified: import("vue").ComputedRef<number>;
+    navigationTitle: import("vue").ComputedRef<string | undefined>;
+    register: (key: string, element: HTMLElement) => () => void;
+    remaining: import("vue").ComputedRef<number>;
+    resetSection: (key: string) => Promise<void>;
+    root: {
+        cancel: () => void;
+        contextError: import("vue").ComputedRef<string | undefined>;
+        contextLoading: import("vue").ComputedRef<boolean>;
+        contextPending: import("vue").ComputedRef<boolean>;
+        formUi: {
+            controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+            density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+            ui: import("vue").ComputedRef<import("../types/index.js").FormUiConfig>;
+        };
+        input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+        refreshContext: () => Promise<void>;
+        runtime: import("../types/index.js").FormRuntime;
+        schema: import("vue").ComputedRef<{}>;
+        submit: () => Promise<void>;
+        validationMode: import("vue").ComputedRef<import("../types/index.js").FormValidationMode>;
+    };
+    scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
+    sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
+    stickyOffset: import("vue").Ref<number, number>;
+};
+export declare function provideFormPage(page: ReturnType<typeof useFormPage>): {
+    active: import("vue").Ref<string | undefined, string | undefined>;
+    cancel: () => void;
+    dirtyCheck: import("vue").ComputedRef<boolean>;
+    items: import("vue").ComputedRef<{
+        entry: import("../types/index.js").FormPageSectionEntry;
+        section: FormPageSectionState;
+    }[]>;
+    modified: import("vue").ComputedRef<number>;
+    navigationTitle: import("vue").ComputedRef<string | undefined>;
+    register: (key: string, element: HTMLElement) => () => void;
+    remaining: import("vue").ComputedRef<number>;
+    resetSection: (key: string) => Promise<void>;
+    root: {
+        cancel: () => void;
+        contextError: import("vue").ComputedRef<string | undefined>;
+        contextLoading: import("vue").ComputedRef<boolean>;
+        contextPending: import("vue").ComputedRef<boolean>;
+        formUi: {
+            controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+            density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+            ui: import("vue").ComputedRef<import("../types/index.js").FormUiConfig>;
+        };
+        input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+        refreshContext: () => Promise<void>;
+        runtime: import("../types/index.js").FormRuntime;
+        schema: import("vue").ComputedRef<{}>;
+        submit: () => Promise<void>;
+        validationMode: import("vue").ComputedRef<import("../types/index.js").FormValidationMode>;
+    };
+    scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
+    sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
+    stickyOffset: import("vue").Ref<number, number>;
+};
+/** The page a part renders in. Parts only work inside `FormPage`. */
+export declare function useFormPageContext(): {
+    active: import("vue").Ref<string | undefined, string | undefined>;
+    cancel: () => void;
+    dirtyCheck: import("vue").ComputedRef<boolean>;
+    items: import("vue").ComputedRef<{
+        entry: import("../types/index.js").FormPageSectionEntry;
+        section: FormPageSectionState;
+    }[]>;
+    modified: import("vue").ComputedRef<number>;
+    navigationTitle: import("vue").ComputedRef<string | undefined>;
+    register: (key: string, element: HTMLElement) => () => void;
+    remaining: import("vue").ComputedRef<number>;
+    resetSection: (key: string) => Promise<void>;
+    root: {
+        cancel: () => void;
+        contextError: import("vue").ComputedRef<string | undefined>;
+        contextLoading: import("vue").ComputedRef<boolean>;
+        contextPending: import("vue").ComputedRef<boolean>;
+        formUi: {
+            controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+            density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+            ui: import("vue").ComputedRef<import("../types/index.js").FormUiConfig>;
+        };
+        input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+        refreshContext: () => Promise<void>;
+        runtime: import("../types/index.js").FormRuntime;
+        schema: import("vue").ComputedRef<{}>;
+        submit: () => Promise<void>;
+        validationMode: import("vue").ComputedRef<import("../types/index.js").FormValidationMode>;
+    };
+    scrollTo: (key: string, options?: import("../types/index.js").FormPageScrollOptions) => boolean;
+    sections: import("vue").ComputedRef<readonly FormPageSectionState[]>;
+    stickyOffset: import("vue").Ref<number, number>;
+};

package/dist/runtime/form/composables/use-form-page.js

@@ -0,0 +1,83 @@
+import { computed, inject, provide, ref } from "vue";
+import { getSchemaDirtyCheck } from "../utils/controls.js";
+import {
+  getFormPageNavigationTitle,
+  getFormPageSections,
+  isFormPageSectionVisible,
+  resolveFormPageSectionState
+} from "../utils/page.js";
+import { cloneFormValue } from "../utils/path.js";
+import { useFormPageScroll } from "./use-form-page-scroll.js";
+export function useFormPage(params) {
+  const { root } = params;
+  const { runtime } = root;
+  const entries = computed(
+    () => getFormPageSections(root.schema.value).filter(
+      (entry) => isFormPageSectionVisible(entry, runtime)
+    )
+  );
+  const requiredEnforced = computed(
+    () => root.validationMode.value === true || root.validationMode.value === "required"
+  );
+  const items = computed(
+    () => entries.value.map((entry, index) => ({
+      entry,
+      section: resolveFormPageSectionState({
+        entry,
+        index,
+        input: root.input.value,
+        requiredEnforced: requiredEnforced.value,
+        runtime
+      })
+    }))
+  );
+  const sections = computed(
+    () => items.value.map((item) => item.section)
+  );
+  const dirtyCheck = computed(() => getSchemaDirtyCheck(root.schema.value));
+  const navigationTitle = computed(() => getFormPageNavigationTitle(root.schema.value));
+  const remaining = computed(
+    () => sections.value.filter((section) => !section.optional && section.status !== "complete").length
+  );
+  const modified = computed(() => sections.value.filter((section) => section.dirty).length);
+  const stickyOffset = ref(0);
+  const scroll = useFormPageScroll({ hash: params.hash, root: params.element, sections });
+  async function resetSection(key) {
+    const section = sections.value.find((candidate) => candidate.key === key);
+    if (!section) {
+      return;
+    }
+    for (const path of section.dirtyPaths) {
+      runtime.setValue(path, cloneFormValue(runtime.getInitialValue(path)));
+      runtime.clearError(path);
+    }
+    await runtime.settleEffects();
+  }
+  return {
+    active: scroll.active,
+    cancel: root.cancel,
+    dirtyCheck,
+    items,
+    modified,
+    navigationTitle,
+    register: scroll.register,
+    remaining,
+    resetSection,
+    root,
+    scrollTo: scroll.scrollTo,
+    sections,
+    stickyOffset
+  };
+}
+const formPageKey = Symbol("nuxt-ui-tools-form-page");
+export function provideFormPage(page) {
+  provide(formPageKey, page);
+  return page;
+}
+export function useFormPageContext() {
+  const page = inject(formPageKey, null);
+  if (!page) {
+    throw new Error("Form page parts must be rendered inside <FormPage>.");
+  }
+  return page;
+}

package/dist/runtime/form/composables/use-form-root.d.ts

@@ -0,0 +1,34 @@
+import type { FormObject, FormRendererController, FormSubmitHandlerResult, FormUiConfig, FormValidationMode, FormValue } from '../types/index.js';
+export interface UseFormRootParams {
+    /** Controller from `useForm`. Its schema, input, and policies win over the direct ones. */
+    form: () => FormRendererController | undefined;
+    schema: () => FormValue;
+    input: () => FormObject | undefined;
+    syncInput: () => boolean | readonly string[] | undefined;
+    validate: () => FormValidationMode | undefined;
+    ui: () => FormUiConfig | undefined;
+    onSubmitted: (value: FormObject, result: FormSubmitHandlerResult<FormValue>) => void;
+    onCancelled: (value: FormObject) => void;
+}
+/**
+ * Root of a rendered form. It creates the runtime and binds it to the controller, provides the
+ * runtime and the presentation config to the fields, guards navigation away from a dirty form,
+ * and owns submit and cancel. `<NutForm>` and `FormPage` both render from it.
+ */
+export declare function useFormRoot(params: UseFormRootParams): {
+    cancel: () => void;
+    contextError: import("vue").ComputedRef<string | undefined>;
+    contextLoading: import("vue").ComputedRef<boolean>;
+    contextPending: import("vue").ComputedRef<boolean>;
+    formUi: {
+        controlSize: import("vue").ComputedRef<import("../types/index.js").FormControlSize>;
+        density: import("vue").ComputedRef<import("../types/index.js").FormDensity>;
+        ui: import("vue").ComputedRef<FormUiConfig>;
+    };
+    input: import("vue").ComputedRef<import("../../shared/index.js").GenericObject | undefined>;
+    refreshContext: () => Promise<void>;
+    runtime: import("../types/index.js").FormRuntime;
+    schema: import("vue").ComputedRef<{}>;
+    submit: () => Promise<void>;
+    validationMode: import("vue").ComputedRef<FormValidationMode>;
+};

package/dist/runtime/form/composables/use-form-root.js

@@ -0,0 +1,171 @@
+import { useAppConfig } from "nuxt/app";
+import { computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useUiToolsLocale } from "../../i18n/use-locale.js";
+import {
+  getSchemaAutoFocus,
+  getSchemaDirtyNavigation,
+  getSchemaSyncInput,
+  getSchemaUi,
+  getSchemaValidationMode
+} from "../utils/controls.js";
+import { isRecord } from "../utils/path.js";
+import { isString, isUndefined, stringArray } from "../utils/predicate.js";
+import { collectFormFieldsPaths } from "../utils/state.js";
+import { resolveFormText } from "../utils/text.js";
+import { mergeFormUi, resolveAppFormUi } from "../utils/ui.js";
+import { provideFormRuntime, useFormRuntime } from "./use-form-runtime.js";
+import { provideFormUi } from "./use-form-ui.js";
+const DEFAULT_DIRTY_NAVIGATION_MESSAGE = "You have unsaved changes. Close this form?";
+export function useFormRoot(params) {
+  const router = useRouter();
+  const { t } = useUiToolsLocale();
+  const appConfig = useAppConfig();
+  const schema = computed(() => params.form()?.schema.value ?? params.schema() ?? {});
+  const formUi = provideFormUi(
+    computed(
+      () => mergeFormUi(resolveAppFormUi(appConfig), getSchemaUi(schema.value), params.ui())
+    )
+  );
+  const input = computed(() => params.form()?.input.value ?? params.input());
+  const syncInput = computed(
+    () => params.form()?.syncInput.value ?? params.syncInput() ?? getSchemaSyncInput(schema.value)
+  );
+  const validationMode = computed(
+    () => params.form()?.validationMode.value ?? params.validate() ?? getSchemaValidationMode(schema.value)
+  );
+  const runtime = useFormRuntime({ input, schema, syncInput, validationMode });
+  provideFormRuntime(runtime);
+  watch(
+    params.form,
+    (controller, previousController) => {
+      previousController?.unbind(runtime);
+      controller?.bind(runtime);
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => params.form()?.unbind(runtime));
+  onMounted(async () => {
+    await nextTick();
+    const target = getSchemaAutoFocus(schema.value);
+    if (isString(target)) {
+      await runtime.focusField(target);
+      return;
+    }
+    if (target === true) {
+      await focusFirstField();
+    }
+  });
+  if (import.meta.client) {
+    let handleBeforeUnload = function(event) {
+      if (!shouldConfirmDirtyNavigation()) {
+        return;
+      }
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    onBeforeUnmount(() => window.removeEventListener("beforeunload", handleBeforeUnload));
+  }
+  const removeRouteGuard = router.beforeEach((to, from) => {
+    if (runtime.actionPending.value === "submit" || isSameDocument(to, from)) {
+      return true;
+    }
+    if (!shouldConfirmDirtyNavigation()) {
+      return true;
+    }
+    return window.confirm(getDirtyNavigationMessage());
+  });
+  onBeforeUnmount(removeRouteGuard);
+  const contextPending = computed(
+    () => Object.values(runtime.context).some(
+      (resource) => "pending" in resource && resource.pending && isUndefined(resource.value)
+    )
+  );
+  const contextLoading = computed(
+    () => Object.values(runtime.context).some((resource) => "loading" in resource && resource.loading)
+  );
+  const contextError = computed(() => {
+    for (const resource of Object.values(runtime.context)) {
+      if (!("error" in resource) || !resource.error) {
+        continue;
+      }
+      if (resource.error instanceof Error) {
+        return resource.error.message;
+      }
+      if (isString(resource.error)) {
+        return resource.error;
+      }
+      return t("form.states.contextError.description");
+    }
+    return void 0;
+  });
+  async function refreshContext() {
+    await Promise.all(
+      Object.values(runtime.context).flatMap(
+        (resource) => "refresh" in resource ? [resource.refresh()] : []
+      )
+    );
+  }
+  async function submit() {
+    const controller = params.form();
+    const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
+    if (result.success) {
+      params.onSubmitted(runtime.output.value, result);
+    }
+  }
+  function cancel() {
+    if (shouldConfirmDirtyNavigation() && !window.confirm(getDirtyNavigationMessage())) {
+      return;
+    }
+    params.onCancelled(runtime.output.value);
+  }
+  function shouldConfirmDirtyNavigation() {
+    if (!runtime.isDirty.value) {
+      return false;
+    }
+    const config = getSchemaDirtyNavigation(schema.value);
+    if (!config) {
+      return false;
+    }
+    if (!isRecord(config)) {
+      return config === true;
+    }
+    const ignored = stringArray(config.ignorePaths);
+    return runtime.dirtyPaths.value.some(
+      (path) => !ignored.some((ignoredPath) => path === ignoredPath || path.startsWith(`${ignoredPath}.`))
+    );
+  }
+  function getDirtyNavigationMessage() {
+    const config = getSchemaDirtyNavigation(schema.value);
+    if (!isRecord(config)) {
+      return DEFAULT_DIRTY_NAVIGATION_MESSAGE;
+    }
+    const message = Object.getOwnPropertyDescriptor(config, "message")?.value;
+    return resolveFormText(message) ?? DEFAULT_DIRTY_NAVIGATION_MESSAGE;
+  }
+  async function focusFirstField() {
+    const parentPath = runtime.currentStepRoot.value ? [runtime.currentStepRoot.value] : [];
+    for (const path of collectFormFieldsPaths(runtime.currentFields.value, parentPath)) {
+      if (await runtime.focusField(path)) {
+        return;
+      }
+    }
+  }
+  return {
+    cancel,
+    contextError,
+    contextLoading,
+    contextPending,
+    formUi,
+    input,
+    refreshContext,
+    runtime,
+    schema,
+    submit,
+    validationMode
+  };
+}
+function isSameDocument(to, from) {
+  return to.fullPath.split("#")[0] === from.fullPath.split("#")[0];
+}

package/dist/runtime/form/composables/use-form-runtime.js

@@ -137,7 +137,7 @@ export function useFormRuntime(params) {
     }
     return valid;
   }
-  const submit = useFormSubmission({
+  const submission = useFormSubmission({
     beforeNext: () => isStepped.value ? runBeforeNext() : Promise.resolve(true),
     focusFirstInvalid: focus.focusFirstInvalid,
     getApi: () => createPublicFormApi(runtime),
@@ -146,6 +146,13 @@ export function useFormRuntime(params) {
     getSchema: () => params.schema.value,
     validate
   });
+  async function submitHandler(externalSubmitHandler) {
+    const result = await submission.submitHandler(externalSubmitHandler);
+    if (result.success) {
+      state.rebaseline();
+    }
+    return result;
+  }
   let hasInitializedInput = !isUndefined(params.input?.value);
   state.initialize(params.input?.value);
   let pendingInput;
@@ -221,7 +228,9 @@ export function useFormRuntime(params) {
   const isLastStep = computed(() => currentStepIndex.value >= steps.value.length - 1);
   const canGoPrevious = computed(() => isStepped.value && !isFirstStep.value);
   const canGoNext = computed(() => isStepped.value && !isLastStep.value);
-  const actionPending = computed(() => navigationActionPending.value ?? submit.actionPending.value);
+  const actionPending = computed(
+    () => navigationActionPending.value ?? submission.actionPending.value
+  );
   async function runBeforeNext() {
     const handler = getSchemaLifecycleHandler(params.schema.value, "onBeforeNext");
     if (!handler) {
@@ -433,10 +442,10 @@ export function useFormRuntime(params) {
     state: state.state,
     steps,
     submit: async () => {
-      const result = await submit.submitHandler();
+      const result = await submitHandler();
       return result.success;
     },
-    submitHandler: submit.submitHandler,
+    submitHandler,
     trackEffect: effects.track,
     validate,
     validateCurrentStep

package/dist/runtime/form/composables/use-form.js

@@ -1,6 +1,6 @@
 import { computed, shallowRef, toValue } from "vue";
-import { isRecord } from "../utils/path.js";
-import { isBoolean, isUndefined, stringArray } from "../utils/predicate.js";
+import { getSchemaSyncInput, getSchemaValidationMode } from "../utils/controls.js";
+import { isUndefined } from "../utils/predicate.js";
 export function useForm(params) {
   const runtime = shallowRef(null);
   const schema = computed(() => toValue(params.schema));
@@ -151,23 +151,3 @@ export function useForm(params) {
     validationMode
   };
 }
-function getSchemaSyncInput(schema) {
-  const controls = getSchemaControls(schema);
-  const value = controls ? Object.getOwnPropertyDescriptor(controls, "syncInput")?.value : void 0;
-  if (isBoolean(value)) {
-    return value;
-  }
-  return stringArray(value);
-}
-function getSchemaValidationMode(schema) {
-  const controls = getSchemaControls(schema);
-  const value = controls ? Object.getOwnPropertyDescriptor(controls, "validate")?.value : void 0;
-  return value === false || value === "required" || value === "validators" ? value : true;
-}
-function getSchemaControls(schema) {
-  if (!isRecord(schema)) {
-    return;
-  }
-  const controls = Object.getOwnPropertyDescriptor(schema, "controls")?.value;
-  return isRecord(controls) ? controls : void 0;
-}