form-builder

Appearance

JsonFields ​

Renders the fields of a useJsonForm form with your components, where the definition's layout puts them: the current step, with its sections, rows and slots.

ts
<JsonFields :of="jsonForm" />

Parameters ​

  • of AnyJsonFormInstance: what useJsonForm returned
  • components FieldComponents: optional, defaults to those useJsonForm got
  • layoutComponents LayoutComponents: optional, defaults to those useJsonForm got
  • only readonly string[]: optional, renders only these fields, by path, in the order of the definition, without the layout
  • except readonly string[]: optional, leaves out these fields, by path
  • step number: optional, renders the step at this index instead of the current one

Explanation ​

It renders nothing of its own, so put it inside Formisch's <Form>, with your own submit button. It leaves out what conditions hide. A field type or layout type without a component, or a slot without content, throws a TypeError that names each one. Its named slots fill the layout's slots. only and except are read when it sets up.

Example ​

vue
<script setup lang="ts">
import { Form } from '@formisch/vue'
import type { JsonForm } from '@whatsaaaa/form-builder-schema'
import { JsonFields, useJsonForm } from '@whatsaaaa/form-builder-vue'
import { components } from './all-fields'
import LayoutRow from './LayoutRow.vue'
import LayoutSection from './LayoutSection.vue'

const { definition } = defineProps<{ definition: JsonForm }>()

const jsonForm = useJsonForm(definition, {
  components,
  layoutComponents: { section: LayoutSection, row: LayoutRow },
})

function save(output: unknown) {
  console.log(output)
}
</script>

<template>
  <Form :of="jsonForm.form" @submit="save">
    <JsonFields :of="jsonForm">
      <template #submit>
        <button type="submit">Place order</button>
      </template>
    </JsonFields>
  </Form>
</template>

Guides ​

Components ​