vlite3 0.7.11 → 0.7.13

package/components/Form/Form.vue2.js

@@ -1,32 +1,32 @@
-import { defineComponent as le, inject as oe, computed as r, ref as ne, watch as G, onUnmounted as re, openBlock as o, createElementBlock as d, withModifiers as ue, normalizeClass as g, createVNode as N, unref as s, createCommentVNode as c, Fragment as de, renderList as ce, createElementVNode as p, toDisplayString as U, renderSlot as me, createBlock as S, mergeProps as $ } from "vue";
-import { useForm as ve } from "./composables/useForm.js";
-import H from "./FormFields.vue.js";
-import C from "../Button.vue.js";
-import fe from "../Timeline/Timeline.vue.js";
+import { defineComponent as ge, inject as he, computed as n, ref as U, onMounted as be, onUnmounted as X, watch as Y, openBlock as o, createElementBlock as d, withKeys as Z, withModifiers as L, normalizeClass as g, createVNode as z, unref as s, createCommentVNode as c, createElementVNode as h, Fragment as ye, renderList as pe, toDisplayString as D, renderSlot as ke, createBlock as C, mergeProps as _ } from "vue";
+import { useForm as Se } from "./composables/useForm.js";
+import j from "./FormFields.vue.js";
+import x from "../Button.vue.js";
+import Ce from "../Timeline/Timeline.vue.js";
 import "@iconify/vue";
-import { useVLiteConfig as ge } from "../../core/config.js";
-const he = {
-  key: 1,
+import { useVLiteConfig as xe } from "../../core/config.js";
+const Fe = ["onKeydown"], we = {
+  key: 0,
   class: "form-fields-single"
-}, be = {
-  key: 2,
+}, Ae = {
+  key: 1,
   class: "form-groups space-y-6"
-}, ye = { class: "text-base font-semibold text-foreground" }, pe = {
+}, Re = { class: "text-base font-semibold text-foreground" }, Ne = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, Se = { class: "form-group-body p-4.5" }, Ce = {
-  key: 3,
+}, Ve = { class: "form-group-body p-4.5" }, Ue = {
+  key: 2,
   class: "form-step"
-}, ke = { class: "text-lg font-semibold text-foreground" }, xe = {
+}, ze = { class: "text-lg font-semibold text-foreground" }, De = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, Fe = { class: "flex items-center gap-3" }, qe = /* @__PURE__ */ le({
+}, Pe = { class: "flex items-center gap-3" }, Ie = /* @__PURE__ */ ge({
   __name: "Form",
   props: {
     schema: {},
     values: { default: () => ({}) },
     variant: {},
-    size: {},
+    size: { default: "lg" },
     rounded: {},
     loading: { type: Boolean, default: !1 },
     footer: { type: Boolean, default: !0 },
@@ -46,258 +46,295 @@ const he = {
     footerClass: { default: "" },
     timelineTextPosition: { default: "right" },
     emitFields: { default: () => ["__typename"] },
-    showRequiredAsterisk: { type: Boolean }
+    showRequiredAsterisk: { type: Boolean },
+    stickyFooter: { type: Boolean, default: !0 }
   },
   emits: ["onSubmit", "onCancel", "onStepChange", "onAddonAction"],
-  setup(e, { emit: I }) {
-    const i = e, m = I, v = oe(
+  setup(e, { emit: ee }) {
+    const a = e, m = ee, v = he(
       "modal-context",
       null
-    ), K = ge(), k = r(() => K?.components?.form || {}), z = r(() => i.variant ?? k.value.variant ?? "outline"), D = r(() => i.size ?? k.value.size ?? "md"), P = r(() => i.rounded ?? k.value.rounded ?? "md"), q = r(
-      () => i.showRequiredAsterisk ?? k.value.showRequiredAsterisk ?? !0
-    ), J = r(() => i.showCancel || !!v), O = r(() => !!v), x = r(() => !i.schema || i.schema.length === 0 ? !1 : Array.isArray(i.schema[0])), n = r(() => i.tabs && i.tabs.length > 0 && x.value), l = ne(0), M = r(() => i.tabs ? i.tabs.map((a, t) => ({
-      id: a.id?.toString() || t.toString(),
-      title: a.title,
-      icon: a.icon,
-      description: a.description,
-      status: t < l.value ? "completed" : t === l.value ? "current" : "upcoming"
-    })) : []), h = r(() => x.value ? i.schema : [i.schema]), E = r(() => n.value ? h.value[l.value] || [] : []), {
-      formValues: F,
-      errors: b,
-      isSubmitting: y,
-      handleFieldChange: Q,
-      validateField: W,
-      validateAll: X,
-      isFieldVisible: A,
-      isFieldDisabled: w,
-      isFieldReadonly: T,
-      getFieldValue: Ae,
-      handleSubmit: Y,
-      flatSchema: we
-    } = ve({
-      schema: i.schema,
-      values: i.values,
-      isUpdate: i.isUpdate,
-      folderId: i.folderId,
-      emitFields: i.emitFields,
-      onSubmit: (a) => {
-        m("onSubmit", a, v?.close || (() => {
+    ), te = xe(), F = n(() => te?.components?.form || {}), P = n(() => a.variant ?? F.value.variant ?? "outline"), q = n(() => a.size ?? F.value.size ?? "md"), B = n(() => a.rounded ?? F.value.rounded ?? "md"), T = n(
+      () => a.showRequiredAsterisk ?? F.value.showRequiredAsterisk ?? !0
+    ), ae = n(() => a.showCancel || !!v), H = n(() => !!v), b = n(() => a.stickyFooter), ie = U(null), K = U(null), G = U(!1);
+    let M = null;
+    be(() => {
+      K.value && (M = new IntersectionObserver(
+        ([t]) => {
+          G.value = !t.isIntersecting;
+        },
+        { threshold: 0 }
+      ), M.observe(K.value));
+    }), X(() => {
+      M?.disconnect();
+    });
+    const w = n(() => !a.schema || a.schema.length === 0 ? !1 : Array.isArray(a.schema[0])), r = n(() => a.tabs && a.tabs.length > 0 && w.value), l = U(0), $ = n(() => a.tabs ? a.tabs.map((t, i) => ({
+      id: t.id?.toString() || i.toString(),
+      title: t.title,
+      icon: t.icon,
+      description: t.description,
+      status: i < l.value ? "completed" : i === l.value ? "current" : "upcoming"
+    })) : []), y = n(() => w.value ? a.schema : [a.schema]), O = n(() => r.value ? y.value[l.value] || [] : []), {
+      formValues: A,
+      errors: p,
+      isSubmitting: k,
+      handleFieldChange: se,
+      validateField: le,
+      validateAll: oe,
+      isFieldVisible: R,
+      isFieldDisabled: N,
+      isFieldReadonly: E,
+      handleSubmit: ne
+    } = Se({
+      schema: a.schema,
+      values: a.values,
+      isUpdate: a.isUpdate,
+      folderId: a.folderId,
+      emitFields: a.emitFields,
+      onSubmit: (t) => {
+        m("onSubmit", t, v?.close || (() => {
         }));
       }
     });
-    G(
-      () => i.loading || y.value,
-      (a) => {
-        v?.setSubmitting && v.setSubmitting(a);
+    Y(
+      () => a.loading || k.value,
+      (t) => {
+        v?.setSubmitting && v.setSubmitting(t);
       },
       { immediate: !0 }
-    ), re(() => {
+    ), X(() => {
       v?.setSubmitting && v.setSubmitting(!1);
-    }), G(
-      () => i.values,
-      (a) => {
+    }), Y(
+      () => a.values,
+      (t) => {
       },
       { deep: !0 }
     );
-    const B = (a, t) => {
-      Q(a, t.value, t.data);
-    }, Z = () => {
-      if (!n.value) return !0;
-      const a = E.value;
-      let t = !0;
-      for (const u of a) {
-        if (!A(u) || w(u)) continue;
-        W(u) && (t = !1);
+    const I = (t, i) => {
+      se(t, i.value, i.data);
+    }, re = () => {
+      if (!r.value) return !0;
+      const t = O.value;
+      let i = !0;
+      for (const u of t) {
+        if (!R(u) || N(u)) continue;
+        le(u) && (i = !1);
       }
-      return t;
-    }, _ = r(() => n.value ? l.value < h.value.length - 1 : !1), L = r(() => n.value ? l.value > 0 : !1), R = r(() => n.value ? l.value === h.value.length - 1 : !0), j = () => {
-      _.value && Z() && (l.value++, m("onStepChange", l.value));
-    }, ee = () => {
-      L.value && (l.value--, m("onStepChange", l.value));
-    }, te = (a, t) => {
-      t <= l.value && (l.value = t, m("onStepChange", l.value));
-    }, V = async () => {
-      if (n.value) {
-        if (!R.value && !i.isUpdate) {
-          j();
+      return i;
+    }, ue = n(() => r.value ? l.value < y.value.length - 1 : !1), J = n(() => r.value ? l.value > 0 : !1), V = n(() => r.value ? l.value === y.value.length - 1 : !0), Q = () => {
+      ue.value && re() && (l.value++, m("onStepChange", l.value));
+    }, de = () => {
+      J.value && (l.value--, m("onStepChange", l.value));
+    }, ce = (t, i) => {
+      i <= l.value && (l.value = i, m("onStepChange", l.value));
+    }, S = async () => {
+      if (r.value) {
+        if (!V.value && !a.isUpdate) {
+          Q();
           return;
         }
-        if (!X()) {
-          const t = h.value.findIndex(
-            (u) => u.some((f) => !!b.value[f.name])
+        if (!oe()) {
+          const i = y.value.findIndex(
+            (u) => u.some((f) => !!p.value[f.name])
           );
-          t !== -1 && t !== l.value && (l.value = t, m("onStepChange", l.value));
+          i !== -1 && i !== l.value && (l.value = i, m("onStepChange", l.value));
           return;
         }
       }
       try {
-        await Y();
+        await ne();
       } catch {
       }
-    }, ie = (a) => {
-      if (a.key !== "Enter") return;
-      const u = a.target.tagName.toLowerCase();
-      u !== "textarea" && u !== "button" && (a.preventDefault(), V());
-    }, ae = () => {
+    }, me = (t) => {
+      if (t.key !== "Enter") return;
+      const u = t.target.tagName.toLowerCase();
+      u !== "textarea" && u !== "button" && (t.preventDefault(), S());
+    }, W = (t) => {
+      (t.metaKey || t.ctrlKey) && t.key === "s" && (t.preventDefault(), S());
+    }, ve = () => {
       m("onCancel"), v && v?.close?.();
     };
-    return (a, t) => (o(), d("form", {
-      class: g(["form-container", i.class]),
-      onSubmit: ue(V, ["prevent"]),
-      onKeydown: ie
+    return (t, i) => (o(), d("form", {
+      class: g(["form-container ", a.class]),
+      onSubmit: L(S, ["prevent"]),
+      onKeydown: [
+        me,
+        Z(L(W, ["meta", "prevent"]), ["s"]),
+        Z(L(W, ["ctrl", "prevent"]), ["s"])
+      ]
     }, [
-      n.value && M.value.length > 0 ? (o(), d("div", {
+      r.value && $.value.length > 0 ? (o(), d("div", {
         key: 0,
         class: g(["form-timeline", e.timelineTextPosition == "right" ? "mb-6.5" : "mb-13"])
       }, [
-        N(s(fe), {
-          steps: M.value,
+        z(s(Ce), {
+          steps: $.value,
           activeStep: l.value,
           direction: "horizontal",
           textPosition: e.timelineTextPosition,
           clickable: !0,
-          onStepClick: te
+          onStepClick: ce
         }, null, 8, ["steps", "activeStep", "textPosition"])
       ], 2)) : c("", !0),
-      x.value ? x.value && !n.value ? (o(), d("div", be, [
-        (o(!0), d(de, null, ce(h.value, (u, f) => (o(), d("div", {
-          key: f,
-          class: g(["form-group border rounded overflow-hidden", e.groupClass])
-        }, [
-          e.groupsHeadings?.[f] ? (o(), d("div", {
+      h("div", {
+        class: g(e.footer && b.value ? "pb-2" : "")
+      }, [
+        w.value ? w.value && !r.value ? (o(), d("div", Ae, [
+          (o(!0), d(ye, null, pe(y.value, (u, f) => (o(), d("div", {
+            key: f,
+            class: g(["form-group border rounded overflow-hidden bg-body", e.groupClass])
+          }, [
+            e.groupsHeadings?.[f] ? (o(), d("div", {
+              key: 0,
+              class: g(["form-group-header bg-muted/50 px-4 py-2.5 border-b", e.headerClass])
+            }, [
+              h("h3", Re, D(e.groupsHeadings[f]), 1),
+              e.groupHeadingsDescription?.[f] ? (o(), d("p", Ne, D(e.groupHeadingsDescription[f]), 1)) : c("", !0)
+            ], 2)) : c("", !0),
+            h("div", Ve, [
+              z(j, {
+                schema: u,
+                values: s(A),
+                errors: s(p),
+                variant: P.value,
+                size: q.value,
+                rounded: B.value,
+                className: e.className,
+                isUpdate: e.isUpdate,
+                showRequiredAsterisk: T.value,
+                isFieldVisible: s(R),
+                isFieldDisabled: s(N),
+                isFieldReadonly: s(E),
+                onChange: I,
+                onAddonAction: i[1] || (i[1] = (fe) => m("onAddonAction", fe))
+              }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+            ])
+          ], 2))), 128))
+        ])) : r.value ? (o(), d("div", Ue, [
+          e.tabs?.[l.value] ? (o(), d("div", {
             key: 0,
-            class: g(["form-group-header bg-muted/50 px-4 py-2.5 border-b", e.headerClass])
+            class: g(["form-step-header mb-6", e.headerClass])
           }, [
-            p("h3", ye, U(e.groupsHeadings[f]), 1),
-            e.groupHeadingsDescription?.[f] ? (o(), d("p", pe, U(e.groupHeadingsDescription[f]), 1)) : c("", !0)
+            h("h2", ze, D(e.tabs[l.value].title), 1),
+            e.tabs[l.value].description ? (o(), d("p", De, D(e.tabs[l.value].description), 1)) : c("", !0)
           ], 2)) : c("", !0),
-          p("div", Se, [
-            N(H, {
-              schema: u,
-              values: s(F),
-              errors: s(b),
-              variant: z.value,
-              size: D.value,
-              rounded: P.value,
-              className: e.className,
-              isUpdate: e.isUpdate,
-              showRequiredAsterisk: q.value,
-              isFieldVisible: s(A),
-              isFieldDisabled: s(w),
-              isFieldReadonly: s(T),
-              onChange: B,
-              onAddonAction: t[1] || (t[1] = (se) => m("onAddonAction", se))
-            }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
-          ])
-        ], 2))), 128))
-      ])) : n.value ? (o(), d("div", Ce, [
-        e.tabs?.[l.value] ? (o(), d("div", {
-          key: 0,
-          class: g(["form-step-header mb-6", e.headerClass])
-        }, [
-          p("h2", ke, U(e.tabs[l.value].title), 1),
-          e.tabs[l.value].description ? (o(), d("p", xe, U(e.tabs[l.value].description), 1)) : c("", !0)
-        ], 2)) : c("", !0),
-        N(H, {
-          schema: E.value,
-          values: s(F),
-          errors: s(b),
-          variant: z.value,
-          size: D.value,
-          rounded: P.value,
-          className: e.className,
-          isUpdate: e.isUpdate,
-          showRequiredAsterisk: q.value,
-          isFieldVisible: s(A),
-          isFieldDisabled: s(w),
-          isFieldReadonly: s(T),
-          onChange: B,
-          onAddonAction: t[2] || (t[2] = (u) => m("onAddonAction", u))
-        }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
-      ])) : c("", !0) : (o(), d("div", he, [
-        N(H, {
-          schema: e.schema,
-          values: s(F),
-          errors: s(b),
-          variant: z.value,
-          size: D.value,
-          rounded: P.value,
-          className: e.className,
-          isUpdate: e.isUpdate,
-          showRequiredAsterisk: q.value,
-          isFieldVisible: s(A),
-          isFieldDisabled: s(w),
-          isFieldReadonly: s(T),
-          onChange: B,
-          onAddonAction: t[0] || (t[0] = (u) => m("onAddonAction", u))
-        }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
-      ])),
-      me(a.$slots, "default", {
-        values: s(F),
-        errors: s(b),
-        isSubmitting: s(y),
-        handleSubmit: V
-      }, void 0, !0),
+          z(j, {
+            schema: O.value,
+            values: s(A),
+            errors: s(p),
+            variant: P.value,
+            size: q.value,
+            rounded: B.value,
+            className: e.className,
+            isUpdate: e.isUpdate,
+            showRequiredAsterisk: T.value,
+            isFieldVisible: s(R),
+            isFieldDisabled: s(N),
+            isFieldReadonly: s(E),
+            onChange: I,
+            onAddonAction: i[2] || (i[2] = (u) => m("onAddonAction", u))
+          }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+        ])) : c("", !0) : (o(), d("div", we, [
+          z(j, {
+            schema: e.schema,
+            values: s(A),
+            errors: s(p),
+            variant: P.value,
+            size: q.value,
+            rounded: B.value,
+            className: e.className,
+            isUpdate: e.isUpdate,
+            showRequiredAsterisk: T.value,
+            isFieldVisible: s(R),
+            isFieldDisabled: s(N),
+            isFieldReadonly: s(E),
+            onChange: I,
+            onAddonAction: i[0] || (i[0] = (u) => m("onAddonAction", u))
+          }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+        ])),
+        ke(t.$slots, "default", {
+          values: s(A),
+          errors: s(p),
+          isSubmitting: s(k),
+          handleSubmit: S
+        }, void 0, !0),
+        h("div", {
+          ref_key: "sentinelRef",
+          ref: K,
+          class: "form-scroll-sentinel h-px w-full",
+          "aria-hidden": "true"
+        }, null, 512)
+      ], 2),
       e.footer ? (o(), d("div", {
-        key: 4,
+        key: 1,
+        ref_key: "footerRef",
+        ref: ie,
         class: g([
-          "form-footer flex items-center  gap-3",
+          "form-footer flex items-center gap-3 z-20",
           e.footerClass,
-          n.value ? "justify-between" : "justify-end",
-          O.value ? "sticky bottom-0 z-20 bg-body pt-3.5 border-t border-border/75 -mx-4 px-4 mt-8" : "mt-6"
+          r.value ? "justify-between" : "justify-end",
+          // Sticky positioning
+          b.value ? "sticky bottom-0 bg-background/95 backdrop-blur-sm pt-3 pb-2 -mx-0.5 px-0.5" : "mt-6",
+          // Inside modal: extend to modal edges and add top border always
+          H.value ? "-mx-4 px-4" : "",
+          // Shadow only while actually stuck (sentinel has scrolled out of view)
+          b.value && G.value ? "" : b.value ? "border-t border-transparent" : "",
+          // Non-sticky inside modal keeps the original border styling
+          !b.value && H.value ? "border-t border-border/75 mt-8" : "",
+          !b.value && !H.value ? "mt-6" : ""
         ])
       }, [
-        p("div", Fe, [
-          J.value ? (o(), S(C, {
+        h("div", Pe, [
+          ae.value ? (o(), C(x, {
             key: 0,
             type: "button",
             variant: "outline",
             text: e.cancelText,
-            disabled: e.loading || s(y),
-            onClick: ae
+            disabled: e.loading || s(k),
+            onClick: ve
           }, null, 8, ["text", "disabled"])) : c("", !0),
-          n.value && e.isUpdate && !R.value ? (o(), S(C, $({
+          r.value && e.isUpdate && !V.value ? (o(), C(x, _({
             key: 1,
             type: "button",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || s(y),
-            onClick: V
+            loading: e.loading || s(k),
+            onClick: S
           }), null, 16, ["text", "loading"])) : c("", !0)
         ]),
-        p("div", {
-          class: g(["flex items-center gap-3", n.value && "ml-auto"])
+        h("div", {
+          class: g(["flex items-center gap-3", r.value && "ml-auto"])
         }, [
-          n.value && L.value ? (o(), S(C, {
+          r.value && J.value ? (o(), C(x, {
             key: 0,
             type: "button",
             variant: "outline",
             icon: "lucide:arrow-left",
             text: "Previous",
-            onClick: ee
+            onClick: de
           })) : c("", !0),
-          n.value && !R.value ? (o(), S(C, {
+          r.value && !V.value ? (o(), C(x, {
             key: 1,
             type: "button",
             variant: e.isUpdate ? "outline" : "primary",
             text: "Next",
             iconRight: "lucide:arrow-right",
-            onClick: j
+            onClick: Q
           }, null, 8, ["variant"])) : c("", !0),
-          !n.value || R.value ? (o(), S(C, $({
+          !r.value || V.value ? (o(), C(x, _({
             key: 2,
             type: "submit",
             variant: "primary",
             text: e.submitText
           }, e.submitProps, {
-            loading: e.loading || s(y)
+            loading: e.loading || s(k)
           }), null, 16, ["text", "loading"])) : c("", !0)
         ], 2)
       ], 2)) : c("", !0)
-    ], 34));
+    ], 42, Fe));
   }
 });
 export {
-  qe as default
+  Ie as default
 };

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

@@ -12,6 +12,8 @@ interface Props {
     error?: string;
     isUpdate?: boolean;
     label?: string;
+    /** Whether the floating label is currently in the 'active' (raised) position */
+    floatingActive?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (payload: IFormFieldChangePayload) => any;
@@ -29,5 +31,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     error: string;
     disabled: boolean;
     isUpdate: boolean;
+    floatingActive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;