@myparcel-dev/vue-form-builder 1.0.0-beta.53

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export type { ComponentOrHtmlElement, ComponentProps } from './types/component.types';
+export type { CreatedField, FieldConfiguration, FieldEmits, FieldHooks, FieldInstance, FieldName, FieldProps, FieldSlots, FieldWrapperProps, ModularCreatedField, FieldInstanceProps, } from './types/field.types';
+export type { CreatedForm, FormConfiguration, FormInstance, FormValues } from './types/form.types';
+export type { MaybeUnwrapNestedRefs } from './types/common.types';
+export type { SelectOption } from './types/utils.types';
+export type { Validator } from './types/validator.types';
+export { FORM_HOOKS, FormHook } from './data/hooks';
+export { MyParcelFormBuilderPlugin, createMyParcelFormBuilderPlugin } from './plugin/MyParcelFormBuilderPlugin';
+export { createField } from './utils/createField';
+export { createForm } from './utils/createForm';
+export { default } from './components/MagicForm.vue';
+export { defineField } from './utils/defineField';
+export { defineForm } from './utils/defineForm';
+export { useElement } from './composables/useElement';
+export { useForm } from './composables/useForm';
+export { useFormBuilder } from './composables/useFormBuilder';

package/dist/index.js

@@ -0,0 +1,683 @@
+var oe = Object.defineProperty;
+var ae = (s, e, t) => e in s ? oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var a = (s, e, t) => ae(s, typeof e != "symbol" ? e + "" : e, t);
+import * as ne from "vue";
+import { markRaw as F, watchEffect as le, ref as f, reactive as H, toValue as o, computed as y, watch as L, isRef as c, inject as U, defineComponent as w, toRefs as K, unref as v, openBlock as p, createBlock as g, resolveDynamicComponent as T, mergeProps as q, createSlots as ue, renderList as A, withCtx as k, renderSlot as D, normalizeProps as he, guardReactiveProps as fe, provide as G, h as E, onMounted as J, onUnmounted as de, defineAsyncComponent as ce, createElementBlock as _, Fragment as B, Suspense as Y, createCommentVNode as z, withModifiers as x, createVNode as me } from "vue";
+import { isDefined as pe, useMemoize as be } from "@vueuse/core";
+var m = /* @__PURE__ */ ((s) => (s.BeforeValidate = "beforeValidate", s.AfterValidate = "afterValidate", s.BeforeSubmit = "beforeSubmit", s.AfterSubmit = "afterSubmit", s.BeforeReset = "beforeReset", s.AfterReset = "afterReset", s.ElementChange = "afterElementChange", s.BeforeAddElement = "beforeAddElement", s.AfterAddElement = "afterAddElement", s))(m || {});
+const Q = Object.freeze(Object.values(m)), M = Object.freeze([
+  "onCreated",
+  "onActivated",
+  "onBeforeMount",
+  "onBeforeUnmount",
+  "onBeforeUpdate",
+  "onDeactivated",
+  "onMounted",
+  "onUnmounted",
+  "onUpdated"
+]), ye = Object.freeze([
+  ...M,
+  "blur",
+  "click",
+  "focus",
+  "focus",
+  "sanitize",
+  "update",
+  "validate"
+]);
+function C(s, e) {
+  return (s == null ? void 0 : s[e]) !== void 0;
+}
+var ge = async (s, e) => {
+  for (let t = 0; t < s.length; t++)
+    if (!await e(s[t], t, s))
+      return !1;
+  return !0;
+};
+const N = (s) => s.charAt(0).toUpperCase() + s.slice(1), we = (s, e) => {
+  const t = [e];
+  if (e.startsWith("before")) {
+    const i = e.replace(/^before/, "").toLowerCase();
+    t.push(i), t.push(`after${N(i)}`);
+  }
+  if (e.startsWith("after")) {
+    const i = e.replace(/^after/, "").toLowerCase();
+    t.push(i), t.push(`before${N(i)}`);
+  }
+  return t.some((i) => s.includes(i));
+};
+class X {
+  constructor(e) {
+    a(this, "availableHooks");
+    a(this, "registeredHooks", []);
+    this.availableHooks = e.hookNames ?? [], Object.keys(e).filter((t) => we(this.availableHooks, t)).forEach((t) => {
+      this.register(t, e[t]);
+    });
+  }
+  getAvailableHooks() {
+    return this.availableHooks;
+  }
+  getRegisteredHooks() {
+    return this.registeredHooks;
+  }
+  async execute(e, ...t) {
+    const i = await Promise.all(
+      this.registeredHooks.filter((r) => r.name === e).map((r) => r.callback(...t))
+    );
+    return i[i.length - 1];
+  }
+  has(e, t) {
+    return this.registeredHooks.some((i) => i.name === e && (t == null ? void 0 : t(i)));
+  }
+  register(e, t) {
+    const i = () => this.unregister(e, t);
+    return this.has(e, (r) => this.callbackMatches(r, t)) || this.registeredHooks.push({ name: e, callback: t }), i;
+  }
+  unregister(e, t) {
+    const i = () => this.registeredHooks.findIndex((l) => l.name === e && (!t || this.callbackMatches(l, t)));
+    let r;
+    for (; (r = i()) > -1; )
+      this.registeredHooks.splice(r, 1);
+  }
+  // eslint-disable-next-line class-methods-use-this
+  callbackMatches(e, t) {
+    return e.callback.toString() === t.toString();
+  }
+}
+const ve = [
+  "name",
+  "isVisible",
+  "isDirty",
+  "isDisabled",
+  "isOptional",
+  "isReadOnly",
+  "isSuspended",
+  "isTouched",
+  "isValid"
+], V = (s) => {
+  if (typeof s == "string" || typeof s == "boolean")
+    return s;
+  if (s)
+    return F(s);
+}, W = (s, e) => {
+  var t, i, r, l, h, n;
+  return {
+    ...s,
+    ...e,
+    form: {
+      ...s.form,
+      ...e.form,
+      wrapper: V(((t = e.form) == null ? void 0 : t.wrapper) ?? ((i = s.form) == null ? void 0 : i.wrapper)),
+      attributes: {
+        ...s.form.attributes,
+        ...(r = e.form) == null ? void 0 : r.attributes
+      }
+    },
+    fieldDefaults: {
+      ...s.fieldDefaults,
+      ...e.fieldDefaults,
+      wrapper: V(((l = e.fieldDefaults) == null ? void 0 : l.wrapper) ?? ((h = s.fieldDefaults) == null ? void 0 : h.wrapper)),
+      attributes: {
+        ...s.fieldDefaults.attributes,
+        ...(n = e.fieldDefaults) == null ? void 0 : n.attributes
+      }
+    }
+  };
+}, ke = () => ({
+  field: {
+    elementProp: !0
+  },
+  fieldDefaults: {
+    attributes: {},
+    wrapper: !0
+  },
+  form: {
+    attributes: {},
+    tag: "form"
+  }
+}), Z = (s) => new X(s), Ve = (s) => ({
+  validate: (e, t) => !(t == null || t === ""),
+  errorMessage: s
+}), Ee = (s) => C(s, "then") ? s : Promise.resolve(s), Oe = (s, e) => le(() => {
+  Ee(s()).then((t) => {
+    e.value = t;
+  });
+}), De = (s, e) => ({
+  disabled: !1,
+  lazy: !1,
+  optional: !1,
+  readOnly: !1,
+  visible: !0,
+  wrapper: !0,
+  ...e == null ? void 0 : e.config.fieldDefaults,
+  ...s
+});
+class Fe {
+  // eslint-disable-next-line max-lines-per-function, complexity
+  constructor(e, t) {
+    a(this, "attributes");
+    a(this, "component");
+    a(this, "config");
+    a(this, "errors", f([]));
+    a(this, "errorsTarget");
+    a(this, "form");
+    a(this, "formattedErrors");
+    a(this, "hooks");
+    a(this, "isDirty", f(!1));
+    a(this, "isDisabled", f(!1));
+    a(this, "isOptional", f(!1));
+    a(this, "isReadOnly", f(!1));
+    a(this, "isSuspended", f(!1));
+    a(this, "isTouched", f(!1));
+    a(this, "isValid", f(!0));
+    a(this, "isVisible", f(!0));
+    a(this, "label");
+    a(this, "lazy", !1);
+    a(this, "name");
+    a(this, "props");
+    a(this, "ref");
+    a(this, "validators", f([]));
+    a(this, "wrapper");
+    a(this, "destroyHandles", f([]));
+    a(this, "initialValue");
+    a(this, "blur", async () => {
+      await this.hooks.execute("beforeBlur", this, o(this.ref)), this.setIsSuspended(!0), this.setValue(await this.hooks.execute("sanitize", this, o(this.ref)) ?? o(this.ref)), o(this.isDirty) && await this.validate(), this.setIsTouched(!0), this.setIsSuspended(!1), await this.hooks.execute("afterBlur", this, o(this.ref));
+    });
+    a(this, "focus", async (e, t) => {
+      await this.hooks.execute("beforeFocus", this, t), await this.hooks.execute("focus", this, t), await this.hooks.execute("afterFocus", this, t);
+    });
+    a(this, "reset", () => {
+      this.resetValidation(), this.setIsDirty(!1), this.setIsTouched(!1), this.setValue(this.initialValue);
+    });
+    a(this, "validate", async () => {
+      var h;
+      if (this.resetValidation(), await this.hooks.execute("beforeValidate", this, o(this.ref)), o(this.isDisabled))
+        return this.setValid(!0), o(this.isValid);
+      const e = async (n) => {
+        var d;
+        const u = await n.validate(this, o(this.ref));
+        if (!u && n.errorMessage)
+          if (this.errorsTarget) {
+            const b = o(this.form.fields).find((re) => re.name === this.errorsTarget);
+            (d = o(b == null ? void 0 : b.errors)) == null || d.push(n.errorMessage);
+          } else
+            o(this.errors).push(n.errorMessage);
+        return u;
+      }, t = o(this.validators).filter((n) => !n.precedence), i = o(this.validators).filter((n) => C(n, "precedence")).sort((n, u) => (n.precedence ?? 0) - (u.precedence ?? 0));
+      o(this.isOptional) || t.push(Ve(((h = this.form.config.validationMessages) == null ? void 0 : h.required) ?? ""));
+      const r = (await Promise.all(t.map(e))).every(Boolean), l = await ge(i, e);
+      return this.setValid(r && l), await this.hooks.execute("afterValidate", this, o(this.ref), o(this.isValid)), o(this.isValid);
+    });
+    var h, n, u;
+    const i = De(t, e);
+    this.config = i, this.ref = i.ref ?? f(), this.form = e, this.hooks = Z({
+      ...i,
+      hookNames: [...ye, ...i.hookNames ?? []]
+    }), this.props = H(i.props ?? {}), this.attributes = H(i.attributes ?? {}), this.name = i.name, this.wrapper = i.wrapper, this.lazy = i.lazy, this.setVisible(i.visible ?? !0), this.setDisabled(i.disabled ?? !1), this.setOptional(i.optional ?? !1), this.setReadOnly(i.readOnly ?? !1), this.component = typeof i.component == "string" ? i.component : F(i.component), (h = e.config.initialValues) != null && h.hasOwnProperty(i.name) && this.setValue(e.config.initialValues[i.name]), this.initialValue = o(this.ref), this.errorsTarget = i.errorsTarget, this.label = i.label ? ((u = (n = e.config).renderLabel) == null ? void 0 : u.call(n, i.label)) ?? i.label : void 0, this.createValidators(t), this.formattedErrors = y(() => o(this.errors).map((d) => typeof d == "function" ? d() : d));
+    const r = () => {
+      this.initializeWatchers(t, i);
+    };
+    r(), e.on(m.AfterAddElement, r);
+    const l = L(this.ref, async (d, b) => {
+      await this.hooks.execute("beforeUpdate", this, d, b), this.setIsDirty(!0), await this.hooks.execute("afterUpdate", this, d, b);
+    });
+    this.destroyHandles.value.push(l);
+  }
+  addError(e) {
+    c(this.errors) ? this.errors.value.push(e) : this.errors.push(e);
+  }
+  async destroy() {
+    await Promise.all([
+      ...this.destroyHandles.value.map((e) => e()),
+      ...this.hooks.getRegisteredHooks().map((e) => this.hooks.unregister(e.name))
+    ]);
+  }
+  resetValidation() {
+    this.setErrors([]);
+  }
+  setDisabled(e) {
+    c(this.isDisabled) ? this.isDisabled.value = e : this.isDisabled = e;
+  }
+  setInvalid() {
+    this.setValid(!1);
+  }
+  setOptional(e) {
+    c(this.isOptional) ? this.isOptional.value = e : this.isOptional = e;
+  }
+  setReadOnly(e) {
+    c(this.isReadOnly) ? this.isReadOnly.value = e : this.isReadOnly = e;
+  }
+  setValue(e) {
+    c(this.ref) ? this.ref.value = e : this.ref = e;
+  }
+  setVisible(e) {
+    c(this.isVisible) ? this.isVisible.value = e : this.isVisible = e;
+  }
+  createValidators(e) {
+    let t = [];
+    C(e, "validate") && (t = [
+      {
+        validate: e.validate,
+        errorMessage: e.errorMessage
+      }
+    ]), C(e, "validators") && (t = e.validators ?? []), this.setValidators(t);
+  }
+  initializeWatchers(e, t) {
+    [
+      [e.visibleWhen, this.isVisible, t.visible],
+      [e.disabledWhen, this.isDisabled, t.disabled],
+      [e.optionalWhen, this.isOptional, t.optional],
+      [e.readOnlyWhen, this.isReadOnly, t.readOnly]
+    ].forEach(([i, r, l]) => {
+      if (!pe(i))
+        return;
+      r.value = l;
+      const h = Oe(() => i(this), r);
+      this.destroyHandles.value.push(h);
+    });
+  }
+  setErrors(e) {
+    c(this.errors) ? this.errors.value = e : this.errors = e;
+  }
+  setIsDirty(e) {
+    c(this.isDirty) ? this.isDirty.value = e : this.isDirty = e;
+  }
+  setIsSuspended(e) {
+    c(this.isSuspended) ? this.isSuspended.value = e : this.isSuspended = e;
+  }
+  setIsTouched(e) {
+    c(this.isTouched) ? this.isTouched.value = e : this.isTouched = e;
+  }
+  setValid(e) {
+    c(this.isValid) ? this.isValid.value = e : this.isValid = e;
+  }
+  setValidators(e) {
+    c(this.validators) ? this.validators.value = e : this.validators = e;
+  }
+}
+class Re {
+  constructor(e, t) {
+    a(this, "config");
+    a(this, "fields", f([]));
+    a(this, "hooks");
+    a(this, "isDirty");
+    a(this, "isValid");
+    a(this, "model", {});
+    a(this, "name");
+    a(this, "off");
+    a(this, "on");
+    a(this, "values");
+    a(this, "stopHandles", f([]));
+    a(this, "getFieldMemoized", be((e) => o(this.fields).find((i) => i.name === e) ?? null));
+    t.hookNames = [...Q, ...t.hookNames ?? []], this.hooks = Z(t), this.on = this.hooks.register.bind(this.hooks), this.off = this.hooks.unregister.bind(this.hooks), this.name = e, this.config = t, this.values = H({}), V(this.config.field.wrapper), V(this.config.fieldDefaults.wrapper), this.isDirty = y(() => o(this.fields).some((i) => o(i.isDirty))), this.isValid = y(() => o(this.fields).every((i) => o(i.isValid)));
+  }
+  async destroy() {
+    o(this.stopHandles).forEach((e) => e()), await Promise.all(o(this.fields).map((e) => e.destroy()));
+  }
+  async addElement(e) {
+    await this.hooks.execute(m.BeforeAddElement, this, e);
+    const t = this.addFieldInstance(e, this);
+    return await this.hooks.execute(m.AfterAddElement, this, e), t;
+  }
+  getField(e) {
+    return this.getFieldMemoized(e);
+  }
+  /** @deprecated use computed values */
+  getValue(e) {
+    const t = this.ensureGetField(e);
+    return o(t.ref);
+  }
+  /** @deprecated use computed values */
+  getValues() {
+    return o(this.values);
+  }
+  async reset() {
+    await this.hooks.execute(m.BeforeReset, this), await Promise.all(o(this.fields).map((e) => e.reset())), await this.hooks.execute(m.AfterReset, this);
+  }
+  setValue(e, t) {
+    const i = this.getField(e);
+    i && i.setValue(t);
+  }
+  setValues(e) {
+    Object.entries(e).forEach(([t, i]) => this.setValue(t, i));
+  }
+  async submit() {
+    await this.hooks.execute(m.BeforeSubmit, this), await this.validate(), await this.hooks.execute(m.AfterSubmit, this);
+  }
+  async validate() {
+    await this.hooks.execute(m.BeforeValidate, this), await Promise.all(o(this.fields).map((e) => e.validate())), await this.hooks.execute(m.AfterValidate, this);
+  }
+  removeElement(e) {
+    const t = this.getField(e);
+    if (!t)
+      return;
+    const i = o(this.fields).indexOf(t);
+    i !== -1 && o(this.fields).splice(i, 1);
+  }
+  ensureGetField(e) {
+    const t = this.getField(e);
+    if (!t)
+      throw new Error(`Field ${e} not found in form ${this.name}`);
+    return t;
+  }
+  addFieldInstance(e, t) {
+    var h;
+    const i = {
+      ...t.config.fieldDefaults,
+      ...e,
+      attributes: {
+        ...(h = t.config.fieldDefaults) == null ? void 0 : h.attributes,
+        ...e.attributes
+      }
+    };
+    V(i.component), V(i.wrapper);
+    const r = new Fe(t, i), l = L(r.ref, async (n) => {
+      await this.hooks.execute(m.ElementChange, this, r, n), o(r.isDisabled) || (this.values[i.name] = n);
+    });
+    return this.stopHandles.value.push(l), o(r.isDisabled) || (this.values[i.name] = o(r.ref)), this.model[i.name] = r, o(this.fields).push(r), this.getFieldMemoized.delete(i.name), r;
+  }
+}
+let R, O, S;
+const Se = "register", ee = () => (R ?? (R = f({})), O ?? (O = f(ke())), S ?? (S = new X({
+  hookNames: [Se]
+})), {
+  forms: R,
+  defaults: O,
+  on(s, e) {
+    S.register(s, e);
+  },
+  getForm(s) {
+    return o(R)[s];
+  },
+  // @ts-expect-error todo
+  register(s, e) {
+    S.execute("beforeRegister");
+    const t = new Re(s, W(o(O), { ...e }));
+    return o(R)[s] = t, S.execute("afterRegister", t), t;
+  },
+  setDefaults(s) {
+    O.value = W(o(O), s);
+  }
+}), Ce = {
+  install(s, e) {
+    const t = ee();
+    s._context.config.globalProperties.$formBuilder = t, e && t.setDefaults(e);
+  }
+}, Ke = (s) => ({
+  install: (e) => Ce.install(e, s)
+}), te = Symbol("form"), se = Symbol("element"), $ = () => {
+  const s = U(te);
+  if (!s)
+    throw new Error("No form found.");
+  return s;
+}, He = (s) => ({}), P = "onCreated", ie = () => ({
+  hooks: M,
+  register(s, ...e) {
+    s.has(P) && s.execute(P, ...e), s.getRegisteredHooks().filter(
+      (t) => M.includes(t.name) && t.name !== P
+    ).forEach((t) => {
+      ne[t.name](async () => {
+        await s.execute(t.name, ...e);
+      });
+    });
+  }
+}), $e = (s) => {
+  ie().register(s.hooks, s);
+}, _e = /* @__PURE__ */ w({
+  __name: "FormElement",
+  props: {
+    element: {}
+  },
+  setup(s) {
+    const e = s, t = K(e);
+    $e(t.element.value);
+    const i = y(() => {
+      var n, u;
+      const l = (u = (n = e.element.form) == null ? void 0 : n.config.field) == null ? void 0 : u.elementProp, h = {
+        ...e.element.attributes
+      };
+      return typeof e.element.component != "string" && l === !0 && (h.element = e.element), l === "spread" && Object.keys(e.element).forEach((d) => {
+        const b = d;
+        ve.includes(b) && (h[d] = e.element[b]);
+      }), h;
+    }), r = y({
+      get() {
+        return v(e.element.ref);
+      },
+      set(l) {
+        c(e.element.ref) ? e.element.ref.value = l : e.element.ref = l;
+      }
+    });
+    return (l, h) => (p(), g(T(l.element.component), q({
+      modelValue: r.value,
+      "onUpdate:modelValue": h[0] || (h[0] = (n) => r.value = n)
+    }, i.value), ue({ _: 2 }, [
+      A(Object.keys(l.$slots), (n) => ({
+        name: n,
+        fn: k((u) => [
+          D(l.$slots, n, he(fe(u || {})))
+        ])
+      }))
+    ]), 1040, ["modelValue"]));
+  }
+}), I = w({
+  name: "FormElementWrapper",
+  props: {
+    form: {
+      type: Object,
+      required: !0
+    },
+    element: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(s) {
+    G(se, s.element);
+  },
+  render() {
+    var i, r, l;
+    let s = E(
+      _e,
+      {
+        ...this.$attrs,
+        ...He(this.element),
+        element: this.element
+      },
+      this.$slots
+    );
+    const e = typeof this.element.wrapper != "boolean";
+    if (this.element.wrapper === !0 && ((i = this.form.config.field) == null ? void 0 : i.wrapper) || e) {
+      const h = s;
+      s = E(
+        e ? this.element.wrapper : (r = this.form.config.field) == null ? void 0 : r.wrapper,
+        {
+          ...this.$attrs,
+          ...(l = this.form.config.fieldDefaults) == null ? void 0 : l.attributes,
+          element: this.element
+        },
+        { default: () => h }
+      );
+    }
+    return s;
+  }
+}), Be = (s, e, t) => w({
+  setup() {
+    const i = $(), r = f();
+    return J(async () => {
+      r.value = await i.addElement(s);
+    }), de(() => {
+      r.value && (i.removeElement(r.value.name), r.value = void 0);
+    }), {
+      element: r,
+      form: i
+    };
+  },
+  emits: [
+    "afterBlur",
+    "afterSanitize",
+    "afterUpdate",
+    "afterValidate",
+    "beforeBlur",
+    "beforeSanitize",
+    "beforeUpdate",
+    "beforeValidate",
+    "blur"
+  ],
+  render() {
+    return this.element && E(
+      I,
+      {
+        ...e,
+        ...this.$attrs,
+        form: this.form,
+        element: this.element
+      },
+      {
+        ...this.$slots,
+        ...t
+      }
+    );
+  }
+}), Pe = (s) => w({
+  setup() {
+    const e = $();
+    return { element: y(() => s.name && e.getField(s.name)) };
+  },
+  render() {
+    return this.element && E("label", { for: this.element.attributes.id ?? this.element.name }, [this.element.label]);
+  }
+}), Ae = (s) => w({
+  setup() {
+    const e = $();
+    return { element: y(() => s.name ? e.getField(s.name) : void 0) };
+  },
+  render() {
+    var e, t, i;
+    return o((e = this.element) == null ? void 0 : e.errors) && ((i = (t = this.$slots).default) == null ? void 0 : i.call(t, { errors: o(this.element.errors) }));
+  }
+}), j = (s) => F(ce(() => Promise.resolve(s()))), qe = (s) => H({
+  field: s,
+  ref: s.ref ?? f(),
+  Component: F((e, t) => E(Be(s, t.attrs, t.slots))),
+  Errors: j(() => Ae(s)),
+  Label: j(() => Pe(s))
+}), Me = /* @__PURE__ */ w({
+  __name: "RenderedFormContent",
+  setup(s) {
+    const e = f(!1), t = $();
+    if (!t)
+      throw new Error("Form not found");
+    const i = y(() => o(t.fields).filter((l) => !l.teleportSelector)), r = y(() => o(t.fields).filter((l) => !!l.teleportSelector));
+    return (l, h) => (p(), _(B, null, [
+      v(t) ? (p(), g(Y, {
+        key: 0,
+        onResolve: h[0] || (h[0] = (n) => e.value = !0)
+      }, {
+        default: k(() => [
+          (p(!0), _(B, null, A(i.value, (n, u) => (p(), g(v(I), {
+            key: `element--${n.name ?? "unnamed"}--${u}`,
+            element: n,
+            form: v(t)
+          }, null, 8, ["element", "form"]))), 128))
+        ]),
+        _: 1
+      })) : z("", !0),
+      v(t) && e.value ? (p(!0), _(B, { key: 1 }, A(r.value, (n, u) => (p(), g(v(I), {
+        key: `element--${n.name ?? "unnamed"}--${u}`,
+        element: n,
+        form: v(t)
+      }, null, 8, ["element", "form"]))), 128)) : z("", !0)
+    ], 64));
+  }
+}), Ie = w({
+  name: "Fragment",
+  props: {
+    component: {
+      type: [String, Object],
+      default: null
+    }
+  }
+}), Te = (s, e) => {
+  const t = s.__vccOpts || s;
+  for (const [i, r] of e)
+    t[i] = r;
+  return t;
+};
+function ze(s, e, t, i, r, l) {
+  return s.component ? (p(), g(T(s.component), { key: 0 }, {
+    default: k(() => [
+      D(s.$slots, "default")
+    ]),
+    _: 3
+  })) : D(s.$slots, "default", { key: 1 });
+}
+const xe = /* @__PURE__ */ Te(Ie, [["render", ze]]), Ne = /* @__PURE__ */ w({
+  __name: "MagicForm",
+  props: {
+    form: {}
+  },
+  setup(s, { emit: e }) {
+    const t = f(null), i = s, r = e, h = K(i).form.value;
+    return J(() => {
+      const u = o(t);
+      u && (i.form.element = u);
+    }), G(te, h), Q.forEach((u) => {
+      i.form.on(u, (d) => {
+        r(u, d);
+      });
+    }), ie().register(h.hooks, h), (u, d) => (p(), g(T(u.form.config.form.tag), q({
+      id: u.form.name,
+      ref_key: "formElement",
+      ref: t
+    }, u.form.config.form.attributes, {
+      onSubmit: d[0] || (d[0] = x(() => u.form.submit(), ["prevent"])),
+      onReset: d[1] || (d[1] = x(() => u.form.reset(), ["prevent"]))
+    }), {
+      default: k(() => [
+        me(xe, {
+          component: u.form.config.form.wrapper
+        }, {
+          default: k(() => [
+            u.$slots.default ? (p(), g(Y, { key: 0 }, {
+              default: k(() => [
+                D(u.$slots, "default")
+              ]),
+              fallback: k(() => [
+                D(u.$slots, "loader")
+              ]),
+              _: 3
+            })) : (p(), g(Me, { key: 1 }))
+          ]),
+          _: 3
+        }, 8, ["component"])
+      ]),
+      _: 3
+    }, 16, ["id"]));
+  }
+}), We = (s, e) => ee().register(s, e), Ge = (s, e) => {
+  const t = We(s, e);
+  return {
+    Component: F((i, r) => E(Ne, { ...r.attrs, form: t }, r.slots)),
+    instance: t
+  };
+}, Je = (s) => s, Ye = () => {
+  const s = U(se);
+  if (!s)
+    throw new Error("No element found.");
+  return s;
+};
+export {
+  Q as FORM_HOOKS,
+  m as FormHook,
+  Ce as MyParcelFormBuilderPlugin,
+  qe as createField,
+  Ge as createForm,
+  Ke as createMyParcelFormBuilderPlugin,
+  Ne as default,
+  Je as defineField,
+  We as defineForm,
+  Ye as useElement,
+  $ as useForm,
+  ee as useFormBuilder
+};

package/dist/plugin/MyParcelFormBuilderPlugin.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'vue';
+import { FormConfiguration } from '../types/form.types';
+
+export type MyParcelFormBuilderPlugin = Plugin;
+export type MyParcelFormBuilderPluginOptions = Partial<FormConfiguration>;
+/**
+ * Plugin to register the form builder.
+ */
+export declare const MyParcelFormBuilderPlugin: MyParcelFormBuilderPlugin;
+export declare const createMyParcelFormBuilderPlugin: (options?: MyParcelFormBuilderPluginOptions) => MyParcelFormBuilderPlugin;