vlite3 0.9.6 → 0.9.7

package/components/Form/CustomFields.vue2.js

@@ -1,35 +1,36 @@
-import { defineComponent as Q, computed as c, shallowRef as W, watch as X, openBlock as s, createElementBlock as n, createElementVNode as v, createBlock as B, withCtx as D, createTextVNode as Y, toDisplayString as m, createCommentVNode as u, createVNode as g, Fragment as w, renderList as x, normalizeClass as R, unref as Z, isMemoSame as I } from "vue";
-import { VueDraggable as ee } from "vue-draggable-plus";
-import te from "./FormField.vue.js";
-import $ from "../Button.vue.js";
-import ae from "../Label.vue.js";
-import le from "../Icon.vue.js";
-import { $t as h } from "../../utils/i18n.js";
-import { evaluateConditional as k } from "./utils/form.utils.js";
-const re = { class: "custom-fields-wrapper" }, se = { class: "flex justify-between items-center mb-2" }, oe = { class: "custom-fields-table border border-border rounded overflow-hidden bg-background" }, ne = {
+import { defineComponent as Y, computed as f, shallowRef as Z, watch as I, openBlock as n, createElementBlock as d, createElementVNode as y, createBlock as B, withCtx as D, createTextVNode as ee, toDisplayString as v, createCommentVNode as c, createVNode as p, Fragment as k, renderList as V, normalizeClass as C, unref as te, isMemoSame as ae } from "vue";
+import { VueDraggable as re } from "vue-draggable-plus";
+import le from "./FormField.vue.js";
+import N from "../Button.vue.js";
+import se from "../Label.vue.js";
+import oe from "../Icon.vue.js";
+import { $t as w } from "../../utils/i18n.js";
+import { setNestedValue as E, evaluateConditional as $ } from "./utils/form.utils.js";
+const ne = { class: "custom-fields-wrapper" }, de = { class: "flex justify-between items-center mb-2" }, ue = { class: "custom-fields-table border border-border rounded overflow-hidden bg-background" }, ie = {
   key: 0,
   class: "flex border-b border-border bg-muted/50 text-gray-800 text-xs font-semibold uppercase tracking-wider"
-}, de = {
+}, ce = {
   key: 0,
   class: "w-10 flex-none p-3 border-r border-border"
-}, ie = {
+}, me = {
   key: 1,
   class: "w-10 flex-none p-3 text-center border-r border-border"
-}, ue = {
+}, be = {
   key: 2,
   class: "w-10 flex-none p-3"
-}, ce = {
+}, fe = {
   key: 1,
   class: "w-10 flex-none flex items-center justify-center text-xs text-muted-foreground border-r border-border bg-muted/20"
-}, me = {
+}, ve = {
   key: 2,
   class: "w-10 flex-none flex items-center justify-center border-l border-border bg-muted/20"
-}, be = {
+}, ge = {
   key: 1,
   class: "flex flex-col items-center justify-center py-6 text-center bg-muted/5"
-}, fe = { class: "text-sm font-medium text-foreground" }, ve = { class: "text-xs text-muted-foreground mt-1" }, Ce = /* @__PURE__ */ Q({
+}, he = { class: "text-sm font-medium text-foreground" }, ye = { class: "text-xs text-muted-foreground mt-1" }, Fe = /* @__PURE__ */ Y({
   __name: "CustomFields",
   props: {
+    name: {},
     modelValue: { default: () => [] },
     schema: {},
     headers: { default: () => [] },
@@ -46,168 +47,199 @@ const re = { class: "custom-fields-wrapper" }, se = { class: "flex justify-betwe
     labelI18n: {},
     showRowNumbers: { type: Boolean, default: !1 },
     values: {},
+    errors: { default: () => ({}) },
     isUpdate: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "change"],
-  setup(o, { emit: j }) {
-    const a = o, _ = j, C = c(() => a.labelI18n ? h(a.labelI18n) : a.label), z = c(() => {
-      const e = h("vlite.customFields.emptyTitle");
+  setup(s, { emit: z }) {
+    const t = s, F = z, U = f(() => t.labelI18n ? w(t.labelI18n) : t.label), A = f(() => {
+      const e = w("vlite.customFields.emptyTitle");
       return e !== "vlite.customFields.emptyTitle" ? e : "No items added";
-    }), A = c(() => {
-      const e = h("vlite.customFields.emptyDescription");
+    }), T = f(() => {
+      const e = w("vlite.customFields.emptyDescription");
       return e !== "vlite.customFields.emptyDescription" ? e : "Add a new item to get started";
-    }), r = W([]), V = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    X(
-      () => a.modelValue,
+    }), l = Z([]), _ = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    I(
+      () => t.modelValue,
       (e) => {
-        Array.isArray(e) ? r.value = e.map((t, d) => {
-          const l = r.value[d];
+        Array.isArray(e) ? l.value = e.map((a, o) => {
+          const r = l.value[o];
           return {
-            ...t,
-            _id: l?._id || V()
+            ...a,
+            _id: r?._id || _()
           };
-        }) : r.value = [];
+        }) : l.value = [];
       },
       { immediate: !0, deep: !0 }
     );
-    const E = () => {
+    const S = () => {
       const e = {};
-      for (const t of a.schema) {
-        const d = typeof t.value == "function" ? t.value() : t.value;
-        e[t.name] = d ?? null;
+      for (const a of t.schema) {
+        const o = typeof a.value == "function" ? a.value() : a.value;
+        e[a.name] = o ?? null;
       }
-      return { ...e, _id: V() };
-    }, T = () => {
-      if (a.disabled || a.maxRows && r.value.length >= a.maxRows) return;
-      const e = [...r.value, E()];
-      r.value = e, b(e);
-    }, S = (e) => {
-      if (a.disabled || r.value.length <= a.minRows) return;
-      const t = [...r.value];
-      t.splice(e, 1), r.value = t, b(t);
-    }, L = (e, t, d) => {
-      const l = [...r.value];
-      l[e] = {
-        ...l[e],
-        [t]: d.value
-      }, r.value = l, b(l);
-    }, M = (e) => {
-      r.value = e, b(e);
-    }, b = (e) => {
-      const t = e.map(({ _id: d, ...l }) => l);
-      _("update:modelValue", t), _("change", t);
-    }, H = (e, t) => r.value[e]?.[t], q = c(() => !(a.disabled || a.maxRows && r.value.length >= a.maxRows)), y = c(() => a.disabled ? !1 : r.value.length > a.minRows), F = c(() => a.headers && a.headers.length > 0 ? a.headers : a.schema.map((e) => e.labelI18n ? h(e.labelI18n) : e.label || e.name)), p = (e) => ({
-      values: { ...a.values || {}, ...r.value[e] || {} },
-      isUpdate: a.isUpdate
-    }), G = (e, t) => a.disabled ? !0 : k(t.disabled, p(e)), J = (e, t) => k(t.readonly, p(e)), K = (e, t) => t.when ? k(t.when, p(e)) : !0;
-    return (e, t) => (s(), n("div", re, [
-      v("div", se, [
-        C.value ? (s(), B(ae, {
+      return { ...e, _id: _() };
+    }, H = () => {
+      if (t.disabled || t.maxRows && l.value.length >= t.maxRows) return;
+      const e = [...l.value, S()];
+      l.value = e, g(e);
+    }, L = (e) => {
+      if (t.disabled || l.value.length <= t.minRows) return;
+      const a = [...l.value];
+      a.splice(e, 1), l.value = a, g(a);
+    }, M = async (e, a, o) => {
+      const r = [...l.value];
+      r[e] = {
+        ...r[e],
+        [a]: o.value
+      };
+      const h = t.schema.find((i) => i.name === a);
+      if (h && h.updateValues)
+        try {
+          const i = r[e];
+          let m = { ...t.values || {} };
+          t.name && (m = E(m, t.name, r));
+          const b = await h.updateValues({
+            value: o.value,
+            values: i,
+            // strictly local row scope
+            globalValues: m,
+            // strictly global root scope
+            data: o.data,
+            isUpdate: t.isUpdate
+          });
+          b && typeof b == "object" && (r[e] = { ...r[e], ...b });
+        } catch (i) {
+          console.error(`[CustomFields] Error in updateValues for ${a}:`, i);
+        }
+      l.value = r, g(r);
+    }, G = (e) => {
+      l.value = e, g(e);
+    }, g = (e) => {
+      const a = e.map(({ _id: o, ...r }) => r);
+      F("update:modelValue", a), F("change", a);
+    }, O = (e, a) => l.value[e]?.[a], W = f(() => !(t.disabled || t.maxRows && l.value.length >= t.maxRows)), x = f(() => t.disabled ? !1 : l.value.length > t.minRows), j = f(() => t.headers && t.headers.length > 0 ? t.headers : t.schema.map((e) => e.labelI18n ? w(e.labelI18n) : e.label || e.name)), R = (e) => {
+      let a = { ...t.values || {} };
+      return t.name && (a = E(a, t.name, l.value)), {
+        values: l.value[e] || {},
+        globalValues: a,
+        isUpdate: t.isUpdate
+      };
+    }, q = (e, a) => t.disabled ? !0 : $(a.disabled, R(e)), J = (e, a) => $(a.readonly, R(e)), K = (e, a) => a.when ? $(a.when, R(e)) : !0, P = (e) => {
+      if (!t.errors || !t.name) return "";
+      const a = `${t.name}.${e}.`;
+      return Object.keys(t.errors).filter((o) => o.startsWith(a)).map((o) => t.errors[o]).join(",");
+    };
+    return (e, a) => (n(), d("div", ne, [
+      y("div", de, [
+        U.value ? (n(), B(se, {
           key: 0,
           class: "text-sm font-medium text-foreground"
         }, {
           default: D(() => [
-            Y(m(C.value), 1)
+            ee(v(U.value), 1)
           ]),
           _: 1
-        })) : u("", !0),
-        g($, {
+        })) : c("", !0),
+        p(N, {
           type: "button",
           variant: "outline",
           size: "xs",
           rounded: "full",
           icon: "lucide:plus",
-          disabled: !q.value,
-          onClick: T
+          disabled: !W.value,
+          onClick: H
         }, null, 8, ["disabled"])
       ]),
-      v("div", oe, [
-        F.value.length > 0 ? (s(), n("div", ne, [
-          o.draggable ? (s(), n("div", de)) : u("", !0),
-          o.showRowNumbers ? (s(), n("div", ie, " # ")) : u("", !0),
-          (s(!0), n(w, null, x(F.value, (d, l) => (s(), n("div", {
-            key: l,
-            class: R(["flex-1 p-3 min-w-0 truncate", { "border-l border-border": l > 0 }])
-          }, m(d), 3))), 128)),
-          y.value ? (s(), n("div", ue)) : u("", !0)
-        ])) : u("", !0),
-        g(Z(ee), {
-          "model-value": r.value,
-          "onUpdate:modelValue": M,
-          disabled: !o.draggable || o.disabled,
+      y("div", ue, [
+        j.value.length > 0 ? (n(), d("div", ie, [
+          s.draggable ? (n(), d("div", ce)) : c("", !0),
+          s.showRowNumbers ? (n(), d("div", me, " # ")) : c("", !0),
+          (n(!0), d(k, null, V(j.value, (o, r) => (n(), d("div", {
+            key: r,
+            class: C(["flex-1 p-3 min-w-0 truncate", { "border-l border-border": r > 0 }])
+          }, v(o), 3))), 128)),
+          x.value ? (n(), d("div", be)) : c("", !0)
+        ])) : c("", !0),
+        p(te(re), {
+          "model-value": l.value,
+          "onUpdate:modelValue": G,
+          disabled: !s.draggable || s.disabled,
           animation: 150,
           handle: ".drag-handle",
           "ghost-class": "opacity-50",
           class: "divide-y divide-border"
         }, {
           default: D(() => [
-            (s(!0), n(w, null, x(r.value, (d, l, ge, f) => {
-              const N = [d, o.disabled, o.isUpdate, o.showRowNumbers, y.value, o.draggable, l];
-              if (f && f.key === d._id && I(f, N)) return f;
-              const U = (s(), n("div", {
-                key: d._id,
+            (n(!0), d(k, null, V(l.value, (o, r, h, i) => {
+              const m = [o, s.disabled, s.isUpdate, s.showRowNumbers, x.value, s.draggable, r, P(r)];
+              if (i && i.key === o._id && ae(i, m)) return i;
+              const b = (n(), d("div", {
+                key: o._id,
                 class: "flex group bg-white transition-colors"
               }, [
-                o.draggable ? (s(), n("div", {
+                s.draggable ? (n(), d("div", {
                   key: 0,
-                  class: R(["w-10 flex-none flex items-center justify-center border-r border-border bg-muted/5 drag-handle transition-colors", o.disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing hover:bg-muted/10 text-muted-foreground hover:text-foreground"])
+                  class: C(["w-10 flex-none flex items-center justify-center border-r border-border bg-muted/5 drag-handle transition-colors", s.disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing hover:bg-muted/10 text-muted-foreground hover:text-foreground"])
                 }, [
-                  g(le, {
+                  p(oe, {
                     icon: "lucide:grip-vertical",
                     class: "w-4 h-4"
                   })
-                ], 2)) : u("", !0),
-                o.showRowNumbers ? (s(), n("div", ce, m(l + 1), 1)) : u("", !0),
-                (s(!0), n(w, null, x(o.schema, (i, O) => (s(), n("div", {
-                  key: i.name,
-                  class: R(["flex-1 min-w-0 relative", { "border-l border-border": O > 0 }])
+                ], 2)) : c("", !0),
+                s.showRowNumbers ? (n(), d("div", fe, v(r + 1), 1)) : c("", !0),
+                (n(!0), d(k, null, V(s.schema, (u, Q) => (n(), d("div", {
+                  key: u.name,
+                  class: C(["flex-1 min-w-0 relative", { "border-l border-border": Q > 0 }])
                 }, [
-                  K(l, i) ? (s(), B(te, {
+                  K(r, u) ? (n(), B(le, {
                     key: 0,
                     field: {
-                      ...i,
+                      ...u,
                       props: {
-                        ...i.type === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
-                        ...i.props || {}
+                        ...u.type === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
+                        ...u.props || {}
                       },
                       label: void 0
                     },
-                    value: H(l, i.name),
-                    values: o.values || {},
+                    value: O(r, u.name),
+                    values: l.value[r] || {},
+                    errors: s.errors,
+                    error: s.name && s.errors ? s.errors[`${s.name}.${r}.${u.name}`] : "",
                     variant: "transparent",
                     size: "sm",
                     rounded: "none",
-                    disabled: G(l, i),
-                    readonly: J(l, i),
-                    isUpdate: o.isUpdate,
+                    disabled: q(r, u),
+                    readonly: J(r, u),
+                    isUpdate: s.isUpdate,
                     class: "w-full h-full min-h-[40px]",
-                    onChange: (P) => L(l, i.name, P)
-                  }, null, 8, ["field", "value", "values", "disabled", "readonly", "isUpdate", "onChange"])) : u("", !0)
+                    onChange: (X) => M(r, u.name, X)
+                  }, null, 8, ["field", "value", "values", "errors", "error", "disabled", "readonly", "isUpdate", "onChange"])) : c("", !0)
                 ], 2))), 128)),
-                y.value ? (s(), n("div", me, [
-                  g($, {
+                x.value ? (n(), d("div", ve, [
+                  p(N, {
                     type: "button",
                     variant: "ghost",
                     size: "xs",
                     icon: "lucide:trash-2",
-                    disabled: o.disabled,
-                    onClick: (i) => S(l)
+                    disabled: s.disabled,
+                    onClick: (u) => L(r)
                   }, null, 8, ["disabled", "onClick"])
-                ])) : u("", !0)
+                ])) : c("", !0)
               ]));
-              return U.memo = N, U;
-            }, t, 0), 128))
+              return b.memo = m, b;
+            }, a, 0), 128))
           ]),
           _: 1
         }, 8, ["model-value", "disabled"]),
-        r.value.length === 0 ? (s(), n("div", be, [
-          v("p", fe, m(z.value), 1),
-          v("p", ve, m(A.value), 1)
-        ])) : u("", !0)
+        l.value.length === 0 ? (n(), d("div", ge, [
+          y("p", he, v(A.value), 1),
+          y("p", ye, v(T.value), 1)
+        ])) : c("", !0)
       ])
     ]));
   }
 });
 export {
-  Ce as default
+  Fe as default
 };

package/components/Form/FormField.vue.d.ts

@@ -4,6 +4,7 @@ interface Props {
     field: IForm;
     value: any;
     values: Record<string, any>;
+    errors?: Record<string, string>;
     variant?: InputVariant;
     size?: InputSize;
     rounded?: InputRounded;

package/components/Form/FormField.vue.js

@@ -21,6 +21,7 @@ const ge = /* @__PURE__ */ T({
     field: {},
     value: {},
     values: {},
+    errors: {},
     variant: { default: "outline" },
     size: { default: "md" },
     rounded: { default: "md" },
@@ -206,6 +207,7 @@ const ge = /* @__PURE__ */ T({
         value: e.value || "lucide:smile"
       } : a === "customFields" ? {
         ...i,
+        name: e.field.name,
         label: e?.field?.label,
         labelI18n: e?.field?.labelI18n,
         modelValue: Array.isArray(e.value) ? e.value : [],
@@ -213,6 +215,7 @@ const ge = /* @__PURE__ */ T({
         headers: e.field.props?.headers || [],
         draggable: e.field.props?.draggable || !1,
         values: e.values,
+        errors: e.errors,
         variant: e.variant,
         size: e.size,
         rounded: e.rounded,

package/components/Form/FormFields.vue.js

@@ -1,7 +1,7 @@
 import o from "./FormFields.vue2.js";
 /* empty css                */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const s = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1139135c"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e60dfb65"]]);
 export {
-  s as default
+  f as default
 };

package/components/Form/FormFields.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as M, computed as O, ref as j, openBlock as s, createElementBlock as r, normalizeClass as d, Fragment as y, renderList as G, withMemo as J, createBlock as h, withCtx as L, unref as R, resolveDynamicComponent as z, createTextVNode as k, toDisplayString as p, createCommentVNode as c, createElementVNode as K, createVNode as P, markRaw as Q } from "vue";
-import { isComponent as v, getNestedValue as W } from "./utils/form.utils.js";
+import { defineComponent as M, computed as O, ref as j, openBlock as s, createElementBlock as o, normalizeClass as m, Fragment as y, renderList as G, withMemo as J, createBlock as h, withCtx as L, unref as R, resolveDynamicComponent as z, createTextVNode as k, toDisplayString as v, createCommentVNode as c, createElementVNode as K, createVNode as P, markRaw as Q } from "vue";
+import { isComponent as p, getNestedValue as W } from "./utils/form.utils.js";
 import U from "../Label.vue.js";
 import X from "./FormField.vue.js";
 import { $t as Y } from "../../utils/i18n.js";
@@ -33,30 +33,30 @@ const Z = {
     isFieldReadonly: {}
   },
   emits: ["change", "addonAction"],
-  setup(a, { emit: q }) {
-    const o = a, g = q, D = O(() => {
-      if (o.className) return o.className;
-    }), F = (t) => W(o.values, t.name), l = (t) => o.errors[t.name] || "", $ = (t) => o.isFieldVisible ? o.isFieldVisible(t) : !0, x = (t) => o.isFieldDisabled ? o.isFieldDisabled(t) : t.disabled === !0, A = (t) => o.isFieldReadonly ? o.isFieldReadonly(t) : t.readonly === !0, u = (t) => t.labelI18n ? Y(t.labelI18n) : t.label, w = (t) => {
+  setup(a, { emit: f }) {
+    const r = a, g = f, q = O(() => {
+      if (r.className) return r.className;
+    }), F = (t) => W(r.values, t.name), l = (t) => r.errors[t.name] || "", D = (t) => r.isFieldVisible ? r.isFieldVisible(t) : !0, x = (t) => r.isFieldDisabled ? r.isFieldDisabled(t) : t.disabled === !0, A = (t) => r.isFieldReadonly ? r.isFieldReadonly(t) : t.readonly === !0, u = (t) => t.labelI18n ? Y(t.labelI18n) : t.label, w = (t) => {
       if (t)
-        return v(t) ? Q(t) : t;
-    }, f = (t, n) => {
+        return p(t) ? Q(t) : t;
+    }, $ = (t, n) => {
       g("change", t.name, n);
     }, B = (t) => t.itemClass || "", I = (t, n) => {
       g("change", t, n);
     }, E = (t) => {
       g("addonAction", t);
-    }, m = j({}), T = (t) => {
-      m.value[t] = !0;
+    }, d = j({}), T = (t) => {
+      d.value[t] = !0;
     }, S = (t) => {
-      m.value[t] = !1;
+      d.value[t] = !1;
     }, C = (t) => {
       const n = F(t), e = n != null && n !== "" && !(Array.isArray(n) && n.length === 0), i = typeof n == "number" && !isNaN(n);
-      return V(t) || t.type === "number" ? m.value[t.name] || e || i : e || i;
+      return V(t) || t.type === "number" ? d.value[t.name] || e || i : e || i;
     }, V = (t) => {
       const n = t.type || "text";
       return ["text", "email", "password", "tel", "url", "search", "textarea"].includes(n);
     }, H = (t) => t.type === "number" ? (t.props?.variant ?? "split") === "split" ? "left-4" : "left-3" : t.type === "date" || t.type === "time" || t.type === "color" ? "left-10" : "left-3", b = (t) => {
-      if (o.variant !== "floating") return !1;
+      if (r.variant !== "floating") return !1;
       const n = t.type || "text";
       return ![
         "switch",
@@ -68,65 +68,65 @@ const Z = {
       ].includes(n);
     }, N = (t) => {
       const n = u(t);
-      if (!(!n || v(n)))
+      if (!(!n || p(n)))
         return n;
     };
-    return (t, n) => (s(), r("div", {
-      class: d(["grid", a.variant === "floating" ? "gap-5 mt-1" : "gap-4", D.value])
+    return (t, n) => (s(), o("div", {
+      class: m(["grid", a.variant === "floating" ? "gap-5 mt-1" : "gap-4", q.value])
     }, [
-      (s(!0), r(y, null, G(a.schema, (e) => (s(), r(y, {
+      (s(!0), o(y, null, G(a.schema, (e) => (s(), o(y, {
         key: e.name
       }, [
-        $(e) ? J([
+        D(e) ? J([
           e,
           F(e),
           l(e),
           x(e),
           A(e),
-          m.value[e.name],
+          d.value[e.name],
           a.variant,
           a.size,
           a.rounded,
           a.isUpdate,
           a.showRequiredAsterisk,
           a.fieldLoading[e.name]
-        ], () => (s(), r("div", {
+        ], () => (s(), o("div", {
           key: 0,
-          class: d(["max-md:col-span-full! form-field-item", B(e)])
+          class: m(["max-md:col-span-full! form-field-item", B(e)])
         }, [
           u(e) && e.type !== "switch" && e.type !== "check" && e.type !== "customFields" && !b(e) ? (s(), h(U, {
             key: 0,
             for: e.name,
-            class: "mb-2 block text-sm font-medium"
+            class: "mb-2 block -text-fs-2! font-medium"
           }, {
             default: L(() => [
-              R(v)(u(e)) ? (s(), h(z(w(u(e))), { key: 0 })) : (s(), r(y, { key: 1 }, [
-                k(p(u(e)) + " ", 1),
-                e.required && a.showRequiredAsterisk ? (s(), r("span", Z, "*")) : c("", !0)
+              R(p)(u(e)) ? (s(), h(z(w(u(e))), { key: 0 })) : (s(), o(y, { key: 1 }, [
+                k(v(u(e)) + " ", 1),
+                e.required && a.showRequiredAsterisk ? (s(), o("span", Z, "*")) : c("", !0)
               ], 64))
             ]),
             _: 2
           }, 1032, ["for"])) : c("", !0),
           K("div", {
-            class: d(["relative", ["switch", "check"].includes(e.type) ? "w-auto" : "w-full"]),
+            class: m(["relative", ["switch", "check"].includes(e.type) ? "w-auto" : "w-full"]),
             onFocusin: (i) => T(e.name),
             onFocusout: (i) => S(e.name)
           }, [
-            b(e) && N(e) && !V(e) ? (s(), r("label", {
+            b(e) && N(e) && !V(e) ? (s(), o("label", {
               key: 0,
               for: e.name,
-              class: d([
+              class: m([
                 "absolute transition-all duration-200 ease-in-out pointer-events-none z-20",
                 C(e) ? "-top-2.5 left-3 text-xs bg-background px-1 text-black shadow-[0_4px_4px_-4px_bg-background]" : `top-1/2 -translate-y-1/2 text-sm text-muted-foreground/70 ${H(e)}`
               ])
             }, [
-              R(v)(u(e)) ? (s(), h(z(w(u(e))), { key: 0 })) : (s(), r(y, { key: 1 }, [
-                k(p(u(e)) + " ", 1),
-                e.required ? (s(), r("span", te, "*")) : c("", !0)
+              R(p)(u(e)) ? (s(), h(z(w(u(e))), { key: 0 })) : (s(), o(y, { key: 1 }, [
+                k(v(u(e)) + " ", 1),
+                e.required ? (s(), o("span", te, "*")) : c("", !0)
               ], 64))
             ], 10, ee)) : c("", !0),
             P(X, {
-              field: o.variant === "floating" ? {
+              field: r.variant === "floating" ? {
                 ...e,
                 placeholder: void 0,
                 placeholderI18n: void 0,
@@ -136,6 +136,7 @@ const Z = {
               floatingActive: C(e),
               label: e.type === "customFields" ? void 0 : b(e) ? N(e) : void 0,
               values: a.values,
+              errors: a.errors,
               variant: a.variant,
               size: a.size,
               rounded: a.rounded,
@@ -144,10 +145,10 @@ const Z = {
               error: l(e),
               isUpdate: a.isUpdate,
               loading: a.fieldLoading[e.name],
-              onChange: (i) => f(e, i),
+              onChange: (i) => $(e, i),
               onAddonChange: I,
               onAddonAction: E
-            }, null, 8, ["field", "value", "floatingActive", "label", "values", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "loading", "onChange"])
+            }, null, 8, ["field", "value", "floatingActive", "label", "values", "errors", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "loading", "onChange"])
           ], 42, _),
           u(e) && (e.type === "switch" || e.type === "check") ? (s(), h(U, {
             key: 1,
@@ -155,12 +156,12 @@ const Z = {
             class: "ml-2 text-sm font-medium cursor-pointer"
           }, {
             default: L(() => [
-              k(p(u(e)) + " ", 1),
-              e.required ? (s(), r("span", ne, "*")) : c("", !0)
+              k(v(u(e)) + " ", 1),
+              e.required ? (s(), o("span", ne, "*")) : c("", !0)
             ]),
             _: 2
           }, 1032, ["for"])) : c("", !0),
-          l(e) ? (s(), r("p", ae, p(l(e)), 1)) : c("", !0)
+          l(e) ? (s(), o("p", ae, v(l(e)), 1)) : c("", !0)
         ], 2)), n, 0) : c("", !0)
       ], 64))), 128))
     ], 2));

package/components/Form/composables/useForm.d.ts

@@ -22,7 +22,7 @@ export interface UseFormReturn {
     /** Handle field value change */
     handleFieldChange: (name: string, value: any, data?: any) => Promise<void>;
     /** Validate a single field */
-    validateField: (field: IForm) => Promise<string>;
+    validateField: (field: IForm, basePath?: string) => Promise<string>;
     /** Validate all fields */
     validateAll: () => Promise<boolean>;
     /** Check if field is visible */