VueCraft NPM

Многошаговые формы ​

ts
import { useMultiStepForm } from '@macrulez/vue-form-schema'

const wizard = useMultiStepForm(
  [
    { title: 'Account', schema: accountFields },
    { title: 'Profile', schema: profileFields },
    { title: 'Confirm', schema: confirmFields },
  ],
  async (allValues) => {
    await api.register(allValues)
  },
)

Возвращаемое значение useMultiStepForm ​

currentStep ​

Ref<number>

Индекс с отсчётом от 0.

totalSteps ​

number

Количество шагов.

isFirstStep / isLastStep ​

ComputedRef<boolean>

form ​

UseFormReturn

Для текущего шага.

values ​

Все значения по всем шагам, объединённые вместе.

next() ​

Провалидировать текущий шаг и перейти дальше (вернёт false, если невалидно).

back() ​

Вернуться на предыдущий шаг.

goTo(n) ​

Перейти на шаг n.

submit() ​

Провалидировать все шаги и вызвать onSubmit.

MultiStepFormRenderer ​

vue
import { MultiStepFormRenderer } from '@macrulez/vue-form-schema/ui'

<MultiStepFormRenderer :wizard="wizard" />

Рендерит поля текущего шага и кнопки навигации Назад / Далее / Отправить.