vlite3 1.4.4 → 1.4.5

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

@@ -23,6 +23,8 @@ interface Props {
     /** Form Validation errors passed down */
     errors?: Record<string, string>;
     isUpdate?: boolean;
+    layout?: 'table' | 'accordion';
+    accordionTitleKey?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (value: Record<string, any>[]) => any;
@@ -36,6 +38,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     rounded: InputRounded;
     readonly: boolean;
     disabled: boolean;
+    layout: "table" | "accordion";
     isUpdate: boolean;
     modelValue: Record<string, any>[];
     draggable: boolean;
@@ -44,5 +47,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     addButtonText: string;
     showRowNumbers: boolean;
     errors: Record<string, string>;
+    accordionTitleKey: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/components/Form/CustomFields.vue.js

@@ -1,7 +1,7 @@
 import o from "./CustomFields.vue2.js";
 /* empty css                  */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-58c4250f"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ffa944de"]]);
 export {
-  s as default
+  p as default
 };

package/components/Form/CustomFields.vue2.js

@@ -1,33 +1,61 @@
-import { defineComponent as I, computed as m, shallowRef as ee, watch as te, openBlock as n, createElementBlock as d, createElementVNode as p, createBlock as k, withCtx as N, createTextVNode as ae, toDisplayString as v, createCommentVNode as i, Fragment as V, renderList as C, normalizeClass as F, createVNode as $, unref as le, isMemoSame as re } from "vue";
-import { VueDraggable as se } from "vue-draggable-plus";
-import oe from "./FormField.vue.js";
-import E from "../Button.vue.js";
-import ne from "../Label.vue.js";
-import de from "../Icon.vue.js";
-import { $t as w } from "../../utils/i18n.js";
-import { setNestedValue as T, resolveFieldType as ue, evaluateConditional as U } from "./utils/form.utils.js";
-const ie = { class: "custom-fields-wrapper" }, ce = { class: "flex justify-between items-center mb-2" }, me = { class: "custom-fields-table border border-border rounded overflow-hidden bg-background" }, be = {
+import { defineComponent as he, computed as p, shallowRef as ge, watch as re, ref as le, openBlock as n, createElementBlock as i, createElementVNode as b, createBlock as k, withCtx as R, createTextVNode as K, toDisplayString as v, createCommentVNode as d, Fragment as x, renderList as j, normalizeClass as $, createVNode as g, unref as N, isMemoSame as ne, resolveDynamicComponent as oe, withModifiers as ke, markRaw as xe } from "vue";
+import { VueDraggable as ie } from "vue-draggable-plus";
+import ue from "./FormField.vue.js";
+import L from "../Button.vue.js";
+import O from "../Label.vue.js";
+import z from "../Icon.vue.js";
+import we from "../Accordion/AccordionItem.vue.js";
+import { $t as V } from "../../utils/i18n.js";
+import { isComponent as M, setNestedValue as de, resolveFieldType as pe, evaluateConditional as W } from "./utils/form.utils.js";
+const Re = { class: "custom-fields-wrapper" }, $e = { class: "flex justify-between items-center mb-2" }, Ve = {
+  key: 0,
+  class: "custom-fields-table border border-border rounded overflow-hidden bg-background"
+}, Ce = {
   key: 0,
   class: "flex border-b border-border bg-muted/50 text-gray-800 text-xs font-semibold uppercase tracking-wider"
-}, fe = {
+}, Ue = {
   key: 0,
   class: "w-10 flex-none p-3 border-r border-border"
-}, ve = {
+}, Fe = {
   key: 1,
   class: "w-10 flex-none p-3 text-center border-r border-border"
-}, ye = {
+}, je = {
   key: 2,
   class: "w-10 flex-none p-3"
-}, ge = {
+}, Te = {
   key: 1,
   class: "w-10 flex-none flex items-center justify-center text-xs text-muted-foreground border-r border-border bg-muted/20"
-}, he = {
+}, Ae = {
   key: 2,
   class: "w-10 flex-none flex items-center justify-center border-l border-border bg-muted/20"
-}, pe = {
+}, Be = {
   key: 1,
   class: "flex flex-col items-center justify-center py-6 text-center bg-muted/5"
-}, we = { class: "text-sm font-medium text-foreground" }, xe = { class: "text-xs text-muted-foreground mt-1" }, je = /* @__PURE__ */ I({
+}, Ne = { class: "text-sm font-medium text-foreground" }, ze = { class: "text-xs text-muted-foreground mt-1" }, De = {
+  key: 1,
+  class: "custom-fields-accordion"
+}, Ee = ["onClick"], Se = { class: "flex items-center flex-1 py-3 px-4 min-w-0" }, Ke = { class: "font-medium flex-1 text-left truncate mr-4" }, Le = { class: "flex items-center gap-2 flex-none" }, Oe = {
+  key: 0,
+  class: "text-destructive flex items-center justify-center rounded-full bg-destructive/10 w-6 h-6"
+}, Me = {
+  key: 0,
+  class: "grid gap-4"
+}, We = {
+  key: 0,
+  class: "text-destructive ml-0.5"
+}, qe = {
+  key: 0,
+  class: "text-destructive ml-0.5"
+}, He = {
+  key: 1,
+  class: "mt-1 text-xs text-destructive"
+}, Ge = {
+  key: 0,
+  class: "col-span-1 flex justify-end"
+}, Je = {
+  key: 0,
+  class: "flex flex-col items-center justify-center py-6 text-center border border-border rounded bg-muted/5 mt-2"
+}, Pe = { class: "text-sm font-medium text-foreground" }, Qe = { class: "text-xs text-muted-foreground mt-1" }, rt = /* @__PURE__ */ he({
   __name: "CustomFields",
   props: {
     name: {},
@@ -49,213 +77,389 @@ const ie = { class: "custom-fields-wrapper" }, ce = { class: "flex justify-betwe
     showRowNumbers: { type: Boolean, default: !1 },
     values: {},
     errors: { default: () => ({}) },
-    isUpdate: { type: Boolean, default: !1 }
+    isUpdate: { type: Boolean, default: !1 },
+    layout: { default: "table" },
+    accordionTitleKey: { default: void 0 }
   },
   emits: ["update:modelValue", "change"],
-  setup(r, { emit: S }) {
-    const t = r, B = S, j = m(() => t.labelI18n ? w(t.labelI18n) : t.label), z = m(() => {
-      const e = w("vlite.customFields.emptyTitle");
+  setup(s, { emit: ce }) {
+    const a = s, q = ce, H = p(() => a.labelI18n ? V(a.labelI18n) : a.label), G = p(() => {
+      const e = V("vlite.customFields.emptyTitle");
       return e !== "vlite.customFields.emptyTitle" ? e : "No items added";
-    }), A = m(() => {
-      const e = w("vlite.customFields.emptyDescription");
+    }), J = p(() => {
+      const e = V("vlite.customFields.emptyDescription");
       return e !== "vlite.customFields.emptyDescription" ? e : "Add a new item to get started";
-    }), s = ee([]), D = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    te(
-      () => t.modelValue,
+    }), u = ge([]), P = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    re(
+      () => a.modelValue,
       (e) => {
-        Array.isArray(e) ? s.value = e.map((a, o) => {
-          const l = s.value[o];
+        Array.isArray(e) ? u.value = e.map((r, o) => {
+          const t = u.value[o];
           return {
-            ...a,
-            _id: l?._id || D()
+            ...r,
+            _id: t?._id || P()
           };
-        }) : s.value = [];
+        }) : u.value = [];
       },
       { immediate: !0, deep: !0 }
     );
-    const H = () => {
+    const me = () => {
       const e = {};
-      for (const a of t.schema) {
-        const o = typeof a.value == "function" ? a.value() : a.value;
-        let l = null;
-        (a.props?.multiple || a.type === "multiSelect" || a.type === "tags") && (l = []), e[a.name] = o ?? l;
+      for (const r of a.schema) {
+        const o = typeof r.value == "function" ? r.value() : r.value;
+        let t = null;
+        (r.props?.multiple || r.type === "multiSelect" || r.type === "tags") && (t = []), e[r.name] = o ?? t;
       }
-      return { ...e, _id: D() };
-    }, L = () => {
-      if (t.disabled || t.readonly || t.maxRows && s.value.length >= t.maxRows) return;
-      const e = [...s.value, H()];
-      s.value = e, y(e);
-    }, M = (e) => {
-      if (t.disabled || t.readonly || s.value.length <= t.minRows) return;
-      const a = [...s.value];
-      a.splice(e, 1), s.value = a, y(a);
-    }, G = async (e, a, o) => {
-      const l = [...s.value];
-      l[e] = {
-        ...l[e],
-        [a]: o.value
+      return { ...e, _id: P() };
+    }, ve = () => {
+      if (a.disabled || a.readonly || a.maxRows && u.value.length >= a.maxRows) return;
+      const e = [...u.value, me()];
+      u.value = e, T(e);
+    }, Q = (e) => {
+      if (a.disabled || a.readonly || u.value.length <= a.minRows) return;
+      const r = [...u.value];
+      r.splice(e, 1), u.value = r, T(r);
+    }, X = async (e, r, o) => {
+      const t = [...u.value];
+      t[e] = {
+        ...t[e],
+        [r]: o.value
       };
-      const h = t.schema.find((c) => c.name === a);
-      if (h && h.updateValues)
+      const U = a.schema.find((c) => c.name === r);
+      if (U && U.updateValues)
         try {
-          const c = l[e];
-          let b = { ...t.values || {} };
-          t.name && (b = T(b, t.name, l));
-          const f = await h.updateValues({
+          const c = t[e];
+          let y = { ...a.values || {} };
+          a.name && (y = de(y, a.name, t));
+          const h = await U.updateValues({
             value: o.value,
             values: c,
             // strictly local row scope
-            globalValues: b,
+            globalValues: y,
             // strictly global root scope
             data: o.data,
-            isUpdate: t.isUpdate
+            isUpdate: a.isUpdate
           });
-          f && typeof f == "object" && (l[e] = { ...l[e], ...f });
+          h && typeof h == "object" && (t[e] = { ...t[e], ...h });
         } catch (c) {
-          console.error(`[CustomFields] Error in updateValues for ${a}:`, c);
+          console.error(`[CustomFields] Error in updateValues for ${r}:`, c);
         }
-      s.value = l, y(l);
-    }, O = (e) => {
-      s.value = e, y(e);
-    }, y = (e) => {
-      const a = e.map(({ _id: o, ...l }) => l);
-      B("update:modelValue", a), B("change", a);
-    }, W = (e, a) => s.value[e]?.[a], q = m(() => !(t.disabled || t.readonly || t.maxRows && s.value.length >= t.maxRows)), x = m(() => t.disabled || t.readonly ? !1 : s.value.length > t.minRows), R = m(() => t.headers && t.headers.length > 0 ? t.headers : t.schema.map((e) => e.labelI18n ? w(e.labelI18n) : e.label || e.name)), J = m(() => t.schema.slice(0, R.value.length)), g = (e) => {
-      let a = { ...t.values || {} };
-      return t.name && (a = T(a, t.name, s.value)), {
-        values: s.value[e] || {},
-        globalValues: a,
-        isUpdate: t.isUpdate
+      u.value = t, T(t);
+    }, Y = (e) => {
+      u.value = e, T(e);
+    }, T = (e) => {
+      const r = e.map(({ _id: o, ...t }) => t);
+      q("update:modelValue", r), q("change", r);
+    }, Z = (e, r) => u.value[e]?.[r], be = p(() => !(a.disabled || a.readonly || a.maxRows && u.value.length >= a.maxRows)), A = p(() => a.disabled || a.readonly ? !1 : u.value.length > a.minRows), D = p(() => a.headers && a.headers.length > 0 ? a.headers : a.schema.map((e) => e.labelI18n ? V(e.labelI18n) : e.label || e.name)), fe = p(() => a.schema.slice(0, D.value.length)), B = (e) => {
+      let r = { ...a.values || {} };
+      return a.name && (r = de(r, a.name, u.value)), {
+        values: u.value[e] || {},
+        globalValues: r,
+        isUpdate: a.isUpdate
       };
-    }, K = (e, a) => ue(e, g(a)), P = (e, a) => t.disabled ? !0 : U(a.disabled, g(e)), Q = (e, a) => t.readonly ? !0 : U(a.readonly, g(e)), X = (e, a) => a.when ? U(a.when, g(e)) : !0, Y = (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(",");
+    }, m = (e, r) => pe(e, B(r)), _ = (e, r) => a.disabled ? !0 : W(r.disabled, B(e)), I = (e, r) => a.readonly ? !0 : W(r.readonly, B(e)), ee = (e, r) => r.when ? W(r.when, B(e)) : !0, te = (e) => {
+      if (!a.errors || !a.name) return "";
+      const r = `${a.name}.${e}.`;
+      return Object.keys(a.errors).filter((o) => o.startsWith(r)).map((o) => a.errors[o]).join(",");
+    }, ae = (e, r) => a.accordionTitleKey && e[a.accordionTitleKey] ? e[a.accordionTitleKey] : `${a.labelI18n ? V(a.labelI18n) : a.label || "Item"} #${r + 1}`, E = (e) => {
+      if (!a.errors || !a.name) return !1;
+      const r = `${a.name}.${e}.`;
+      return Object.keys(a.errors).some((o) => o.startsWith(r));
+    }, w = (e) => e.labelI18n ? V(e.labelI18n) : e.label || e.name, se = (e) => {
+      if (e)
+        return M(e) ? xe(e) : e;
+    }, f = le([]), C = le([]), ye = (e) => {
+      f.value.includes(e) ? f.value = f.value.filter((o) => o !== e) : (C.value.includes(e) || C.value.push(e), f.value = [...f.value, e]);
     };
-    return (e, a) => (n(), d("div", ie, [
-      p("div", ce, [
-        j.value ? (n(), k(ne, {
+    return re(
+      () => a.errors,
+      (e) => {
+        if (a.layout !== "accordion" || !e || !a.name) return;
+        const r = u.value.filter((o, t) => E(t)).map((o) => o._id);
+        if (r.length > 0) {
+          const o = /* @__PURE__ */ new Set([...f.value, ...r]);
+          f.value = Array.from(o);
+          const t = /* @__PURE__ */ new Set([...C.value, ...r]);
+          C.value = Array.from(t);
+        }
+      },
+      { deep: !0, immediate: !0 }
+    ), (e, r) => (n(), i("div", Re, [
+      b("div", $e, [
+        H.value ? (n(), k(O, {
           key: 0,
           class: "text-sm font-medium text-foreground"
         }, {
-          default: N(() => [
-            ae(v(j.value), 1)
+          default: R(() => [
+            K(v(H.value), 1)
           ]),
           _: 1
-        })) : i("", !0),
-        r.readonly ? i("", !0) : (n(), k(E, {
+        })) : d("", !0),
+        s.readonly ? d("", !0) : (n(), k(L, {
           key: 1,
           type: "button",
           variant: "outline",
           size: "xs",
           rounded: "full",
+          "as-icon": "",
           icon: "lucide:plus",
-          disabled: !q.value,
-          onClick: L
+          disabled: !be.value,
+          onClick: ve
         }, null, 8, ["disabled"]))
       ]),
-      p("div", me, [
-        R.value.length > 1 ? (n(), d("div", be, [
-          r.draggable && !r.disabled && !r.readonly ? (n(), d("div", fe)) : i("", !0),
-          r.showRowNumbers ? (n(), d("div", ve, " # ")) : i("", !0),
-          (n(!0), d(V, null, C(R.value, (o, l) => (n(), d("div", {
-            key: l,
-            class: F(["flex-1 p-3 min-w-0 truncate", { "border-l border-border": l > 0 }])
+      a.layout === "table" ? (n(), i("div", Ve, [
+        D.value.length > 1 ? (n(), i("div", Ce, [
+          s.draggable && !s.disabled && !s.readonly ? (n(), i("div", Ue)) : d("", !0),
+          s.showRowNumbers ? (n(), i("div", Fe, " # ")) : d("", !0),
+          (n(!0), i(x, null, j(D.value, (o, t) => (n(), i("div", {
+            key: t,
+            class: $(["flex-1 p-3 min-w-0 truncate", { "border-l border-border": t > 0 }])
           }, v(o), 3))), 128)),
-          x.value ? (n(), d("div", ye)) : i("", !0)
-        ])) : i("", !0),
-        $(le(se), {
-          "model-value": s.value,
-          "onUpdate:modelValue": O,
-          disabled: !r.draggable || r.disabled || r.readonly,
+          A.value ? (n(), i("div", je)) : d("", !0)
+        ])) : d("", !0),
+        g(N(ie), {
+          "model-value": u.value,
+          "onUpdate:modelValue": Y,
+          disabled: !s.draggable || s.disabled || s.readonly,
           animation: 150,
           handle: ".drag-handle",
           "ghost-class": "opacity-50",
           class: "divide-y divide-border"
         }, {
-          default: N(() => [
-            (n(!0), d(V, null, C(s.value, (o, l, h, c) => {
-              const b = [
+          default: R(() => [
+            (n(!0), i(x, null, j(u.value, (o, t, U, c) => {
+              const y = [
                 o,
-                r.disabled,
-                r.readonly,
-                r.isUpdate,
-                r.showRowNumbers,
-                x.value,
-                r.draggable,
-                l,
-                Y(l)
+                s.disabled,
+                s.readonly,
+                s.isUpdate,
+                s.showRowNumbers,
+                A.value,
+                s.draggable,
+                t,
+                te(t)
               ];
-              if (c && c.key === o._id && re(c, b)) return c;
-              const f = (n(), d("div", {
+              if (c && c.key === o._id && ne(c, y)) return c;
+              const h = (n(), i("div", {
                 key: o._id,
                 class: "flex group bg-white transition-colors"
               }, [
-                r.draggable && !r.disabled && !r.readonly ? (n(), d("div", {
+                s.draggable && !s.disabled && !s.readonly ? (n(), i("div", {
                   key: 0,
-                  class: F([
+                  class: $([
                     "w-10 flex-none flex items-center justify-center border-r border-border bg-muted/5 drag-handle transition-colors",
-                    r.disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing hover:bg-muted/10 text-muted-foreground hover:text-foreground"
+                    s.disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing hover:bg-muted/10 text-muted-foreground hover:text-foreground"
                   ])
                 }, [
-                  $(de, {
+                  g(z, {
                     icon: "lucide:grip-vertical",
                     class: "w-4 h-4"
                   })
-                ], 2)) : i("", !0),
-                r.showRowNumbers ? (n(), d("div", ge, v(l + 1), 1)) : i("", !0),
-                (n(!0), d(V, null, C(J.value, (u, Z) => (n(), d("div", {
-                  key: u.name,
-                  class: F(["flex-1 min-w-0 relative", { "border-l border-border": Z > 0 }])
+                ], 2)) : d("", !0),
+                s.showRowNumbers ? (n(), i("div", Te, v(t + 1), 1)) : d("", !0),
+                (n(!0), i(x, null, j(fe.value, (l, F) => (n(), i("div", {
+                  key: l.name,
+                  class: $(["flex-1 min-w-0 relative", { "border-l border-border": F > 0 }])
                 }, [
-                  X(l, u) ? (n(), k(oe, {
+                  ee(t, l) ? (n(), k(ue, {
                     key: 0,
                     field: {
-                      ...u,
+                      ...l,
                       props: {
-                        ...K(u, l) === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
-                        ...u.props || {}
+                        ...m(l, t) === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
+                        ...l.props || {},
+                        ...m(l, t) === "file" || m(l, t) === "fileUploader" ? { variant: "input" } : {}
                       },
                       label: void 0
                     },
-                    value: W(l, u.name),
-                    values: s.value[l] || {},
-                    errors: r.errors,
-                    error: r.name && r.errors ? r.errors[`${r.name}.${l}.${u.name}`] : "",
+                    value: Z(t, l.name),
+                    values: u.value[t] || {},
+                    errors: s.errors,
+                    error: s.name && s.errors ? s.errors[`${s.name}.${t}.${l.name}`] : "",
                     variant: "transparent",
                     size: "sm",
                     rounded: "none",
-                    disabled: P(l, u),
-                    readonly: Q(l, u),
-                    isUpdate: r.isUpdate,
+                    disabled: _(t, l),
+                    readonly: I(t, l),
+                    isUpdate: s.isUpdate,
                     class: "w-full h-full min-h-[40px]",
-                    onChange: (_) => G(l, u.name, _)
-                  }, null, 8, ["field", "value", "values", "errors", "error", "disabled", "readonly", "isUpdate", "onChange"])) : i("", !0)
+                    onChange: (S) => X(t, l.name, S)
+                  }, null, 8, ["field", "value", "values", "errors", "error", "disabled", "readonly", "isUpdate", "onChange"])) : d("", !0)
                 ], 2))), 128)),
-                x.value ? (n(), d("div", he, [
-                  $(E, {
+                A.value ? (n(), i("div", Ae, [
+                  g(L, {
                     type: "button",
                     variant: "ghost",
                     size: "xs",
                     icon: "lucide:trash-2",
-                    disabled: r.disabled || r.readonly,
-                    onClick: (u) => M(l)
+                    disabled: s.disabled || s.readonly,
+                    onClick: (l) => Q(t)
                   }, null, 8, ["disabled", "onClick"])
-                ])) : i("", !0)
+                ])) : d("", !0)
               ]));
-              return f.memo = b, f;
-            }, a, 0), 128))
+              return h.memo = y, h;
+            }, r, 0), 128))
+          ]),
+          _: 1
+        }, 8, ["model-value", "disabled"]),
+        u.value.length === 0 ? (n(), i("div", Be, [
+          b("p", Ne, v(G.value), 1),
+          b("p", ze, v(J.value), 1)
+        ])) : d("", !0)
+      ])) : a.layout === "accordion" ? (n(), i("div", De, [
+        g(N(ie), {
+          "model-value": u.value,
+          "onUpdate:modelValue": Y,
+          disabled: !s.draggable || s.disabled || s.readonly,
+          animation: 150,
+          handle: ".drag-handle",
+          "ghost-class": "opacity-50",
+          class: "space-y-2"
+        }, {
+          default: R(() => [
+            (n(!0), i(x, null, j(u.value, (o, t, U, c) => {
+              const y = [
+                o,
+                s.disabled,
+                s.readonly,
+                s.isUpdate,
+                s.draggable,
+                t,
+                te(t),
+                E(t),
+                f.value.includes(o._id)
+              ];
+              if (c && c.key === o._id && ne(c, y)) return c;
+              const h = (n(), k(we, {
+                key: o._id,
+                item: { id: o._id, title: ae(o, t) },
+                "is-open": f.value.includes(o._id),
+                variant: "solid",
+                onToggle: ye,
+                class: "bg-white"
+              }, {
+                trigger: R(({ open: l, toggle: F, triggerClass: S }) => [
+                  b("div", {
+                    class: $(["flex items-stretch w-full", [S, "!p-0 overflow-hidden"]]),
+                    onClick: F
+                  }, [
+                    s.draggable && !s.disabled && !s.readonly ? (n(), i("div", {
+                      key: 0,
+                      class: $([
+                        "w-12 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"
+                      ]),
+                      onClick: r[2] || (r[2] = ke(() => {
+                      }, ["stop"]))
+                    }, [
+                      g(z, {
+                        icon: "lucide:grip-vertical",
+                        class: "w-4 h-4"
+                      })
+                    ], 2)) : d("", !0),
+                    b("div", Se, [
+                      b("span", Ke, v(ae(o, t)), 1),
+                      b("div", Le, [
+                        E(t) ? (n(), i("div", Oe, [
+                          g(z, {
+                            icon: "lucide:alert-circle",
+                            class: "w-4 h-4"
+                          })
+                        ])) : d("", !0),
+                        g(z, {
+                          icon: "lucide:chevron-down",
+                          class: $(["w-4 h-4 transition-transform duration-200", { "rotate-180": l }])
+                        }, null, 8, ["class"])
+                      ])
+                    ])
+                  ], 10, Ee)
+                ]),
+                content: R(() => [
+                  C.value.includes(o._id) ? (n(), i("div", Me, [
+                    (n(!0), i(x, null, j(a.schema, (l) => (n(), i("div", {
+                      key: l.name,
+                      class: "col-span-1 flex flex-col"
+                    }, [
+                      ee(t, l) ? (n(), i(x, { key: 0 }, [
+                        w(l) && m(l, t) !== "switch" && m(l, t) !== "check" && m(l, t) !== "customFields" && m(l, t) !== "choiceBox" ? (n(), k(O, {
+                          key: 0,
+                          class: "mb-2 block text-sm font-medium"
+                        }, {
+                          default: R(() => [
+                            N(M)(w(l)) ? (n(), k(oe(se(w(l))), { key: 0 })) : (n(), i(x, { key: 1 }, [
+                              K(v(w(l)) + " ", 1),
+                              l.required ? (n(), i("span", We, "*")) : d("", !0)
+                            ], 64))
+                          ]),
+                          _: 2
+                        }, 1024)) : d("", !0),
+                        b("div", {
+                          class: $(["relative", [
+                            m(l, t) === "check" || m(l, t) === "switch" && l.props?.switchVariant === "basic" ? "w-auto flex items-center" : "w-full"
+                          ]])
+                        }, [
+                          g(ue, {
+                            field: {
+                              ...l,
+                              props: {
+                                ...l.props || {}
+                              }
+                            },
+                            value: Z(t, l.name),
+                            values: u.value[t] || {},
+                            errors: s.errors,
+                            error: s.name && s.errors ? s.errors[`${s.name}.${t}.${l.name}`] : "",
+                            variant: s.variant,
+                            size: s.size,
+                            rounded: s.rounded,
+                            disabled: _(t, l),
+                            readonly: I(t, l),
+                            isUpdate: s.isUpdate,
+                            onChange: (F) => X(t, l.name, F)
+                          }, null, 8, ["field", "value", "values", "errors", "error", "variant", "size", "rounded", "disabled", "readonly", "isUpdate", "onChange"]),
+                          m(l, t) === "check" || m(l, t) === "switch" && l.props?.switchVariant === "basic" ? (n(), k(O, {
+                            key: 0,
+                            class: "ml-2 text-sm font-medium cursor-pointer"
+                          }, {
+                            default: R(() => [
+                              N(M)(w(l)) ? (n(), k(oe(se(w(l))), { key: 0 })) : (n(), i(x, { key: 1 }, [
+                                K(v(w(l)) + " ", 1),
+                                l.required ? (n(), i("span", qe, "*")) : d("", !0)
+                              ], 64))
+                            ]),
+                            _: 2
+                          }, 1024)) : d("", !0)
+                        ], 2),
+                        s.name && s.errors && s.errors[`${s.name}.${t}.${l.name}`] ? (n(), i("p", He, v(s.errors[`${s.name}.${t}.${l.name}`]), 1)) : d("", !0)
+                      ], 64)) : d("", !0)
+                    ]))), 128)),
+                    A.value ? (n(), i("div", Ge, [
+                      g(L, {
+                        type: "button",
+                        variant: "secondary",
+                        size: "xs",
+                        icon: "lucide:trash-2",
+                        disabled: s.disabled || s.readonly,
+                        onClick: (l) => Q(t)
+                      }, null, 8, ["disabled", "onClick"])
+                    ])) : d("", !0)
+                  ])) : d("", !0)
+                ]),
+                _: 2
+              }, 1032, ["item", "is-open"]));
+              return h.memo = y, h;
+            }, r, 3), 128))
           ]),
           _: 1
         }, 8, ["model-value", "disabled"]),
-        s.value.length === 0 ? (n(), d("div", pe, [
-          p("p", we, v(z.value), 1),
-          p("p", xe, v(A.value), 1)
-        ])) : i("", !0)
-      ])
+        u.value.length === 0 ? (n(), i("div", Je, [
+          b("p", Pe, v(G.value), 1),
+          b("p", Qe, v(J.value), 1)
+        ])) : d("", !0)
+      ])) : d("", !0)
     ]));
   }
 });
 export {
-  je as default
+  rt as default
 };

package/components/Form/FormField.vue.js

@@ -266,7 +266,7 @@ const Be = /* @__PURE__ */ E({
           maxFiles: e.field.maxFiles || e.field.props?.maxFiles,
           fileTypes: e.field.props?.accept ? e.field.props.accept.split(",") : [],
           returnFormat: "base64",
-          variant: a === "file" ? "input" : "dropzone",
+          variant: e.field.props?.variant ?? (a === "file" ? "input" : "dropzone"),
           placeholder: o,
           size: e.size,
           rounded: e.rounded,