npm - @whatsaaaa/form-builder-vue - Versions diffs - 0.1.5 → 0.2.0 - Mend

@whatsaaaa/form-builder-vue 0.1.5 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -51,6 +51,7 @@ function save(output: unknown) {
 useJsonForm(definition, {
   builder: createSchemaBuilder({ fieldTypes: { money } }), // your own types, rules and messages
   components, // your component per field type, see below
+  layoutComponents, // your component per layout type, see Layout
   validate: 'blur', // when a field is validated the first time, as in Formisch
   revalidate: 'input', // when it is validated again
 })
@@ -194,9 +195,130 @@ defineProps<DisplayFieldProps>()
 Declare the props even when a component doesn't use them, like a divider, or Vue adds `field` to its element as an attribute.
+## Layout
+A definition's [`layout`](https://github.com/whatsaaaa/form-builder/tree/main/packages/schema#layout) puts its fields in sections, rows of a 12-column grid and steps, and leaves slots for content of yours. `<JsonFields>` renders the current step of it. Give `useJsonForm` a component for each layout type the definition uses, and `<JsonFields>` a named slot for each of its slots:
+```vue
+<!-- Row.vue: one line of a 12-column grid. On a narrow screen, give each cell the whole row. -->
+<script setup lang="ts">
+import type { RowProps, RowSlots } from '@whatsaaaa/form-builder-vue'
+defineProps<RowProps>()
+defineSlots<RowSlots>()
+</script>
+<template>
+  <div class="row">
+    <div v-for="(span, index) in spans" :key="index" :style="{ gridColumn: `span ${span}` }">
+      <slot :index="index" />
+    </div>
+  </div>
+</template>
+<style scoped>
+.row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+</style>
+```
+```vue
+<!-- Section.vue -->
+<script setup lang="ts">
+import type { SectionProps, SectionSlots } from '@whatsaaaa/form-builder-vue'
+defineProps<SectionProps>()
+defineSlots<SectionSlots>()
+</script>
+<template>
+  <fieldset>
+    <legend>{{ section.label }}</legend>
+    <slot />
+  </fieldset>
+</template>
+```
+```vue
+<script setup lang="ts">
+const jsonForm = useJsonForm(definition, {
+  components,
+  layoutComponents: { section: Section, row: Row },
+})
+</script>
+<template>
+  <Form :of="jsonForm.form" @submit="save">
+    <JsonFields :of="jsonForm">
+      <template #submit><button type="submit">Place order</button></template>
+    </JsonFields>
+  </Form>
+</template>
+```
+| Layout type | Props                                                                     | Slot                                           |
+| ----------- | ------------------------------------------------------------------------- | ---------------------------------------------- |
+| `section`   | `section`, as written, with its `id`, `label`, `description` and `ui`     | default: the section's items                   |
+| `row`       | `row`, as written, with its `id` and `ui`; `spans`, the span of each cell | default, with `{ index }`: the cell at `index` |
+The props are typed as `SectionProps` and `RowProps`, and the slots as `SectionSlots` and `RowSlots`.
+- `layoutComponents` goes to `useJsonForm`, or to `<JsonFields>` as a prop, which wins. A definition without sections or rows needs none, and one without a `layout` renders as it always did.
+- A layout type the layout uses without a component, or a slot without content, throws a `TypeError` naming each one when `<JsonFields>` sets up, on every step.
+- Display elements written in the layout render with your field components, like the ones in `fields`.
+- `except` leaves fields out of the layout too, and a section or a row left without fields drops out. The other cells of a row keep their spans. `only` renders the fields it names without the layout.
+- The spans are for a wide screen: the layout says nothing about narrow ones, so your row component decides, e.g. with a media query.
+### Steps
+`jsonForm.steps` is where the form is, and how to move. It is reactive, so templates follow it:
+```vue
+<template>
+  <Form :of="jsonForm.form" @submit="save">
+    <ol>
+      <li
+        v-for="(step, i) in jsonForm.steps.list"
+        :key="step.step.id ?? i"
+        :aria-current="i === jsonForm.steps.index ? 'step' : undefined"
+      >
+        {{ step.step.label }}
+      </li>
+    </ol>
+    <JsonFields :of="jsonForm" />
+    <button v-if="!jsonForm.steps.isFirst" type="button" @click="jsonForm.steps.back()">
+      Back
+    </button>
+    <button v-if="!jsonForm.steps.isLast" type="button" @click="jsonForm.steps.next()">Next</button>
+    <button v-else type="submit">Sign up</button>
+  </Form>
+</template>
+```
+| Member              |                                                                                                      |
+| ------------------- | ---------------------------------------------------------------------------------------------------- |
+| `list`              | every step, with its `step` as written (`id`, `label`, `description`, `ui`), `children` and `fields` |
+| `index`, `current`  | the step `<JsonFields>` renders                                                                      |
+| `isFirst`, `isLast` |                                                                                                      |
+| `next()`            | validates, and moves on when the step's fields have no issues. Resolves to whether it moved          |
+| `back()`            | moves back, without validating                                                                       |
+| `goTo(index)`       | back freely; forward through each step on the way, stopping at the first with issues                 |
+The form is one Formisch form, so Formisch validates all of it at once. The steps make that work:
+- **Next** validates the whole form, and only the issues on the current step's fields keep the user there. It focuses the first one, in layout order.
+- **A step shows what the user left**: the errors it had when they left it, and none the first time they get to it, so the issues of steps nobody saw yet stay out of sight.
+- **A step that failed Next revalidates** as the user fixes it, on the `revalidate` event, like a form after a failed submit.
+- **A submit before the last step is a Next**, so Enter in a step with a single text input doesn't submit the form early. On the last step, Formisch submits as usual.
+- **A submit that fails because of an earlier step**, like a form rule that reads fields of two steps, goes back to that step.
+- `<JsonFields :step="2" />` renders a given step instead of the current one, e.g. on a review page. A form without steps has one, and nothing changes for it.
 ## Placing fields yourself
-`<JsonFields>` renders every field in the order of the definition. To put some of them somewhere else, place them with `<JsonField>` and leave them out of `<JsonFields>` with `except`:
+Without a `layout`, `<JsonFields>` renders every field in the order of the definition. To put some of them somewhere else, in code rather than in the definition, place them with `<JsonField>` and leave them out of `<JsonFields>` with `except`:
 ```vue
 <template>
@@ -215,7 +337,7 @@ Declare the props even when a component doesn't use them, like a divider, or Vue
 - A path is the field's names joined with dots: `'email'`, or `'address.city'` for a field of a group. A placed field validates, focuses and submits like any other, because it is still part of the one Formisch form.
 - A group or an array comes with all its fields. A field of an array's items can't be placed on its own, because it has no index outside its item, so place the array. To leave such a field out of every item, use `'*'` for the index: `except: ['lines.*.note']`.
-- `only` renders just the fields it names, in the order of the definition: `<JsonFields :of="jsonForm" :only="['name', 'email']" />`. Display elements have no name, so `only` leaves them out.
+- `only` renders just the fields it names, in the order of the definition: `<JsonFields :of="jsonForm" :only="['name', 'email']" />`. Display elements have no dot path, even with a name, so `only` leaves them out.
 - A path that names no field throws a `TypeError`, so a typo shows up at once. `only` and `except` are read when the component sets up.
 ## Typing the form
@@ -245,4 +367,4 @@ useFieldArray(jsonForm.form, { path: ['lines'] })
 - Labels and display text reach your components as written in the definition. The builder's `resolveMessage` only changes what goes into the schema, so translate `field.label` in your components.
 - `ui.widget` doesn't pick a component. A component can read `field.ui` itself, e.g. to show a multiselect as checkboxes.
-- Showing and hiding fields, or making one required because of another, belongs to a future affects package.
+- Showing and hiding fields, or making one required because of another, belongs to a future affects package. The layout already hides a section, a row or a step whose fields are all hidden, through `shownNodes` in the schema package.

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FieldNode, FieldNode as FieldNode$1, FieldPath, FieldPath as FieldPath$1, FieldRole, JsonField as JsonField$1, JsonForm, JsonFormSchema, JsonFormSchema as JsonFormSchema$1, SchemaBuilder, TypedJsonFormSchema, TypedJsonFormSchema as TypedJsonFormSchema$1, ValueKind } from "@whatsaaaa/form-builder-schema";
+import { FieldNode, FieldNode as FieldNode$1, FieldPath, FieldPath as FieldPath$1, FieldRole, FormLayout, FormLayout as FormLayout$1, JsonField as JsonField$1, JsonForm, JsonFormSchema, JsonFormSchema as JsonFormSchema$1, JsonLayoutRow, JsonLayoutSection, LayoutNode, LayoutStep, LayoutStep as LayoutStep$1, SchemaBuilder, TypedJsonFormSchema, TypedJsonFormSchema as TypedJsonFormSchema$1, ValueKind } from "@whatsaaaa/form-builder-schema";
 import { Component, PropType, VNode } from "vue";
 import { FieldElementProps, FormSchema, FormStore, ValidationMode } from "@formisch/vue";
 /** Your component for each field type, by type name: `{ text: TextInput, group: Fieldset }`. */
@@ -52,11 +52,67 @@ interface ArrayFieldSlots {
     index: number;
   }): VNode[];
 }
+/**
+ * Your component for each layout type a definition's `layout` uses: `{ section: Card, row: Grid }`.
+ * A definition without sections or rows needs none.
+ */
+interface LayoutComponents {
+  section?: Component;
+  row?: Component;
+}
+/** The props of a component for a section of the layout. */
+interface SectionProps {
+  /** The section as written, with its `id`, `label`, `description` and `ui`. */
+  section: JsonLayoutSection;
+}
+/** The slots of a section component: its default slot renders the section's items. */
+interface SectionSlots {
+  default(): VNode[];
+}
+/** The props of a component for a row of the layout: one line of a 12-column grid. */
+interface RowProps {
+  /** The row as written, with its `id` and `ui`. */
+  row: JsonLayoutRow;
+  /** How many of the 12 columns each cell takes, in order. They add up to 12 at most. */
+  spans: number[];
+}
+/** The slots of a row component: its default slot renders the cell at `index`. */
+interface RowSlots {
+  default(props: {
+    index: number;
+  }): VNode[];
+}
+/** The steps of a form, from its layout. A form without `steps` in its layout has one. */
+interface JsonFormSteps {
+  /** Every step, in order. */
+  readonly list: readonly LayoutStep$1[];
+  /** The index of the current step in `list`. */
+  readonly index: number;
+  /** The step `<JsonFields>` renders. */
+  readonly current: LayoutStep$1;
+  readonly isFirst: boolean;
+  readonly isLast: boolean;
+  /**
+   * Validates the whole form, and moves to the next step when the fields of this one have no
+   * issues. Otherwise it stays, and focuses the first field with an issue, in layout order.
+   * Resolves to whether it moved.
+   */
+  next(): Promise<boolean>;
+  /** Moves to the step before, without validating. */
+  back(): void;
+  /**
+   * Moves to the step at `index`. Back is free, and forward validates every step on the way, like
+   * `next()`, and stops at the first with issues. Resolves to whether it got there.
+   */
+  goTo(index: number): Promise<boolean>;
+}
 interface UseJsonFormOptions {
   /** Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. */
   builder?: SchemaBuilder;
   /** Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. */
   components?: FieldComponents;
+  /** Your component for each layout type the definition's `layout` uses, like `section`. */
+  layoutComponents?: LayoutComponents;
   /** When a field is validated the first time, as in Formisch. */
   validate?: ValidationMode;
   /** When a field is validated again after that, as in Formisch. */
@@ -70,8 +126,14 @@ interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema$1> {
   readonly builder: SchemaBuilder;
   /** The components from the options, if any. */
   readonly components: FieldComponents | undefined;
-  /** The definition's fields as a tree, the way `<JsonFields>` renders them. */
+  /** The layout components from the options, if any. */
+  readonly layoutComponents: LayoutComponents | undefined;
+  /** The definition's fields as a tree, for `<JsonFields :only>` and `<JsonField>`. */
   readonly fields: readonly FieldNode$1[];
+  /** The definition's layout, the way `<JsonFields>` renders it. */
+  readonly layout: FormLayout$1;
+  /** The layout's steps: the current one, and Next, Back and Go to. A form without steps has one. */
+  readonly steps: JsonFormSteps;
 }
 /** Any form `useJsonForm` returns, typed or not: what the components take. */
 type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
@@ -125,9 +187,10 @@ export declare const JsonField: import("vue").DefineComponent<import("vue").Extr
   };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
- * Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
- * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. `only` and
- * `except` are read when it sets up.
+ * Renders the fields of a `useJsonForm` form with your components, one per field type, where the
+ * definition's `layout` puts them: the current step, with its sections, rows and slots. It renders
+ * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. Its named
+ * slots fill the layout's slots. `only` and `except` are read when it sets up.
  */
 export declare const JsonFields: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   /** What `useJsonForm` returned. */
@@ -139,17 +202,30 @@ export declare const JsonFields: import("vue").DefineComponent<import("vue").Ext
   components: {
     type: PropType<FieldComponents>;
   };
-  /** Renders only these fields, by path, in the order of the definition. */
+  /** Defaults to the layout components `useJsonForm` got. */
+  layoutComponents: {
+    type: PropType<LayoutComponents>;
+  };
+  /** Renders only these fields, by path, in the order of the definition, without the layout. */
   only: {
     type: PropType<readonly string[]>;
   };
-  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
+  /**
+   * Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a
+   * row left without fields drops out too.
+   */
   except: {
     type: PropType<readonly string[]>;
   };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  /** Renders the step at this index instead of the current one, e.g. on a review page. */
+  step: {
+    type: NumberConstructor;
+  };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[]) | (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>), {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** What `useJsonForm` returned. */
   of: {
     type: PropType<AnyJsonFormInstance>;
@@ -159,14 +235,25 @@ export declare const JsonFields: import("vue").DefineComponent<import("vue").Ext
   components: {
     type: PropType<FieldComponents>;
   };
-  /** Renders only these fields, by path, in the order of the definition. */
+  /** Defaults to the layout components `useJsonForm` got. */
+  layoutComponents: {
+    type: PropType<LayoutComponents>;
+  };
+  /** Renders only these fields, by path, in the order of the definition, without the layout. */
   only: {
     type: PropType<readonly string[]>;
   };
-  /** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
+  /**
+   * Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a
+   * row left without fields drops out too.
+   */
   except: {
     type: PropType<readonly string[]>;
   };
+  /** Renders the step at this index instead of the current one, e.g. on a review page. */
+  step: {
+    type: NumberConstructor;
+  };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export type { AnyJsonFormInstance, ArrayFieldProps, ArrayFieldSlots, DisplayFieldProps, FieldComponents, FieldNode, FieldPath, FieldRole, GroupFieldProps, GroupFieldSlots, JsonFormInstance, JsonFormSchema, TypedJsonFormSchema, UseJsonFormOptions, ValueFieldProps };
+export type { AnyJsonFormInstance, ArrayFieldProps, ArrayFieldSlots, DisplayFieldProps, FieldComponents, FieldNode, FieldPath, FieldRole, FormLayout, GroupFieldProps, GroupFieldSlots, JsonFormInstance, JsonFormSchema, JsonFormSteps, LayoutComponents, LayoutNode, LayoutStep, RowProps, RowSlots, SectionProps, SectionSlots, TypedJsonFormSchema, UseJsonFormOptions, ValueFieldProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js CHANGED Viewed

@@ -1,6 +1,118 @@
-import { checkComponents, coerceInput, createSchemaBuilder, dotPathOf, findField, isRequired, selectFields, toFieldPath } from "@whatsaaaa/form-builder-schema";
-import { defineComponent, h } from "vue";
-import { insert, move, remove, useField, useFieldArray, useForm } from "@formisch/vue";
+import { checkComponents, checkLayoutComponents, coerceInput, createSchemaBuilder, dotPathOf, fieldPathsOf, findField, isRequired, issuesOfStep, selectFields, shownNodes, toFieldPath } from "@whatsaaaa/form-builder-schema";
+import { Fragment, computed, defineComponent, getCurrentScope, h, nextTick, onScopeDispose, ref, watch } from "vue";
+import { focus, getErrors, getInput, insert, move, remove, setErrors, useField, useFieldArray, useForm, validate } from "@formisch/vue";
+// src/json-form-steps.ts
+const fieldEvents = /* @__PURE__ */ new WeakMap();
+/** What a field of `form` calls on each event, for a form with steps. Undefined with one step. */
+const fieldEventsOf = (form) => fieldEvents.get(form);
+/**
+* The steps of `layout`, for `useJsonForm`. With more than one, a step shows the errors it had
+* when the user left it, and none the first time they get to it, a step that failed Next revalidates as the user fixes it, a submit
+* before the last step moves on like Next, and a submit that fails because of an earlier step
+* goes back to it.
+*/
+function useJsonFormSteps(form, layout, modes) {
+	const list = layout.steps;
+	const index = ref(0);
+	const current = computed(() => list[index.value]);
+	const left = /* @__PURE__ */ new Map();
+	const failed = /* @__PURE__ */ new Set();
+	async function goTo(target) {
+		if (!Number.isInteger(target) || target < 0 || target >= list.length) throw new RangeError(`No step ${target}. The form has ${list.length}.`);
+		if (target <= index.value) {
+			move(target);
+			return true;
+		}
+		const { issues } = await validate(form);
+		for (let at = index.value; at < target; at++) {
+			const found = issuesOfStep(list[at], issues);
+			if (found.length) {
+				await stop(at, found);
+				return false;
+			}
+			failed.delete(at);
+		}
+		move(target);
+		return true;
+	}
+	/**
+	* Moves to a step as the user left it: with the errors it had then, and none the first time, and
+	* revalidating if it failed Next. Validating the steps before set errors on its fields, which
+	* the user never saw.
+	*/
+	function move(target) {
+		leave();
+		const errors = left.get(target);
+		for (const path of fieldPathsOf(list[target], getInput(form))) setErrors(form, {
+			path,
+			errors: errors?.get(JSON.stringify(path)) ?? null
+		});
+		index.value = target;
+	}
+	/** Keeps the errors of the current step, for when the user comes back to it. */
+	function leave() {
+		const errors = fieldPathsOf(current.value, getInput(form)).map((path) => [JSON.stringify(path), errorsAt(path)]);
+		left.set(index.value, new Map(errors));
+	}
+	const errorsAt = (path) => getErrors(form, { path });
+	/** Stays on, or goes to, the step at `at`, with its issues shown. */
+	async function stop(at, found) {
+		failed.add(at);
+		if (at !== index.value) leave();
+		index.value = at;
+		await nextTick();
+		const first = found.find((issue) => issue.field.role === "value");
+		if (first) focus(form, { path: first.path });
+	}
+	const steps = {
+		list,
+		get index() {
+			return index.value;
+		},
+		get current() {
+			return current.value;
+		},
+		get isFirst() {
+			return index.value === 0;
+		},
+		get isLast() {
+			return index.value === list.length - 1;
+		},
+		next: () => steps.isLast ? Promise.resolve(false) : goTo(index.value + 1),
+		back: () => {
+			if (index.value > 0) move(index.value - 1);
+		},
+		goTo
+	};
+	if (list.length > 1) watchSteps();
+	return steps;
+	function watchSteps() {
+		fieldEvents.set(form, (event) => {
+			const validateMode = modes.validate ?? "submit";
+			if (!failed.has(index.value) || validateMode !== "submit" || form.isSubmitted) return;
+			if (event === (modes.revalidate ?? "input")) validate(form);
+		});
+		watch(() => form.isSubmitting, async (submitting, was) => {
+			if (submitting || !was || form.isValid) return;
+			const { issues } = await validate(form);
+			const at = list.findIndex((step) => issuesOfStep(step, issues).length);
+			if (at !== -1 && at < index.value) await stop(at, issuesOfStep(list[at], issues));
+		});
+		if (typeof document === "undefined") return;
+		const onSubmit = (event) => {
+			if (event.target !== formElementOf(form) || steps.isLast) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			steps.next();
+		};
+		document.addEventListener("submit", onSubmit, { capture: true });
+		if (getCurrentScope()) onScopeDispose(() => document.removeEventListener("submit", onSubmit, { capture: true }));
+	}
+}
+/** The `<form>` Formisch's `<Form>` renders, which it keeps on the store for its `submit()`. */
+function formElementOf(form) {
+	return form["~internal"]?.element;
+}
 // src/array-field.ts
 /** Connects a container of kind `array` to Formisch, and renders your component for it. */
 const ArrayField = defineComponent({
@@ -31,20 +143,30 @@ const ArrayField = defineComponent({
 	setup(props) {
 		const path = () => props.path;
 		const array = useFieldArray(() => props.of.form, () => ({ path: path() }));
+		const events = fieldEventsOf(props.of.form);
 		const methods = {
-			add: () => insert(props.of.form, {
-				path: path(),
-				initialInput: props.of.builder.getItemInput(props.node.field)
-			}),
-			remove: (index) => remove(props.of.form, {
-				path: path(),
-				at: index
-			}),
-			move: (from, to) => move(props.of.form, {
-				path: path(),
-				from,
-				to
-			})
+			add: () => {
+				insert(props.of.form, {
+					path: path(),
+					initialInput: props.of.builder.getItemInput(props.node.field)
+				});
+				events?.("input");
+			},
+			remove: (index) => {
+				remove(props.of.form, {
+					path: path(),
+					at: index
+				});
+				events?.("input");
+			},
+			move: (from, to) => {
+				move(props.of.form, {
+					path: path(),
+					from,
+					to
+				});
+				events?.("input");
+			}
 		};
 		return () => {
 			const fieldProps = {
@@ -82,9 +204,32 @@ const ValueField = defineComponent({
 	},
 	setup(props) {
 		const field = useField(() => props.of.form, () => ({ path: props.path }));
+		const events = fieldEventsOf(props.of.form);
 		const setInput = (input) => {
 			field.input = coerceInput(input, props.node);
+			events?.("input");
 		};
+		const inputProps = events ? {
+			get name() {
+				return field.props.name;
+			},
+			get autofocus() {
+				return field.props.autofocus;
+			},
+			ref: (element) => field.props.ref(element),
+			onFocus: () => {
+				field.props.onFocus();
+				events("touch");
+			},
+			onChange: (event) => {
+				field.props.onChange(event);
+				events("change");
+			},
+			onBlur: () => {
+				field.props.onBlur();
+				events("blur");
+			}
+		} : field.props;
 		return () => {
 			const fieldProps = {
 				field: props.node.field,
@@ -93,7 +238,7 @@ const ValueField = defineComponent({
 				required: isRequired(props.node.field),
 				input: field.input,
 				errors: field.errors,
-				inputProps: field.props,
+				inputProps,
 				setInput
 			};
 			return h(props.component, fieldProps);
@@ -109,12 +254,15 @@ function resolveComponents(components, of) {
 }
 /** `indexes` are the indexes of the array items the fields are in, outermost first. */
 function renderFields(ctx, nodes, indexes) {
-	return nodes.map((node, position) => renderField(ctx, node, indexes, position));
+	return nodes.map((node, position) => renderField(ctx, node, indexes, dotPathOf(node) ?? `#${position}`, (inner) => renderFields(ctx, node.children, inner)));
 }
-function renderField(ctx, node, indexes, position) {
+/**
+* Renders one field with its component. `children` renders the fields inside a group, or inside
+* the item of an array, with the indexes of the items they are in.
+*/
+function renderField(ctx, node, indexes, key, children) {
 	const component = ctx.components[node.type];
 	const path = toFieldPath(node.dataPath, indexes);
-	const key = dotPathOf(node) ?? `#${position}`;
 	switch (node.role) {
 		case "display": return h(component, {
 			key,
@@ -124,14 +272,14 @@ function renderField(ctx, node, indexes, position) {
 			key,
 			field: node.field,
 			path
-		}, { default: () => renderFields(ctx, node.children, indexes) });
+		}, { default: () => children(indexes) });
 		case "array": return h(ArrayField, {
 			key,
 			of: ctx.of,
 			node,
 			path,
 			component,
-			renderItem: (index) => renderFields(ctx, node.children, [...indexes, index])
+			renderItem: (index) => children([...indexes, index])
 		});
 		case "value": return h(ValueField, {
 			key,
@@ -170,14 +318,39 @@ const JsonField = defineComponent({
 			components: resolveComponents(props.components, props.of)
 		};
 		checkComponents([node], ctx.components);
-		return () => renderField(ctx, node, [], 0);
+		return () => renderField(ctx, node, [], dotPathOf(node) ?? "#0", (indexes) => renderFields(ctx, node.children, indexes));
 	}
 });
+// src/render-layout.ts
+/**
+* Renders layout nodes. A field left out drops out, and so does a section or a row left without
+* fields. `indexes` are the indexes of the array items the nodes are in, outermost first.
+*/
+function renderLayout(ctx, nodes, indexes) {
+	return shownNodes(nodes, indexes, ctx.isShown).map((node) => renderNode(ctx, node, indexes));
+}
+function renderNode(ctx, node, indexes) {
+	const { key } = node;
+	switch (node.type) {
+		case "field": return renderField(ctx, node.node, indexes, key, (inner) => renderLayout(ctx, node.children, inner));
+		case "section": return h(ctx.layoutComponents.section, {
+			key,
+			section: node.section
+		}, { default: () => renderLayout(ctx, node.children, indexes) });
+		case "row": return h(ctx.layoutComponents.row, {
+			key,
+			row: node.row,
+			spans: node.children.map((cell) => cell.span)
+		}, { default: ({ index }) => [renderNode(ctx, node.children[index], indexes)] });
+		case "slot": return h(Fragment, { key }, ctx.slots[node.name]?.());
+	}
+}
 // src/json-fields.ts
 /**
-* Renders the fields of a `useJsonForm` form with your components, one per field type. It renders
-* nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. `only` and
-* `except` are read when it sets up.
+* Renders the fields of a `useJsonForm` form with your components, one per field type, where the
+* definition's `layout` puts them: the current step, with its sections, rows and slots. It renders
+* nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. Its named
+* slots fill the layout's slots. `only` and `except` are read when it sets up.
 */
 const JsonFields = defineComponent({
 	name: "JsonFields",
@@ -189,12 +362,19 @@ const JsonFields = defineComponent({
 		},
 		/** Defaults to the components `useJsonForm` got. */
 		components: { type: Object },
-		/** Renders only these fields, by path, in the order of the definition. */
+		/** Defaults to the layout components `useJsonForm` got. */
+		layoutComponents: { type: Object },
+		/** Renders only these fields, by path, in the order of the definition, without the layout. */
 		only: { type: Array },
-		/** Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. */
-		except: { type: Array }
+		/**
+		* Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a
+		* row left without fields drops out too.
+		*/
+		except: { type: Array },
+		/** Renders the step at this index instead of the current one, e.g. on a review page. */
+		step: { type: Number }
 	},
-	setup(props) {
+	setup(props, { slots }) {
 		const ctx = {
 			of: props.of,
 			components: resolveComponents(props.components, props.of)
@@ -203,10 +383,36 @@ const JsonFields = defineComponent({
 			only: props.only,
 			except: props.except
 		});
-		checkComponents(nodes, ctx.components);
-		return () => renderFields(ctx, nodes, []);
+		if (props.only || !props.of.definition.layout) {
+			checkComponents(nodes, ctx.components);
+			return () => renderFields(ctx, nodes, []);
+		}
+		const { layout, steps } = props.of;
+		const except = new Set(props.except);
+		const layoutCtx = {
+			...ctx,
+			layoutComponents: props.layoutComponents ?? props.of.layoutComponents ?? {},
+			slots,
+			isShown: (node) => !except.has(dotPathOf(node) ?? "")
+		};
+		checkComponents(layout.steps.flatMap((step) => fieldsOf(step.children)), ctx.components);
+		checkLayoutComponents(layout, layoutCtx.layoutComponents, slots);
+		return () => {
+			const index = props.step ?? steps.index;
+			const step = steps.list[index];
+			if (!step) throw new RangeError(`No step ${props.step}. The form has ${steps.list.length}.`);
+			return h(Fragment, { key: index }, renderLayout(layoutCtx, step.children, []));
+		};
 	}
 });
+/** Every field of the nodes, display elements written in the layout included. */
+function fieldsOf(nodes) {
+	return nodes.flatMap((node) => {
+		if (node.type === "slot") return [];
+		const inner = fieldsOf(node.children);
+		return node.type === "field" ? [node.node, ...inner] : inner;
+	});
+}
 // src/use-json-form.ts
 function useJsonForm(definition, options = {}) {
 	const builder = options.builder ?? createSchemaBuilder();
@@ -216,13 +422,16 @@ function useJsonForm(definition, options = {}) {
 		validate: options.validate,
 		revalidate: options.revalidate
 	});
-	const { components } = options;
+	const layout = builder.getLayout(definition);
 	return {
 		form,
 		definition,
 		builder,
-		components,
-		fields: builder.getFieldTree(definition)
+		components: options.components,
+		layoutComponents: options.layoutComponents,
+		fields: builder.getFieldTree(definition),
+		layout,
+		steps: useJsonFormSteps(form, layout, options)
 	};
 }
 export { JsonField, JsonFields, useJsonForm };

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../src/array-field.ts","../src/value-field.ts","../src/render-fields.ts","../src/json-field.ts","../src/json-fields.ts","../src/use-json-form.ts"],"sourcesContent":["import { insert, move, remove, useFieldArray } from '@formisch/vue'\nimport type { FieldNode, FieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type Component, defineComponent, h, type PropType, type VNode } from 'vue'\nimport type { ArrayFieldProps } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/** Connects a container of kind `array` to Formisch, and renders your component for it. /\nexport const ArrayField = defineComponent({\n name: 'ArrayField',\n props: {\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n node: { type: Object as PropType<FieldNode>, required: true },\n path: { type: Array as PropType<FieldPath>, required: true },\n component: { type: [Object, Function] as PropType<Component>, required: true },\n /* Renders the fields of the item at `index`. /\n renderItem: { type: Function as PropType<(index: number) => VNode[]>, required: true },\n },\n setup(props) {\n // The path comes from the definition at runtime, so the schema's types can't check it.\n const path = () => props.path as never\n const array = useFieldArray(\n () => props.of.form,\n () => ({ path: path() }),\n )\n\n const methods = {\n // A new item starts with the defaults of its fields, like the items of a new form.\n add: () =>\n insert(props.of.form, {\n path: path(),\n initialInput: props.of.builder.getItemInput(props.node.field) as never,\n }),\n remove: (index: number) => remove(props.of.form, { path: path(), at: index }),\n move: (from: number, to: number) => move(props.of.form, { path: path(), from, to }),\n }\n\n return () => {\n const fieldProps: ArrayFieldProps = {\n field: props.node.field,\n path: props.path,\n items: array.items,\n errors: array.errors,\n ...methods,\n }\n return h(props.component, fieldProps, {\n default: ({ index }: { index: number }) => props.renderItem(index),\n })\n }\n },\n})\n","import { useField } from '@formisch/vue'\nimport {\n coerceInput,\n type FieldNode,\n type FieldPath,\n isRequired,\n} from '@whatsaaaa/form-builder-schema'\nimport { type Component, defineComponent, h, type PropType } from 'vue'\nimport type { ValueFieldProps } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/* Connects a field with a value to Formisch, and renders your component for it. /\nexport const ValueField = defineComponent({\n name: 'ValueField',\n props: {\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n node: { type: Object as PropType<FieldNode>, required: true },\n path: { type: Array as PropType<FieldPath>, required: true },\n component: { type: [Object, Function] as PropType<Component>, required: true },\n },\n setup(props) {\n // The path comes from the definition at runtime, so the schema's types can't check it.\n const field = useField(\n () => props.of.form,\n () => ({ path: props.path as never }),\n )\n\n const setInput = (input: unknown) => {\n field.input = coerceInput(input, props.node) as never\n }\n\n return () => {\n const fieldProps: ValueFieldProps = {\n field: props.node.field,\n path: props.path,\n kind: props.node.kind,\n required: isRequired(props.node.field),\n input: field.input,\n errors: field.errors,\n inputProps: field.props,\n setInput,\n }\n return h(props.component, fieldProps)\n }\n },\n})\n","import { dotPathOf, type FieldNode, toFieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type Component, h, type VNode } from 'vue'\nimport { ArrayField } from './array-field'\nimport type { FieldComponents } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\nimport { ValueField } from './value-field'\n\n/* What `<JsonFields>` and `<JsonField>` render with. /\nexport interface RenderContext {\n of: AnyJsonFormInstance\n components: FieldComponents\n}\n\n/* The components from the props, or else the ones `useJsonForm` got. /\nexport function resolveComponents(\n components: FieldComponents \| undefined,\n of: AnyJsonFormInstance,\n): FieldComponents {\n const resolved = components ?? of.components\n if (!resolved) {\n throw new TypeError('No field components. Pass them to useJsonForm, or to the component.')\n }\n return resolved\n}\n\n/* `indexes` are the indexes of the array items the fields are in, outermost first. /\nexport function renderFields(\n ctx: RenderContext,\n nodes: readonly FieldNode[],\n indexes: readonly number[],\n): VNode[] {\n return nodes.map((node, position) => renderField(ctx, node, indexes, position))\n}\n\nexport function renderField(\n ctx: RenderContext,\n node: FieldNode,\n indexes: readonly number[],\n position: number,\n): VNode {\n const component = ctx.components[node.type] as Component\n const path = toFieldPath(node.dataPath, indexes)\n const key = dotPathOf(node) ?? `#${position}`\n switch (node.role) {\n case 'display':\n return h(component, { key, field: node.field })\n case 'group':\n return h(\n component,\n { key, field: node.field, path },\n { default: () => renderFields(ctx, node.children, indexes) },\n )\n case 'array':\n return h(ArrayField, {\n key,\n of: ctx.of,\n node,\n path,\n component,\n renderItem: (index: number) => renderFields(ctx, node.children, [...indexes, index]),\n })\n case 'value':\n return h(ValueField, { key, of: ctx.of, node, path, component })\n }\n}\n","import { checkComponents, findField } from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderField, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/\n Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A\n * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.\n /\nexport const JsonField = defineComponent({\n name: 'JsonField',\n props: {\n /* What `useJsonForm` returned. /\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n /* The field's path: `'email'`, or `'address.city'` for a field of a group. /\n path: { type: String, required: true },\n /* Defaults to the components `useJsonForm` got. /\n components: { type: Object as PropType<FieldComponents> },\n },\n setup(props) {\n const node = findField(props.of.fields, props.path, { placed: true })\n const ctx: RenderContext = {\n of: props.of,\n components: resolveComponents(props.components, props.of),\n }\n checkComponents([node], ctx.components)\n\n return () => renderField(ctx, node, [], 0)\n },\n})\n","import { checkComponents, selectFields } from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderFields, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/\n Renders the fields of a `useJsonForm` form with your components, one per field type. It renders\n * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. `only` and\n * `except` are read when it sets up.\n /\nexport const JsonFields = defineComponent({\n name: 'JsonFields',\n props: {\n /* What `useJsonForm` returned. /\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n /* Defaults to the components `useJsonForm` got. /\n components: { type: Object as PropType<FieldComponents> },\n /* Renders only these fields, by path, in the order of the definition. /\n only: { type: Array as PropType<readonly string[]> },\n /* Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. /\n except: { type: Array as PropType<readonly string[]> },\n },\n setup(props) {\n const ctx: RenderContext = {\n of: props.of,\n components: resolveComponents(props.components, props.of),\n }\n const nodes = selectFields(props.of.fields, { only: props.only, except: props.except })\n checkComponents(nodes, ctx.components)\n\n return () => renderFields(ctx, nodes, [])\n },\n})\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/vue'\nimport {\n createSchemaBuilder,\n type FieldNode,\n type JsonForm,\n type JsonFormSchema,\n type SchemaBuilder,\n type TypedJsonFormSchema,\n} from '@whatsaaaa/form-builder-schema'\nimport type { FieldComponents } from './field-components'\n\nexport interface UseJsonFormOptions {\n /* Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. /\n builder?: SchemaBuilder\n /* Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. /\n components?: FieldComponents\n /* When a field is validated the first time, as in Formisch. /\n validate?: ValidationMode\n /* When a field is validated again after that, as in Formisch. /\n revalidate?: Exclude<ValidationMode, 'initial'>\n}\n\n/* What `useJsonForm` returns. Pass it to `<JsonFields>`. /\nexport interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {\n /* The Formisch form: pass it to Formisch's `<Form :of>`, or to any of its methods. /\n readonly form: FormStore<TSchema>\n readonly definition: JsonForm\n readonly builder: SchemaBuilder\n /* The components from the options, if any. /\n readonly components: FieldComponents \| undefined\n /* The definition's fields as a tree, the way `<JsonFields>` renders them. /\n readonly fields: readonly FieldNode[]\n}\n\n/* Any form `useJsonForm` returns, typed or not: what the components take. /\nexport type AnyJsonFormInstance = JsonFormInstance<FormSchema>\n\n/\n A Formisch form for a definition, with its schema and initial input from the builder. A\n * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it\n * comes from outside your code. The definition is read once: give the form a new `:key` to use\n * another one.\n /\nexport function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance\n/\n The same, with the form typed by your input type, and output type when it differs, so Formisch's\n * paths and values are checked. The types are yours to keep in step with the definition.\n */\nexport function useJsonForm<TInput extends object, TOutput extends object = TInput>(\n definition: JsonForm,\n options?: UseJsonFormOptions,\n): JsonFormInstance<TypedJsonFormSchema<TInput, TOutput>>\nexport function useJsonForm(\n definition: JsonForm,\n options: UseJsonFormOptions = {},\n): JsonFormInstance {\n const builder = options.builder ?? createSchemaBuilder()\n const form = useForm({\n schema: builder.build(definition),\n initialInput: builder.getInitialInput(definition),\n validate: options.validate,\n revalidate: options.revalidate,\n })\n const { components } = options\n return { form, definition, builder, components, fields: builder.getFieldTree(definition) }\n}\n"],"mappings":";;;;;AAOA,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;EACL,IAAI;GAAE,MAAM;GAAyC,UAAU;EAAK;EACpE,MAAM;GAAE,MAAM;GAA+B,UAAU;EAAK;EAC5D,MAAM;GAAE,MAAM;GAA8B,UAAU;EAAK;EAC3D,WAAW;GAAE,MAAM,CAAC,QAAQ,QAAQ;GAA0B,UAAU;EAAK;;EAE7E,YAAY;GAAE,MAAM;GAAkD,UAAU;EAAK;CACvF;CACA,MAAM,OAAO;EAEX,MAAM,aAAa,MAAM;EACzB,MAAM,QAAQ,oBACN,MAAM,GAAG,aACR,EAAE,MAAM,KAAK,EAAE,EACxB;EAEA,MAAM,UAAU;GAEd,WACE,OAAO,MAAM,GAAG,MAAM;IACpB,MAAM,KAAK;IACX,cAAc,MAAM,GAAG,QAAQ,aAAa,MAAM,KAAK,KAAK;GAC9D,CAAC;GACH,SAAS,UAAkB,OAAO,MAAM,GAAG,MAAM;IAAE,MAAM,KAAK;IAAG,IAAI;GAAM,CAAC;GAC5E,OAAO,MAAc,OAAe,KAAK,MAAM,GAAG,MAAM;IAAE,MAAM,KAAK;IAAG;IAAM;GAAG,CAAC;EACpF;EAEA,aAAa;GACX,MAAM,aAA8B;IAClC,OAAO,MAAM,KAAK;IAClB,MAAM,MAAM;IACZ,OAAO,MAAM;IACb,QAAQ,MAAM;IACd,GAAG;GACL;GACA,OAAO,EAAE,MAAM,WAAW,YAAY,EACpC,UAAU,EAAE,YAA+B,MAAM,WAAW,KAAK,EACnE,CAAC;EACH;CACF;AACF,CAAC;;;ACrCD,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;EACL,IAAI;GAAE,MAAM;GAAyC,UAAU;EAAK;EACpE,MAAM;GAAE,MAAM;GAA+B,UAAU;EAAK;EAC5D,MAAM;GAAE,MAAM;GAA8B,UAAU;EAAK;EAC3D,WAAW;GAAE,MAAM,CAAC,QAAQ,QAAQ;GAA0B,UAAU;EAAK;CAC/E;CACA,MAAM,OAAO;EAEX,MAAM,QAAQ,eACN,MAAM,GAAG,aACR,EAAE,MAAM,MAAM,KAAc,EACrC;EAEA,MAAM,YAAY,UAAmB;GACnC,MAAM,QAAQ,YAAY,OAAO,MAAM,IAAI;EAC7C;EAEA,aAAa;GACX,MAAM,aAA8B;IAClC,OAAO,MAAM,KAAK;IAClB,MAAM,MAAM;IACZ,MAAM,MAAM,KAAK;IACjB,UAAU,WAAW,MAAM,KAAK,KAAK;IACrC,OAAO,MAAM;IACb,QAAQ,MAAM;IACd,YAAY,MAAM;IAClB;GACF;GACA,OAAO,EAAE,MAAM,WAAW,UAAU;EACtC;CACF;AACF,CAAC;;;AC/BD,SAAgB,kBACd,YACA,IACiB;CACjB,MAAM,WAAW,cAAc,GAAG;CAClC,IAAI,CAAC,UACH,MAAM,IAAI,UAAU,qEAAqE;CAE3F,OAAO;AACT;;AAGA,SAAgB,aACd,KACA,OACA,SACS;CACT,OAAO,MAAM,KAAK,MAAM,aAAa,YAAY,KAAK,MAAM,SAAS,QAAQ,CAAC;AAChF;AAEA,SAAgB,YACd,KACA,MACA,SACA,UACO;CACP,MAAM,YAAY,IAAI,WAAW,KAAK;CACtC,MAAM,OAAO,YAAY,KAAK,UAAU,OAAO;CAC/C,MAAM,MAAM,UAAU,IAAI,KAAK,IAAI;CACnC,QAAQ,KAAK,MAAb;EACE,KAAK,WACH,OAAO,EAAE,WAAW;GAAE;GAAK,OAAO,KAAK;EAAM,CAAC;EAChD,KAAK,SACH,OAAO,EACL,WACA;GAAE;GAAK,OAAO,KAAK;GAAO;EAAK,GAC/B,EAAE,eAAe,aAAa,KAAK,KAAK,UAAU,OAAO,EAAE,CAC7D;EACF,KAAK,SACH,OAAO,EAAE,YAAY;GACnB;GACA,IAAI,IAAI;GACR;GACA;GACA;GACA,aAAa,UAAkB,aAAa,KAAK,KAAK,UAAU,CAAC,GAAG,SAAS,KAAK,CAAC;EACrF,CAAC;EACH,KAAK,SACH,OAAO,EAAE,YAAY;GAAE;GAAK,IAAI,IAAI;GAAI;GAAM;GAAM;EAAU,CAAC;CACnE;AACF;;;;;;ACtDA,MAAa,YAAY,gBAAgB;CACvC,MAAM;CACN,OAAO;;EAEL,IAAI;GAAE,MAAM;GAAyC,UAAU;EAAK;;EAEpE,MAAM;GAAE,MAAM;GAAQ,UAAU;EAAK;;EAErC,YAAY,EAAE,MAAM,OAAoC;CAC1D;CACA,MAAM,OAAO;EACX,MAAM,OAAO,UAAU,MAAM,GAAG,QAAQ,MAAM,MAAM,EAAE,QAAQ,KAAK,CAAC;EACpE,MAAM,MAAqB;GACzB,IAAI,MAAM;GACV,YAAY,kBAAkB,MAAM,YAAY,MAAM,EAAE;EAC1D;EACA,gBAAgB,CAAC,IAAI,GAAG,IAAI,UAAU;EAEtC,aAAa,YAAY,KAAK,MAAM,CAAC,GAAG,CAAC;CAC3C;AACF,CAAC;;;;;;;ACnBD,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;;EAEL,IAAI;GAAE,MAAM;GAAyC,UAAU;EAAK;;EAEpE,YAAY,EAAE,MAAM,OAAoC;;EAExD,MAAM,EAAE,MAAM,MAAqC;;EAEnD,QAAQ,EAAE,MAAM,MAAqC;CACvD;CACA,MAAM,OAAO;EACX,MAAM,MAAqB;GACzB,IAAI,MAAM;GACV,YAAY,kBAAkB,MAAM,YAAY,MAAM,EAAE;EAC1D;EACA,MAAM,QAAQ,aAAa,MAAM,GAAG,QAAQ;GAAE,MAAM,MAAM;GAAM,QAAQ,MAAM;EAAO,CAAC;EACtF,gBAAgB,OAAO,IAAI,UAAU;EAErC,aAAa,aAAa,KAAK,OAAO,CAAC,CAAC;CAC1C;AACF,CAAC;;ACmBD,SAAgB,YACd,YACA,UAA8B,CAAC,GACb;CAClB,MAAM,UAAU,QAAQ,WAAW,oBAAoB;CACvD,MAAM,OAAO,QAAQ;EACnB,QAAQ,QAAQ,MAAM,UAAU;EAChC,cAAc,QAAQ,gBAAgB,UAAU;EAChD,UAAU,QAAQ;EAClB,YAAY,QAAQ;CACtB,CAAC;CACD,MAAM,EAAE,eAAe;CACvB,OAAO;EAAE;EAAM;EAAY;EAAS;EAAY,QAAQ,QAAQ,aAAa,UAAU;CAAE;AAC3F"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../src/json-form-steps.ts","../src/array-field.ts","../src/value-field.ts","../src/render-fields.ts","../src/json-field.ts","../src/render-layout.ts","../src/json-fields.ts","../src/use-json-form.ts"],"sourcesContent":["import {\n focus,\n type FormStore,\n getErrors,\n getInput,\n setErrors,\n validate,\n type ValidationMode,\n} from '@formisch/vue'\nimport {\n type FieldPath,\n fieldPathsOf,\n type FormLayout,\n issuesOfStep,\n type LayoutStep,\n type StepIssue,\n} from '@whatsaaaa/form-builder-schema'\nimport { computed, getCurrentScope, nextTick, onScopeDispose, ref, watch } from 'vue'\n\n/** The steps of a form, from its layout. A form without `steps` in its layout has one. /\nexport interface JsonFormSteps {\n /* Every step, in order. /\n readonly list: readonly LayoutStep[]\n /* The index of the current step in `list`. /\n readonly index: number\n /* The step `<JsonFields>` renders. /\n readonly current: LayoutStep\n readonly isFirst: boolean\n readonly isLast: boolean\n /\n Validates the whole form, and moves to the next step when the fields of this one have no\n * issues. Otherwise it stays, and focuses the first field with an issue, in layout order.\n * Resolves to whether it moved.\n /\n next(): Promise<boolean>\n /* Moves to the step before, without validating. /\n back(): void\n /\n Moves to the step at `index`. Back is free, and forward validates every step on the way, like\n * `next()`, and stops at the first with issues. Resolves to whether it got there.\n /\n goTo(index: number): Promise<boolean>\n}\n\n/* A field's error messages in Formisch, or null. /\ntype Errors = [string, ...string[]] \| null\n\n/* What a field tells the steps it was through, by Formisch's name for the validation mode. /\nexport type FieldEvent = Exclude<ValidationMode, 'initial' \| 'submit'>\n\n/* Revalidates a step that failed Next on each field event, like a form after a failed submit. /\ntype FieldEvents = (event: FieldEvent) => void\n\nconst fieldEvents = new WeakMap<FormStore, FieldEvents>()\n\n/* What a field of `form` calls on each event, for a form with steps. Undefined with one step. /\nexport const fieldEventsOf = (form: FormStore): FieldEvents \| undefined => fieldEvents.get(form)\n\n/\n The steps of `layout`, for `useJsonForm`. With more than one, a step shows the errors it had\n * when the user left it, and none the first time they get to it, a step that failed Next revalidates as the user fixes it, a submit\n * before the last step moves on like Next, and a submit that fails because of an earlier step\n * goes back to it.\n /\nexport function useJsonFormSteps(\n form: FormStore,\n layout: FormLayout,\n modes: {\n validate?: ValidationMode \| undefined\n revalidate?: Exclude<ValidationMode, 'initial'> \| undefined\n },\n): JsonFormSteps {\n const list = layout.steps\n const index = ref(0)\n const current = computed(() => list[index.value] as LayoutStep)\n // The errors each step had when the user left it, by the JSON of each field's path.\n const left = new Map<number, Map<string, Errors>>()\n // The steps that failed Next, and haven't passed since.\n const failed = new Set<number>()\n\n async function goTo(target: number): Promise<boolean> {\n if (!Number.isInteger(target) \|\| target < 0 \|\| target >= list.length) {\n throw new RangeError(`No step ${target}. The form has ${list.length}.`)\n }\n if (target <= index.value) {\n move(target)\n return true\n }\n const { issues } = await validate(form)\n for (let at = index.value; at < target; at++) {\n const found = issuesOfStep(list[at] as LayoutStep, issues)\n if (found.length) {\n await stop(at, found)\n return false\n }\n failed.delete(at)\n }\n move(target)\n return true\n }\n\n /\n Moves to a step as the user left it: with the errors it had then, and none the first time, and\n * revalidating if it failed Next. Validating the steps before set errors on its fields, which\n * the user never saw.\n /\n function move(target: number) {\n leave()\n const errors = left.get(target)\n for (const path of fieldPathsOf(list[target] as LayoutStep, getInput(form))) {\n setErrors(form, { path, errors: errors?.get(JSON.stringify(path)) ?? null } as never)\n }\n index.value = target\n }\n\n /* Keeps the errors of the current step, for when the user comes back to it. /\n function leave() {\n const paths = fieldPathsOf(current.value, getInput(form))\n const errors = paths.map((path): [string, Errors] => [JSON.stringify(path), errorsAt(path)])\n left.set(index.value, new Map(errors))\n }\n\n const errorsAt = (path: FieldPath): Errors => getErrors(form, { path } as never)\n\n /* Stays on, or goes to, the step at `at`, with its issues shown. /\n async function stop(at: number, found: readonly StepIssue[]) {\n failed.add(at)\n if (at !== index.value) leave()\n index.value = at\n await nextTick()\n // A group or an array has no element: the first field that has one gets the focus.\n const first = found.find((issue) => issue.field.role === 'value')\n if (first) focus(form, { path: first.path as never })\n }\n\n const steps: JsonFormSteps = {\n list,\n get index() {\n return index.value\n },\n get current() {\n return current.value\n },\n get isFirst() {\n return index.value === 0\n },\n get isLast() {\n return index.value === list.length - 1\n },\n next: () => (steps.isLast ? Promise.resolve(false) : goTo(index.value + 1)),\n back: () => {\n if (index.value > 0) move(index.value - 1)\n },\n goTo,\n }\n if (list.length > 1) watchSteps()\n return steps\n\n function watchSteps() {\n fieldEvents.set(form, (event) => {\n // In the other modes, Formisch revalidates a field with errors itself.\n const validateMode = modes.validate ?? 'submit'\n if (!failed.has(index.value) \|\| validateMode !== 'submit' \|\| form.isSubmitted) return\n if (event === (modes.revalidate ?? 'input')) void validate(form)\n })\n\n // A submit that fails because of a step before the last, e.g. on a form rule, goes back to it.\n watch(\n () => form.isSubmitting,\n async (submitting, was) => {\n if (submitting \|\| !was \|\| form.isValid) return\n const { issues } = await validate(form)\n const at = list.findIndex((step) => issuesOfStep(step, issues).length)\n if (at !== -1 && at < index.value)\n await stop(at, issuesOfStep(list[at] as LayoutStep, issues))\n },\n )\n\n // Before the last step, a submit, like Enter in a step with a single text input, is a Next.\n // It is caught on its way down to the form, before Formisch's own handler sees it.\n if (typeof document === 'undefined') return\n const onSubmit = (event: Event) => {\n if (event.target !== formElementOf(form) \|\| steps.isLast) return\n event.preventDefault()\n event.stopImmediatePropagation()\n void steps.next()\n }\n document.addEventListener('submit', onSubmit, { capture: true })\n if (getCurrentScope()) {\n onScopeDispose(() => document.removeEventListener('submit', onSubmit, { capture: true }))\n }\n }\n}\n\n/* The `<form>` Formisch's `<Form>` renders, which it keeps on the store for its `submit()`. /\nfunction formElementOf(form: FormStore): HTMLFormElement \| undefined {\n return (form as unknown as { '~internal'?: { element?: HTMLFormElement } })['~internal']?.element\n}\n","import { insert, move, remove, useFieldArray } from '@formisch/vue'\nimport type { FieldNode, FieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type Component, defineComponent, h, type PropType, type VNode } from 'vue'\nimport type { ArrayFieldProps } from './field-components'\nimport { fieldEventsOf } from './json-form-steps'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/* Connects a container of kind `array` to Formisch, and renders your component for it. /\nexport const ArrayField = defineComponent({\n name: 'ArrayField',\n props: {\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n node: { type: Object as PropType<FieldNode>, required: true },\n path: { type: Array as PropType<FieldPath>, required: true },\n component: { type: [Object, Function] as PropType<Component>, required: true },\n /* Renders the fields of the item at `index`. /\n renderItem: { type: Function as PropType<(index: number) => VNode[]>, required: true },\n },\n setup(props) {\n // The path comes from the definition at runtime, so the schema's types can't check it.\n const path = () => props.path as never\n const array = useFieldArray(\n () => props.of.form,\n () => ({ path: path() }),\n )\n\n // In a form with steps, a step that failed Next revalidates on a change of its items too.\n const events = fieldEventsOf(props.of.form)\n const methods = {\n // A new item starts with the defaults of its fields, like the items of a new form.\n add: () => {\n insert(props.of.form, {\n path: path(),\n initialInput: props.of.builder.getItemInput(props.node.field) as never,\n })\n events?.('input')\n },\n remove: (index: number) => {\n remove(props.of.form, { path: path(), at: index })\n events?.('input')\n },\n move: (from: number, to: number) => {\n move(props.of.form, { path: path(), from, to })\n events?.('input')\n },\n }\n\n return () => {\n const fieldProps: ArrayFieldProps = {\n field: props.node.field,\n path: props.path,\n items: array.items,\n errors: array.errors,\n ...methods,\n }\n return h(props.component, fieldProps, {\n default: ({ index }: { index: number }) => props.renderItem(index),\n })\n }\n },\n})\n","import { type FieldElementProps, useField } from '@formisch/vue'\nimport {\n coerceInput,\n type FieldNode,\n type FieldPath,\n isRequired,\n} from '@whatsaaaa/form-builder-schema'\nimport { type Component, defineComponent, h, type PropType } from 'vue'\nimport type { ValueFieldProps } from './field-components'\nimport { fieldEventsOf } from './json-form-steps'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/* Connects a field with a value to Formisch, and renders your component for it. /\nexport const ValueField = defineComponent({\n name: 'ValueField',\n props: {\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n node: { type: Object as PropType<FieldNode>, required: true },\n path: { type: Array as PropType<FieldPath>, required: true },\n component: { type: [Object, Function] as PropType<Component>, required: true },\n },\n setup(props) {\n // The path comes from the definition at runtime, so the schema's types can't check it.\n const field = useField(\n () => props.of.form,\n () => ({ path: props.path as never }),\n )\n\n // In a form with steps, a step that failed Next revalidates on these events too.\n const events = fieldEventsOf(props.of.form)\n const setInput = (input: unknown) => {\n field.input = coerceInput(input, props.node) as never\n events?.('input')\n }\n const inputProps: FieldElementProps = events\n ? {\n get name() {\n return field.props.name\n },\n get autofocus() {\n return field.props.autofocus\n },\n ref: (element) => field.props.ref(element),\n onFocus: () => {\n field.props.onFocus()\n events('touch')\n },\n onChange: (event) => {\n field.props.onChange(event)\n events('change')\n },\n onBlur: () => {\n field.props.onBlur()\n events('blur')\n },\n }\n : field.props\n\n return () => {\n const fieldProps: ValueFieldProps = {\n field: props.node.field,\n path: props.path,\n kind: props.node.kind,\n required: isRequired(props.node.field),\n input: field.input,\n errors: field.errors,\n inputProps,\n setInput,\n }\n return h(props.component, fieldProps)\n }\n },\n})\n","import { dotPathOf, type FieldNode, toFieldPath } from '@whatsaaaa/form-builder-schema'\nimport { type Component, h, type VNode } from 'vue'\nimport { ArrayField } from './array-field'\nimport type { FieldComponents } from './field-components'\nimport type { AnyJsonFormInstance } from './use-json-form'\nimport { ValueField } from './value-field'\n\n/* What `<JsonFields>` and `<JsonField>` render with. /\nexport interface RenderContext {\n of: AnyJsonFormInstance\n components: FieldComponents\n}\n\n/* The components from the props, or else the ones `useJsonForm` got. /\nexport function resolveComponents(\n components: FieldComponents \| undefined,\n of: AnyJsonFormInstance,\n): FieldComponents {\n const resolved = components ?? of.components\n if (!resolved) {\n throw new TypeError('No field components. Pass them to useJsonForm, or to the component.')\n }\n return resolved\n}\n\n/* `indexes` are the indexes of the array items the fields are in, outermost first. /\nexport function renderFields(\n ctx: RenderContext,\n nodes: readonly FieldNode[],\n indexes: readonly number[],\n): VNode[] {\n return nodes.map((node, position) =>\n renderField(ctx, node, indexes, dotPathOf(node) ?? `#${position}`, (inner) =>\n renderFields(ctx, node.children, inner),\n ),\n )\n}\n\n/\n Renders one field with its component. `children` renders the fields inside a group, or inside\n * the item of an array, with the indexes of the items they are in.\n /\nexport function renderField(\n ctx: RenderContext,\n node: FieldNode,\n indexes: readonly number[],\n key: string,\n children: (indexes: readonly number[]) => VNode[],\n): VNode {\n const component = ctx.components[node.type] as Component\n const path = toFieldPath(node.dataPath, indexes)\n switch (node.role) {\n case 'display':\n return h(component, { key, field: node.field })\n case 'group':\n return h(component, { key, field: node.field, path }, { default: () => children(indexes) })\n case 'array':\n return h(ArrayField, {\n key,\n of: ctx.of,\n node,\n path,\n component,\n renderItem: (index: number) => children([...indexes, index]),\n })\n case 'value':\n return h(ValueField, { key, of: ctx.of, node, path, component })\n }\n}\n","import { checkComponents, dotPathOf, findField } from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\nimport { type RenderContext, renderField, renderFields, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/\n Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A\n * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.\n /\nexport const JsonField = defineComponent({\n name: 'JsonField',\n props: {\n /* What `useJsonForm` returned. /\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n /* The field's path: `'email'`, or `'address.city'` for a field of a group. /\n path: { type: String, required: true },\n /* Defaults to the components `useJsonForm` got. /\n components: { type: Object as PropType<FieldComponents> },\n },\n setup(props) {\n const node = findField(props.of.fields, props.path, { placed: true })\n const ctx: RenderContext = {\n of: props.of,\n components: resolveComponents(props.components, props.of),\n }\n checkComponents([node], ctx.components)\n\n return () =>\n renderField(ctx, node, [], dotPathOf(node) ?? '#0', (indexes) =>\n renderFields(ctx, node.children, indexes),\n )\n },\n})\n","import { type IsFieldShown, type LayoutNode, shownNodes } from '@whatsaaaa/form-builder-schema'\nimport { type Component, Fragment, h, type Slots, type VNode } from 'vue'\nimport type { LayoutComponents } from './field-components'\nimport { type RenderContext, renderField } from './render-fields'\n\n/* What `<JsonFields>` renders a layout with. /\nexport interface LayoutContext extends RenderContext {\n layoutComponents: LayoutComponents\n /* The content of the layout's slots, by name. /\n slots: Slots\n /* False for a field left out with `except`. /\n isShown: IsFieldShown\n}\n\n/\n Renders layout nodes. A field left out drops out, and so does a section or a row left without\n * fields. `indexes` are the indexes of the array items the nodes are in, outermost first.\n /\nexport function renderLayout(\n ctx: LayoutContext,\n nodes: readonly LayoutNode[],\n indexes: readonly number[],\n): VNode[] {\n return shownNodes(nodes, indexes, ctx.isShown).map((node) => renderNode(ctx, node, indexes))\n}\n\nfunction renderNode(ctx: LayoutContext, node: LayoutNode, indexes: readonly number[]): VNode {\n const { key } = node\n switch (node.type) {\n case 'field':\n return renderField(ctx, node.node, indexes, key, (inner) =>\n renderLayout(ctx, node.children, inner),\n )\n case 'section':\n return h(\n ctx.layoutComponents.section as Component,\n { key, section: node.section },\n { default: () => renderLayout(ctx, node.children, indexes) },\n )\n case 'row':\n return h(\n ctx.layoutComponents.row as Component,\n { key, row: node.row, spans: node.children.map((cell) => cell.span) },\n {\n default: ({ index }: { index: number }) => [\n renderNode(ctx, node.children[index] as LayoutNode, indexes),\n ],\n },\n )\n case 'slot':\n return h(Fragment, { key }, ctx.slots[node.name]?.())\n }\n}\n","import {\n checkComponents,\n checkLayoutComponents,\n dotPathOf,\n type FieldNode,\n type LayoutNode,\n selectFields,\n} from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, Fragment, h, type PropType } from 'vue'\nimport type { FieldComponents, LayoutComponents } from './field-components'\nimport { type LayoutContext, renderLayout } from './render-layout'\nimport { type RenderContext, renderFields, resolveComponents } from './render-fields'\nimport type { AnyJsonFormInstance } from './use-json-form'\n\n/\n Renders the fields of a `useJsonForm` form with your components, one per field type, where the\n * definition's `layout` puts them: the current step, with its sections, rows and slots. It renders\n * nothing of its own, so put it inside Formisch's `<Form>` with your own submit button. Its named\n * slots fill the layout's slots. `only` and `except` are read when it sets up.\n /\nexport const JsonFields = defineComponent({\n name: 'JsonFields',\n props: {\n /* What `useJsonForm` returned. /\n of: { type: Object as PropType<AnyJsonFormInstance>, required: true },\n /* Defaults to the components `useJsonForm` got. /\n components: { type: Object as PropType<FieldComponents> },\n /* Defaults to the layout components `useJsonForm` got. /\n layoutComponents: { type: Object as PropType<LayoutComponents> },\n /* Renders only these fields, by path, in the order of the definition, without the layout. /\n only: { type: Array as PropType<readonly string[]> },\n /\n Leaves out these fields, by path, e.g. the ones you place with `<JsonField>`. A section or a\n * row left without fields drops out too.\n /\n except: { type: Array as PropType<readonly string[]> },\n /* Renders the step at this index instead of the current one, e.g. on a review page. /\n step: { type: Number },\n },\n setup(props, { slots }) {\n const ctx: RenderContext = {\n of: props.of,\n components: resolveComponents(props.components, props.of),\n }\n const nodes = selectFields(props.of.fields, { only: props.only, except: props.except })\n // Without a layout, it renders the fields the way it always did, and so with `only`.\n if (props.only \|\| !props.of.definition.layout) {\n checkComponents(nodes, ctx.components)\n return () => renderFields(ctx, nodes, [])\n }\n\n const { layout, steps } = props.of\n const except = new Set(props.except)\n const layoutCtx: LayoutContext = {\n ...ctx,\n layoutComponents: props.layoutComponents ?? props.of.layoutComponents ?? {},\n slots,\n isShown: (node) => !except.has(dotPathOf(node) ?? ''),\n }\n checkComponents(\n layout.steps.flatMap((step) => fieldsOf(step.children)),\n ctx.components,\n )\n checkLayoutComponents(layout, layoutCtx.layoutComponents, slots)\n\n return () => {\n const index = props.step ?? steps.index\n const step = steps.list[index]\n if (!step) throw new RangeError(`No step ${props.step}. The form has ${steps.list.length}.`)\n // Keyed by the step, so another step's fields don't take over this one's components.\n return h(Fragment, { key: index }, renderLayout(layoutCtx, step.children, []))\n }\n },\n})\n\n/* Every field of the nodes, display elements written in the layout included. /\nfunction fieldsOf(nodes: readonly LayoutNode[]): FieldNode[] {\n return nodes.flatMap((node) => {\n if (node.type === 'slot') return []\n const inner = fieldsOf(node.children)\n return node.type === 'field' ? [node.node, ...inner] : inner\n })\n}\n","import { type FormSchema, type FormStore, useForm, type ValidationMode } from '@formisch/vue'\nimport {\n createSchemaBuilder,\n type FieldNode,\n type FormLayout,\n type JsonForm,\n type JsonFormSchema,\n type SchemaBuilder,\n type TypedJsonFormSchema,\n} from '@whatsaaaa/form-builder-schema'\nimport type { FieldComponents, LayoutComponents } from './field-components'\nimport { type JsonFormSteps, useJsonFormSteps } from './json-form-steps'\n\nexport interface UseJsonFormOptions {\n /* Builds the schema and knows your own types and rules. Defaults to `createSchemaBuilder()`. /\n builder?: SchemaBuilder\n /* Your component for each field type, so `<JsonFields>` and `<JsonField>` don't need them. /\n components?: FieldComponents\n /* Your component for each layout type the definition's `layout` uses, like `section`. /\n layoutComponents?: LayoutComponents\n /* When a field is validated the first time, as in Formisch. /\n validate?: ValidationMode\n /* When a field is validated again after that, as in Formisch. /\n revalidate?: Exclude<ValidationMode, 'initial'>\n}\n\n/* What `useJsonForm` returns. Pass it to `<JsonFields>`. /\nexport interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema> {\n /* The Formisch form: pass it to Formisch's `<Form :of>`, or to any of its methods. /\n readonly form: FormStore<TSchema>\n readonly definition: JsonForm\n readonly builder: SchemaBuilder\n /* The components from the options, if any. /\n readonly components: FieldComponents \| undefined\n /* The layout components from the options, if any. /\n readonly layoutComponents: LayoutComponents \| undefined\n /* The definition's fields as a tree, for `<JsonFields :only>` and `<JsonField>`. /\n readonly fields: readonly FieldNode[]\n /* The definition's layout, the way `<JsonFields>` renders it. /\n readonly layout: FormLayout\n /* The layout's steps: the current one, and Next, Back and Go to. A form without steps has one. /\n readonly steps: JsonFormSteps\n}\n\n/* Any form `useJsonForm` returns, typed or not: what the components take. /\nexport type AnyJsonFormInstance = JsonFormInstance<FormSchema>\n\n/\n A Formisch form for a definition, with its schema and initial input from the builder. A\n * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it\n * comes from outside your code. The definition is read once: give the form a new `:key` to use\n * another one.\n /\nexport function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance\n/\n The same, with the form typed by your input type, and output type when it differs, so Formisch's\n * paths and values are checked. The types are yours to keep in step with the definition.\n */\nexport function useJsonForm<TInput extends object, TOutput extends object = TInput>(\n definition: JsonForm,\n options?: UseJsonFormOptions,\n): JsonFormInstance<TypedJsonFormSchema<TInput, TOutput>>\nexport function useJsonForm(\n definition: JsonForm,\n options: UseJsonFormOptions = {},\n): JsonFormInstance {\n const builder = options.builder ?? createSchemaBuilder()\n const form = useForm({\n schema: builder.build(definition),\n initialInput: builder.getInitialInput(definition),\n validate: options.validate,\n revalidate: options.revalidate,\n })\n const layout = builder.getLayout(definition)\n return {\n form,\n definition,\n builder,\n components: options.components,\n layoutComponents: options.layoutComponents,\n fields: builder.getFieldTree(definition),\n layout,\n steps: useJsonFormSteps(form, layout, options),\n }\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@whatsaaaa/form-builder-vue",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Render JSON form definitions with Formisch and your own Vue components.",
   "keywords": [
     "form",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@whatsaaaa/form-builder-schema": "^0.13.0"
+    "@whatsaaaa/form-builder-schema": "^0.14.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",