@macrulez/vue-form-schema 0.1.1 → 0.1.6

package/dist/ui.js

@@ -1,14 +1,10 @@
-import { defineComponent as h, openBlock as r, createElementBlock as i, normalizeClass as I, createTextVNode as N, toDisplayString as y, createCommentVNode as V, renderSlot as F, Fragment as B, renderList as S, ref as w, onMounted as E, onUnmounted as L, createBlock as b, withCtx as v, createElementVNode as c, computed as U, resolveComponent as z, resolveDynamicComponent as M, createSlots as P } from "vue";
-import { b as j, g as A } from "./MaskEngine-D22m29OM.js";
-const G = ["for"], H = {
+import { defineComponent as x, openBlock as t, createElementBlock as d, normalizeClass as A, createTextVNode as D, toDisplayString as v, createCommentVNode as k, renderSlot as q, Fragment as S, renderList as C, ref as K, onMounted as O, onUnmounted as Q, createBlock as V, withCtx as g, createElementVNode as b, computed as U, createVNode as p, unref as w, resolveDynamicComponent as E, resolveComponent as W, createSlots as X } from "vue";
+import { b as Y, n as I, l as Z, g as M } from "./MaskEngine-BqJQYybS.js";
+const _ = ["for"], ee = {
   key: 0,
   class: "vfs-field__required",
   "aria-hidden": "true"
-}, J = {
-  key: 1,
-  class: "vfs-field__errors",
-  role: "alert"
-}, k = /* @__PURE__ */ h({
+}, te = ["id"], F = /* @__PURE__ */ x({
   __name: "BaseField",
   props: {
     field: {},
@@ -16,31 +12,37 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   setup(e) {
-    const n = e;
-    return (d, m) => {
-      var t, l;
-      return r(), i("div", {
-        class: I(["vfs-field", [`vfs-field--${n.field.type}`, { "vfs-field--error": e.touched && ((t = e.error) == null ? void 0 : t.length) }]])
+    const r = e;
+    return (a, s) => {
+      var n, o;
+      return t(), d("div", {
+        class: A(["vfs-field", [`vfs-field--${r.field.type}`, { "vfs-field--error": e.touched && ((n = e.error) == null ? void 0 : n.length) }]])
       }, [
-        n.field.label ? (r(), i("label", {
+        r.field.label ? (t(), d("label", {
           key: 0,
-          for: n.field.name,
+          for: r.field.name,
           class: "vfs-field__label"
         }, [
-          N(y(n.field.label) + " ", 1),
-          n.field.required ? (r(), i("span", H, "*")) : V("", !0)
-        ], 8, G)) : V("", !0),
-        F(d.$slots, "default"),
-        e.touched && ((l = e.error) != null && l.length) ? (r(), i("ul", J, [
-          (r(!0), i(B, null, S(e.error, (s, o) => (r(), i("li", {
-            key: o,
+          D(v(r.field.label) + " ", 1),
+          r.field.required ? (t(), d("span", ee, "*")) : k("", !0)
+        ], 8, _)) : k("", !0),
+        q(a.$slots, "default"),
+        e.touched && ((o = e.error) != null && o.length) ? (t(), d("ul", {
+          key: 1,
+          id: `${r.field.name}-error`,
+          class: "vfs-field__errors",
+          role: "alert",
+          "aria-live": "polite"
+        }, [
+          (t(!0), d(S, null, C(e.error, (h, m) => (t(), d("li", {
+            key: m,
             class: "vfs-field__error"
-          }, y(s), 1))), 128))
-        ])) : V("", !0)
+          }, v(h), 1))), 128))
+        ], 8, te)) : k("", !0)
       ], 2);
     };
   }
-}), K = ["id", "type", "name", "value", "placeholder", "disabled", "required"], R = /* @__PURE__ */ h({
+}), le = ["id", "type", "name", "value", "placeholder", "disabled", "required"], N = /* @__PURE__ */ x({
   __name: "TextField",
   props: {
     field: {},
@@ -49,25 +51,25 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: n }) {
-    const d = e, m = n, t = w(null);
-    let l = null;
-    E(() => {
-      t.value && d.field.mask && (l = j(t.value, d.field.mask));
-    }), L(() => l == null ? void 0 : l());
-    function s(o) {
-      m("update:modelValue", o.target.value);
+  setup(e, { emit: r }) {
+    const a = e, s = r, n = K(null);
+    let o = null;
+    O(() => {
+      n.value && a.field.mask && (o = Y(n.value, a.field.mask));
+    }), Q(() => o == null ? void 0 : o());
+    function h(m) {
+      s("update:modelValue", m.target.value);
     }
-    return (o, $) => (r(), b(k, {
+    return (m, i) => (t(), V(F, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: v(() => [
-        c("input", {
+      default: g(() => [
+        b("input", {
           id: e.field.name,
           ref_key: "inputRef",
-          ref: t,
+          ref: n,
           type: e.field.type === "email" ? "email" : "text",
           name: e.field.name,
           value: e.modelValue,
@@ -75,14 +77,14 @@ const G = ["for"], H = {
           disabled: e.field.disabled === !0,
           required: e.field.required,
           class: "vfs-input",
-          onInput: s,
-          onBlur: $[0] || ($[0] = (g) => m("blur"))
-        }, null, 40, K)
+          onInput: h,
+          onBlur: i[0] || (i[0] = ($) => s("blur"))
+        }, null, 40, le)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), O = ["id", "name", "value", "placeholder", "disabled", "required"], Q = /* @__PURE__ */ h({
+}), ne = ["id", "name", "value", "placeholder", "disabled", "required"], z = /* @__PURE__ */ x({
   __name: "NumberField",
   props: {
     field: {},
@@ -91,19 +93,19 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: n }) {
-    const d = n;
-    function m(t) {
-      const l = t.target.value;
-      d("update:modelValue", l === "" ? null : Number(l));
+  setup(e, { emit: r }) {
+    const a = r;
+    function s(n) {
+      const o = n.target.value;
+      a("update:modelValue", o === "" ? null : Number(o));
     }
-    return (t, l) => (r(), b(k, {
+    return (n, o) => (t(), V(F, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: v(() => [
-        c("input", {
+      default: g(() => [
+        b("input", {
           id: e.field.name,
           type: "number",
           name: e.field.name,
@@ -112,14 +114,14 @@ const G = ["for"], H = {
           disabled: e.field.disabled === !0,
           required: e.field.required,
           class: "vfs-input",
-          onInput: m,
-          onBlur: l[0] || (l[0] = (s) => d("blur"))
-        }, null, 40, O)
+          onInput: s,
+          onBlur: o[0] || (o[0] = (h) => a("blur"))
+        }, null, 40, ne)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), W = ["id", "name", "value", "placeholder", "disabled", "required"], X = /* @__PURE__ */ h({
+}), ae = ["id", "name", "value", "placeholder", "disabled", "required"], P = /* @__PURE__ */ x({
   __name: "TextareaField",
   props: {
     field: {},
@@ -128,15 +130,15 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: n }) {
-    const d = n;
-    return (m, t) => (r(), b(k, {
+  setup(e, { emit: r }) {
+    const a = r;
+    return (s, n) => (t(), V(F, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: v(() => [
-        c("textarea", {
+      default: g(() => [
+        b("textarea", {
           id: e.field.name,
           name: e.field.name,
           value: e.modelValue,
@@ -144,14 +146,17 @@ const G = ["for"], H = {
           disabled: e.field.disabled === !0,
           required: e.field.required,
           class: "vfs-textarea",
-          onInput: t[0] || (t[0] = (l) => d("update:modelValue", l.target.value)),
-          onBlur: t[1] || (t[1] = (l) => d("blur"))
-        }, null, 40, W)
+          onInput: n[0] || (n[0] = (o) => a("update:modelValue", o.target.value)),
+          onBlur: n[1] || (n[1] = (o) => a("blur"))
+        }, null, 40, ae)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), Y = ["id", "name", "disabled", "required"], Z = ["selected"], p = ["value", "selected"], _ = /* @__PURE__ */ h({
+}), oe = {
+  key: 0,
+  class: "vfs-select-loading"
+}, re = ["id", "name", "disabled", "required"], ue = ["selected"], de = ["value", "selected"], j = /* @__PURE__ */ x({
   __name: "SelectField",
   props: {
     field: {},
@@ -160,47 +165,49 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: n }) {
-    const d = e, m = n;
-    function t(l) {
-      var $;
-      const s = l.target, o = ($ = d.field.options) == null ? void 0 : $.find((g) => String(g.value) === s.value);
-      m("update:modelValue", (o == null ? void 0 : o.value) ?? s.value);
+  setup(e, { emit: r }) {
+    const a = e, s = r, n = U(
+      () => Array.isArray(a.field.options) ? a.field.options : []
+    );
+    function o(h) {
+      const m = h.target, i = n.value.find(($) => String($.value) === m.value);
+      s("update:modelValue", (i == null ? void 0 : i.value) ?? m.value);
     }
-    return (l, s) => (r(), b(k, {
+    return (h, m) => (t(), V(F, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: v(() => [
-        c("select", {
+      default: g(() => [
+        e.field.optionsLoading ? (t(), d("div", oe, "Loading…")) : (t(), d("select", {
+          key: 1,
           id: e.field.name,
           name: e.field.name,
-          disabled: e.field.disabled === !0,
+          disabled: e.field.disabled === !0 || e.field.optionsLoading,
           required: e.field.required,
           class: "vfs-select",
-          onChange: t,
-          onBlur: s[0] || (s[0] = (o) => m("blur"))
+          onChange: o,
+          onBlur: m[0] || (m[0] = (i) => s("blur"))
         }, [
-          c("option", {
+          b("option", {
             value: "",
             disabled: "",
             selected: e.modelValue === null || e.modelValue === void 0 || e.modelValue === ""
-          }, y(e.field.placeholder ?? "Select an option"), 9, Z),
-          (r(!0), i(B, null, S(e.field.options, (o) => (r(), i("option", {
-            key: String(o.value),
-            value: String(o.value),
-            selected: e.modelValue === o.value
-          }, y(o.label), 9, p))), 128))
-        ], 40, Y)
+          }, v(e.field.placeholder ?? "Select an option"), 9, ue),
+          (t(!0), d(S, null, C(n.value, (i) => (t(), d("option", {
+            key: String(i.value),
+            value: String(i.value),
+            selected: e.modelValue === i.value
+          }, v(i.label), 9, de))), 128))
+        ], 40, re))
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ee = { class: "vfs-checkbox-label" }, le = ["id", "name", "checked", "disabled", "required"], te = {
+}), ie = { class: "vfs-checkbox-label" }, se = ["id", "name", "checked", "disabled", "required"], me = {
   key: 0,
   class: "vfs-checkbox-text"
-}, de = /* @__PURE__ */ h({
+}, G = /* @__PURE__ */ x({
   __name: "CheckboxField",
   props: {
     field: {},
@@ -209,16 +216,16 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: n }) {
-    const d = n;
-    return (m, t) => (r(), b(k, {
+  setup(e, { emit: r }) {
+    const a = r;
+    return (s, n) => (t(), V(F, {
       field: { ...e.field, label: void 0 },
       error: e.error,
       touched: e.touched
     }, {
-      default: v(() => [
-        c("label", ee, [
-          c("input", {
+      default: g(() => [
+        b("label", ie, [
+          b("input", {
             id: e.field.name,
             type: "checkbox",
             name: e.field.name,
@@ -226,16 +233,16 @@ const G = ["for"], H = {
             disabled: e.field.disabled === !0,
             required: e.field.required,
             class: "vfs-checkbox",
-            onChange: t[0] || (t[0] = (l) => d("update:modelValue", l.target.checked)),
-            onBlur: t[1] || (t[1] = (l) => d("blur"))
-          }, null, 40, le),
-          e.field.label ? (r(), i("span", te, y(e.field.label), 1)) : V("", !0)
+            onChange: n[0] || (n[0] = (o) => a("update:modelValue", o.target.checked)),
+            onBlur: n[1] || (n[1] = (o) => a("blur"))
+          }, null, 40, se),
+          e.field.label ? (t(), d("span", me, v(e.field.label), 1)) : k("", !0)
         ])
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ae = ["aria-labelledby"], re = ["name", "value", "checked", "disabled", "onChange"], ue = /* @__PURE__ */ h({
+}), ce = ["aria-labelledby"], fe = ["name", "value", "checked", "disabled", "onChange"], H = /* @__PURE__ */ x({
   __name: "RadioField",
   props: {
     field: {},
@@ -244,41 +251,41 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: n }) {
-    const d = n;
-    return (m, t) => (r(), b(k, {
+  setup(e, { emit: r }) {
+    const a = r;
+    return (s, n) => (t(), V(F, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: v(() => [
-        c("div", {
+      default: g(() => [
+        b("div", {
           class: "vfs-radio-group",
           role: "radiogroup",
           "aria-labelledby": e.field.name + "-label"
         }, [
-          (r(!0), i(B, null, S(e.field.options, (l) => (r(), i("label", {
-            key: String(l.value),
+          (t(!0), d(S, null, C(e.field.options, (o) => (t(), d("label", {
+            key: String(o.value),
             class: "vfs-radio-label"
           }, [
-            c("input", {
+            b("input", {
               type: "radio",
               name: e.field.name,
-              value: String(l.value),
-              checked: e.modelValue === l.value,
+              value: String(o.value),
+              checked: e.modelValue === o.value,
               disabled: e.field.disabled === !0,
               class: "vfs-radio",
-              onChange: (s) => d("update:modelValue", l.value),
-              onBlur: t[0] || (t[0] = (s) => d("blur"))
-            }, null, 40, re),
-            N(" " + y(l.label), 1)
+              onChange: (h) => a("update:modelValue", o.value),
+              onBlur: n[0] || (n[0] = (h) => a("blur"))
+            }, null, 40, fe),
+            D(" " + v(o.label), 1)
           ]))), 128))
-        ], 8, ae)
+        ], 8, ce)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ne = ["id", "name", "value", "disabled", "required"], oe = /* @__PURE__ */ h({
+}), ve = ["id", "name", "value", "disabled", "required"], J = /* @__PURE__ */ x({
   __name: "DateField",
   props: {
     field: {},
@@ -287,15 +294,15 @@ const G = ["for"], H = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: n }) {
-    const d = n;
-    return (m, t) => (r(), b(k, {
+  setup(e, { emit: r }) {
+    const a = r;
+    return (s, n) => (t(), V(F, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: v(() => [
-        c("input", {
+      default: g(() => [
+        b("input", {
           id: e.field.name,
           type: "date",
           name: e.field.name,
@@ -303,17 +310,101 @@ const G = ["for"], H = {
           disabled: e.field.disabled === !0,
           required: e.field.required,
           class: "vfs-input",
-          onInput: t[0] || (t[0] = (l) => d("update:modelValue", l.target.value)),
-          onBlur: t[1] || (t[1] = (l) => d("blur"))
-        }, null, 40, ne)
+          onInput: n[0] || (n[0] = (o) => a("update:modelValue", o.target.value)),
+          onBlur: n[1] || (n[1] = (o) => a("blur"))
+        }, null, 40, ve)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ie = {
+}), be = { class: "vfs-array" }, he = {
+  key: 0,
+  class: "vfs-field__label"
+}, ye = ["onClick"], $e = /* @__PURE__ */ x({
+  __name: "ArrayField",
+  props: {
+    field: {},
+    form: {},
+    components: {}
+  },
+  setup(e) {
+    const r = e, a = I(), s = {
+      text: N,
+      email: N,
+      number: z,
+      textarea: P,
+      select: j,
+      checkbox: G,
+      radio: H,
+      date: J
+    };
+    function n(c) {
+      var l;
+      return c.component ? c.component : ((l = r.components) == null ? void 0 : l[c.type]) ?? a[c.type] ?? s[c.type] ?? null;
+    }
+    const { rows: o, append: h, remove: m } = Z(r.form, r.field.name);
+    function i(c) {
+      return M(r.form.values.value, c.name);
+    }
+    function $(c, l) {
+      r.form.setField(c.name, l);
+    }
+    function B(c) {
+      var f;
+      const l = r.form;
+      (f = l.touchField) == null || f.call(l, c.name);
+    }
+    function L(c) {
+      return r.form.errors.value[c.name] ?? [];
+    }
+    function T(c) {
+      return r.form.touched.value[c.name] ?? !1;
+    }
+    return (c, l) => (t(), d("div", be, [
+      p(F, {
+        field: { ...e.field, label: void 0 },
+        error: [],
+        touched: !1
+      }, {
+        default: g(() => [
+          e.field.label ? (t(), d("div", he, v(e.field.label), 1)) : k("", !0),
+          (t(!0), d(S, null, C(w(o), (f) => (t(), d("div", {
+            key: f.key,
+            class: "vfs-array__row"
+          }, [
+            (t(!0), d(S, null, C(f.fields, (y) => (t(), d(S, {
+              key: y.name
+            }, [
+              n(y) ? (t(), V(E(n(y)), {
+                key: 0,
+                field: y,
+                "model-value": i(y),
+                error: L(y),
+                touched: T(y),
+                "onUpdate:modelValue": (u) => $(y, u),
+                onBlur: (u) => B(y)
+              }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : k("", !0)
+            ], 64))), 128)),
+            b("button", {
+              type: "button",
+              class: "vfs-array__remove",
+              onClick: (y) => w(m)(f.index)
+            }, " Remove ", 8, ye)
+          ]))), 128)),
+          b("button", {
+            type: "button",
+            class: "vfs-array__add",
+            onClick: l[0] || (l[0] = (f) => w(h)())
+          }, " + Add row ")
+        ]),
+        _: 1
+      }, 8, ["field"])
+    ]));
+  }
+}), ke = {
   key: 1,
   class: "vfs-group"
-}, se = { key: 0 }, me = ["disabled"], be = /* @__PURE__ */ h({
+}, Ve = { key: 0 }, ge = ["disabled"], xe = /* @__PURE__ */ x({
   __name: "FormRenderer",
   props: {
     form: {},
@@ -321,118 +412,194 @@ const G = ["for"], H = {
     submitLabel: {}
   },
   emits: ["submit"],
-  setup(e, { emit: n }) {
-    const d = e, m = n, t = {
-      text: R,
-      email: R,
-      number: Q,
-      textarea: X,
-      select: _,
-      checkbox: de,
-      radio: ue,
-      date: oe
+  setup(e, { emit: r }) {
+    const a = e, s = I(), n = r, o = {
+      text: N,
+      email: N,
+      number: z,
+      textarea: P,
+      select: j,
+      checkbox: G,
+      radio: H,
+      date: J
     };
-    function l(u) {
+    function h(l) {
       var f;
-      return ((f = d.components) == null ? void 0 : f[u]) ?? t[u] ?? null;
+      return l.component ? l.component : ((f = a.components) == null ? void 0 : f[l.type]) ?? s[l.type] ?? o[l.type] ?? null;
     }
-    function s(u) {
-      return A(d.form.values.value, u.name);
+    function m(l) {
+      return M(a.form.values.value, l.name);
     }
-    function o(u, f) {
-      d.form.setField(u.name, f);
+    function i(l, f) {
+      a.form.setField(l.name, f);
     }
-    function $(u) {
-      var x;
-      const f = d.form;
-      (x = f.touchField) == null || x.call(f, u.name);
+    function $(l) {
+      var y;
+      const f = a.form;
+      (y = f.touchField) == null || y.call(f, l.name);
     }
-    function g(u) {
-      return d.form.errors.value[u.name] ?? [];
+    function B(l) {
+      return a.form.errors.value[l.name] ?? [];
     }
-    function C(u) {
-      return d.form.touched.value[u.name] ?? !1;
+    function L(l) {
+      return a.form.touched.value[l.name] ?? !1;
     }
     const T = U(
-      () => d.form.fields.value.filter((u) => u.visible !== !1)
+      () => a.form.fields.value.filter((l) => l.visible !== !1)
     );
-    async function D(u) {
-      u.preventDefault(), await d.form.submit(), m("submit");
+    async function c(l) {
+      l.preventDefault(), await a.form.submit(), n("submit");
     }
-    return (u, f) => {
-      const x = z("FormRenderer", !0);
-      return r(), i("form", {
+    return (l, f) => {
+      const y = W("FormRenderer", !0);
+      return t(), d("form", {
         class: "vfs-form",
         novalidate: "",
-        onSubmit: D
+        onSubmit: c
       }, [
-        (r(!0), i(B, null, S(T.value, (a) => (r(), i(B, {
-          key: a.name
+        (t(!0), d(S, null, C(T.value, (u) => (t(), d(S, {
+          key: u.name
         }, [
-          u.$slots[`field-${a.name}`] ? F(u.$slots, `field-${a.name}`, {
+          l.$slots[`field-${u.name}`] ? q(l.$slots, `field-${u.name}`, {
             key: 0,
-            field: a,
-            value: s(a),
-            error: g(a),
-            touched: C(a),
-            setValue: (q) => o(a, q),
-            touch: () => $(a)
-          }) : a.type === "group" ? (r(), i("fieldset", ie, [
-            a.label ? (r(), i("legend", se, y(a.label), 1)) : V("", !0),
-            a.fields ? (r(), b(x, {
+            field: u,
+            value: m(u),
+            error: B(u),
+            touched: L(u),
+            setValue: (R) => i(u, R),
+            touch: () => $(u)
+          }) : u.type === "group" ? (t(), d("fieldset", ke, [
+            u.label ? (t(), d("legend", Ve, v(u.label), 1)) : k("", !0),
+            u.fields ? (t(), V(y, {
               key: 1,
               form: e.form,
               components: e.components
-            }, null, 8, ["form", "components"])) : V("", !0)
-          ])) : l(a.type) ? (r(), b(M(l(a.type)), {
+            }, null, 8, ["form", "components"])) : k("", !0)
+          ])) : u.type === "array" ? (t(), V($e, {
             key: 2,
-            field: a,
-            "model-value": s(a),
-            error: g(a),
-            touched: C(a),
-            "onUpdate:modelValue": (q) => o(a, q),
-            onBlur: (q) => $(a)
-          }, P({ _: 2 }, [
-            u.$slots[`label-${a.name}`] ? {
+            field: u,
+            form: e.form,
+            components: e.components
+          }, null, 8, ["field", "form", "components"])) : h(u) ? (t(), V(E(h(u)), {
+            key: 3,
+            field: u,
+            "model-value": m(u),
+            error: B(u),
+            touched: L(u),
+            "onUpdate:modelValue": (R) => i(u, R),
+            onBlur: (R) => $(u)
+          }, X({ _: 2 }, [
+            l.$slots[`label-${u.name}`] ? {
               name: "label",
-              fn: v(() => [
-                F(u.$slots, `label-${a.name}`, { field: a })
+              fn: g(() => [
+                q(l.$slots, `label-${u.name}`, { field: u })
               ]),
               key: "0"
             } : void 0,
-            u.$slots[`error-${a.name}`] ? {
+            l.$slots[`error-${u.name}`] ? {
               name: "error",
-              fn: v(() => [
-                F(u.$slots, `error-${a.name}`, {
-                  field: a,
-                  error: g(a)
+              fn: g(() => [
+                q(l.$slots, `error-${u.name}`, {
+                  field: u,
+                  error: B(u)
                 })
               ]),
               key: "1"
             } : void 0
-          ]), 1064, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : V("", !0)
+          ]), 1064, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : k("", !0)
         ], 64))), 128)),
-        F(u.$slots, "submit", {
+        q(l.$slots, "submit", {
           isSubmitting: e.form.isSubmitting.value,
           isValid: e.form.isValid.value
         }, () => [
-          c("button", {
+          b("button", {
             type: "submit",
             disabled: e.form.isSubmitting.value,
             class: "vfs-submit"
-          }, y(e.submitLabel ?? "Submit"), 9, me)
+          }, v(e.submitLabel ?? "Submit"), 9, ge)
         ])
       ], 32);
     };
   }
+}), Se = { class: "vfs-multistep" }, Be = { class: "vfs-multistep__steps" }, Fe = { class: "vfs-multistep__step-number" }, Ce = {
+  key: 0,
+  class: "vfs-multistep__step-label"
+}, qe = { class: "vfs-multistep__progress" }, Le = { class: "vfs-multistep__nav" }, Re = ["disabled"], we = /* @__PURE__ */ x({
+  __name: "MultiStepFormRenderer",
+  props: {
+    form: {},
+    components: {},
+    submitLabel: {},
+    nextLabel: {},
+    backLabel: {},
+    stepLabels: {}
+  },
+  emits: ["submit"],
+  setup(e, { emit: r }) {
+    const a = e, s = r;
+    async function n() {
+      await a.form.next();
+    }
+    async function o() {
+      await a.form.submit(), s("submit");
+    }
+    return (h, m) => (t(), d("div", Se, [
+      b("div", Be, [
+        (t(!0), d(S, null, C(e.form.steps, (i, $) => {
+          var B;
+          return t(), d("div", {
+            key: $,
+            class: A(["vfs-multistep__step", {
+              "vfs-multistep__step--active": $ === e.form.currentStep.value,
+              "vfs-multistep__step--done": $ < e.form.currentStep.value
+            }])
+          }, [
+            b("span", Fe, v($ + 1), 1),
+            (B = e.stepLabels) != null && B[$] ? (t(), d("span", Ce, v(e.stepLabels[$]), 1)) : k("", !0)
+          ], 2);
+        }), 128))
+      ]),
+      b("div", qe, " Step " + v(e.form.currentStep.value + 1) + " of " + v(e.form.totalSteps), 1),
+      p(xe, {
+        form: e.form.form.value,
+        components: e.components
+      }, {
+        submit: g(() => [
+          b("div", Le, [
+            e.form.isFirstStep.value ? k("", !0) : (t(), d("button", {
+              key: 0,
+              type: "button",
+              class: "vfs-multistep__back",
+              onClick: m[0] || (m[0] = (i) => e.form.back())
+            }, v(e.backLabel ?? "← Back"), 1)),
+            e.form.isLastStep.value ? (t(), d("button", {
+              key: 2,
+              type: "button",
+              class: "vfs-submit",
+              disabled: e.form.isSubmitting.value,
+              onClick: o
+            }, v(e.submitLabel ?? "Submit"), 9, Re)) : (t(), d("button", {
+              key: 1,
+              type: "button",
+              class: "vfs-multistep__next",
+              onClick: n
+            }, v(e.nextLabel ?? "Next →"), 1))
+          ])
+        ]),
+        _: 1
+      }, 8, ["form", "components"])
+    ]));
+  }
 });
 export {
-  de as CheckboxField,
-  oe as DateField,
-  be as FormRenderer,
-  Q as NumberField,
-  ue as RadioField,
-  _ as SelectField,
-  R as TextField,
-  X as TextareaField
+  $e as ArrayField,
+  G as CheckboxField,
+  J as DateField,
+  xe as FormRenderer,
+  we as MultiStepFormRenderer,
+  z as NumberField,
+  H as RadioField,
+  j as SelectField,
+  N as TextField,
+  P as TextareaField
 };