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

@whatsaaaa/form-builder-vue 0.2.0 → 0.3.1

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

@@ -1,20 +1,26 @@
 # @whatsaaaa/form-builder-vue
-[![npm](https://img.shields.io/npm/v/@whatsaaaa/form-builder-vue)](https://www.npmjs.com/package/@whatsaaaa/form-builder-vue)
 Render JSON form definitions with [Formisch](https://formisch.dev) and your own Vue components.
-It's headless: it reads the definition, connects every field to Formisch and turns input into the values the schema expects, but it renders nothing of its own. You give it a component per field type, so it works with plain HTML, Nuxt UI or any other UI library.
+[![npm version](https://img.shields.io/npm/v/@whatsaaaa/form-builder-vue)](https://www.npmjs.com/package/@whatsaaaa/form-builder-vue)
+[![npm downloads](https://img.shields.io/npm/dm/@whatsaaaa/form-builder-vue)](https://www.npmjs.com/package/@whatsaaaa/form-builder-vue)
+[![CI](https://img.shields.io/github/actions/workflow/status/whatsaaaa/form-builder/ci.yml?branch=main&label=CI)](https://github.com/whatsaaaa/form-builder/actions/workflows/ci.yml)
+[![Coverage](https://codecov.io/gh/whatsaaaa/form-builder/graph/badge.svg?flag=vue)](https://codecov.io/gh/whatsaaaa/form-builder)
+[![Vue](https://img.shields.io/npm/dependency-version/@whatsaaaa/form-builder-vue/peer/vue?logo=vuedotjs)](https://vuejs.org)
+[![Types](https://img.shields.io/npm/types/@whatsaaaa/form-builder-vue)](https://www.npmjs.com/package/@whatsaaaa/form-builder-vue)
+[![License](https://img.shields.io/npm/l/@whatsaaaa/form-builder-vue)](https://github.com/whatsaaaa/form-builder/blob/main/LICENSE)
+This is the Vue adapter of [form-builder](https://github.com/whatsaaaa/form-builder). It is headless: it reads the definition, connects every field to Formisch and turns input into the values the schema expects, but renders nothing of its own. You give it a component per field type, so it works with plain HTML, Nuxt UI or any other UI library.
 ## Install
 ```sh
-pnpm add @whatsaaaa/form-builder-vue @formisch/vue valibot
+pnpm add @whatsaaaa/form-builder-vue @whatsaaaa/form-builder-schema @formisch/vue valibot
 ```
-Vue 3.5, `@formisch/vue` 1.1 and Valibot 1.3 or later are required. `@whatsaaaa/form-builder-schema` comes with it.
+Vue 3.5, `@formisch/vue` 1.1 and Valibot 1.3 or later are required. Install `@whatsaaaa/form-builder-schema` too: the examples import its types, such as `JsonForm`.
-## Usage
+## Example
 ```vue
 <script setup lang="ts">
@@ -40,58 +46,7 @@ function save(output: unknown) {
 </template>
 ```
-- `useJsonForm(definition, options?)` builds the schema and the initial input, and creates the Formisch form. `jsonForm.form` is a normal Formisch form, so every Formisch method works on it.
-- `<JsonFields>` renders the fields inside your `<Form>`. The form element, the submit button and anything around them are yours.
-- A definition with issues throws the builder's `DefinitionError`. Run `validate()` first when the definition comes from outside your code.
-- The definition is read once. To show another one, give the component that calls `useJsonForm` a new `:key`.
-### Options
-```ts
-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
-})
-```
-## Components
-`components` has one component per field type, by type name. Pass it to `useJsonForm`, or to `<JsonFields>` and `<JsonField>` as a prop, which wins. Several types can share one:
-```ts
-import type { FieldComponents } from '@whatsaaaa/form-builder-vue'
-export const components: FieldComponents = {
-  text: TextInput,
-  email: TextInput,
-  number: TextInput,
-  select: SelectInput,
-  group: Fieldset,
-  array: Repeater,
-  heading: Heading,
-  // …one for every type your definitions use
-}
-```
-A type that a definition uses but `components` doesn't have throws a `TypeError` that names every missing type, when `<JsonFields>` or `<JsonField>` sets up. Only the fields it renders count.
-What a component gets depends on the field's role:
-| Role    | Which fields                   | Props                                                                            | Slot                                         |
-| ------- | ------------------------------ | -------------------------------------------------------------------------------- | -------------------------------------------- |
-| value   | every field with a value       | `field`, `path`, `kind`, `required`, `input`, `errors`, `inputProps`, `setInput` | —                                            |
-| group   | a container of kind `object`   | `field`, `path`                                                                  | default: the group's fields                  |
-| array   | a container of kind `array`    | `field`, `path`, `items`, `errors`, `add`, `remove`, `move`                      | default, with `{ index }`: one item's fields |
-| display | a display element, kind `none` | `field`                                                                          | —                                            |
-The props are typed as `ValueFieldProps`, `GroupFieldProps`, `ArrayFieldProps` and `DisplayFieldProps`, and the slots as `GroupFieldSlots` and `ArrayFieldSlots`. `defineProps<ValueFieldProps>()` works in `<script setup>`.
-Your own container types render through the group or array role too, by their kind.
-### A value field
+`components` maps each field type to a component of yours. A text input looks like this:
 ```vue
 <script setup lang="ts">
@@ -115,256 +70,28 @@ defineProps<ValueFieldProps>()
 </template>
 ```
-- `field` is the field from the definition, with its `label`, `placeholder`, `options` and `ui`.
-- `path` is its Formisch path with real indexes, like `['lines', 0, 'quantity']`.
-- `inputProps` are Formisch's element props: the field's name, a ref, and focus, change and blur handlers. Bind them to the input element, so Formisch knows when the field is touched and can focus it after a failed submit.
-- `required` is true when the definition makes the field required.
-### setInput
-`setInput` sets the field's input after turning what an input element gives into what the schema expects, by the field's kind:
-| Kind                | Input                   | Value set                      |
-| ------------------- | ----------------------- | ------------------------------ |
-| `number`            | `''` or only spaces     | `undefined`                    |
-| `number`            | a numeric string, `'5'` | `5`                            |
-| `file`              | a `FileList`            | its first file, or `undefined` |
-| `array` of `file`   | a `FileList`            | an array of its files          |
-| `array` of `number` | numeric strings         | numbers                        |
-Anything else is set as it is, and the schema reports it. For a choice, like a radio or a select, set the option's value from `field.options` rather than the element's value: that keeps `2` a number and `true` a boolean.
-### A group
-```vue
-<script setup lang="ts">
-import type { GroupFieldProps, GroupFieldSlots } from '@whatsaaaa/form-builder-vue'
-defineProps<GroupFieldProps>()
-defineSlots<GroupFieldSlots>()
-</script>
-<template>
-  <fieldset>
-    <legend>{{ field.label }}</legend>
-    <slot />
-  </fieldset>
-</template>
-```
-### An array
+`jsonForm.form` is a normal Formisch form, so every Formisch method works on it.
-```vue
-<script setup lang="ts">
-import type { ArrayFieldProps, ArrayFieldSlots } from '@whatsaaaa/form-builder-vue'
+## Highlights
-defineProps<ArrayFieldProps>()
-defineSlots<ArrayFieldSlots>()
-</script>
+- Headless: one component of yours per field type, and per layout type
+- `setInput` turns what an element gives into the value the schema expects
+- Groups, arrays and display elements, with stable keys for array items
+- Sections, 12-column rows, slots and multi-step forms from the definition's layout
+- Steps that validate on Next and only show errors the user has seen
+- Conditions from the affects package, with hidden steps skipped by Next and Back
+- Fields placed in your own markup with `<JsonField>`, `only` and `except`
-<template>
-  <fieldset>
-    <legend>{{ field.label }}</legend>
-    <div v-for="(item, index) in items" :key="item">
-      <slot :index="index" />
-      <button type="button" @click="remove(index)">Remove</button>
-    </div>
-    <button type="button" @click="add()">Add</button>
-    <small v-if="errors">{{ errors[0] }}</small>
-  </fieldset>
-</template>
-```
+## Documentation
-- `items` has one id per item. Use it as the `key`, so each item keeps its inputs when one is removed or moved.
-- `add()` adds an item at the end, with the defaults its fields have in the definition.
-- `errors` are the array's own messages, like a required array's or `maxLength`'s. Its items' fields show their own.
+The [guide](https://github.com/whatsaaaa/form-builder/blob/main/frameworks/vue/docs/guide.md) covers options, components for every role, layout, steps, conditions, placing fields yourself and typing the form.
-### A display element
-```vue
-<script setup lang="ts">
-import type { DisplayFieldProps } from '@whatsaaaa/form-builder-vue'
-defineProps<DisplayFieldProps>()
-</script>
-<template>
-  <h2>{{ field.text }}</h2>
-</template>
-```
-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
-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>
-  <Form :of="jsonForm.form" @submit="save">
-    <main>
-      <JsonFields :of="jsonForm" :except="['coupon', 'acceptTerms']" />
-    </main>
-    <aside>
-      <JsonField :of="jsonForm" path="coupon" />
-      <JsonField :of="jsonForm" path="acceptTerms" />
-      <button type="submit">Place order</button>
-    </aside>
-  </Form>
-</template>
-```
-- 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 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
-The definition is data, so TypeScript doesn't know its fields, and `jsonForm.form` is typed loosely: Formisch's own functions accept only top-level paths on it. Give `useJsonForm` your input type, and your output type when it differs, and they check paths and values as in any Formisch form:
-```ts
-import { getInput, useFieldArray } from '@formisch/vue'
-interface CheckoutInput {
-  name: string
-  address: { city: string }
-  lines: { product: string; quantity: number }[]
-}
-const jsonForm = useJsonForm<CheckoutInput>(definition, { components })
-getInput(jsonForm.form, { path: ['address', 'city'] }) // string | undefined
-useFieldArray(jsonForm.form, { path: ['lines'] })
-```
+## Related packages
-- Formisch's `<Field>`, `<FieldArray>`, `useField`, `getInput` and `setInput` work on `jsonForm.form` either way. With a type, nested paths type-check, their values are typed, and so is the output your submit handler gets.
-- The type is a promise you make: nothing checks it against the definition. Keep the two in step.
-- A field you render with Formisch's `<Field>` gets none of the adapter's help, like `setInput` turning `'5'` into `5`, or the defaults of a new array item. Leave it out of `<JsonFields>` with `except`.
+- [`@whatsaaaa/form-builder-schema`](https://github.com/whatsaaaa/form-builder/tree/main/packages/schema): build Formisch-ready Valibot schemas from JSON definitions
+- [`@whatsaaaa/form-builder-affects`](https://github.com/whatsaaaa/form-builder/tree/main/packages/affects): show, hide and clear fields by conditions
+- [`@whatsaaaa/form-builder-react`](https://github.com/whatsaaaa/form-builder/tree/main/frameworks/react): the same adapter for React
-## Not included
+## License
-- 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. The layout already hides a section, a row or a step whose fields are all hidden, through `shownNodes` in the schema package.
+[MIT](https://github.com/whatsaaaa/form-builder/blob/main/LICENSE)

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-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 { 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, VisibilityState, VisibilityState as VisibilityState$1 } 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 }`. */
@@ -84,7 +84,10 @@ interface RowSlots {
 }
 /** The steps of a form, from its layout. A form without `steps` in its layout has one. */
 interface JsonFormSteps {
-  /** Every step, in order. */
+  /**
+   * The steps on show, in order. A step whose fields are all hidden by conditions, or that is
+   * hidden itself, is left out, unless it is the current one: Next and Back skip it.
+   */
   readonly list: readonly LayoutStep$1[];
   /** The index of the current step in `list`. */
   readonly index: number;
@@ -134,6 +137,12 @@ interface JsonFormInstance<TSchema extends FormSchema = JsonFormSchema$1> {
   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;
+  /**
+   * What the conditions of the builder's extensions hide for the form's input now, like the
+   * `affects` of `@whatsaaaa/form-builder-affects`: `<JsonFields>` and `<JsonField>` leave it out.
+   * Read it in your own renderers. Without conditions, it hides nothing.
+   */
+  readonly visibility: VisibilityState$1;
 }
 /** Any form `useJsonForm` returns, typed or not: what the components take. */
 type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
@@ -141,7 +150,8 @@ type AnyJsonFormInstance = JsonFormInstance<FormSchema>;
  * A Formisch form for a definition, with its schema and initial input from the builder. A
  * definition with issues throws the builder's `DefinitionError`, so run `validate()` first when it
  * comes from outside your code. The definition is read once: give the form a new `:key` to use
- * another one.
+ * another one. With conditions, it clears the fields they clear as soon as they do, with
+ * Formisch's `setInput`, wherever the fields are rendered.
  */
 export declare function useJsonForm(definition: JsonForm, options?: UseJsonFormOptions): JsonFormInstance;
 /**
@@ -152,6 +162,7 @@ export declare function useJsonForm<TInput extends object, TOutput extends objec
 /**
  * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A
  * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.
+ * It renders nothing while conditions hide the field.
  */
 export declare const JsonField: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   /** What `useJsonForm` returned. */
@@ -170,7 +181,7 @@ export declare const JsonField: import("vue").DefineComponent<import("vue").Extr
   };
 }>, () => 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<{
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** What `useJsonForm` returned. */
   of: {
     type: PropType<AnyJsonFormInstance>;
@@ -255,5 +266,5 @@ export declare const JsonFields: import("vue").DefineComponent<import("vue").Ext
     type: NumberConstructor;
   };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-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 };
+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, VisibilityState };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js CHANGED Viewed

@@ -1,38 +1,43 @@
-import { checkComponents, checkLayoutComponents, coerceInput, createSchemaBuilder, dotPathOf, fieldPathsOf, findField, isRequired, issuesOfStep, selectFields, shownNodes, toFieldPath } from "@whatsaaaa/form-builder-schema";
+import { checkComponents, checkLayoutComponents, coerceInput, createSchemaBuilder, dotPathOf, fieldPathsOf, findField, isRequired, issuesOfStep, selectFields, 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";
+import { focus, getErrors, getInput, insert, move, remove, setErrors, setInput, 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.
+* 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. The steps `visibility` hides are skipped.
 */
-function useJsonFormSteps(form, layout, modes) {
-	const list = layout.steps;
-	const index = ref(0);
-	const current = computed(() => list[index.value]);
+function useJsonFormSteps(form, layout, modes, visibility) {
+	const all = layout.steps;
+	const at = ref(0);
+	const current = computed(() => all[at.value]);
+	const list = computed(() => all.filter((step, i) => i === at.value || !visibility.value.isStepHidden(step)));
+	const index = computed(() => list.value.indexOf(current.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}.`);
+		const shown = list.value;
+		if (!Number.isInteger(target) || target < 0 || target >= shown.length) throw new RangeError(`No step ${target}. The form has ${shown.length}.`);
+		const to = all.indexOf(shown[target]);
 		if (target <= index.value) {
-			move(target);
+			move(to);
 			return true;
 		}
+		await afterTask();
 		const { issues } = await validate(form);
-		for (let at = index.value; at < target; at++) {
-			const found = issuesOfStep(list[at], issues);
+		for (const step of shown.slice(index.value, target)) {
+			const found = issuesOfStep(step, issues);
 			if (found.length) {
-				await stop(at, found);
+				await stop(all.indexOf(step), found);
 				return false;
 			}
-			failed.delete(at);
+			failed.delete(all.indexOf(step));
 		}
-		move(target);
+		move(to);
 		return true;
 	}
 	/**
@@ -43,29 +48,31 @@ function useJsonFormSteps(form, layout, modes) {
 	function move(target) {
 		leave();
 		const errors = left.get(target);
-		for (const path of fieldPathsOf(list[target], getInput(form))) setErrors(form, {
+		for (const path of fieldPathsOf(all[target], getInput(form))) setErrors(form, {
 			path,
 			errors: errors?.get(JSON.stringify(path)) ?? null
 		});
-		index.value = target;
+		at.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));
+		left.set(at.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;
+	/** Stays on, or goes to, the step at `target`, with its issues shown. */
+	async function stop(target, found) {
+		failed.add(target);
+		if (target !== at.value) leave();
+		at.value = target;
 		await nextTick();
 		const first = found.find((issue) => issue.field.role === "value");
 		if (first) focus(form, { path: first.path });
 	}
 	const steps = {
-		list,
+		get list() {
+			return list.value;
+		},
 		get index() {
 			return index.value;
 		},
@@ -76,27 +83,29 @@ function useJsonFormSteps(form, layout, modes) {
 			return index.value === 0;
 		},
 		get isLast() {
-			return index.value === list.length - 1;
+			return index.value === list.value.length - 1;
 		},
 		next: () => steps.isLast ? Promise.resolve(false) : goTo(index.value + 1),
 		back: () => {
-			if (index.value > 0) move(index.value - 1);
+			if (index.value > 0) move(all.indexOf(list.value[index.value - 1]));
 		},
 		goTo
 	};
-	if (list.length > 1) watchSteps();
+	if (all.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 (!failed.has(at.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));
+			const shown = list.value;
+			const first = shown.find((step) => issuesOfStep(step, issues).length);
+			const target = first ? all.indexOf(first) : -1;
+			if (first && shown.indexOf(first) < index.value) await stop(target, issuesOfStep(first, issues));
 		});
 		if (typeof document === "undefined") return;
 		const onSubmit = (event) => {
@@ -109,6 +118,8 @@ function useJsonFormSteps(form, layout, modes) {
 		if (getCurrentScope()) onScopeDispose(() => document.removeEventListener("submit", onSubmit, { capture: true }));
 	}
 }
+/** Resolves once the task that called it is over, and the browser is done with its event. */
+const afterTask = () => new Promise((resolve) => setTimeout(resolve));
 /** The `<form>` Formisch's `<Form>` renders, which it keeps on the store for its `submit()`. */
 function formElementOf(form) {
 	return form["~internal"]?.element;
@@ -252,9 +263,13 @@ function resolveComponents(components, of) {
 	if (!resolved) throw new TypeError("No field components. Pass them to useJsonForm, or to the component.");
 	return resolved;
 }
-/** `indexes` are the indexes of the array items the fields are in, outermost first. */
+/**
+* Renders the fields that conditions don't hide. `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, dotPathOf(node) ?? `#${position}`, (inner) => renderFields(ctx, node.children, inner)));
+	const { visibility } = ctx.of;
+	return nodes.flatMap((node, position) => visibility.isHidden(node, indexes) ? [] : [renderField(ctx, node, indexes, dotPathOf(node) ?? `#${position}`, (inner) => renderFields(ctx, node.children, inner))]);
 }
 /**
 * Renders one field with its component. `children` renders the fields inside a group, or inside
@@ -294,6 +309,7 @@ function renderField(ctx, node, indexes, key, children) {
 /**
 * Renders one field of a `useJsonForm` form, wherever you put it inside Formisch's `<Form>`. A
 * group or an array comes with its fields. Leave the field out of `<JsonFields>` with `except`.
+* It renders nothing while conditions hide the field.
 */
 const JsonField = defineComponent({
 	name: "JsonField",
@@ -318,16 +334,17 @@ const JsonField = defineComponent({
 			components: resolveComponents(props.components, props.of)
 		};
 		checkComponents([node], ctx.components);
-		return () => renderField(ctx, node, [], dotPathOf(node) ?? "#0", (indexes) => renderFields(ctx, node.children, indexes));
+		return () => props.of.visibility.isHidden(node, []) ? null : 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.
+* Renders layout nodes. A field left out or hidden by conditions drops out, and so does a section
+* hidden by them, and 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));
+	return ctx.of.visibility.shownNodes(nodes, indexes, ctx.isShown).map((node) => renderNode(ctx, node, indexes));
 }
 function renderNode(ctx, node, indexes) {
 	const { key } = node;
@@ -423,6 +440,14 @@ function useJsonForm(definition, options = {}) {
 		revalidate: options.revalidate
 	});
 	const layout = builder.getLayout(definition);
+	const visibility = builder.getVisibility(definition);
+	const state = visibility.conditional ? computed(() => visibility.of(getInput(form))) : { value: visibility.of(void 0) };
+	if (visibility.conditional) watch(() => state.value.toClear, (fields) => {
+		for (const { path, input } of fields) setInput(form, {
+			path,
+			input
+		});
+	});
 	return {
 		form,
 		definition,
@@ -431,7 +456,10 @@ function useJsonForm(definition, options = {}) {
 		layoutComponents: options.layoutComponents,
 		fields: builder.getFieldTree(definition),
 		layout,
-		steps: useJsonFormSteps(form, layout, options)
+		steps: useJsonFormSteps(form, layout, options, state),
+		get visibility() {
+			return state.value;
+		}
 	};
 }
 export { JsonField, JsonFields, useJsonForm };

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
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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"}
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 type VisibilityState,\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 /\n The steps on show, in order. A step whose fields are all hidden by conditions, or that is\n * hidden itself, is left out, unless it is the current one: Next and Back skip it.\n /\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\n * revalidates as the user fixes it, a submit before the last step moves on like Next, and a submit\n * that fails because of an earlier step goes back to it. The steps `visibility` hides are skipped.\n /\nexport function useJsonFormSteps(\n form: FormStore,\n layout: FormLayout,\n modes: {\n validate?: ValidationMode \| undefined\n revalidate?: Exclude<ValidationMode, 'initial'> \| undefined\n },\n visibility: { readonly value: VisibilityState },\n): JsonFormSteps {\n const all = layout.steps\n // The current step, by its index in `all`, as are the steps of the maps and sets below.\n const at = ref(0)\n const current = computed(() => all[at.value] as LayoutStep)\n // The current step stays on show, so it never goes from under the user.\n const list = computed(() =>\n all.filter((step, i) => i === at.value \|\| !visibility.value.isStepHidden(step)),\n )\n const index = computed(() => list.value.indexOf(current.value))\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 const shown = list.value\n if (!Number.isInteger(target) \|\| target < 0 \|\| target >= shown.length) {\n throw new RangeError(`No step ${target}. The form has ${shown.length}.`)\n }\n const to = all.indexOf(shown[target] as LayoutStep)\n if (target <= index.value) {\n move(to)\n return true\n }\n // Next goes on once the task that called it is over. A click runs its default action after its\n // handlers, and Vue can render in between: a Next button that turns into the submit button on\n // the last step would then submit the form as the user gets there.\n await afterTask()\n const { issues } = await validate(form)\n for (const step of shown.slice(index.value, target)) {\n const found = issuesOfStep(step, issues)\n if (found.length) {\n await stop(all.indexOf(step), found)\n return false\n }\n failed.delete(all.indexOf(step))\n }\n move(to)\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(all[target] as LayoutStep, getInput(form))) {\n setErrors(form, { path, errors: errors?.get(JSON.stringify(path)) ?? null } as never)\n }\n at.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(at.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 `target`, with its issues shown. /\n async function stop(target: number, found: readonly StepIssue[]) {\n failed.add(target)\n if (target !== at.value) leave()\n at.value = target\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 get list() {\n return list.value\n },\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.value.length - 1\n },\n next: () => (steps.isLast ? Promise.resolve(false) : goTo(index.value + 1)),\n back: () => {\n if (index.value > 0) move(all.indexOf(list.value[index.value - 1] as LayoutStep))\n },\n goTo,\n }\n if (all.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(at.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 shown = list.value\n const first = shown.find((step) => issuesOfStep(step, issues).length)\n const target = first ? all.indexOf(first) : -1\n if (first && shown.indexOf(first) < index.value) {\n await stop(target, issuesOfStep(first, issues))\n }\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/* Resolves once the task that called it is over, and the browser is done with its event. /\nconst afterTask = () => new Promise<void>((resolve) => setTimeout(resolve))\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/\n Renders the fields that conditions don't hide. `indexes` are the indexes of the array items the\n * fields are in, outermost first.\n /\nexport function renderFields(\n ctx: RenderContext,\n nodes: readonly FieldNode[],\n indexes: readonly number[],\n): VNode[] {\n const { visibility } = ctx.of\n // A display element is keyed by its position among all the nodes, which stays the same.\n return nodes.flatMap((node, position) =>\n visibility.isHidden(node, indexes)\n ? []\n : [\n renderField(ctx, node, indexes, dotPathOf(node) ?? `#${position}`, (inner) =>\n renderFields(ctx, node.children, inner),\n ),\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 * It renders nothing while conditions hide the field.\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 props.of.visibility.isHidden(node, [])\n ? null\n : renderField(ctx, node, [], dotPathOf(node) ?? '#0', (indexes) =>\n renderFields(ctx, node.children, indexes),\n )\n },\n})\n","import type { IsFieldShown, LayoutNode } 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 or hidden by conditions drops out, and so does a section\n * hidden by them, and a section or a row left without fields. `indexes` are the indexes of the\n * 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 ctx.of.visibility\n .shownNodes(nodes, indexes, ctx.isShown)\n .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 {\n type FormSchema,\n type FormStore,\n getInput,\n setInput,\n useForm,\n type ValidationMode,\n} 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 type VisibilityState,\n} from '@whatsaaaa/form-builder-schema'\nimport { computed, watch } from 'vue'\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 What the conditions of the builder's extensions hide for the form's input now, like the\n * `affects` of `@whatsaaaa/form-builder-affects`: `<JsonFields>` and `<JsonField>` leave it out.\n * Read it in your own renderers. Without conditions, it hides nothing.\n /\n readonly visibility: VisibilityState\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. With conditions, it clears the fields they clear as soon as they do, with\n * Formisch's `setInput`, wherever the fields are rendered.\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 const visibility = builder.getVisibility(definition)\n // Without conditions, nothing is hidden whatever the input, so the input isn't watched.\n const state = visibility.conditional\n ? computed(() => visibility.of(getInput(form)))\n : { value: visibility.of(undefined) }\n // A new state means something to clear may have come. It is empty once the fields are blank.\n if (visibility.conditional) {\n watch(\n () => state.value.toClear,\n (fields) => {\n // The paths come from the definition at runtime, so the schema's types can't check them.\n for (const { path, input } of fields) setInput(form, { path, input } as never)\n },\n )\n }\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, state),\n get visibility() {\n return state.value\n },\n }\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@whatsaaaa/form-builder-vue",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Render JSON form definitions with Formisch and your own Vue components.",
   "keywords": [
     "form",
@@ -33,11 +33,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@whatsaaaa/form-builder-schema": "^0.14.0"
+    "@whatsaaaa/form-builder-schema": "^0.15.1"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
     "@formisch/vue": "^1.1.1",
+    "@vitest/coverage-v8": "^5.0.5",
+    "@whatsaaaa/form-builder-affects": "^0.1.1",
     "happy-dom": "^20.0.0",
     "publint": "^0.3.25",
     "tsdown": "^0.23.2",
@@ -54,6 +56,7 @@
   "scripts": {
     "build": "tsdown",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "type-check": "tsc --noEmit",
     "lint:pkg": "publint && pnpm pack --pack-destination .attw && attw .attw/*.tgz --profile esm-only"
   }