@macrulez/vue-form-schema 0.1.7 → 0.2.0

package/dist/ui.js

@@ -1,10 +1,11 @@
-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 = {
+import { defineComponent as V, computed as B, openBlock as t, createElementBlock as n, normalizeClass as T, createTextVNode as I, toDisplayString as y, createCommentVNode as k, renderSlot as A, normalizeProps as W, guardReactiveProps as X, Fragment as x, renderList as S, ref as w, onMounted as Y, onUnmounted as Z, createBlock as F, withCtx as q, createElementVNode as b, mergeProps as R, createVNode as M, unref as z, resolveDynamicComponent as U, resolveComponent as _, createSlots as ee } from "vue";
+import { b as te, d as P, u as le } from "./MaskEngine-BEXwX4BK.js";
+import { g as K } from "./ValidationEngine-BC4U1ef1.js";
+const ae = ["for"], re = {
   key: 0,
   class: "vfs-field__required",
   "aria-hidden": "true"
-}, te = ["id"], F = /* @__PURE__ */ x({
+}, ne = ["id"], C = /* @__PURE__ */ V({
   __name: "BaseField",
   props: {
     field: {},
@@ -12,37 +13,41 @@ const _ = ["for"], ee = {
     touched: { type: Boolean }
   },
   setup(e) {
-    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) }]])
+    const o = e, l = B(() => {
+      var d;
+      return !!(o.touched && ((d = o.error) != null && d.length));
+    }), s = B(() => `${o.field.name}-error`), a = B(() => ({
+      "aria-required": o.field.required ? "true" : void 0,
+      "aria-invalid": l.value ? "true" : "false",
+      "aria-describedby": l.value ? s.value : void 0
+    }));
+    return (d, m) => (t(), n("div", {
+      class: T(["vfs-field", [`vfs-field--${o.field.type}`, { "vfs-field--error": l.value }]])
+    }, [
+      o.field.label ? (t(), n("label", {
+        key: 0,
+        for: o.field.name,
+        class: "vfs-field__label"
       }, [
-        r.field.label ? (t(), d("label", {
-          key: 0,
-          for: r.field.name,
-          class: "vfs-field__label"
-        }, [
-          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"
-          }, v(h), 1))), 128))
-        ], 8, te)) : k("", !0)
-      ], 2);
-    };
+        I(y(o.field.label) + " ", 1),
+        o.field.required ? (t(), n("span", re, "*")) : k("", !0)
+      ], 8, ae)) : k("", !0),
+      A(d.$slots, "default", W(X(a.value))),
+      l.value ? (t(), n("ul", {
+        key: 1,
+        id: s.value,
+        class: "vfs-field__errors",
+        role: "alert",
+        "aria-live": "polite"
+      }, [
+        (t(!0), n(x, null, S(e.error, (f, h) => (t(), n("li", {
+          key: h,
+          class: "vfs-field__error"
+        }, y(f), 1))), 128))
+      ], 8, ne)) : k("", !0)
+    ], 2));
   }
-}), le = ["id", "type", "name", "value", "placeholder", "disabled", "required"], N = /* @__PURE__ */ x({
+}), oe = ["id", "type", "name", "value", "placeholder", "disabled", "required"], N = /* @__PURE__ */ V({
   __name: "TextField",
   props: {
     field: {},
@@ -51,40 +56,41 @@ const _ = ["for"], ee = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  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);
+  setup(e, { emit: o }) {
+    const l = e, s = o, a = w(null);
+    let d = null;
+    Y(() => {
+      a.value && l.field.mask && (d = te(a.value, l.field.mask));
+    }), Z(() => d == null ? void 0 : d());
+    function m(f) {
+      s("update:modelValue", f.target.value);
     }
-    return (m, i) => (t(), V(F, {
+    return (f, h) => (t(), F(C, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: g(() => [
-        b("input", {
+      default: q((c) => [
+        b("input", R({
           id: e.field.name,
           ref_key: "inputRef",
-          ref: n,
+          ref: a,
           type: e.field.type === "email" ? "email" : "text",
           name: e.field.name,
-          value: e.modelValue,
+          value: e.modelValue ?? "",
           placeholder: e.field.placeholder,
           disabled: e.field.disabled === !0,
-          required: e.field.required,
+          required: e.field.required
+        }, c, {
           class: "vfs-input",
-          onInput: h,
-          onBlur: i[0] || (i[0] = ($) => s("blur"))
-        }, null, 40, le)
+          onInput: m,
+          onBlur: h[0] || (h[0] = (g) => s("blur"))
+        }), null, 16, oe)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ne = ["id", "name", "value", "placeholder", "disabled", "required"], z = /* @__PURE__ */ x({
+}), ie = ["id", "name", "value", "placeholder", "disabled", "required"], O = /* @__PURE__ */ V({
   __name: "NumberField",
   props: {
     field: {},
@@ -93,35 +99,36 @@ const _ = ["for"], ee = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: r }) {
-    const a = r;
-    function s(n) {
-      const o = n.target.value;
-      a("update:modelValue", o === "" ? null : Number(o));
+  setup(e, { emit: o }) {
+    const l = o;
+    function s(a) {
+      const d = a.target.value;
+      l("update:modelValue", d === "" ? null : Number(d));
     }
-    return (n, o) => (t(), V(F, {
+    return (a, d) => (t(), F(C, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: g(() => [
-        b("input", {
+      default: q((m) => [
+        b("input", R({
           id: e.field.name,
           type: "number",
           name: e.field.name,
           value: e.modelValue ?? "",
           placeholder: e.field.placeholder,
           disabled: e.field.disabled === !0,
-          required: e.field.required,
+          required: e.field.required
+        }, m, {
           class: "vfs-input",
           onInput: s,
-          onBlur: o[0] || (o[0] = (h) => a("blur"))
-        }, null, 40, ne)
+          onBlur: d[0] || (d[0] = (f) => l("blur"))
+        }), null, 16, ie)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ae = ["id", "name", "value", "placeholder", "disabled", "required"], P = /* @__PURE__ */ x({
+}), ue = ["id", "name", "value", "placeholder", "disabled", "required"], j = /* @__PURE__ */ V({
   __name: "TextareaField",
   props: {
     field: {},
@@ -130,33 +137,34 @@ const _ = ["for"], ee = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: r }) {
-    const a = r;
-    return (s, n) => (t(), V(F, {
+  setup(e, { emit: o }) {
+    const l = o;
+    return (s, a) => (t(), F(C, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: g(() => [
-        b("textarea", {
+      default: q((d) => [
+        b("textarea", R({
           id: e.field.name,
           name: e.field.name,
-          value: e.modelValue,
+          value: e.modelValue ?? "",
           placeholder: e.field.placeholder,
           disabled: e.field.disabled === !0,
-          required: e.field.required,
+          required: e.field.required
+        }, d, {
           class: "vfs-textarea",
-          onInput: n[0] || (n[0] = (o) => a("update:modelValue", o.target.value)),
-          onBlur: n[1] || (n[1] = (o) => a("blur"))
-        }, null, 40, ae)
+          onInput: a[0] || (a[0] = (m) => l("update:modelValue", m.target.value)),
+          onBlur: a[1] || (a[1] = (m) => l("blur"))
+        }), null, 16, ue)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), oe = {
+}), de = {
   key: 0,
   class: "vfs-select-loading"
-}, re = ["id", "name", "disabled", "required"], ue = ["selected"], de = ["value", "selected"], j = /* @__PURE__ */ x({
+}, se = ["id", "name", "disabled", "required"], ce = ["selected"], me = ["value", "selected"], G = /* @__PURE__ */ V({
   __name: "SelectField",
   props: {
     field: {},
@@ -165,84 +173,92 @@ const _ = ["for"], ee = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  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);
+  setup(e, { emit: o }) {
+    const l = e, s = o, a = B(() => Array.isArray(l.field.options) ? l.field.options : []);
+    function d(m) {
+      const f = m.target, h = a.value.find((c) => String(c.value) === f.value);
+      s("update:modelValue", (h == null ? void 0 : h.value) ?? f.value);
     }
-    return (h, m) => (t(), V(F, {
+    return (m, f) => (t(), F(C, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: g(() => [
-        e.field.optionsLoading ? (t(), d("div", oe, "Loading…")) : (t(), d("select", {
+      default: q((h) => [
+        e.field.optionsLoading ? (t(), n("div", de, "Loading…")) : (t(), n("select", R({
           key: 1,
           id: e.field.name,
           name: e.field.name,
           disabled: e.field.disabled === !0 || e.field.optionsLoading,
-          required: e.field.required,
+          required: e.field.required
+        }, h, {
           class: "vfs-select",
-          onChange: o,
-          onBlur: m[0] || (m[0] = (i) => s("blur"))
-        }, [
+          onChange: d,
+          onBlur: f[0] || (f[0] = (c) => s("blur"))
+        }), [
           b("option", {
             value: "",
             disabled: "",
             selected: e.modelValue === null || e.modelValue === void 0 || e.modelValue === ""
-          }, 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))
+          }, y(e.field.placeholder ?? "Select an option"), 9, ce),
+          (t(!0), n(x, null, S(a.value, (c) => (t(), n("option", {
+            key: String(c.value),
+            value: String(c.value),
+            selected: e.modelValue === c.value
+          }, y(c.label), 9, me))), 128))
+        ], 16, se))
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ie = { class: "vfs-checkbox-label" }, se = ["id", "name", "checked", "disabled", "required"], me = {
+}), fe = { class: "vfs-checkbox-label" }, ve = ["id", "name", "checked", "disabled", "required", "aria-checked"], be = {
   key: 0,
   class: "vfs-checkbox-text"
-}, G = /* @__PURE__ */ x({
+}, H = /* @__PURE__ */ V({
   __name: "CheckboxField",
   props: {
     field: {},
-    modelValue: { type: Boolean },
+    modelValue: { type: [Boolean, null] },
     error: {},
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: r }) {
-    const a = r;
-    return (s, n) => (t(), V(F, {
+  setup(e, { emit: o }) {
+    const l = o;
+    return (s, a) => (t(), F(C, {
       field: { ...e.field, label: void 0 },
       error: e.error,
       touched: e.touched
     }, {
-      default: g(() => [
-        b("label", ie, [
-          b("input", {
+      default: q((d) => [
+        b("label", fe, [
+          b("input", R({
             id: e.field.name,
             type: "checkbox",
             name: e.field.name,
-            checked: e.modelValue,
+            checked: !!e.modelValue,
             disabled: e.field.disabled === !0,
             required: e.field.required,
+            "aria-checked": e.modelValue ? "true" : "false"
+          }, d, {
             class: "vfs-checkbox",
-            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)
+            onChange: a[0] || (a[0] = (m) => l("update:modelValue", m.target.checked)),
+            onBlur: a[1] || (a[1] = (m) => l("blur"))
+          }), null, 16, ve),
+          e.field.label ? (t(), n("span", be, y(e.field.label), 1)) : k("", !0)
         ])
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ce = ["aria-labelledby"], fe = ["name", "value", "checked", "disabled", "onChange"], H = /* @__PURE__ */ x({
+}), he = ["aria-required", "aria-invalid", "aria-describedby"], ye = {
+  key: 0,
+  class: "vfs-field__label"
+}, $e = {
+  key: 0,
+  class: "vfs-field__required",
+  "aria-hidden": "true"
+}, ke = { class: "vfs-radio-group" }, ge = ["name", "value", "checked", "disabled", "onChange"], Ve = ["id"], J = /* @__PURE__ */ V({
   __name: "RadioField",
   props: {
     field: {},
@@ -251,41 +267,54 @@ const _ = ["for"], ee = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: r }) {
-    const a = r;
-    return (s, n) => (t(), V(F, {
-      field: e.field,
-      error: e.error,
-      touched: e.touched
-    }, {
-      default: g(() => [
-        b("div", {
-          class: "vfs-radio-group",
-          role: "radiogroup",
-          "aria-labelledby": e.field.name + "-label"
+  setup(e, { emit: o }) {
+    const l = e, s = o, a = B(() => {
+      var f;
+      return !!(l.touched && ((f = l.error) != null && f.length));
+    }), d = B(() => `${l.field.name}-error`), m = B(() => Array.isArray(l.field.options) ? l.field.options : []);
+    return (f, h) => (t(), n("fieldset", {
+      class: T(["vfs-field vfs-field--radio", { "vfs-field--error": a.value }]),
+      "aria-required": e.field.required ? "true" : void 0,
+      "aria-invalid": a.value ? "true" : "false",
+      "aria-describedby": a.value ? d.value : void 0
+    }, [
+      e.field.label ? (t(), n("legend", ye, [
+        I(y(e.field.label) + " ", 1),
+        e.field.required ? (t(), n("span", $e, "*")) : k("", !0)
+      ])) : k("", !0),
+      b("div", ke, [
+        (t(!0), n(x, null, S(m.value, (c) => (t(), n("label", {
+          key: String(c.value),
+          class: "vfs-radio-label"
         }, [
-          (t(!0), d(S, null, C(e.field.options, (o) => (t(), d("label", {
-            key: String(o.value),
-            class: "vfs-radio-label"
-          }, [
-            b("input", {
-              type: "radio",
-              name: e.field.name,
-              value: String(o.value),
-              checked: e.modelValue === o.value,
-              disabled: e.field.disabled === !0,
-              class: "vfs-radio",
-              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, ce)
+          b("input", {
+            type: "radio",
+            name: e.field.name,
+            value: String(c.value),
+            checked: e.modelValue === c.value,
+            disabled: e.field.disabled === !0,
+            class: "vfs-radio",
+            onChange: (g) => s("update:modelValue", c.value),
+            onBlur: h[0] || (h[0] = (g) => s("blur"))
+          }, null, 40, ge),
+          I(" " + y(c.label), 1)
+        ]))), 128))
       ]),
-      _: 1
-    }, 8, ["field", "error", "touched"]));
+      a.value ? (t(), n("ul", {
+        key: 1,
+        id: d.value,
+        class: "vfs-field__errors",
+        role: "alert",
+        "aria-live": "polite"
+      }, [
+        (t(!0), n(x, null, S(e.error, (c, g) => (t(), n("li", {
+          key: g,
+          class: "vfs-field__error"
+        }, y(c), 1))), 128))
+      ], 8, Ve)) : k("", !0)
+    ], 10, he));
   }
-}), ve = ["id", "name", "value", "disabled", "required"], J = /* @__PURE__ */ x({
+}), pe = ["id", "name", "value", "disabled", "required"], Q = /* @__PURE__ */ V({
   __name: "DateField",
   props: {
     field: {},
@@ -294,33 +323,34 @@ const _ = ["for"], ee = {
     touched: { type: Boolean }
   },
   emits: ["update:modelValue", "blur"],
-  setup(e, { emit: r }) {
-    const a = r;
-    return (s, n) => (t(), V(F, {
+  setup(e, { emit: o }) {
+    const l = o;
+    return (s, a) => (t(), F(C, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: g(() => [
-        b("input", {
+      default: q((d) => [
+        b("input", R({
           id: e.field.name,
           type: "date",
           name: e.field.name,
-          value: e.modelValue,
+          value: e.modelValue ?? "",
           disabled: e.field.disabled === !0,
-          required: e.field.required,
+          required: e.field.required
+        }, d, {
           class: "vfs-input",
-          onInput: n[0] || (n[0] = (o) => a("update:modelValue", o.target.value)),
-          onBlur: n[1] || (n[1] = (o) => a("blur"))
-        }, null, 40, ve)
+          onInput: a[0] || (a[0] = (m) => l("update:modelValue", m.target.value)),
+          onBlur: a[1] || (a[1] = (m) => l("blur"))
+        }), null, 16, pe)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), be = { class: "vfs-array" }, he = {
+}), xe = { class: "vfs-array" }, Fe = {
   key: 0,
   class: "vfs-field__label"
-}, ye = ["onClick"], $e = /* @__PURE__ */ x({
+}, qe = ["onClick"], Be = /* @__PURE__ */ V({
   __name: "ArrayField",
   props: {
     field: {},
@@ -328,187 +358,291 @@ const _ = ["for"], ee = {
     components: {}
   },
   setup(e) {
-    const r = e, a = I(), s = {
+    const o = e, l = P(), s = {
       text: N,
       email: N,
-      number: z,
-      textarea: P,
-      select: j,
-      checkbox: G,
-      radio: H,
-      date: J
+      number: O,
+      textarea: j,
+      select: G,
+      checkbox: H,
+      radio: J,
+      date: Q
     };
-    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;
+    function a($) {
+      var r;
+      return $.component ? $.component : ((r = o.components) == null ? void 0 : r[$.type]) ?? l[$.type] ?? s[$.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);
+    const { rows: d, append: m, remove: f } = le(o.form, o.field.name);
+    function h($) {
+      return K(o.form.values.value, $.name);
     }
-    function $(c, l) {
-      r.form.setField(c.name, l);
+    function c($, r) {
+      o.form.setField($.name, r);
     }
-    function B(c) {
-      var f;
-      const l = r.form;
-      (f = l.touchField) == null || f.call(l, c.name);
+    function g($) {
+      var i;
+      const r = o.form;
+      (i = r.touchField) == null || i.call(r, $.name);
     }
-    function L(c) {
-      return r.form.errors.value[c.name] ?? [];
+    function D($) {
+      return o.form.errors.value[$.name] ?? [];
     }
-    function T(c) {
-      return r.form.touched.value[c.name] ?? !1;
+    function L($) {
+      return o.form.touched.value[$.name] ?? !1;
     }
-    return (c, l) => (t(), d("div", be, [
-      p(F, {
+    return ($, r) => (t(), n("div", xe, [
+      M(C, {
         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,
+        default: q(() => [
+          e.field.label ? (t(), n("div", Fe, y(e.field.label), 1)) : k("", !0),
+          (t(!0), n(x, null, S(z(d), (i) => (t(), n("div", {
+            key: i.key,
             class: "vfs-array__row"
           }, [
-            (t(!0), d(S, null, C(f.fields, (y) => (t(), d(S, {
-              key: y.name
+            (t(!0), n(x, null, S(i.fields, (v) => (t(), n(x, {
+              key: v.name
             }, [
-              n(y) ? (t(), V(E(n(y)), {
+              a(v) ? (t(), F(U(a(v)), {
                 key: 0,
-                field: y,
-                "model-value": i(y),
-                error: L(y),
-                touched: T(y),
-                "onUpdate:modelValue": (u) => $(y, u),
-                onBlur: (u) => B(y)
+                field: v,
+                "model-value": h(v),
+                error: D(v),
+                touched: L(v),
+                "onUpdate:modelValue": (u) => c(v, u),
+                onBlur: (u) => g(v)
               }, 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)
+              onClick: (v) => z(f)(i.index)
+            }, "Remove", 8, qe)
           ]))), 128)),
           b("button", {
             type: "button",
             class: "vfs-array__add",
-            onClick: l[0] || (l[0] = (f) => w(h)())
-          }, " + Add row ")
+            onClick: r[0] || (r[0] = (i) => z(m)())
+          }, "+ Add row")
         ]),
         _: 1
       }, 8, ["field"])
     ]));
   }
-}), ke = {
+}), Se = ["id", "name", "accept", "multiple", "disabled", "required"], Ce = ["for"], Re = {
+  key: 0,
+  class: "vfs-file-hint"
+}, De = {
+  key: 0,
+  class: "vfs-file-list"
+}, Le = { class: "vfs-file-name" }, Ae = { class: "vfs-file-size" }, Ne = ["aria-label", "onClick"], Te = /* @__PURE__ */ V({
+  __name: "FileField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: o }) {
+    const l = e, s = o, a = w(!1), d = w(null), m = B(() => l.modelValue ? Array.isArray(l.modelValue) ? l.modelValue : [l.modelValue] : []), f = B(() => l.field.multiple ?? !1);
+    function h(i) {
+      if (!i || i.length === 0) {
+        s("update:modelValue", null);
+        return;
+      }
+      f.value ? s("update:modelValue", Array.from(i)) : s("update:modelValue", i[0]);
+    }
+    function c(i) {
+      h(i.target.files), s("blur");
+    }
+    function g(i) {
+      var v;
+      a.value = !1, i.preventDefault(), h(((v = i.dataTransfer) == null ? void 0 : v.files) ?? null), s("blur");
+    }
+    function D(i) {
+      i.preventDefault(), a.value = !0;
+    }
+    function L() {
+      a.value = !1;
+    }
+    function $(i) {
+      const v = m.value.filter((u, p) => p !== i);
+      v.length === 0 ? (s("update:modelValue", null), d.value && (d.value.value = "")) : f.value ? s("update:modelValue", v) : s("update:modelValue", v[0]);
+    }
+    function r(i) {
+      return i < 1024 ? `${i} B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)} KB` : `${(i / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    return (i, v) => (t(), F(C, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((u) => [
+        b("div", {
+          class: T(["vfs-file-zone", { "vfs-file-zone--dragging": a.value }]),
+          onDragover: D,
+          onDragleave: L,
+          onDrop: g
+        }, [
+          b("input", R({
+            id: e.field.name,
+            ref_key: "inputRef",
+            ref: d,
+            type: "file",
+            name: e.field.name,
+            accept: e.field.accept,
+            multiple: f.value,
+            disabled: e.field.disabled === !0,
+            required: e.field.required
+          }, u, {
+            class: "vfs-file-input",
+            onChange: c
+          }), null, 16, Se),
+          b("label", {
+            for: e.field.name,
+            class: "vfs-file-label"
+          }, [
+            v[0] || (v[0] = b("span", {
+              class: "vfs-file-icon",
+              "aria-hidden": "true"
+            }, "📁", -1)),
+            b("span", null, y(a.value ? "Drop files here" : "Click to upload or drag & drop"), 1),
+            e.field.accept ? (t(), n("span", Re, y(e.field.accept), 1)) : k("", !0)
+          ], 8, Ce)
+        ], 34),
+        m.value.length ? (t(), n("ul", De, [
+          (t(!0), n(x, null, S(m.value, (p, E) => (t(), n("li", {
+            key: `${p.name}-${E}`,
+            class: "vfs-file-item"
+          }, [
+            b("span", Le, y(p.name), 1),
+            b("span", Ae, y(r(p.size)), 1),
+            b("button", {
+              type: "button",
+              class: "vfs-file-remove",
+              "aria-label": `Remove ${p.name}`,
+              onClick: (He) => $(E)
+            }, " × ", 8, Ne)
+          ]))), 128))
+        ])) : k("", !0)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ze = {
   key: 1,
   class: "vfs-group"
-}, Ve = { key: 0 }, ge = ["disabled"], xe = /* @__PURE__ */ x({
+}, Ie = { key: 0 }, we = ["disabled"], Ee = /* @__PURE__ */ V({
   __name: "FormRenderer",
   props: {
     form: {},
     components: {},
-    submitLabel: {}
+    submitLabel: {},
+    fields: {}
   },
   emits: ["submit"],
-  setup(e, { emit: r }) {
-    const a = e, s = I(), n = r, o = {
+  setup(e, { emit: o }) {
+    const l = e, s = P(), a = o, d = {
       text: N,
       email: N,
-      number: z,
-      textarea: P,
-      select: j,
-      checkbox: G,
-      radio: H,
-      date: J
+      number: O,
+      textarea: j,
+      select: G,
+      checkbox: H,
+      radio: J,
+      date: Q,
+      file: Te
     };
-    function h(l) {
-      var f;
-      return l.component ? l.component : ((f = a.components) == null ? void 0 : f[l.type]) ?? s[l.type] ?? o[l.type] ?? null;
+    function m(r) {
+      var i;
+      return r.component ? r.component : ((i = l.components) == null ? void 0 : i[r.type]) ?? s[r.type] ?? d[r.type] ?? null;
     }
-    function m(l) {
-      return M(a.form.values.value, l.name);
+    function f(r) {
+      return K(l.form.values.value, r.name);
     }
-    function i(l, f) {
-      a.form.setField(l.name, f);
+    function h(r, i) {
+      l.form.setField(r.name, i);
     }
-    function $(l) {
-      var y;
-      const f = a.form;
-      (y = f.touchField) == null || y.call(f, l.name);
+    function c(r) {
+      var v;
+      const i = l.form;
+      (v = i.touchField) == null || v.call(i, r.name);
     }
-    function B(l) {
-      return a.form.errors.value[l.name] ?? [];
+    function g(r) {
+      return l.form.errors.value[r.name] ?? [];
     }
-    function L(l) {
-      return a.form.touched.value[l.name] ?? !1;
+    function D(r) {
+      return l.form.touched.value[r.name] ?? !1;
     }
-    const T = U(
-      () => a.form.fields.value.filter((l) => l.visible !== !1)
+    const L = B(
+      () => (l.fields ?? l.form.fields.value).filter((r) => r.visible !== !1)
     );
-    async function c(l) {
-      l.preventDefault(), await a.form.submit(), n("submit");
+    async function $(r) {
+      r.preventDefault(), await l.form.submit(), a("submit");
     }
-    return (l, f) => {
-      const y = W("FormRenderer", !0);
-      return t(), d("form", {
+    return (r, i) => {
+      const v = _("FormRenderer", !0);
+      return t(), n("form", {
         class: "vfs-form",
         novalidate: "",
-        onSubmit: c
+        onSubmit: $
       }, [
-        (t(!0), d(S, null, C(T.value, (u) => (t(), d(S, {
+        (t(!0), n(x, null, S(L.value, (u) => (t(), n(x, {
           key: u.name
         }, [
-          l.$slots[`field-${u.name}`] ? q(l.$slots, `field-${u.name}`, {
+          r.$slots[`field-${u.name}`] ? A(r.$slots, `field-${u.name}`, {
             key: 0,
             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, {
+            value: f(u),
+            error: g(u),
+            touched: D(u),
+            setValue: (p) => h(u, p),
+            touch: () => c(u)
+          }) : u.type === "group" ? (t(), n("fieldset", ze, [
+            u.label ? (t(), n("legend", Ie, y(u.label), 1)) : k("", !0),
+            u.fields ? (t(), F(v, {
               key: 1,
               form: e.form,
+              fields: u.fields,
               components: e.components
-            }, null, 8, ["form", "components"])) : k("", !0)
-          ])) : u.type === "array" ? (t(), V($e, {
+            }, null, 8, ["form", "fields", "components"])) : k("", !0)
+          ])) : u.type === "array" ? (t(), F(Be, {
             key: 2,
             field: u,
             form: e.form,
             components: e.components
-          }, null, 8, ["field", "form", "components"])) : h(u) ? (t(), V(E(h(u)), {
+          }, null, 8, ["field", "form", "components"])) : m(u) ? (t(), F(U(m(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}`] ? {
+            "model-value": f(u),
+            error: g(u),
+            touched: D(u),
+            "onUpdate:modelValue": (p) => h(u, p),
+            onBlur: (p) => c(u)
+          }, ee({ _: 2 }, [
+            r.$slots[`label-${u.name}`] ? {
               name: "label",
-              fn: g(() => [
-                q(l.$slots, `label-${u.name}`, { field: u })
+              fn: q(() => [
+                A(r.$slots, `label-${u.name}`, { field: u })
               ]),
               key: "0"
             } : void 0,
-            l.$slots[`error-${u.name}`] ? {
+            r.$slots[`error-${u.name}`] ? {
               name: "error",
-              fn: g(() => [
-                q(l.$slots, `error-${u.name}`, {
+              fn: q(() => [
+                A(r.$slots, `error-${u.name}`, {
                   field: u,
-                  error: B(u)
+                  error: g(u)
                 })
               ]),
               key: "1"
             } : void 0
           ]), 1064, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : k("", !0)
         ], 64))), 128)),
-        q(l.$slots, "submit", {
+        A(r.$slots, "submit", {
           isSubmitting: e.form.isSubmitting.value,
           isValid: e.form.isValid.value
         }, () => [
@@ -516,15 +650,15 @@ const _ = ["for"], ee = {
             type: "submit",
             disabled: e.form.isSubmitting.value,
             class: "vfs-submit"
-          }, v(e.submitLabel ?? "Submit"), 9, ge)
+          }, y(e.submitLabel ?? "Submit"), 9, we)
         ])
       ], 32);
     };
   }
-}), Se = { class: "vfs-multistep" }, Be = { class: "vfs-multistep__steps" }, Fe = { class: "vfs-multistep__step-number" }, Ce = {
+}), Me = { class: "vfs-multistep" }, Ue = { class: "vfs-multistep__steps" }, Pe = { class: "vfs-multistep__step-number" }, Ke = {
   key: 0,
   class: "vfs-multistep__step-label"
-}, qe = { class: "vfs-multistep__progress" }, Le = { class: "vfs-multistep__nav" }, Re = ["disabled"], we = /* @__PURE__ */ x({
+}, Oe = { class: "vfs-multistep__progress" }, je = { class: "vfs-multistep__nav" }, Ge = ["disabled"], Xe = /* @__PURE__ */ V({
   __name: "MultiStepFormRenderer",
   props: {
     form: {},
@@ -535,55 +669,55 @@ const _ = ["for"], ee = {
     stepLabels: {}
   },
   emits: ["submit"],
-  setup(e, { emit: r }) {
-    const a = e, s = r;
-    async function n() {
-      await a.form.next();
+  setup(e, { emit: o }) {
+    const l = e, s = o;
+    async function a() {
+      await l.form.next();
     }
-    async function o() {
-      await a.form.submit(), s("submit");
+    async function d() {
+      await l.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
+    return (m, f) => (t(), n("div", Me, [
+      b("div", Ue, [
+        (t(!0), n(x, null, S(e.form.steps, (h, c) => {
+          var g;
+          return t(), n("div", {
+            key: c,
+            class: T(["vfs-multistep__step", {
+              "vfs-multistep__step--active": c === e.form.currentStep.value,
+              "vfs-multistep__step--done": c < 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)
+            b("span", Pe, y(c + 1), 1),
+            (g = e.stepLabels) != null && g[c] ? (t(), n("span", Ke, y(e.stepLabels[c]), 1)) : k("", !0)
           ], 2);
         }), 128))
       ]),
-      b("div", qe, " Step " + v(e.form.currentStep.value + 1) + " of " + v(e.form.totalSteps), 1),
-      p(xe, {
+      b("div", Oe, " Step " + y(e.form.currentStep.value + 1) + " of " + y(e.form.totalSteps), 1),
+      M(Ee, {
         form: e.form.form.value,
         components: e.components
       }, {
-        submit: g(() => [
-          b("div", Le, [
-            e.form.isFirstStep.value ? k("", !0) : (t(), d("button", {
+        submit: q(() => [
+          b("div", je, [
+            e.form.isFirstStep.value ? k("", !0) : (t(), n("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", {
+              onClick: f[0] || (f[0] = (h) => e.form.back())
+            }, y(e.backLabel ?? "← Back"), 1)),
+            e.form.isLastStep.value ? (t(), n("button", {
               key: 2,
               type: "button",
               class: "vfs-submit",
               disabled: e.form.isSubmitting.value,
-              onClick: o
-            }, v(e.submitLabel ?? "Submit"), 9, Re)) : (t(), d("button", {
+              onClick: d
+            }, y(e.submitLabel ?? "Submit"), 9, Ge)) : (t(), n("button", {
               key: 1,
               type: "button",
               class: "vfs-multistep__next",
-              onClick: n
-            }, v(e.nextLabel ?? "Next →"), 1))
+              onClick: a
+            }, y(e.nextLabel ?? "Next →"), 1))
           ])
         ]),
         _: 1
@@ -592,14 +726,15 @@ const _ = ["for"], ee = {
   }
 });
 export {
-  $e as ArrayField,
-  G as CheckboxField,
-  J as DateField,
-  xe as FormRenderer,
-  we as MultiStepFormRenderer,
-  z as NumberField,
-  H as RadioField,
-  j as SelectField,
+  Be as ArrayField,
+  H as CheckboxField,
+  Q as DateField,
+  Te as FileField,
+  Ee as FormRenderer,
+  Xe as MultiStepFormRenderer,
+  O as NumberField,
+  J as RadioField,
+  G as SelectField,
   N as TextField,
-  P as TextareaField
+  j as TextareaField
 };