vlite3 0.4.8 → 0.5.2

package/components/Form/Form.vue2.js

@@ -1,34 +1,33 @@
-import { defineComponent as W, inject as X, computed as d, ref as Y, watch as Z, openBlock as s, createElementBlock as o, withModifiers as _, normalizeClass as h, createVNode as x, createCommentVNode as c, unref as t, Fragment as ee, renderList as te, createElementVNode as U, toDisplayString as k, renderSlot as ae, createBlock as p, mergeProps as ie } from "vue";
-import { useForm as le } from "./composables/useForm.js";
-import D from "./FormFields.vue.js";
-import A from "../Button.vue.js";
-import se from "../Timeline.vue.js";
-const ne = {
-  key: 0,
-  class: "form-timeline mb-18"
-}, oe = {
+import { defineComponent as se, inject as le, computed as n, ref as oe, watch as $, onUnmounted as ne, openBlock as o, createElementBlock as u, withModifiers as re, normalizeClass as g, createVNode as V, unref as a, createCommentVNode as d, Fragment as ue, renderList as de, createElementVNode as p, toDisplayString as N, renderSlot as ce, createBlock as S, mergeProps as j } from "vue";
+import { useForm as me } from "./composables/useForm.js";
+import H from "./FormFields.vue.js";
+import C from "../Button.vue.js";
+import ve from "../Timeline/Timeline.vue.js";
+import "@iconify/vue";
+import { useVLiteConfig as fe } from "../../core/config.js";
+const ge = {
   key: 1,
   class: "form-fields-single"
-}, re = {
+}, he = {
   key: 2,
   class: "form-groups space-y-6"
-}, de = { class: "text-base font-semibold text-foreground" }, ue = {
+}, be = { class: "text-base font-semibold text-foreground" }, ye = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, ce = { class: "form-group-body p-6" }, me = {
+}, pe = { class: "form-group-body p-6" }, Se = {
   key: 3,
   class: "form-step"
-}, ve = { class: "text-lg font-semibold text-foreground" }, fe = {
+}, Ce = { class: "text-lg font-semibold text-foreground" }, ke = {
   key: 0,
   class: "text-sm text-muted-foreground mt-1"
-}, ke = /* @__PURE__ */ W({
+}, Fe = { class: "flex items-center gap-3" }, xe = { class: "flex items-center gap-3 ml-auto" }, qe = /* @__PURE__ */ se({
   __name: "Form",
   props: {
     schema: {},
     values: { default: () => ({}) },
-    variant: { default: "outline" },
-    size: { default: "md" },
-    rounded: { default: "md" },
+    variant: {},
+    size: {},
+    rounded: {},
     loading: { type: Boolean, default: !1 },
     footer: { type: Boolean, default: !0 },
     groupsHeadings: { default: () => [] },
@@ -45,208 +44,252 @@ const ne = {
     groupClass: { default: "" },
     headerClass: { default: "" },
     footerClass: { default: "" },
-    timelineTextPosition: { default: "bottom" },
-    emitFields: { default: () => ["__typename"] }
+    timelineTextPosition: { default: "right" },
+    emitFields: { default: () => ["__typename"] },
+    showRequiredAsterisk: { type: Boolean }
   },
   emits: ["onSubmit", "onCancel", "onStepChange", "onAddonAction"],
-  setup(e, { emit: M }) {
-    const l = e, m = M, f = X("modal-context", null), G = d(() => l.showCancel || !!f), $ = d(() => !!f), b = d(() => !l.schema || l.schema.length === 0 ? !1 : Array.isArray(l.schema[0])), r = d(() => l.tabs && l.tabs.length > 0 && b.value), i = Y(0), w = d(() => l.tabs ? l.tabs.map((n, a) => ({
-      id: n.id?.toString() || a.toString(),
-      title: n.title,
-      icon: n.icon,
-      description: n.description,
-      status: a < i.value ? "completed" : a === i.value ? "current" : "upcoming"
-    })) : []), g = d(() => b.value ? l.schema : [l.schema]), P = d(() => r.value ? g.value[i.value] || [] : []), {
-      formValues: y,
-      errors: F,
-      isSubmitting: N,
-      handleFieldChange: j,
-      validateField: E,
-      validateAll: he,
-      isFieldVisible: S,
-      isFieldDisabled: C,
-      isFieldReadonly: V,
-      getFieldValue: be,
-      handleSubmit: L,
-      flatSchema: ge
-    } = le({
-      schema: l.schema,
-      values: l.values,
-      isUpdate: l.isUpdate,
-      folderId: l.folderId,
-      emitFields: l.emitFields,
-      onSubmit: (n) => {
-        m("onSubmit", n, f?.close);
+  setup(e, { emit: I }) {
+    const t = e, m = I, v = le(
+      "modal-context",
+      null
+    ), J = fe(), k = n(() => J?.components?.form || {}), U = n(() => t.variant ?? k.value.variant ?? "outline"), z = n(() => t.size ?? k.value.size ?? "md"), P = n(() => t.rounded ?? k.value.rounded ?? "md"), D = n(
+      () => t.showRequiredAsterisk ?? k.value.showRequiredAsterisk ?? !0
+    ), K = n(() => t.showCancel || !!v), O = n(() => !!v), F = n(() => !t.schema || t.schema.length === 0 ? !1 : Array.isArray(t.schema[0])), r = n(() => t.tabs && t.tabs.length > 0 && F.value), s = oe(0), M = n(() => t.tabs ? t.tabs.map((l, i) => ({
+      id: l.id?.toString() || i.toString(),
+      title: l.title,
+      icon: l.icon,
+      description: l.description,
+      status: i < s.value ? "completed" : i === s.value ? "current" : "upcoming"
+    })) : []), h = n(() => F.value ? t.schema : [t.schema]), E = n(() => r.value ? h.value[s.value] || [] : []), {
+      formValues: x,
+      errors: b,
+      isSubmitting: y,
+      handleFieldChange: Q,
+      validateField: W,
+      validateAll: X,
+      isFieldVisible: A,
+      isFieldDisabled: w,
+      isFieldReadonly: q,
+      getFieldValue: Ae,
+      handleSubmit: Y,
+      flatSchema: we
+    } = me({
+      schema: t.schema,
+      values: t.values,
+      isUpdate: t.isUpdate,
+      folderId: t.folderId,
+      emitFields: t.emitFields,
+      onSubmit: (l) => {
+        m("onSubmit", l, v?.close || (() => {
+        }));
       }
     });
-    Z(
-      () => l.values,
-      (n) => {
+    $(
+      () => t.loading || y.value,
+      (l) => {
+        v?.setSubmitting && v.setSubmitting(l);
+      },
+      { immediate: !0 }
+    ), ne(() => {
+      v?.setSubmitting && v.setSubmitting(!1);
+    }), $(
+      () => t.values,
+      (l) => {
       },
       { deep: !0 }
     );
-    const z = (n, a) => {
-      j(n, a.value, a.data);
-    }, q = () => {
+    const T = (l, i) => {
+      Q(l, i.value, i.data);
+    }, Z = () => {
       if (!r.value) return !0;
-      const n = P.value;
-      let a = !0;
-      for (const u of n) {
-        if (!S(u) || C(u)) continue;
-        E(u) && (a = !1);
+      const l = E.value;
+      let i = !0;
+      for (const c of l) {
+        if (!A(c) || w(c)) continue;
+        W(c) && (i = !1);
       }
-      return a;
-    }, I = d(() => r.value ? i.value < g.value.length - 1 : !1), R = d(() => r.value ? i.value > 0 : !1), B = d(() => r.value ? i.value === g.value.length - 1 : !0), T = () => {
-      I.value && q() && (i.value++, m("onStepChange", i.value));
-    }, J = () => {
-      R.value && (i.value--, m("onStepChange", i.value));
-    }, K = (n, a) => {
-      a <= i.value && (i.value = a, m("onStepChange", i.value));
-    }, H = async () => {
-      if (r.value && !B.value) {
-        T();
-        return;
+      return i;
+    }, _ = n(() => r.value ? s.value < h.value.length - 1 : !1), G = n(() => r.value ? s.value > 0 : !1), R = n(() => r.value ? s.value === h.value.length - 1 : !0), L = () => {
+      _.value && Z() && (s.value++, m("onStepChange", s.value));
+    }, ee = () => {
+      G.value && (s.value--, m("onStepChange", s.value));
+    }, te = (l, i) => {
+      i <= s.value && (s.value = i, m("onStepChange", s.value));
+    }, B = async () => {
+      if (r.value) {
+        if (!R.value && !t.isUpdate) {
+          L();
+          return;
+        }
+        if (!X()) {
+          const i = h.value.findIndex(
+            (c) => c.some((f) => !!b.value[f.name])
+          );
+          i !== -1 && i !== s.value && (s.value = i, m("onStepChange", s.value));
+          return;
+        }
       }
       try {
-        await L();
+        await Y();
       } catch {
       }
-    }, O = () => {
-      m("onCancel"), f && f?.close?.();
+    }, ie = () => {
+      m("onCancel"), v && v?.close?.();
     };
-    return (n, a) => (s(), o("form", {
-      class: h(["form-container", l.class]),
-      onSubmit: _(H, ["prevent"])
+    return (l, i) => (o(), u("form", {
+      class: g(["form-container", t.class]),
+      onSubmit: re(B, ["prevent"])
     }, [
-      r.value && w.value.length > 0 ? (s(), o("div", ne, [
-        x(se, {
-          steps: w.value,
-          activeStep: i.value,
+      r.value && M.value.length > 0 ? (o(), u("div", {
+        key: 0,
+        class: g(["form-timeline", e.timelineTextPosition == "right" ? "mb-6.5" : "mb-13"])
+      }, [
+        V(a(ve), {
+          steps: M.value,
+          activeStep: s.value,
           direction: "horizontal",
           textPosition: e.timelineTextPosition,
           clickable: !0,
-          onStepClick: K
+          onStepClick: te
         }, null, 8, ["steps", "activeStep", "textPosition"])
-      ])) : c("", !0),
-      b.value ? b.value && !r.value ? (s(), o("div", re, [
-        (s(!0), o(ee, null, te(g.value, (u, v) => (s(), o("div", {
-          key: v,
-          class: h(["form-group border rounded-lg overflow-hidden", e.groupClass])
+      ], 2)) : d("", !0),
+      F.value ? F.value && !r.value ? (o(), u("div", he, [
+        (o(!0), u(ue, null, de(h.value, (c, f) => (o(), u("div", {
+          key: f,
+          class: g(["form-group border rounded-lg overflow-hidden", e.groupClass])
         }, [
-          e.groupsHeadings?.[v] ? (s(), o("div", {
+          e.groupsHeadings?.[f] ? (o(), u("div", {
             key: 0,
-            class: h(["form-group-header bg-muted/50 px-6 py-4 border-b", e.headerClass])
+            class: g(["form-group-header bg-muted/50 px-6 py-4 border-b", e.headerClass])
           }, [
-            U("h3", de, k(e.groupsHeadings[v]), 1),
-            e.groupHeadingsDescription?.[v] ? (s(), o("p", ue, k(e.groupHeadingsDescription[v]), 1)) : c("", !0)
-          ], 2)) : c("", !0),
-          U("div", ce, [
-            x(D, {
-              schema: u,
-              values: t(y),
-              errors: t(F),
-              variant: e.variant,
-              size: e.size,
-              rounded: e.rounded,
+            p("h3", be, N(e.groupsHeadings[f]), 1),
+            e.groupHeadingsDescription?.[f] ? (o(), u("p", ye, N(e.groupHeadingsDescription[f]), 1)) : d("", !0)
+          ], 2)) : d("", !0),
+          p("div", pe, [
+            V(H, {
+              schema: c,
+              values: a(x),
+              errors: a(b),
+              variant: U.value,
+              size: z.value,
+              rounded: P.value,
               className: e.className,
               isUpdate: e.isUpdate,
-              isFieldVisible: t(S),
-              isFieldDisabled: t(C),
-              isFieldReadonly: t(V),
-              onChange: z,
-              onAddonAction: a[1] || (a[1] = (Q) => m("onAddonAction", Q))
-            }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+              showRequiredAsterisk: D.value,
+              isFieldVisible: a(A),
+              isFieldDisabled: a(w),
+              isFieldReadonly: a(q),
+              onChange: T,
+              onAddonAction: i[1] || (i[1] = (ae) => m("onAddonAction", ae))
+            }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
           ])
         ], 2))), 128))
-      ])) : r.value ? (s(), o("div", me, [
-        e.tabs?.[i.value] ? (s(), o("div", {
+      ])) : r.value ? (o(), u("div", Se, [
+        e.tabs?.[s.value] ? (o(), u("div", {
           key: 0,
-          class: h(["form-step-header mb-6", e.headerClass])
+          class: g(["form-step-header mb-6", e.headerClass])
         }, [
-          U("h2", ve, k(e.tabs[i.value].title), 1),
-          e.tabs[i.value].description ? (s(), o("p", fe, k(e.tabs[i.value].description), 1)) : c("", !0)
-        ], 2)) : c("", !0),
-        x(D, {
-          schema: P.value,
-          values: t(y),
-          errors: t(F),
-          variant: e.variant,
-          size: e.size,
-          rounded: e.rounded,
+          p("h2", Ce, N(e.tabs[s.value].title), 1),
+          e.tabs[s.value].description ? (o(), u("p", ke, N(e.tabs[s.value].description), 1)) : d("", !0)
+        ], 2)) : d("", !0),
+        V(H, {
+          schema: E.value,
+          values: a(x),
+          errors: a(b),
+          variant: U.value,
+          size: z.value,
+          rounded: P.value,
           className: e.className,
           isUpdate: e.isUpdate,
-          isFieldVisible: t(S),
-          isFieldDisabled: t(C),
-          isFieldReadonly: t(V),
-          onChange: z,
-          onAddonAction: a[2] || (a[2] = (u) => m("onAddonAction", u))
-        }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
-      ])) : c("", !0) : (s(), o("div", oe, [
-        x(D, {
+          showRequiredAsterisk: D.value,
+          isFieldVisible: a(A),
+          isFieldDisabled: a(w),
+          isFieldReadonly: a(q),
+          onChange: T,
+          onAddonAction: i[2] || (i[2] = (c) => m("onAddonAction", c))
+        }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+      ])) : d("", !0) : (o(), u("div", ge, [
+        V(H, {
           schema: e.schema,
-          values: t(y),
-          errors: t(F),
-          variant: e.variant,
-          size: e.size,
-          rounded: e.rounded,
+          values: a(x),
+          errors: a(b),
+          variant: U.value,
+          size: z.value,
+          rounded: P.value,
           className: e.className,
           isUpdate: e.isUpdate,
-          isFieldVisible: t(S),
-          isFieldDisabled: t(C),
-          isFieldReadonly: t(V),
-          onChange: z,
-          onAddonAction: a[0] || (a[0] = (u) => m("onAddonAction", u))
-        }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
+          showRequiredAsterisk: D.value,
+          isFieldVisible: a(A),
+          isFieldDisabled: a(w),
+          isFieldReadonly: a(q),
+          onChange: T,
+          onAddonAction: i[0] || (i[0] = (c) => m("onAddonAction", c))
+        }, null, 8, ["schema", "values", "errors", "variant", "size", "rounded", "className", "isUpdate", "showRequiredAsterisk", "isFieldVisible", "isFieldDisabled", "isFieldReadonly"])
       ])),
-      ae(n.$slots, "default", {
-        values: t(y),
-        errors: t(F),
-        isSubmitting: t(N),
-        handleSubmit: H
+      ce(l.$slots, "default", {
+        values: a(x),
+        errors: a(b),
+        isSubmitting: a(y),
+        handleSubmit: B
       }, void 0, !0),
-      e.footer ? (s(), o("div", {
+      e.footer ? (o(), u("div", {
         key: 4,
-        class: h([
-          "form-footer flex items-center justify-end gap-3",
+        class: g([
+          "form-footer flex items-center justify-between gap-3",
           e.footerClass,
-          $.value ? "sticky bottom-0 z-20 bg-body pt-4 border-t border-border/75 -mx-4 px-4  mt-8" : "mt-6"
+          O.value ? "sticky bottom-0 z-20 bg-body pt-4 border-t border-border/75 -mx-4 px-4 mt-8" : "mt-6"
         ])
       }, [
-        G.value ? (s(), p(A, {
-          key: 0,
-          type: "button",
-          variant: "outline",
-          text: e.cancelText,
-          disabled: e.loading || t(N),
-          onClick: O
-        }, null, 8, ["text", "disabled"])) : c("", !0),
-        r.value && R.value ? (s(), p(A, {
-          key: 1,
-          type: "button",
-          variant: "outline",
-          icon: "lucide:arrow-left",
-          text: "Previous",
-          onClick: J
-        })) : c("", !0),
-        r.value && !B.value ? (s(), p(A, {
-          key: 2,
-          type: "button",
-          variant: "primary",
-          text: "Next",
-          iconRight: "lucide:arrow-right",
-          onClick: T
-        })) : (s(), p(A, ie({
-          key: 3,
-          type: "submit",
-          variant: "primary",
-          text: e.submitText
-        }, e.submitProps, {
-          loading: e.loading || t(N)
-        }), null, 16, ["text", "loading"]))
-      ], 2)) : c("", !0)
+        p("div", Fe, [
+          K.value ? (o(), S(C, {
+            key: 0,
+            type: "button",
+            variant: "outline",
+            text: e.cancelText,
+            disabled: e.loading || a(y),
+            onClick: ie
+          }, null, 8, ["text", "disabled"])) : d("", !0),
+          r.value && e.isUpdate && !R.value ? (o(), S(C, j({
+            key: 1,
+            type: "button",
+            variant: "primary",
+            text: e.submitText
+          }, e.submitProps, {
+            loading: e.loading || a(y),
+            onClick: B
+          }), null, 16, ["text", "loading"])) : d("", !0)
+        ]),
+        p("div", xe, [
+          r.value && G.value ? (o(), S(C, {
+            key: 0,
+            type: "button",
+            variant: "outline",
+            icon: "lucide:arrow-left",
+            text: "Previous",
+            onClick: ee
+          })) : d("", !0),
+          r.value && !R.value ? (o(), S(C, {
+            key: 1,
+            type: "button",
+            variant: e.isUpdate ? "outline" : "primary",
+            text: "Next",
+            iconRight: "lucide:arrow-right",
+            onClick: L
+          }, null, 8, ["variant"])) : d("", !0),
+          !r.value || R.value ? (o(), S(C, j({
+            key: 2,
+            type: "submit",
+            variant: "primary",
+            text: e.submitText
+          }, e.submitProps, {
+            loading: e.loading || a(y)
+          }), null, 16, ["text", "loading"])) : d("", !0)
+        ])
+      ], 2)) : d("", !0)
     ], 34));
   }
 });
 export {
-  ke as default
+  qe as default
 };

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

@@ -11,6 +11,7 @@ interface Props {
     readonly?: boolean;
     error?: string;
     isUpdate?: boolean;
+    label?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (payload: IFormFieldChangePayload) => any;
@@ -21,12 +22,12 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     onAddonAction?: (action: string) => any;
     onAddonChange?: (name: string, payload: IFormFieldChangePayload) => any;
 }>, {
-    disabled: boolean;
-    size: InputSize;
+    readonly: boolean;
     variant: InputVariant;
+    size: InputSize;
     rounded: InputRounded;
     error: string;
-    readonly: boolean;
+    disabled: boolean;
     isUpdate: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;