@bach.software/vue-dynamic-form 0.1.1 → 0.1.2

package/README.md

@@ -1,3 +1,11 @@
 # Vue Dynamic Form
 
 A simple yet highly extendable dynamic form system, inspired by the flexibility of XSD and powered by Vee-Validate.
+
+## Create a new release
+
+To create a new release for you PR, follow these steps:
+
+1. Create a new changeset by running `pnpm changeset`.
+2. Create your PR into the main branch.
+3. The release workflow will automatically be triggered.

package/dist/src/components/DynamicForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/DynamicForm.vue.d.ts

@@ -0,0 +1,19 @@
+import type { DefineComponent } from 'vue';
+import type { FieldMetadata } from '../types/FieldMetadata';
+export interface DynamicFormProps<Metadata extends FieldMetadata> {
+    metadata: Metadata | Metadata[];
+    template: DefineComponent<object, object, any>;
+}
+declare const _default: <Metadata extends FieldMetadata>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormProps<Metadata> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/src/components/DynamicFormItem.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DynamicFormItemProps } from '../types/DynamicFormItemProps';
+import type { FieldMetadata } from '../types/FieldMetadata';
+import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
+declare const _default: <InternalMetadata extends InternalFieldMetadata<FieldMetadata>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/src/components/DynamicFormItemArray.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DynamicFormItemProps } from '../types/DynamicFormItemProps';
+import type { FieldMetadata } from '../types/FieldMetadata';
+import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
+declare const _default: <InternalMetadata extends InternalFieldMetadata<FieldMetadata>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/src/components/DynamicFormItemChoice.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DynamicFormItemProps } from '../types/DynamicFormItemProps';
+import type { FieldMetadata } from '../types/FieldMetadata';
+import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
+declare const _default: <InternalMetadata extends InternalFieldMetadata<FieldMetadata>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/src/components/DynamicFormTemplate.vue.d.ts

@@ -0,0 +1,41 @@
+import type { FieldMetadata } from '../types/FieldMetadata';
+import type { MetadataConfiguration } from '../types/MetadataConfiguration';
+export interface DynamicFormConfigurationProps<TMetadataConfiguration extends MetadataConfiguration> {
+    type?: TMetadataConfiguration['fieldTypes'][number] | 'default';
+    metadataConfiguration: TMetadataConfiguration;
+    field?: FieldMetadata<TMetadataConfiguration['fieldTypes'][number], TMetadataConfiguration['extendedProperties']>;
+}
+declare const _default: <TMetadataConfiguration extends MetadataConfiguration>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormConfigurationProps<TMetadataConfiguration> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default: (props: {
+            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
+            type: "default" | TMetadataConfiguration["fieldTypes"][number] | undefined;
+        }) => any;
+    } & {
+        'default-input': (props: {
+            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
+        }) => any;
+    } & {
+        array: (props: {
+            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
+        }) => any;
+    } & {
+        choice: (props: {
+            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
+        }) => any;
+    } & { [K in TMetadataConfiguration["fieldTypes"][number]]: (props: {
+        field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
+    }) => any; } & { [K_1 in `${TMetadataConfiguration["fieldTypes"][number]}-input`]: (props: {
+        field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
+    }) => any; };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/src/core/defineMetadata.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Creates metadata based on your configuration.
+ * @param fieldTypes an array of fields that you would like to define. (Note: you can't use 'input' or 'children', they're reserved)
+ * @param extendedProperties extra properties that you would like to include in your metadata
+ * @returns a metadata object that can be passed to the DynamicFormTemplate component
+ */
+export declare function defineMetadata<ExtendedProperties extends object, const FieldTypes extends readonly string[]>(fieldTypes: FieldTypes, extendedProperties: ExtendedProperties): {
+    fieldTypes: readonly ("text" | Exclude<FieldTypes[number], "children" | "choice" | "input" | "array" | "text">)[];
+    extendedProperties: ExtendedProperties;
+};

package/dist/src/index.d.ts

@@ -0,0 +1,10 @@
+export { default as DynamicForm } from './components/DynamicForm.vue';
+export { default as DynamicFormItem } from './components/DynamicFormItem.vue';
+export { default as DynamicFormItemArray } from './components/DynamicFormItemArray.vue';
+export { default as DynamicFormItemChoice } from './components/DynamicFormItemChoice.vue';
+export { default as DynamicFormTemplate } from './components/DynamicFormTemplate.vue';
+export * from './core/defineMetadata';
+export * from './types/DynamicFormItemProps';
+export * from './types/FieldMetadata';
+export * from './types/GetMetadataType';
+export * from './types/RequireOnly';

package/dist/src/types/DynamicFormItemProps.d.ts

@@ -0,0 +1,13 @@
+import type { DefineComponent } from 'vue';
+import type { FieldMetadata } from '../types/FieldMetadata';
+import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
+export interface DynamicFormItemProps<InternalMetadata extends InternalFieldMetadata<FieldMetadata>> {
+    template: DefineComponent<object, object, {
+        input?: ((props: object) => any) | undefined;
+        children?: ((props: object) => any) | undefined;
+        attributes?: ((props: object) => any) | undefined;
+        choice?: ((props: object) => any) | undefined;
+        array?: ((props: object) => any) | undefined;
+    }>;
+    field: InternalMetadata;
+}

package/dist/src/types/FieldMetadata.d.ts

@@ -0,0 +1,101 @@
+import type { WatchSource } from 'vue';
+export type FieldMetadata<ExtendedFieldTypes extends string = string, ExtendedProperties extends object = object> = {
+    name?: string;
+    type?: ExtendedFieldTypes;
+    path?: string;
+    minOccurs?: number;
+    maxOccurs?: number;
+    /**
+     * Simple restrictions to the data
+     */
+    restrictions?: {
+        maxLength?: number;
+        minLength?: number;
+        pattern?: string;
+        minInclusive?: number;
+        maxInclusive?: number;
+        enumeration?: string;
+        length?: number;
+        whiteSpace?: string;
+        fractionDigits?: number;
+        totalDigits?: number;
+    };
+    children?: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>[];
+    /**
+     * Choice is similar to children, with the difference that only one of the items in the array
+     * needs to be present. If you combine this with minOccurs, you can for example create a form where
+     * only the email or phone number is required.
+     *
+     * This is inspired by the choice element in xsd (XML Schema Definition), for example:
+     *
+     * ```xml
+     * <?xml version="1.0" encoding="UTF-8"?>
+     * <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
+     *
+     *   <xs:element name="ContactInfo">
+     *     <xs:complexType>
+     *       <xs:choice>
+     *         <xs:element name="Email" type="xs:string"/>
+     *         <xs:element name="Phone" type="xs:string"/>
+     *         <xs:element name="Fax" type="xs:string"/>
+     *       </xs:choice>
+     *     </xs:complexType>
+     *   </xs:element>
+     *
+     * </xs:schema>
+     * ```
+     *
+     * This will allow the following xml options
+     * ```xml
+     * <ContactInfo>
+     *   <Email>someone@example.com</Email>
+     * </ContactInfo>
+     * or
+     * <ContactInfo>
+     *   <Phone>+31 123 456 789</Phone>
+     * </ContactInfo>
+     *
+     * but this is invalid:
+     * <ContactInfo>
+     * </ContactInfo>
+     *
+     * ```
+     *
+     */
+    choice?: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>[];
+    /**
+     * Attributes are additional metadata that can be attached to a field.
+     * These attributes can be used to provide extra information about the field,
+     * such as for example whether the data is verified.
+     *
+     * These attributes will be shown when the parent will have a value filled in.
+     *
+     * For example:
+     * ```
+     * <ContactInfo>
+     *   <Phone certainty="unverified">+31 123 456 789</Phone>
+     * </ContactInfo>
+     * or
+     * <ContactInfo>
+     *   <Phone certainty="verified">+31 123 456 789</Phone>
+     * </ContactInfo>
+     * ```
+     */
+    attributes?: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>[];
+    /**
+     * The parent of the current field.
+     */
+    parent?: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>;
+    /**
+     * You can add methods that transform the field metadata based on other external values.
+     * Make sure to include the reactive value's in your function, so that the function is re-evaluated once
+     * the value changes (internally we use a computed that is re-valuated when one of the used reactive values is changed).
+     * This way we can for example change the property minOccurs to 1 (required) if another field has a value or change one of the ExtendedAttributes.
+     *
+     * @param thisField the reactive & cloned current MetadataField that can be changed.
+     * @returns A transformed FieldMetadata
+     */
+    transformReactively?: ((thisField: Omit<FieldMetadata<ExtendedFieldTypes, ExtendedProperties>, 'name' | 'children' | 'choice' | 'attributes'> & {
+        name: string;
+    }, fieldValue?: WatchSource<any>) => Omit<FieldMetadata<ExtendedFieldTypes, ExtendedProperties>, 'children'>)[];
+} & ExtendedProperties;

package/dist/src/types/GetMetadataType.d.ts

@@ -0,0 +1,3 @@
+import type { FieldMetadata } from '../types/FieldMetadata';
+import type { MetadataConfiguration } from '../types/MetadataConfiguration';
+export type GetMetadataType<T extends MetadataConfiguration> = FieldMetadata<T['fieldTypes'][number], T['extendedProperties']>;

package/dist/src/types/InternalFieldMetadata.d.ts

@@ -0,0 +1,3 @@
+import type { FieldMetadata } from './FieldMetadata.js';
+import type { RequireOnly } from './RequireOnly.js';
+export type InternalFieldMetadata<Metadata extends FieldMetadata> = RequireOnly<Metadata, 'name' | 'type' | 'minOccurs' | 'maxOccurs'>;

package/dist/src/types/MetadataConfiguration.d.ts

@@ -0,0 +1,4 @@
+export interface MetadataConfiguration {
+    fieldTypes: readonly string[];
+    extendedProperties: object;
+}

package/dist/src/types/RequireOnly.d.ts

@@ -0,0 +1 @@
+export type RequireOnly<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/vue-dynamic-form.es.js

@@ -0,0 +1,180 @@
+import { defineComponent as y, resolveComponent as I, createElementBlock as D, openBlock as l, Fragment as F, renderList as k, createBlock as c, resolveDynamicComponent as f, withCtx as s, computed as p, createVNode as C, useSlots as A, renderSlot as $, createCommentVNode as _ } from "vue";
+const b = /* @__PURE__ */ y({
+  __name: "DynamicFormItemArray",
+  props: {
+    template: {},
+    field: {}
+  },
+  setup(t) {
+    return (a, r) => {
+      const e = I("DynamicFormItem");
+      return l(!0), D(F, null, k(a.field.children, (m) => (l(), c(e, {
+        key: m.name,
+        template: a.template,
+        field: m
+      }, null, 8, ["template", "field"]))), 128);
+    };
+  }
+}), g = /* @__PURE__ */ y({
+  __name: "DynamicFormItemChoice",
+  props: {
+    template: {},
+    field: {}
+  },
+  setup(t) {
+    return (a, r) => {
+      const e = I("DynamicFormItem");
+      return l(), c(f(a.template), {
+        type: "choice",
+        field: a.field
+      }, {
+        children: s(() => [
+          (l(!0), D(F, null, k(a.field.choice, (m) => (l(), c(e, {
+            key: m.name,
+            field: m,
+            template: a.template
+          }, null, 8, ["field", "template"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["field"]);
+    };
+  }
+}), S = /* @__PURE__ */ y({
+  __name: "DynamicFormItem",
+  props: {
+    template: {},
+    field: {}
+  },
+  setup(t) {
+    const a = p(() => !!t.field.choice?.length), r = p(() => t.field.maxOccurs > 1);
+    return (e, m) => {
+      const n = I("DynamicFormItem", !0);
+      return a.value ? (l(), c(f(e.template), {
+        key: 0,
+        type: "choice",
+        field: e.field
+      }, {
+        children: s(() => [
+          C(g, {
+            field: e.field,
+            template: e.template
+          }, null, 8, ["field", "template"])
+        ]),
+        _: 1
+      }, 8, ["field"])) : r.value ? (l(), c(f(e.template), {
+        key: 1,
+        type: "array",
+        field: e.field
+      }, {
+        children: s(() => [
+          C(b, {
+            field: e.field,
+            template: e.template
+          }, null, 8, ["field", "template"])
+        ]),
+        _: 1
+      }, 8, ["field"])) : (l(), c(f(e.template), {
+        key: 2,
+        type: e.field.type,
+        field: e.field
+      }, {
+        input: s(() => [
+          (l(), c(f(e.template), {
+            type: `${e.field.type}-input`,
+            field: e.field
+          }, null, 8, ["type", "field"]))
+        ]),
+        children: s(() => [
+          (l(!0), D(F, null, k(e.field.children, (i) => (l(), c(n, {
+            key: i.name,
+            field: i,
+            template: e.template
+          }, null, 8, ["field", "template"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["type", "field"]));
+    };
+  }
+}), B = /* @__PURE__ */ y({
+  name: "DynamicForm",
+  inheritAttrs: !1,
+  __name: "DynamicForm",
+  props: {
+    metadata: {},
+    template: {}
+  },
+  setup(t) {
+    const a = p(
+      () => Array.isArray(t.metadata) ? t.metadata : [t.metadata]
+    ), r = p(
+      () => a.value?.map((n, i) => e(n, i))
+    );
+    function e(n, i, h) {
+      if (!n)
+        return n;
+      const v = `field-${i}`, o = {
+        // Set defaults
+        name: v,
+        type: "text",
+        // Default type
+        path: n.name ?? v,
+        minOccurs: 1,
+        // by default required
+        maxOccurs: 1,
+        // by default not repeatable
+        ...n,
+        // Override some of the field properties
+        transformReactively: [...n.transformReactively ?? []],
+        parent: h
+      };
+      return o.children = (n.children ?? []).map(
+        (u, d) => e(u, d, o)
+      ), o.choice = (n.choice ?? []).map(
+        (u, d) => e(u, d, o)
+      ), o.attributes = (n.attributes ?? []).map(
+        (u, d) => e(u, d, o)
+      ), o;
+    }
+    const m = p(
+      () => t.template
+    );
+    return (n, i) => (l(!0), D(F, null, k(r.value, (h) => (l(), c(S, {
+      key: h.name,
+      template: m.value,
+      field: h
+    }, null, 8, ["template", "field"]))), 128));
+  }
+}), N = /* @__PURE__ */ y({
+  name: "DynamicFormConfiguration",
+  __name: "DynamicFormTemplate",
+  props: {
+    type: { default: "default" },
+    metadataConfiguration: {},
+    field: {}
+  },
+  setup(t) {
+    const a = A(), r = p(() => t.type && a[t.type] ? t.type : t.type?.includes("-input") ? "default-input" : "default");
+    return (e, m) => e.field ? $(e.$slots, r.value, {
+      key: 0,
+      field: e.field
+    }) : _("", !0);
+  }
+});
+function O(t, a) {
+  const r = ["text", "input", "children", "choice", "array"], e = ["text"], m = new Set(r);
+  return {
+    fieldTypes: [
+      ...e,
+      ...t.filter((i) => !m.has(i))
+    ],
+    extendedProperties: a
+  };
+}
+export {
+  B as DynamicForm,
+  S as DynamicFormItem,
+  b as DynamicFormItemArray,
+  g as DynamicFormItemChoice,
+  N as DynamicFormTemplate,
+  O as defineMetadata
+};

package/dist/vue-dynamic-form.umd.js

@@ -0,0 +1 @@
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VueDynamicForm={},o.Vue))})(this,(function(o,e){"use strict";const s=e.defineComponent({__name:"DynamicFormItemArray",props:{template:{},field:{}},setup(n){return(a,r)=>{const t=e.resolveComponent("DynamicFormItem");return e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.field.children,m=>(e.openBlock(),e.createBlock(t,{key:m.name,template:a.template,field:m},null,8,["template","field"]))),128)}}}),y=e.defineComponent({__name:"DynamicFormItemChoice",props:{template:{},field:{}},setup(n){return(a,r)=>{const t=e.resolveComponent("DynamicFormItem");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.template),{type:"choice",field:a.field},{children:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.field.choice,m=>(e.openBlock(),e.createBlock(t,{key:m.name,field:m,template:a.template},null,8,["field","template"]))),128))]),_:1},8,["field"])}}}),h=e.defineComponent({__name:"DynamicFormItem",props:{template:{},field:{}},setup(n){const a=e.computed(()=>!!n.field.choice?.length),r=e.computed(()=>n.field.maxOccurs>1);return(t,m)=>{const l=e.resolveComponent("DynamicFormItem",!0);return a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.template),{key:0,type:"choice",field:t.field},{children:e.withCtx(()=>[e.createVNode(y,{field:t.field,template:t.template},null,8,["field","template"])]),_:1},8,["field"])):r.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.template),{key:1,type:"array",field:t.field},{children:e.withCtx(()=>[e.createVNode(s,{field:t.field,template:t.template},null,8,["field","template"])]),_:1},8,["field"])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.template),{key:2,type:t.field.type,field:t.field},{input:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.template),{type:`${t.field.type}-input`,field:t.field},null,8,["type","field"]))]),children:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.field.children,i=>(e.openBlock(),e.createBlock(l,{key:i.name,field:i,template:t.template},null,8,["field","template"]))),128))]),_:1},8,["type","field"]))}}}),u=e.defineComponent({name:"DynamicForm",inheritAttrs:!1,__name:"DynamicForm",props:{metadata:{},template:{}},setup(n){const a=e.computed(()=>Array.isArray(n.metadata)?n.metadata:[n.metadata]),r=e.computed(()=>a.value?.map((l,i)=>t(l,i)));function t(l,i,f){if(!l)return l;const k=`field-${i}`,c={name:k,type:"text",path:l.name??k,minOccurs:1,maxOccurs:1,...l,transformReactively:[...l.transformReactively??[]],parent:f};return c.children=(l.children??[]).map((p,d)=>t(p,d,c)),c.choice=(l.choice??[]).map((p,d)=>t(p,d,c)),c.attributes=(l.attributes??[]).map((p,d)=>t(p,d,c)),c}const m=e.computed(()=>n.template);return(l,i)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,f=>(e.openBlock(),e.createBlock(h,{key:f.name,template:m.value,field:f},null,8,["template","field"]))),128))}}),B=e.defineComponent({name:"DynamicFormConfiguration",__name:"DynamicFormTemplate",props:{type:{default:"default"},metadataConfiguration:{},field:{}},setup(n){const a=e.useSlots(),r=e.computed(()=>n.type&&a[n.type]?n.type:n.type?.includes("-input")?"default-input":"default");return(t,m)=>t.field?e.renderSlot(t.$slots,r.value,{key:0,field:t.field}):e.createCommentVNode("",!0)}});function D(n,a){const r=["text","input","children","choice","array"],t=["text"],m=new Set(r);return{fieldTypes:[...t,...n.filter(i=>!m.has(i))],extendedProperties:a}}o.DynamicForm=u,o.DynamicFormItem=h,o.DynamicFormItemArray=s,o.DynamicFormItemChoice=y,o.DynamicFormTemplate=B,o.defineMetadata=D,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@bach.software/vue-dynamic-form",
-  "version": "0.1.1",
+  "type": "module",
+  "version": "0.1.2",
   "description": "A simple yet highly extendable dynamic form system, inspired by the flexibility of XSD and powered by Vee-Validate.",
+  "author": "Jeroen Bach <jeroen@bach.software> (https://bach.software)",
+  "homepage": "https://github.com/jeroenbach/dynamic-form",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeroenbach/dynamic-form.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jeroenbach/dynamic-form/issues"
+  },
   "keywords": [
     "dynamic-form",
     "typescript",
@@ -9,35 +19,51 @@
     "form",
     "vue"
   ],
-  "homepage": "https://github.com/jeroenbach/dynamic-form",
-  "bugs": {
-    "url": "https://github.com/jeroenbach/dynamic-form/issues"
-  },
-  "author": "Jeroen Bach <jeroen@bach.software> (https://bach.software)",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jeroenbach/dynamic-form.git"
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/vue-dynamic-form.es.js",
+      "require": "./dist/vue-dynamic-form.umd.js"
+    }
   },
+  "main": "./dist/vue-dynamic-form.umd.js",
+  "module": "./dist/vue-dynamic-form.es.js",
+  "types": "./dist/src/index.d.ts",
   "files": [
     "dist"
   ],
-  "type": "module",
-  "main": "dist/index.js",
-  "license": "MIT",
+  "peerDependencies": {
+    "vee-validate": ">=4.15",
+    "vue": ">=3.5"
+  },
   "devDependencies": {
-    "@changesets/cli": "^2.29.5",
-    "prettier": "^3.6.2",
-    "typescript": "^5.9.2",
-    "vitest": "^3.2.4"
+    "@antfu/eslint-config": "^5.2.1",
+    "@changesets/cli": "2.29.5",
+    "@types/node": "24.2.1",
+    "@vitejs/plugin-vue": "6.0.1",
+    "eslint": "9.33.0",
+    "eslint-plugin-format": "^1.0.1",
+    "tsc-alias": "1.8.16",
+    "typescript": "5.9.2",
+    "vee-validate": "4.15.1",
+    "vite": "7.1.2",
+    "vitest": "^3.2.4",
+    "vue": ">=3.5",
+    "vue-tsc": "3.0.5"
   },
   "scripts": {
-    "build": "tsc",
-    "dev": "vitest",
+    "check-updates": "pnpm dlx npm-check-updates -i --format group",
+    "dev": "pnpm build:watch & cd ./playgrounds/storybook && pnpm dev",
+    "build": "vite build && vue-tsc --emitDeclarationOnly && tsc-alias",
+    "build:watch": "vite build --watch & vue-tsc --emitDeclarationOnly --watch & tsc-alias --watch",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
     "test": "vitest run",
-    "format": "prettier --write .",
-    "check-format": "prettier --check .",
-    "ci": "npm run build && npm run check-format && npm run test",
-    "local-release": "changeset version && changeset publish",
+    "ci": "pnpm ci:test && pnpm ci:lint && pnpm ci:typecheck",
+    "ci:test": "TZ=Europe/Amsterdam vitest run",
+    "ci:lint": "eslint",
+    "ci:typecheck": "vue-tsc --noEmit",
     "changeset": "changeset"
   }
 }

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './utils.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,3 +0,0 @@
-// export * from "./components/DynamicForm.vue";
-export * from './utils.js';
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,cAAc,YAAY,CAAC"}

package/dist/utils.d.ts

@@ -1,2 +0,0 @@
-export declare const add: (a: number, b: number) => number;
-//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,WAAU,CAAC"}

package/dist/utils.js

@@ -1,2 +0,0 @@
-export const add = (a, b) => a + b;
-//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC"}

package/dist/utils.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=utils.test.d.ts.map

package/dist/utils.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.test.d.ts","sourceRoot":"","sources":["../src/utils.test.ts"],"names":[],"mappings":""}

package/dist/utils.test.js

@@ -1,6 +0,0 @@
-import { test, expect } from 'vitest';
-import { add } from './utils.js';
-test('add', () => {
-    expect(add(1, 2)).toBe(3);
-});
-//# sourceMappingURL=utils.test.js.map

package/dist/utils.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../src/utils.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;IACf,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC"}