Form state handling wrapped for Vue projects

form.js

import { reactive } from '@vue/reactivity'

export function createForm({
  form = {},
  validate,
  submit,
  keep = false,
}) {
  const state = reactive({
    form,
    errors: [],
    isSending: false,
    async submit() {
      if (state.isSending) {
        return
      }
      state.errors = []
      if (validate) {
        const errors = await validate(state.form)
        if (errors) {
          state.errors = typeof errors === 'string' ? [errors] : errors
          return
        }
      }
      state.isSending = true
      await submit(state.form).then(() => {
        if (!keep) state.form = form
      }).finally(() => state.isSending = false)
    },
  })
  return state
}