nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -0,0 +1,24 @@
+<script setup>
+import { computed, watch } from "vue";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+const props = defineProps({
+  path: { type: Array, required: true }
+});
+const emit = defineEmits(["invalid"]);
+const form = useFormRuntimeContext();
+const prefix = computed(() => `${props.path.join(".")}.`);
+const invalid = computed(
+  () => form.errors.value.some(
+    (error) => error.path === props.path.join(".") || error.path.startsWith(prefix.value)
+  )
+);
+watch(invalid, (value) => {
+  if (value) {
+    emit("invalid");
+  }
+});
+</script>
+
+<template>
+  <slot :invalid="invalid" />
+</template>

package/dist/runtime/form/components/renderer/form-field-status.vue.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    path: readonly string[];
+};
+declare var __VLS_1: {
+    invalid: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    invalid: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInvalid?: (() => 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/root/{Form.d.vue.ts → form.d.vue.ts}

@@ -1,8 +1,7 @@
-import type { FormObject, FormRendererController, FormRenderShell, FormUiConfig } from '../../types/index.js';
-import type { FormValidationMode } from '../../types/index.js';
+import type { FormValue, FormObject, FormRendererController, FormRenderShell, FormUiConfig, FormValidationMode } from '../../types/index.js';
 type __VLS_Props = {
     form?: FormRendererController;
-    schema?: unknown;
+    schema?: FormValue;
     input?: FormObject;
     shell?: FormRenderShell;
     syncInput?: boolean | readonly string[];
@@ -11,32 +10,32 @@ type __VLS_Props = {
     ui?: FormUiConfig;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    state: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
-    output: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
+    actionPending: import("vue").ComputedRef<import("../../types/index.js").FormSubmitAction | null>;
     dirtyPaths: import("vue").ComputedRef<readonly string[]>;
-    isDirty: import("vue").ComputedRef<boolean>;
     errors: import("vue").ComputedRef<readonly import("../../types/index.js").FormValidationError[]>;
-    actionPending: import("vue").ComputedRef<import("../../types/index.js").FormSubmitAction | null>;
-    validate: (options?: import("../../types/index.js").FormValidationOptions) => Promise<boolean>;
     focus: (path: string | readonly string[]) => Promise<boolean>;
     focusFirstInvalid: () => Promise<boolean>;
-    submit: () => Promise<boolean>;
-    submitHandler: (submitHandler?: import("../../types/index.js").FormSubmitHandler<FormObject>) => Promise<import("../../types/index.js").FormSubmitHandlerResult>;
-    reset: () => void;
+    isDirty: import("vue").ComputedRef<boolean>;
     nextStep: () => Promise<boolean>;
+    output: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
     previousStep: () => Promise<boolean>;
+    reset: () => Promise<void>;
+    state: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
+    submit: () => Promise<boolean>;
+    submitHandler: (submitHandler?: import("../../types/index.js").FormSubmitHandler<FormObject>) => Promise<import("../../types/index.js").FormSubmitHandlerResult>;
+    validate: (options?: import("../../types/index.js").FormValidationOptions) => Promise<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
     submit: (value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
-        data?: unknown;
+        data?: FormValue;
     }) => any;
+    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
     onSubmit?: ((value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
-        data?: unknown;
+        data?: FormValue;
     }) => any) | undefined;
+    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,510 @@
+<script setup>
+import UAlert from "@nuxt/ui/components/Alert.vue";
+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 { 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 { getFormHeader } from "../../utils/overlay";
+import { isRecord } from "../../utils/path";
+import {
+  isBoolean,
+  isFunction,
+  isNumber,
+  isString,
+  isUndefined,
+  stringArray
+} from "../../utils/predicate";
+import { getSchemaFields, getSchemaSteps, isSteppedSchema } from "../../utils/state";
+import { resolveFormText } from "../../utils/text";
+import { mergeFormUi, mergeFormUiClass, resolveAppFormUi } 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";
+const props = defineProps({
+  form: { type: Object, required: false },
+  schema: { type: null, required: false },
+  input: { type: null, required: false },
+  shell: { type: String, required: false },
+  syncInput: { type: [Boolean, Array], required: false },
+  validate: { type: [Boolean, String], required: false },
+  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,
+  schema: schemaRef,
+  syncInput: syncInputRef,
+  validationMode: validationModeRef
+});
+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);
+const stepTransitionDirection = ref("forward");
+const stepTransitioning = ref(false);
+watch(
+  () => runtime.currentStepIndex.value,
+  (nextIndex) => {
+    stepTransitionDirection.value = nextIndex > displayedStepIndex.value ? "forward" : "backward";
+    nextTick().then(() => {
+      displayedStepIndex.value = nextIndex;
+    });
+  }
+);
+const parentPath = computed(
+  () => runtime.currentStepRoot.value ? [runtime.currentStepRoot.value] : []
+);
+const displayedStep = computed(
+  () => isSteppedSchema(schemaRef.value) ? getSchemaSteps(schemaRef.value)[displayedStepIndex.value] : void 0
+);
+const displayedFields = computed(
+  () => isSteppedSchema(schemaRef.value) ? displayedStep.value?.fields ?? [] : getSchemaFields(schemaRef.value)
+);
+const displayedParentPath = computed(
+  () => displayedStep.value?.root ? [displayedStep.value.root] : []
+);
+const header = computed(() => getFormHeader(schemaRef.value));
+const title = computed(() => resolveFormText(getHeaderText(header.value, "title")));
+const eyebrow = computed(() => resolveFormText(getHeaderText(header.value, "eyebrow")));
+const description = computed(() => resolveFormText(getHeaderText(header.value, "description")));
+const showHeading = computed(() => {
+  if (!title.value && !eyebrow.value && !description.value) {
+    return false;
+  }
+  return headerDisplayed(getHeaderDisplay(header.value), shell.value);
+});
+const showStepper = computed(() => getSchemaShowStepper(schemaRef.value));
+const grid = useFormGridLayout({ layout: runtime.currentLayout });
+const shell = computed(() => props.shell ?? "inline");
+const isOverlayShell = computed(
+  () => shell.value === "drawer" || shell.value === "modal" || shell.value === "fullscreen"
+);
+const rootClass = computed(
+  () => mergeFormUiClass(
+    isOverlayShell.value ? "flex h-full min-h-0 w-full min-w-0 flex-col" : "flex min-w-0 flex-col gap-4",
+    stepTransitioning.value ? "overflow-hidden" : void 0,
+    formUi.ui.value.root?.ui?.root
+  )
+);
+const headerClass = computed(
+  () => mergeFormUiClass(
+    isOverlayShell.value ? "shrink-0 bg-default px-[22px] pt-5" : "grid gap-3",
+    formUi.ui.value.root?.ui?.header
+  )
+);
+const viewportClass = computed(
+  () => mergeFormUiClass(
+    isOverlayShell.value ? `min-h-0 flex-1 overflow-y-auto px-[22px] pt-[18px] pb-2${stepTransitioning.value ? " overflow-hidden" : ""}` : stepTransitioning.value ? "overflow-hidden" : "",
+    formUi.ui.value.root?.ui?.viewport
+  )
+);
+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",
+    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;
+});
+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,
+  errors: runtime.errors,
+  focus: runtime.focusField,
+  focusFirstInvalid: runtime.focusFirstInvalid,
+  isDirty: runtime.isDirty,
+  nextStep: runtime.nextStep,
+  output: runtime.output,
+  previousStep: runtime.previousStep,
+  reset: runtime.reset,
+  state: computed(() => runtime.state),
+  submit: runtime.submit,
+  submitHandler: runtime.submitHandler,
+  validate: runtime.validate
+});
+function stepLabel(index) {
+  return runtime.steps.value[index]?.label ?? `Step ${index + 1}`;
+}
+function getHeaderText(headerConfig, key) {
+  if (!isRecord(headerConfig)) {
+    return;
+  }
+  const value = Object.getOwnPropertyDescriptor(headerConfig, key)?.value;
+  return isString(value) || isNumber(value) || isFunction(value) ? value : void 0;
+}
+function getHeaderDisplay(headerConfig) {
+  if (!isRecord(headerConfig)) {
+    return "overlay";
+  }
+  const value = Object.getOwnPropertyDescriptor(headerConfig, "display")?.value;
+  if (value === "always" || value === "never" || value === "overlay") {
+    return value;
+  }
+  return Array.isArray(value) ? value.filter(isRenderShell) : "overlay";
+}
+function headerDisplayed(display, currentShell) {
+  if (display === "always") {
+    return true;
+  }
+  if (display === "never") {
+    return false;
+  }
+  if (display === "overlay") {
+    return currentShell !== "inline";
+  }
+  return display.includes(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;
+  }
+  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 === "rules" ? 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>
+  <form novalidate :class="rootClass" @submit.prevent="submit">
+    <header v-if="showHeading || runtime.isStepped.value || isOverlayShell" :class="headerClass">
+      <div
+        v-if="showHeading || isOverlayShell"
+        :class="
+  mergeFormUiClass(
+    'flex items-start justify-between gap-4',
+    formUi.ui.value.root?.ui?.headerContent
+  )
+"
+      >
+        <div
+          v-if="showHeading"
+          :class="mergeFormUiClass('grid min-w-0 gap-1', formUi.ui.value.root?.ui?.heading)"
+        >
+          <p
+            v-if="eyebrow"
+            :class="
+  mergeFormUiClass(
+    'text-[11px] font-semibold uppercase tracking-[0.08em] text-(--nut-form-eyebrow,var(--ui-color-primary-700,var(--ui-primary))) dark:text-(--nut-form-eyebrow,var(--ui-color-primary-400,var(--ui-primary)))',
+    formUi.ui.value.root?.ui?.eyebrow
+  )
+"
+          >
+            {{ eyebrow }}
+          </p>
+          <h2
+            v-if="title"
+            :class="
+  mergeFormUiClass(
+    'text-lg font-semibold leading-[1.3] tracking-tight text-highlighted',
+    formUi.ui.value.root?.ui?.title
+  )
+"
+          >
+            {{ title }}
+          </h2>
+          <p
+            v-if="description"
+            :class="
+  mergeFormUiClass(
+    'max-w-[56ch] text-[13px] leading-relaxed text-muted',
+    formUi.ui.value.root?.ui?.description
+  )
+"
+          >
+            {{ description }}
+          </p>
+        </div>
+
+        <UButton
+          v-if="isOverlayShell && showCloseButton !== false"
+          type="button"
+          color="neutral"
+          variant="ghost"
+          :size="formUi.controlSize.value"
+          icon="i-lucide-x"
+          :disabled="runtime.actionPending.value !== null"
+          aria-label="Close form"
+          :class="formUi.ui.value.root?.ui?.close"
+          @click="cancel"
+        />
+      </div>
+
+      <div
+        v-if="runtime.isStepped.value && showStepper"
+        :class="mergeFormUiClass('flex flex-wrap gap-2', formUi.ui.value.root?.ui?.stepper)"
+      >
+        <UBadge
+          v-for="(step, index) in runtime.steps.value"
+          :key="step.key"
+          :color="step.active ? 'primary' : 'neutral'"
+          :variant="step.active ? 'solid' : 'soft'"
+          :class="formUi.ui.value.root?.ui?.step"
+        >
+          {{ stepLabel(index) }}
+        </UBadge>
+      </div>
+    </header>
+
+    <div
+      ref="viewportRef"
+      :class="viewportClass"
+      :style="isOverlayShell ? viewportShadow.style.value : void 0"
+    >
+      <UAlert
+        v-if="contextError"
+        color="error"
+        variant="soft"
+        icon="i-lucide-circle-alert"
+        :title="t('form.states.contextError.title')"
+        :description="contextError"
+        class="mb-4"
+      >
+        <template #actions>
+          <UButton
+            type="button"
+            color="error"
+            variant="outline"
+            size="xs"
+            :loading="contextLoading"
+            @click="refreshContext"
+          >
+            {{ t("form.states.contextError.action") }}
+          </UButton>
+        </template>
+      </UAlert>
+      <div
+        v-if="contextPending"
+        data-form-skeleton
+        :class="formUi.ui.value.root?.ui?.skeleton"
+        :style="grid.style.value"
+      >
+        <div
+          v-for="field in runtime.currentFields.value"
+          :key="field.key"
+          :class="mergeFormUiClass('grid gap-2', formUi.ui.value.root?.ui?.skeletonField)"
+        >
+          <USkeleton
+            :class="mergeFormUiClass('h-4 w-32', formUi.ui.value.root?.ui?.skeletonLabel)"
+          />
+          <USkeleton
+            :class="mergeFormUiClass('h-9 w-full', formUi.ui.value.root?.ui?.skeletonControl)"
+          />
+        </div>
+      </div>
+      <div v-else class="relative min-w-0">
+        <FormDirectionalTransition
+          :direction="stepTransitionDirection"
+          @before-enter="stepTransitioning = true"
+          @after-enter="stepTransitioning = false"
+        >
+          <div
+            :key="displayedStepIndex"
+            class="grid min-w-0"
+            style="grid-template-rows: minmax(0, 1fr)"
+          >
+            <div
+              :class="
+  mergeFormUiClass('h-full min-w-0 gap-4 text-left', formUi.ui.value.root?.ui?.grid)
+"
+              :style="grid.style.value"
+            >
+              <FormFieldRenderer
+                v-for="field in displayedFields"
+                :key="`${displayedParentPath.join('.')}:${field.key}`"
+                :field="field"
+                :parent-path="displayedParentPath"
+              />
+            </div>
+          </div>
+        </FormDirectionalTransition>
+      </div>
+    </div>
+
+    <footer :class="footerClass">
+      <FormActions :runtime="runtime" :actions="actions" @cancel="cancel" />
+    </footer>
+  </form>
+</template>

package/dist/runtime/form/components/root/{Form.vue.d.ts → form.vue.d.ts}

@@ -1,8 +1,7 @@
-import type { FormObject, FormRendererController, FormRenderShell, FormUiConfig } from '../../types/index.js';
-import type { FormValidationMode } from '../../types/index.js';
+import type { FormValue, FormObject, FormRendererController, FormRenderShell, FormUiConfig, FormValidationMode } from '../../types/index.js';
 type __VLS_Props = {
     form?: FormRendererController;
-    schema?: unknown;
+    schema?: FormValue;
     input?: FormObject;
     shell?: FormRenderShell;
     syncInput?: boolean | readonly string[];
@@ -11,32 +10,32 @@ type __VLS_Props = {
     ui?: FormUiConfig;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    state: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
-    output: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
+    actionPending: import("vue").ComputedRef<import("../../types/index.js").FormSubmitAction | null>;
     dirtyPaths: import("vue").ComputedRef<readonly string[]>;
-    isDirty: import("vue").ComputedRef<boolean>;
     errors: import("vue").ComputedRef<readonly import("../../types/index.js").FormValidationError[]>;
-    actionPending: import("vue").ComputedRef<import("../../types/index.js").FormSubmitAction | null>;
-    validate: (options?: import("../../types/index.js").FormValidationOptions) => Promise<boolean>;
     focus: (path: string | readonly string[]) => Promise<boolean>;
     focusFirstInvalid: () => Promise<boolean>;
-    submit: () => Promise<boolean>;
-    submitHandler: (submitHandler?: import("../../types/index.js").FormSubmitHandler<FormObject>) => Promise<import("../../types/index.js").FormSubmitHandlerResult>;
-    reset: () => void;
+    isDirty: import("vue").ComputedRef<boolean>;
     nextStep: () => Promise<boolean>;
+    output: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
     previousStep: () => Promise<boolean>;
+    reset: () => Promise<void>;
+    state: import("vue").ComputedRef<import("../../../shared/index.js").GenericObject>;
+    submit: () => Promise<boolean>;
+    submitHandler: (submitHandler?: import("../../types/index.js").FormSubmitHandler<FormObject>) => Promise<import("../../types/index.js").FormSubmitHandlerResult>;
+    validate: (options?: import("../../types/index.js").FormValidationOptions) => Promise<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
     submit: (value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
-        data?: unknown;
+        data?: FormValue;
     }) => any;
+    cancel: (value: import("../../../shared/index.js").GenericObject) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
     onSubmit?: ((value: import("../../../shared/index.js").GenericObject, result: {
         success: boolean;
-        data?: unknown;
+        data?: FormValue;
     }) => any) | undefined;
+    onCancel?: ((value: import("../../../shared/index.js").GenericObject) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;