vlite3 1.4.39 → 1.4.41

package/components/Form/Form.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as Ge, computed as o, inject as He, getCurrentInstance as $e, onMounted as Me, onUnmounted as _, shallowRef as ee, watch as te, nextTick as Oe, openBlock as n, createElementBlock as c, withKeys as ye, withModifiers as ae, normalizeClass as m, createElementVNode as p, createVNode as k, mergeProps as O, toDisplayString as j, renderSlot as he, unref as l, createCommentVNode as d, createBlock as C, withCtx as be, Fragment as je, renderList as Ke, isMemoSame as Ye } from "vue";
+import { defineComponent as Ge, computed as o, inject as He, getCurrentInstance as $e, onMounted as Me, onUnmounted as _, shallowRef as ee, watch as te, nextTick as Oe, openBlock as n, createElementBlock as c, withKeys as ye, withModifiers as ae, normalizeClass as v, createElementVNode as p, createVNode as k, mergeProps as O, toDisplayString as j, renderSlot as he, unref as l, createCommentVNode as d, createBlock as C, withCtx as be, Fragment as je, renderList as Ke, isMemoSame as Ye } from "vue";
 import { useForm as Je } from "./composables/useForm.js";
 import X from "./FormFields.vue.js";
 import Qe from "./FormField.vue.js";
@@ -25,7 +25,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
 }, ct = {
   key: 3,
   class: "form-step"
-}, mt = { class: "text-lg font-semibold text-foreground" }, vt = {
+}, vt = { class: "text-lg font-semibold text-foreground" }, mt = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
 }, ft = {
@@ -139,8 +139,8 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
       if (Array.isArray(t)) return t;
       try {
         const a = t({
-          values: v.value,
-          globalValues: v.value,
+          values: m.value,
+          globalValues: m.value,
           isUpdate: i.isUpdate
         });
         return Array.isArray(a) ? a : [];
@@ -153,7 +153,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
       const t = G.value, a = [];
       for (let s = 0; s < t.length; s++) {
         const x = t[s];
-        !Array.isArray(x) || x.length === 0 || x.some((ve) => R(ve)) && a.push({ schema: x, originalIndex: s });
+        !Array.isArray(x) || x.length === 0 || x.some((me) => R(me)) && a.push({ schema: x, originalIndex: s });
       }
       return a;
     }), Ae = o(
@@ -168,11 +168,11 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
         t.set(`form-group-${a.originalIndex}`, a.schema);
       return t;
     }), h = o(() => u.value ? null : (T.value ? i.schema.flat() : i.schema).find((a) => at(a, {
-      values: v.value,
-      globalValues: v.value,
+      values: m.value,
+      globalValues: m.value,
       isUpdate: i.isUpdate
     }) === "thumbnailSelector") ?? null), P = o(() => !!h.value), {
-      formValues: v,
+      formValues: m,
       errors: b,
       isSubmitting: y,
       fieldLoading: V,
@@ -213,7 +213,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
       }
     );
     const M = (t, a) => {
-      re(t, a.value, a.data), f("onChange", v.value);
+      re(t, a.value, a.data), f("onChange", m.value);
     }, Ve = async () => {
       if (!u.value) return !0;
       const t = ne.value;
@@ -253,11 +253,11 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
       if (!a) return;
       const s = a.tagName.toLowerCase();
       s !== "textarea" && s !== "button" && (a.isContentEditable || (t.preventDefault(), w()));
-    }, me = (t) => {
+    }, ve = (t) => {
       (t.metaKey || t.ctrlKey) && t.key === "s" && (t.preventDefault(), w());
     };
     xe({
-      formValues: v,
+      formValues: m,
       errors: b,
       isSubmitting: y,
       handleSubmit: w,
@@ -271,17 +271,17 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
       f("onCancel"), g && g?.close?.();
     };
     return (t, a) => (n(), c("form", {
-      class: m(["form-container", i.class, e.isPage && "pb-10"]),
+      class: v(["form-container", i.class, e.isPage && "pb-10"]),
       onSubmit: ae(w, ["prevent"]),
       onKeydown: [
         Ee,
-        ye(ae(me, ["meta", "prevent"]), ["s"]),
-        ye(ae(me, ["ctrl", "prevent"]), ["s"])
+        ye(ae(ve, ["meta", "prevent"]), ["s"]),
+        ye(ae(ve, ["ctrl", "prevent"]), ["s"])
       ]
     }, [
       e.isPage ? (n(), c("div", {
         key: 0,
-        class: m([
+        class: v([
           "form-page-header sticky top-0 z-30 bg-background flex items-center justify-between  pb-3.5 pt-4 -mt-3.5 mb-4.5",
           e.pageHeaderClass
         ])
@@ -292,12 +292,12 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
             class: "max-sm:w-8 max-sm:h-8 max-sm:min-w-8 max-sm:min-h-8 max-sm:px-0 shrink-0"
           }), null, 16, ["fallback"]),
           p("h1", {
-            class: m(["text-foreground max-sm:text-lg text-fs-5 truncate", e.pageTitleClass])
+            class: v(["text-foreground max-sm:text-lg text-fs-5 truncate", e.pageTitleClass])
           }, j(ke.value), 3)
         ]),
         p("div", st, [
           he(t.$slots, "header-actions", {
-            values: l(v),
+            values: l(m),
             isSubmitting: l(y),
             handleSubmit: w
           }, void 0, !0),
@@ -315,7 +315,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
       ], 2)) : d("", !0),
       !e.schemaLoading && u.value && se.value.length > 0 ? (n(), c("div", {
         key: 1,
-        class: m(["form-timeline", e.timelineTextPosition == "right" ? "mb-2" : "mb-8"])
+        class: v(["form-timeline", e.timelineTextPosition == "right" ? "mb-2" : "mb-8"])
       }, [
         k(l(_e), {
           steps: se.value,
@@ -327,21 +327,21 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
         }, null, 8, ["steps", "activeStep", "textPosition"])
       ], 2)) : d("", !0),
       p("div", {
-        class: m(e.footer && L.value ? "pb-2" : "")
+        class: v(e.footer && L.value ? "pb-2" : "")
       }, [
         e.schemaLoading ? (n(), C(We, {
           key: 0,
           isGrouped: T.value
         }, null, 8, ["isGrouped"])) : (n(), c("div", {
           key: 1,
-          class: m(P.value ? "flex flex-col lg:flex-row gap-10 lg:gap-16" : "")
+          class: v(P.value ? "flex flex-col lg:flex-row gap-10 lg:gap-16" : "")
         }, [
           P.value ? (n(), c("div", nt, [
             h.value && l(R)(h.value) ? (n(), C(Qe, {
               key: 0,
               field: h.value,
-              value: l(v)[h.value.name],
-              values: l(v),
+              value: l(m)[h.value.name],
+              values: l(m),
               errors: l(b),
               variant: U.value,
               size: I.value,
@@ -355,17 +355,17 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
             }, null, 8, ["field", "value", "values", "errors", "variant", "size", "rounded", "disabled", "readonly", "error", "isUpdate", "loading"])) : d("", !0)
           ])) : d("", !0),
           p("div", {
-            class: m(P.value ? "flex-1 min-w-0 order-last lg:order-first" : "w-full")
+            class: v(P.value ? "flex-1 min-w-0 order-last lg:order-first" : "w-full")
           }, [
             T.value ? T.value && !u.value && e.groupLayout === "basic" ? (n(), c("div", {
               key: 1,
-              class: m(["form-groups space-y-6", e.groupContainerClass])
+              class: v(["form-groups space-y-6", e.groupContainerClass])
             }, [
-              (n(!0), c(je, null, Ke(H.value, (s, x, ve, W) => {
+              (n(!0), c(je, null, Ke(H.value, (s, x, me, W) => {
                 const fe = [
                   s.schema,
                   s.originalIndex,
-                  l(v),
+                  l(m),
                   l(b),
                   l(V),
                   U.value,
@@ -383,7 +383,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
                 if (W && W.key === s.originalIndex && Ye(W, fe)) return W;
                 const ge = (n(), c("div", {
                   key: s.originalIndex,
-                  class: m([
+                  class: v([
                     "form-group overflow-hidden bg-body",
                     e.groupClass,
                     H.value.length > 1 ? "border rounded" : ""
@@ -391,17 +391,17 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
                 }, [
                   J.value?.[s.originalIndex] ? (n(), c("div", {
                     key: 0,
-                    class: m(["form-group-header bg-muted/50 px-4 py-2.5 border-b", e.headerClass])
+                    class: v(["form-group-header bg-muted/50 px-4 py-2.5 border-b", e.headerClass])
                   }, [
                     p("h3", ut, j(J.value[s.originalIndex]), 1),
                     Q.value?.[s.originalIndex] ? (n(), c("p", dt, j(Q.value[s.originalIndex]), 1)) : d("", !0)
                   ], 2)) : d("", !0),
                   p("div", {
-                    class: m(["form-group-body", [e.groupBodyClass, H.value.length > 1 ? "p-4.5" : ""]])
+                    class: v(["form-group-body", [e.groupBodyClass, H.value.length > 1 ? "p-4.5" : ""]])
                   }, [
                     k(X, {
                       schema: s.schema,
-                      values: l(v),
+                      values: l(m),
                       errors: l(b),
                       fieldLoading: l(V),
                       variant: U.value,
@@ -423,18 +423,18 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
               }, a, 3), 128))
             ], 2)) : T.value && !u.value && e.groupLayout === "accordion" ? (n(), c("div", {
               key: 2,
-              class: m(e.groupContainerClass)
+              class: v(e.groupContainerClass)
             }, [
               k(Xe, {
                 variant: "solid",
                 items: Ae.value,
                 "allow-multiple": "",
-                class: m(e.groupClass)
+                class: v(e.groupClass)
               }, {
                 content: be(({ item: s }) => [
                   k(X, {
                     schema: Te.value.get(s.id) || [],
-                    values: l(v),
+                    values: l(m),
                     errors: l(b),
                     fieldLoading: l(V),
                     variant: U.value,
@@ -456,14 +456,14 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
             ], 2)) : u.value ? (n(), c("div", ct, [
               e.tabs?.[r.value] ? (n(), c("div", {
                 key: 0,
-                class: m(["form-step-header mb-6", e.headerClass])
+                class: v(["form-step-header mb-6", e.headerClass])
               }, [
-                p("h2", mt, j(e.tabs[r.value].title), 1),
-                e.tabs[r.value].description ? (n(), c("p", vt, j(e.tabs[r.value].description), 1)) : d("", !0)
+                p("h2", vt, j(e.tabs[r.value].title), 1),
+                e.tabs[r.value].description ? (n(), c("p", mt, j(e.tabs[r.value].description), 1)) : d("", !0)
               ], 2)) : d("", !0),
               k(X, {
                 schema: ne.value,
-                values: l(v),
+                values: l(m),
                 errors: l(b),
                 fieldLoading: l(V),
                 variant: U.value,
@@ -482,7 +482,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
             ])) : d("", !0) : (n(), c("div", ot, [
               k(X, {
                 schema: e.schema,
-                values: l(v),
+                values: l(m),
                 errors: l(b),
                 fieldLoading: l(V),
                 variant: U.value,
@@ -522,7 +522,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
               }, 8, ["schema", "values", "errors", "fieldLoading", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly", "excludeTypes", "layout"])
             ])),
             he(t.$slots, "default", {
-              values: l(v),
+              values: l(m),
               errors: l(b),
               isSubmitting: l(y),
               handleSubmit: w
@@ -534,7 +534,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
         key: 2,
         ref_key: "footerRef",
         ref: F,
-        class: m([
+        class: v([
           "form-footer items-center gap-3 z-20 rounded-b-md!",
           e.isPage ? "flex sm:hidden" : "flex",
           e.footerClass,
@@ -572,7 +572,7 @@ const lt = ["onKeydown"], it = { class: "flex items-center gap-3" }, st = { clas
           }), null, 16, ["text", "loading"])) : d("", !0)
         ])) : d("", !0),
         p("div", {
-          class: m(["flex gap-3 items-center", [
+          class: v(["flex gap-3 items-center", [
             u.value && "ml-auto",
             !u.value || N.value ? "w-full justify-end" : ""
           ]])

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

@@ -1,15 +1,22 @@
+import { InputVariant, InputSize, InputRounded } from '../../types';
 import { IForm, IFormFieldChangePayload } from './types';
 import { CustomFieldRow, RowHelpers } from './rowHelpers';
 interface Props {
     row: CustomFieldRow;
     rowIndex: number;
     fields: IForm[];
+    columnHeaders: string[];
     draggable: boolean;
     disabled: boolean;
     readonly: boolean;
     isUpdate: boolean;
     showRowNumbers: boolean;
     canRemoveRow: boolean;
+    isStacked: boolean;
+    variant: InputVariant;
+    size: InputSize;
+    rounded: InputRounded;
+    rowTitleKey?: string;
     helpers: RowHelpers;
     onFieldChange: (rowIndex: number, fieldName: string, payload: IFormFieldChangePayload) => void;
     onRemoveRow: (index: number) => void;

package/components/Form/TableRow.vue.js

@@ -1,103 +1,249 @@
-import { defineComponent as x, computed as d, withMemo as f, openBlock as a, createElementBlock as l, normalizeStyle as R, normalizeClass as m, createVNode as u, createCommentVNode as i, toDisplayString as C, Fragment as F, renderList as I, createBlock as k } from "vue";
-import B from "./FormField.vue.js";
-import N from "../Icon.vue.js";
-import T from "../Button.vue.js";
-import { resolveFieldType as U } from "./utils/form.utils.js";
-const z = {
+import { defineComponent as D, computed as s, withMemo as F, openBlock as a, createElementBlock as l, createElementVNode as u, normalizeClass as m, createVNode as w, createCommentVNode as d, toDisplayString as i, createBlock as h, Fragment as f, renderList as C, withCtx as T, createTextVNode as B, unref as K, normalizeStyle as L } from "vue";
+import S from "./FormField.vue.js";
+import z from "../Icon.vue.js";
+import N from "../Button.vue.js";
+import V from "../Label.vue.js";
+import { fieldRendersOwnErrorMessage as q, resolveFieldType as M } from "./utils/form.utils.js";
+import { resolveCustomFieldRowTitle as G } from "./rowHelpers.js";
+const O = { class: "flex items-center justify-between gap-2 px-3 py-2 bg-muted/30 border-b border-border" }, A = { class: "flex items-center gap-2 min-w-0 flex-1" }, J = {
+  key: 1,
+  class: "text-xs font-semibold text-muted-foreground tabular-nums shrink-0"
+}, P = ["title"], Q = { class: "flex flex-col gap-4 p-3 min-w-0" }, W = {
+  key: 0,
+  class: "text-destructive ml-0.5"
+}, X = {
+  key: 0,
+  class: "text-destructive ml-0.5"
+}, Y = {
+  key: 1,
+  class: "text-xs text-destructive"
+}, Z = {
   key: 1,
   class: "w-10 flex-none flex items-center justify-center text-xs text-muted-foreground border-r border-border bg-muted/20"
-}, V = {
+}, p = {
   key: 2,
   class: "w-10 flex-none flex items-center justify-center border-l border-border bg-muted/20"
-}, H = /* @__PURE__ */ x({
+}, le = /* @__PURE__ */ D({
   __name: "TableRow",
   props: {
     row: {},
     rowIndex: {},
     fields: {},
+    columnHeaders: {},
     draggable: { type: Boolean },
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     isUpdate: { type: Boolean },
     showRowNumbers: { type: Boolean },
     canRemoveRow: { type: Boolean },
+    isStacked: { type: Boolean },
+    variant: {},
+    size: {},
+    rounded: {},
+    rowTitleKey: {},
     helpers: {},
     onFieldChange: { type: Function },
     onRemoveRow: { type: Function }
   },
   setup(e) {
-    const o = e, s = d(() => o.draggable && !o.disabled && !o.readonly), w = d(() => o.helpers.getRowErrorsHash(o.rowIndex)), c = (r) => U(r, o.helpers.getRowContext(o.rowIndex)), b = (r) => {
-      const t = c(r);
+    const o = e, b = s(() => o.draggable && !o.disabled && !o.readonly), k = s(() => o.helpers.getRowErrorsHash(o.rowIndex)), g = s(
+      () => G({
+        row: o.row,
+        titleKey: o.rowTitleKey,
+        schema: o.fields
+      })
+    ), v = s(() => g.value || `#${o.rowIndex + 1}`), R = s(
+      () => o.showRowNumbers && !!g.value
+    ), x = (r) => M(r, o.helpers.getRowContext(o.rowIndex)), U = (r) => {
+      const n = x(r);
+      return {
+        ...r,
+        props: {
+          ...n === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
+          ...n === "file" || n === "fileUploader" ? { variant: "input" } : {},
+          ...n === "switch" ? { switchVariant: "basic" } : {},
+          ...n === "check" ? { size: "sm" } : {},
+          ...n === "color" ? { trigger: "swatch" } : {},
+          ...r.props || {}
+        },
+        label: void 0
+      };
+    }, E = (r) => {
+      const n = x(r);
       return {
         ...r,
         props: {
-          ...t === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
-          ...t === "file" || t === "fileUploader" ? { variant: "input" } : {},
-          ...t === "switch" ? { switchVariant: "basic" } : {},
-          ...t === "check" ? { size: "sm" } : {},
-          ...t === "color" ? { trigger: "swatch" } : {},
+          ...n === "switch" ? { switchVariant: "basic" } : {},
           ...r.props || {}
         },
         label: void 0
       };
-    }, h = (r) => ["switch", "check"].includes(String(c(r))), g = d(() => {
+    }, H = (r) => ["switch", "check"].includes(String(x(r))), I = (r) => {
+      const n = String(o.helpers.getResolvedType(r, o.rowIndex));
+      return n === "check" || n === "switch" && r.props?.switchVariant === "basic";
+    }, j = (r, n) => {
+      if (!n) return !1;
+      const t = String(o.helpers.getResolvedType(r, o.rowIndex));
+      return t !== "switch" && t !== "check" && t !== "customFields" && t !== "choiceBox";
+    }, $ = s(() => {
       const r = [];
-      return s.value && r.push("2.5rem"), o.showRowNumbers && r.push("2.5rem"), r.push(...o.fields.map(() => "minmax(0, 1fr)")), o.canRemoveRow && r.push("2.5rem"), r.join(" ");
+      return b.value && r.push("2.5rem"), o.showRowNumbers && r.push("2.5rem"), r.push(...o.fields.map(() => "minmax(0, 1fr)")), o.canRemoveRow && r.push("2.5rem"), r.join(" ");
     });
-    return (r, t) => f([e.row, e.disabled, e.readonly, e.isUpdate, e.showRowNumbers, e.canRemoveRow, e.draggable, e.rowIndex, w.value], () => (a(), l("div", {
+    return (r, n) => e.isStacked ? F([
+      e.row,
+      e.disabled,
+      e.readonly,
+      e.isUpdate,
+      e.showRowNumbers,
+      e.canRemoveRow,
+      e.draggable,
+      e.rowIndex,
+      e.columnHeaders,
+      e.variant,
+      e.size,
+      e.rounded,
+      e.rowTitleKey,
+      v.value,
+      R.value,
+      k.value
+    ], () => (a(), l("div", {
+      key: 0,
+      class: "custom-fields-table-row--stacked border border-border rounded-lg overflow-hidden bg-white min-w-0"
+    }, [
+      u("div", O, [
+        u("div", A, [
+          b.value ? (a(), l("button", {
+            key: 0,
+            type: "button",
+            class: m(["drag-handle flex items-center justify-center w-8 h-8 shrink-0 rounded text-muted-foreground hover:text-foreground hover:bg-muted/50 cursor-grab active:cursor-grabbing", e.disabled ? "cursor-not-allowed opacity-50" : ""]),
+            "aria-label": "Reorder row"
+          }, [
+            w(z, {
+              icon: "lucide:grip-vertical",
+              class: "w-4 h-4"
+            })
+          ], 2)) : d("", !0),
+          R.value ? (a(), l("span", J, " #" + i(e.rowIndex + 1), 1)) : d("", !0),
+          u("span", {
+            class: m(["text-sm font-medium text-foreground truncate min-w-0", g.value ? "" : "text-muted-foreground"]),
+            title: v.value
+          }, i(v.value), 11, P)
+        ]),
+        e.canRemoveRow ? (a(), h(N, {
+          key: 0,
+          type: "button",
+          variant: "ghost",
+          size: "xs",
+          icon: "lucide:trash-2",
+          class: "shrink-0",
+          disabled: e.disabled || e.readonly,
+          onClick: n[0] || (n[0] = (t) => e.onRemoveRow(e.rowIndex))
+        }, null, 8, ["disabled"])) : d("", !0)
+      ]),
+      u("div", Q, [
+        (a(!0), l(f, null, C(e.fields, (t, c) => (a(), l("div", {
+          key: t.name,
+          class: "flex flex-col min-w-0 gap-1.5"
+        }, [
+          e.helpers.isFieldVisible(e.rowIndex, t) ? (a(), l(f, { key: 0 }, [
+            j(t, e.columnHeaders[c] || "") ? (a(), h(V, {
+              key: 0,
+              class: "text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+            }, {
+              default: T(() => [
+                B(i(e.columnHeaders[c]) + " ", 1),
+                t.required ? (a(), l("span", W, "*")) : d("", !0)
+              ]),
+              _: 2
+            }, 1024)) : d("", !0),
+            u("div", {
+              class: m(["relative min-w-0", I(t) ? "w-auto flex items-center" : "w-full"])
+            }, [
+              w(S, {
+                field: E(t),
+                value: e.helpers.getFieldValue(e.rowIndex, t.name),
+                values: e.row,
+                errors: e.helpers.errors,
+                error: e.helpers.getFieldError(e.rowIndex, t.name),
+                variant: e.variant,
+                size: e.size,
+                rounded: e.rounded,
+                disabled: e.disabled || e.helpers.isFieldDisabled(e.rowIndex, t),
+                readonly: e.readonly || e.helpers.isFieldReadonly(e.rowIndex, t),
+                isUpdate: e.isUpdate,
+                class: "w-full",
+                onChange: (y) => e.onFieldChange(e.rowIndex, t.name, y)
+              }, null, 8, ["field", "value", "values", "errors", "error", "variant", "size", "rounded", "disabled", "readonly", "isUpdate", "onChange"]),
+              I(t) ? (a(), h(V, {
+                key: 0,
+                class: "ml-2 text-sm font-medium cursor-pointer"
+              }, {
+                default: T(() => [
+                  B(i(e.columnHeaders[c]) + " ", 1),
+                  t.required ? (a(), l("span", X, "*")) : d("", !0)
+                ]),
+                _: 2
+              }, 1024)) : d("", !0)
+            ], 2),
+            e.helpers.getFieldError(e.rowIndex, t.name) && !K(q)(e.helpers.getResolvedType(t, e.rowIndex)) ? (a(), l("p", Y, i(e.helpers.getFieldError(e.rowIndex, t.name)), 1)) : d("", !0)
+          ], 64)) : d("", !0)
+        ]))), 128))
+      ])
+    ])), n, 1) : F([e.row, e.disabled, e.readonly, e.isUpdate, e.showRowNumbers, e.canRemoveRow, e.draggable, e.rowIndex, k.value], () => (a(), l("div", {
+      key: 1,
       class: "grid group bg-white transition-colors min-w-0",
-      style: R({ gridTemplateColumns: g.value })
+      style: L({ gridTemplateColumns: $.value })
     }, [
-      s.value ? (a(), l("div", {
+      b.value ? (a(), l("div", {
         key: 0,
         class: m([
           "w-10 flex-none flex items-center justify-center border-r border-border bg-muted/5 drag-handle transition-colors",
           e.disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing hover:bg-muted/10 text-muted-foreground hover:text-foreground"
         ])
       }, [
-        u(N, {
+        w(z, {
           icon: "lucide:grip-vertical",
           class: "w-4 h-4"
         })
-      ], 2)) : i("", !0),
-      e.showRowNumbers ? (a(), l("div", z, C(e.rowIndex + 1), 1)) : i("", !0),
-      (a(!0), l(F, null, I(e.fields, (n, y) => (a(), l("div", {
-        key: n.name,
+      ], 2)) : d("", !0),
+      e.showRowNumbers ? (a(), l("div", Z, i(e.rowIndex + 1), 1)) : d("", !0),
+      (a(!0), l(f, null, C(e.fields, (t, c) => (a(), l("div", {
+        key: t.name,
         class: m(["min-w-0 relative", [
-          { "border-l border-border": y > 0 },
-          h(n) ? "flex items-center px-3" : ""
+          { "border-l border-border": c > 0 },
+          H(t) ? "flex items-center px-3" : ""
         ]])
       }, [
-        e.helpers.isFieldVisible(e.rowIndex, n) ? (a(), k(B, {
+        e.helpers.isFieldVisible(e.rowIndex, t) ? (a(), h(S, {
           key: 0,
-          field: b(n),
-          value: e.helpers.getFieldValue(e.rowIndex, n.name),
+          field: U(t),
+          value: e.helpers.getFieldValue(e.rowIndex, t.name),
           values: e.row,
           errors: e.helpers.errors,
-          error: e.helpers.getFieldError(e.rowIndex, n.name),
+          error: e.helpers.getFieldError(e.rowIndex, t.name),
           variant: "transparent",
           size: "sm",
           rounded: "none",
-          disabled: e.disabled || e.helpers.isFieldDisabled(e.rowIndex, n),
-          readonly: e.readonly || e.helpers.isFieldReadonly(e.rowIndex, n),
+          disabled: e.disabled || e.helpers.isFieldDisabled(e.rowIndex, t),
+          readonly: e.readonly || e.helpers.isFieldReadonly(e.rowIndex, t),
           isUpdate: e.isUpdate,
           class: "w-full h-full min-h-[40px]",
-          onChange: (v) => e.onFieldChange(e.rowIndex, n.name, v)
-        }, null, 8, ["field", "value", "values", "errors", "error", "disabled", "readonly", "isUpdate", "onChange"])) : i("", !0)
+          onChange: (y) => e.onFieldChange(e.rowIndex, t.name, y)
+        }, null, 8, ["field", "value", "values", "errors", "error", "disabled", "readonly", "isUpdate", "onChange"])) : d("", !0)
       ], 2))), 128)),
-      e.canRemoveRow ? (a(), l("div", V, [
-        u(T, {
+      e.canRemoveRow ? (a(), l("div", p, [
+        w(N, {
           type: "button",
           variant: "ghost",
           size: "xs",
           icon: "lucide:trash-2",
           disabled: e.disabled || e.readonly,
-          onClick: t[0] || (t[0] = (n) => e.onRemoveRow(e.rowIndex))
+          onClick: n[2] || (n[2] = (t) => e.onRemoveRow(e.rowIndex))
         }, null, 8, ["disabled"])
-      ])) : i("", !0)
-    ], 4)), t, 1);
+      ])) : d("", !0)
+    ], 4)), n, 3);
   }
 });
 export {
-  H as default
+  le as default
 };

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

@@ -1,3 +1,4 @@
+import { InputVariant, InputSize, InputRounded } from '../../types';
 import { IForm, IFormFieldChangePayload } from './types';
 import { CustomFieldRow, RowHelpers } from './rowHelpers';
 interface Props {
@@ -15,9 +16,18 @@ interface Props {
     helpers: RowHelpers;
     emptyTitle: string;
     emptyDescription: string;
+    variant?: InputVariant;
+    size?: InputSize;
+    rounded?: InputRounded;
+    rowTitleKey?: string;
     onFieldChange: (rowIndex: number, fieldName: string, payload: IFormFieldChangePayload) => void;
     onRemoveRow: (index: number) => void;
     onDragUpdate: (rows: CustomFieldRow[]) => void;
 }
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: InputVariant;
+    size: InputSize;
+    rounded: InputRounded;
+    rowTitleKey: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;