@macrulez/vue-form-schema 0.1.9 → 0.2.1

package/dist/ui-tailwind.js

@@ -1,5 +1,6 @@
-import { defineComponent as V, computed as $, openBlock as l, createElementBlock as u, 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 B, 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 _, t as U, q as ee, h as M } from "./MaskEngine-mLoXKd4d.js";
+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",
@@ -12,32 +13,32 @@ const te = { class: "mb-4" }, re = ["for"], le = {
     touched: { type: Boolean }
   },
   setup(e) {
-    const m = e, r = $(() => {
-      var n;
-      return !!(m.touched && ((n = m.error) != null && n.length));
+    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": r.value ? "true" : "false",
-      "aria-describedby": r.value ? c.value : void 0
+      "aria-invalid": t.value ? "true" : "false",
+      "aria-describedby": t.value ? c.value : void 0
     }));
-    return (n, d) => (l(), u("div", te, [
-      e.field.label ? (l(), u("label", {
+    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(), u("span", le, "*")) : p("", !0)
+        e.field.required ? (l(), s("span", le, "*")) : p("", !0)
       ], 8, re)) : p("", !0),
-      E(n.$slots, "default", J(O(a.value))),
-      r.value ? (l(), u("ul", {
+      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), u(w, null, F(e.error, (i, f) => (l(), u("li", {
+        (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))
@@ -54,20 +55,20 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = e, c = m, a = I(null);
-    let n = null;
-    const d = $(() => {
+    const t = e, c = m, a = I(null);
+    let d = null;
+    const n = $(() => {
       var i;
-      return !!(r.touched && ((i = r.error) != null && i.length));
+      return !!(t.touched && ((i = t.error) != null && i.length));
     });
     return Q(() => {
-      a.value && r.field.mask && (n = _(a.value, r.field.mask));
-    }), W(() => n == null ? void 0 : n()), (i, f) => (l(), k(T, {
+      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: B((b) => [
+      default: q((b) => [
         g("input", C({
           id: e.field.name,
           ref_key: "inputRef",
@@ -79,7 +80,10 @@ const te = { class: "mb-4" }, re = ["for"], le = {
           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", d.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"],
+          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)
@@ -87,7 +91,7 @@ const te = { class: "mb-4" }, re = ["for"], le = {
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), ne = ["id", "name", "value", "placeholder", "disabled", "required"], P = /* @__PURE__ */ V({
+}), de = ["id", "name", "value", "placeholder", "disabled", "required"], P = /* @__PURE__ */ V({
   __name: "NumberField",
   props: {
     field: {},
@@ -97,20 +101,20 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = e, c = m, a = $(() => {
-      var d;
-      return !!(r.touched && ((d = r.error) != null && d.length));
+    const t = e, c = m, a = $(() => {
+      var n;
+      return !!(t.touched && ((n = t.error) != null && n.length));
     });
-    function n(d) {
-      const i = d.target.value;
+    function d(n) {
+      const i = n.target.value;
       c("update:modelValue", i === "" ? null : Number(i));
     }
-    return (d, i) => (l(), k(T, {
+    return (n, i) => (l(), k(T, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: B((f) => [
+      default: q((f) => [
         g("input", C({
           id: e.field.name,
           type: "number",
@@ -120,15 +124,18 @@ const te = { class: "mb-4" }, re = ["for"], le = {
           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: n,
+          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, ne)
+        }), null, 16, de)
       ]),
       _: 1
     }, 8, ["field", "error", "touched"]));
   }
-}), de = ["id", "name", "value", "placeholder", "disabled", "required"], L = /* @__PURE__ */ V({
+}), ne = ["id", "name", "value", "placeholder", "disabled", "required"], L = /* @__PURE__ */ V({
   __name: "TextareaField",
   props: {
     field: {},
@@ -138,16 +145,16 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = e, c = m, a = $(() => {
-      var n;
-      return !!(r.touched && ((n = r.error) != null && n.length));
+    const t = e, c = m, a = $(() => {
+      var d;
+      return !!(t.touched && ((d = t.error) != null && d.length));
     });
-    return (n, d) => (l(), k(T, {
+    return (d, n) => (l(), k(T, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: B((i) => [
+      default: q((i) => [
         g("textarea", C({
           id: e.field.name,
           name: e.field.name,
@@ -156,11 +163,14 @@ const te = { class: "mb-4" }, re = ["for"], le = {
           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"],
+          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: d[0] || (d[0] = (f) => c("update:modelValue", f.target.value)),
-          onBlur: d[1] || (d[1] = (f) => c("blur"))
-        }), null, 16, de)
+          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"]));
@@ -178,13 +188,11 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = e, c = m, a = $(
-      () => Array.isArray(r.field.options) ? r.field.options : []
-    ), n = $(() => {
+    const t = e, c = m, a = $(() => Array.isArray(t.field.options) ? t.field.options : []), d = $(() => {
       var i;
-      return !!(r.touched && ((i = r.error) != null && i.length));
+      return !!(t.touched && ((i = t.error) != null && i.length));
     });
-    function d(i) {
+    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);
     }
@@ -193,16 +201,19 @@ const te = { class: "mb-4" }, re = ["for"], le = {
       error: e.error,
       touched: e.touched
     }, {
-      default: B((b) => [
-        e.field.optionsLoading ? (l(), u("div", ie, "Loading…")) : (l(), u("select", C({
+      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", n.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"],
-          onChange: d,
+          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", {
@@ -211,7 +222,7 @@ const te = { class: "mb-4" }, re = ["for"], le = {
             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), u(w, null, F(a.value, (y) => (l(), u("option", {
+          (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,
@@ -235,13 +246,13 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = m;
+    const t = m;
     return (c, a) => (l(), k(T, {
       field: { ...e.field, label: void 0 },
       error: e.error,
       touched: e.touched
     }, {
-      default: B((n) => [
+      default: q((d) => [
         g("label", me, [
           g("input", C({
             id: e.field.name,
@@ -251,12 +262,12 @@ const te = { class: "mb-4" }, re = ["for"], le = {
             disabled: e.field.disabled === !0,
             required: e.field.required,
             "aria-checked": e.modelValue ? "true" : "false"
-          }, n, {
+          }, 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] = (d) => r("update:modelValue", d.target.checked)),
-            onBlur: a[1] || (a[1] = (d) => r("blur"))
+            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(), u("span", be, x(e.field.label), 1)) : p("", !0)
+          e.field.label ? (l(), s("span", be, x(e.field.label), 1)) : p("", !0)
         ])
       ]),
       _: 1
@@ -279,24 +290,22 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = e, c = m, a = $(() => {
+    const t = e, c = m, a = $(() => {
       var i;
-      return !!(r.touched && ((i = r.error) != null && i.length));
-    }), n = $(() => `${r.field.name}-error`), d = $(
-      () => Array.isArray(r.field.options) ? r.field.options : []
-    );
-    return (i, f) => (l(), u("fieldset", {
+      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 ? n.value : void 0
+      "aria-describedby": a.value ? d.value : void 0
     }, [
-      e.field.label ? (l(), u("legend", ye, [
+      e.field.label ? (l(), s("legend", ye, [
         N(x(e.field.label) + " ", 1),
-        e.field.required ? (l(), u("span", he, "*")) : p("", !0)
+        e.field.required ? (l(), s("span", he, "*")) : p("", !0)
       ])) : p("", !0),
       g("div", ve, [
-        (l(!0), u(w, null, F(d.value, (b) => (l(), u("label", {
+        (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"
         }, [
@@ -313,14 +322,14 @@ const te = { class: "mb-4" }, re = ["for"], le = {
           g("span", $e, x(b.label), 1)
         ]))), 128))
       ]),
-      a.value ? (l(), u("ul", {
+      a.value ? (l(), s("ul", {
         key: 1,
-        id: n.value,
+        id: d.value,
         class: "mt-1 space-y-0.5",
         role: "alert",
         "aria-live": "polite"
       }, [
-        (l(!0), u(w, null, F(e.error, (b, y) => (l(), u("li", {
+        (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))
@@ -337,16 +346,16 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = e, c = m, a = $(() => {
-      var n;
-      return !!(r.touched && ((n = r.error) != null && n.length));
+    const t = e, c = m, a = $(() => {
+      var d;
+      return !!(t.touched && ((d = t.error) != null && d.length));
     });
-    return (n, d) => (l(), k(T, {
+    return (d, n) => (l(), k(T, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: B((i) => [
+      default: q((i) => [
         g("input", C({
           id: e.field.name,
           type: "date",
@@ -355,18 +364,21 @@ const te = { class: "mb-4" }, re = ["for"], le = {
           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: d[0] || (d[0] = (f) => c("update:modelValue", f.target.value)),
-          onBlur: d[1] || (d[1] = (f) => c("blur"))
+          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" }, qe = {
+}), 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"
-}, Be = {
+}, 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({
@@ -379,7 +391,7 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   },
   emits: ["update:modelValue", "blur"],
   setup(e, { emit: m }) {
-    const r = e, c = m, a = I(!1), n = I(null), d = $(() => r.modelValue ? Array.isArray(r.modelValue) ? r.modelValue : [r.modelValue] : []), i = $(() => r.field.multiple ?? !1);
+    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);
@@ -391,34 +403,37 @@ const te = { class: "mb-4" }, re = ["for"], le = {
       f(o.target.files), c("blur");
     }
     function y(o) {
-      var t;
-      a.value = !1, o.preventDefault(), f(((t = o.dataTransfer) == null ? void 0 : t.files) ?? null), c("blur");
+      var r;
+      a.value = !1, o.preventDefault(), f(((r = o.dataTransfer) == null ? void 0 : r.files) ?? null), c("blur");
     }
     function S(o) {
-      const t = d.value.filter((h, v) => v !== o);
-      t.length === 0 ? (c("update:modelValue", null), n.value && (n.value.value = "")) : c("update:modelValue", i.value ? t : t[0]);
+      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, t) => (l(), k(T, {
+    return (o, r) => (l(), k(T, {
       field: e.field,
       error: e.error,
       touched: e.touched
     }, {
-      default: B((h) => {
+      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: t[0] || (t[0] = X((s) => a.value = !0, ["prevent"])),
-            onDragleave: t[1] || (t[1] = (s) => a.value = !1),
+            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: n,
+              ref: d,
               type: "file",
               name: e.field.name,
               accept: e.field.accept,
@@ -430,23 +445,23 @@ const te = { class: "mb-4" }, re = ["for"], le = {
               onChange: b
             }), null, 16, Ve),
             g("div", we, [
-              t[2] || (t[2] = g("div", { class: "text-2xl" }, "📁", -1)),
+              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(), u("p", qe, x(e.field.accept), 1)) : p("", !0)
+              e.field.accept ? (l(), s("p", Be, x(e.field.accept), 1)) : p("", !0)
             ])
           ], 34),
-          d.value.length ? (l(), u("ul", Be, [
-            (l(!0), u(w, null, F(d.value, (s, q) => (l(), u("li", {
-              key: `${s.name}-${q}`,
+          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(s.name), 1),
-              g("span", Te, x(R(s.size)), 1),
+              g("span", Ce, x(u.name), 1),
+              g("span", Te, x(R(u.size)), 1),
               g("button", {
                 type: "button",
-                "aria-label": `Remove ${s.name}`,
+                "aria-label": `Remove ${u.name}`,
                 class: "ml-2 shrink-0 text-gray-500 hover:text-red-400 transition",
-                onClick: (Pe) => S(q)
+                onClick: (Pe) => S(B)
               }, " × ", 8, Se)
             ]))), 128))
           ])) : p("", !0)
@@ -466,7 +481,7 @@ const te = { class: "mb-4" }, re = ["for"], le = {
     components: {}
   },
   setup(e) {
-    const m = e, r = U(), c = {
+    const m = e, t = U(), c = {
       text: A,
       email: A,
       number: P,
@@ -477,20 +492,20 @@ const te = { class: "mb-4" }, re = ["for"], le = {
       date: H
     };
     function a(o) {
-      var t;
-      return o.component ? o.component : ((t = m.components) == null ? void 0 : t[o.type]) ?? r[o.type] ?? c[o.type] ?? null;
+      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: n, append: d, remove: i } = ee(m.form, m.field.name);
+    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, t) {
-      m.form.setField(o.name, t);
+    function b(o, r) {
+      m.form.setField(o.name, r);
     }
     function y(o) {
       var h;
-      const t = m.form;
-      (h = t.touchField) == null || h.call(t, o.name);
+      const r = m.form;
+      (h = r.touchField) == null || h.call(r, o.name);
     }
     function S(o) {
       return m.form.errors.value[o.name] ?? [];
@@ -498,14 +513,14 @@ const te = { class: "mb-4" }, re = ["for"], le = {
     function R(o) {
       return m.form.touched.value[o.name] ?? !1;
     }
-    return (o, t) => (l(), u("div", Ae, [
-      e.field.label ? (l(), u("div", De, x(e.field.label), 1)) : p("", !0),
-      (l(!0), u(w, null, F(D(n), (h) => (l(), u("div", {
+    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), u(w, null, F(h.fields, (v) => (l(), u(w, {
+          (l(!0), s(w, null, F(h.fields, (v) => (l(), s(w, {
             key: v.name
           }, [
             a(v) ? (l(), k(z(a(v)), {
@@ -514,8 +529,8 @@ const te = { class: "mb-4" }, re = ["for"], le = {
               "model-value": f(v),
               error: S(v),
               touched: R(v),
-              "onUpdate:modelValue": (s) => b(v, s),
-              onBlur: (s) => y(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))
         ]),
@@ -528,7 +543,7 @@ const te = { class: "mb-4" }, re = ["for"], le = {
       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: t[0] || (t[0] = (h) => D(d)())
+        onClick: r[0] || (r[0] = (h) => D(n)())
       }, " + Add row ")
     ]));
   }
@@ -538,16 +553,17 @@ const te = { class: "mb-4" }, re = ["for"], le = {
 }, Ue = {
   key: 0,
   class: "px-1 text-xs font-semibold uppercase tracking-wider text-gray-400"
-}, Me = ["disabled"], Ke = /* @__PURE__ */ V({
+}, Me = ["disabled"], Ge = /* @__PURE__ */ V({
   __name: "TailwindFormRenderer",
   props: {
     form: {},
     components: {},
-    submitLabel: {}
+    submitLabel: {},
+    fields: {}
   },
   emits: ["submit"],
   setup(e, { emit: m }) {
-    const r = e, c = U(), a = m, n = {
+    const t = e, c = U(), a = m, d = {
       text: A,
       email: A,
       number: P,
@@ -558,71 +574,74 @@ const te = { class: "mb-4" }, re = ["for"], le = {
       date: H,
       file: Re
     };
-    function d(t) {
+    function n(r) {
       var h;
-      return t.component ? t.component : ((h = r.components) == null ? void 0 : h[t.type]) ?? c[t.type] ?? n[t.type] ?? null;
+      return r.component ? r.component : ((h = t.components) == null ? void 0 : h[r.type]) ?? c[r.type] ?? d[r.type] ?? null;
     }
-    function i(t) {
-      return M(r.form.values.value, t.name);
+    function i(r) {
+      return M(t.form.values.value, r.name);
     }
-    function f(t, h) {
-      r.form.setField(t.name, h);
+    function f(r, h) {
+      t.form.setField(r.name, h);
     }
-    function b(t) {
+    function b(r) {
       var v;
-      const h = r.form;
-      (v = h.touchField) == null || v.call(h, t.name);
+      const h = t.form;
+      (v = h.touchField) == null || v.call(h, r.name);
     }
-    function y(t) {
-      return r.form.errors.value[t.name] ?? [];
+    function y(r) {
+      return t.form.errors.value[r.name] ?? [];
     }
-    function S(t) {
-      return r.form.touched.value[t.name] ?? !1;
+    function S(r) {
+      return t.form.touched.value[r.name] ?? !1;
     }
-    const R = $(() => r.form.fields.value.filter((t) => t.visible !== !1));
-    async function o(t) {
-      t.preventDefault(), await r.form.submit(), a("submit");
+    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 (t, h) => {
+    return (r, h) => {
       const v = Z("TailwindFormRenderer", !0);
-      return l(), u("form", {
+      return l(), s("form", {
         novalidate: "",
         onSubmit: o
       }, [
-        (l(!0), u(w, null, F(R.value, (s) => (l(), u(w, {
-          key: s.name
+        (l(!0), s(w, null, F(R.value, (u) => (l(), s(w, {
+          key: u.name
         }, [
-          t.$slots[`field-${s.name}`] ? E(t.$slots, `field-${s.name}`, {
+          r.$slots[`field-${u.name}`] ? E(r.$slots, `field-${u.name}`, {
             key: 0,
-            field: s,
-            value: i(s),
-            error: y(s),
-            touched: S(s),
-            setValue: (q) => f(s, q),
-            touch: () => b(s)
-          }) : s.type === "group" ? (l(), u("fieldset", ze, [
-            s.label ? (l(), u("legend", Ue, x(s.label), 1)) : p("", !0),
-            s.fields ? (l(), k(v, {
+            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", "components"])) : p("", !0)
-          ])) : s.type === "array" ? (l(), k(Ne, {
+            }, null, 8, ["form", "fields", "components"])) : p("", !0)
+          ])) : u.type === "array" ? (l(), k(Ne, {
             key: 2,
-            field: s,
+            field: u,
             form: e.form,
             components: e.components
-          }, null, 8, ["field", "form", "components"])) : d(s) ? (l(), k(z(d(s)), {
+          }, null, 8, ["field", "form", "components"])) : n(u) ? (l(), k(z(n(u)), {
             key: 3,
-            field: s,
-            "model-value": i(s),
-            error: y(s),
-            touched: S(s),
-            "onUpdate:modelValue": (q) => f(s, q),
-            onBlur: (q) => b(s)
+            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(t.$slots, "submit", {
+        E(r.$slots, "submit", {
           isSubmitting: e.form.isSubmitting.value,
           isValid: e.form.isValid.value
         }, () => [
@@ -637,7 +656,7 @@ const te = { class: "mb-4" }, re = ["for"], le = {
   }
 });
 export {
-  Ke as TailwindFormRenderer,
+  Ge as TailwindFormRenderer,
   Ne as TwArrayField,
   K as TwCheckboxField,
   H as TwDateField,