@whatsaaaa/form-builder-vue 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,4 +1,4 @@
-import { allFields, coerceInput, createSchemaBuilder, dotPathOf, findField, isRequired, toFieldPath } from "@whatsaaaa/form-builder-schema";
+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";
 // src/array-field.ts
@@ -107,28 +107,14 @@ function resolveComponents(components, of) {
 	if (!resolved) throw new TypeError("No field components. Pass them to useJsonForm, or to the component.");
 	return resolved;
 }
-/** Throws for the field types that would render without a component, naming each once. */
-function checkComponents(ctx, nodes) {
-	const missing = /* @__PURE__ */ new Set();
-	const visit = (node) => {
-		if (ctx.skip(node)) return;
-		if (!Object.hasOwn(ctx.components, node.type)) missing.add(node.type);
-		node.children.forEach(visit);
-	};
-	nodes.forEach(visit);
-	if (!missing.size) return;
-	const names = [...missing].map((type) => `"${type}"`).join(", ");
-	const [noun, pronoun] = missing.size > 1 ? ["types", "them"] : ["type", "it"];
-	throw new TypeError(`No component for the field ${noun} ${names}. Add ${pronoun} to the components.`);
-}
 /** `indexes` are the indexes of the array items the fields are in, outermost first. */
 function renderFields(ctx, nodes, indexes) {
-	return nodes.filter((node) => !ctx.skip(node)).map((node, position) => renderField(ctx, node, indexes, position));
+	return nodes.map((node, position) => renderField(ctx, node, indexes, position));
 }
 function renderField(ctx, node, indexes, position) {
 	const component = ctx.components[node.type];
 	const path = toFieldPath(node.dataPath, indexes);
-	const key = node.field.name ?? `#${position}`;
+	const key = dotPathOf(node) ?? `#${position}`;
 	switch (node.role) {
 		case "display": return h(component, {
 			key,
@@ -181,10 +167,9 @@ const JsonField = defineComponent({
 		const node = findField(props.of.fields, props.path, { placed: true });
 		const ctx = {
 			of: props.of,
-			components: resolveComponents(props.components, props.of),
-			skip: () => false
+			components: resolveComponents(props.components, props.of)
 		};
-		checkComponents(ctx, [node]);
+		checkComponents([node], ctx.components);
 		return () => renderField(ctx, node, [], 0);
 	}
 });
@@ -210,24 +195,18 @@ const JsonFields = defineComponent({
 		except: { type: Array }
 	},
 	setup(props) {
-		const fields = props.of.fields;
-		const except = new Set(props.except);
-		for (const path of except) findField(fields, path);
 		const ctx = {
 			of: props.of,
-			components: resolveComponents(props.components, props.of),
-			skip: (node) => except.has(dotPathOf(node) ?? "")
+			components: resolveComponents(props.components, props.of)
 		};
-		const nodes = props.only ? onlyFields(fields, props.only) : fields;
-		checkComponents(ctx, nodes);
+		const nodes = selectFields(props.of.fields, {
+			only: props.only,
+			except: props.except
+		});
+		checkComponents(nodes, ctx.components);
 		return () => renderFields(ctx, nodes, []);
 	}
 });
-/** The fields `only` names, in the order of the definition, each once. */
-function onlyFields(fields, only) {
-	const named = new Set(only.map((path) => findField(fields, path, { placed: true })));
-	return [...allFields(fields)].filter((node) => named.has(node));
-}
 // src/use-json-form.ts
 function useJsonForm(definition, options = {}) {
 	const builder = options.builder ?? createSchemaBuilder();

package/dist/index.js.map

@@ -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 { 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  /** True for a field that isn't rendered, and so neither are the fields inside it. */\n  skip: (node: FieldNode) => boolean\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/** Throws for the field types that would render without a component, naming each once. */\nexport function checkComponents(ctx: RenderContext, nodes: readonly FieldNode[]): void {\n  const missing = new Set<string>()\n  const visit = (node: FieldNode) => {\n    if (ctx.skip(node)) return\n    if (!Object.hasOwn(ctx.components, node.type)) missing.add(node.type)\n    node.children.forEach(visit)\n  }\n  nodes.forEach(visit)\n  if (!missing.size) return\n\n  // A missing component is a mistake in the code, not in the definition, so it throws early.\n  const names = [...missing].map((type) => `\"${type}\"`).join(', ')\n  const [noun, pronoun] = missing.size > 1 ? ['types', 'them'] : ['type', 'it']\n  throw new TypeError(\n    `No component for the field ${noun} ${names}. Add ${pronoun} to the components.`,\n  )\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\n    .filter((node) => !ctx.skip(node))\n    .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 = node.field.name ?? `#${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 { findField } from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\nimport {\n  checkComponents,\n  type RenderContext,\n  renderField,\n  resolveComponents,\n} 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      skip: () => false,\n    }\n    checkComponents(ctx, [node])\n\n    return () => renderField(ctx, node, [], 0)\n  },\n})\n","import { allFields, dotPathOf, type FieldNode, findField } from '@whatsaaaa/form-builder-schema'\nimport { defineComponent, type PropType } from 'vue'\nimport type { FieldComponents } from './field-components'\nimport {\n  checkComponents,\n  type RenderContext,\n  renderFields,\n  resolveComponents,\n} 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 fields = props.of.fields\n    const except = new Set(props.except)\n    // A path that names no field is a typo, so check them even though nothing uses the result.\n    for (const path of except) findField(fields, path)\n\n    const ctx: RenderContext = {\n      of: props.of,\n      components: resolveComponents(props.components, props.of),\n      skip: (node) => except.has(dotPathOf(node) ?? ''),\n    }\n    const nodes = props.only ? onlyFields(fields, props.only) : fields\n    checkComponents(ctx, nodes)\n\n    return () => renderFields(ctx, nodes, [])\n  },\n})\n\n/** The fields `only` names, in the order of the definition, each once. */\nfunction onlyFields(fields: readonly FieldNode[], only: readonly string[]): FieldNode[] {\n  const named = new Set(only.map((path) => findField(fields, path, { placed: true })))\n  return [...allFields(fields)].filter((node) => named.has(node))\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":"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"}
+{"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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatsaaaa/form-builder-vue",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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.11.0"
+    "@whatsaaaa/form-builder-schema": "^0.13.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",