nuxt-ui-tools 1.2.0 → 1.4.0

package/dist/runtime/form/components/page/form-page-sections.vue

@@ -0,0 +1,75 @@
+<script setup>
+import UAlert from "@nuxt/ui/components/Alert.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import USkeleton from "@nuxt/ui/components/Skeleton.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFormPageContext } from "../../composables/use-form-page";
+import { useFormUi } from "../../composables/use-form-ui";
+import { mergeFormUiClass } from "../../utils/ui";
+import FormPageSection from "./form-page-section.vue";
+defineSlots();
+const page = useFormPageContext();
+const formUi = useFormUi();
+const { t } = useUiToolsLocale();
+const pageUi = computed(() => formUi.ui.value.page?.ui);
+const { contextError, contextLoading, contextPending, refreshContext } = page.root;
+</script>
+
+<template>
+  <div
+    :class="mergeFormUiClass('flex min-w-0 flex-col gap-[18px]', pageUi?.sections)"
+    data-form-page-sections
+  >
+    <UAlert
+      v-if="contextError"
+      color="error"
+      variant="soft"
+      icon="i-lucide-circle-alert"
+      :title="t('form.states.contextError.title')"
+      :description="contextError"
+    >
+      <template #actions>
+        <UButton
+          type="button"
+          color="error"
+          variant="outline"
+          size="xs"
+          :loading="contextLoading"
+          @click="refreshContext"
+        >
+          {{ t("form.states.contextError.action") }}
+        </UButton>
+      </template>
+    </UAlert>
+    <template v-if="contextPending">
+      <div
+        v-for="section in page.sections.value"
+        :key="section.key"
+        :class="
+  mergeFormUiClass(
+    'grid gap-4 rounded-xl border border-default bg-default px-6 pt-[22px] pb-6',
+    pageUi?.sectionSkeleton
+  )
+"
+        data-form-skeleton
+      >
+        <USkeleton class="h-5 w-40" />
+        <USkeleton class="h-9 w-full" />
+        <USkeleton class="h-9 w-2/3" />
+      </div>
+    </template>
+    <template v-else>
+      <FormPageSection
+        v-for="item in page.items.value"
+        :key="item.section.key"
+        :entry="item.entry"
+        :section="item.section"
+      >
+        <template v-if="$slots.actions" #actions="slotProps">
+          <slot name="actions" v-bind="slotProps" />
+        </template>
+      </FormPageSection>
+    </template>
+  </div>
+</template>

package/dist/runtime/form/components/page/form-page-sections.vue.d.ts

@@ -0,0 +1,21 @@
+import type { FormPageSectionState } from '../../types/index.js';
+/**
+ * Cards of a form page, one per visible section, each with its title, description, fields, and,
+ * with `controls.dirtyCheck`, a ring and a reset button while it is modified. Skeleton cards
+ * stand in while the schema context loads.
+ */
+type __VLS_Slots = {
+    /** Extra buttons in a section header, before its reset button. */
+    actions?: (props: {
+        section: FormPageSectionState;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/components/page/form-page.d.vue.ts

@@ -0,0 +1,80 @@
+import type { FormPageSectionState, FormRendererController, FormUiConfig, FormValue } from '../../types/index.js';
+/**
+ * A form laid out as a page: a header with the title and the actions, a navigation that follows
+ * the section in view, and one card per section. Render a schema from `defineFormPageSchema`.
+ *
+ * The page scrolls on its own, so give it a height (`h-full` in a layout that sizes its main
+ * area). Put parts in the default slot to compose another layout: `FormPageHeader`,
+ * `FormPageNavigation`, `FormPageSections`, and `FormPageActions` read the page they render in.
+ *
+ * @example
+ * ```vue
+ * <!-- const form = useForm({ schema: accountFormSchema(), onSubmit: createAccount }) -->
+ * <UiFormPage :form />
+ *
+ * <UiFormPage :form>
+ *   <UiFormPageHeader />
+ *   <div class="grid grid-cols-[minmax(0,1fr)_240px] gap-6 p-6">
+ *     <UiFormPageSections />
+ *     <UiFormPageNavigation />
+ *   </div>
+ * </UiFormPage>
+ * ```
+ */
+type __VLS_Props = {
+    form: FormRendererController;
+    /**
+     * Records the section picked in the navigation in the URL hash (`#identity`), and opens the
+     * page on the section the hash names. Defaults to `true`.
+     */
+    hash?: boolean;
+    /** Presentation overrides, merged after the app config and the schema `ui`. */
+    ui?: FormUiConfig;
+};
+type __VLS_Slots = {
+    /** Replaces the whole layout with parts of the page. */
+    default?: () => unknown;
+    /** Slots of the default header: see `FormPageHeader`. */
+    'header-leading'?: () => unknown;
+    'header-eyebrow'?: () => unknown;
+    'header-title'?: () => unknown;
+    'header-description'?: () => unknown;
+    'header-actions'?: () => unknown;
+    /** Slots of the default navigation: see `FormPageNavigation`. */
+    'navigation-title'?: () => unknown;
+    'navigation-item'?: (props: {
+        section: FormPageSectionState;
+        active: boolean;
+        select: () => void;
+    }) => unknown;
+    'navigation-footer'?: (props: {
+        sections: readonly FormPageSectionState[];
+        remaining: number;
+        modified: number;
+    }) => unknown;
+    /** Extra buttons in a section header: see `FormPageSections`. */
+    'section-actions'?: (props: {
+        section: FormPageSectionState;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (value: import("../../../shared/index.js").GenericObject, result: {
+        success: boolean;
+        data?: FormValue;
+    }) => any;
+    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((value: import("../../../shared/index.js").GenericObject, result: {
+        success: boolean;
+        data?: FormValue;
+    }) => any) | undefined;
+    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/components/page/form-page.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { provideFormPage, useFormPage } from "../../composables/use-form-page";
+import { useFormRoot } from "../../composables/use-form-root";
+import { mergeFormUiClass } from "../../utils/ui";
+import FormPageHeader from "./form-page-header.vue";
+import FormPageNavigation from "./form-page-navigation.vue";
+import FormPageSections from "./form-page-sections.vue";
+const {
+  form,
+  hash = true,
+  ui = void 0
+} = defineProps({
+  form: { type: Object, required: true },
+  hash: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["submit", "cancel"]);
+defineSlots();
+const element = useTemplateRef("element");
+const root = useFormRoot({
+  form: () => form,
+  input: () => void 0,
+  onCancelled: (value) => emit("cancel", value),
+  onSubmitted: (value, result) => emit("submit", value, result),
+  schema: () => void 0,
+  syncInput: () => void 0,
+  ui: () => ui,
+  validate: () => void 0
+});
+const page = provideFormPage(useFormPage({ element: () => element.value, hash: () => hash, root }));
+const pageUi = computed(() => root.formUi.ui.value.page?.ui);
+</script>
+
+<template>
+  <form
+    ref="element"
+    novalidate
+    :class="
+  mergeFormUiClass('@container/form-page h-full min-w-0 overflow-y-auto bg-muted', pageUi?.root)
+"
+    :style="{ '--nut-form-page-header': `${page.stickyOffset.value}px` }"
+    data-form-page
+    @submit.prevent="root.submit"
+  >
+    <slot>
+      <FormPageHeader>
+        <template v-if="$slots['header-leading']" #leading>
+          <slot name="header-leading" />
+        </template>
+        <template v-if="$slots['header-eyebrow']" #eyebrow>
+          <slot name="header-eyebrow" />
+        </template>
+        <template v-if="$slots['header-title']" #title>
+          <slot name="header-title" />
+        </template>
+        <template v-if="$slots['header-description']" #description>
+          <slot name="header-description" />
+        </template>
+        <template v-if="$slots['header-actions']" #actions>
+          <slot name="header-actions" />
+        </template>
+      </FormPageHeader>
+      <div
+        :class="
+  mergeFormUiClass(
+    'grid gap-4 px-4 pt-4 pb-16 @3xl/form-page:grid-cols-[200px_minmax(0,1fr)] @3xl/form-page:items-start @3xl/form-page:gap-7 @3xl/form-page:px-7 @3xl/form-page:pt-6 @3xl/form-page:pb-20 @5xl/form-page:grid-cols-[230px_minmax(0,760px)]',
+    pageUi?.body
+  )
+"
+      >
+        <FormPageNavigation>
+          <template v-if="$slots['navigation-title']" #title>
+            <slot name="navigation-title" />
+          </template>
+          <template v-if="$slots['navigation-item']" #item="slotProps">
+            <slot name="navigation-item" v-bind="slotProps" />
+          </template>
+          <template v-if="$slots['navigation-footer']" #footer="slotProps">
+            <slot name="navigation-footer" v-bind="slotProps" />
+          </template>
+        </FormPageNavigation>
+        <FormPageSections>
+          <template v-if="$slots['section-actions']" #actions="slotProps">
+            <slot name="section-actions" v-bind="slotProps" />
+          </template>
+        </FormPageSections>
+      </div>
+    </slot>
+  </form>
+</template>

package/dist/runtime/form/components/page/form-page.vue.d.ts

@@ -0,0 +1,80 @@
+import type { FormPageSectionState, FormRendererController, FormUiConfig, FormValue } from '../../types/index.js';
+/**
+ * A form laid out as a page: a header with the title and the actions, a navigation that follows
+ * the section in view, and one card per section. Render a schema from `defineFormPageSchema`.
+ *
+ * The page scrolls on its own, so give it a height (`h-full` in a layout that sizes its main
+ * area). Put parts in the default slot to compose another layout: `FormPageHeader`,
+ * `FormPageNavigation`, `FormPageSections`, and `FormPageActions` read the page they render in.
+ *
+ * @example
+ * ```vue
+ * <!-- const form = useForm({ schema: accountFormSchema(), onSubmit: createAccount }) -->
+ * <UiFormPage :form />
+ *
+ * <UiFormPage :form>
+ *   <UiFormPageHeader />
+ *   <div class="grid grid-cols-[minmax(0,1fr)_240px] gap-6 p-6">
+ *     <UiFormPageSections />
+ *     <UiFormPageNavigation />
+ *   </div>
+ * </UiFormPage>
+ * ```
+ */
+type __VLS_Props = {
+    form: FormRendererController;
+    /**
+     * Records the section picked in the navigation in the URL hash (`#identity`), and opens the
+     * page on the section the hash names. Defaults to `true`.
+     */
+    hash?: boolean;
+    /** Presentation overrides, merged after the app config and the schema `ui`. */
+    ui?: FormUiConfig;
+};
+type __VLS_Slots = {
+    /** Replaces the whole layout with parts of the page. */
+    default?: () => unknown;
+    /** Slots of the default header: see `FormPageHeader`. */
+    'header-leading'?: () => unknown;
+    'header-eyebrow'?: () => unknown;
+    'header-title'?: () => unknown;
+    'header-description'?: () => unknown;
+    'header-actions'?: () => unknown;
+    /** Slots of the default navigation: see `FormPageNavigation`. */
+    'navigation-title'?: () => unknown;
+    'navigation-item'?: (props: {
+        section: FormPageSectionState;
+        active: boolean;
+        select: () => void;
+    }) => unknown;
+    'navigation-footer'?: (props: {
+        sections: readonly FormPageSectionState[];
+        remaining: number;
+        modified: number;
+    }) => unknown;
+    /** Extra buttons in a section header: see `FormPageSections`. */
+    'section-actions'?: (props: {
+        section: FormPageSectionState;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (value: import("../../../shared/index.js").GenericObject, result: {
+        success: boolean;
+        data?: FormValue;
+    }) => any;
+    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((value: import("../../../shared/index.js").GenericObject, result: {
+        success: boolean;
+        data?: FormValue;
+    }) => any) | undefined;
+    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/components/renderer/form-field-shell.vue

@@ -10,8 +10,8 @@ import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { useFormFieldBare } from "../../composables/use-form-field-chrome";
 import { useFormRuntimeContext } from "../../composables/use-form-runtime";
 import { useFormUi } from "../../composables/use-form-ui";
+import { getSchemaDirtyCheck } from "../../utils/controls";
 import { createFormFieldInstance } from "../../utils/field-instance";
-import { isRecord } from "../../utils/path";
 import { isFunction, isNumber, isString } from "../../utils/predicate";
 import { resolveRequired } from "../../utils/state";
 import { resolveFieldDescription, resolveFormText } from "../../utils/text";
@@ -85,21 +85,17 @@ const help = computed(
 );
 const shellHelp = computed(() => props.inlineLabel ? void 0 : help.value);
 const dirty = computed(
-  () => "dirtyCheck" in props.field && (props.field.dirtyCheck === true || schemaDirtyCheck()) && form.dirtyPaths.value.includes(props.path.join("."))
+  () => "dirtyCheck" in props.field && (props.field.dirtyCheck === true || getSchemaDirtyCheck(form.schema.value)) && form.dirtyPaths.value.includes(props.path.join("."))
 );
-function schemaDirtyCheck() {
-  const schema = form.schema.value;
-  if (!isRecord(schema) || !isRecord(schema.controls)) {
-    return false;
-  }
-  return schema.controls.dirtyCheck === true;
-}
 const open = ref(!("collapsed" in props.field && props.field.collapsed === true));
 const collapsible = computed(() => "collapsible" in props.field && props.field.collapsible === true);
 const fieldUi = computed(() => formUi.ui.value.field?.ui);
+const stacked = computed(
+  () => orientation.value === "vertical" && Boolean(shellLabel.value || shellDescription.value)
+);
 const nuxtFieldUi = computed(() => ({
   container: mergeFormUiClass(
-    orientation.value === "horizontal" ? "min-w-0 flex-1" : void 0,
+    orientation.value === "horizontal" ? "min-w-0 flex-1" : stacked.value ? "mt-0" : void 0,
     fieldUi.value?.container
   ),
   description: fieldUi.value?.description,
@@ -111,7 +107,7 @@ const nuxtFieldUi = computed(() => ({
     orientation.value === "horizontal" && labelWidth.value ? "w-(--nut-form-label-width) shrink-0" : void 0,
     fieldUi.value?.labelWrapper
   ),
-  root: fieldUi.value?.root,
+  root: mergeFormUiClass(stacked.value ? "flex flex-col gap-1.5" : void 0, fieldUi.value?.root),
   wrapper: fieldUi.value?.wrapper
 }));
 function resetField() {

package/dist/runtime/form/components/root/form.vue

@@ -4,27 +4,17 @@ import UBadge from "@nuxt/ui/components/Badge.vue";
 import UButton from "@nuxt/ui/components/Button.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
 import { useScrollShadow } from "@nuxt/ui/composables/useScrollShadow";
-import { useAppConfig } from "nuxt/app";
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { useRouter } from "vue-router";
+import { computed, nextTick, ref, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useFormActions } from "../../composables/use-form-actions";
 import { useFormGridLayout } from "../../composables/use-form-layout";
-import { provideFormRuntime, useFormRuntime } from "../../composables/use-form-runtime";
-import { provideFormUi } from "../../composables/use-form-ui";
+import { useFormRoot } from "../../composables/use-form-root";
 import { getFormHeader } from "../../utils/overlay";
 import { isRecord } from "../../utils/path";
-import {
-  isBoolean,
-  isFunction,
-  isNumber,
-  isString,
-  isUndefined,
-  stringArray
-} from "../../utils/predicate";
+import { isFunction, isNumber, isString } from "../../utils/predicate";
 import { getSchemaFields, getSchemaSteps, isSteppedSchema } from "../../utils/state";
 import { resolveFormText } from "../../utils/text";
-import { mergeFormUi, mergeFormUiClass, resolveAppFormUi } from "../../utils/ui";
+import { mergeFormUiClass } from "../../utils/ui";
 import FormActions from "../actions/form-actions.vue";
 import FormFieldRenderer from "../renderer/form-field-renderer.vue";
 import FormDirectionalTransition from "../utils/form-directional-transition.vue";
@@ -38,68 +28,28 @@ const props = defineProps({
   showCloseButton: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
-const router = useRouter();
 const emit = defineEmits(["submit", "cancel"]);
 const { t } = useUiToolsLocale();
-const schemaRef = computed(() => props.form?.schema.value ?? props.schema ?? {});
-const appConfig = useAppConfig();
-const formUi = provideFormUi(
-  computed(
-    () => mergeFormUi(resolveAppFormUi(appConfig), getSchemaUi(schemaRef.value), props.ui)
-  )
-);
-const inputRef = computed(() => props.form?.input.value ?? props.input);
-const syncInputRef = computed(
-  () => props.form?.syncInput.value ?? props.syncInput ?? getSchemaSyncInput(schemaRef.value)
-);
-const validationModeRef = computed(
-  () => props.form?.validationMode.value ?? props.validate ?? getSchemaValidationMode(schemaRef.value)
-);
-const runtime = useFormRuntime({
-  input: inputRef,
+const {
+  cancel,
+  contextError,
+  contextLoading,
+  contextPending,
+  formUi,
+  refreshContext,
+  runtime,
   schema: schemaRef,
-  syncInput: syncInputRef,
-  validationMode: validationModeRef
+  submit
+} = useFormRoot({
+  form: () => props.form,
+  input: () => props.input,
+  onCancelled: (value) => emit("cancel", value),
+  onSubmitted: (value, result) => emit("submit", value, result),
+  schema: () => props.schema,
+  syncInput: () => props.syncInput,
+  ui: () => props.ui,
+  validate: () => props.validate
 });
-provideFormRuntime(runtime);
-watch(
-  () => props.form,
-  (controller, previousController) => {
-    previousController?.unbind(runtime);
-    controller?.bind(runtime);
-  },
-  { immediate: true }
-);
-onBeforeUnmount(() => props.form?.unbind(runtime));
-onMounted(async () => {
-  await nextTick();
-  const target = getSchemaAutoFocus(schemaRef.value);
-  if (isString(target)) {
-    await runtime.focusField(target);
-    return;
-  }
-  if (target === true) {
-    await focusFirstRenderedField();
-  }
-});
-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(() => {
-  if (!shouldConfirmDirtyNavigation()) {
-    return true;
-  }
-  return window.confirm(getDirtyNavigationMessage());
-});
-onBeforeUnmount(removeRouteGuard);
 const viewportRef = ref(null);
 const viewportShadow = useScrollShadow(viewportRef, { size: 20 });
 const displayedStepIndex = ref(runtime.currentStepIndex.value);
@@ -114,9 +64,6 @@ watch(
     });
   }
 );
-const parentPath = computed(
-  () => runtime.currentStepRoot.value ? [runtime.currentStepRoot.value] : []
-);
 const displayedStep = computed(
   () => isSteppedSchema(schemaRef.value) ? getSchemaSteps(schemaRef.value)[displayedStepIndex.value] : void 0
 );
@@ -163,60 +110,14 @@ const viewportClass = computed(
 );
 const footerClass = computed(
   () => mergeFormUiClass(
-    isOverlayShell.value ? "flex shrink-0 items-center justify-between gap-3 border-t border-default bg-default px-[22px] pt-3.5 pb-[18px]" : "flex items-center justify-between gap-3 border-t border-default pt-4",
+    isOverlayShell.value ? "flex shrink-0 items-center justify-between gap-3 border-t border-default bg-default px-[22px] pt-3.5 pb-[18px]" : "flex items-center justify-between gap-3",
     formUi.ui.value.root?.ui?.footer
   )
 );
-const actions = useFormActions({ runtime, shell });
-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;
+const actions = useFormActions({
+  runtime,
+  slot: () => shell.value === "inline" ? "left" : "right"
 });
-async function submit() {
-  if (props.form) {
-    const result2 = await props.form.submitHandler();
-    if (result2.success) {
-      emit("submit", runtime.output.value, result2);
-    }
-    return;
-  }
-  const result = await runtime.submitHandler();
-  if (result.success) {
-    emit("submit", runtime.output.value, result);
-  }
-}
-async function refreshContext() {
-  await Promise.all(
-    Object.values(runtime.context).flatMap(
-      (resource) => "refresh" in resource ? [resource.refresh()] : []
-    )
-  );
-}
-function cancel() {
-  if (shouldConfirmDirtyNavigation() && !window.confirm(getDirtyNavigationMessage())) {
-    return;
-  }
-  emit("cancel", runtime.output.value);
-}
 defineExpose({
   actionPending: runtime.actionPending,
   dirtyPaths: runtime.dirtyPaths,
@@ -268,13 +169,6 @@ function headerDisplayed(display, currentShell) {
 function isRenderShell(value) {
   return value === "inline" || value === "drawer" || value === "modal" || value === "fullscreen";
 }
-function getSchemaUi(schema) {
-  if (!isRecord(schema)) {
-    return void 0;
-  }
-  const value = Object.getOwnPropertyDescriptor(schema, "ui")?.value;
-  return isRecord(value) ? value : void 0;
-}
 function getSchemaShowStepper(schema) {
   if (!isRecord(schema)) {
     return true;
@@ -282,69 +176,6 @@ function getSchemaShowStepper(schema) {
   const value = Object.getOwnPropertyDescriptor(schema, "showStepper")?.value;
   return value !== false;
 }
-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;
-}
-function getSchemaAutoFocus(schema) {
-  const controls = getSchemaControls(schema);
-  const value = controls ? Object.getOwnPropertyDescriptor(controls, "autoFocus")?.value : void 0;
-  return isString(value) || isBoolean(value) ? value : false;
-}
-function dirtyNavigationConfig() {
-  const controls = getSchemaControls(schemaRef.value);
-  return controls ? Object.getOwnPropertyDescriptor(controls, "confirmNavOnDirty")?.value : void 0;
-}
-function shouldConfirmDirtyNavigation() {
-  if (!runtime.isDirty.value) {
-    return false;
-  }
-  const config = dirtyNavigationConfig();
-  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 = dirtyNavigationConfig();
-  if (!isRecord(config)) {
-    return "You have unsaved changes. Close this form?";
-  }
-  const message = Object.getOwnPropertyDescriptor(config, "message")?.value;
-  return resolveFormText(message) ?? "You have unsaved changes. Close this form?";
-}
-async function focusFirstRenderedField() {
-  const paths = runtime.currentFields.value.map(
-    (field) => `${parentPath.value.join(".")}${parentPath.value.length ? "." : ""}${field.key}`
-  );
-  for (const path of paths) {
-    if (await runtime.focusField(path)) {
-      return;
-    }
-  }
-}
 </script>
 
 <template>