vlite3 0.7.11 → 0.7.13

package/components/Badge.vue.d.ts

@@ -1,7 +1,9 @@
 export type BadgeVariant = 'default' | 'secondary' | 'danger' | 'outline' | 'warning' | 'info' | 'success' | 'purple' | 'teal' | 'indigo' | 'orange' | 'pink' | 'cyan';
 interface Props {
     variant?: BadgeVariant | string;
-    class?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
+    class?: any;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -14,7 +16,9 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: BadgeVariant | string;
-    class: string;
+    size: "xs" | "sm" | "md" | "lg";
+    rounded: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | string;
+    class: any;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/Badge.vue.js

@@ -1,13 +1,20 @@
-import { defineComponent as b, computed as n, openBlock as a, createElementBlock as l, normalizeClass as u, renderSlot as d } from "vue";
-const c = /* @__PURE__ */ b({
+import { defineComponent as b, computed as d, openBlock as a, createElementBlock as u, normalizeClass as i, renderSlot as c } from "vue";
+const p = /* @__PURE__ */ b({
   __name: "Badge",
   props: {
     variant: { default: "default" },
+    size: { default: "md" },
+    rounded: { default: "full" },
     class: { default: "" }
   },
   setup(o) {
-    const t = o, s = n(() => {
-      const e = "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", r = {
+    const e = o, s = d(() => {
+      const r = {
+        xs: "px-1.5 h-5 text-[10.5px] leading-none",
+        sm: "px-2 h-6 text-xs font-medium",
+        md: "px-2.5 h-7 text-xs font-semibold",
+        lg: "px-3 h-8 text-sm font-semibold"
+      }, l = `inline-flex items-center ${e.rounded === "none" ? "rounded-none" : `rounded-${e.rounded}`} border ${r[e.size] || r.md} focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2`, t = {
         default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         outline: "text-foreground border-border",
         /* Base Semantics */
@@ -24,15 +31,15 @@ const c = /* @__PURE__ */ b({
         pink: "border-pink-subtle-border bg-pink-subtle text-pink-subtle-fg hover:opacity-80",
         cyan: "border-cyan-subtle-border bg-cyan-subtle text-cyan-subtle-fg hover:opacity-80"
       };
-      return [e, r[t.variant] || r.default, t.class].join(" ");
+      return [l, t[e.variant] || t.default, e.class].join(" ");
     });
-    return (e, r) => (a(), l("div", {
-      class: u(s.value)
+    return (r, n) => (a(), u("div", {
+      class: i(s.value)
     }, [
-      d(e.$slots, "default")
+      c(r.$slots, "default")
     ], 2));
   }
 });
 export {
-  c as default
+  p as default
 };

package/components/Button.vue.js

@@ -38,7 +38,7 @@ const D = ["type", "disabled"], q = /* @__PURE__ */ B({
         success: "bg-success text-success-fg hover:bg-success/80",
         "success-light": "bg-success-light text-success-fg-light hover:bg-success/20",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
-        "outline-floating": "border border-input bg-transparent hover:bg-transparent text-foreground border-input",
+        "outline-floating": "border px-3.5! border-input bg-transparent hover:bg-transparent text-foreground border-input active:scale-100!",
         "outline-primary": "border border-primary text-primary hover:bg-primary/10",
         "outline-danger": "border border-destructive text-destructive hover:bg-destructive/10",
         "outline-warning": "border border-warning text-warning hover:bg-warning/10",

package/components/DatePicker.vue.js

@@ -52,7 +52,7 @@ const S = { class: "overflow-hidden min-w-[300px]" }, U = /* @__PURE__ */ P({
       }
     }), s = n(() => {
       if (l.placeholderI18n) return y(l.placeholderI18n);
-      if (l.placeholder) return l.placeholder;
+      if (l.placeholder !== void 0) return l.placeholder;
       const t = y("vlite.datePicker.placeholder");
       return t !== "vlite.datePicker.placeholder" ? t : "Select date";
     }), c = (t) => {

package/components/FilePicker/FilePicker.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as Y, computed as f, ref as S, useSlots as Z, openBlock as o, createElementBlock as c, createElementVNode as n, renderSlot as _, normalizeClass as C, createBlock as y, withModifiers as M, createVNode as V, toDisplayString as b, createTextVNode as ee, createCommentVNode as F, Fragment as le, renderList as te } from "vue";
+import { defineComponent as Y, computed as f, ref as S, useSlots as Z, openBlock as r, createElementBlock as c, createElementVNode as n, renderSlot as _, normalizeClass as C, createBlock as y, withModifiers as M, createVNode as V, toDisplayString as b, createTextVNode as ee, createCommentVNode as F, Fragment as le, renderList as te } from "vue";
 import p from "../Icon.vue.js";
 import P from "../Button.vue.js";
 import { $t as k } from "../../utils/i18n.js";
-const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "placeholder", "disabled"], oe = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 bg-background" }, se = { class: "p-3 bg-muted rounded-full text-muted-foreground" }, ne = { class: "space-y-1" }, de = { class: "text-sm font-medium text-foreground" }, ue = { class: "text-primary hover:underline" }, ce = {
+const ie = { class: "w-full" }, oe = ["multiple", "accept"], ae = ["value", "placeholder", "disabled"], re = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 bg-background" }, se = { class: "p-3 bg-muted rounded-full text-muted-foreground" }, ne = { class: "space-y-1" }, de = { class: "text-sm font-medium text-foreground" }, ue = { class: "text-primary hover:underline" }, ce = {
   key: 0,
   class: "text-xs text-muted-foreground"
 }, fe = {
@@ -35,7 +35,9 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
   },
   emits: ["update:modelValue", "change", "error"],
   setup(i, { emit: $ }) {
-    const e = i, d = $, I = f(() => e.placeholderI18n ? k(e.placeholderI18n) : e.placeholder || "Select file..."), N = f(() => {
+    const e = i, d = $, I = f(
+      () => e.placeholderI18n ? k(e.placeholderI18n) : e.placeholder !== void 0 ? e.placeholder : "Select file..."
+    ), N = f(() => {
       if (e.textI18n) return k(e.textI18n);
       const l = k("vlite.filePicker.clickToUpload");
       return l !== "vlite.filePicker.clickToUpload" ? l : "Click to upload";
@@ -51,9 +53,9 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
       let l = [];
       return Array.isArray(e.modelValue) ? l = e.modelValue : e.modelValue && (l = [e.modelValue]), l.map((t) => {
         if (typeof t == "string") {
-          const r = t.split("/").pop() || "Unknown File";
+          const a = t.split("/").pop() || "Unknown File";
           return {
-            fileName: decodeURIComponent(r),
+            fileName: decodeURIComponent(a),
             fileType: "unknown",
             fileSize: 0,
             file: null,
@@ -82,63 +84,63 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
       t.files && D(t.files), t.value = "";
     }, G = (l) => {
       if (l === 0 || !l) return "";
-      const t = 1024, r = ["Bytes", "KB", "MB", "GB", "TB"], s = Math.floor(Math.log(l) / Math.log(t));
-      return parseFloat((l / Math.pow(t, s)).toFixed(2)) + " " + r[s];
-    }, K = (l) => new Promise((t, r) => {
+      const t = 1024, a = ["Bytes", "KB", "MB", "GB", "TB"], s = Math.floor(Math.log(l) / Math.log(t));
+      return parseFloat((l / Math.pow(t, s)).toFixed(2)) + " " + a[s];
+    }, K = (l) => new Promise((t, a) => {
       const s = new FileReader();
       s.readAsDataURL(l), s.onload = () => {
-        typeof s.result == "string" ? t(s.result) : r(new Error("Failed to read file as base64"));
-      }, s.onerror = (m) => r(m);
+        typeof s.result == "string" ? t(s.result) : a(new Error("Failed to read file as base64"));
+      }, s.onerror = (m) => a(m);
     }), D = async (l) => {
       if (l.length === 0) return;
       u.value = !0;
-      const t = [], r = [], s = Array.from(l);
+      const t = [], a = [], s = Array.from(l);
       let m = e.multiSelect ? s : [s[0]];
       if (e.multiSelect && e.maxFiles) {
-        const a = Array.isArray(e.modelValue) ? e.modelValue.length : e.modelValue ? 1 : 0, g = e.maxFiles - a;
+        const o = Array.isArray(e.modelValue) ? e.modelValue.length : e.modelValue ? 1 : 0, g = e.maxFiles - o;
         if (g <= 0) {
           d("error", `Maximum ${e.maxFiles} files allowed`), u.value = !1;
           return;
         }
-        m.length > g && (r.push(`Only ${g} more file(s) allowed. Maximum ${e.maxFiles} files.`), m = m.slice(0, g));
+        m.length > g && (a.push(`Only ${g} more file(s) allowed. Maximum ${e.maxFiles} files.`), m = m.slice(0, g));
       }
       try {
-        for (const a of m) {
+        for (const o of m) {
           if (e.fileTypes.length > 0 && !e.fileTypes.some((x) => {
             if (x.startsWith("."))
-              return a.name.toLowerCase().endsWith(x.toLowerCase());
+              return o.name.toLowerCase().endsWith(x.toLowerCase());
             if (x.endsWith("/*")) {
               const X = x.split("/")[0];
-              return a.type.startsWith(X);
+              return o.type.startsWith(X);
             }
-            return a.type === x;
+            return o.type === x;
           })) {
-            r.push(`File type not allowed: ${a.name}`);
+            a.push(`File type not allowed: ${o.name}`);
             continue;
           }
           let g = !1;
-          e.maxSize && a.size > e.maxSize && (r.push(`File too large: ${a.name}`), g = !0);
+          e.maxSize && o.size > e.maxSize && (a.push(`File too large: ${o.name}`), g = !0);
           let T = "";
           if (e.returnFormat === "base64" && !g)
             try {
-              T = await K(a);
+              T = await K(o);
             } catch (B) {
               console.error("Base64 read failed", B);
             }
           t.push({
-            fileName: a.name,
-            fileType: a.type,
-            fileSize: a.size,
-            file: a,
+            fileName: o.name,
+            fileType: o.type,
+            fileSize: o.size,
+            file: o,
             base64: T
           });
         }
-        if (r.length > 0 && d("error", r.join("; ")), t.length > 0) {
-          let a;
-          e.multiSelect ? a = [...Array.isArray(e.modelValue) ? e.modelValue : e.modelValue ? [e.modelValue] : [], ...t] : a = t[0], d("update:modelValue", a), d("change", a);
+        if (a.length > 0 && d("error", a.join("; ")), t.length > 0) {
+          let o;
+          e.multiSelect ? o = [...Array.isArray(e.modelValue) ? e.modelValue : e.modelValue ? [e.modelValue] : [], ...t] : o = t[0], d("update:modelValue", o), d("change", o);
         }
-      } catch (a) {
-        console.error("Error processing files:", a), d("error", "Failed to process files");
+      } catch (o) {
+        console.error("Error processing files:", o), d("error", "Failed to process files");
       } finally {
         u.value = !1;
       }
@@ -156,7 +158,7 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
         sm: "h-8 text-xs",
         md: "h-10 text-sm",
         lg: "h-12 text-base"
-      }, r = {
+      }, a = {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded-md",
@@ -170,13 +172,13 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
         "border border-input focus-visible:border-primary",
         // Default outline style
         t[e.size],
-        r[e.rounded],
+        a[e.rounded],
         "pr-10",
         // Space for icon
         e.disabled ? "cursor-not-allowed opacity-50" : ""
       ].join(" ");
     });
-    return (l, t) => (o(), c("div", ie, [
+    return (l, t) => (r(), c("div", ie, [
       n("input", {
         ref_key: "fileInput",
         ref: z,
@@ -185,14 +187,14 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
         accept: U.value,
         class: "hidden",
         onChange: O
-      }, null, 40, ae),
+      }, null, 40, oe),
       _(l.$slots, "trigger", {
         trigger: v,
         isDragging: h.value,
         isLoading: i.loading || u.value,
         files: w.value
       }, () => [
-        i.variant === "input" ? (o(), c("div", {
+        i.variant === "input" ? (r(), c("div", {
           key: 0,
           class: "relative",
           onClick: v
@@ -204,13 +206,13 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
             readonly: "",
             class: C(Q.value),
             disabled: i.disabled || i.loading || u.value
-          }, null, 10, re),
-          n("div", oe, [
-            i.loading || u.value ? (o(), y(p, {
+          }, null, 10, ae),
+          n("div", re, [
+            i.loading || u.value ? (r(), y(p, {
               key: 0,
               icon: "lucide:loader-2",
               class: "h-4 w-4 animate-spin text-muted-foreground"
-            })) : A.value && !i.disabled ? (o(), c("button", {
+            })) : A.value && !i.disabled ? (r(), c("button", {
               key: 1,
               type: "button",
               class: "text-muted-foreground hover:text-foreground focus:outline-none",
@@ -220,23 +222,23 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
                 icon: "lucide:x-circle",
                 class: "h-4 w-4"
               })
-            ])) : (o(), y(p, {
+            ])) : (r(), y(p, {
               key: 2,
               icon: "lucide:upload",
               class: "h-4 w-4 text-muted-foreground"
             }))
           ])
-        ])) : (o(), c("div", {
+        ])) : (r(), c("div", {
           key: 1,
           class: "relative",
           onDragover: E,
           onDragleave: W,
           onDrop: R
         }, [
-          A.value ? (o(), c("div", fe, [
-            (o(!0), c(le, null, te(w.value, (r, s) => (o(), c("div", {
+          A.value ? (r(), c("div", fe, [
+            (r(!0), c(le, null, te(w.value, (a, s) => (r(), c("div", {
               key: s,
-              class: C(["relative flex items-center p-3 border border-border rounded-lg bg-card shadow-sm transition-colors group", [!i.multiSelect && !i.disabled ? "cursor-pointer hover:border-primary/50" : ""]]),
+              class: C(["relative flex items-center p-3 border border-border rounded-lg bg-body shadow-sm transition-colors group", [!i.multiSelect && !i.disabled ? "cursor-pointer hover:border-primary/50" : ""]]),
               onClick: t[0] || (t[0] = (m) => !i.multiSelect && !i.disabled ? v() : null)
             }, [
               n("div", me, [
@@ -248,11 +250,11 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
                 ])
               ]),
               n("div", pe, [
-                n("p", he, b(r.fileName), 1),
-                n("p", ve, b(G(r.fileSize)), 1)
+                n("p", he, b(a.fileName), 1),
+                n("p", ve, b(G(a.fileSize)), 1)
               ]),
               n("div", xe, [
-                !i.disabled && !i.loading ? (o(), y(P, {
+                !i.disabled && !i.loading ? (r(), y(P, {
                   key: 0,
                   size: "xs",
                   variant: "ghost",
@@ -263,7 +265,7 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
                 }, null, 8, ["onClick"])) : F("", !0)
               ])
             ], 2))), 128)),
-            i.multiSelect && (!i.maxFiles || w.value.length < i.maxFiles) ? (o(), c("div", ye, [
+            i.multiSelect && (!i.maxFiles || w.value.length < i.maxFiles) ? (r(), c("div", ye, [
               V(P, {
                 size: "sm",
                 variant: "outline",
@@ -273,20 +275,20 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
                 onClick: v
               }, null, 8, ["text", "disabled"])
             ])) : F("", !0)
-          ])) : (o(), c("div", {
+          ])) : (r(), c("div", {
             key: 0,
-            class: C(["border-2 border-dashed border-border rounded-lg p-6 transition-all duration-200 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center gap-2", [
-              h.value ? "border-primary bg-primary/5" : "hover:border-primary/50 hover:bg-muted/50",
+            class: C(["border-2 bg-body border-dashed border-border rounded-lg p-6 transition-all duration-200 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center gap-2", [
+              h.value ? "border-primary bg-primary/5" : "hover:border-primary/50 ",
               i.disabled || i.loading || u.value ? "opacity-50 cursor-not-allowed" : ""
             ]]),
             onClick: v
           }, [
             n("div", se, [
-              i.loading || u.value ? (o(), y(p, {
+              i.loading || u.value ? (r(), y(p, {
                 key: 0,
                 icon: "lucide:loader-2",
                 class: "w-6 h-6 animate-spin"
-              })) : (o(), y(p, {
+              })) : (r(), y(p, {
                 key: 1,
                 icon: "lucide:upload-cloud",
                 class: "w-6 h-6"
@@ -297,10 +299,10 @@ const ie = { class: "w-full" }, ae = ["multiple", "accept"], re = ["value", "pla
                 n("span", ue, b(N.value), 1),
                 ee(" " + b(j.value), 1)
               ]),
-              i.fileTypes.length ? (o(), c("p", ce, b(i.fileTypes.join(", ")), 1)) : F("", !0)
+              i.fileTypes.length ? (r(), c("p", ce, b(i.fileTypes.join(", ")), 1)) : F("", !0)
             ])
           ], 2)),
-          i.loading || u.value ? (o(), c("div", be, [
+          i.loading || u.value ? (r(), c("div", be, [
             n("div", ke, [
               V(p, {
                 icon: "lucide:loader-2",

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-c9831df1"]]);
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-112b16b5"]]);
 export {
   s as default
 };

package/components/Form/CustomFields.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as I, computed as u, ref as L, watch as S, openBlock as o, createElementBlock as n, createElementVNode as f, createBlock as G, withCtx as k, createTextVNode as H, toDisplayString as m, createCommentVNode as i, createVNode as v, Fragment as p, renderList as w, normalizeClass as C, TransitionGroup as M } from "vue";
+import { defineComponent as I, computed as c, ref as S, watch as L, openBlock as o, createElementBlock as r, createElementVNode as f, createBlock as G, withCtx as k, createTextVNode as H, toDisplayString as m, createCommentVNode as u, createVNode as v, Fragment as h, renderList as w, normalizeClass as C, TransitionGroup as M } from "vue";
 import q from "./FormField.vue.js";
 import V from "../Button.vue.js";
 import J from "../Label.vue.js";
@@ -21,7 +21,7 @@ const K = { class: "custom-fields-wrapper" }, O = { class: "flex justify-between
 }, ee = {
   key: 1,
   class: "flex flex-col items-center justify-center py-6 text-center bg-muted/5"
-}, te = { class: "text-sm font-medium text-foreground" }, le = { class: "text-xs text-muted-foreground mt-1" }, de = /* @__PURE__ */ I({
+}, te = { class: "text-sm font-medium text-foreground" }, se = { class: "text-xs text-muted-foreground mt-1" }, de = /* @__PURE__ */ I({
   __name: "CustomFields",
   props: {
     modelValue: { default: () => [] },
@@ -43,62 +43,62 @@ const K = { class: "custom-fields-wrapper" }, O = { class: "flex justify-between
   },
   emits: ["update:modelValue", "change"],
   setup(d, { emit: F }) {
-    const t = d, x = F, g = u(() => t.labelI18n ? b(t.labelI18n) : t.label), N = u(() => {
+    const t = d, x = F, y = c(() => t.labelI18n ? b(t.labelI18n) : t.label), N = c(() => {
       const e = b("vlite.customFields.emptyTitle");
       return e !== "vlite.customFields.emptyTitle" ? e : "No items added";
-    }), B = u(() => {
+    }), B = c(() => {
       const e = b("vlite.customFields.emptyDescription");
       return e !== "vlite.customFields.emptyDescription" ? e : "Add a new item to get started";
-    }), s = L([]), y = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    S(
+    }), l = S([]), g = () => `row_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    L(
       () => t.modelValue,
       (e) => {
-        Array.isArray(e) ? s.value = e.map((l, r) => {
-          const a = s.value[r];
+        Array.isArray(e) ? l.value = e.map((s, n) => {
+          const a = l.value[n];
           return {
-            ...l,
-            _id: a?._id || y()
+            ...s,
+            _id: a?._id || g()
           };
-        }) : s.value = [];
+        }) : l.value = [];
       },
       { immediate: !0, deep: !0 }
     );
     const $ = () => {
       const e = {};
-      for (const l of t.schema) {
-        const r = typeof l.value == "function" ? l.value() : l.value;
-        e[l.name] = r ?? null;
+      for (const s of t.schema) {
+        const n = typeof s.value == "function" ? s.value() : s.value;
+        e[s.name] = n ?? null;
       }
-      return { ...e, _id: y() };
+      return { ...e, _id: g() };
     }, T = () => {
-      if (t.disabled || t.maxRows && s.value.length >= t.maxRows) return;
-      const e = [...s.value, $()];
-      s.value = e, h(e);
+      if (t.disabled || t.maxRows && l.value.length >= t.maxRows) return;
+      const e = [...l.value, $()];
+      l.value = e, p(e);
     }, z = (e) => {
-      if (t.disabled || s.value.length <= t.minRows) return;
-      const l = [...s.value];
-      l.splice(e, 1), s.value = l, h(l);
-    }, A = (e, l, r) => {
-      const a = [...s.value];
+      if (t.disabled || l.value.length <= t.minRows) return;
+      const s = [...l.value];
+      s.splice(e, 1), l.value = s, p(s);
+    }, A = (e, s, n) => {
+      const a = [...l.value];
       a[e] = {
         ...a[e],
-        [l]: r.value
-      }, s.value = a, h(a);
-    }, h = (e) => {
-      const l = e.map(({ _id: r, ...a }) => a);
-      x("update:modelValue", l), x("change", l);
-    }, D = (e, l) => s.value[e]?.[l], E = u(() => !(t.disabled || t.maxRows && s.value.length >= t.maxRows)), _ = u(() => t.disabled ? !1 : s.value.length > t.minRows), R = u(() => t.headers && t.headers.length > 0 ? t.headers : t.schema.map((e) => e.labelI18n ? b(e.labelI18n) : e.label || e.name));
-    return (e, l) => (o(), n("div", K, [
+        [s]: n.value
+      }, l.value = a, p(a);
+    }, p = (e) => {
+      const s = e.map(({ _id: n, ...a }) => a);
+      x("update:modelValue", s), x("change", s);
+    }, D = (e, s) => l.value[e]?.[s], E = c(() => !(t.disabled || t.maxRows && l.value.length >= t.maxRows)), _ = c(() => t.disabled ? !1 : l.value.length > t.minRows), R = c(() => t.headers && t.headers.length > 0 ? t.headers : t.schema.map((e) => e.labelI18n ? b(e.labelI18n) : e.label || e.name));
+    return (e, s) => (o(), r("div", K, [
       f("div", O, [
-        g.value ? (o(), G(J, {
+        y.value ? (o(), G(J, {
           key: 0,
           class: "text-sm font-medium text-foreground"
         }, {
           default: k(() => [
-            H(m(g.value), 1)
+            H(m(y.value), 1)
           ]),
           _: 1
-        })) : i("", !0),
+        })) : u("", !0),
         v(V, {
           type: "button",
           variant: "outline",
@@ -110,32 +110,39 @@ const K = { class: "custom-fields-wrapper" }, O = { class: "flex justify-between
         }, null, 8, ["disabled"])
       ]),
       f("div", P, [
-        R.value.length > 0 ? (o(), n("div", Q, [
-          d.showRowNumbers ? (o(), n("div", W, " # ")) : i("", !0),
-          (o(!0), n(p, null, w(R.value, (r, a) => (o(), n("div", {
+        R.value.length > 0 ? (o(), r("div", Q, [
+          d.showRowNumbers ? (o(), r("div", W, " # ")) : u("", !0),
+          (o(!0), r(h, null, w(R.value, (n, a) => (o(), r("div", {
             key: a,
             class: C(["flex-1 p-3 min-w-0 truncate", { "border-l border-border": a > 0 }])
-          }, m(r), 3))), 128)),
-          _.value ? (o(), n("div", X)) : i("", !0)
-        ])) : i("", !0),
+          }, m(n), 3))), 128)),
+          _.value ? (o(), r("div", X)) : u("", !0)
+        ])) : u("", !0),
         v(M, {
           name: "list",
           tag: "div",
           class: "divide-y divide-border"
         }, {
           default: k(() => [
-            (o(!0), n(p, null, w(s.value, (r, a) => (o(), n("div", {
-              key: r._id,
+            (o(!0), r(h, null, w(l.value, (n, a) => (o(), r("div", {
+              key: n._id,
               class: "flex group bg-white transition-colors"
             }, [
-              d.showRowNumbers ? (o(), n("div", Y, m(a + 1), 1)) : i("", !0),
-              (o(!0), n(p, null, w(d.schema, (c, j) => (o(), n("div", {
-                key: c.name,
+              d.showRowNumbers ? (o(), r("div", Y, m(a + 1), 1)) : u("", !0),
+              (o(!0), r(h, null, w(d.schema, (i, j) => (o(), r("div", {
+                key: i.name,
                 class: C(["flex-1 min-w-0 relative", { "border-l border-border": j > 0 }])
               }, [
                 v(q, {
-                  field: { ...c, label: void 0 },
-                  value: D(a, c.name),
+                  field: {
+                    ...i,
+                    props: {
+                      ...i.type === "multiSelect" ? { showControls: !1, wrap: !1 } : {},
+                      ...i.props || {}
+                    },
+                    label: void 0
+                  },
+                  value: D(a, i.name),
                   values: d.values || {},
                   variant: "transparent",
                   size: "sm",
@@ -143,27 +150,27 @@ const K = { class: "custom-fields-wrapper" }, O = { class: "flex justify-between
                   disabled: d.disabled,
                   isUpdate: d.isUpdate,
                   class: "w-full h-full min-h-[40px]",
-                  onChange: (U) => A(a, c.name, U)
+                  onChange: (U) => A(a, i.name, U)
                 }, null, 8, ["field", "value", "values", "disabled", "isUpdate", "onChange"])
               ], 2))), 128)),
-              _.value ? (o(), n("div", Z, [
+              _.value ? (o(), r("div", Z, [
                 v(V, {
                   type: "button",
                   variant: "ghost",
                   size: "xs",
                   icon: "lucide:trash-2",
                   disabled: d.disabled,
-                  onClick: (c) => z(a)
+                  onClick: (i) => z(a)
                 }, null, 8, ["disabled", "onClick"])
-              ])) : i("", !0)
+              ])) : u("", !0)
             ]))), 128))
           ]),
           _: 1
         }),
-        s.value.length === 0 ? (o(), n("div", ee, [
+        l.value.length === 0 ? (o(), r("div", ee, [
           f("p", te, m(N.value), 1),
-          f("p", le, m(B.value), 1)
-        ])) : i("", !0)
+          f("p", se, m(B.value), 1)
+        ])) : u("", !0)
       ])
     ]));
   }

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

@@ -25,6 +25,8 @@ interface Props {
     timelineTextPosition?: TimelineTextPosition;
     emitFields?: string[];
     showRequiredAsterisk?: boolean;
+    /** Pin footer to bottom of viewport/container */
+    stickyFooter?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -36,7 +38,10 @@ declare function __VLS_template(): {
             handleSubmit: () => Promise<void>;
         }): any;
     };
-    refs: {};
+    refs: {
+        sentinelRef: HTMLDivElement;
+        footerRef: HTMLDivElement;
+    };
     rootEl: HTMLFormElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -53,6 +58,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }>, {
     values: Record<string, any>;
     footer: boolean;
+    size: InputSize;
     class: string;
     loading: boolean;
     isUpdate: boolean;
@@ -68,7 +74,11 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     groupClass: string;
     timelineTextPosition: TimelineTextPosition;
     emitFields: string[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
+    stickyFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    sentinelRef: HTMLDivElement;
+    footerRef: HTMLDivElement;
+}, HTMLFormElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/Form/Form.vue.js

@@ -1,7 +1,7 @@
 import o from "./Form.vue2.js";
 /* empty css          */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-e5c8ab25"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1a2b21d0"]]);
 export {
   p as default
 };