@macrulez/vue-form-schema 0.1.7 → 0.2.0

package/dist/ui-tailwind.js

@@ -0,0 +1,669 @@
+import { defineComponent as V, computed as $, openBlock as l, createElementBlock as s, createTextVNode as N, toDisplayString as x, createCommentVNode as p, renderSlot as E, normalizeProps as J, guardReactiveProps as O, Fragment as w, renderList as F, ref as I, onMounted as Q, onUnmounted as W, createBlock as k, withCtx as q, createElementVNode as g, mergeProps as C, withModifiers as X, normalizeClass as Y, unref as D, resolveDynamicComponent as z, resolveComponent as Z } from "vue";
+import { b as _, d as U, u as ee } from "./MaskEngine-BEXwX4BK.js";
+import { g as M } from "./ValidationEngine-BC4U1ef1.js";
+const te = { class: "mb-4" }, re = ["for"], le = {
+  key: 0,
+  class: "text-red-400 ml-0.5",
+  "aria-hidden": "true"
+}, oe = ["id"], T = /* @__PURE__ */ V({
+  __name: "BaseField",
+  props: {
+    field: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  setup(e) {
+    const m = e, t = $(() => {
+      var d;
+      return !!(m.touched && ((d = m.error) != null && d.length));
+    }), c = $(() => `${m.field.name}-error`), a = $(() => ({
+      "aria-required": m.field.required ? "true" : void 0,
+      "aria-invalid": t.value ? "true" : "false",
+      "aria-describedby": t.value ? c.value : void 0
+    }));
+    return (d, n) => (l(), s("div", te, [
+      e.field.label ? (l(), s("label", {
+        key: 0,
+        for: e.field.name,
+        class: "block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1.5"
+      }, [
+        N(x(e.field.label) + " ", 1),
+        e.field.required ? (l(), s("span", le, "*")) : p("", !0)
+      ], 8, re)) : p("", !0),
+      E(d.$slots, "default", J(O(a.value))),
+      t.value ? (l(), s("ul", {
+        key: 1,
+        id: c.value,
+        class: "mt-1 space-y-0.5",
+        role: "alert",
+        "aria-live": "polite"
+      }, [
+        (l(!0), s(w, null, F(e.error, (i, f) => (l(), s("li", {
+          key: f,
+          class: "text-red-400 text-xs"
+        }, x(i), 1))), 128))
+      ], 8, oe)) : p("", !0)
+    ]));
+  }
+}), ae = ["id", "type", "name", "value", "placeholder", "disabled", "required"], A = /* @__PURE__ */ V({
+  __name: "TextField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = e, c = m, a = I(null);
+    let d = null;
+    const n = $(() => {
+      var i;
+      return !!(t.touched && ((i = t.error) != null && i.length));
+    });
+    return Q(() => {
+      a.value && t.field.mask && (d = _(a.value, t.field.mask));
+    }), W(() => d == null ? void 0 : d()), (i, f) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((b) => [
+        g("input", C({
+          id: e.field.name,
+          ref_key: "inputRef",
+          ref: a,
+          type: e.field.type === "email" ? "email" : "text",
+          name: e.field.name,
+          value: e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          required: e.field.required
+        }, b, {
+          class: [
+            "w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+            n.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"
+          ],
+          onInput: f[0] || (f[0] = (y) => c("update:modelValue", y.target.value)),
+          onBlur: f[1] || (f[1] = (y) => c("blur"))
+        }), null, 16, ae)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), de = ["id", "name", "value", "placeholder", "disabled", "required"], P = /* @__PURE__ */ V({
+  __name: "NumberField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = e, c = m, a = $(() => {
+      var n;
+      return !!(t.touched && ((n = t.error) != null && n.length));
+    });
+    function d(n) {
+      const i = n.target.value;
+      c("update:modelValue", i === "" ? null : Number(i));
+    }
+    return (n, i) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((f) => [
+        g("input", C({
+          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
+        }, f, {
+          class: [
+            "w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+            a.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"
+          ],
+          onInput: d,
+          onBlur: i[0] || (i[0] = (b) => c("blur"))
+        }), null, 16, de)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ne = ["id", "name", "value", "placeholder", "disabled", "required"], L = /* @__PURE__ */ V({
+  __name: "TextareaField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = e, c = m, a = $(() => {
+      var d;
+      return !!(t.touched && ((d = t.error) != null && d.length));
+    });
+    return (d, n) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((i) => [
+        g("textarea", C({
+          id: e.field.name,
+          name: e.field.name,
+          value: e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          required: e.field.required
+        }, i, {
+          class: [
+            "w-full resize-y rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+            a.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"
+          ],
+          style: { "min-height": "80px" },
+          onInput: n[0] || (n[0] = (f) => c("update:modelValue", f.target.value)),
+          onBlur: n[1] || (n[1] = (f) => c("blur"))
+        }), null, 16, ne)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ie = {
+  key: 0,
+  class: "py-2 text-sm text-gray-400"
+}, ue = ["id", "name", "disabled", "required"], se = ["selected"], ce = ["value", "selected"], j = /* @__PURE__ */ V({
+  __name: "SelectField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = e, c = m, a = $(() => Array.isArray(t.field.options) ? t.field.options : []), d = $(() => {
+      var i;
+      return !!(t.touched && ((i = t.error) != null && i.length));
+    });
+    function n(i) {
+      const f = i.target, b = a.value.find((y) => String(y.value) === f.value);
+      c("update:modelValue", (b == null ? void 0 : b.value) ?? f.value);
+    }
+    return (i, f) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((b) => [
+        e.field.optionsLoading ? (l(), s("div", ie, "Loading…")) : (l(), s("select", C({
+          key: 1,
+          id: e.field.name,
+          name: e.field.name,
+          disabled: e.field.disabled === !0 || e.field.optionsLoading,
+          required: e.field.required
+        }, b, {
+          class: [
+            "w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+            d.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"
+          ],
+          onChange: n,
+          onBlur: f[0] || (f[0] = (y) => c("blur"))
+        }), [
+          g("option", {
+            value: "",
+            disabled: "",
+            selected: e.modelValue === null || e.modelValue === void 0 || e.modelValue === "",
+            class: "bg-gray-800"
+          }, x(e.field.placeholder ?? "Select an option"), 9, se),
+          (l(!0), s(w, null, F(a.value, (y) => (l(), s("option", {
+            key: String(y.value),
+            value: String(y.value),
+            selected: e.modelValue === y.value,
+            class: "bg-gray-800"
+          }, x(y.label), 9, ce))), 128))
+        ], 16, ue))
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), me = { class: "flex cursor-pointer items-center gap-2.5" }, fe = ["id", "name", "checked", "disabled", "required", "aria-checked"], be = {
+  key: 0,
+  class: "text-sm text-gray-200"
+}, K = /* @__PURE__ */ V({
+  __name: "CheckboxField",
+  props: {
+    field: {},
+    modelValue: { type: [Boolean, null] },
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = m;
+    return (c, a) => (l(), k(T, {
+      field: { ...e.field, label: void 0 },
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((d) => [
+        g("label", me, [
+          g("input", C({
+            id: e.field.name,
+            type: "checkbox",
+            name: e.field.name,
+            checked: !!e.modelValue,
+            disabled: e.field.disabled === !0,
+            required: e.field.required,
+            "aria-checked": e.modelValue ? "true" : "false"
+          }, d, {
+            class: "h-4 w-4 cursor-pointer rounded border-gray-600 bg-gray-900 text-indigo-500 accent-indigo-500 disabled:cursor-not-allowed disabled:opacity-50",
+            onChange: a[0] || (a[0] = (n) => t("update:modelValue", n.target.checked)),
+            onBlur: a[1] || (a[1] = (n) => t("blur"))
+          }), null, 16, fe),
+          e.field.label ? (l(), s("span", be, x(e.field.label), 1)) : p("", !0)
+        ])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ge = ["aria-required", "aria-invalid", "aria-describedby"], ye = {
+  key: 0,
+  class: "block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2"
+}, he = {
+  key: 0,
+  class: "text-red-400 ml-0.5",
+  "aria-hidden": "true"
+}, ve = { class: "space-y-2" }, xe = ["name", "value", "checked", "disabled", "onChange"], $e = { class: "text-sm text-gray-200" }, pe = ["id"], G = /* @__PURE__ */ V({
+  __name: "RadioField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = e, c = m, a = $(() => {
+      var i;
+      return !!(t.touched && ((i = t.error) != null && i.length));
+    }), d = $(() => `${t.field.name}-error`), n = $(() => Array.isArray(t.field.options) ? t.field.options : []);
+    return (i, f) => (l(), s("fieldset", {
+      class: "mb-4",
+      "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 ? (l(), s("legend", ye, [
+        N(x(e.field.label) + " ", 1),
+        e.field.required ? (l(), s("span", he, "*")) : p("", !0)
+      ])) : p("", !0),
+      g("div", ve, [
+        (l(!0), s(w, null, F(n.value, (b) => (l(), s("label", {
+          key: String(b.value),
+          class: "flex cursor-pointer items-center gap-2.5"
+        }, [
+          g("input", {
+            type: "radio",
+            name: e.field.name,
+            value: String(b.value),
+            checked: e.modelValue === b.value,
+            disabled: e.field.disabled === !0,
+            class: "h-4 w-4 cursor-pointer border-gray-600 bg-gray-900 text-indigo-500 accent-indigo-500 disabled:cursor-not-allowed disabled:opacity-50",
+            onChange: (y) => c("update:modelValue", b.value),
+            onBlur: f[0] || (f[0] = (y) => c("blur"))
+          }, null, 40, xe),
+          g("span", $e, x(b.label), 1)
+        ]))), 128))
+      ]),
+      a.value ? (l(), s("ul", {
+        key: 1,
+        id: d.value,
+        class: "mt-1 space-y-0.5",
+        role: "alert",
+        "aria-live": "polite"
+      }, [
+        (l(!0), s(w, null, F(e.error, (b, y) => (l(), s("li", {
+          key: y,
+          class: "text-red-400 text-xs"
+        }, x(b), 1))), 128))
+      ], 8, pe)) : p("", !0)
+    ], 8, ge));
+  }
+}), ke = ["id", "name", "value", "disabled", "required"], H = /* @__PURE__ */ V({
+  __name: "DateField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = e, c = m, a = $(() => {
+      var d;
+      return !!(t.touched && ((d = t.error) != null && d.length));
+    });
+    return (d, n) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((i) => [
+        g("input", C({
+          id: e.field.name,
+          type: "date",
+          name: e.field.name,
+          value: e.modelValue ?? "",
+          disabled: e.field.disabled === !0,
+          required: e.field.required
+        }, i, {
+          class: [
+            "w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+            a.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"
+          ],
+          onInput: n[0] || (n[0] = (f) => c("update:modelValue", f.target.value)),
+          onBlur: n[1] || (n[1] = (f) => c("blur"))
+        }), null, 16, ke)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), Ve = ["id", "name", "accept", "multiple", "disabled", "required"], we = { class: "pointer-events-none space-y-1" }, Fe = { class: "text-sm text-gray-300" }, Be = {
+  key: 0,
+  class: "text-xs text-gray-500"
+}, qe = {
+  key: 0,
+  class: "mt-2 space-y-1"
+}, Ce = { class: "truncate text-gray-200" }, Te = { class: "ml-2 shrink-0 text-xs text-gray-500" }, Se = ["aria-label", "onClick"], Re = /* @__PURE__ */ V({
+  __name: "FileField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const t = e, c = m, a = I(!1), d = I(null), n = $(() => t.modelValue ? Array.isArray(t.modelValue) ? t.modelValue : [t.modelValue] : []), i = $(() => t.field.multiple ?? !1);
+    function f(o) {
+      if (!o || o.length === 0) {
+        c("update:modelValue", null);
+        return;
+      }
+      c("update:modelValue", i.value ? Array.from(o) : o[0]);
+    }
+    function b(o) {
+      f(o.target.files), c("blur");
+    }
+    function y(o) {
+      var r;
+      a.value = !1, o.preventDefault(), f(((r = o.dataTransfer) == null ? void 0 : r.files) ?? null), c("blur");
+    }
+    function S(o) {
+      const r = n.value.filter((h, v) => v !== o);
+      r.length === 0 ? (c("update:modelValue", null), d.value && (d.value.value = "")) : c("update:modelValue", i.value ? r : r[0]);
+    }
+    function R(o) {
+      return o < 1024 ? `${o} B` : o < 1024 * 1024 ? `${(o / 1024).toFixed(1)} KB` : `${(o / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    return (o, r) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: q((h) => {
+        var v;
+        return [
+          g("div", {
+            class: Y([
+              "relative rounded-lg border-2 border-dashed p-6 text-center transition",
+              a.value ? "border-indigo-500 bg-indigo-500/10" : e.touched && ((v = e.error) != null && v.length) ? "border-red-500 bg-red-500/5" : "border-gray-700 bg-gray-900 hover:border-gray-500"
+            ]),
+            onDragover: r[0] || (r[0] = X((u) => a.value = !0, ["prevent"])),
+            onDragleave: r[1] || (r[1] = (u) => a.value = !1),
+            onDrop: y
+          }, [
+            g("input", C({
+              id: e.field.name,
+              ref_key: "inputRef",
+              ref: d,
+              type: "file",
+              name: e.field.name,
+              accept: e.field.accept,
+              multiple: i.value,
+              disabled: e.field.disabled === !0,
+              required: e.field.required
+            }, h, {
+              class: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+              onChange: b
+            }), null, 16, Ve),
+            g("div", we, [
+              r[2] || (r[2] = g("div", { class: "text-2xl" }, "📁", -1)),
+              g("p", Fe, x(a.value ? "Drop files here" : "Click to upload or drag & drop"), 1),
+              e.field.accept ? (l(), s("p", Be, x(e.field.accept), 1)) : p("", !0)
+            ])
+          ], 34),
+          n.value.length ? (l(), s("ul", qe, [
+            (l(!0), s(w, null, F(n.value, (u, B) => (l(), s("li", {
+              key: `${u.name}-${B}`,
+              class: "flex items-center justify-between rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm"
+            }, [
+              g("span", Ce, x(u.name), 1),
+              g("span", Te, x(R(u.size)), 1),
+              g("button", {
+                type: "button",
+                "aria-label": `Remove ${u.name}`,
+                class: "ml-2 shrink-0 text-gray-500 hover:text-red-400 transition",
+                onClick: (Pe) => S(B)
+              }, " × ", 8, Se)
+            ]))), 128))
+          ])) : p("", !0)
+        ];
+      }),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), Ae = { class: "mb-4" }, De = {
+  key: 0,
+  class: "block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2"
+}, Ee = { class: "flex-1 space-y-0" }, Ie = ["onClick"], Ne = /* @__PURE__ */ V({
+  __name: "ArrayField",
+  props: {
+    field: {},
+    form: {},
+    components: {}
+  },
+  setup(e) {
+    const m = e, t = U(), c = {
+      text: A,
+      email: A,
+      number: P,
+      textarea: L,
+      select: j,
+      checkbox: K,
+      radio: G,
+      date: H
+    };
+    function a(o) {
+      var r;
+      return o.component ? o.component : ((r = m.components) == null ? void 0 : r[o.type]) ?? t[o.type] ?? c[o.type] ?? null;
+    }
+    const { rows: d, append: n, remove: i } = ee(m.form, m.field.name);
+    function f(o) {
+      return M(m.form.values.value, o.name);
+    }
+    function b(o, r) {
+      m.form.setField(o.name, r);
+    }
+    function y(o) {
+      var h;
+      const r = m.form;
+      (h = r.touchField) == null || h.call(r, o.name);
+    }
+    function S(o) {
+      return m.form.errors.value[o.name] ?? [];
+    }
+    function R(o) {
+      return m.form.touched.value[o.name] ?? !1;
+    }
+    return (o, r) => (l(), s("div", Ae, [
+      e.field.label ? (l(), s("div", De, x(e.field.label), 1)) : p("", !0),
+      (l(!0), s(w, null, F(D(d), (h) => (l(), s("div", {
+        key: h.key,
+        class: "mb-2 flex items-start gap-2 rounded-lg border border-gray-700 bg-gray-900 p-3"
+      }, [
+        g("div", Ee, [
+          (l(!0), s(w, null, F(h.fields, (v) => (l(), s(w, {
+            key: v.name
+          }, [
+            a(v) ? (l(), k(z(a(v)), {
+              key: 0,
+              field: v,
+              "model-value": f(v),
+              error: S(v),
+              touched: R(v),
+              "onUpdate:modelValue": (u) => b(v, u),
+              onBlur: (u) => y(v)
+            }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : p("", !0)
+          ], 64))), 128))
+        ]),
+        g("button", {
+          type: "button",
+          class: "mt-7 shrink-0 rounded px-2 py-1 text-xs text-gray-500 hover:bg-red-500/10 hover:text-red-400 transition",
+          onClick: (v) => D(i)(h.index)
+        }, " Remove ", 8, Ie)
+      ]))), 128)),
+      g("button", {
+        type: "button",
+        class: "mt-1 rounded-lg border border-dashed border-gray-600 px-4 py-2 text-sm text-gray-400 hover:border-indigo-500 hover:text-indigo-400 transition",
+        onClick: r[0] || (r[0] = (h) => D(n)())
+      }, " + Add row ")
+    ]));
+  }
+}), ze = {
+  key: 1,
+  class: "mb-4 rounded-lg border border-gray-700 p-4"
+}, Ue = {
+  key: 0,
+  class: "px-1 text-xs font-semibold uppercase tracking-wider text-gray-400"
+}, Me = ["disabled"], Ge = /* @__PURE__ */ V({
+  __name: "TailwindFormRenderer",
+  props: {
+    form: {},
+    components: {},
+    submitLabel: {},
+    fields: {}
+  },
+  emits: ["submit"],
+  setup(e, { emit: m }) {
+    const t = e, c = U(), a = m, d = {
+      text: A,
+      email: A,
+      number: P,
+      textarea: L,
+      select: j,
+      checkbox: K,
+      radio: G,
+      date: H,
+      file: Re
+    };
+    function n(r) {
+      var h;
+      return r.component ? r.component : ((h = t.components) == null ? void 0 : h[r.type]) ?? c[r.type] ?? d[r.type] ?? null;
+    }
+    function i(r) {
+      return M(t.form.values.value, r.name);
+    }
+    function f(r, h) {
+      t.form.setField(r.name, h);
+    }
+    function b(r) {
+      var v;
+      const h = t.form;
+      (v = h.touchField) == null || v.call(h, r.name);
+    }
+    function y(r) {
+      return t.form.errors.value[r.name] ?? [];
+    }
+    function S(r) {
+      return t.form.touched.value[r.name] ?? !1;
+    }
+    const R = $(
+      () => (t.fields ?? t.form.fields.value).filter((r) => r.visible !== !1)
+    );
+    async function o(r) {
+      r.preventDefault(), await t.form.submit(), a("submit");
+    }
+    return (r, h) => {
+      const v = Z("TailwindFormRenderer", !0);
+      return l(), s("form", {
+        novalidate: "",
+        onSubmit: o
+      }, [
+        (l(!0), s(w, null, F(R.value, (u) => (l(), s(w, {
+          key: u.name
+        }, [
+          r.$slots[`field-${u.name}`] ? E(r.$slots, `field-${u.name}`, {
+            key: 0,
+            field: u,
+            value: i(u),
+            error: y(u),
+            touched: S(u),
+            setValue: (B) => f(u, B),
+            touch: () => b(u)
+          }) : u.type === "group" ? (l(), s("fieldset", ze, [
+            u.label ? (l(), s("legend", Ue, x(u.label), 1)) : p("", !0),
+            u.fields ? (l(), k(v, {
+              key: 1,
+              form: e.form,
+              fields: u.fields,
+              components: e.components
+            }, null, 8, ["form", "fields", "components"])) : p("", !0)
+          ])) : u.type === "array" ? (l(), k(Ne, {
+            key: 2,
+            field: u,
+            form: e.form,
+            components: e.components
+          }, null, 8, ["field", "form", "components"])) : n(u) ? (l(), k(z(n(u)), {
+            key: 3,
+            field: u,
+            "model-value": i(u),
+            error: y(u),
+            touched: S(u),
+            "onUpdate:modelValue": (B) => f(u, B),
+            onBlur: (B) => b(u)
+          }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : p("", !0)
+        ], 64))), 128)),
+        E(r.$slots, "submit", {
+          isSubmitting: e.form.isSubmitting.value,
+          isValid: e.form.isValid.value
+        }, () => [
+          g("button", {
+            type: "submit",
+            disabled: e.form.isSubmitting.value,
+            class: "mt-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
+          }, x(e.submitLabel ?? "Submit"), 9, Me)
+        ])
+      ], 32);
+    };
+  }
+});
+export {
+  Ge as TailwindFormRenderer,
+  Ne as TwArrayField,
+  K as TwCheckboxField,
+  H as TwDateField,
+  Re as TwFileField,
+  P as TwNumberField,
+  G as TwRadioField,
+  j as TwSelectField,
+  A as TwTextField,
+  L as TwTextareaField
+};